/*
Theme Name: Mi Tema Personalizado
Theme URI: https://desta.canguro.cl/
Author: Tu Nombre
Description: Un tema para la landing page.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mi-landing-theme
*/

/* =================================
   1. Reset Básico & Tipografía
   ================================= */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

a {
    color: #0073aa;
    text-decoration: none;
}

a:hover {
    color: #005c88;
}

/* =================================
   2. HEADER / FOOTER
   ================================= */
#page {
    /* FIX: Permitimos el scroll vertical, ocultamos el horizontal excesivo */
    overflow-x: hidden;
    overflow-y: visible;
}

#main-content {
    /* Mantenemos el ancho para el contenido que *no* queremos ancho completo */
    width: 100%;
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0px 0;
}

footer.site-footer {
    background-color: #004d80;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

/* =================================
   3. HERO (Estilos generales de .hero-banner)
   ================================= */

.hero-banner {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    min-height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.hero-content {
    color: #ffffff;
    max-width: 700px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}

.hero-content h1 {
    font-size: 3em;
    margin-bottom: 0.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
    font-size: 1.5em;
    margin-bottom: 1.5em;
}

/* =================================
   4. BOTÓN CTA (Genérico)
   ================================= */

.btn-cta {
    display: inline-block;
    background-color: #e74c3c;
    color: #ffffff !important;
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-cta:hover {
    background-color: #c0392b;
}

/* =================================
   5. SECCIONES GENERALES
   ================================= */

section {
    padding: 60px 0;
    text-align: center;
}

section:nth-child(odd) {
    background-color: #f8f8f8;
}

section h2 {
    font-size: 2em;
    margin-bottom: 1em;
    color: #2c3e50;
}

/* =================================
   6. FEATURES (GRID)
   ================================= */

.features-section {
    padding: 80px 0;
    background-color: #f4f7f9;
    text-align: center;
}

.features-section h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: #333;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.grid-item {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.grid-item h3 {
    color: #0073aa;
    margin-top: 15px;
    margin-bottom: 10px;
}

/* ============================
   HERO ESTILO DENTIA (Banner principal con imagen) - MODIFICADO
============================ */

.hero-dentia {
    position: relative;
    width: 100%;
    height: 69vh;
    min-height: 607px;
    background: linear-gradient(90deg, #1f4f8f 0%, #d8e2f3 100%);
    display: flex;
    align-items: center;
    /* 🛠️ MODIFICADO: Centraliza ligeramente el contenido principal */
    justify-content: space-around; 
    /* 🛠️ MODIFICADO: Reducimos el padding horizontal para acercar elementos */
    padding: 0 40px; 
    overflow: hidden;

    /* 🛠️ SOLUCIÓN FINAL: Mueve el Hero hacia arriba exactamente la altura del Header fijo */
    margin-top: -10px; 
    /* 🛠️ SOLUCIÓN FINAL: Devuelve el espacio interno para que el contenido no quede debajo del Header */
    padding-top: 120px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.1);
}

.hero-inner {
    z-index: 10;
    /* 🛠️ MODIFICADO: Aumentamos el ancho máximo y eliminamos el desplazamiento */
    max-width: 650px;
    color: #fff;
    transform: translateX(0);
    text-align: left; 
    margin-left: -25%;
}

.hero-top-text {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.hero-btn {
    margin-top: -20px;
    display: inline-block;
    background: #007bff;
    padding: 15px 30px;
    border-radius: 6px;
    color: #fff !important;
    font-weight: bold;
    transition: background 0.3s;
}

.hero-btn:hover {
    background: #0069d9;
}

.hero-rating {
    margin-top: 25px;
    color: #fff;
    font-size: 1rem;
}

.hero-image {
    position: absolute;
    /* 🛠️ MODIFICADO: Movemos la imagen más a la izquierda (10% en lugar de 18%) */
    right: 20%; 
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    z-index: 5;
}

.hero-image img {
    height: 95%;
    object-fit: contain;
    pointer-events: none;
}

/* =================================
   6. BARRA DE CONTACTO (Iconos + Texto)
   ================================= */

.contact-bar-section {
    background-color: #004d80 !important;
    color: #ffffff; 
    padding: 35px 0;
    /* 🛠️ AGREGADO: Asegurar que no haya un borde superior no deseado */
    border-top: none;
}

.contact-bar-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}

.contact-item {
    display: flex;
    align-items: center;
    /* 🛠️ MODIFICADO: Asegura alineación lateral (al inicio de cada columna) */
    justify-content: flex-start;
    border-right: 1px solid rgba(255, 255, 255, 0.2); 
    padding: 0 20px;
}

.contact-item:last-child {
    border-right: none;
}

.icon-box {
    margin-right: 15px;
}

.icon-box i {
    font-size: 2.5em;
    color: #4da6ff;
}

.info-box {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.info-box h4 {
    margin: 0 0 5px 0;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: normal;
    color: #cccccc;
    letter-spacing: 0.5px;
}

.info-box p {
    margin: 0;
    font-size: 1.1em;
    font-weight: bold;
    color: #ffffff;
}

/* =================================
   6. BARRA DE CONTACTO (Iconos + Texto) - CONTINUACIÓN
   ================================= */

/* Forzar a los íconos a usar la fuente Font Awesome */
.fa, .fas, .far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
}

/* 🛠️ CORRECCIÓN DE ICONOS: Regla específica para Iconos de Marca (Redes Sociales) */
.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400; /* ESTO ES CRUCIAL PARA ICONOS DE MARCA */
}


/* =================================
   7. SECCIÓN ABOUT US (2 Columnas)
   ================================= */

.about-section {
    /* 🚨 MODIFICACIÓN CRUCIAL 1: Fondo gris a ancho completo */
    background-color: #f8f8f8;
    width: 100%; /* Asegura que la sección ocupa todo el ancho de la ventana */
    padding: 80px 0;
    text-align: center; /* Centramos para móvil por defecto */
}

.about-container {
    /* El contenedor interno debe mantener el ancho limitado y centrarse */
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 60px;
    align-items: center;
}

/* --- Estilos Columna Imágenes --- */
.about-images {
    display: flex;
    gap: 20px;
}

.about-images img {
    width: 50%;
    border-radius: 20px;
    object-fit: cover;
    height: 350px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-images img:hover {
    transform: translateY(-5px) scale(1.03); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); 
    cursor: pointer;
}

/* --- Estilos Columna Texto --- */
.about-content {
    text-align: left;
}

.section-subtitle {
    color: #4da6ff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.about-content h2 {
    color: #002b4d;
    font-size: 2.5em;
    line-height: 1.2;
    margin-bottom: 20px;
}

.about-content p {
    color: #666;
    margin-bottom: 30px;
    font-size: 1.1em;
}

/* --- Lista de Características (Checkmarks) --- */
.features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.features-list li {
    font-weight: bold;
    color: #002b4d;
    display: flex;
    align-items: center;
    font-size: 0.95em;
    margin-bottom: 5px; /* Asegura un pequeño espacio entre ítems */
}

.features-list li i {
    color: #4da6ff;
    margin-right: 10px;
}

/* --- Botón Azul --- */
.btn-primary {
    display: inline-block;
    background-color: #4da6ff;
    color: #fff !important;
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-primary:hover {
    background-color: #0073aa;
}

/* 🚨 NUEVO: Botones de Igual Tamaño */
.about-actions {
    display: flex; /* Habilitar Flexbox */
    gap: 15px;    /* Espacio entre los botones */
    margin-top: 30px; 
}

/* Aplicar Flex: 1 al estilo de botón principal dentro de about-actions */
.about-actions .btn-primary {
    flex: 1; /* Ocupar el mismo espacio */
    text-align: center; /* Centrar el texto en el botón */
    display: block; /* Necesario para que flex: 1 funcione bien en anclas */
    width: auto; /* Anula cualquier ancho fijo */
}


/* =================================
   8. SECCIÓN TESTIMONIOS (GRID ESTÁTICO)
   ================================= */

.testimonial-wrapper {
    /* Mantenemos el máximo ancho del contenido */
    max-width: 1200px;
    width: 90%;
    margin: 0 auto; 
    position: relative; 
}

/* 1. El Contenedor que ahora es un GRID */
.testimonial-grid-container {
    display: grid;
    /* GRID: 3 columnas de igual tamaño con espacio de 30px */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; 
    
    /* Eliminamos todas las propiedades de scroll y slider */
    overflow-x: visible; 
    scroll-snap-type: none;
    scroll-behavior: auto;
    
    padding: 0;
    margin: 0 auto;
    width: 100%; 
}

/* --- Estilo de cada Tarjeta --- */
.testimonial-card {
    /* Eliminamos flex y min-width de slider */
    min-width: auto; 
    position: relative;
    overflow: hidden;

    background-color: #fff;
    padding: 25px; 
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: left;
    
    border-top: 5px solid #4da6ff;
}

/* --- Flechas de Navegación (ELIMINADAS) --- */
/* Ocultamos completamente si el PHP aún las tiene */
.slider-nav {
    display: none !important;
}

/* --- Estilos de Contenido (Se mantienen) --- */

.testimonial-card p {
    color: #333;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 20px; 
    /* Altura consistente para evitar saltos en el grid */
    min-height: 80px; 
    max-height: 150px; 
    overflow: hidden; 
}

.testimonial-card .quote-icon {
    font-size: 1.5em; 
    color: #4da6ff;
    margin-bottom: 15px;
}

.customer-info {
    display: flex;
    align-items: center;
    margin-top: 15px; 
}

.customer-avatar {
    width: 50px; 
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 53px;
}

.customer-info h4 {
    margin: 0;
    font-size: 1.1em;
    color: #002b4d;
}

.customer-info span {
    font-size: 0.85em;
    color: #666;
    display: block;
}

/* =================================
   FIN SECCIÓN TESTIMONIOS
   ================================= */
   
/* =================================
   9. COMPENSACIÓN PARA HEADER FIJO (NUEVO)
   ================================= */
#page {
    /* 🛠️ MODIFICACIÓN: Eliminamos la compensación global */
    padding-top: 0 !important; 
} 

/* =================================
   10. NAVEGACIÓN (HEADER FIJO) - CSS PURO
   ================================= */

/* Contenedor principal del Header */
.main-header {
    padding: 23px 5%;
    background-color: #004d80; /* Azul oscuro */
    color: #fff;
    position: fixed; /* Lo fijamos en la parte superior */
    width: 90%;
    top: 0;
    left: 0;
    z-index: 99; /* Asegura que esté por encima de todo */
    /* 🛠️ MODIFICACIÓN CRUCIAL: Eliminamos el box-shadow para quitar la línea blanca */
    box-shadow: none; 
}

.header-container {
    display: flex;
    justify-content: space-between; /* Empuja el logo a la izquierda y el menú a la derecha */
    align-items: center;            /* Centra todo verticalmente */
    font-size: 18px;
}

/* Alineación de Logo + Texto */
.header-left .logo-link-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;                      /* Espacio entre el logo y el texto */
    text-decoration: none;
}

