/* Cocuyo CSS bundle v1: generated by scripts/build-css.mjs. */
/* cocuyo-css: assets/css/tokens.css */
/* Geist auto-alojada (la letra de la Fabriquita; dueño, 26-ago-2026).
   Variable 100-900, subset latin, sin CDNs (CLAUDE.md) y dentro de la
   CSP font-src 'self'. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Fraunces variable (la letra de CARTEL; dueño, 30-ago-2026).
   Licencia OFL (copia en ../fonts/fraunces-OFL.txt): cubre web Y las
   apps de iOS/Android/TV sin tramos ni páginas vistas — que es justo
   la trampa de las licencias de foundry. Auto-alojada, sin CDNs.

   Trae DOS ejes: wght 400-900 y opsz 9-144. El eje óptico lo aplica
   el navegador solo (font-optical-sizing: auto por defecto): a tamaño
   de titular usa el dibujo de cartel —más contraste, remates más
   finos— y a tamaño pequeño el de texto. Una sola fuente hace de dos. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   COCUYO — Sistema de diseño (tokens)
   La ÚNICA fuente de verdad de estilos base. Ver CLAUDE.md.
   ============================================================ */

/* Lo marcado como oculto (atributo hidden) NO se ve nunca, en ninguna página
   (revisión de diseño, 5-oct-2026). El navegador lo oculta con la prioridad
   más baja que existe, así que cualquier estilo con display (.tarjeta grid,
   .agente-quien inline-block…) lo volvía a enseñar vacío. Esta regla
   sustituye a los parches sueltos de cada página (OJO: crear.html no carga
   tokens.css, así que las hojas que comparte con el resto —acceso-modal,
   navegacion-global, cuenta-acciones— conservan su parche). Única excepción: el índice
   de las páginas legales, que en escritorio se muestra siempre a propósito
   aunque en móvil lo pliegue con hidden (legal.css + legal-indice.js). */
[hidden]:not(.legal-indice__lista) { display: none !important; }

:root {
  color-scheme: dark;
  /* --- Color: la oscuridad y la luz del Cocuyo ---
     SEGUNDA SUBIDA DE TONO (29-jul-2026, dueño: "colores más claros, gris
     claro mezclado con el verde del cocuyo, que la plataforma se vea más
     agradable"). La primera subida seguía siendo casi negra; esta lleva la
     casa a un GRIS GRAFITO VERDOSO: se sigue viendo cine (el video manda,
     los pósters brillan) pero la interfaz respira y deja de parecer un
     agujero. Los grises llevan verde dentro a propósito — no son grises
     neutros: es la misma luz del cocuyo, muy diluida.

     Contraste comprobado sobre el fondo (#1B2320): texto principal 13,4:1,
     secundario 7,6:1, terciario 5,3:1 — los tres por encima del 4,5:1 que
     pide WCAG AA. El verde de marca NO se toca: es la identidad.
     Valores anteriores entre paréntesis. */
  /* --- LIME FROST (22-ago-2026, decisión del dueño) ---
     Se adopta el tema "Lime Frost" de 21st.dev en su modo oscuro para TODO
     Cocuyo: NEGRO puro (sin tinte azul: decisión del dueño), acento LIMA eléctrico y
     superficies "escarcha" (vidrio translúcido con desenfoque). El verde
     bioluminiscente anterior queda anotado entre paréntesis: para volver
     basta con restaurar estos valores.
     Contraste sobre el fondo (#050505): texto principal 19:1, secundario
     13:1, terciario 7,5:1, lima 15:1 — todos muy por encima de AA. */
  --negro-abismo: #050505;      /* fondo principal · NEGRO (el LF background #020617 era azulado; el dueño lo quiso negro) (antes #1B2320) */
  --negro-elevado: #121212;     /* tarjetas y superficies · LF card (antes #263029) */
  --negro-borde: #262626;       /* bordes e inputs · LF border/input (antes #3A4741) */
  --verde-cocuyo: #AFF33E;      /* EL acento: LIMA · LF primary/ring (antes #00E77B) */
  --verde-profundo: #14532D;    /* fondos de acento, estados · LF accent (antes #126B47) */
  --verde-apagado: #22C55E;     /* hover/pressed de elementos verdes (antes #2C9468) */
  --lima-clara: #D9FF8A;        /* lima iluminada: la escarcha del hover en botones */
  --pizarra: #333333;           /* secundario neutro (LF secondary sin tinte azul): chips, separadores */
  --blanco-luz: #F8FAFC;        /* texto principal · LF foreground (antes #F4FFF9) */
  --gris-niebla: #CBD5E1;       /* texto secundario (antes #C6D3CB) */
  --gris-humo: #94A3B8;         /* terciario/placeholders (antes #A3B3AA) */
  --peligro: #F87171;           /* errores, legible sobre la noche (antes #FF7B86) */
  --peligro-fondo: #991B1B;     /* fondo de acciones destructivas · LF destructive */
  --apps-traje-marino: #20344f; /* muestras de vestuario, sin cambiar la paleta de la web */
  --apps-traje-gris: #626975;
  --apps-traje-negro: #171a20;
  --apps-traje-beige: #d1bfa6;
  /* Escarcha: la superficie de vidrio de Lime Frost (ver .escarcha). */
  --escarcha: color-mix(in srgb, var(--negro-elevado) 72%, transparent);
  --escarcha-borde: color-mix(in srgb, var(--blanco-luz) 12%, transparent);

  /* Cuenta móvil: paleta del panel compacto. Conserva los tonos y opacidades
     aprobados sin alterar los tokens compartidos con el resto de la web. */
  --cuenta-movil-fondo: var(--negro-abismo);
  --cuenta-movil-texto: #f3f3ef;
  --cuenta-movil-panel: #0c0c0c;
  --cuenta-movil-borde: #ffffff16;
  --cuenta-movil-sombra: #0003;
  --cuenta-movil-avatar: #171717;
  --cuenta-movil-borde-avatar: #ffffff18;
  --cuenta-movil-email: #bbbcb4;
  --cuenta-movil-saldo: #141512;
  --cuenta-movil-borde-saldo: #ffffff12;
  --cuenta-movil-saldo-cifra: #f4f4ef;
  --cuenta-movil-saldo-nota: #9c9f91;
  --cuenta-movil-separador: #ffffff0e;
  --cuenta-movil-titulo: #e5e5df;
  --cuenta-movil-icono: #9c9f95;
  --cuenta-movil-flecha: #686b61;
  --cuenta-movil-apartado-activo: #ffffff06;
  --cuenta-movil-acento: #d1f878;
  --cuenta-movil-contenido: #101010;
  --cuenta-movil-borde-contenido: #ffffff10;
  --cuenta-movil-texto-secundario: #a6a99f;
  --cuenta-movil-selector: #191919;
  --cuenta-movil-separador-ajuste: #ffffff0f;
  --cuenta-movil-peligro: #dba9a3;
  --cuenta-movil-comunidad: #20221b;
  --cuenta-movil-borde-comunidad: #d1f8782a;
  --cuenta-movil-enlace: #dedfd7;
  --cuenta-movil-salir: #93968d;

  /* --- El glow (la firma visual) --- */
  --glow-suave: 0 0 12px rgba(175, 243, 62, 0.30);
  --glow-medio: 0 0 24px rgba(175, 243, 62, 0.40), 0 0 6px rgba(175, 243, 62, 0.55);
  --glow-fuerte: 0 0 48px rgba(175, 243, 62, 0.50), 0 0 12px rgba(175, 243, 62, 0.75);

  /* Anillo de foco de teclado (accesibilidad AA): doble borde para contraste
     sobre cualquier fondo — un halo del color de fondo y encima el verde de
     marca, así se ve el foco tanto sobre negro como sobre superficies verdes. */
  --anillo-foco: 0 0 0 2px var(--negro-abismo), 0 0 0 4px var(--verde-cocuyo);
  /* El foco de teclado de toda la web (revisión de diseño, 5-oct-2026): un
     contorno lima de 2 px separado 2 px del control. Mismo dibujo que el
     anillo de arriba, pero con outline: respeta las esquinas de cada control
     y no desaparece en el modo de alto contraste. Si una hoja necesita
     repetir el foco para ganar especificidad, usa ESTOS dos valores (con
     respaldo, var(--foco-contorno, 2px solid var(--verde-cocuyo)), si la
     hoja también la carga crear.html, que no lleva tokens.css). */
  --foco-contorno: 2px solid var(--verde-cocuyo);
  --foco-separacion: 2px;

  /* Tinta oscura sobre el verde de marca (botones primarios, chips activos).
     Un ÚNICO valor para toda la app: antes convivían #04150D y #041a10. */
  --tinta-sobre-verde: #0A0A0A;  /* negro sobre lima (antes #041A10) */

  /* Barra de prompt de la portada, estilo único «Metal» (dueño, 30-sep-2026):
     grafito cepillado con filete de cromo (inicio-barra.css). Contrastes
     medidos sobre --barra-fondo: texto 18,6:1 · suave 8,3:1 · marcador 5,9:1,
     y AA también sobre las superficies y sobre la parte alta del grafito
     (--barra-metal-alto). La lima (--verde-cocuyo) solo para Crear y el foco. */
  --barra-fondo: #0B0C0A;
  --barra-superficie: #121411;
  --barra-superficie-hover: #1B1E19;
  --barra-borde: color-mix(in srgb, #FFFFFF 9%, transparent);
  --barra-borde-fuerte: color-mix(in srgb, #FFFFFF 18%, transparent);
  --barra-texto: #F4F6F1;
  --barra-texto-suave: #A7ADA2;
  --barra-marcador: #8C9387;
  --barra-brillo: inset 0 1px 0 color-mix(in srgb, #FFFFFF 7%, transparent);
  --barra-sombra: 0 1px 1px rgba(0, 0, 0, 0.5), 0 24px 64px -16px rgba(0, 0, 0, 0.85);
  --barra-trans: 180ms cubic-bezier(0.2, 0, 0, 1);
  --barra-anillo-foco: 0 0 0 2px var(--barra-fondo), 0 0 0 4px var(--verde-cocuyo);
  /* Metal: placa de grafito cepillado (de --barra-metal-alto a --barra-fondo),
     cromo del filete y de Crear, y chip activo con reflejo. */
  --barra-metal-alto: #171916;
  --barra-metal-fondo: linear-gradient(180deg, var(--barra-metal-alto) 0%, var(--barra-fondo) 62%);
  --barra-metal-cromo: #2E312C, #E6E9E1 12%, #4B4F48 26%, #A9AEA4 40%, #262923 55%, #F4F6F1 70%, #585C54 85%, #2E312C;
  --barra-metal-chip-alto: #2A2D27;
  --barra-metal-chip: linear-gradient(180deg, var(--barra-metal-chip-alto) 0%, #191B17 100%);

  /* Fondo de acento con contraste AA: el verde de marca sobre --verde-profundo
     puro da 3,96:1 (suspenso). Oscurecido con el abismo, el texto verde y el
     blanco pasan de 4,5:1. Usar SIEMPRE este para cajas con texto de acento. */
  --acento-fondo: color-mix(in srgb, var(--verde-profundo) 45%, var(--negro-abismo));

  /* Escala de elevación (sombras neutras; el glow verde es aparte).
     Antes había 27 recetas distintas repartidas por los CSS. */
  --sombra-1: 0 8px 24px rgba(0, 0, 0, 0.35);
  --sombra-2: 0 12px 32px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 18px 48px rgba(0, 0, 0, 0.5);

  /* --- Tipografía (sistema, sin CDNs) --- */
  /* Lime Frost pide Inter / JetBrains Mono. Sin CDNs (CLAUDE.md): se usan si
     están en el sistema y, si no, la pila del sistema de siempre. */
  --fuente: "Geist", Inter, "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* La letra de CARTEL. Solo para titulares y wordmark: el texto y la
     interfaz siguen con Geist, que para eso es buena. Dos letras, cada
     una en su oficio — es lo que hacen Netflix, Hulu y HBO. */
  --fuente-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fuente-mono: "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas, monospace; /* para "coordenadas del universo" */
  --espaciado-letra: -0.01em; /* Lime Frost: letra un pelo más apretada */
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-md: 1.05rem;
  --texto-lg: 1.25rem;
  --texto-xl: 1.75rem;
  --texto-hero: clamp(2rem, 8vw, 3.5rem);
  /* Escala de titulares fluida (29-sep-2026, pulido tipográfico: mismo
     estilo, letra más fina). Crecen con la pantalla entre un mínimo legible
     en móvil y el máximo de escritorio. No se aplican solas a h1–h4 para no
     mover ninguna página maquetada: se usan con var() o con las clases
     .titulo-1…4 del final de esta hoja. */
  --titulo-1: clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
  --titulo-2: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  --titulo-3: clamp(1.25rem, 1.1rem + 0.65vw, 1.75rem);
  --titulo-4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  /* Interlineado: apretado en titulares, holgado en lectura. */
  --interlinea-titular: 1.1;
  --interlinea-subtitulo: 1.25;
  --interlinea-compacta: 1.35;
  --interlinea-texto: 1.55;
  /* Tracking: los titulares grandes se cierran un poco más que el texto;
     las etiquetas en MAYÚSCULAS se abren para que respiren. */
  --tracking-titular: -0.025em;
  --tracking-subtitulo: -0.015em;
  --tracking-mayusculas: 0.07em;
  /* Pesos de Geist (variable 100–900). */
  --peso-texto: 400;
  --peso-medio: 550;
  --peso-fuerte: 650;

  /* --- Espaciado y forma --- */
  --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem;
  --esp-4: 1rem;    --esp-6: 1.5rem; --esp-8: 2rem;
  --radio-sm: 0.5rem; --radio-md: 1rem; --radio-lg: 1.5rem; --radio-pill: 999px; /* Lime Frost: radio base 1rem */

  /* --- Capas --- */
  --z-nav: 100; --z-overlay: 200; --z-modal: 300;
  /* Cápsula Ver/Crear/Perfil (nav-minima): alto + sombra + aire para
     que las miniaturas de capítulo no queden debajo. El safe-area del
     home indicator se suma aparte. */
  --hueco-nav-flotante: 7.5rem;

  /* --- Movimiento --- */
  /* Vidrio de la casa: el desenfoque SIEMPRE lleva saturacion. Sin el
     saturate() el fondo translucido se ve gris y barato; con el, los
     colores de detras se avivan y parece cristal de verdad (es el truco
     de iOS/Hulu). Un unico valor para toda la app. */
  --vidrio: blur(18px) saturate(180%);
  --vidrio-fino: blur(12px) saturate(180%);

  --trans-rapida: 150ms ease;
  --trans-media: 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --curva-suave: cubic-bezier(0.22, 1, 0.36, 1); /* salida elástica elegante, la curva de la casa */
}

/* ============ Orden de la cascada (@layer) ============
   El reset entra en una CAPA. Todo lo que NO esta en una capa gana a lo
   que si lo esta, sin importar la especificidad: asi el reset (selectores
   de elemento, lo mas debil que existe) deja de poder ganarle por accidente
   a nada de cocuyo-app.css ni de los <style> de cada pagina.
   Las capas siguientes quedan DECLARADAS pero vacias: reservan el orden
   para cuando se migren los otros CSS, sin cambiar nada hoy. */
@layer reset, base, componentes, lujo;

/* ============ Reset y base ============ */
@layer reset {
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--negro-abismo);
  color: var(--blanco-luz);
  font-family: var(--fuente);
  font-size: var(--texto-base);
  line-height: 1.5;
  letter-spacing: var(--espaciado-letra);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* Firefox en Mac: el mismo trazo fino que Safari/Chrome */
  font-kerning: normal;
  font-optical-sizing: auto;
  /* SAFE AREA SUPERIOR: la app se dibuja bajo la barra de estado (notch)
     por viewport-fit=cover + status-bar translúcida en iOS. Este relleno
     baja TODO el contenido por debajo del notch/reloj, para que la cabecera
     no quede tapada. Vale 0 en móviles sin notch y en escritorio. */
  padding-top: env(safe-area-inset-top);
  /* Sin el destello gris al tocar: se siente app nativa, no web. */
  -webkit-tap-highlight-color: transparent;
}

/* Sensación de app SOLO cuando está instalada (standalone): sin el rebote
   elástico al llegar al final del scroll. En el navegador normal no se toca,
   para no quitar el "tirar para recargar" que el usuario espera ahí. */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; accent-color: var(--verde-cocuyo); caret-color: var(--verde-cocuyo); }
::placeholder { color: var(--gris-humo); opacity: 1; }
} /* ---- fin @layer reset ---- */

/* ============ Foco visible global (WCAG 2.4.7 Focus Visible) ============ */
/* El teclado y los mandos de TV (relevante para una app de streaming de salón)
   deben ver SIEMPRE dónde está el foco. Damos el verde de marca como anillo
   (coherente con el lore "se enciende al tocar"). :focus-visible solo salta con
   teclado, no al hacer clic con el ratón/dedo, así que no ensucia el puntero.
   UN SOLO FOCO (revisión de diseño, 5-oct-2026): contorno, no sombra, y sin
   tocar las esquinas. Antes era una sombra con border-radius forzado a 8 px:
   las píldoras y los círculos se volvían rectángulos al recibir el foco y,
   en el alto contraste de Windows (que borra las sombras), no se veía nada. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible {
  outline: var(--foco-contorno);
  outline-offset: var(--foco-separacion);
}
/* Alto contraste (forced-colors): las sombras y los bordes propios de cada
   control desaparecen o cambian de color, así que el contorno del sistema
   manda siempre, también donde una página lo había quitado. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: var(--foco-separacion) !important;
  }
}

/* ============ El wordmark (COCUYO con la 2ª O encendida) ============ */
.wordmark { font-weight: 800; letter-spacing: 0.14em; color: var(--blanco-luz); }
.wordmark .o-viva { color: var(--verde-cocuyo); text-shadow: var(--glow-medio); }
.wordmark-cabecera { font-size: 1.3rem; }

/* ============ Los dos faros (logo mínimo, puro CSS) ============ */
.faros { display: inline-flex; gap: 0.45em; align-items: center; }
.faros i {
  width: 0.55em; height: 0.55em; border-radius: 50%;
  background: var(--verde-cocuyo);
  box-shadow: var(--glow-medio);
  /* LEY del lore: el Pyrophorus NO parpadea — se enciende una vez al llegar
     y queda BRILLANDO FIJO como un proyector. (Antes "respiraba" en bucle.) */
  animation: faro-enciende 650ms ease-out both;
}
.faros i:last-child { animation-delay: 130ms; }
@keyframes faro-enciende {
  from { opacity: 0; box-shadow: none; transform: scale(0.85); }
  to   { opacity: 1; box-shadow: var(--glow-medio); transform: scale(1); }
}

/* ============ Botones (Lime Frost, 22-ago-2026) ============
   Tres pesos: primario = lima lleno (la acción que vende); fantasma =
   escarcha (vidrio translúcido con borde de luz) para lo secundario;
   secundario = acento verde profundo con texto lima. Todos píldora,
   48px táctil, sin bordes duros. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  padding: 0.8em 1.6em; border-radius: 12px;
  font-family: var(--fuente); font-weight: 650; letter-spacing: -.01em; line-height: 1.4;
  transition: transform var(--trans-rapida), box-shadow var(--trans-media);
  min-height: 48px; /* táctil: pulgar */
}
.btn:active { transform: scale(0.97); }
.btn-primario {
  background: var(--verde-cocuyo); color: var(--tinta-sobre-verde);
  box-shadow: var(--glow-suave), inset 0 1px 0 color-mix(in srgb, var(--blanco-luz) 35%, transparent);
}
.btn-primario:hover { box-shadow: var(--glow-medio), inset 0 1px 0 color-mix(in srgb, var(--blanco-luz) 35%, transparent); }
.btn-fantasma {
  border: 1px solid var(--escarcha-borde); color: var(--blanco-luz);
  background: var(--escarcha);
  -webkit-backdrop-filter: var(--vidrio-fino); backdrop-filter: var(--vidrio-fino);
}
.btn-fantasma:hover { border-color: color-mix(in srgb, var(--verde-cocuyo) 55%, transparent); }

