/* ==========================================================================
   Fuentes self-hosted (sin peticiones externas: privacidad + rendimiento + fiable en hosting
   compartido). Fusionadas aqui mismo (antes en fonts.css) para reducir a una sola hoja de
   estilos render-blocking en vez de tres -- cada hoja de estilos adicional anadia una ronda de
   latencia a la ruta critica de renderizado antes del primer pintado.
   ========================================================================== */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/atkinson-hyperlegible-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/atkinson-hyperlegible-700.woff2') format('woff2');
}

/* Outfit: fuente variable, un unico archivo sirve los pesos 500/600/700 */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/outfit-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/outfit-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/outfit-variable.woff2') format('woff2');
}

/* ==========================================================================
   Tokens de diseno: paleta, tipografia, espaciado.
   Breakpoints de referencia (mobile-first, sin variable CSS porque las media queries no las
   admiten): 480px, 768px, 1024px, 1280px.

   Reglas de contraste (verificadas WCAG con formula de luminancia relativa sobre fondo blanco
   #FFFFFF y sobre --azul-marino):
     - --azul-marino y --azul-medio con texto blanco: 13.8:1 y 7.15:1 (AAA). Usar como fondo de
       botones/CTA primarios con texto blanco.
     - --naranja-host con texto blanco: 3.4:1 (solo vale para texto grande/negrita >= 18.66px
       bold, o como fondo decorativo/icono, NUNCA como fondo de boton con texto normal).
     - --ambar con texto --azul-marino: 6.8:1 (AA/AAA). Usar ambar como fondo de insignias con
       texto azul marino, nunca con texto blanco (2:1, insuficiente).
     - --ambar sobre blanco no supera 3:1 por si solo: no usar como color de foco ni de borde
       fino sobre fondo blanco.
   ========================================================================== */
:root {
    /* Paleta de marca */
    --azul-marino: #0F2B5B;
    --azul-marino-oscuro: #0A1D3D;
    --azul-medio: #1A56A8;
    --naranja-host: #E8621A;
    --naranja-host-oscuro: #C4530F;
    --ambar: #F5A623;
    --verde-sostenible: #2D7D46;
    --verde-sostenible-oscuro: #22602F;

    /* Neutros */
    --blanco: #FFFFFF;
    --gris-50: #F7F8FA;
    --gris-100: #EEF1F5;
    --gris-200: #DCE1E8;
    --gris-400: #97A2B2;
    --gris-600: #5B6577;
    --gris-800: #2B3342;

    /* Semanticos */
    --color-fondo: var(--blanco);
    --color-superficie: var(--gris-50);
    --color-texto: var(--gris-800);
    --color-texto-suave: var(--gris-600);
    --color-borde: var(--gris-200);
    --color-enlace: var(--azul-medio);
    --color-foco: var(--azul-marino);
    --color-titular: var(--azul-marino);
    /* Mas oscuro que --naranja-host-oscuro a proposito: ese tono daba 4.3:1 sobre
       --color-superficie (por debajo del 4.5:1 de AA para texto normal/negrita pequeno,
       detectado por auditoria de accesibilidad). Este tono da 7.5:1+ tanto sobre superficie
       como sobre blanco, AAA en ambos casos. */
    --color-kicker: #8A3809;
    --color-error: #B3261E;

    /* Tipografia. Sin fuente de fallback "Inter": anadia una tercera fuente autohospedada al
       arranque (la mas lenta de las tres en la auditoria de rendimiento) para un beneficio
       minimo, ya que Atkinson Hyperlegible cubre el cuerpo y casi nunca llega a usarse. */
    --fuente-cuerpo: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fuente-titulares: 'Outfit', 'Atkinson Hyperlegible', system-ui, sans-serif;

    --texto-xs: 0.8125rem;
    --texto-sm: 0.9375rem;
    --texto-base: 1.0625rem;
    --texto-lg: 1.25rem;
    --texto-xl: 1.625rem;
    --texto-2xl: 2.125rem;
    --texto-3xl: 2.75rem;
    --texto-4xl: 3.5rem;

    --interlineado-cuerpo: 1.6;
    --interlineado-titular: 1.15;
    --medida-lectura: 68ch;

    /* Espaciado (escala 4px en rem) */
    --espacio-1: 0.25rem;
    --espacio-2: 0.5rem;
    --espacio-3: 0.75rem;
    --espacio-4: 1rem;
    --espacio-5: 1.5rem;
    --espacio-6: 2rem;
    --espacio-8: 3rem;
    --espacio-10: 4rem;
    --espacio-12: 6rem;

    /* Forma */
    --radio-sm: 0.5rem;
    --radio-md: 0.875rem;
    --radio-lg: 1.5rem;
    --radio-full: 999px;

    --sombra-sm: 0 1px 2px rgba(15, 43, 91, 0.08);
    --sombra-md: 0 8px 24px rgba(15, 43, 91, 0.12);
    --sombra-lg: 0 16px 48px rgba(15, 43, 91, 0.16);

    --transicion: 180ms ease;

    /* Objetivo tactil minimo AAA */
    --tacto-min: 44px;
}