.site-logo, .custom-logo {
    height: 45px;                   /* Ajusta el alto de tu logo */
    width: auto;
}

.site-title-text {
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
}

/* Menú de Navegación Horizontal */
.main-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px;                      /* Espacio entre cada enlace del menú */
}

.main-navigation ul li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
}

/* Ocultar el checkbox del menú móvil por defecto */
.menu-toggle-input, .menu-toggle-label {
    display: none;
}

/* Marca/Logo del Sitio */
.logo-container {
    display: flex;         /* Activa el alineado horizontal */
    align-items: center;   /* Centra el logo y el texto verticalmente */
    gap: 15px;            /* Espacio entre el logo y el texto */
}

.header-logo {
    width: 50px;           /* Ajusta el tamaño de tu logo */
    height: auto;
    border-radius: 50%;    /* Si quieres que sea circular como en la imagen */
}

.brand-name {
    font-size: 24px;
    color: #ffffff;        /* Color blanco para resaltar en fondo azul */
    font-weight: bold;
    margin: 0;             /* Quita márgenes por defecto */
}

.site-branding a {
    /* 🚨 NOTA: Este selector será menos importante ahora que usamos .logo-link-wrapper */
    color: #fff !important; 
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s;
}

.site-branding a:hover {
    color: #4da6ff !important;
}