/* ---------- .btn-luz: el botón que se enciende ----------
   Port en CSS puro del "Interactive Hover Button" de 21st.dev (sin React,
   sin Tailwind, sin JS). Al pasar el ratón el texto se desliza y se apaga,
   un punto de luz que vive en la esquina crece hasta llenar el botón y
   entra el mismo texto con una flecha. Marcado:
     <button class="btn btn-primario btn-luz" data-texto="Comenzar">
       <span class="btn-luz-texto">Comenzar</span>
     </button>
   data-texto = texto de la capa que entra (la flecha la pone el CSS).
   En táctil no hay hover: se ve como un botón normal. */
.btn-luz { position: relative; overflow: hidden; isolation: isolate; }
.btn-luz .btn-luz-texto {
  display: inline-block; position: relative; z-index: 2;
  transition: transform 300ms var(--curva-suave), opacity 300ms var(--curva-suave);
}
.btn-luz::before {            /* el punto de luz que crece */
  content: ""; position: absolute; z-index: 1;
  left: 16%; top: 44%; width: 0.4rem; height: 0.4rem;
  border-radius: var(--radio-pill);
  background: var(--lima-clara);
  opacity: 0.55;
  transition: left 300ms var(--curva-suave), top 300ms var(--curva-suave),
              width 300ms var(--curva-suave), height 300ms var(--curva-suave),
              transform 300ms var(--curva-suave), opacity 300ms var(--curva-suave);
}
.btn-luz::after {             /* la capa que entra: texto + flecha */
  content: attr(data-texto) "\00a0\00a0" url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta-sobre-verde); font-weight: 700;
  transform: translateX(2.5rem); opacity: 0;
  transition: transform 300ms var(--curva-suave), opacity 300ms var(--curva-suave);
  pointer-events: none;
}
.btn-fantasma.btn-luz::before { background: var(--verde-cocuyo); }
/* En táctil/TV no hay hover: el punto de luz no tiene función y se esconde. */
@media (hover: none) {
  .btn-luz::before { display: none; }
}
@media (hover: hover) {
  .btn-luz:hover .btn-luz-texto,
  .btn-luz:focus-visible .btn-luz-texto { transform: translateX(2.5rem); opacity: 0; }
  .btn-luz:hover::before,
  .btn-luz:focus-visible::before { left: 0; top: 0; width: 100%; height: 100%; transform: scale(1.8); opacity: 1; }
  .btn-luz:hover::after,
  .btn-luz:focus-visible::after { transform: translateX(0); opacity: 1; }
}
/* Peso PRIMARIO sin llegar a la "joya" verde llena (btn-primario, reservada al
   pago): para la acción principal de una pantalla (p. ej. Entrar/Crear cuenta),
   que no debe quedar apagada como una fantasma. */
