/* ==================================== */
/* 🔑 1. Variables y Reseteo (IMPULSO CREATIVO) */
/* ==================================== */
:root {
    /* --- COLORES --- */
    --color-primary: #FF6B6B; /* Coral Brillante (Botones, Acentos) */
    --color-secondary: #48cfad; /* Menta Oscuro (WhatsApp, Contraste) */
    --color-text: #2D2D2D; /* Texto principal */
    --color-text-light: #555; /* Texto secundario/párrafos */
    --color-background-base: white;
    --color-light-bg: #f4f7f9; /* Fondo claro */
    --color-dark-bg: #222; /* Footer más oscuro */
    
    /* --- TIPOGRAFÍA --- */
    --font-heading: 'Montserrat', sans-serif; /* Más audaz para títulos */
    --font-body: 'Open Sans', sans-serif; /* Limpia para cuerpo de texto */
    --font-base-size: 16px; 
    --font-line-height: 1.6; 

    /* --- ESPACIADO Y LAYOUT --- */
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --max-content-width: 1200px;

    /* --- BORDES Y EFECTOS --- */
    --border-radius-base: 15px; /* Más redondeado para estilo creativo */
    --border-radius-btn: 10px; /* Botones más redondeados */
    --border-thickness: 4px; /* Grosor de líneas de énfasis */
    --box-shadow-elevation: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra más fuerte */

    /* 🔑 NUEVAS VARIABLES PARA EFECTOS CREATIVOS */
    --shadow-creative: 5px 5px 0px 0px var(--color-primary); /* Borde 3D sutil */
    --shadow-creative-hover: 10px 10px 0px 0px var(--color-secondary); /* Cambio de sombra en hover */
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { 
    scroll-behavior: smooth; 
} 

body {
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: var(--font-line-height);
    background-color: var(--color-background-base);
}

h1, h2, h3 {
    font-family: var(--font-heading);
    margin-bottom: var(--spacing-sm);
    line-height: 1.1; /* Más compacto */
}
h1 { font-size: 3.8rem; } /* Más grande y audaz */
h2 { font-size: 2.8rem; } 
h3 { font-size: 1.8rem; }


/* ==================================== */
/* 🎯 2. Utilities y Layouts */
/* ==================================== */
.container { 
    max-width: var(--max-content-width); 
    margin: 0 auto;
    padding: 0 var(--spacing-md); 
}
.section-padding { 
    padding: var(--spacing-lg) 0;
}
.full-height {
    min-height: 100vh; 
}

/* Flexbox para 3 columnas responsivas (Servicios, Proyectos) */
.grid-3-col {
    display: grid;
    /* Permite hasta 4 columnas para el portafolio (minmax 280px) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

/* Grid para Nosotros y Contacto */
.grid-2-col-us, .grid-2-col-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}
/* Estilo para fondo alterno */
.bg-light {
    background-color: var(--color-light-bg);
}


/* ==================================== */
/* 🚀 3. Botones (CTAs) */
/* ==================================== */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-btn); 
    font-weight: 700; 
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
    text-decoration: none; /* CLAVE: Elimina el subrayado por defecto */
}
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    text-decoration: none;
}
.btn-primary:hover {
    background-color: #d14d4d; /* Tono más oscuro de coral */
    border-color: #d14d4d;
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.4);
}
.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}
.btn-secondary:hover {
    background-color: var(--color-primary);
    color: white;
}
.btn-large {
    padding: 1.2rem 3rem; /* Botón aún más grande */
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-decoration: none;
}

/* 🔑 Estilo: Botón de WhatsApp */
.btn-whatsapp {
    background-color: var(--color-secondary); /* Menta */
    color: white;
    border-color: var(--color-secondary);
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 100%; 
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm); 
    text-decoration: none;
}
.btn-whatsapp:hover {
    background-color: #3bbf97; 
    border-color: #3bbf97;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(72, 207, 173, 0.4);
}
.btn-whatsapp i {
    margin-right: 8px;
}