/**
 * Modo oscuro: se activa (a) automaticamente si el sistema operativo lo pide y la persona no ha
 * elegido nada manualmente en el sitio (:root sin atributo data-theme), o (b) siempre que
 * data-theme="oscuro" este presente, sin importar la preferencia del sistema (eleccion manual
 * desde el interruptor de la cabecera, ver assets/js/tema.js). Los valores estan duplicados a
 * proposito entre el bloque @media y el selector [data-theme="oscuro"] porque CSS no tiene mixins:
 * ambos deben mantenerse sincronizados si se cambia una paleta.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --color-fondo: #0B1526;
        --color-superficie: #101C33;
        --color-texto: #EEF1F5;
        --color-texto-suave: #B6C0CF;
        --color-borde: #2E4269;
        --color-foco: var(--ambar);
        --color-titular: #E7ECF7;
        --color-enlace: #8FBBFF;
        --color-kicker: var(--naranja-host);
        --color-error: #FF8A80;
    }
}

:root[data-theme="oscuro"] {
    --color-fondo: #0B1526;
    --color-superficie: #101C33;
    --color-texto: #EEF1F5;
    --color-texto-suave: #B6C0CF;
    --color-borde: #2E4269;
    --color-foco: var(--ambar);
    --color-titular: #E7ECF7;
    --color-enlace: #8FBBFF;
    --color-kicker: var(--naranja-host);
    --color-error: #FF8A80;
}

/* ==========================================================================
   Reset ligero y base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@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; }
}

/* Salvaguarda: "#AgostoEmprendedor" y similares son una sola palabra sin espacios que el
   navegador no puede partir por si solo. Sin esto, en pantallas estrechas esa palabra fuerza
   el desbordamiento horizontal de toda la pagina (se ve en cabecera, titulares y botones). */
html, body { overflow-x: hidden; }

body {
    margin: 0;
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-base);
    line-height: var(--interlineado-cuerpo);
    color: var(--color-texto);
    background: var(--color-fondo);
    overflow-wrap: break-word;
    word-break: break-word;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--color-enlace); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:not([class]) { color: var(--color-enlace); }

h1, h2, h3, h4 {
    font-family: var(--fuente-titulares);
    line-height: var(--interlineado-titular);
    color: var(--color-titular);
    font-weight: 600;
    margin: 0 0 var(--espacio-4);
}

h1 { font-size: var(--texto-4xl); font-weight: 700; }
h2 { font-size: var(--texto-2xl); }
h3 { font-size: var(--texto-xl); }
p { margin: 0 0 var(--espacio-4); max-width: var(--medida-lectura); }
ul, ol { padding-left: 1.25em; }

/* Foco visible en todo elemento interactivo: doble anillo, visible sobre cualquier fondo */
:focus { outline: none; }
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-fondo), 0 0 0 5px var(--color-foco);
    border-radius: var(--radio-sm);
}

.visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.salta-contenido {
    position: absolute;
    left: var(--espacio-4);
    top: -100px;
    background: var(--azul-marino);
    color: var(--blanco);
    padding: var(--espacio-3) var(--espacio-5);
    border-radius: var(--radio-md);
    z-index: 1000;
    transition: top var(--transicion);
}
.salta-contenido:focus { top: var(--espacio-4); }

.contenedor {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--espacio-5);
}

.icon { width: 1.2em; height: 1.2em; flex-shrink: 0; }

/* ==========================================================================
   Firma HOST (ancla visual del acronimo)
   ========================================================================== */