.btn-secundario { background: var(--verde-profundo); color: var(--verde-cocuyo); border: 1px solid var(--verde-apagado); }
.btn-secundario:hover { box-shadow: var(--glow-suave); border-color: var(--verde-cocuyo); }

/* ============ Tarjeta de mundo (carátula que se enciende) ============ */
.mundo-card {
  position: relative; border-radius: var(--radio-md); overflow: hidden;
  background: var(--negro-elevado); border: 1px solid var(--negro-borde);
  transition: transform var(--trans-media), box-shadow var(--trans-media), border-color var(--trans-media);
}
/* El :hover va DENTRO de @media (hover:hover): en táctil/TV no hay hover
   real y el estado se quedaba "pegado" tras el toque. El foco de teclado
   (:focus-visible) sigue funcionando en todos los aparatos. */
.mundo-card:focus-visible {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--verde-apagado);
  /* El foco de teclado lo pone el contorno global (--foco-contorno): el glow
     solo no basta sobre una carátula que ya es luminosa. Aquí ya no se repite
     el anillo como sombra, que dibujaba dos marcos a la vez. */
  box-shadow: var(--glow-suave), var(--sombra-2);
}
@media (hover: hover) {
  .mundo-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--verde-apagado);
    box-shadow: var(--glow-suave), 0 12px 32px rgba(0,0,0,0.6);
  }
}

/* ============ Coordenadas del universo (el prompt como estética) ============ */
.coordenadas {
  font-family: var(--fuente-mono); font-size: var(--texto-xs);
  color: var(--verde-cocuyo);
  /* Fondo oscurecido: el verde sobre --verde-profundo puro daba 3,96:1 (AA pide 4,5). */
  background: var(--acento-fondo); border: 1px solid var(--verde-apagado);
  border-radius: var(--radio-sm); padding: var(--esp-3) var(--esp-4);
  overflow-wrap: anywhere;
}

/* ============ Loader "Sintonizando señal…" ============ */
.sintonizando { display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); }
.sintonizando .faros i { width: 14px; height: 14px; }

/* ============ Skeleton de carga (shimmer, acabado premium) ============ */
/* Reutilizable en cualquier página mientras carga (carátulas, tarjetas de
   perfil, email). Coherente con la marca: un brillo que "sintoniza". */
.skeleton {
  background: linear-gradient(100deg,
    var(--negro-elevado) 30%, var(--negro-borde) 50%, var(--negro-elevado) 70%);
  background-size: 200% 100%;
  animation: cargando-brillo 1.4s ease infinite;
  border-radius: var(--radio-md);
  color: transparent !important; /* oculta el texto de maqueta bajo el shimmer */
}
@keyframes cargando-brillo { to { background-position: -200% 0; } }

/* ============ Nav inferior móvil ============ */
.nav-inferior {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; justify-content: space-around; align-items: center;
  padding-top: var(--esp-2);
  padding-bottom: calc(var(--esp-2) + env(safe-area-inset-bottom));
  padding-left: calc(var(--esp-2) + env(safe-area-inset-left));
  padding-right: calc(var(--esp-2) + env(safe-area-inset-right));
  background: color-mix(in srgb, var(--negro-abismo) 92%, transparent);
  -webkit-backdrop-filter: var(--vidrio); backdrop-filter: var(--vidrio);
  border-top: 1px solid var(--negro-borde);
}
.nav-inferior a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: var(--texto-xs); color: var(--gris-niebla); padding: var(--esp-2) var(--esp-3);
  min-width: 64px; min-height: 48px; justify-content: center;
}
.nav-inferior a.activo { color: var(--verde-cocuyo); text-shadow: var(--glow-suave); }
/* Indicador de pestaña activa: una píldora de luz que se enciende
   sobre el icono (coherente con el lore: la señal sintonizada). */
.nav-inferior a { position: relative; transition: color var(--trans-media); }
.nav-inferior a::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 18px; height: 3px; border-radius: var(--radio-pill);
  background: var(--verde-cocuyo); box-shadow: var(--glow-suave);
  transform: translateX(-50%) scaleX(0); opacity: 0;
  transition: transform var(--trans-media), opacity var(--trans-media);
}
.nav-inferior a.activo::before { transform: translateX(-50%) scaleX(1); opacity: 1; }
/* Micro-rebote del icono al tocar: se encoge al presionar y vuelve
   solo con la curva elástica al soltar. Solo transform. */
.nav-inferior a svg,
.nav-inferior a .faros { transition: transform 300ms var(--curva-suave); }
.nav-inferior a:active svg,
.nav-inferior a:active .faros { transform: scale(0.82); transition-duration: 80ms; }

/* La chispa de Crear lleva la luz de la casa SIEMPRE encendida (dueño,
   28-ago-2026): es la única acción especial de la barra y estaba gris,
   igual que todo. Solo el icono — la etiqueta se queda en niebla para no
   gritar. El resto de la barra permanece en calma: una sola luz. */
.nav-inferior .nav-crear svg {
  color: var(--verde-cocuyo);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--verde-cocuyo) 55%, transparent));
}
.nav-inferior .nav-crear.activo svg { filter: drop-shadow(0 0 9px var(--verde-cocuyo)); }
/* Foco de teclado visible: la cápsula flota sobre contenido oscuro y el
   anillo por defecto se perdía. */
.nav-inferior a:focus-visible {
  outline: var(--foco-contorno);
  outline-offset: var(--foco-separacion);
  border-radius: var(--radio-pill);
}


/* Lanzamiento: Ver / Crear / Perfil en una cápsula compacta. */
.nav-inferior.nav-minima {
  left: 50%;
  right: auto;
  bottom: calc(var(--esp-3) + env(safe-area-inset-bottom));
  width: min(380px, calc(100vw - 2 * var(--esp-4)));
  transform: translateX(-50%);
  justify-content: center;
  gap: var(--esp-2);
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--blanco-luz) 12%, transparent);
  border-radius: var(--radio-pill);
  background: color-mix(in srgb, var(--negro-abismo) 88%, transparent);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .38);
}
.nav-inferior.nav-minima a { flex: 1; border-radius: var(--radio-pill); }
.nav-inferior.nav-minima a.activo {
  background: color-mix(in srgb, var(--verde-profundo) 72%, transparent);
}

/* En escritorio la navegación deja de ocupar todo el borde inferior y se
   convierte en una cápsula superior. Conserva exactamente las mismas rutas,
   pero la interfaz se siente como una plataforma de cine de escritorio. */
@media (min-width: 900px) and (hover: hover) {
  .nav-inferior {
    top: calc(var(--esp-4) + env(safe-area-inset-top));
    bottom: auto;
    left: auto;
    right: max(var(--esp-4), calc((100vw - 1200px) / 2 + var(--esp-4)));
    width: auto;
    justify-content: flex-end;
    gap: var(--esp-1);
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--blanco-luz) 12%, transparent);
    border-radius: var(--radio-pill);
    background: color-mix(in srgb, var(--negro-abismo) 78%, transparent);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  }
  /* Hay que repetirlo TODO aqui: `.nav-inferior.nav-minima` es mas
     especifico que el `.nav-inferior` de arriba, y una media query no
     suma especificidad. Sin esto sobreviven el `left: 50%`, el ancho
     fijo y el `bottom` de la version movil, y la capsula se estira de
     arriba abajo desplazada a la derecha (dueno, 28-ago-2026). */
  .nav-inferior.nav-minima {
    transform: none;
    top: calc(var(--esp-4) + env(safe-area-inset-top));
    bottom: auto;
    left: auto;
    right: max(var(--esp-4), calc((100vw - 1200px) / 2 + var(--esp-4)));
    width: auto;
    justify-content: flex-end;
    gap: var(--esp-1);
  }
  .nav-inferior.nav-minima a { flex: 0 0 auto; }
  .nav-inferior a {
    flex-direction: row;
    gap: var(--esp-2);
    min-width: auto;
    min-height: 40px;
    padding: .55rem .85rem;
    border-radius: var(--radio-pill);
  }
  .nav-inferior a::before { display: none; }
  .nav-inferior a.activo {
    color: var(--blanco-luz);
    background: color-mix(in srgb, var(--verde-profundo) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde-cocuyo) 24%, transparent);
  }
}

/* Navegación de producto: Cine / Estudio y una entrada propia a la cuenta.
   Se comparte con las páginas anteriores para que no reaparezca la cápsula. */
.nav-inferior.nav-minima.nav-producto {
  gap: 4px;
  padding: 6px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--negro-elevado) 94%, transparent);
  box-shadow: 0 8px 30px rgb(0 0 0 / .25);
}
.nav-inferior.nav-minima.nav-producto a {
  min-height: 48px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.015em;
  gap: 4px;
  color: var(--gris-niebla);
  transition: color 180ms ease, background 180ms ease;
}
.nav-inferior.nav-minima.nav-producto a svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
  filter: none;
  color: inherit;
}
.nav-inferior.nav-minima.nav-producto a::before { display: none; }
.nav-inferior.nav-minima.nav-producto a.activo {
  color: var(--verde-cocuyo);
  background: color-mix(in srgb, var(--verde-cocuyo) 9%, transparent);
  box-shadow: none;
  text-shadow: none;
}
.nav-inferior.nav-minima.nav-producto a:hover { color: var(--blanco-luz); background: color-mix(in srgb, var(--blanco-luz) 6%, transparent); }
.nav-inferior.nav-minima.nav-producto a:focus-visible { outline: var(--foco-contorno); outline-offset: var(--foco-separacion); }
@media (min-width: 900px) {
  .nav-inferior.nav-minima.nav-producto {
    top: calc(12px + env(safe-area-inset-top));
    bottom: auto;
    left: auto;
    right: max(24px, calc((100vw - 1280px) / 2 + 48px));
    width: auto;
    min-height: 48px;
    transform: none;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-inferior.nav-minima.nav-producto a {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 9px;
    min-height: 46px;
    min-width: auto;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
  }
  .nav-inferior.nav-minima.nav-producto a.nav-cuenta {
    margin-left: 12px;
    padding-left: 24px;
    border-left: 1px solid var(--negro-borde);
    border-radius: 0;
    background: transparent;
    color: var(--blanco-luz);
  }
  .nav-inferior.nav-minima.nav-producto a.nav-cuenta svg {
    box-sizing: content-box;
    padding: 9px;
    border-radius: 50%;
    color: var(--gris-niebla);
    background: var(--negro-elevado);
    border: 1px solid var(--negro-borde);
  }
  .nav-inferior.nav-minima.nav-producto a.nav-cuenta.activo svg {
    color: var(--verde-cocuyo);
    border-color: color-mix(in srgb, var(--verde-cocuyo) 40%, var(--negro-borde));
    background: color-mix(in srgb, var(--verde-cocuyo) 8%, var(--negro-elevado));
  }
  .nav-inferior.nav-minima.nav-producto a.nav-cuenta:hover svg { border-color: var(--verde-cocuyo); }
}

/* ---------- Estados y variantes globales de .btn ----------
   Antes cada página redefinía disabled, bloque y peligro a su manera
   (perfil, soporte, admin, offline). Ahora viven aquí, una sola vez. */
.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn[disabled]:active,
.btn[aria-disabled="true"]:active { transform: none; }
/* Un .btn-luz apagado no se enciende: ni punto, ni capa, ni deslizamiento. */
.btn-luz[disabled]::before, .btn-luz[aria-disabled="true"]::before,
.btn-luz[disabled]::after,  .btn-luz[aria-disabled="true"]::after { display: none; }
.btn-luz[disabled] .btn-luz-texto,
.btn-luz[aria-disabled="true"] .btn-luz-texto { transform: none !important; opacity: 1 !important; }
.btn-bloque { width: 100%; }
.btn-sm { min-height: 40px; padding: 0.55em 1.1em; font-size: var(--texto-sm); }
.btn-lg { min-height: 56px; padding: 0.95em 2em; font-size: var(--texto-md); }
/* Peligro (borrar cuenta, apagar pantallas…): rojo LF destructive. */
.btn-peligro {
  background: var(--peligro-fondo); color: var(--blanco-luz); font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--peligro) 45%, transparent);
}
.btn-peligro:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 18px color-mix(in srgb, var(--peligro) 40%, transparent);
}
/* Icono redondo (enviar en el chat, cerrar, controles). */
.btn-icono { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; flex: 0 0 auto; }
.btn-icono svg { width: 22px; height: 22px; display: block; }