/* ==================================== */
/* ⚓ 4. Header y Navegación (Sticky) - CORREGIDO PARA ALINEACIÓN */
/* ==================================== */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98); 
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
    z-index: 1000;
}
#header .container {
    display: flex;
    justify-content: space-between; /* CLAVE: Logo a la izquierda, Menú a la derecha */
    align-items: center;
    padding-top: 1.5rem; 
    padding-bottom: 1.5rem; 
    padding-left: var(--spacing-md); /* Añadido padding horizontal al contenedor */
    padding-right: var(--spacing-md); 
}
/* 🔑 LOGO - Adaptado para el nuevo logo */
.logo-img {
    height: 90px;
    width: auto;
    display: block; 
}
.logo {
    text-decoration: none;
    /* padding-left eliminado */
}

#header ul {
    list-style: none;
    display: flex;
    margin-left: auto; 
}
#header ul li a {
    text-decoration: none;
    color: var(--color-text);
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: color 0.3s;
}
.cta-nav { 
    background-color: var(--color-primary);
    color: white !important;
    border-radius: var(--border-radius-btn); 
    padding: 0.5rem 1rem;
    margin-left: var(--spacing-sm);
    /* margin-right eliminado */
}

/* OCULTAR BOTÓN HAMBURGUESA EN ESCRITORIO */
.menu-toggle {
    display: none; 
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-primary);
}


/* ==================================== */
/* 🌟 5. Sección HERO (CORREGIDO) */
/* ==================================== */
#hero {
    /* 🔑 CORRECCIÓN: Usando la ruta 'hero.webp' */
    background: linear-gradient(rgba(45, 45, 45, 0.6), rgba(45, 45, 45, 0.6)), url('../img/hero.webp'); 
    background-size: cover;
    background-position: center;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    padding-top: 150px; 
    padding-bottom: 0; 
    position: relative; 
}
.hero-content {
    max-width: 900px;
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center; 
    margin-bottom: 100px; /* Damos espacio para que el contenido no tape la onda */
}
#hero h1 {
    font-size: 4.5rem; 
    margin-bottom: var(--spacing-md);
}
#hero p {
    font-size: 1.4rem;
    margin-bottom: var(--spacing-lg);
    opacity: 0.9;
}

/* 🔑 13. Flecha de Desplazamiento (Scroll Indicator) */
.scroll-indicator {
    position: absolute;
    bottom: 20px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 50; 
}
.scroll-indicator a {
    color: white; 
    font-size: 2rem;
    display: block;
    animation: bounce 1.5s infinite; 
    text-decoration: none;
    line-height: 1; 
}
.scroll-indicator a:hover {
    color: var(--color-primary); 
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px); 
    }
    60% {
        transform: translateY(-5px);  
    }
}

/* ==================================== */
/* 🔑 14. Divisiones de Sección (SVG Waves) - CORREGIDO */
/* ==================================== */
.section-divider {
    height: 100px; 
    line-height: 0;
    background-color: transparent; 
    z-index: 10; 
    width: 100%;
    position: relative; /* Base para todos los divisores */
    margin-top: 0; 
}

/* 🔑 CLAVE 1: Regla específica para el divisor DENTRO del HERO (wave-top) */
.wave-top {
    position: absolute; 
    bottom: 0;
    left: 0;
    width: 100%;
}

.section-divider svg {
    display: block;
    width: 100%;
    height: 100%; 
    position: relative; 
}

/* 🔑 CLAVE 2: Aplicamos el relleno a los PATH para el color correcto */
.section-divider svg path {
    fill: var(--color-background-base); 
}

/* Reglas para los divisores que están en el flujo normal (wave-bottom) */
.wave-bottom {
    position: relative; 
    bottom: auto;
    left: auto;
    width: auto;
    
    /* 🔑 CLAVE 3: ELIMINAMOS EL MARGEN NEGATIVO para que no se suba al flujo */
    margin-top: 0; 
}


/* ==================================== */
/* 🛠️ 6. Servicios/Enfoque */
/* ==================================== */
#servicios {
    background-color: var(--color-background-base); /* Aseguramos que el fondo sea blanco */
    text-align: center;
    padding-bottom: 0; /* 🔑 CLAVE: Eliminamos el padding-bottom para que se pegue al divisor */
}
.service-card {
    background: var(--color-background-base);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-base); 
    box-shadow: var(--shadow-creative); 
    border: 1px solid #eee; 
    transition: all 0.3s ease-out;
    text-align: center;
}
.service-card:hover {
    transform: translate(-5px, -5px); 
    box-shadow: var(--shadow-creative-hover);
}
.service-icon {
    width: 80px; /* Tamaño más grande para los iconos/ilustraciones */
    height: auto;
    margin-bottom: var(--spacing-sm);
}
.service-card h3 {
    color: var(--color-primary);
}
.service-card p {
    color: var(--color-text-light);
}