.firma-host {
    display: inline-flex;
    gap: 0.05em;
    font-family: var(--fuente-titulares);
    font-weight: 700;
}
.firma-host__letra {
    display: inline-block;
    color: var(--naranja-host);
}
.firma-host__letra--o { color: var(--ambar); }
.firma-host__letra--s { color: var(--verde-sostenible); }
.firma-host__letra--t { color: var(--azul-medio); }
.firma-host--pequena { font-size: var(--texto-lg); letter-spacing: 0.05em; }

.firma-host-expandida {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-6);
    justify-content: center;
    padding: var(--espacio-6);
    background: var(--color-fondo);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
}
.firma-host-expandida__item { display: flex; flex-direction: column; align-items: center; gap: var(--espacio-1); min-width: 4.5rem; }
.firma-host-expandida__letra { font-family: var(--fuente-titulares); font-weight: 700; font-size: clamp(2.25rem, 7vw, 3.75rem); line-height: 1; }
.firma-host-expandida__palabra { font-size: var(--texto-sm); font-weight: 700; color: var(--color-texto-suave); text-align: center; }

.firma-host-grande {
    display: grid;
    gap: var(--espacio-2);
}
.firma-host-grande__letra {
    font-family: var(--fuente-titulares);
    font-weight: 700;
    font-size: clamp(3.5rem, 12vw, 8rem);
    line-height: 0.9;
    margin: 0;
}

/* ==========================================================================
   Botones
   ========================================================================== */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    min-height: var(--tacto-min);
    padding: var(--espacio-3) var(--espacio-6);
    border-radius: var(--radio-full);
    font-family: var(--fuente-titulares);
    font-weight: 600;
    font-size: var(--texto-base);
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion);
}
.boton:hover { transform: translateY(-2px); }

.boton--primario {
    background: var(--azul-marino);
    color: var(--blanco);
    /* Anillo claro sutil ademas de la sombra: el boton mantiene un borde perceptible aunque
       se apoye sobre fondos igual de oscuros (cabecera en modo oscuro, hero, seccion--oscura). */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), var(--sombra-sm);
}
.boton--primario:hover {
    background: var(--azul-marino-oscuro);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), var(--sombra-md);
}

.boton--acento {
    background: var(--verde-sostenible);
    color: var(--blanco);
}
.boton--acento:hover { background: var(--verde-sostenible-oscuro); }

.boton--fantasma {
    background: transparent;
    color: var(--color-titular);
    border-color: var(--color-borde);
}
.boton--fantasma:hover { border-color: var(--color-titular); }

/* Secciones siempre oscuras (independientes del tema del sistema): el texto debe quedarse
   siempre claro, no seguir a --color-titular cuando el usuario esta en modo claro. */
.seccion--oscura .boton--fantasma,
.pie .boton--fantasma,
.banner-cookies .boton--fantasma {
    color: var(--blanco);
    border-color: rgba(255, 255, 255, 0.45);
}
.seccion--oscura .boton--fantasma:hover,
.pie .boton--fantasma:hover,
.banner-cookies .boton--fantasma:hover {
    border-color: var(--blanco);
}

.boton--grande { padding: var(--espacio-4) var(--espacio-8); font-size: var(--texto-lg); }
.boton--ancho { width: 100%; }

/* ==========================================================================
   Cabecera / navegacion
   ========================================================================== */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-fondo);
    /* Sin backdrop-filter a proposito: crea un "containing block" para cualquier hijo con
       position:fixed (aqui, el panel del menu movil), que entonces queda anclado al tamano de
       esta cabecera en vez de al viewport completo -- eso era lo que dejaba el menu movil
       colapsado a la altura de la cabecera, mostrando solo el primer enlace. */
    border-bottom: 1px solid var(--color-borde);
}
.cabecera__interior {
    display: flex;
    align-items: center;
    padding-block: var(--espacio-3);
    gap: var(--espacio-4);
}
.cabecera__marca {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    text-decoration: none;
    /* Empuja las acciones (tema + menu/nav) al extremo derecho, sin depender de
       justify-content: space-between con 3 hijos, que dejaba el boton de tema descentrado. */
    margin-right: auto;
    min-width: 0;
}
/* min-width:0 permite que la marca se encoja cuando falta espacio; sin estas reglas el texto
   del hashtag se desbordaba de su caja y quedaba tapado por el boton de tema/menu contiguo.
   Con ellas, el texto trunca limpiamente en puntos suspensivos en vez de solaparse. */
