/* ===============================================
   ESTILOS PARA LA SECCIÓN HERO
   =============================================== */
.hero {
    background-color: var(--color-background); /* Usamos el gris claro de fondo */
    padding: 60px 0; /* Ajustamos el padding para esta sección */
}

.hero-content {
    display: flex; /* ¡La magia! Activa el modelo de caja flexible */
    align-items: center; /* Centra verticalmente el texto y la imagen */
    gap: 60px; /* Espacio entre la columna de texto y la de la imagen */
}

.hero-text {
    flex: 1; /* Hace que la columna de texto ocupe el espacio disponible */
    text-align: left; /* Alineamos el texto a la izquierda en escritorio */
}

.hero-image {
    flex: 1; /* Hace que la columna de imagen ocupe el espacio disponible */
}

.hero-image img {
    max-width: 100%; /* Asegura que la imagen nunca se salga de su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: var(--border-radius); /* Le ponemos los bordes redondeados */
    box-shadow: var(--shadow); /* Le añadimos una sombra sutil */
}

.hero-title {
    font-size: 3.2rem; /* Hacemos el título un poco más grande */
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* ===============================================
   ESTILOS PARA LA SECCIÓN DE SERVICIOS
   =============================================== */
.services-grid {
    display: grid;
    /* Crea 3 columnas de igual tamaño en escritorio */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; /* Espacio entre las tarjetas */
    margin-top: 50px;
}

.service-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.service-card:hover {
    /* Efecto de elevación al pasar el ratón */
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.service-card-icon svg {
    width: 48px;
    height: 48px;
    /* Le damos nuestro color de acento a los iconos */
    color: var(--color-secondary); 
    margin-bottom: 20px;
}

.service-card-title {
    font-size: 1.3rem;
    color: var(--color-primary); /* Usamos el azul oscuro para los títulos de tarjeta */
}

/* ===============================================
   RESPONSIVE PARA LA REJILLA DE SERVICIOS
   =============================================== */

/* Para tablets (hasta 992px de ancho), pasamos a 2 columnas */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Para móviles (hasta 768px de ancho), pasamos a 1 columna */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}


/* ===============================================
   OPTIMIZACIÓN PARA MÓVILES (Responsive)
   =============================================== */

/* Cuando la pantalla sea de 768px o menos (tablets y móviles)... */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column; /* Apila las columnas una encima de la otra */
        gap: 40px;
    }

    .hero-text {
        text-align: center; /* Centramos el texto de nuevo en móvil, queda mejor */
         
    }

    .hero-image {
        order: 1; /* Hacemos que la imagen aparezca PRIMERO */
    }

    .hero-title {
        font-size: 2.3rem; /* Ajustamos el tamaño del título para pantallas pequeñas */
    }
}

/* ===============================================
   ESTILOS PARA EL CARRUSEL DE TESTIMONIOS
   =============================================== */
.glide__slide {
    /* Ayuda a que las tarjetas tengan la misma altura */
    display: flex;
    height: auto;
}
.testimonial-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--shadow);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.testimonial-stars {
    color: #f6b01e; /* Color dorado para las estrellas */
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.testimonial-text {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-text);
    margin: 0 0 20px 0;
    flex-grow: 1; /* Hace que el texto ocupe el espacio para alinear autores */
}

.testimonial-author {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: var(--color-title);
}

.author-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Círculo perfecto */
    margin-right: 15px;
    object-fit: cover; /* Asegura que la imagen no se deforme */
}

/* Estilos para las flechas de Glide.js */
.glide__arrow {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow);
    width: 40px;
    height: 40px;
}
.glide__arrow:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.glide__arrow--disabled {
    opacity: 0.3;
}