/* ============ Escarcha (Lime Frost): superficie de vidrio ============
   Para paneles, tarjetas y formularios que flotan sobre imagen o noche:
   fondo translúcido, desenfoque del fondo y un filo de luz arriba. */
.escarcha {
  background: var(--escarcha);
  border: 1px solid var(--escarcha-borde);
  -webkit-backdrop-filter: var(--vidrio); backdrop-filter: var(--vidrio);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-1), inset 0 1px 0 color-mix(in srgb, var(--blanco-luz) 8%, transparent);
}

/* ============ Utilidades ============ */
.oculto { display: none !important; }
/* El padding lateral suma el safe-area: en horizontal, el notch/las esquinas
   redondeadas no tapan el contenido. Vale --esp-4 a secas donde no hay notch. */
.contenedor {
  width: 100%; max-width: 1200px; margin-inline: auto;
  padding-left: calc(var(--esp-4) + env(safe-area-inset-left));
  padding-right: calc(var(--esp-4) + env(safe-area-inset-right));
}
.texto-secundario { color: var(--gris-niebla); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============ Menos movimiento (accesibilidad, WCAG 2.3.3) ============ */
/* Si el usuario pide reducir el movimiento en su sistema, apagamos animaciones
   y transiciones en TODA la app (los faros aparecen en cada página y latir en
   bucle marea a quien tiene sensibilidad vestibular). Los faros quedan
   ENCENDIDOS fijos — coherente con el lore: el cocuyo real (Pyrophorus) no
   parpadea, brilla constante. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .faros i {
    animation: none !important;
    opacity: 1 !important;
    box-shadow: var(--glow-medio) !important;
  }
  .skeleton { animation: none !important; }
}

/* ============================================================
   App Android (Google Play / TWA): DECISIÓN DEL DUEÑO 26-jul-2026 —
   el pago SÍ se muestra y se compra desde la app. Tras Epic vs
   Google (2026), en EE.UU. Google no puede prohibir el pago externo.
   checkout.stripe.com queda fuera del ámbito del TWA, así que el
   pago se abre como pestaña de navegador (Custom Tab). Las reglas
   que ocultaban la UI de pago con `html.en-twa` se retiraron aquí;
   la clase `en-twa` sigue existiendo (pwa.js) por si algún estilo
   futuro necesita distinguir la app.
   ============================================================ */

/* ============================================================
   Modo TV (mando a distancia): tv-nav.js pone la clase `modo-tv`
   en <html>. El foco debe verse fuerte desde lejos (sofá) y el
   elemento enfocado debe destacar. Reutiliza el verde de marca.
   ============================================================ */
html.modo-tv :focus {
  outline: 4px solid var(--verde-cocuyo, #00E77B) !important;
  outline-offset: 3px;
  border-radius: var(--radio-md, 12px);
}
html.modo-tv :focus-visible {
  outline: 4px solid var(--verde-cocuyo, #00E77B) !important;
}
/* Tarjetas/mundos enfocados: además un glow y un ligero zoom para
   que sea obvio dónde estás en la parrilla. */
html.modo-tv .plan-card:focus,
html.modo-tv .mundo:focus,
html.modo-tv .card:focus,
html.modo-tv [data-tv-focus]:focus {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px var(--verde-cocuyo, #00E77B), 0 12px 40px rgba(0,0,0,.6);
  z-index: 5;
  transition: transform .12s ease, box-shadow .12s ease;
}
/* Micro-textos de las carátulas: a 3 metros de una tele son invisibles;
   en modo TV se suben al token mínimo legible. Cero impacto en móvil/PC. */
html.modo-tv .caratula-genero,
html.modo-tv .caratula-meta,
html.modo-tv .badge-nueva {
  font-size: var(--texto-xs);
}
/* Creator es una herramienta de trabajo con teclado/táctil, no una
   experiencia de sofá. En TV desaparece de la navegación por completo. */
html.modo-tv .nav-crear {
  display: none !important;
}
html.modo-tv .nav-inferior.nav-minima {
  width: min(280px, calc(100vw - 2 * var(--esp-4)));
}

/* ============================================================
   App iOS (Capacitor): ios-app.js pone `en-ios` en <html>.
   Reader-app: no se cobra dentro de la app (se paga en la web), así que
   ocultamos SOLO los elementos de pago. La navegación web (.nav-inferior)
   se MANTIENE visible; si no, el usuario se queda sin forma de volver a la
   home (aún no hay tab bar nativa). Cuando se añada la tab bar nativa, se
   podrá volver a ocultar .nav-inferior aquí.
   ============================================================ */
html.en-ios .planes,
html.en-ios #fundadores,
html.en-ios .franja-fundador,
html.en-ios .plan-card,
html.en-ios [data-plan],
html.en-ios #btn-comenzar,
html.en-ios #btn-fundador-checkout,
html.en-ios #btn-senal,
html.en-ios #unete-cocuyo,
html.en-ios #abrir-recarga,
html.en-ios #cuenta-recargar,
html.en-ios #recarga-fondo,
html.en-ios #btn-recargar-perfil {
  display: none !important;
}

/* Aviso reader-app: oculto en web/Android; visible solo en la cáscara iOS. */
.aviso-reader-ios { display: none; }

/* Android usa Play Billing. Hasta disponer de productos y verificación,
   no mostrar precios Stripe ni botones que aparenten poder cobrar. */
html.en-android .planes,
html.en-android .plan-card,
html.en-android [data-plan],
html.en-android #btn-comenzar,
html.en-android #btn-senal,
html.en-android #unete-cocuyo,
html.en-android #abrir-recarga,
html.en-android #cuenta-recargar,
html.en-android #recarga-fondo,
html.en-android #btn-recargar-perfil,
html.en-android #paso-plan .hero-entrar > p,
html.en-android #paso-plan .nota-legal {
  display: none !important;
}
.aviso-app-android { display: none; }
html.en-android .aviso-app-android {
  display: block;
  color: var(--gris-niebla);
  margin: var(--esp-4) 0;
}
html.en-android #paso-plan .aviso-app-android { text-align: center; }

html.en-ios .aviso-reader-ios {
  display: block;
  margin: 0 0 var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio-md);
  background: var(--acento-fondo);
  color: var(--blanco-luz);
  font-size: var(--texto-sm);
}


/* ============================================================
   HOME — RETENCIÓN (home-extras.js): filas "Seguir viendo" y
   "Mi lista", estrella de guardar en cada carátula y caja del
   buscador con lupa. Los usan index.html + home-extras.js.
   ============================================================ */

/* Las filas extra entran con un fundido suave (nada de saltos). */
.fila-extra { animation: fila-extra-aparece 0.4s ease; }
@keyframes fila-extra-aparece { from { opacity: 0; } to { opacity: 1; } }

/* Barra de progreso pegada al borde inferior de la carátula
   ("Seguir viendo"): el trozo ya visto se enciende en verde. */
.continuar-progreso {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 4px;
  background: color-mix(in srgb, var(--blanco-luz) 16%, transparent);
  overflow: hidden;
  pointer-events: none;
}
.continuar-progreso i {
  display: block; height: 100%;
  background: var(--verde-cocuyo);
  box-shadow: var(--glow-suave);
}

/* Estrella "Mi lista" (abajo-derecha de cada carátula). Es un botón
   DENTRO del enlace de la tarjeta: home-extras.js frena la navegación
   al tocarla. Apagada = tenue; guardada = verde encendido con glow. */
.btn-estrella {
  position: absolute; right: 0.4em; bottom: 0.45em; z-index: 3;
  /* 44px = mínimo táctil real; a 36px, errar por 4px navegaba a otra página. */
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: color-mix(in srgb, var(--blanco-luz) 80%, transparent);
  background: var(--escarcha);
  border: 1px solid var(--escarcha-borde);
  -webkit-backdrop-filter: var(--vidrio-fino); backdrop-filter: var(--vidrio-fino);
  transition: color var(--trans-rapida), border-color var(--trans-rapida),
              box-shadow var(--trans-media), transform var(--trans-rapida);
}
.btn-estrella:focus-visible {
  color: var(--verde-cocuyo);
  border-color: color-mix(in srgb, var(--verde-cocuyo) 55%, transparent);
}
@media (hover: hover) {
  .btn-estrella:hover {
    color: var(--verde-cocuyo);
    border-color: color-mix(in srgb, var(--verde-cocuyo) 55%, transparent);
  }
}
.btn-estrella:active { transform: scale(0.9); }
.btn-estrella.guardada {
  color: var(--verde-cocuyo);
  border-color: var(--verde-cocuyo);
  box-shadow: var(--glow-suave);
}
.btn-estrella.guardada svg { fill: currentColor; }
/* Con estrella, el pie de la carátula deja hueco para no chocar. */
.caratula.con-estrella .caratula-pie { padding-right: 3.4rem; } /* 44px de estrella + margen: antes "10 EPISODIOS" se metía debajo */

/* Caja del buscador con la lupa dentro ("rastrear señales"). */
.buscar-caja { position: relative; }
.buscar-caja .buscar-lupa {
  position: absolute; left: var(--esp-4); top: 50%;
  translate: 0 -50%;
  color: var(--gris-humo);
  pointer-events: none;
  transition: color var(--trans-rapida);
}
.buscar-caja:focus-within .buscar-lupa {
  color: var(--verde-cocuyo);
  filter: drop-shadow(var(--glow-suave));
}
.buscar-caja .campo-busqueda {
  padding-left: calc(var(--esp-4) + 20px + var(--esp-2));
}

/* Menos movimiento: el fundido de las filas extra se apaga (la regla
   global de tokens ya frena todo; esto lo deja explícito). */
@media (prefers-reduced-motion: reduce) {
  .fila-extra { animation: none; }
}

/* ============================================================
   === TEATRO VISUAL (fx.js): encendido, señal-cargando, splash
   === y transiciones de página. Añadido al final de tokens.css.
   ============================================================ */

/* ---------- 1) Encendido bioluminiscente de las carátulas ----------
   En reposo la carátula está levemente apagada; al pasar el dedo, el
   ratón o el foco de teclado, el Cocuyo la ilumina: brillo pleno +
   glow verde (la elevación del hover ya vive en .mundo-card:hover,
   más arriba). Aquí se añade la LUZ (filter), la transición 240 ms y
   el estado :active para el toque en móvil. */
.mundo-card .caratula,
.mundo-card img {
  filter: brightness(0.88) saturate(0.96);
  transition: filter 240ms ease, transform 240ms ease,
              box-shadow 240ms ease, border-color 240ms ease,
              opacity 240ms ease;
}
.mundo-card:focus-visible .caratula,
.mundo-card:active .caratula,
.mundo-card:focus-visible img,
.mundo-card:active img {
  filter: brightness(1.06) saturate(1.05);
}
/* El :hover solo donde existe hover real (ratón): en táctil se quedaba pegado. */
@media (hover: hover) {
  .mundo-card:hover .caratula,
  .mundo-card:hover img {
    filter: brightness(1.06) saturate(1.05);
  }
}
/* :active = el toque en móvil enciende igual que el hover de
   escritorio (misma elevación y glow que .mundo-card:hover). */
.mundo-card:active {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--verde-apagado);
  box-shadow: var(--glow-suave),
              0 12px 32px color-mix(in srgb, var(--negro-abismo) 85%, transparent);
}