/* ==================================== */
/* 🔑 12. Sección Portafolio & Modal */
/* ==================================== */
#proyectos {
    background-color: var(--color-light-bg);
    /* 🔑 CLAVE: Subimos la sección Proyectos para que se pegue al divisor SVG */
    margin-top: -100px; /* Sube la sección 100px (altura del SVG) */
    padding-top: calc(var(--spacing-lg) + 100px); /* Compensa con padding para que el título se vea */
}

/* 🔑 CORRECCIÓN CLAVE: Regla base para forzar 4 columnas en escritorio */
#proyectos .projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.project-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--border-radius-btn); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}
.project-item:hover {
    transform: scale(1.03); 
}
.project-thumb {
    width: 100%;
    height: 250px; 
    object-fit: cover;
    border-radius: var(--border-radius-base); 
    display: block;
}
.project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.85); 
    color: white;
    font-weight: 700;
    text-align: center;
    transform: translateY(0);
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.project-item:hover .project-info {
    opacity: 1;
}

/* --- Modal/Lightbox Styles (CORREGIDO) */
.modal {
    display: none; 
    position: fixed;
    z-index: 1001; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.98); 
}

.modal-content {
    background-color: white;
    margin: 5% auto; 
    padding: 30px;
    border-radius: var(--border-radius-base); 
    width: 90%;
    max-width: 1000px; 
    position: relative;
    animation-name: modalopen;
    animation-duration: 0.3s;
    box-shadow: var(--box-shadow-elevation);
}

.modal-body {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.modal-image {
    width: 60%; 
    height: auto;
    max-width: 550px; 
    object-fit: contain; 
    border-radius: 5px;
}
.modal-text {
    width: 40%;
    padding-top: 10px;
}
.close-btn {
    color: var(--color-primary); 
    float: right;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 25px;
}
.close-btn:hover,
.close-btn:focus {
    color: #d14d4d;
}

@keyframes modalopen {
    from {opacity: 0; transform: translateY(-50px);}
    to {opacity: 1; transform: translateY(0);}
}


/* ==================================== */
/* 🤝 7. Acerca de/Manifiesto */
/* ==================================== */
#manifiesto {
    background-color: var(--color-light-bg);
    text-align: left;
}
.about-text h2 {
    color: var(--color-primary);
}
.about-image img { 
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-base); 
    box-shadow: var(--box-shadow-elevation);
}


/* ==================================== */
/* ⭐ 8. Testimonios/Feedback (PURO CSS Y JS) - CORREGIDO */
/* ==================================== */
#feedback {
    background-color: var(--color-background-base); /* Fondo blanco */
    text-align: center;
    /* 🔑 CLAVE: Subimos la sección Feedback para que se pegue al divisor */
    margin-top: -100px; 
    padding-top: calc(var(--spacing-lg) + 100px); /* Compensa el contenido */
}

/* 🔑 CLAVE: El divisor entre Manifiesto (Gris) y Feedback (Blanco) debe ser BLANCO */
#manifiesto + .section-divider svg path {
    fill: var(--color-light-bg);
}


.slider-wrapper-outer {
    max-width: 900px; 
    width: 100%;
    margin: var(--spacing-md) auto;
    position: relative; 
}
.testimonial-slider {
    width: 100%;
    max-width: 700px; 
    margin: 0 auto; 
    overflow: hidden; 
    position: relative;
    padding-bottom: 30px; 
}
.swiper-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out; 
}
.swiper-slide {
    flex: 0 0 100%; 
    width: 100%;
}