.cabecera__marca .firma-host { font-size: var(--texto-2xl); flex-shrink: 0; }
.cabecera__texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cabecera__hashtag {
    font-family: var(--fuente-titulares);
    font-weight: 700;
    color: var(--color-titular);
    font-size: var(--texto-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cabecera__subtitulo {
    font-size: var(--texto-xs);
    color: var(--color-texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cabecera__acciones { display: flex; align-items: center; gap: var(--espacio-2); flex-shrink: 0; }

.cabecera__tema,
.cabecera__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tacto-min);
    height: var(--tacto-min);
    background: none;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    cursor: pointer;
    flex-shrink: 0;
}
.cabecera__tema { color: var(--color-titular); }
.cabecera__tema:hover { border-color: var(--color-titular); }
.cabecera__tema .icon { width: 1.35rem; height: 1.35rem; }

/* Icono sol/luna: por defecto (tema claro, sin eleccion manual) se ve la luna, que ofrece
   pasar a oscuro. Se invierte automaticamente con el sistema y, sobre todo, con la eleccion
   manual guardada en data-theme (ver assets/js/tema.js). */
.cabecera__icono-oscuro { display: block; }
.cabecera__icono-claro { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .cabecera__icono-oscuro { display: none; }
    :root:not([data-theme]) .cabecera__icono-claro { display: block; }
}
:root[data-theme="oscuro"] .cabecera__icono-oscuro { display: none; }
:root[data-theme="oscuro"] .cabecera__icono-claro { display: block; }
:root[data-theme="claro"] .cabecera__icono-oscuro { display: block; }
:root[data-theme="claro"] .cabecera__icono-claro { display: none; }

.cabecera__toggle .cabecera__icono-cerrar { display: none; }
.cabecera__toggle[aria-expanded="true"] .cabecera__icono-abrir { display: none; }
.cabecera__toggle[aria-expanded="true"] .cabecera__icono-cerrar { display: block; }

.cabecera__nav {
    display: none;
    position: fixed;
    inset: 0;
    top: 68px;
    background: var(--color-fondo);
    padding: var(--espacio-6) var(--espacio-5);
    overflow-y: auto;
    overflow-x: hidden;
}
.cabecera__nav.esta-abierta { display: block; }
.cabecera__lista { list-style: none; margin: 0 0 var(--espacio-6); padding: 0; display: grid; gap: var(--espacio-1); }
.cabecera__lista a {
    display: block;
    padding: var(--espacio-3) var(--espacio-2);
    text-decoration: none;
    color: var(--color-texto);
    font-weight: 600;
    border-radius: var(--radio-sm);
}
.cabecera__lista a[aria-current="page"] { color: var(--color-titular); background: var(--color-superficie); }
.cabecera__cta { width: 100%; }

/* El punto de corte a escritorio se sube a 1180px: con las 6 entradas del menu mas la marca
   y el boton de preinscripcion, por debajo de ese ancho no cabe todo en una sola fila y el
   menu de hamburguesa es la opcion mas segura (evita que el CTA quede recortado). */
@media (min-width: 1180px) {
    .cabecera__toggle { display: none; }
    .cabecera__nav {
        display: flex !important;
        position: static;
        align-items: center;
        gap: var(--espacio-5);
        padding: 0;
        background: none;
        width: auto;
        overflow: visible;
    }
    .cabecera__lista { display: flex; align-items: center; gap: var(--espacio-1); margin: 0; }
    .cabecera__lista a { padding: var(--espacio-2) var(--espacio-3); white-space: nowrap; }
    .cabecera__cta { width: auto; white-space: nowrap; }
}

/* ==========================================================================
   Secciones y layout general
   ========================================================================== */
.seccion { padding-block: var(--espacio-10); }
.seccion--superficie { background: var(--color-superficie); }
.seccion--oscura { background: var(--azul-marino); color: var(--blanco); }
.seccion--oscura h1, .seccion--oscura h2, .seccion--oscura h3 { color: var(--blanco); }
.seccion__cabecera { max-width: 42rem; margin-bottom: var(--espacio-8); }
.seccion__kicker {
    display: inline-block;
    font-family: var(--fuente-titulares);
    font-weight: 700;
    color: var(--color-kicker);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--texto-sm);
    margin-bottom: var(--espacio-2);
}

.hero {
    padding-block: var(--espacio-10) var(--espacio-8);
    background: linear-gradient(180deg, var(--color-superficie) 0%, var(--color-fondo) 100%);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); margin-top: var(--espacio-6); }
