/* =========================================
   FUENTES AUTOALOJADAS (Poppins 400/500/600)
   Evita 2 conexiones externas en la ruta crítica
   ========================================= */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122}

/* Respaldo con métricas ajustadas a Poppins.
   Mientras la webfont carga, el texto ocupa exactamente el mismo espacio, así
   que al intercambiarse no empuja nada (CLS = 0). Valores calculados a partir
   de las métricas reales de Poppins frente a Arial/Helvetica/Roboto. */
@font-face{
    font-family:"Poppins Fallback";
    src:local("Arial"),local("Helvetica Neue"),local("Roboto"),local("Liberation Sans");
    size-adjust:114.66%;
    ascent-override:91.57%;
    descent-override:30.52%;
    line-gap-override:8.72%;
}

:root {
    --color-primary: #10B981; /* Verde Esmeralda */
    --color-secondary: #1D4ED8; /* Azul Zafiro */
    --color-text-light: #FFFFFF;
    --color-text-dark: #091428; /* Azul Noche Profundo */
    --font-main: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --transition-speed: 0.8s;
    --radius: 24px;
    --header-h: 64px;

    /* Escala tipográfica fluida: un solo valor cubre de 320px a 1920px
       sin saltos bruscos entre breakpoints */
    --fs-hero: clamp(2.25rem, 1.15rem + 5.5vw, 5.5rem);
    --fs-h1: clamp(2rem, 1.2rem + 3.2vw, 4rem);
    --fs-h2: clamp(1.85rem, 1.2rem + 2.4vw, 3rem);
    --fs-h3: clamp(1.4rem, 1.15rem + 1vw, 2rem);
    --fs-quote: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.5rem);
    --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);

    /* Ritmo vertical fluido de las secciones */
    --section-y: clamp(3.5rem, 2rem + 7vw, 8rem);
    --section-x: clamp(1.25rem, 5vw, 5rem);
}

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

html {
    -webkit-text-size-adjust: 100%; /* iOS no reescala el texto al girar */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-text-dark);
    overflow-x: clip; /* Corta desbordes laterales sin romper position:sticky */
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(16, 185, 129, 0.15);
}

img, picture, svg, video {
    max-width: 100%;
    display: block;
}

/* <picture> es un envoltorio inline sin altura propia: sin esto, el height:100%
   de la imagen no tiene contra qué resolverse y la foto queda encajonada. */
.bg-image picture,
.method-image-placeholder picture,
.testimonial-image-placeholder picture,
.scientist-image-placeholder picture {
    display: block;
    width: 100%;
    height: 100%;
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Enlace de salto para lectores de pantalla y teclado */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--color-primary);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 8px 0;
    font-size: 0.95rem;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

.hero-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh; /* Evita el salto por la barra de direcciones en móvil */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* =========================================
   HEADER / NAVEGACIÓN
   ========================================= */
.main-header {
    position: relative;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem clamp(1.25rem, 5vw, 10vw);
    background-color: var(--color-secondary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.logo-container img {
    height: clamp(26px, 3.4vw, 32px);
    width: auto;
    object-fit: contain;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: clamp(1.25rem, 2.6vw, 3rem);
}

.main-nav a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: clamp(0.85rem, 0.78rem + 0.25vw, 1rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: #ffffff;
}

.header-right {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.8vw, 2.25rem);
}

/* Botón hamburguesa: oculto en escritorio */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: #ffffff;
    flex-shrink: 0;
}

.nav-toggle-bars {
    position: relative;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-toggle-bars::before { transform: translateY(-7px); }
.nav-toggle-bars::after  { transform: translateY(7px); }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
    background-color: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
    transform: translateY(0) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
    transform: translateY(0) rotate(-45deg);
}

/* Botón de Música y Lenguaje en Header */
.music-toggle-btn, .lang-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.95rem;
    min-height: 38px;
    border-radius: 9999px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    user-select: none;
    white-space: nowrap;
}

.music-toggle-btn:hover, .lang-toggle-btn:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.music-toggle-btn:active, .lang-toggle-btn:active {
    transform: translateY(0);
}