/* 🚨 NUEVO: Oculta el input checkbox en todo momento (CSS PURO) */
.menu-toggle-input {
    display: none;
}

/* 🚨 NUEVO: Oculta la etiqueta/botón hamburguesa en desktop */
.menu-toggle-label {
    display: none; 
    color: #fff;
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px; /* Área de click cómoda */
}

/* Navegación Principal (Desktop) */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-navigation li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s;
}

.main-navigation li a:hover {
    color: #4da6ff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Estilo especial para el número de teléfono */
.nav-phone a {
    background-color: #4da6ff;
    border-radius: 5px;
    padding: 10px 18px !important;
    margin-left: 15px;
}
.nav-phone a:hover {
    background-color: #0073aa;
    color: #fff;
}


/* =================================
   11. MEDIA QUERIES (RESPONSIVIDAD MÓVIL) 📱
   ================================= */

@media (max-width: 900px) {
    
    /* 1. Contenedor Principal y Paddings */
    #main-content {
        /* Reduce el ancho para evitar demasiado espacio en los lados */
        width: 95%;
        padding: 10px 0;
    }
    
    section {
        padding: 40px 0;
    }
    
    /* 2. Títulos y Textos */
    section h2 {
        font-size: 1.8em;
    }

    /* 3. Hero Banner */
    .hero-dentia {
        flex-direction: column;
        justify-content: flex-start;
        padding: 40px 0px;
        height: auto;
        min-height: 500px;
        /* 🛠️ MODIFICACIÓN CLAVE 1: Centra los elementos hijos horizontalmente */
        align-items: center;
    }
    
    .hero-inner {
        transform: translateX(0); /* Quita el desplazamiento lateral */
        text-align: center; /* Centra el texto dentro del bloque */
        max-width: 100%;
        /* 🛠️ MODIFICACIÓN CLAVE 2: Centra el bloque .hero-inner horizontalmente (arriba/derecha/abajo/izquierda) */
        margin: 120px auto 0 auto; 
        margin-left: 42px;
    }

    .hero-title {
        font-size: 2.5rem; /* Reduce el tamaño del título principal */
    }
    
    /* Ocultamos la imagen en el móvil para ahorrar espacio */
    .hero-image {
        display: none; 
    }

    /* 4. Barra de Contacto (Pasa de 3 a 1 columna) */
    .contact-bar-section {
        padding: 20px 0; /* Reduce padding */
    }

    .contact-bar-grid {
        grid-template-columns: 1fr; /* Una sola columna */
    }

    .contact-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 15px 0;
    }

    .contact-item:last-child {
        border-bottom: none;
    }
    
    /* 5. About Us (Pasa de 2 a 1 columna) */
    .about-container {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 30px;
    }

    .about-content {
        text-align: center; /* Centramos el texto para móvil */
    }
    
    /* 🚨 NUEVO: Centrar los botones en móvil */
    .about-actions {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 90%; /* Limita el ancho para que no se estiren demasiado */
    }
    
    .about-images {
        flex-direction: column; /* Apilamos las imágenes */
        align-items: center;
        gap: 15px;
    }

    .about-images img {
        width: 80%; /* Hacemos las imágenes más grandes */
        height: auto;
        max-height: 250px;
    }

    .features-list {
        grid-template-columns: 1fr; /* La lista de features pasa a 1 columna */
        /* 🚨 NUEVO: Centrar la lista para móvil */
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    /* 6. Features (Grid de Servicios, pasa de 3 a 1 columna) */
    .grid-container {
        grid-template-columns: 1fr; /* Una sola columna para los features */
    }

    /* 7. Testimonios (Grid, pasa de 3 a 1 columna) */
    .testimonial-grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* 🚨 NUEVO/ACTUALIZADO: Hacemos visible el icono hamburguesa (CSS PURO) */
    .menu-toggle-label {
        display: block; 
    }

    .main-navigation {
        /* Oculta la navegación por defecto en móvil */
        display: none; 
        width: 100%;
        position: absolute;
        top: 60px; /* Debajo del header */
        left: 0;
        background-color: #003366; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    /* 🚨 LA MAGIA CSS: Muestra el menú cuando el checkbox está marcado */
    .menu-toggle-input:checked ~ .main-navigation {
        display: block; 
    }

    .main-navigation ul {
        flex-direction: column; /* Apila los enlaces */
        text-align: center;
    }

    .main-navigation li a {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .nav-phone a {
        background: none; 
        margin: 0;
        color: #4da6ff !important;
    }
    
    .nav-phone a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}
/* =================================
   12. FOOTER (4 COLUMNAS)
   ================================= */

.footer-dark {
    background-color: #002b4d; /* Azul oscuro primario */
    color: #f8f8f8;
}

.footer-widgets-area {
    padding: 60px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    /* Usamos Grid para las columnas del footer */
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1.5fr; /* Distribución de anchos */
    gap: 40px;
    text-align: left;
}

/* Título de Widgets (Company, Services, Contact) */
.widget-title {
    color: #4da6ff;
    font-size: 1.2em;
    margin-bottom: 25px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Columna 1: Logo y Texto */
.footer-logo a {
    color: #fff !important;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
    display: block;
}

.widget-about p {
    font-size: 0.9em;
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 20px;
}

/* Iconos Sociales */
.footer-social a {
    color: #ccc;
    font-size: 1.1em;
    margin-right: 15px;
    transition: color 0.3s;
}

.footer-social a:hover {
    color: #4da6ff;
}

/* Columna 2 y 3: Listas de Enlaces */
.widget-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-links li {
    margin-bottom: 10px;
}

.widget-links a {
    color: #ccc;
    font-size: 0.95em;
    transition: color 0.3s;
}

.widget-links a:hover {
    color: #fff;
    padding-left: 5px; /* Pequeño efecto hover */
}

/* Columna 4: Contacto */
.widget-contact .contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.widget-contact .contact-item i {
    color: #4da6ff;
    font-size: 1.1em;
    margin-right: 10px;
    margin-top: 4px;
}

.widget-contact .contact-item p {
    margin: 0;
    font-size: 0.95em;
    color: #ccc;
}

.widget-contact .contact-item a {
    color: #f8f8f8;
    transition: color 0.3s;
}

.widget-contact .contact-item a:hover {
    color: #4da6ff;
}

/* Barra de Copyright (Bottom Footer) */
.footer-copyright {
    padding: 15px 0;
    font-size: 0.85em;
    color: #999;
}

/* Usamos flexbox para alinear copyright y links */
.footer-copyright .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: none; /* Desactivar grid para este contenedor */
}

.footer-meta-links a {
    color: #999;
    margin-left: 20px;
}

.footer-meta-links a:hover {
    color: #fff;
}
@media (max-width: 900px) {
    /* ... (resto de reglas de responsividad) ... */

    /* Footer Responsivo */
    .footer-widgets-area {
        padding: 40px 0;
    }
    
    .footer-container {
        /* Pasa de 4 columnas a 1 columna apilada */
        grid-template-columns: 1fr; 
        gap: 30px;
        text-align: center; /* Centramos elementos para móvil */
    }
    
    /* Centrar items del widget (Logo y redes) */
    .widget-about {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Alineación de widgets de enlace */
    .widget-links ul {
        display: flex;
        flex-wrap: wrap; /* Permite que los enlaces se envuelvan */
        justify-content: center;
        gap: 10px 15px;
    }
    
    .widget-links li {
        margin-bottom: 0;
    }
    
    /* Contacto apilado */
    .widget-contact .contact-item {
        justify-content: center;
    }

    /* Copyright Bar */
    .footer-copyright .footer-container {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-meta-links {
        margin-top: 10px;
    }
    
    .footer-meta-links a {
        margin: 0 10px;
    }
}
/* =================================
   13. ESTILOS DE PÁGINAS GENERALES
   ================================= */

/* Título superior de las páginas (que no son la Home) */
.page-title {
    font-size: 3em;
    color: #002b4d;
    margin-top: 50px;
    margin-bottom: 10px;
    text-align: center;
}

.page-description {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 40px;
    text-align: center;
}


/* =================================
   14. PÁGINA DE CONTACTO
   ================================= */

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Formulario más grande que info */
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.contact-form-wrapper {
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.contact-form-wrapper h3 {
    color: #002b4d;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.8em;
}

/* Estilos para los campos de formulario (si usas CF7, deberás ajustar los selectores) */
.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper input[type="tel"],
.contact-form-wrapper textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
}

.contact-form-wrapper input[type="submit"] {
    background-color: #4da6ff;
    color: white;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.contact-form-wrapper input[type="submit"]:hover {
    background-color: #0073aa;
}

/* Ítems de Información en Contacto */
.info-details {
    margin-bottom: 30px;
}

.contact-item-detail {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.contact-item-detail i {
    color: #4da6ff;
    font-size: 1.5em;
    margin-right: 15px;
    margin-top: 5px;
}

.contact-item-detail h4 {
    margin: 0 0 5px 0;
    font-size: 0.9em;
    color: #333;
}

.contact-item-detail p {
    margin: 0;
    font-size: 1.1em;
    font-weight: bold;
}

.contact-info-map h3 {
    color: #002b4d;
    font-size: 1.8em;
    margin-bottom: 25px;
}

.contact-map iframe {
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Media Query para Contacto Móvil */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}
/* =================================
   15. ESTILOS DE PÁGINAS GENERALES
   ================================= */

/* Título superior de las páginas (que no son la Home) */
.page-title {
    font-size: 3em;
    color: #002b4d;
    margin-top: 50px;
    margin-bottom: 10px;
    text-align: center;
}

.page-description {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 40px;
    text-align: center;
}


/* =================================
   15. ESTILOS DE PÁGINA DE SERVICIO INDIVIDUAL
   ================================= */

/* Contenedor general para centrar el contenido */
.container-narrow {
    max-width: 900px; /* Un poco más estrecho para el detalle del servicio */
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
}

.service-intro {
    background-color: #f8f8f8;
    padding-top: 50px;
    padding-bottom: 20px;
    text-align: center;
}

.page-title {
    font-size: 3em;
    color: #002b4d;
    margin-bottom: 30px;
    margin-top: 10%;
}

/* Estilo para la imagen destacada */
.service-featured-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

/* Estilo para el contenido del texto */
.service-text-description {
    line-height: 1.8;
    color: #444;
    text-align: left;
    font-size: 1.1em;
}

.service-text-description h2 {
    color: #004d80;
    margin-top: 1.5em;
}

.service-cta {
    text-align: center;
    padding: 50px 0;
}
/* =================================
   16. ESTILOS DE PLANTILLA DE SERVICIO DETALLADO
   ================================= */

/* --- 1. Banner Superior --- */

.page-header-banner {
    background-color: #f4f7f9; /* Fondo gris claro */
    padding: 100px 0 50px;
    margin-top: -30px; /* Compensa la altura del header fijo */
    padding-top: 100px;
    border-bottom: 5px solid #004d80;
}

.header-content-inner {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    text-align: left;
    margin-top: 50px;
}

.page-title-detail {
    font-size: 3em;
    color: #002b4d;
    margin-top: 0;
}

.breadcrumb-nav {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 10px;
}

.breadcrumb-nav a {
    color: #0073aa;
}

/* --- 2. Diseño de Contenido en Grid (2 Columnas) --- */

.service-detail-section {
    padding: 60px 0;
}

.service-detail-grid {
    display: grid;
    /* Divide el espacio: 1.5 partes para el texto, 1 parte para las imágenes */
    grid-template-columns: 1.5fr 1fr; 
    gap: 50px;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    text-align: left;
}

.service-text-column h2,
.service-text-column h3 {
    color: #004d80;
    margin-top: 1.5em;
}

/* Estilo para el contenido de texto (párrafos, listas) */
.service-content-wrapper p {
    line-height: 1.8;
    color: #444;
    margin-bottom: 1.5em;
}

/* --- 3. Estilos de Imágenes y CTA --- */

.service-image-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-image-box img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.cta-service-box {
    background-color: #e6f0ff;
    border-left: 5px solid #0073aa;
    padding: 20px;
    margin-top: 30px;
    border-radius: 5px;
}

.cta-service-box p {
    font-weight: bold;
    color: #002b4d;
    margin-top: 0;
}

/* --- 4. MEDIA QUERY (Responsividad Móvil) --- */

@media (max-width: 900px) {
    
    .page-header-banner {
        padding: 80px 0 30px;
    }

    .page-title {
    font-size: 3em;
    color: #002b4d;
    margin-bottom: 15px;
    margin-top: 30%;
    }

    .page-title-detail {
        font-size: 2em;
    }
    
    /* La cuadrícula de 2 columnas se convierte en 1 columna apilada */
    .service-detail-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Mueve las imágenes al inicio en móvil */
    .service-image-column {
        order: -1; 
    }
    
    .service-text-column,
    .service-image-column {
        padding: 0;
    }
}

/* =================================
   17. ESTILOS DEL LOGO EN LA BARRA DE NAVEGACIÓN (¡NUEVO!)
   ================================= */

/* Contenedor principal que alinea el logo y el texto */
.logo-link-wrapper {
    display: flex; /* Habilita el flexbox para la alineación horizontal */
    align-items: center; /* Centra verticalmente el logo y el texto */
    text-decoration: none; /* Asegura que el enlace no tenga subrayado */
}

/* Estilo para el logo (imagen) */
.logo-link-wrapper img {
    max-height: 40px; /* Define la altura máxima del logo (ajusta este valor) */
    width: auto;
    margin-right: 10px; /* Espacio entre el logo y el texto "Destapes Chile" */
    margin-left: 0px;
}

/* Estilo para el texto (si se mantiene) */
.site-title-text {
    font-size: 1.5em; /* Ajusta el tamaño del texto "Destapes Chile" */
    font-weight: bold;
    color: #fff; /* Usamos blanco para que contraste con el fondo azul del header */
}

/* Alineación del texto "Destapes Chile" dentro del header */
.site-branding {
    /* Es bueno asegurarse que el contenedor del logo/texto use las reglas de flexbox */
    display: flex;
    align-items: center;
}

/* Ajuste del tamaño del logo en móviles (opcional) */
@media (max-width: 768px) {
    .logo-link-wrapper img {
        max-height: 30px; 
    }
    .site-title-text {
        font-size: 1.2em;
    }
}
/* ===================================================
   ESTILOS SECCIÓN SERVICIOS (TARJETAS BLANCAS)
   =================================================== */
.services-cards-section {
    padding: 100px 0;
    background-color: #fcfdfe; /* Un blanco azulado muy tenue como el de la foto */
    text-align: center;
}

.services-header {
    max-width: 800px;
    margin: 0 auto 60px;
}

.services-header h2 {
    font-size: 38px;
    color: #002b4d;
    font-weight: 800;
    margin: 10px 0 20px;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.service-card {
    background: #ffffff;
    padding: 50px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03); /* Sombra muy suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.07);
}

.service-icon {
    margin-bottom: 25px;
}

.service-icon img {
    height: 60px; /* Tamaño del icono lineal */
    width: auto;
}

.service-card h3 {
    color: #002b4d;
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 700;
}

.service-card p {
    color: #777;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* El botón circular con el "+" */
.service-plus {
    width: 40px;
    height: 40px;
    border: 1px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #002b4d;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s;
}

.service-card:hover .service-plus {
    background-color: #4da6ff;
    color: #fff;
    border-color: #4da6ff;
}

/* Botón central inferior */
.services-footer-btn {
    margin-top: 60px;
}

.btn-all-services {
    background-color: #4da6ff;
    color: #fff !important;
    padding: 15px 35px;
    border-radius: 10px;
    font-weight: bold;
    display: inline-block;
}

/* Móvil */
@media (max-width: 768px) {
    .services-header h2 { font-size: 28px; }
    .service-card { padding: 40px 20px; }
}

/* Contenedor del icono */
.service-icon {
    width: 80px;
    height: 80px;
    background-color: #f0f7ff; /* Azul muy pálido de fondo */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: 0.3s;
}

/* El icono de Font Awesome */
.service-icon i {
    font-size: 35px;
    color: #4da6ff; /* El azul de tu marca */
}

/* Efecto cuando pasas el ratón sobre la tarjeta */
.service-card:hover .service-icon {
    background-color: #4da6ff;
}

.service-card:hover .service-icon i {
    color: #ffffff; /* El icono se vuelve blanco al hacer hover */
}

/* ===================================================
   ESTILOS SECCIÓN ESTADÍSTICAS (FRANJA AZUL)
   =================================================== */
.stats-counter-section {
    background-color: #01589a !important; /* Azul oscuro idéntico a tu marca y la imagen */
    padding: 1px 0 !important;
    color: #ffffff;
    text-align: center;
    padding-bottom: 25px !important;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap; /* Para que sea responsivo en móviles */
    gap: 30px;
}

.stat-item {
    flex: 1;
    min-width: 200px;
}

.stat-number {
    font-size: 42px; /* Tamaño grande para los números */
    font-weight: 800;
    margin-bottom: 5px;
    display: block;
    color: #fff;
}

.stat-text {
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    margin: 0;
    opacity: 0.9; /* Un toque de transparencia para el texto secundario */
}

/* Ajuste para dispositivos móviles */
@media (max-width: 768px) {
    .stats-counter-section {
        padding: 40px 0;
    }
    .stat-number {
        font-size: 32px;
    }
    .stat-text {
        font-size: 14px;
    }
}
/* Definición de la animación: aparecer y subir un poco */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stats-counter-section {
    background-color: #002b4d;
    padding: 60px 0;
    color: #ffffff;
    overflow: hidden;
}

.stat-item {
    opacity: 0; /* Estado inicial invisible */
    animation: fadeInUp 0.8s ease-out forwards; /* Aplicamos la animación */
}

/* Retrasos para que aparezcan uno por uno (Efecto Cascada) */
.stat-item:nth-child(1) { animation-delay: 0.2s; }
.stat-item:nth-child(2) { animation-delay: 0.4s; }
.stat-item:nth-child(3) { animation-delay: 0.6s; }
.stat-item:nth-child(4) { animation-delay: 0.8s; }

.stat-number {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 5px;
    color: #ffff; /* Color de realce para los números */
}

.stat-text {
    font-size: 16px;
    opacity: 0.9;
}
/* ===================================================
   ESTILOS SECCIÓN POR QUÉ ELEGIRNOS (COLLAGE)
   =================================================== */
.why-choose-us {
    padding: 100px 0;
    background-color: #ffffff;
}

.why-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* --- TEXTO Y GRID --- */
.why-text-content { flex: 1; }

.why-text-content h2 {
    font-size: 38px;
    color: #002b4d;
    font-weight: 800;
    line-height: 1.2;
    margin: 15px 0 25px;
}

.separator-line {
    border: 0;
    border-top: 1px solid #eee;
    margin: 30px 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.benefit-item h4 {
    color: #002b4d;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
}

.benefit-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

/* --- COLLAGE DE IMÁGENES --- */
.why-image-collage {
    flex: 1;
    display: flex;
    gap: 20px;
    align-items: center;
}

.collage-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.why-image-collage img {
    border-radius: 40px; /* Bordes muy redondeados como la foto */
    object-fit: cover;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.img-top { width: 220px; height: 200px; }
.img-bottom { width: 220px; height: 240px; }
.img-main { width: 280px; height: 460px; }

/* --- RESPONSIVO --- */
@media (max-width: 991px) {
    .why-container { flex-direction: column; text-align: center; }
    .why-image-collage { justify-content: center; }
    .benefits-grid { grid-template-columns: 1fr; text-align: left; }
}

@media (max-width: 600px) {
    .why-image-collage { flex-direction: column; }
    .img-top, .img-bottom, .img-main { width: 100%; height: auto; }
}

/* ===================================================
   ESTILOS SECCIÓN FAQ (ACORDEÓN)
   =================================================== */
.faq-section {
    padding: 100px 0;
    background-color: #ffffff;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
    display: flex;
    gap: 60px;
}

.faq-header { flex: 1; }
.faq-accordion { flex: 1.5; }

.faq-header h2 {
    font-size: 38px;
    color: #002b4d;
    font-weight: 800;
    margin-top: 15px;
}

/* Estilo de cada item */
.faq-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 20px 0;
    font-size: 17px;
    font-weight: 700;
    color: #002b4d;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s;
}

.faq-question i {
    font-size: 14px;
    transition: transform 0.3s;
    color: #4da6ff;
}

.faq-question:hover { color: #4da6ff; }

/* Respuesta (Oculta por defecto) */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
    color: #666;
    line-height: 1.6;
}

.faq-answer p { 
    padding-bottom: 20px; 
    margin: 0;
    text-align: left;
}

/* Clase cuando está abierto */
.faq-item.active .faq-answer {
    max-height: 500px; /* Suficiente para el contenido */
    transition: max-height 0.4s cubic-bezier(1, 0, 1, 0);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* Responsivo */
@media (max-width: 991px) {
    .faq-container { flex-direction: column; }
    .faq-header { text-align: center; }
}
/* ===================================================
   ESTILOS SECCIÓN LLAMADO A LA ACCIÓN (CELESTE)
   =================================================== */
.cta-blue-section {
    background-color: #4A7CD2 !important; /* El celeste vibrante de la captura */
    padding: 30px 0;
    margin-top: 0;
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cta-text h2 {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

/* Estilo del Botón Oscuro */
.btn-book {
    background-color: #001a33; /* Azul muy oscuro casi negro */
    color: #ffffff;
    padding: 9px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-book:hover {
    background-color: #002b4d;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Responsivo */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .cta-text h2 {
        font-size: 26px;
    }
}
.testimonials-slider-section {
    padding: 80px 0;
    background-color: #f8fbff;
    text-align: center;
}

.testimonialSwiper {
    padding: 40px 20px 60px !important;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    height: auto;
    position: relative;
}

.quote-icon {
    color: #4da6ff;
    font-size: 24px;
    margin-bottom: 20px;
}

.customer-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}

.testimonial-card h4 { margin: 5px 0; color: #002b4d; }
.customer-tag { color: #888; font-size: 13px; display: block; margin-bottom: 15px; }

/* Estilo puntos de paginación Swiper */
.swiper-pagination-bullet-active {
    background: #4da6ff !important;
}

.testimonial-card {
    background: #ffffff !important;
    padding: 35px 25px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important; /* Mantiene todas las tarjetas igual de altas */
    min-height: 340px !important;
}

.customer-avatar {
    margin-bottom: 60px !important;
}

.customer-avatar img {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #4da6ff !important;
}

.testimonial-card h4 {
    margin: 5px 0 !important;
    color: #002b4d !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.customer-tag {
    color: #777 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-bottom: 5px !important;
}

.stars {
    font-size: 14px !important;
    margin-bottom: 15px !important;
}

.testimonial-card p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #555 !important;
    margin: 0 !important;
    font-style: normal !important;
}

/* Color azul para los puntitos de abajo */
.swiper-pagination-bullet-active {
    background: #4da6ff !important;
}
.faq-side-image {
    margin-top: 30px; /* Espacio entre el título y la foto */
    width: 100%;
}

.img-faq-left {
    width: 45%;
}

/* Ajuste para móviles */
@media (max-width: 991px) {
    .faq-header {
        text-align: center;
        margin-bottom: 40px;
    }
    .img-faq-left {
        margin: 0 auto;
    }
}

/* Sección General */
.services-grid-section {
    padding: 80px 20px;
    background-color: #fff;
}

.services-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas en desktop */
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 70px;
}

/* Tarjeta Base */
.service-item-card {
    background: #f4f7fa; /* Gris azulado muy suave de fondo */
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
    padding: 40px 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

/* Tarjeta de Imagen */
.service-item-card.image-card {
    padding: 0;
}

.service-item-card.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contenido de Texto */
.service-content h3 {
    color: #002b4d;
    font-size: 22px;
    margin: 20px 0 15px;
}

.service-content p {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Iconos Azules */
.service-icon-blue {
    font-size: 40px;
    color: #1e73be; /* Azul de tu marca */
}

/* Estilo base del botón */
.btn-plus-float {
    position: absolute;
    bottom: 25px;
    left: 30px;
    width: 45px; /* Ancho inicial circular */
    height: 45px;
    background: #fff;
    color: #002b4d;
    border-radius: 50px; /* Redondeado tipo cápsula */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición fluida */
    overflow: hidden;
    white-space: nowrap;
    padding: 0;
}

/* Ocultar el texto "Ver más" por defecto */
.btn-plus-float span {
    display: inline-block;
    opacity: 0;
    max-width: 0;
    font-size: 14px;
    font-family: 'Arial', sans-serif;
    transition: all 0.3s ease;
    margin-left: 0;
}

/* EFECTO HOVER: Cuando pasas el mouse por la tarjeta O por el botón */
.service-item-card:hover .btn-plus-float {
    width: 120px; /* Se expande para que quepa el texto */
    background: #1e73be;
    color: #fff;
    padding: 0 15px;
    justify-content: space-around;
}

.service-item-card:hover .btn-plus-float span {
    opacity: 1;
    max-width: 100px;
    margin-left: 8px;
}
/* Contenedor Grid */
.services-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    margin-bottom: 70px;
}

/* Tarjeta Base */
.service-item-card {
    background: #f4f7fa;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
    padding: 40px 30px;
    /* Transición suave para elevación y sombra */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02); /* Sombra muy sutil inicial */
}

/* EFECTO HOVER: Elevación y Sombra Profunda */
.service-item-card:hover {
    transform: translateY(-12px); /* La tarjeta sube */
    background: #ffffff; /* Opcional: cambia a blanco puro al resaltar */
    box-shadow: 0 20px 40px rgba(0, 43, 77, 0.12); /* Sombra azulada elegante */
}

/* Ajuste para las imágenes decorativas */
.service-item-card.image-card {
    padding: 0;
}

.service-item-card.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Efecto Zoom en la foto al pasar el mouse */
.service-item-card.image-card:hover img {
    transform: scale(1.1);
}

/* --- El código del botón expandible (btn-plus-float) se mantiene igual --- */
/* Responsive */
@media (max-width: 1024px) {
    .services-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

@media (max-width: 768px) {
    .services-grid-container {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }
    .service-item-card {
        min-height: auto;
    }
}
/* Ocultar botón en PC */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

/* Estilos para Celulares (Menos de 768px) */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Mostrar botón */
    }

    .main-navigation {
        display: none; /* Ocultar menú por defecto */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #004481;
        padding: 20px;
        z-index: 1000;
    }

    .main-navigation.is-active {
        display: block; /* Mostrar cuando se haga clic */
    }

    .main-navigation ul {
        flex-direction: column; /* Lista vertical */
        gap: 15px;
    }
}
.main-header {
    position: relative;
    z-index: 9999; /* Esto asegura que el header siempre esté al frente */
}

/* Evita que el error o contenido tape el logo en móvil */
@media (max-width: 768px) {
    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }
}

/* ==========================================================================
   HEADER FIJO Y TRANSPARENTE
   ========================================================================== */

/* Estado inicial (Arriba de todo) */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 25px 0;
    background-color: #004481;  /* Transparente al inicio */
    transition: all 0.4s ease-in-out;
}

/* Estado cuando bajas (Scroll) */
.main-header.scrolled {
    background-color: #004481; /* Tu azul sólido */
    padding: 10px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   BANNER PRINCIPAL (HERO)
   ========================================================================== */
.hero-banner {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    /* Ajusta la ruta de la imagen si es necesario */
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('assets/images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
}

.hero-banner h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: 800;
}

/* ==========================================================================
   RESPONSIVO (MÓVIL)
   ========================================================================== */
@media (max-width: 768px) {
    .main-header {
        padding: 15px 0;
    }

    .hero-banner h1 {
        font-size: 2rem;
        padding: 0 10px;
    }

    /* Menú móvil desplegable */
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #004481;
        padding: 20px;
    }

    .main-navigation.is-active {
        display: block;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 20px;
        list-style: none;
        padding: 0;
    }
}

/* Estado inicial de la sección (Oculta y un poco abajo) */
.stats-counter-section {
    opacity: 0;
    transform: translateY(40px);
    transition: all 2.0s ease-out; /* Controla la velocidad del movimiento */
}

/* Estado cuando se activa (Se hace visible y sube) */
.stats-counter-section.appear {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos de la franja azul (para que se vea como en tu imagen) */
.stats-counter-section {
    background-color: #004481;
    color: white;
    padding: 60px 0;
}

.stats-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
    padding: 20px;
}