.hero__nota { margin-top: var(--espacio-3); font-size: var(--texto-sm); color: var(--color-texto-suave); }
.hero__eslogan { font-family: var(--fuente-titulares); font-weight: 700; font-size: var(--texto-lg); color: var(--color-kicker); margin: var(--espacio-4) 0 0; }

/* Hero con imagen a pantalla completa: en movil la foto es una banda superior normal (redondeada,
   en el flujo) y el texto va debajo sin superponerse -- superponer texto sobre una foto en
   pantallas pequenas suele ser ilegible. A partir de 900px la foto pasa a ser fondo a sangre
   completa de la seccion, con un degradado a la izquierda (usa --color-fondo, por eso se adapta
   solo al tema claro/oscuro) para que el texto quede legible sobre la parte mas "vacia" de la
   imagen. */
.hero--fondo { position: relative; overflow: hidden; }
.hero__fondo { border-radius: var(--radio-lg); overflow: hidden; margin: 0 var(--espacio-5) var(--espacio-6); box-shadow: var(--sombra-lg); }
.hero__fondo img { width: 100%; height: auto; display: block; }
.hero__velo { display: none; }
.hero__contenido { max-width: 34rem; }

@media (min-width: 900px) {
    .hero--fondo { min-height: 640px; display: flex; align-items: center; padding-block: var(--espacio-12); }
    .hero__fondo {
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: 0;
        margin: 0;
        box-shadow: none;
    }
    .hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: center right; }
    .hero__velo {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
            90deg,
            var(--color-fondo) 0%,
            var(--color-fondo) 25%,
            color-mix(in srgb, var(--color-fondo) 85%, transparent) 42%,
            color-mix(in srgb, var(--color-fondo) 35%, transparent) 62%,
            transparent 85%
        );
    }
    .hero__contenido { position: relative; z-index: 2; }
}

/* ==========================================================================
   Tarjetas (departamentos HOST, paquetes, FAQ...)
   ========================================================================== */
.rejilla { display: grid; gap: var(--espacio-5); }
.rejilla--2 { grid-template-columns: 1fr; }
.rejilla--3 { grid-template-columns: 1fr; }
.rejilla--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) {
    .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
    .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
    .rejilla--4 { grid-template-columns: repeat(4, 1fr); }
}

.tarjeta {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--espacio-6);
    box-shadow: var(--sombra-sm);
    transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }

.tarjeta-host {
    border-top: 5px solid var(--letra-color, var(--azul-marino));
}
.tarjeta-host__letra {
    font-family: var(--fuente-titulares);
    font-weight: 700;
    font-size: var(--texto-3xl);
    color: var(--letra-color, var(--color-titular));
    margin-bottom: var(--espacio-2);
}
.tarjeta-host--h { --letra-color: var(--naranja-host); }
.tarjeta-host--o { --letra-color: var(--ambar); }
.tarjeta-host--s { --letra-color: var(--verde-sostenible); }
.tarjeta-host--t { --letra-color: var(--azul-medio); }

.tarjeta-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radio-md);
    background: var(--color-superficie);
    color: var(--color-titular);
    margin-bottom: var(--espacio-3);
}
.tarjeta-icono .icon { width: 1.5rem; height: 1.5rem; }

.insignia {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    background: var(--ambar);
    color: var(--azul-marino);
    font-weight: 700;
    font-size: var(--texto-sm);
    padding: var(--espacio-1) var(--espacio-3);
    border-radius: var(--radio-full);
}

/* ==========================================================================
   Formularios
   ========================================================================== */
.formulario { display: grid; gap: var(--espacio-5); max-width: 42rem; }
.campo { display: grid; gap: var(--espacio-2); }
.campo label, .campo legend {
    font-weight: 700;
    font-family: var(--fuente-titulares);
    color: var(--color-titular);
}
.campo input, .campo select, .campo textarea {
    font: inherit;
    padding: var(--espacio-3) var(--espacio-4);
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-md);
    background: var(--color-fondo);
    color: var(--color-texto);
    min-height: var(--tacto-min);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
    border-color: var(--color-foco);
}
.campo__ayuda { font-size: var(--texto-sm); color: var(--color-texto-suave); }
.campo__error { font-size: var(--texto-sm); color: var(--color-error); font-weight: 700; }