/* ---------- 2) "Sintonizando señal…": esqueleto de carga ----------
   fx.js pone .señal-cargando en el CONTENEDOR de cada imagen del grid
   hasta que su señal llega (load/error): esqueleto oscuro con barrido
   de luz verde. La clase va DOBLADA en el selector para ganar a los
   ::before/::after decorativos de cada página sin usar !important. */
.señal-cargando.señal-cargando {
  position: relative;
  overflow: hidden;
  background-color: var(--negro-elevado);
}
.señal-cargando.señal-cargando::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 25%,
    color-mix(in srgb, var(--verde-cocuyo) 18%, transparent) 50%,
    transparent 75%);
  background-size: 220% 100%;
  animation: señal-barrido 1.3s ease-in-out infinite;
}
@keyframes señal-barrido {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}
/* La imagen no se enseña a medias: invisible hasta llegar entera y,
   al llegar, entra con un fundido suave (clase que pone fx.js). */
.señal-cargando.señal-cargando img { opacity: 0; }
img.señal-recibida { animation: señal-aparece 400ms ease; }
@keyframes señal-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .señal-cargando.señal-cargando::after { animation: none; opacity: 0.5; }
  img.señal-recibida { animation: none; }
}

/* ---------- 3) Splash de los dos faros (fx.js, 1ª carga de la sesión) --
   Overlay negro con las dos elipses verdes encendiéndose (glow
   creciente) y fundido a la página. fx.js lo autodestruye a los
   1200 ms pase lo que pase, y con menos-movimiento ni lo crea. */
.fx-splash {
  position: fixed; inset: 0;
  z-index: calc(var(--z-modal) + 20);
  display: flex; align-items: center; justify-content: center;
  background: var(--negro-abismo);
  pointer-events: none;              /* JAMÁS bloquea un toque */
  animation: fx-splash-fuera 350ms ease 750ms forwards;
}
.fx-splash .fx-faros { display: inline-flex; gap: 0.55em; font-size: 3rem; }
.fx-splash .fx-faros i {
  width: 0.72em; height: 0.88em;     /* elipse vertical: el faro del insecto */
  border-radius: 50%;
  background: var(--verde-cocuyo);
  animation: fx-faro-enciende 650ms ease-out both;
}
.fx-splash .fx-faros i + i { animation-delay: 130ms; }
@keyframes fx-faro-enciende {
  0%   { opacity: 0; box-shadow: none; transform: scale(0.85); }
  60%  { opacity: 1; box-shadow: var(--glow-medio); }
  100% { opacity: 1; box-shadow: var(--glow-fuerte); transform: scale(1); }
}
@keyframes fx-splash-fuera { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .fx-splash { display: none; }      /* doble cinturón: fx.js tampoco lo crea */
}

/* ---------- 4) Transiciones de página (view transitions, mismo origen) --
   Solo los navegadores que las soportan (Chrome/Edge 126+) las
   activan; el resto ignora este bloque ENTERO y navega como siempre
   (degradación total, sin JS). Fundido + deslizamiento sutil 200 ms. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fx-pagina-sale 200ms ease both; }
::view-transition-new(root) { animation: fx-pagina-entra 200ms ease both; }
@keyframes fx-pagina-sale  { to { opacity: 0; } }
@keyframes fx-pagina-entra {
  from { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ============ Toque premium de los botones ============
   El glow crece con suavidad (curva elegante), el :active se hunde
   con una respuesta rápida y el primario "flota" un pelo al pasar
   el ratón. Solo transform/box-shadow/filter (rendimiento). */
.btn {
  transition: transform 280ms var(--curva-suave),
              box-shadow 280ms var(--curva-suave),
              border-color 280ms var(--curva-suave),
              filter 280ms var(--curva-suave);
}
.btn:active {
  transform: translateY(1px) scale(0.97); /* hundimiento físico */
  transition-duration: 80ms;              /* respuesta inmediata al dedo */
}
@media (hover: hover) {
  .btn-primario:hover { transform: translateY(-1px); filter: brightness(1.06); }
  .btn-fantasma:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--verde-cocuyo) 25%, transparent);
  }
}

/* ============ Detalles de lujo globales ============ */
/* Seleccionar texto enciende el verde del Cocuyo */
::selection { background: var(--verde-cocuyo); color: var(--negro-abismo); text-shadow: none; }

/* Scrollbar del documento: fina y abisal, solo donde hay puntero fino
   (en móvil y TV no existe y todo queda limpio como está). */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: var(--negro-borde) transparent; }
  html::-webkit-scrollbar { width: 8px; }
  html::-webkit-scrollbar-thumb { background: var(--negro-borde); border-radius: var(--radio-pill); }
  html::-webkit-scrollbar-thumb:hover { background: var(--verde-apagado); }
  html::-webkit-scrollbar-track { background: transparent; }
}

/* Cada página se ENCIENDE al llegar: fundido de 160ms (<200ms, sin FOUC:
   tokens.css carga en el <head>, así que la regla existe antes del primer
   pintado). Complementa a las view transitions de Chrome y da el mismo
   acabado en Safari/Firefox, que no las soportan. */
@media (prefers-reduced-motion: no-preference) {
  body { animation: pagina-enciende 160ms ease-out; }
  @keyframes pagina-enciende { from { opacity: 0; } }
}

/* ---------- Revelado al hacer scroll (fx.js pone .revela/.revelado) ------
   Solo opacity/transform (compositor). Si el JS falla, .revela nunca se
   añade y todo se ve normal. Con menos-movimiento, visible siempre. */
.revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--curva-suave), transform 700ms var(--curva-suave);
}
.revela.revelado { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- "Saltar al contenido" (accesibilidad; guía maestra p. 33) ----
   Primer enlace del <body>: fuera de pantalla (translate, no left:-9999px)
   hasta que recibe el foco. left:-9999px desplazaba el scroll y, en la
   intro, el destino #contenido está en display:none. Patrón estándar:
   visible en :focus, ancla a un destino que SÍ se ve. */
.saltar-contenido {
  position: absolute;
  left: var(--esp-3, 12px);
  top: var(--esp-3);
  z-index: 10000;
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-pill);
  background: var(--negro-elevado);
  border: 1px solid var(--verde-cocuyo);
  color: var(--verde-cocuyo);
  text-decoration: none;
  box-shadow: var(--glow-suave);
  transform: translateY(-160%);
}
.saltar-contenido:focus-visible,
.saltar-contenido:focus {
  transform: none;
}
/* Intro: el cine (#contenido) está apagado. El salto va a #intro-publica.
   Cine: al revés. display:none saca el enlace inútil del tabulador. */
html[data-vista="cine"] .saltar-intro { display: none !important; }
html:not([data-vista="cine"]) .saltar-cine { display: none !important; }

/* Barra inferior Ver/Crear/Perfil: SOLO para quien ya tiene pista de
   sesion (pwa.js pone data-viajero en <html>). Un invitado que llega a
   mundo/perfil/legales desde la intro no ve pestanas de app (dueno,
   23-ago-2026). visibility conserva el hueco: nada salta. */
.nav-inferior { visibility: hidden; }
html[data-viajero] .nav-inferior { visibility: visible; }
/* Quien ve la cápsula puede hacer scroll hasta dejar las miniaturas
   por encima (mundo.html y fichas con parrilla de capítulos). */
html[data-viajero] {
  scroll-padding-bottom: calc(var(--hueco-nav-flotante) + env(safe-area-inset-bottom));
}

/* ============================================================
   MODO LIGERO para navegadores DENTRO de apps (Instagram, FB,
   TikTok...): pwa.js marca <html data-webview-app>. Sus webviews
   se atragantan con backdrop-filter y animaciones infinitas
   ("se traba", dueño 27-ago-2026). Sin blur, los paneles de
   escarcha pasan a fondo solido para seguir leyendose.
   ============================================================ */
html[data-webview-app] *,
html[data-webview-app] *::before,
html[data-webview-app] *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  /* Martillo total (27-ago-2026): el webview seguia trabado. Toda
     animacion/transicion salta a su estado final al instante, incluido
     el revelado al scroll (animation-timeline fuera). */
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  animation-timeline: auto !important;
  scroll-behavior: auto !important;
}
html[data-webview-app] .intro-estreno-card,
html[data-webview-app] .mundo-tile.estreno .caratula,
html[data-webview-app] .cocuyo-encendido,
html[data-webview-app] .creditos-rayo,
html[data-webview-app] .intro-ficha-hero.respira::before,
html[data-webview-app] .caratula::before {
  animation: none !important;
}
html[data-webview-app] .intro-razon,
html[data-webview-app] .intro-estudio-item,
html[data-webview-app] .intro-login,
html[data-webview-app] .tarjeta,
html[data-webview-app] .preview-cine {
  background-color: var(--negro-elevado) !important;
}

/* ============================================================
   LUJO — profundidad, materia y continuidad  (30-ago-2026)
   ------------------------------------------------------------
   Lo que separa a Cocuyo de Netflix/Hulu/Higgsfield no eran mas
   componentes: era PROFUNDIDAD (el negro plano no existe en cine),
   MATERIA (grano y vidrio de verdad) y CONTINUIDAD (que la ficha
   se convierta en la pantalla, en vez de cortar).

   Todo aqui es CSS puro. NO toca nada de lo que anima motion.js
   (.intro-bloque, .intro-tendencia, .intro-estreno-card, .mot-palabra):
   donde manda GSAP, este archivo no se mete.
   ============================================================ */

/* ---------- 1) Propiedades registradas (@property) ----------
   Una variable declarada asi TIENE TIPO, y lo que tiene tipo se puede
   INTERPOLAR. Sin esto, --joya-luz seria un texto y saltaria de 0 a 1
   de golpe; con esto el navegador recorre los valores intermedios y
   una sola variable mueve tres capas de sombra a la vez.
   Donde no exista @property la variable sigue valiendo 0 y todo se ve
   bien: solo se pierde el recorrido suave. */