.testimonial-card {
    font-style: italic;
    font-size: 1.3rem; 
    padding: var(--spacing-md);
    padding-bottom: 0; /* Quitamos el padding inferior de la tarjeta para que el footer se pegue */
    border-left: var(--border-thickness) solid var(--color-primary); 
    background-color: var(--color-light-bg); /* CLAVE: Fondo claro para visibilidad */
    border-radius: 0 50px 0 50px; 
    color: var(--color-text); /* Aseguramos que el color base del texto sea oscuro */
    position: relative;
    z-index: 2;
}
.testimonial-card p {
    color: var(--color-text); /* Forzamos el color oscuro para sobrescribir cualquier herencia */
    padding-bottom: var(--spacing-sm); /* Añadimos padding al párrafo para separarlo del nuevo footer */
}

/* --- Estilos de Paginación (Puntos) --- */
.slide-dots {
    text-align: center;
    position: absolute;
    bottom: 0; 
    left: 0;
    right: 0;
    margin-top: 10px; /* Separación visual de la tarjeta */
}
.dot {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb; /* Gris claro inactivo */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: var(--color-primary); /* Coral activo */
}

/* Flechas */
.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; 
    height: 40px;
    background-color: white; /* CLAVE: Fondo blanco para visibilidad */
    color: var(--color-primary); /* Icono coral para contraste */
    border: 1px solid #ddd; /* Borde sutil */
    display: flex; /* Para centrar el ícono */
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 50; /* Z-index alto para estar sobre la tarjeta */
    cursor: pointer;
    transition: all 0.3s;
}

.slide-arrow:hover {
    background-color: var(--color-primary);
    color: white;
    transform: scale(1.1) translateY(-50%);
}

.slide-arrow.prev {
    left: 0;
    margin-left: -10px; /* Margen negativo ajustado */
}

.slide-arrow.next {
    right: 0;
    margin-right: -10px; /* Margen negativo ajustado */
}

/* Nuevo estilo para el pie de página del testimonio (Avatar y Nombre) */
.testimonial-card footer {
    margin-top: var(--spacing-sm);
    font-size: 1rem; 
    font-weight: 700; 
    color: white; /* Mantenemos el texto en blanco */
    
    /* CLAVE: Añadir el fondo oscuro al footer */
    background-color: var(--color-dark-bg); /* Fondo oscuro para contraste */
    padding: 1rem; /* Padding interno para separar del borde */
    border-radius: 0 0 0 50px; /* Adapta el borde inferior al estilo de la tarjeta */
    
    font-style: normal;
    display: flex; 
    align-items: center;
    justify-content: center;
}

/* Aseguramos que el nombre y el cargo dentro del footer sigan siendo blancos */
.testimonial-card footer strong,
.testimonial-card footer span {
    color: white; 
}

.testimonial-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%; 
    object-fit: cover;
    margin-right: 10px;
    border: 3px solid var(--color-primary);
}


/* ==================================== */
/* 📞 9. Contacto */
/* ==================================== */
#contacto {
    background-color: var(--color-background-base); 
}
.contact-form-style input[type="text"], 
.contact-form-style input[type="email"], 
.contact-form-style textarea {
    width: 100%;
    padding: 0.8rem; 
    margin-bottom: var(--spacing-sm);
    border: 1px solid #ddd;
    border-radius: var(--border-radius-btn); 
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s;
}
.contact-form-style input:focus, .contact-form-style textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 5px rgba(255, 107, 107, 0.4);
}

/* 🔑 NUEVO: Estilo para mensajes de éxito/error del formulario */
.form-message {
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}
.form-message.show {
    visibility: visible;
    opacity: 1;
}
.form-message.success {
    background-color: #d4edda; 
    color: #155724; 
    border: 1px solid #c3e6cb;
}
.form-message.error {
    background-color: #f8d7da; 
    color: #721c24; 
    border: 1px solid #f5c6fb;
}


/* 🔑 REGLAS: Alineación de datos de contacto horizontalmente */
.contact-data-list {
    display: flex; 
    gap: 1.5rem;   
    margin-bottom: var(--spacing-sm); 
    flex-wrap: nowrap; 
}

.contact-data-list p {
    display: flex;
    align-items: center;
    margin-bottom: 0; 
    white-space: nowrap; 
}

.contact-data-list i {
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-right: 8px; 
    width: auto; 
}
.contact-data-list span {
    font-weight: 500;
}