.music-speaker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Ecualizador animado */
.music-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 13px;
    width: 14px;
}

.music-bar {
    width: 2px;
    height: 3px;
    background-color: currentColor;
    border-radius: 1px;
    transition: height 0.2s ease, opacity 0.2s ease;
    opacity: 0.5;
}

/* Estado: Reproduciendo */
.music-toggle-btn.is-playing {
    background: rgba(16, 185, 129, 0.09);
    border-color: var(--color-primary);
    color: #059669;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15);
}

.music-toggle-btn.is-playing .music-bar {
    opacity: 1;
}

.music-toggle-btn.is-playing .music-bar:nth-child(1) { animation: musicWave 0.9s ease-in-out infinite alternate; }
.music-toggle-btn.is-playing .music-bar:nth-child(2) { animation: musicWave 1.2s ease-in-out infinite alternate 0.2s; }
.music-toggle-btn.is-playing .music-bar:nth-child(3) { animation: musicWave 0.75s ease-in-out infinite alternate 0.4s; }
.music-toggle-btn.is-playing .music-bar:nth-child(4) { animation: musicWave 1.05s ease-in-out infinite alternate 0.15s; }

@keyframes musicWave {
    0% { height: 3px; }
    100% { height: 13px; }
}

/* Estado: Silenciado */
.music-toggle-btn.is-muted {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.music-toggle-btn.is-muted .music-bar {
    height: 2.5px;
    opacity: 0.35;
}

/* Adaptación para Header de Protocolo */
.protocol-header { background-color: var(--color-secondary); }
.protocol-header .nav-toggle { color: #ffffff; }
.protocol-header .main-nav a { color: rgba(255, 255, 255, 0.9); }
.protocol-header .main-nav a:hover { color: #ffffff; }

.protocol-header .music-toggle-btn, .protocol-header .lang-toggle-btn {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.protocol-header .music-toggle-btn:hover, .protocol-header .lang-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.protocol-header .music-toggle-btn.is-playing {
    background: rgba(16, 185, 129, 0.25);
    border-color: #34d399;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

.protocol-header .music-toggle-btn.is-muted {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

/* =========================================
   CAPA 1: FONDO ABSOLUTO
   ========================================= */
.hero-background {
    position: absolute;
    inset: 0;
    z-index: -10;
    background-color: var(--color-text-dark);
}

.bg-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-speed) ease-in-out, transform 6s ease-out;
    transform: scale(1.05); /* Efecto cinemático sutil de zoom in */
    will-change: opacity;
}

.bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.bg-image.active {
    opacity: 1;
    transform: scale(1);
}

.background-overlay {
    position: absolute;
    inset: 0;
    /* Overlay sutil para legibilidad del texto sin apagar la foto */
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0.1) 100%
    );
    transition: background 0.8s ease;
    z-index: 2;
}

.hero-background[data-active-color="green"] .background-overlay {
    background: linear-gradient(
        to right,
        rgba(10, 40, 20, 0.8) 0%,
        rgba(10, 40, 20, 0.4) 40%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

/* =========================================
   CAPA 2: CONTENIDO CENTRAL
   ========================================= */
.hero-content {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: clamp(1.25rem, 10vw, 12rem);
    padding-right: clamp(1.25rem, 4vw, 4rem);
    padding-bottom: clamp(1rem, 3.5vh, 2.75rem);
}

.headlines-wrapper {
    position: relative;
    /* min-height reserva el espacio del titular más alto → sin saltos de layout */
    min-height: clamp(7rem, 24vh, 14rem);
    display: flex;
    align-items: center;
}

.main-headline {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    color: var(--color-text-light);
    font-size: var(--fs-hero);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.015em;
    text-wrap: balance;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) ease, transform var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.main-headline.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateY(0);
}

.main-headline.exiting-up {
    opacity: 0;
    transform: translateY(-50%) translateY(-30px);
}

.main-headline.entering-down {
    opacity: 0;
    transform: translateY(-50%) translateY(30px);
}

.cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 10;
}

.btn {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
    padding: clamp(0.9rem, 0.8rem + 0.5vw, 1.1rem) clamp(1.5rem, 1rem + 3vw, 2.5rem);
    min-height: 48px; /* Área táctil cómoda */
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    color: var(--color-text-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.btn-primary { background-color: var(--color-primary); }
.btn-primary:hover { background-color: #0e9f6e; }
.btn-secondary { background-color: var(--color-secondary); }
.btn-secondary:hover { background-color: #1a44bb; }

/* =========================================
   CAPA 3: INDICADORES INFERIORES (DOTS)
   ========================================= */
.hero-indicators {
    width: 100%;
    z-index: 10;
    padding-bottom: clamp(1.5rem, 4vh, 2.75rem);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 0.75rem);
}

.hero-dot {
    position: relative;
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 9999px;
    border: none;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: width var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1),
                background-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease,
                opacity var(--transition-speed) ease,
                transform 0.25s ease;
    opacity: 0.7;
    -webkit-appearance: none;
    appearance: none;
}

/* Área táctil ampliada de 44x44px para móvil y accesibilidad */
.hero-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

.hero-dot:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.75);
    transform: scale(1.2);
}

.hero-dot.active {
    width: 32px;
    opacity: 1;
    background: #ffffff;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
}

.hero-dot.active[data-color="green"] {
    background: var(--color-primary);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.85);
}

.hero-dot.active[data-color="blue"] {
    background: #3b82f6;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.85);
}

/* =========================================
   SECCIONES GENERALES
   ========================================= */
.section {
    padding: var(--section-y) var(--section-x);
    background-color: #ffffff;
}

/* Salta el renderizado de lo que está fuera de pantalla hasta que hace falta.
   contain-intrinsic-size evita que la barra de scroll dé saltos. */
.methods-section,
.testimonial-section,
.protocols-section,
.scientist-section,
.about-section,
.main-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    color: var(--color-secondary);
    font-size: var(--fs-h2);
    font-weight: 600;
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* =========================================
   SECCIÓN 1: EL MÉTODO
   ========================================= */
.method-section {
    text-align: center;
}
.method-section .container { max-width: 900px; }

.method-text {
    color: var(--color-text-dark);
    font-size: var(--fs-lead);
    line-height: 1.6;
    font-weight: 400;
}

/* =========================================
   SECCIÓN PROTOCOLOS
   ========================================= */
.protocols-section { background-color: #f8fafc; }

/* =========================================
   SECCIÓN 2: LOS 3 MÉTODOS
   ========================================= */
.methods-container {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 1.5rem + 7vw, 8rem);
}

.method-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(2rem, 1rem + 4vw, 6rem);
    align-items: center;
}