@property --joya-luz {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ---------- 2) Ambiente: el negro deja de ser plano ----------
   Tres focos radiales muy tenues (9-24%) detras de TODO. No se ven;
   se notan. Es la diferencia entre "fondo #050505" y "una sala con
   luz". z-index -1: encima del fondo, debajo del contenido, y
   pointer-events:none para no robar ni un clic. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 10% -12%,
      color-mix(in srgb, var(--verde-cocuyo) 9%, transparent) 0%, transparent 70%),
    radial-gradient(58% 48% at 102% 2%,
      color-mix(in srgb, var(--verde-profundo) 24%, transparent) 0%, transparent 66%),
    radial-gradient(95% 55% at 50% 108%,
      color-mix(in srgb, var(--verde-profundo) 15%, transparent) 0%, transparent 72%);
}

/* ---------- 3) Grano de pelicula ----------
   La textura que hace que una pantalla parezca proyeccion y no PDF.
   Misma receta ya probada en el Estudio (crear.html): feTurbulence en
   un data: URI (la CSP permite img-src data:), mezcla overlay y
   pointer-events:none.

   OJO al reparto: crear.html declara su PROPIO body::after en su
   <style>, que va DESPUES de este archivo en la cascada; alli gana el
   suyo y el grano no se dobla. Aqui se cubre el resto del sitio, que
   hasta hoy no tenia ninguno. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* En el reproductor NO hay grano: la imagen es del director, no nuestra. */
html:has(#escenario) body::after { display: none; }

/* ---------- 4) El boton JOYA ----------
   El primario era lima PLANO. Una pieza cara nunca es plana: tiene un
   filo de luz arriba (donde daria la luz), un labio oscuro abajo
   (donde se apoya) y un degradado entre medias. Cuatro capas de
   box-shadow, de dentro a fuera:
     1. filo de luz superior        (inset, claro)
     2. labio oscuro inferior       (inset, oscuro)
     3. contacto con la superficie  (sombra corta y dura)
     4. el halo lima                (lo unico que se mueve al pasar)
   El halo lo gobierna --joya-luz de 0 a 1, interpolada de verdad. */
.btn-primario {
  --joya-luz: 0;
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--lima-clara) 60%, var(--verde-cocuyo)) 0%,
    var(--verde-cocuyo) 46%,
    color-mix(in srgb, var(--verde-cocuyo) 86%, var(--negro-abismo)) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--blanco-luz) 60%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--negro-abismo) 32%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 0 calc(10px + var(--joya-luz) * 30px)
      rgba(175, 243, 62, calc(0.2 + var(--joya-luz) * 0.42));
  transition:
    transform 280ms var(--curva-suave),
    box-shadow 280ms var(--curva-suave),
    filter 280ms var(--curva-suave),
    --joya-luz 420ms var(--curva-suave);
}
/* Misma receta en :hover — solo sube --joya-luz. Se repite el box-shadow
   entero a proposito: mas arriba hay un .btn-primario:hover con la misma
   especificidad y, sin esto, ganaria aquel. */
.btn-primario:hover,
.btn-primario:focus-visible {
  --joya-luz: 1;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--blanco-luz) 60%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--negro-abismo) 32%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 0 calc(10px + var(--joya-luz) * 30px)
      rgba(175, 243, 62, calc(0.2 + var(--joya-luz) * 0.42));
}
/* Al pulsar, la joya se apaga y se hunde: respuesta fisica. */
.btn-primario:active { --joya-luz: 0.35; }

/* ---------- 5) Superficies con filo de luz ----------
   Una tarjeta cara no lleva un borde gris de 1px: lleva un filo claro
   arriba (luz) y sombra larga abajo (peso). Dos capas, no una.

   .caratula NO se toca desde aqui: su dueño real es el <style> de
   index.html, que va despues en la cascada y ganaba a este archivo.
   El filo se le puso alli, en su propia box-shadow. Aqui solo queda
   .mundo-card, que es el envoltorio y no lleva sombra propia. */
.mundo-card {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--blanco-luz) 7%, transparent),
    var(--sombra-2);
}

/* ---------- 6) Tipografia que no deja viudas ----------
   `balance` reparte las lineas de un titular para que la ultima no
   quede con una palabra sola; `pretty` hace lo mismo, mas barato, en
   parrafos largos. Donde no exista, se ignora sin mas. */
h1, h2, h3,
.hero-titulo,
.fila-titulo,
.caratula-titulo,
.ficha-cine-hero h1 {
  text-wrap: balance;
}
p,
.hero-sinopsis,
.ficha-cine-sinopsis,
.intro-estreno-sinopsis {
  text-wrap: pretty;
}

/* ---------- 7) (hueco) Las filas del cine ----------
   Aqui iba un revelado scroll-driven para .fila-cine .caratula. Se
   RETIRA: al mirarlo en vivo, las caratulas YA entran con su propia
   animacion (`caratula-aparece`, en el <style> de index.html) y la
   intro la lleva GSAP desde motion.js. Un tercer revelado encima solo
   sumaba peso y parpadeo. Donde ya hay movimiento, no se añade mas.

/* ---------- 8) Continuidad: el cartel SE CONVIERTE en la pantalla ----
   Con un `view-transition-name` compartido entre las dos paginas, el
   navegador interpola el poster de la ficha hasta el marco del
   reproductor: deja de haber corte. lujo.js pone el nombre en el
   cartel pulsado (index) y en #escenario (player).
   Chrome/Edge lo hacen; Safari/Firefox ignoran el bloque y navegan
   como siempre. */
/* El lado del REPRODUCTOR va en CSS, no en JS: en una transicion entre
   documentos el navegador captura la pagina nueva en su primer render, y
   un script (aunque sea defer) puede llegar tarde. Una regla CSS ya esta
   ahi antes de que se pinte nada. #escenario solo existe en player.html. */
#escenario { view-transition-name: cartel-activo; }

::view-transition-group(cartel-activo) {
  animation-duration: 420ms;
  animation-timing-function: var(--curva-suave);
}
::view-transition-old(cartel-activo),
::view-transition-new(cartel-activo) {
  animation-duration: 420ms;
  animation-timing-function: var(--curva-suave);
  mix-blend-mode: normal;
}

/* ---------- 9) Los frenos ----------
   Menos movimiento: la joya deja de respirar y las filas entran ya
   puestas. El grano y el ambiente SE QUEDAN: son textura, no
   movimiento, y no marean a nadie. */
@media (prefers-reduced-motion: reduce) {
  .btn-primario { transition: none; }
}
/* Navegador dentro de una app (Instagram/TikTok/FB): sus webviews ya se
   atragantaban con el blur. Ni grano (mix-blend-mode cuesta una capa de
   composicion) ni ambiente ni degradado en el boton. */
html[data-webview-app] body::before,
html[data-webview-app] body::after { display: none !important; }
html[data-webview-app] .btn-primario { background-image: none !important; }

/* ---------- 10) La letra de cartel ----------
   Fraunces SOLO donde se mira, no donde se lee: wordmark, titular del
   hero, titulos de fila y titulos de ficha. Todo lo demas sigue con
   Geist. Si algun dia no convence, se cambia --fuente-display arriba
   y vuelve todo atras de un golpe. */
.intro-billboard h1,
.hero-titulo,
.fila-titulo,
.ficha-cine-hero h1,
.intro-ficha-hero h1 {
  font-family: var(--fuente-display);
}
/* Marca compacta y consistente; los titulares conservan la tipografía editorial. */
.wordmark { font-family: var(--fuente); font-weight: 800; letter-spacing: -.055em; }
/* Panel nativo Play: independiente de los precios y controles de Stripe. */
[data-play-panel] { display: none; }
.en-android [data-play-panel]:not([hidden]) { display: block; max-width: 560px; margin: 24px auto; }
.en-android.play-disponible .aviso-play-pendiente { display: none !important; }
[data-play-opciones] { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 18px 0; }
[data-play-panel] > .btn { margin: 6px; }
[data-play-condiciones] { font-size: .85rem; line-height: 1.6; opacity: .8; }

/* Suscripción Apple: comparte los botones y la tipografía de Cocuyo. */
[data-ios-panel] { display: none; }
html.en-ios [data-ios-panel]:not([hidden]) { display: block; margin: var(--esp-6) auto; }
[data-ios-opciones] { display: grid; gap: var(--esp-3); margin: var(--esp-4) 0; }
[data-ios-acciones] { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-4) 0; }
[data-ios-condiciones], [data-ios-otra-tienda] { color: var(--gris-niebla); font-size: var(--texto-sm); margin: var(--esp-4) 0; }
html.en-ios #paso-plan .cierre,
html.en-ios #paso-plan .hero-entrar > p,
html.en-ios #paso-plan .nota-legal,
html.en-ios .aviso-borrado-google { display: none !important; }

/* Acabado común · 21st.dev / Great UI Minimal Buttons (Saurabh Sharma, MIT).
   Adaptación de relieve y jerarquía; una apariencia y sin dependencias React. */
.btn:not(.btn-icono){text-wrap:balance}
.btn:is(.btn-primario,.btn-secundario,.btn-fantasma){box-shadow:inset 0 1px 0 rgb(255 255 255/.13),0 2px 4px rgb(0 0 0/.16)}
.btn:not(:disabled):not([aria-disabled="true"]):active{transform:translateY(1px);filter:brightness(.97)}
.btn:focus-visible{outline:var(--foco-contorno);outline-offset:var(--foco-separacion)}
.btn:is(:disabled,[aria-disabled="true"]){transform:none;filter:none;cursor:not-allowed;box-shadow:none}
input,textarea,select{font-family:var(--fuente)}
input::placeholder,textarea::placeholder{opacity:1}
input:-webkit-autofill,textarea:-webkit-autofill{-webkit-text-fill-color:var(--blanco-luz);caret-color:var(--verde-cocuyo);box-shadow:0 0 0 1000px var(--negro-elevado) inset}
.pie-legal{line-height:1.7;text-wrap:pretty}
.pie-legal a{border-radius:6px}
@media(hover:hover){
 .btn:is(.btn-primario,.btn-secundario,.btn-fantasma):not(:disabled):not([aria-disabled="true"]):hover{box-shadow:inset 0 1px 0 rgb(255 255 255/.22),0 4px 14px rgb(0 0 0/.24)}
}
@media(prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transition:none;transform:none}}

/* ---------- 11) Letra fina (29-sep-2026) ----------
   Pulido tipográfico sin rediseñar: mismos colores, tamaños y maquetación.
   Todo lo que toca elementos sueltos va en la capa «base», que pierde
   contra cualquier regla de página: sólo afina lo que nadie ha maquetado
   (titulares sin interlineado propio, párrafos, cifras). */
@layer base {
  /* Titulares: interlineado de titular en vez del 1.5 del cuerpo y un
     tracking algo más cerrado. Donde una página ya los define, manda ella. */
  h1, h2, h3, h4, h5, h6 {
    line-height: var(--interlinea-subtitulo);
    text-wrap: balance;
    text-rendering: optimizeLegibility;
  }
  /* El tracking cerrado sólo en los grandes: a tamaño de texto (h3–h6
     suelen ir a 13–16 px) se queda el del cuerpo, que lee mejor. */
  h1 { line-height: 1.15; letter-spacing: -0.02em; }
  h2 { letter-spacing: var(--tracking-subtitulo); }
  /* Párrafos y listas: sin viudas ni cortes feos al final. */
  p, li, dd, figcaption, blockquote, label, summary { text-wrap: pretty; }
  /* Cifras que se comparan en columna o cambian en vivo (tablas de
     precios, tiempos, contadores): números tabulares, así una cifra no
     «baila» al actualizarse y las columnas quedan alineadas. Los precios
     grandes y el texto corrido conservan las cifras proporcionales; para
     un saldo o coste suelto, la clase .cifras de abajo. */
  table, time, data, output {
    font-variant-numeric: tabular-nums;
  }
}