/* 🔑 PLACEHOLDER DE ILUSTRACIÓN (En lugar de mapa) */
.map-placeholder.illustration-placeholder {
    height: 300px;
    display: block; 
    border-radius: var(--border-radius-base); 
    margin-top: var(--spacing-md);
    overflow: hidden; 
}
.map-placeholder img { /* Asegura que la imagen de contacto llene el contenedor */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-base); 
    box-shadow: var(--box-shadow-elevation);
}
.map-placeholder p {
    display: none; 
}


/* ==================================== */
/* 🦶 10. Footer */
/* ==================================== */
footer {
    background-color: var(--color-dark-bg);
    color: white;
    padding: var(--spacing-md) 0;
    font-size: 1rem;
    text-align: center;
}
footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.social-links a {
    color: white;
    font-size: 1.5rem; /* Iconos más grandes */
    margin-left: var(--spacing-md);
    transition: color 0.3s;
}
.social-links a:hover {
    color: var(--color-primary); /* Coral */
}
/* Estilo para el ícono de WhatsApp en el footer */
.social-links a:last-child:hover {
    color: var(--color-secondary); /* Menta */
}


/* ==================================== */
/* 📱 11. Media Queries (Responsivo) - CON MEJORAS EN MENÚ MÓVIL Y CONTACTO */
/* ==================================== */

/* 🔑 MEDIA QUERY: Ajuste para tabletas (768px a 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Forzar 3 columnas para Servicios (que son 3) */
    #servicios .grid-3-col {
        grid-template-columns: repeat(3, 1fr); 
    }
    
    /* 🔑 CLAVE: Forzar 2 columnas para Portafolio (diseño 2x2 en tableta) */
    #proyectos .projects-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: var(--spacing-md); 
    }

    /* Asegurar que las tarjetas de servicio no se vean apretadas */
    .service-card {
        padding: 1.5rem;
    }
    
    /* AJUSTE CONTACTO: Centrar contenido en tableta */
    #contacto .contact-form-style,
    #contacto .contact-info {
        text-align: center;
    }
    #contacto .contact-data-list {
        justify-content: center; 
    }
    /* Centrar el botón de formulario */
    #contacto .contact-form-style .btn-primary {
        margin: 0 auto;
        display: block; 
    }

    .modal-body {
        gap: 20px;
    }
    .modal-image {
        width: 50%;
    }
    .modal-text {
        width: 50%;
    }
}