/* Alterna el orden sólo cuando hay dos columnas reales */
@media (min-width: 860px) {
    .method-row:nth-child(even) .method-content { order: 2; }
    .method-row:nth-child(even) .method-image-placeholder { order: 1; }
}

.method-number {
    display: block;
    color: var(--color-secondary);
    font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

.method-title {
    color: var(--color-text-dark);
    font-size: var(--fs-h3);
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-wrap: balance;
}

.methods-container .method-text,
.protocols-section .method-text {
    font-size: var(--fs-body);
    line-height: 1.7;
}

.method-image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3; /* Reserva el espacio antes de que cargue la imagen (CLS = 0) */
    border-radius: var(--radius);
    overflow: hidden;
}

.method-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.method-image-placeholder:hover .method-image { transform: scale(1.05); }

.method-image-1 { background-color: #fff7ed; }
.method-image-2 { background-color: #fff1f2; }
.method-image-3 { background-color: #eff6ff; }

/* =========================================
   SECCIÓN TESTIMONIOS
   ========================================= */
.testimonial-section {
    background-color: #172C70;
    padding: var(--section-y) var(--section-x);
}

.testimonial-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(2rem, 1rem + 4vw, 6rem);
    align-items: center;
}

.testimonial-image-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    background-color: #f6efe8;
    overflow: hidden;
}

.testimonial-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-content-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.testimonial-overline {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

.testimonial-quote {
    font-size: var(--fs-quote);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-light);
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.testimonial-author {
    font-size: var(--fs-body);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

/* =========================================
   SECCIÓN 3: DONACIONES
   ========================================= */
.donation-section {
    background-color: var(--color-secondary);
    padding: var(--section-y) var(--section-x);
}

.donation-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(2.5rem, 1rem + 4vw, 6rem);
    align-items: center;
}

.donation-text-col { color: var(--color-text-light); }

.donation-title {
    font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    text-wrap: balance;
}

.donation-subtitle {
    font-size: var(--fs-body);
    line-height: 1.6;
    opacity: 0.9;
}

.donation-card {
    background-color: #ffffff;
    padding: clamp(1.5rem, 1rem + 3vw, 3rem);
    border-radius: var(--radius);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.donation-label {
    color: var(--color-text-dark);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.5rem;
}

.amount-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.amount-btn {
    background-color: rgba(29, 78, 216, 0.04);
    color: var(--color-text-dark);
    font-family: var(--font-main);
    font-size: 1.125rem;
    font-weight: 500;
    padding: 1rem;
    min-height: 48px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.amount-btn:hover { background-color: rgba(29, 78, 216, 0.08); }
.amount-btn.active { background-color: var(--color-primary); color: var(--color-text-light); }
.amount-btn.active:hover { background-color: #0e9f6e; }

.custom-amount-wrapper { width: 100%; }

.custom-amount-input {
    width: 100%;
    background-color: rgba(29, 78, 216, 0.04);
    color: var(--color-text-dark);
    font-family: var(--font-main);
    font-size: 1rem; /* 16px mínimo: evita el zoom automático de iOS al enfocar */
    padding: 1rem;
    min-height: 48px;
    border: none;
    border-radius: var(--radius);
    transition: background-color 0.2s ease;
}

.custom-amount-input:focus {
    outline: none;
    background-color: rgba(29, 78, 216, 0.08);
}

.btn-full {
    width: 100%;
    padding: 1.25rem;
    font-size: 1.125rem;
    margin-top: 0.5rem;
}

.trust-microcopy {
    color: var(--color-text-dark);
    font-size: 0.85rem;
    text-align: center;
    opacity: 0.7;
    margin-top: 0.5rem;
}

/* =========================================
   PÁGINAS INTERNAS (protocolos / quiénes somos / soporte)
   ========================================= */
.protocol-hero {
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
    padding: clamp(3rem, 1.5rem + 6vw, 6rem) var(--section-x) clamp(4rem, 2rem + 7vw, 8rem);
    text-align: center;
}

.protocol-hero h1 {
    font-size: var(--fs-h1);
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--color-secondary);
    text-wrap: balance;
}

.protocol-hero p {
    font-size: var(--fs-body);
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
    line-height: 1.8;
    text-wrap: pretty;
}

.about-section {
    padding: var(--section-y) var(--section-x);
    background-color: #ffffff;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
    font-size: var(--fs-body);
    line-height: 1.8;
    color: var(--color-text-dark);
    text-wrap: pretty;
}

.about-content p { margin-bottom: 2rem; }
.about-content p:last-child { margin-bottom: 0; }

.scientist-section {
    padding: var(--section-y) var(--section-x);
    background-color: #ffffff;
}

.scientist-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(2rem, 1rem + 4vw, 6rem);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto clamp(3.5rem, 1.5rem + 6vw, 8rem);
}

.scientist-row:last-child { margin-bottom: 0; }

@media (min-width: 860px) {
    .scientist-row:nth-child(even) .scientist-content { order: -1; }
}

.scientist-image-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    background-color: #f6efe8;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(9, 20, 40, 0.05);
}

.scientist-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scientist-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.scientist-title {
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1.2;
    text-wrap: balance;
}

.scientist-text {
    font-size: var(--fs-body);
    line-height: 1.8;
    color: var(--color-text-dark);
    text-wrap: pretty;
}

.scientist-text p { margin-bottom: 1rem; }
.scientist-text p:last-child { margin-bottom: 0; }
.scientist-text strong { color: var(--color-secondary); font-weight: 600; }

/* =========================================
   FOOTER
   ========================================= */
.main-footer {
    background-color: #ffffff;
    padding: clamp(3rem, 2rem + 4vw, 6rem) var(--section-x) clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 1rem + 3vw, 3rem);
}

.footer-logo img {
    height: clamp(32px, 4vw, 40px);
    width: auto;
    object-fit: contain;
}

.footer-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 2.5vw, 3rem);
}

