/* ==========================================================================
           FARMASI DESIGN SYSTEM V18.0 (Maestro Final, Auditado y Consolidado)
           ========================================================================== */

        /* ---------------------------------- */
        /* 1. CONFIGURACIÓN GLOBAL (VARIABLES) */
        /* ---------------------------------- */
        :root {
            --color-primary: #E91E63;
            --color-primary-dark: #C2185B;
            --color-accent-red: #E53E3E;
            --color-text: #2d3748;
            --color-text-secondary: #4a5568;
            --color-white: #ffffff;
            --color-dark-bg: #1a202c;
            --color-border: #e2e8f0;
            --color-bg-gray: #f7fafc;
            --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;
            --spacing-2: 0.5rem;
            --spacing-3: 0.75rem;
            --spacing-4: 1rem;
            --spacing-6: 1.5rem;
            --spacing-8: 2rem;
            --spacing-12: 3rem;
            --spacing-16: 4rem;
            --border-radius-lg: 0.75rem;
            --border-radius-xl: 1rem;
            --border-radius-full: 9999px;
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            --transition-duration: 300ms;
            --transition-timing: ease-in-out;
            --transition-base: all var(--transition-duration) var(--transition-timing);
        }

        /* ---------------------------------- */
        /* 2. ESTILOS BASE Y RESET            */
        /* ---------------------------------- */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font-primary); background-color: var(--color-white); color: var(--color-text); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }
        main { flex-grow: 1; }
        img { max-width: 100%; height: auto; display: block; }
        a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-duration) ease; }
        a:hover { color: var(--color-primary-dark); }
        h1, h2, h3, h4 { line-height: 1.2; font-weight: var(--font-weight-bold); color: var(--color-text); text-wrap: balance; }
        h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; }
        p { margin-bottom: var(--spacing-4); max-width: 75ch; }

        /* ---------------------------------- */
        /* 3. LAYOUT Y UTILIDADES             */
        /* ---------------------------------- */
        .container { width: 90%; max-width: 1280px; margin-left: auto; margin-right: auto; }
        .section {
            padding: var(--spacing-16) 0;
            background-color: var(--color-white); /* Añadido: Fondo blanco por defecto para secciones */
        }
        .section-header { text-align: center; margin-bottom: var(--spacing-12); }
        .section-header > h1, .section-header > h2 { margin-bottom: var(--spacing-4); }
        .section-header > p { margin-left: auto; margin-right: auto; color: var(--color-text-secondary); }
        .grid { display: grid; gap: var(--spacing-8); }
        .text--highlight { color: var(--color-primary-dark); font-weight: var(--font-weight-bold); }
        .content-center { text-align: center; }
        .content-center > * { margin-left: auto; margin-right: auto; }
        @media (min-width: 768px) { .grid--2-cols { grid-template-columns: repeat(2, 1fr); } .grid--3-cols { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 1024px) { .grid--4-cols { grid-template-columns: repeat(4, 1fr); } }

        /* ---------------------------------- */
        /* 4. COMPONENTES GLOBALES            */
        /* ---------------------------------- */
        .btn { display: inline-block; padding: var(--spacing-3) var(--spacing-6); border-radius: var(--border-radius-full); font-weight: var(--font-weight-bold); text-align: center; cursor: pointer; border: 2px solid transparent; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.75px; line-height: 1.5; background-origin: border-box; transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease, background-color var(--transition-duration) ease; }
        .btn--primary { background: linear-gradient(to right, var(--color-primary), var(--color-primary-dark)); color: var(--color-white); box-shadow: var(--shadow-lg); }
        .btn--primary:hover { background: var(--color-primary-dark); color: var(--color-white); transform: scale(1.05); box-shadow: var(--shadow-xl); }
        .btn--accent { background-color: var(--color-white); color: var(--color-accent-red); }
        .btn--accent:hover { background-color: #f2f2f2; transform: scale(1.05); }
        .card { background-color: var(--color-white); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: var(--transition-base); }
        .card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); }
        .card__image-wrapper { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
        .card__image { width: 100%; height: 100%; object-fit: cover; }
        .card__body { padding: var(--spacing-8); display: flex; flex-direction: column; align-items: center; text-align: center; flex-grow: 1; }
        .card__title { margin-bottom: var(--spacing-3); color: var(--color-primary-dark); }
        .card__description { color: var(--color-text-secondary); margin-bottom: var(--spacing-6); flex-grow: 1; }
        .message-box {
            padding: 15px;
            border-radius: var(--border-radius-lg);
            margin-bottom: var(--spacing-6);
        }
        .message-box--success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .message-box--error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        /* ---------------------------------- */
        /* 5. SECCIONES Y PÁGINAS ESPECÍFICAS */
        /* ---------------------------------- */

        /* 5.1 Header (RECONSTRUIDO Y CORREGIDO) */
        .header {
            background-color: var(--color-dark-bg);
            position: sticky;
            top: 0 !important;
            width: 100%;
            z-index: 1000;
            padding: var(--spacing-3) 0;
        }
        .header__content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header__logo img {
            max-width: 160px;
        }
        .mobile-menu-button {
            display: block; /* Visible en móvil por defecto */
            background: none;
            border: none;
            color: var(--color-white);
            cursor: pointer;
            padding: var(--spacing-2);
        }
        .mobile-menu-button svg {
            width: 30px;
            height: 30px;
        }
        .header__nav {
            display: none; /* Oculto en móvil por defecto */
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: var(--color-dark-bg);
            padding: var(--spacing-6);
            box-shadow: var(--shadow-lg);
            border-top: 1px solid #374151;
        }
        .header__nav.is-active {
            display: block; /* Se muestra con JS */
        }
        .header__nav-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center; /* Centra todos los items */
            gap: var(--spacing-4);
        }
        .header__nav-link {
            color: var(--color-white);
            font-weight: var(--font-weight-semibold);
            padding: var(--spacing-2) 0;
            display: flex;
            justify-content: center; /* Centra el contenido del enlace */
            align-items: center;
            gap: var(--spacing-2);
        }
        .dropdown {
            width: 100%;
            text-align: center !important;
        }
        .dropdown-toggle svg {
            width: 1rem;
            height: 1rem;
            transition: transform 0.3s ease;
        }
        .dropdown-toggle svg.rotate {
            transform: rotate(180deg);
        }
        .dropdown-menu {
            display: none; /* Se oculta por defecto en móvil */
            list-style: none;
            background-color: rgba(0,0,0,0.2);
            padding: var(--spacing-4);
            margin-top: var(--spacing-2);
            border-radius: var(--border-radius-xl);
        }
        .dropdown-menu.is-active {
            display: block;
        }
        .dropdown-item {
            padding: var(--spacing-2);
            display: block;
            color: var(--color-white);
            opacity: 0.8;
        }
        .header__cta {
            display: none; /* Oculto en móvil */
        }

        /* 5.2 Componentes Generales de Página */
        .hero--parallax { position: relative; padding: var(--spacing-12) 0; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--color-white); display: flex; align-items: center; justify-content: center; text-align: center; min-height: 40vh; }
        .hero--parallax::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1; }
        .hero--parallax .container { position: relative; z-index: 2; }
        .hero--parallax h1, .hero--parallax p { color: var(--color-white); }
        .hero--parallax .section-header { margin-bottom: 0; }
        .cta-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); padding: var(--spacing-16) 0; }
        .cta-section .container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
        .cta-title { font-size: 2.5rem; color: var(--color-white); margin-bottom: var(--spacing-4); }
        .cta-text { font-size: 1.2rem; margin-bottom: var(--spacing-8); opacity: 0.9; max-width: 60ch; }
        .faq-list { max-width: 800px; margin: 0 auto; }
        .faq-item { border-bottom: 1px solid var(--color-border); }
        .faq-question { width: 100%; text-align: left; background: none; border: none; padding: var(--spacing-6) 0; font-size: 1.25rem; font-weight: var(--font-weight-semibold); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-4); }
        .faq-question:hover { color: var(--color-primary); }
        .faq-question::after { content: '+'; font-size: 2rem; font-weight: 300; color: var(--color-primary); transition: transform var(--transition-duration) ease; }
        .faq-question.active::after { content: '−'; }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, padding-bottom 0.5s ease-in-out; }
        .faq-answer.active { max-height: 300px; padding-bottom: var(--spacing-6); }
        .scroll-reveal { opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
        .scroll-reveal.active { opacity: 1; transform: translateY(0); }

        /* 5.3 Página Index (Modificado para Scale & Fade) */
        .slider-section { position: relative; height: 80vh; min-height: 500px; max-height: 700px; overflow: hidden; color: var(--color-white); }
        .slider-container { width: 100%; height: 100%; }
        .slider-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transform: scale(1.1);
            visibility: hidden;
            transition: opacity 1s ease-in-out, transform 1s ease-in-out;
        }
        .slider-slide.active {
            opacity: 1;
            transform: scale(1);
            visibility: visible;
        }
        .slider-image { width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: 1; }
        .slider-slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2; }
        .slider-content { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; padding: var(--spacing-8); }
        .slider-title { font-size: 2.5rem; font-weight: 800; color: var(--color-white); text-shadow: 2px 2px 8px rgba(0,0,0,0.7); margin-bottom: var(--spacing-4); }
        .slider-subtitle { font-size: 1.25rem; margin-bottom: var(--spacing-8); max-width: 60ch; }
        .slider-dots { position: absolute; bottom: var(--spacing-6); left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: var(--spacing-3); }
        .dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); border: none; cursor: pointer; transition: var(--transition-base); }
        .dot.active, .dot:hover { background-color: var(--color-white); transform: scale(1.2); }

        /* 5.4 Página Registro */
        .registration-layout { display: grid; min-height: calc(100vh - 80px); }
        .registration-layout__image { display: none; background-size: cover; background-position: center; }
        .registration-layout__form { display: flex; flex-direction: column; justify-content: center; padding: var(--spacing-12) var(--spacing-6); }
        .benefit-card { background-color: var(--color-bg-gray); padding: var(--spacing-8); border-radius: var(--border-radius-xl); text-align: center; }
        .benefit-card__icon { font-size: 2.5rem; color: var(--color-primary); margin-bottom: var(--spacing-4); }

        /* 5.5 Página Socios */
        .step-card { text-align: center; border: 1px solid var(--color-border); padding: var(--spacing-8); border-radius: var(--border-radius-xl); }
        .step-card__number { display: inline-flex; width: 60px; height: 60px; border-radius: 50%; background-color: var(--color-primary); color: var(--color-white); align-items: center; justify-content: center; font-size: 2rem; font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-4); box-shadow: var(--shadow-md); }
        .accordion { max-width: 900px; margin: 0 auto; }
        .accordion-item { background-color: var(--color-white); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); margin-bottom: var(--spacing-4); }
        .accordion-header { width: 100%; text-align: left; background: none; border: none; padding: var(--spacing-4) var(--spacing-6); font-size: 1.1rem; font-weight: var(--font-weight-semibold); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-4); }
        .accordion-header:hover { color: var(--color-primary); }
        .accordion-icon { transition: transform var(--transition-duration) ease; }
        .accordion-header.active .accordion-icon { transform: rotate(45deg); }
        .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; padding: 0 var(--spacing-6); }
        .accordion-content.active { max-height: 1000px; padding-bottom: var(--spacing-6); } /* Ajustado a un valor grande */

        /* 5.6 Página Ecuador */
        .guide-card { background-color: var(--color-bg-gray); border-left: 5px solid var(--color-primary); padding: var(--spacing-8); border-radius: var(--border-radius-lg); height: 100%; }
        .guide-card h3 { margin-bottom: var(--spacing-6); }
        .guide-card ul { list-style: none; padding-left: 0; }
        .guide-card li { position: relative; padding-left: var(--spacing-8); margin-bottom: var(--spacing-4); }
        .guide-card li::before { content: '✔'; position: absolute; left: 0; top: 0; color: var(--color-primary); font-size: 1.5rem; line-height: 1.4; }
        .guide-card address { font-style: normal; background-color: var(--color-white); padding: var(--spacing-4); border-radius: var(--border-radius-lg); margin-top: var(--spacing-4); border: 1px solid var(--color-border); }

        /* 5.7 Página GLEM */
        .hero--glem { background: linear-gradient(to right, #ba3cc6, #9333ea); color: var(--color-white); padding: var(--spacing-16) 0; text-align: center; border-radius: var(--border-radius-xl); margin-top: var(--spacing-8); }
        .hero--glem h1, .hero--glem p { color: var(--color-white); }
        .country-card { background-color: #FFF3E0; padding: var(--spacing-4); border-radius: var(--border-radius-xl); text-align: center; font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-md); transition: var(--transition-base); }
        .country-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
        .shipping-card { background-color: var(--color-white); border-radius: var(--border-radius-xl); padding: var(--spacing-8); box-shadow: var(--shadow-lg); height: 100%; text-align: center; }
        .shipping-card > * { margin-left: auto; margin-right: auto; }
        .shipping-card__logo { max-height: 60px; width: auto; object-fit: contain; margin-bottom: var(--spacing-4); }
        .disclaimer-box { background-color: #FFF3E0; border-left: 5px solid var(--color-primary); padding: var(--spacing-6); border-radius: var(--border-radius-lg); margin-top: var(--spacing-8); }
        .list-icon { list-style: none; padding-left: 0; }
        .list-icon li { position: relative; padding-left: var(--spacing-8); margin-bottom: var(--spacing-4); }
        .list-icon li::before { font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--color-primary); }
        .list-icon--warn li::before { content: "\f071"; }

        /* 5.8 Landing Page (Guia Farmasi) */
        .section--colored {
            background-color: var(--color-dark-bg); /* Cambiado a un fondo oscuro para mejor contraste */
            color: var(--color-white);
        }
        .section--colored h1, .section--colored h2, .section--colored h3, .section--colored p {
            color: var(--color-white);
        }
        .landing-form-section .grid--2-cols {
            align-items: stretch;
            gap: var(--spacing-12);
            /* En móvil, usamos flexbox para apilar y definir el orden */
            display: flex;
            flex-direction: column;
        }

        /* En móvil, el div de texto siempre va primero, la imagen después */
        .section--colored .grid--2-cols > div:first-child {
            order: 1; /* El div de texto (primer hijo en HTML) va primero */
        }
        .section--colored .grid--2-cols > div:last-child {
            order: 2; /* El div de imagen (segundo hijo en HTML) va segundo */
        }

        /* Para pantallas de escritorio, revertimos a grid y el orden alternado */
        @media (min-width: 768px) {
            .landing-form-section .grid--2-cols {
                display: grid; /* Vuelve a usar grid para el diseño de 2 columnas */
                grid-template-columns: repeat(2, 1fr); /* 2 columnas en escritorio */
                gap: var(--spacing-12);
                flex-direction: unset; /* Resetea flex-direction */
            }
            /* Reseteamos el orden para que el HTML determine el flujo por defecto */
            .section--colored .grid--2-cols > div:first-child {
                order: unset;
            }
            .section--colored .grid--2-cols > div:last-child {
                order: unset;
            }
            /* Para los bloques de grid--2-cols impares (1ro, 3ro, etc.), el orden es texto-imagen */
            /* Para los bloques de grid--2-cols pares (2do, 4to, etc.), el orden es imagen-texto */
            .section--colored .grid--2-cols:nth-child(odd) > div:first-child {
                order: 1;
            }
            .section--colored .grid--2-cols:nth-child(odd) > div:last-child {
                order: 2;
            }
            .section--colored .grid--2-cols:nth-child(even) > div:first-child {
                order: 2;
            }
            .section--colored .grid--2-cols:nth-child(even) > div:last-child {
                order: 1;
            }
        }

        .landing-form-section__image-wrapper { border-radius: var(--border-radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; height: 100%; }
        .landing-form-section__image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
        .checklist { list-style: none; padding-left: 0; }
        .checklist li { position: relative; padding-left: var(--spacing-8); margin-bottom: var(--spacing-4); font-size: 1.1rem; font-weight: var(--font-weight-semibold); }
        .checklist li::before { content: '✔'; position: absolute; left: 0; top: 0; color: var(--color-white); }
        .social-proof { display: flex; justify-content: center; gap: var(--spacing-16); text-align: center; }
        .download-card { background-color: var(--color-bg-gray); padding: var(--spacing-12); border-radius: var(--border-radius-xl); text-align: center; box-shadow: var(--shadow-lg); }
        .download-card__icon { font-size: 4rem; color: var(--color-primary); margin-bottom: var(--spacing-6); }

        /* 5.9 Página de Reunión */
        .calendar-embed-container { border-radius: var(--border-radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; max-width: 1000px; margin: 0 auto; border: 1px solid var(--color-border); }

        /* 5.10 Página de Contacto */
        .contact-layout { display: grid; align-items: flex-start; gap: var(--spacing-12); }
        @media (min-width: 992px) { .contact-layout { grid-template-columns: 2fr 1fr; } }
        .form-field { margin-bottom: var(--spacing-6); }
        .form-field label { display: block; font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-2); }
        .form-input { width: 100%; padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); font-size: 1rem; font-family: var(--font-primary); transition: var(--transition-base); }
        .form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.2); }
       textarea.form-input { min-height: 150px; resize: vertical; }
        .contact-details h2 { margin-bottom: var(--spacing-8); }
        .contact-details__item { display: flex; align-items: flex-start; gap: var(--spacing-4); margin-bottom: var(--spacing-6); }
        .contact-details__icon { font-size: 1.5rem; color: var(--color-primary); margin-top: 5px; width: 30px; text-align: center; }
        .contact-details__text { font-size: 1.1rem; line-height: 1.4; }
        .contact-details__text strong { display: block; }
        .contact-details__text a { color: var(--color-text-secondary); }
        .contact-details__text a:hover { color: var(--color-primary); }
        .map-container { height: 450px; border-radius: var(--border-radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); }

        /* 5.11 Página de Contenido (Términos, etc.) */
        .content-page-container { max-width: 800px; margin-left: auto; margin-right: auto; }
        .content-page-container h2 { font-size: 1.8rem; margin-top: var(--spacing-12); margin-bottom: var(--spacing-6); padding-bottom: var(--spacing-2); border-bottom: 2px solid var(--color-border); }
        .content-page-container p { color: var(--color-text-secondary); line-height: 1.7; }

        /* 5.12 Página de Error 404 */
        .error-page-section { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-16) 0; min-height: 70vh; background-size: cover; background-position: center; position: relative; color: var(--color-white); }
        .error-page-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1; }
        .error-page-content { position: relative; z-index: 2; }
        .error-page-content .error-code { font-size: 8rem; font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: var(--spacing-4); text-shadow: 0 0 15px rgba(233, 30, 99, 0.5); }
        .error-page-content .error-title { font-size: 2.5rem; margin-bottom: var(--spacing-4); color: var(--color-white); align-items: center; }
        .error-page-content .error-message { max-width: 60ch; margin-left: auto; margin-right: auto; margin-bottom: var(--spacing-8); color: var(--color-white); opacity: 0.9; align-items: center; }
        .error-page-search-form { max-width: 500px; margin: 0 auto var(--spacing-12) auto; display: flex; gap: var(--spacing-2); }
        .error-page-search-form .form-input { flex-grow: 1; border-radius: var(--border-radius-full); border: none; padding: 0.75rem 1.5rem; }
        .suggested-links { margin-top: var(--spacing-8); }
        .suggested-links h4 { margin-bottom: var(--spacing-4); color: var(--color-white); opacity: 0.8; font-weight: var(--font-weight-semibold); }
        .suggested-links ul { list-style: none; padding: 0; display: flex; justify-content: center; gap: var(--spacing-8); }
        .suggested-links a { color: var(--color-white); font-weight: var(--font-weight-semibold); text-decoration: underline; }
        .suggested-links a:hover { color: var(--color-primary); }

        /* 5.13 Footer */
        .footer { background-color: var(--color-dark-bg); color: var(--color-white); padding: var(--spacing-16) 0 var(--spacing-8); font-size: 0.95rem; }
        .footer a, .footer p, .footer li { color: var(--color-white) !important; }
        .footer a:hover { opacity: 1; }
        .footer__content { display: grid; gap: var(--spacing-8); margin-bottom: var(--spacing-12); }
        .footer__col p { opacity: 0.8; }
        .footer__logo { max-width: 200px; margin-bottom: var(--spacing-4); }
        .footer__heading { font-size: 1.25rem; color: var(--color-white) !important; margin-bottom: var(--spacing-6); opacity: 1; }
        .footer__links { list-style: none; padding: 0; }
        .footer__links li { margin-bottom: var(--spacing-3); }
        .footer__social-links { display: flex; gap: var(--spacing-4); }
        .footer__social-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); transition: var(--transition-base); font-size: 1.2rem; }
        .footer__social-icon:hover { background-color: var(--color-primary); transform: translateY(-4px); }
        .footer__bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-top: var(--spacing-12);
            padding-top: var(--spacing-8);
            border-top: 1px solid #374151;
            opacity: 0.7;
        }
        
        /* ---------------------------------- */
        /* 5.14 WhatsApp Floating Button */
        /* ---------------------------------- */
        .whatsapp-float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 25px;
            right: 25px;
            background-color: #25d366;
            color: var(--color-white);
            border-radius: var(--border-radius-full);
            text-align: center;
            font-size: 32px;
            box-shadow: var(--shadow-xl);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
            box-shadow: 0 0 15px rgba(37, 211, 102, 0.6);
        }

        /* ---------------------------------- */
        /* 6. MEDIA QUERIES (TABLET Y DESKTOP) */
        /* ---------------------------------- */
        @media (min-width: 768px) {
            h1 { font-size: 3rem; } h2 { font-size: 2.5rem; }
            .footer__content { grid-template-columns: 2fr 1fr 1fr; gap: var(--spacing-12); }
        }
        @media (min-width: 1024px) {
            .header__logo img {
                max-width: 180px;
            }
            .mobile-menu-button {
                display: none;
            }
            .header__nav {
                display: flex;
                position: static;
                flex-direction: row;
                width: auto;
                background: none;
                padding: 0;
                box-shadow: none;
                border-top: none;
            }
            .header__nav-list {
                flex-direction: row;
                gap: var(--spacing-6);
            }
            .header__cta { 
                display: block; 
            }
            .dropdown {
                width: auto;
                position: relative;
            }
            .dropdown:hover .dropdown-toggle svg {
                transform: rotate(180deg);
            }
            .dropdown-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                background-color: var(--color-white);
                box-shadow: var(--shadow-xl);
                padding: var(--spacing-2) 0;
                margin-top: var(--spacing-2);
                border-radius: var(--border-radius-xl);
                min-width: 220px;
                text-align: left;
                opacity: 0;
                visibility: hidden;
                transform: translateY(10px);
                transition: opacity .2s ease, transform .2s ease;
                /* Zona de seguridad para evitar que desaparezca el submenú */
                padding-top: 15px; /* Espacio superior invisible */
                margin-top: -10px; /* Ajuste para compensar el espacio adicional */
            }
            .dropdown:hover .dropdown-menu {
                display: block;
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
            .dropdown-item {
                color: var(--color-text);
                opacity: 1;
                padding: var(--spacing-3) var(--spacing-6);
            }
            .registration-layout { grid-template-columns: 1fr 1fr; }
            .registration-layout__image { display: block; }
            .whatsapp-float {
                bottom: 25px;
                right: 25px;
            }