/* Clases de la escala (para páginas nuevas o al retocar una existente).
   Aplican la escala completa: tamaño fluido, interlineado, tracking y peso. */
.titulo-1, .titulo-2, .titulo-3, .titulo-4 {
  font-weight: var(--peso-fuerte);
  text-wrap: balance;
}
.titulo-1 { font-size: var(--titulo-1); line-height: var(--interlinea-titular); letter-spacing: var(--tracking-titular); }
.titulo-2 { font-size: var(--titulo-2); line-height: var(--interlinea-titular); letter-spacing: var(--tracking-titular); }
.titulo-3 { font-size: var(--titulo-3); line-height: var(--interlinea-subtitulo); letter-spacing: var(--tracking-subtitulo); }
.titulo-4 { font-size: var(--titulo-4); line-height: var(--interlinea-compacta); letter-spacing: var(--tracking-subtitulo); }
.texto-lectura { font-size: var(--texto-base); line-height: var(--interlinea-texto); text-wrap: pretty; }
.etiqueta-mayusculas {
  font-size: var(--texto-xs); font-weight: 600; line-height: var(--interlinea-compacta);
  letter-spacing: var(--tracking-mayusculas); text-transform: uppercase;
}
.cifras { font-variant-numeric: tabular-nums; }

/* Botones: las cifras del coste («Generar · 12 créditos») no se mueven al
   cambiar de opción, y el texto se ajusta con el kerning de la fuente. */
.btn { font-variant-numeric: tabular-nums; font-kerning: normal; }

/* iPhone/iPad: Safari amplía la página al enfocar un campo con letra de
   menos de 16 px y ya no vuelve. Sólo en iOS táctil se sube el mínimo a
   16 px; en el resto de navegadores cada campo conserva su tamaño. */
@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"]),
    textarea,
    select {
      font-size: max(16px, 1em) !important;
    }
  }
}

/* --- Idiomas con otras escrituras (oct-2026) ---
   Sin CDNs: se usan las fuentes que ya trae cada sistema (macOS/iOS, Windows,
   Android/Linux con Noto). Geist sigue primero para las letras latinas y los
   números; el resto de caracteres cae en la fuente nativa de esa escritura.
   El titular (Fraunces) no tiene esos caracteres: en estos idiomas usa la misma
   pila de texto para no mezclar con una serif del sistema. */
:root:lang(zh) {
  --fuente: "Geist", Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --fuente-display: var(--fuente);
}
:root:lang(ja) {
  --fuente: "Geist", Inter, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  --fuente-display: var(--fuente);
}
:root:lang(ko) {
  --fuente: "Geist", Inter, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
  --fuente-display: var(--fuente);
}
:root:lang(hi) {
  --fuente: "Geist", Inter, "Kohinoor Devanagari", "Devanagari Sangam MN", "Nirmala UI", "Noto Sans Devanagari", Mangal, sans-serif;
  --fuente-display: var(--fuente);
}
:root:lang(bn) {
  --fuente: "Geist", Inter, "Kohinoor Bangla", "Bangla Sangam MN", "Nirmala UI", "Noto Sans Bengali", Vrinda, sans-serif;
  --fuente-display: var(--fuente);
}
:root:lang(th) {
  --fuente: "Geist", Inter, Thonburi, "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
  --fuente-display: var(--fuente);
}
:root:lang(ar) {
  --fuente: "Geist", Inter, "Geeza Pro", "SF Arabic", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;
  --fuente-display: var(--fuente);
}
:root:lang(ur) {
  --fuente: "Geist", Inter, "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --fuente-display: var(--fuente);
}
/* El árabe y el urdu son escrituras ligadas: el espaciado entre letras las
   separa y las vuelve ilegibles. Las escrituras CJK tampoco lo necesitan. */
:root:lang(ar) *, :root:lang(ur) *, :root:lang(zh) *, :root:lang(ja) *, :root:lang(ko) * { letter-spacing: normal !important; }
/* Nastaliq necesita más interlineado para no cortar los trazos. */
:root:lang(ur) body { line-height: 1.9; }

/* --- Derecha a izquierda (árabe, urdu) ---
   <html dir="rtl"> invierte el flujo de texto, flex y grid. Aquí sólo se
   corrigen los detalles con posiciones físicas que no se invierten solos.
   La marca COCUYO, los números, el código y los prompts siguen de izquierda
   a derecha. */
[dir="rtl"] .wordmark, [dir="rtl"] .f-marca, [dir="rtl"] code, [dir="rtl"] pre,
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"] { direction: ltr; unicode-bidi: isolate; }

/* --- Barra inferior del móvil (barra-inferior.css, oct-2026) ---
   Medidas de la barra fija de 5 botones (Inicio · Explorar · Crear ·
   Creaciones · Cuenta) y de su botón central. Solo se usan en móvil.
   «Labio» = el borde de abajo, más oscuro, que hace que el botón Crear
   parezca una tecla que se puede pulsar. */
:root {
  --alto-barra-inferior: 56px;
  --boton-central-ancho: 66px;
  --boton-central-alto: 44px;
  --radio-boton-central: 12px;
  --labio-tecla: inset 0 -3px 0 color-mix(in srgb, var(--verde-cocuyo) 55%, var(--negro-abismo));
}

/* ============ Móvil: la página no se desliza a los lados (dueño, 7-oct-2026) ============
   1) Si solo <body> recorta lo que sobresale, ese recorte pasa a la ventana y
      Safari en iPhone deja arrastrar la página hacia los lados con el dedo.
      Con <html> recortando también, cada uno recorta lo suyo y no hay hueco
      lateral. `clip` (no `hidden`) no crea una caja con scroll propio, así que
      `position: sticky` sigue funcionando; `hidden` solo como respaldo.
   2) iOS hace zoom al escribir en un campo con letra de menos de 16 px y
      después la página baila de lado: en pantallas táctiles los campos de texto
      van a 16 px como mínimo. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]),
  select, textarea, [contenteditable="true"], [contenteditable=""] { font-size: max(16px, 1em); }
}


/* cocuyo-css: assets/css/inicio-barra.css */
/* Barra de la portada: prepara una idea y la abre en el Estudio.
   Orden (30-sep-2026): tipo de creación + Apps · texto · adjuntar, modelo,
   formato, duración, coste y Crear · aviso y nota.

   Estilo único «Metal» (elección del dueño, 30-sep-2026): grafito cepillado,
   un filete de cromo que gira despacio alrededor del panel, brillo metálico
   en los chips y Crear en lima con un anillo de cromo. El lima es solo para
   Crear y para el foco (cursor y anillo de teclado). Solo es presentación:
   la lógica vive en inicio-barra.js / inicio-prompt.js y no cambia.
   Todos los colores salen de los tokens --barra-* de tokens.css.

   Origen y licencia: reimplementación propia en CSS, sin dependencias, de la
   idea del componente «Metal Prompt Bar» de arihantcodes, basado en metal-fx
   de Jakub Antalík (licencia MIT),
   21st.dev/@arihantcodes_1f7b8c4d/components/metal-prompt-bar. */

/* Ángulo del cromo: se anima como número para que el degradado gire. */
@property --ib-luz-angulo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.ib-barra {
  --ib-aviso: 0px;
  --ib-arriba: 132px;
  --ib-alto-maximo: max(64px, calc(100dvh - var(--ib-arriba) - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--ib-teclado, 0px) - var(--ib-aviso)));
  position: fixed;
  z-index: calc(var(--z-nav) - 1);
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom) + var(--ib-teclado, 0px));
  width: min(760px, calc(100% - 32px));
  max-height: var(--ib-alto-maximo);
  margin: 0;
  padding: 12px 14px 10px;
  overflow: visible;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  color-scheme: dark;                  /* desplegables y barras de desplazamiento oscuros */
  /* El filete visible es el cromo de ::after; el borde propio queda invisible. */
  border: 1px solid transparent;
  border-radius: 22px;
  background: transparent;
  color: var(--barra-texto);
  box-shadow: var(--barra-brillo), var(--barra-sombra);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  font-family: var(--fuente);
  letter-spacing: var(--espaciado-letra);
  /* La tarjeta de cookies la sube con transform, no con bottom: si la tarjeta
     cambia de alto (llega, se traduce) la barra se desliza sin salto de
     diseño (CLS 0). El transform crea además el contexto de apilamiento que
     mantiene las capas de metal (z-index -1) por detrás del contenido. */
  transform: translate(-50%, calc(-1 * var(--ib-aviso)));
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

/* Las dos capas del metal, por detrás del texto:
   ::after es la placa de grafito con su filete de cromo, que gira despacio;
   ::before, un reflejo muy tenue del cromo bajo la barra, como sobre una
   mesa pulida. */
.ib-barra::before, .ib-barra::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.ib-barra::after {
  inset: -1px;
  border: 1px solid transparent;
  background: var(--barra-metal-fondo) padding-box, conic-gradient(from var(--ib-luz-angulo), var(--barra-metal-cromo)) border-box;
  animation: ib-cromo 14s linear infinite;
}
.ib-barra::before {
  inset: auto 12% -10px;
  height: 18px;
  background: radial-gradient(50% 50% at 50% 50%, var(--barra-borde-fuerte), transparent);
  filter: blur(8px);
}
@keyframes ib-cromo { to { --ib-luz-angulo: 360deg; } }

/* A 1640px caben lado a lado la tarjeta de 385px y la barra de 760px.
   Con menos espacio se sube usando la altura medida por consent.js.
   Si el teclado ya cubre las cookies, cuenta solo la obstrucción mayor. */
@media (max-width: 1640px) {
  /* .in-aviso-previsto (inicio-barra.js): la tarjeta de cookies llegará al cargar. */
  html.in-aviso-previsto .ib-barra, html.cocuyo-con-aviso-cookies .ib-barra {
    --ib-aviso: max(0px, calc(var(--cocuyo-aviso-alto, 9rem) + 16px - var(--ib-teclado, 0px)));
  }
}
/* Mientras la tarjeta aún no ha llegado (móvil y tableta estrecha), se reserva
   su alto mayor medido (140–168 px según ancho e idioma): si luego es más baja,
   la barra baja con transform (sin salto) y el titular no se mueve; al revés,
   el titular tendría que subir. */
@media (max-width: 759px) {
  html.in-aviso-previsto:not(.cocuyo-con-aviso-cookies) .ib-barra {
    --ib-aviso: max(0px, calc(var(--cocuyo-aviso-alto, 10.5rem) + 16px - var(--ib-teclado, 0px)));
  }
}