.footer-nav a {
    text-decoration: none;
    color: var(--color-text-dark);
    font-weight: 500;
    font-size: var(--fs-body);
    transition: color 0.3s ease;
}

.footer-nav a:hover { color: var(--color-primary); }

/* =========================================
   404
   ========================================= */
.error-container {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
    text-align: center;
    padding: 2rem 1.25rem;
}

.error-title {
    font-size: clamp(4.5rem, 2rem + 14vw, 8rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 1rem;
}

.error-subtitle {
    font-size: var(--fs-h3);
    margin-bottom: 2rem;
}

.error-text {
    font-size: var(--fs-body);
    opacity: 0.8;
    margin-bottom: 3rem;
    max-width: 500px;
    text-wrap: pretty;
}

/* =========================================
   NAVEGACIÓN MÓVIL (≤ 900px)
   ========================================= */
@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }

    /* El menú pasa a panel desplegable bajo el header */
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-secondary);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
        /* Se colapsa con grid-template-rows para poder animar sin conocer la altura */
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        visibility: hidden;
    }

    .protocol-header .main-nav { background: var(--color-secondary); }

    .main-nav.is-open {
        grid-template-rows: 1fr;
        visibility: visible;
    }

    /* El padding va en los enlaces, no en la lista: así el panel cerrado
       colapsa a 0px de verdad en lugar de dejar 24px invisibles. */
    .main-nav ul {
        min-height: 0;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .main-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    .main-nav li:first-child a { padding-top: 1.15rem; }
    .main-nav li:last-child a  { padding-bottom: 1.15rem; }
    .protocol-header .main-nav li { border-bottom-color: rgba(255, 255, 255, 0.12); }
    .main-nav li:last-child { border-bottom: none; }

    .main-nav a {
        display: block;
        padding: 0.95rem clamp(1.25rem, 5vw, 3rem); /* Área táctil de 48px */
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.9);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .main-nav a:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
    }

    .main-header { flex-wrap: wrap; }
    .header-right { gap: 0.6rem; }

    .music-toggle-btn, .lang-toggle-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* En móvil el texto del botón de música sobra: basta el icono + ecualizador */