@media (max-width: 900px) {
    /* 1. Apilamiento de 2 columnas a 1 */
    .grid-2-col-us, .grid-2-col-contact {
        grid-template-columns: 1fr; 
    }
    
    /* AJUSTE CONTACTO: Centrar contenido en móvil */
    #contacto .contact-form-style,
    #contacto .contact-info {
        text-align: center; /* Centra los títulos h3 y los párrafos p */
    }
    
    /* CLAVE: Centrar el botón de formulario y limitar su ancho */
    #contacto .contact-form-style .btn-primary {
        margin: 1rem auto; /* Centrar y añadir margen superior para separarlo del textarea */
        display: block; 
        max-width: 300px; /* Limitar el ancho para que se vea centrado */
    }
    
    /* CLAVE: Centrar el botón de WhatsApp y limitar su ancho */
    .btn-whatsapp {
        margin: var(--spacing-md) auto var(--spacing-sm) auto; /* Centrar y mantener márgenes verticales */
        display: block;
        max-width: 300px; /* Limitar el ancho para que se vea centrado en la vista móvil */
    }
    
    /* CORRECCIÓN FINAL: Reducir el gap de la lista de contacto en móvil para evitar desbordamiento */
    #contacto .contact-data-list {
        gap: 0.75rem; /* Reducimos el gap de 1.5rem a 0.75rem para ganar espacio */
        flex-wrap: wrap; 
        justify-content: center; /* Centra los ítems de la lista flex */
        width: fit-content;
        margin: 0 auto 1rem auto; /* Centra la lista completa */
    }
    
    /* Ajuste para centrar cada ítem si hay envoltura */
    #contacto .contact-data-list p {
        justify-content: center;
        width: 100%; /* Hacemos que cada p ocupe todo el ancho para un apilamiento limpio */
        white-space: normal;
    }

    /* 2. Reordenar elementos (imagen arriba del texto en Nosotros) */
    #nosotros .about-image {
        order: -1; 
    }
    
    /* AJUSTE LOGO IMAGEN - NUEVA ALTURA EN MOVIL */
    .logo-img {
        height: 60px; 
    }
    /* También ajustar el padding del header.container en móvil si es necesario */
    #header .container {
        padding-top: 1rem; 
        padding-bottom: 1rem;
    }
    
    /* 🔑 AJUSTE CLAVE: Reducir el tamaño del botón grande en móvil */
    .btn-large {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
    
    /* 3. Ajuste de Tipografía para móvil */
    #hero h1 {
        font-size: 3rem; 
    }
    #hero p {
        font-size: 1.1rem; 
    }
    /* 🔑 CORRECCIÓN SLIDER: Reducción del tamaño del texto de testimonio en móvil */
    .testimonial-card p {
        font-size: 1.1rem; 
    }

    /* 4. Ajuste de altura de sección */
    .full-height {
        padding-top: 100px; 
    }
    
    /* 5. Ajuste del Footer */
    footer .container {
        flex-direction: column;
    }
    footer p {
        margin-bottom: 0.5rem;
    }

    /* Mostrar el botón de hamburguesa en móvil */
    .menu-toggle {
        display: block; 
    }
    
    /* Ajustar la navegación en móvil */
    #header ul {
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        flex-direction: column; 
        background-color: rgba(255, 255, 255, 0.98);
        border-top: 1px solid #eee;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        z-index: 999; /* Asegura que esté sobre el contenido */
        
        transform: translateY(-100vh); 
        transition: transform 0.4s ease-in-out;
        opacity: 0;
        pointer-events: none; 
    }
    #header ul.active {
        transform: translateY(0); 
        opacity: 1;
        pointer-events: all;
    }

    /* 🔑 MEJORA: Estilizado base y espaciado de los ítems del menú móvil */
    #header ul li a {
        padding: 1rem var(--spacing-md); 
        display: block; 
        border-bottom: 1px solid #eee; 
        margin-right: 0; 
        font-size: 1.1rem; 
        font-weight: 600; 
        color: var(--color-text); 
        transition: background-color 0.2s; 
    }
    
    /* Efecto al tocar/pasar el mouse en móvil */
    #header ul li a:hover,
    #header ul li a:focus {
        background-color: var(--color-light-bg); 
        color: var(--color-primary); 
    }
    
    /* Aseguramos que el elemento LI no tenga estilos que lo aprieten */
    #header ul li {
        width: 100%;
    }
    /* El último ítem no necesita borde inferior */
    #header ul li:last-child a {
        border-bottom: none;
    }
    
    /* 🔑 MEJORA CTA: Estilo de botón para el enlace de Contacto en el menú */
    #header ul li .cta-nav { 
        /* Reset de márgenes para la transición a botón */
        margin: 0; 
        padding: 0;
        
        /* Ajustamos el botón real dentro del list item */
        display: block;
        width: calc(100% - 2 * var(--spacing-md)); /* Ancho total menos el padding del contenedor */
        text-align: center;
        margin: 1rem var(--spacing-md); /* Separación visual en el menú */
        
        /* Reaplicar estilos visuales del botón primario */
        border-radius: var(--border-radius-btn); 
        background-color: var(--color-primary);
        color: white !important;
        border: 2px solid var(--color-primary);
        padding: 0.75rem 1.5rem;
        font-size: 1.1rem;
        box-shadow: 0 4px 8px rgba(255, 107, 107, 0.2); 
    }
    
    /* Eliminar el hover del enlace .cta-nav que se aplica a los otros links */
    #header ul li .cta-nav:hover,
    #header ul li .cta-nav:focus {
        background-color: #d14d4d; /* Tono más oscuro de coral */
        color: white !important;
    }
    
    /* Flechas del slider en móvil */
    .slide-arrow.prev {
        margin-left: 5px; 
    }
    .slide-arrow.next {
        margin-right: 5px; 
    }

    /* Responsive para el Modal */
    .modal-content {
        margin: 5% auto;
        width: 95%;
    }
    .modal-body {
        flex-direction: column; /* Apila imagen y texto en móvil */
        gap: 15px;
    }
    .modal-image, .modal-text {
        width: 100%;
    }
    .modal-text {
        padding-top: 0;
    }
}