fieldset.campo { border: none; padding: 0; margin: 0; }
.opciones { display: grid; gap: var(--espacio-2); }
.opcion {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-md);
    cursor: pointer;
}
.opcion:has(input:checked) { border-color: var(--azul-medio); background: var(--color-superficie); }
.opcion input { margin-top: 0.3em; width: 1.25em; height: 1.25em; flex-shrink: 0; }

/* Honeypot anti-spam: oculto visualmente y para lectores de pantalla, nunca a rellenar por humanos */
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso {
    padding: var(--espacio-4) var(--espacio-5);
    border-radius: var(--radio-md);
    border: 2px solid;
    margin-bottom: var(--espacio-5);
}
.aviso--exito { background: #EAF5EC; border-color: var(--verde-sostenible); color: #1B5E2C; }
.aviso--error { background: #FBEAEA; border-color: #B3261E; color: #7A1913; }

/* ==========================================================================
   FAQ (details/summary nativos: accesibles y sin JS)
   ========================================================================== */
.faq { display: grid; gap: var(--espacio-3); }
.faq details {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-4) var(--espacio-5);
    background: var(--color-superficie);
}
.faq summary {
    font-family: var(--fuente-titulares);
    font-weight: 700;
    color: var(--color-titular);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform var(--transicion); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p:last-child { margin-bottom: 0; margin-top: var(--espacio-3); }

/* ==========================================================================
   Pie de pagina
   ========================================================================== */
.pie { background: var(--azul-marino-oscuro); color: var(--gris-100); padding-block: var(--espacio-10) var(--espacio-6); }
.pie a { color: var(--blanco); }
.pie__grid { display: grid; gap: var(--espacio-8); grid-template-columns: 1fr; }
.pie__titulo { color: var(--blanco); font-size: var(--texto-base); margin-bottom: var(--espacio-3); }
.pie__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--espacio-2); }
.pie__lista--contacto li { display: flex; align-items: center; gap: var(--espacio-2); }
.pie__lista--contacto a { display: inline-flex; align-items: center; gap: var(--espacio-2); text-decoration: none; }
.pie__legal { margin-top: var(--espacio-8); padding-top: var(--espacio-5); border-top: 1px solid rgba(255,255,255,0.15); font-size: var(--texto-sm); }
/* Los parrafos heredan max-width: 68ch por defecto (para no dificultar la lectura de bloques
   largos de texto); esta linea es corta y de una sola frase, asi que se libera ese limite para
   que quepa en una linea en pantallas normales en vez de partirse a la mitad sin necesidad. */
.pie__legal p { max-width: none; }
.enlace-boton { background: none; border: none; padding: 0; color: var(--blanco); text-decoration: underline; cursor: pointer; font: inherit; }
@media (min-width: 900px) {
    .pie__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ==========================================================================
   Boton flotante de WhatsApp
   ========================================================================== */
.boton-flotante-whatsapp {
    position: fixed;
    right: var(--espacio-5);
    bottom: var(--espacio-5);
    z-index: 90;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--verde-sostenible);
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sombra-lg);
    transition: transform var(--transicion);
}
.boton-flotante-whatsapp:hover { transform: scale(1.08); }
.boton-flotante-whatsapp .icon { width: 1.75rem; height: 1.75rem; }

/* ==========================================================================
   Banner de cookies
   ========================================================================== */
.banner-cookies {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    background: var(--azul-marino-oscuro);
    color: var(--gris-100);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
}
.banner-cookies__interior {
    max-width: 1200px;
    margin-inline: auto;
    padding: var(--espacio-5);
    display: grid;
    gap: var(--espacio-4);
}
.banner-cookies p { margin: 0; max-width: none; }
.banner-cookies a { color: var(--blanco); }
.banner-cookies__botones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); }
@media (min-width: 700px) {
    .banner-cookies__interior { grid-template-columns: 1fr auto; align-items: center; }
}

/* ==========================================================================
   Scroll-reveal (solo si JS y sin preferencia de movimiento reducido)
   ========================================================================== */
.js .revelar {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease, transform 500ms ease;
}
.revelar.revelado { opacity: 1; transform: none; }

/* ==========================================================================
   Utilidades
   ========================================================================== */
.texto-centro { text-align: center; }
.texto-suave { color: var(--color-texto-suave); }
.espacio-arriba { margin-top: var(--espacio-8); }
.solo-lectura-pantalla-grande { display: none; }
@media (min-width: 900px) { .solo-lectura-pantalla-grande { display: block; } }