@media (max-width: 620px) {
    .music-status-text { display: none; }
    .music-toggle-btn { gap: 0.4rem; padding: 0.45rem 0.7rem; }
}

/* =========================================
   AJUSTES DE HERO POR TAMAÑO
   ========================================= */
@media (max-width: 900px) {
    .hero-content {
        justify-content: flex-end;
        padding-bottom: clamp(1rem, 3.5vh, 2.5rem);
    }
    .headlines-wrapper { min-height: clamp(6.5rem, 22vh, 11rem); }
}

@media (max-width: 620px) {
    .hero-container { min-height: auto; }

    .hero-content {
        justify-content: flex-end;
        padding-top: clamp(3rem, 10vh, 6rem);
        padding-bottom: clamp(1rem, 3vh, 2rem);
    }

    .headlines-wrapper { min-height: 8.5rem; }

    .hero-indicators { padding-bottom: 1.5rem; }
}

/* Pantallas muy angostas (iPhone SE y similares) */
@media (max-width: 380px) {
    .amount-grid { grid-template-columns: 1fr; }
}

/* Móvil apaisado: muy poca altura, comprimimos el hero */
@media (max-height: 520px) and (orientation: landscape) {
    .hero-container { min-height: auto; }
    .hero-content { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .headlines-wrapper { min-height: 5rem; }
    .main-headline { font-size: clamp(1.5rem, 4.5vw, 2.5rem); }
    .hero-indicators { padding-bottom: 0.75rem; }
}

/* =========================================
   ACCESIBILIDAD: MOVIMIENTO REDUCIDO
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .bg-image, .bg-image.active { transform: none; }
}