.ib-barra *, .ib-barra *::before, .ib-barra *::after { box-sizing: border-box; }
.ib-barra [hidden] { display: none !important; }
.ib-barra button, .ib-barra select, .ib-barra textarea, .ib-barra a { font-family: inherit; }
.ib-barra button { cursor: pointer; }
.ib-barra button:disabled { cursor: default; }
/* Iconos de trazo fino (1,5 px). */
.ib-barra svg { display: block; width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.5; }
.ib-barra :is(button, a, select) {
  transition: background-color var(--barra-trans), color var(--barra-trans), border-color var(--barra-trans), box-shadow var(--barra-trans);
}
.ib-barra :is(button, select, a):focus-visible {
  outline: none;
  box-shadow: var(--barra-anillo-foco);
}
/* El texto no lleva anillo propio: el cursor lima ya marca dónde estás. */
.ib-barra textarea:focus-visible { outline: none; box-shadow: none; }
/* Foco (escribiendo): con #id para ganar al filete genérico de la portada
   (inicio-nuevo.css). El cromo sigue igual; solo se afirma la sombra. */
#inicio-barra.ib-barra:focus-within {
  border-color: var(--barra-borde-fuerte);
  box-shadow: var(--barra-brillo), var(--barra-sombra);
}

.ib-plegar {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  padding: 8px;
  border: 0;
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--barra-texto-suave);
}
.ib-plegar:hover { background: var(--barra-superficie-hover); color: var(--barra-texto); }
.ib-resumen { display: none; }
.ib-formulario {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-height: calc(var(--ib-alto-maximo) - 20px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ---------- Tipo de creación (control segmentado) y Apps ---------- */
.ib-cabeza { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 40px; }
.ib-modos {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  border-radius: var(--radio-pill);
  background: var(--barra-superficie);
  box-shadow: var(--barra-brillo), inset 0 0 0 1px var(--barra-borde);
}
.ib-modo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--barra-texto-suave);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.ib-modo svg { width: 16px; height: 16px; }
.ib-modo:hover { color: var(--barra-texto); }
/* Activo: chip de metal con reflejo (brillo arriba, sombra abajo) y texto
   claro; sin lima. */
.ib-modo[aria-pressed="true"] {
  background: var(--barra-metal-chip);
  color: var(--barra-texto);
  box-shadow: var(--barra-brillo), 0 0 0 1px var(--barra-borde);
}
.ib-apps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radio-pill);
  color: var(--barra-texto-suave);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.ib-apps svg { width: 16px; height: 16px; }
.ib-apps:hover { background: var(--barra-superficie-hover); color: var(--barra-texto); }

/* ---------- Texto ---------- */
.ib-prompt { position: relative; min-width: 0; padding: 0; }
.ib-prompt textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  max-height: 144px;
  margin: 0;
  padding: 4px 6px;
  resize: none;
  border: 0;
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--barra-texto);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: inherit;
  caret-color: var(--verde-cocuyo);    /* foco: el cursor lima */
  scrollbar-width: thin;
}
.ib-prompt textarea::placeholder { color: var(--barra-marcador); opacity: 1; }
.ib-barra .inp-contador { background: var(--barra-superficie-hover); color: var(--barra-texto-suave); }

/* ---------- Referencias de Video (se abren con Adjuntar) ---------- */
.ib-referencias { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ib-referencias-titulo { width: 100%; color: var(--barra-texto-suave); font-size: 11px; line-height: 1.3; }
.ib-referencia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px dashed var(--barra-borde-fuerte);
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--barra-texto-suave);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.ib-referencia svg { width: 15px; height: 15px; }
.ib-referencia:hover { background: var(--barra-superficie-hover); color: var(--barra-texto); }

/* ---------- Ajustes, coste y acciones ---------- */
.ib-controles {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "mas ajustes ajustes" "coste coste acciones";
  align-items: center;
  gap: 8px 6px;
  min-width: 0;
}
/* Adjuntar y los selectores: píldoras transparentes con filete y un reflejo
   metálico arriba. */
.ib-mas {
  grid-area: mas;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid var(--barra-borde);
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--barra-texto-suave);
  box-shadow: var(--barra-brillo);
  font-size: 13px;
  font-weight: 500;
}
.ib-mas > span { display: none; }
.ib-mas svg { transition: transform var(--trans-rapida); }
.ib-mas[aria-expanded="true"] svg { transform: rotate(45deg); }

.ib-ajustes { grid-area: ajustes; display: flex; gap: 6px; min-width: 0; }
/* El modelo ocupa el hueco que queda; formato y duración, el ancho de su
   texto («Formato», «Duración», «16:9», «5 s») para leerse siempre enteros. */
.ib-selector { position: relative; display: block; flex: 1 1 0; min-width: 0; margin: 0; }
.ib-selector:not(:first-child) { flex: 0 0 auto; }
/* La etiqueta sigue siendo el nombre accesible del selector (aria-labelledby). */
.ib-selector > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ib-selector select {
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 6px 0 30px;
  border: 1px solid var(--barra-borde);
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--barra-texto-suave);
  box-shadow: var(--barra-brillo);
  font-size: 13px;
  line-height: 1.3;
  text-overflow: ellipsis;
  cursor: pointer;
}
.ib-selector:not(:first-child) select { width: auto; max-width: 100%; }
.ib-selector > svg { position: absolute; top: 50%; left: 10px; width: 15px; height: 15px; transform: translateY(-50%); pointer-events: none; }
.ib-selector select:disabled { color: var(--barra-marcador); cursor: default; }
.ib-selector option { background: var(--barra-fondo); color: var(--barra-texto); }
.ib-mas:hover, .ib-mas[aria-expanded="true"], .ib-selector select:hover {
  border-color: var(--barra-borde-fuerte);
  background: var(--barra-superficie-hover);
  color: var(--barra-texto);
}
.ib-barra :is(.ib-selector, .ib-mas, .ib-apps, .ib-modo, .ib-referencia) svg { color: var(--barra-texto-suave); }

.ib-coste {
  grid-area: coste;
  min-width: 0;
  overflow: hidden;
  color: var(--barra-texto-suave);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Acciones: dictado discreto (solo el icono) y Crear, la única acción llena. */
.ib-acciones { grid-area: acciones; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ib-acciones button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  /* Alto fijo: la llegada de la fuente (Geist) no cambia el alto de la fila. */
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  line-height: 1;
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--barra-texto-suave);
}
#ib-microfono:hover { background: var(--barra-superficie-hover); color: var(--barra-texto); }
/* Escuchando: contraste invertido, sin lima. */
.ib-escuchando #ib-microfono { border-color: var(--barra-texto); background: var(--barra-texto); color: var(--barra-fondo); }
#ib-enviar:disabled { border-color: var(--barra-borde); background: var(--barra-superficie); color: var(--barra-marcador); }
/* Crear: lima llena con un anillo de cromo líquido que gira. */
#ib-enviar:not(:disabled) {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--verde-cocuyo), var(--verde-cocuyo)) padding-box, conic-gradient(from var(--ib-luz-angulo), var(--barra-metal-cromo)) border-box;
  color: var(--tinta-sobre-verde);
  animation: ib-cromo 5s linear infinite;
}
#ib-enviar:not(:disabled):hover { background: linear-gradient(var(--lima-clara), var(--lima-clara)) padding-box, conic-gradient(from var(--ib-luz-angulo), var(--barra-metal-cromo)) border-box; }
#ib-enviar[aria-busy="true"] { opacity: .7; cursor: progress; }
/* La portada pinta «Crear» en 600 (inicio-nuevo.css); sobre el metal, 500. */
html[data-experiencia="nueva"] #inicio-barra.ib-barra.inp-portada #ib-enviar { font-weight: 500; }

.ib-estado, .ib-nota {
  margin: 0;
  color: var(--barra-texto-suave);
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
}
.ib-estado:empty { display: none; }
.ib-estado:not(:empty) { padding: 7px 9px; border-radius: 12px; background: var(--barra-superficie-hover); color: var(--barra-texto); }
.ib-atajos { display: none; }

/* Plegada: una sola píldora con el resumen del texto. */
.ib-barra.ib-encogida { padding: 0; overflow: visible; }
.ib-encogida .ib-formulario { display: none; }
.ib-encogida .ib-plegar {
  position: static;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 10px 16px;
  border-radius: 22px;
  color: var(--barra-texto);
}
.ib-encogida .ib-resumen {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--barra-texto-suave);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ib-encogida .ib-plegar svg { transform: rotate(180deg); }

/* Móvil (< 600 px): los tres selectores van solos en su fila, a todo el
   ancho, y Adjuntar baja junto al coste y Crear. Así «Formato» y «Duración»
   se leen enteros a 390 px (antes «For…», «Du…»). Formato y duración van sin
   icono para ganar sitio; el modelo lo pierde por debajo de 420 px para que
   «Elegir modelo» también quepa, y a 380 px o menos la letra baja a 12 px. */
@media (max-width: 599px) {
  .ib-controles { grid-template-areas: "ajustes ajustes ajustes" "mas coste acciones"; }
  .ib-selector:not(:first-child) > svg { display: none; }
  .ib-selector:not(:first-child) select { padding-left: 12px; }
}
@media (max-width: 419px) {
  .ib-selector > svg { display: none; }
  .ib-selector select, .ib-selector:not(:first-child) select { padding-left: 12px; }
}
@media (max-width: 380px) {
  .ib-ajustes { gap: 4px; }
  .ib-selector select, .ib-selector:not(:first-child) select { padding-left: 10px; font-size: 12px; }
}
@media (min-width: 600px) {
  .ib-barra { --ib-arriba: 88px; padding: 14px 16px 11px; }
  .ib-prompt textarea { min-height: 56px; }
}

/* Escritorio y tableta: ajustes, coste y acciones en una sola fila. */
@media (min-width: 740px) {
  .ib-controles { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "mas ajustes coste acciones"; gap: 6px; }
  .ib-mas > span { display: inline; }
  .ib-mas { padding: 0 11px 0 9px; }
  .ib-ajustes { max-width: 480px; }
  .ib-coste { padding: 0 4px 0 6px; text-align: right; }
  .ib-barra[data-modo="audio"] .ib-ajustes { max-width: 300px; }
}
@media (min-width: 740px) and (pointer: fine) {
  .ib-atajos { display: inline; }
  .ib-atajos::before { content: " · "; }
}

/* Móvil: los modos se quedan solo con su nombre (más claro que un icono
   suelto) para que quepan junto a Apps. */
@media (max-width: 479px) {
  .ib-cabeza { gap: 4px; }
  .ib-modo { padding: 0 10px; }
  .ib-modo svg { display: none; }
  .ib-apps { padding: 0 8px; }
}
@media (max-width: 359px) {
  .ib-modo { padding: 0 8px; }
  .ib-apps svg { display: none; }
}

/* El panel puede desplazarse con zoom o teclado. Una pantalla baja ya empieza
   en una fila (inicio-barra.js / inicio-prompt.js); esto es el respaldo. */
@media (max-height: 520px) {
  .ib-formulario { gap: 6px; }
  .ib-prompt textarea { min-height: 44px; max-height: 88px; }
}

/* Reducir movimiento: el cromo se queda quieto (panel y Crear) y no hay
   transiciones. */
@media (prefers-reduced-motion: reduce) {
  .ib-barra::before, .ib-barra::after, .ib-barra #ib-enviar:not(:disabled) { animation: none; }
  .ib-barra, .ib-barra :is(button, a, select), .ib-mas svg { transition: none; }
}

/* Móvil (hasta 767 px): la barra de ideas no se usa; la sustituye la barra
   inferior global (barra-inferior.js). inicio-barra.js ya no la monta en
   móvil: esto es el respaldo si se gira o se estrecha la ventana. */
@media (max-width: 767px) {
  #inicio-barra { display: none !important; }
}