/* El lenguaje visual de la app del lector — Sociedad Bíblica Colombiana.
   =====================================================================
   DIRECCIÓN ELEGIDA POR SBC: «Reverencia» — la página impresa que continúa en
   la pantalla — con dos injertos que Darío pidió expresamente:

     1 · CÓDIGO DE COLOR POR TESTAMENTO, para que el lector sepa en qué parte de
         su Biblia está antes de leer una palabra. Traído a clave Reverencia:
         no son tres colores vivos, son TRES TINTAS. Se eligieron por medición,
         no por gusto — son los pasos de la rampa de SBC que pasan AA sobre los
         tres fondos de papel de la app (verificacion/contraste.mjs lo comprueba
         en cada ejecución). El Antiguo Testamento se lleva el granate, que ya
         era la tinta del emblema impreso: el código de color no añade un color,
         reparte el que ya había.
     2 · SIGLA MONUMENTAL para los 47 patrones cuyo arte todavía no ha llegado.
         Donde no hay lámina que enmarcar, el marco se disuelve y la sigla crece
         hasta ocupar la página entre dos filetes. La escala viene de la
         dirección C; el papel, el serif y el eje centrado son de Reverencia. La
         falta deja de disimularse y pasa a ser la imagen.

   Tres decisiones gobiernan todo lo demás:

   1 · SIN TIPOGRAFÍA WEB. Ni Google Fonts ni fuentes autoalojadas. Quien llega
       aquí acaba de escanear un papel, muchas veces con datos móviles flojos:
       una fuente que bloquea el primer pintado cuesta más de lo que aporta, no
       funciona sin conexión y añade una dependencia de terceros a un producto
       cuya premisa es coste ~0. El serif del sistema pone el tono de libro.
   2 · ESCALA GENEROSA. La audiencia son lectores de Biblia de todas las edades.
       Base 17px, altura de línea amplia, ningún objetivo táctil por debajo de
       48px, y todo el cuerpo escala con el tamaño de letra del sistema.
   3 · UNA SOLA COLUMNA, EJE CENTRADO. En escritorio no se ensancha a tablero:
       se enmarca. Sigue siendo una página. */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Marca SBC — valores exactos del manual (tokens.json · colors.principals). */
  --sbc-rojo: #E32539;
  --sbc-azul: #23BCE1;
  --sbc-naranja: #FFA300;
  --sbc-negro: #231F20;

  /* Papel: el suelo de toda la app. Cálido, nunca blanco de pantalla. */
  --papel: #FAF5EC;
  --papel-alto: #FFFDF8;
  --papel-hundido: #F2E9D8;
  --filete: #DCCFBA;
  --filete-fuerte: #C4B295;

  /* Escalera de texto. Los TRES pasos pasan AA (4.5:1) sobre los tres papeles:
     --texto-3 daba 3.38:1 y se usaba en sitios bien visibles —el descriptor de la
     cabecera, el pie, el pie de lámina, los códigos del índice—, así que era texto
     real por debajo del mínimo. Al subirlo hubo que bajar también --texto-2, o los
     dos habrían quedado casi indistinguibles y la jerarquía se habría perdido.
     Medido en verificacion/contraste.mjs: 12.77 · 6.35 · 4.70. */
  --texto: #2B2320;
  --texto-2: #5E5147;
  --texto-3: #756453;

  /* --- INJERTO 1 · las tres tintas del código por testamento ---------------
     Pasos de las rampas de SBC medidos contra --papel, --papel-alto y
     --papel-hundido: los tres superan 4.5:1, así que valen para texto pequeño.
     Los pasos vivos de la rampa (rojo-500, azul-600, naranja-600) NO pasan y por
     eso no se usan como señal — sería una fiesta de color ilegible. */
  --at: #991A36;        /* rojo-700 · el granate del emblema impreso   7.5:1 */
  --nt: #00606B;        /* azul-800 · tinta profunda                   6.6:1 */
  --ayuda: #994F00;     /* naranja-800 · sepia                         5.5:1 */

  /* La tinta del emblema tipográfico. Coincide con la del AT a propósito: es
     el mismo granate que SBC imprime en el papel. */
  --tinta: var(--at);
  --tinta-suave: #F7EFEA;

  /* El rojo de marca aparece UNA sola vez por pantalla: en la única acción.
     Es el paso 600 de la rampa roja de SBC, no el 500 del manual, y es una
     decisión de accesibilidad tomada a conciencia: el texto del botón mide
     17,12 px con peso 400, que para WCAG es TEXTO NORMAL —«grande» empieza en
     24 px, o en 18,66 px si va en negrita—, así que exige 4,5:1. Sobre el rojo
     exacto del manual daba 4,38:1. Se descartó engordar el botón hasta que
     calificara como texto grande porque contradice la dirección elegida, cuya
     regla es que el serif de libro no engorda; profundizar la tinta, en cambio,
     la refuerza: acerca la acción al granate del emblema impreso. Es la misma
     decisión que ya se tomó con las tres tintas del código por testamento, donde
     los pasos vivos de la rampa tampoco llegaban a 4,5:1.
     El rojo exacto del manual sigue presente donde le corresponde: en el isotipo.
     Medido en verificacion/contraste.mjs — 5,97:1 el botón, 5,18:1 como enlace. */
  --accion: #BC1D34;
  --accion-viva: #991A36;

  /* El velo de la cámara: fondo opaco y sus dos textos. Van como tokens, y no
     sueltos dentro de la regla, para que la verificación de contraste los alcance
     igual que a todo lo demás — es texto que el lector lee. */
  --velo-fondo: #241D19;
  --velo-texto: #FBF6EC;
  --velo-texto-2: #D5C9B8;

  --sombra-1: 0 1px 2px rgba(43, 35, 32, .05);
  --sombra-2: 0 2px 10px rgba(43, 35, 32, .09);

  /* Geometría de imprenta: filetes y esquinas rectas, no píldoras. */
  --radio: 3px;
  --radio-s: 2px;

  --serif: "Iowan Old Style", Georgia, "Noto Serif", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  --columna: 33rem;
  --marco: 1.55rem;
}

/* Modo oscuro, en clave Reverencia: no se invierte a negro de pantalla, se pasa
   a TINTA. Es la misma página vista con otra luz. Las tres tintas del código por
   testamento suben a los pasos claros de sus rampas para conservar AA. */
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #1A1512;
    --papel-alto: #241D19;
    --papel-hundido: #120F0C;
    --filete: #3A3129;
    --filete-fuerte: #564A3E;
    --texto: #F6EFE3;
    --texto-2: #C3B6A5;
    --texto-3: #A2947F;

    --at: #F4A8B0;        /* rojo-200      8.9:1 sobre la tinta */
    --nt: #7BD7ED;        /* azul-300     11.4:1 */
    --ayuda: #FBC776;     /* naranja-300  10.7:1 */

    --tinta: var(--at);
    --tinta-suave: #2A1E1A;

    /* En oscuro sube a los pasos claros de la misma rampa, por el mismo motivo. */
    --accion: #EE7C88;
    --accion-viva: #F4A8B0;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .35);
    --sombra-2: 0 4px 16px rgba(0, 0, 0, .5);
  }
}

/* ------------------------------------------------------------- cimientos -- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--serif);
  font-size: 1.0625rem;          /* 17px de base: la audiencia lo agradece */
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;              /* el serif de libro no necesita engordar */
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0 0 .55rem;
  color: var(--texto);
}
h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; color: var(--texto-2); }
a { color: var(--accion); }
b, strong { font-weight: 700; color: var(--texto); }

/* Versalitas espaciadas: el rótulo de imprenta. Es la voz de todos los
   micro-rótulos de la app —marcas, secciones, códigos, pie—, y lo que sostiene
   el aire clásico sin recurrir a más adorno. */
.rotulo, .marca-cinta, .grupo-titulo, .celda .cod, .pie .colofon, .cab-marca span {
  font-size: .69rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.5;
}

:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 3px;
  border-radius: 1px;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--papel-alto);
  color: var(--texto);
  padding: .8rem 1.1rem;
  border: 1px solid var(--filete-fuerte);
  box-shadow: var(--sombra-2);
  z-index: 100;
}
.salto-contenido:focus { left: var(--marco); top: .6rem; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- cabeza -- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papel);
  border-bottom: 1px solid var(--filete);
}
.cabecera-int {
  max-width: var(--columna);
  margin: 0 auto;
  padding: 0 var(--marco);
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.marca {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; color: inherit;
  padding: .4rem .1rem;
}
/* El emblema es cuadrado —el isotipo que estaba antes aquí era 1,35:1—, así que
   se declara cuadrado y no «alto automático». Sin tesela: ver index.html. */
.marca img { width: 28px; height: 28px; display: block; }
.cab-marca { display: flex; flex-direction: column; line-height: 1.15; }
.cab-marca b {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 400;
  letter-spacing: .05em;
}
.cab-marca span { color: var(--texto-3); font-size: .58rem; letter-spacing: .18em; }
.cabecera-acc { margin-left: auto; display: flex; gap: .2rem; }

/* --------------------------------------------------------------- cuerpo --- */
main {
  max-width: var(--columna);
  margin: 0 auto;
  padding: 1.9rem var(--marco) 4.5rem;
}
.pantalla { animation: entra .3s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .pantalla { animation: none; }
  * { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.plomo {
  font-size: 1.075rem;
  color: var(--texto-2);
  margin-bottom: 1.6rem;
}

/* ---------------------------------------------- ornamento tipográfico ----- */
/* Filete con rombo: la juntura clásica entre bloques de un libro. Es el único
   adorno de toda la app, y por eso se nota. */
.orn { display: flex; align-items: center; gap: .85rem; margin: 1.9rem 0; color: var(--filete-fuerte); }
.orn::before, .orn::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.orn i { width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); }

/* ---------------------------------------------------------------- lámina -- */
/* El emblema enmarcado como una ilustración encartada: filete exterior, aire, y
   un segundo filete interior. Es la pieza que sostiene ficha, índice y cámara. */
.medallon {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--papel-alto);
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio-s);
  overflow: hidden;
  padding: 7px;
}
.medallon::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--filete);
  pointer-events: none;
}
.medallon img { width: 100%; height: 100%; object-fit: contain; }

/* INJERTO 1 en la lámina: el filete interior toma la tinta del testamento.
   Es una señal de un píxel — se percibe, no se anuncia. */
.medallon.at::after { border-color: color-mix(in srgb, var(--at) 34%, transparent); }
.medallon.nt::after { border-color: color-mix(in srgb, var(--nt) 34%, transparent); }
.medallon.ayuda::after { border-color: color-mix(in srgb, var(--ayuda) 34%, transparent); }

.sigla {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--tinta);
  line-height: 1;
  letter-spacing: -.035em;
  font-size: 2.6rem;
}
.medallon.sin-arte { background: var(--papel); }
.medallon.at .sigla { color: var(--at); }
.medallon.nt .sigla { color: var(--nt); }
.medallon.ayuda .sigla { color: var(--ayuda); }

.medallon-heroe { max-width: 14.5rem; margin: 0 auto 1.5rem; }
.medallon-heroe .sigla { font-size: 6rem; }

/* --- INJERTO 2 · LA SIGLA MONUMENTAL -------------------------------------
   Cuando el arte todavía no ha llegado no hay ilustración que encartar, así que
   el marco se disuelve: quedan dos filetes y la sigla crece hasta ocupar la
   página. Escala de la dirección C, papel y serif de Reverencia. */
.medallon-heroe.sin-arte {
  max-width: none;
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--filete-fuerte);
  border-bottom: 1px solid var(--filete-fuerte);
  border-radius: 0;
  padding: .7rem 0 1rem;
  margin: .3rem 0 .9rem;
  overflow: visible;
}
.medallon-heroe.sin-arte::after { display: none; }
.medallon-heroe.sin-arte .sigla {
  font-size: clamp(6.5rem, 31vw, 9.5rem);
  line-height: .96;
  letter-spacing: -.055em;
}
/* Al pie de la sigla, en versalitas: dice lo que es sin que haya que leer la
   nota de más abajo. */
.pie-lamina {
  margin: 0 0 1.6rem;
  color: var(--texto-3);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- fichas ---- */
/* INJERTO 1 en el rótulo de marca: un tajo del color del testamento delante del
   código. Sustituye al punto: un filete corto es más de imprenta que un lunar. */
.marca-cinta {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--texto-2);
  margin-bottom: 1.15rem;
}
.marca-cinta .punto { width: 22px; height: 2px; flex: none; background: var(--texto-3); }
.marca-cinta.at { color: var(--at); }
.marca-cinta.at .punto { background: var(--at); }
.marca-cinta.nt { color: var(--nt); }
.marca-cinta.nt .punto { background: var(--nt); }
.marca-cinta.ayuda { color: var(--ayuda); }
.marca-cinta.ayuda .punto { background: var(--ayuda); }

.ficha-centro { text-align: center; }
.ficha-centro .marca-cinta { margin-inline: auto; }

.nota {
  font-size: .9rem; line-height: 1.6;
  color: var(--texto-2);
  border-left: 2px solid var(--filete-fuerte);
  padding: .15rem 0 .15rem .95rem;
  margin: 1.4rem 0 0;
  text-align: left;
}
.nota.aviso { border-left-color: var(--ayuda); }
.nota.dato { border-left-color: var(--nt); }
.nota b { color: var(--texto); font-weight: 400; font-style: italic; }
.nota p { margin: 0; }
.nota p + p { margin-top: .5rem; }

/* -------------------------------------------------------------- botones ---- */
/* Rectángulos, no píldoras, y en serif: son parte del texto de la página, no
   controles de un tablero. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 54px;
  padding: .9rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--radio-s);
  font-family: var(--serif);
  font-size: 1.07rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
}
.boton-principal {
  background: var(--accion);
  color: #FFF9F2;
}
.boton-principal:hover { background: var(--accion-viva); }
@media (prefers-color-scheme: dark) { .boton-principal { color: #24090D; } }

.boton-suave {
  background: var(--papel-alto);
  color: var(--texto);
  border-color: var(--filete-fuerte);
}
.boton-suave:hover { background: var(--papel-hundido); }

.boton-plano {
  background: transparent; color: var(--texto-2);
  min-height: 46px; padding: .5rem .7rem; font-size: .98rem;
  border-bottom: 1px solid transparent;
}
.boton-plano:hover { color: var(--texto); border-bottom-color: var(--filete-fuerte); }

.boton-bloque { display: flex; width: 100%; }
.botonera { display: grid; gap: .65rem; margin: 1.6rem 0 0; }

/* La flecha del enlace externo va en palo seco: el serif la dibuja como una
   plumilla y se lee como una errata. */
.flecha-ext { flex: none; }

/* ---------------------------------------------------------- instalación --- */
/* No se anuncia como «PWA»: para la persona es simplemente la forma de dejar
   esta ayuda junto a sus aplicaciones. La pieza usa el icono real que verá en
   la pantalla de inicio, de modo que la promesa y el resultado se reconocen. */
.instalacion {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: .9rem 1rem;
  align-items: start;
  margin: 2rem 0 0;
  padding: 1.1rem;
  background: var(--papel-alto);
  border-top: 1px solid var(--filete-fuerte);
  border-bottom: 1px solid var(--filete-fuerte);
  box-shadow: var(--sombra-1);
}
.instalacion > img {
  width: 54px; height: 54px;
  display: block;
  border: 1px solid var(--filete);
  border-radius: 12px;
  box-shadow: var(--sombra-1);
}
.instalacion .rotulo {
  color: var(--nt);
  margin: 0 0 .18rem;
}
.instalacion h2 { font-size: 1.25rem; margin-bottom: .22rem; }
.instalacion-texto > p:last-child {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
}
.boton-instalacion {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 48px;
  padding: .65rem 1rem;
  background: transparent;
  border-color: var(--accion);
  color: var(--accion);
  font-size: 1rem;
}
.boton-instalacion:hover {
  background: var(--tinta-suave);
  border-color: var(--accion-viva);
  color: var(--accion-viva);
}

.dialogo-instalacion {
  width: min(calc(100% - 1.2rem), 31rem);
  max-height: min(90dvh, 43rem);
  margin: auto auto .6rem;
  padding: 0;
  color: var(--texto);
  background: transparent;
  border: 0;
  overflow: visible;
}
.dialogo-instalacion::backdrop {
  background: rgba(24, 18, 15, .62);
  backdrop-filter: blur(3px);
}
.dialogo-hoja {
  position: relative;
  max-height: min(90dvh, 43rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.45rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  background: var(--papel-alto);
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  box-shadow: 0 18px 60px rgba(25, 18, 15, .28);
}
.dialogo-hoja > .rotulo {
  color: var(--nt);
  padding-right: 3rem;
  margin: 0 0 .35rem;
}
.dialogo-hoja h2 {
  padding-right: 2.6rem;
  margin-bottom: .45rem;
  font-size: 1.7rem;
}
.dialogo-previo { font-size: .96rem; line-height: 1.55; }
.dialogo-cerrar {
  position: absolute;
  top: .65rem; right: .65rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
}
.dialogo-cerrar:hover { color: var(--texto); }
.pasos-instalacion {
  display: grid;
  gap: .65rem;
  padding: 0;
  margin: 1.2rem 0 1.35rem;
  list-style: none;
  counter-reset: pasos;
}
.pasos-instalacion li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  padding: .75rem 0;
  border-top: 1px solid var(--filete);
}
.pasos-instalacion li:last-child { border-bottom: 1px solid var(--filete); }
.paso-numero {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--papel-alto);
  background: var(--nt);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
}
.pasos-instalacion b {
  display: block;
  font-size: 1rem;
  font-weight: 400;
}
.pasos-instalacion small {
  display: block;
  margin-top: .12rem;
  color: var(--texto-2);
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.45;
}

@media (min-width: 36rem) {
  .instalacion { grid-template-columns: 58px minmax(0, 1fr); }
  .instalacion > img { width: 58px; height: 58px; }
  .boton-instalacion { grid-column: 2; }
  .dialogo-instalacion { margin: auto; }
  .dialogo-hoja { padding: 1.7rem; }
}

/* --------------------------------------------------------------- índice ---- */
.buscador { position: relative; margin-bottom: 1rem; }
.buscador input {
  width: 100%;
  min-height: 54px;
  padding: .8rem 3.25rem .8rem 2.9rem;
  font-family: var(--sans);           /* único control: prima la legibilidad */
  font-size: 1rem;
  color: var(--texto);
  background: var(--papel-alto);
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio-s);
  -webkit-appearance: none;
}
.buscador input::placeholder { color: var(--texto-3); }
/* El botón de borrar nativo de type="search" se retira: ya hay uno propio, con
   objetivo táctil de 40px y etiqueta accesible, y dos aspas seguidas confunden. */
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.buscador .lupa {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--texto-3); pointer-events: none; display: flex;
}
.buscador .limpiar {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  /* 44 × 44 es el mínimo táctil; con 40 se quedaba corto. El hueco derecho del
     campo sube en consecuencia para que el aspa no pise el texto escrito. */
  width: 44px; height: 44px;
  border: 0; background: transparent; color: var(--texto-2); cursor: pointer;
  display: grid; place-items: center;
}
.buscador .limpiar:hover { color: var(--texto); }

.filtros {
  display: flex; gap: .4rem; margin-bottom: 1.5rem;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none;
  min-height: 46px; padding: .45rem 1rem;
  border: 1px solid var(--filete-fuerte); border-radius: var(--radio-s);
  background: transparent; color: var(--texto-2);
  font-family: var(--serif); font-size: .98rem; cursor: pointer;
  white-space: nowrap;
}
.filtro[aria-pressed="true"] {
  background: var(--texto); color: var(--papel);
  border-color: var(--texto);
}

/* INJERTO 1 en los separadores del índice: cada sección lleva su tinta, y el
   filete que la acompaña también. Aquí es donde el código de color más trabaja:
   recorriendo los 72, dice en qué parte de la Biblia va uno. */
.grupo-titulo {
  color: var(--texto-3);
  margin: 2rem 0 .9rem;
  display: flex; align-items: center; gap: .85rem;
  font-weight: 400;
}
.grupo-titulo::after { content: ""; flex: 1; height: 1px; background: var(--filete); }
.grupo-titulo:first-child { margin-top: .2rem; }
.grupo-titulo.at { color: var(--at); }
.grupo-titulo.at::after { background: color-mix(in srgb, var(--at) 30%, transparent); }
.grupo-titulo.nt { color: var(--nt); }
.grupo-titulo.nt::after { background: color-mix(in srgb, var(--nt) 30%, transparent); }
.grupo-titulo.ayuda { color: var(--ayuda); }
.grupo-titulo.ayuda::after { background: color-mix(in srgb, var(--ayuda) 30%, transparent); }

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr));
  gap: 1rem .8rem;
  list-style: none; padding: 0; margin: 0;
}
.celda a {
  display: block; text-decoration: none; color: inherit;
}
.celda a:hover .medallon { border-color: var(--texto-3); }
.celda .sigla { font-size: 2.5rem; }
.celda .nombre {
  display: block;
  font-family: var(--serif); font-size: 1rem;
  margin-top: .6rem; line-height: 1.25;
}
/* El código del patrón lleva la tinta de su testamento: la señal más pequeña y
   la más constante de toda la app. */
.celda .cod { display: block; color: var(--texto-3); margin-top: .15rem; }
.celda .cod.at { color: var(--at); }
.celda .cod.nt { color: var(--nt); }
.celda .cod.ayuda { color: var(--ayuda); }
.vacio { text-align: center; padding: 2.6rem 0; color: var(--texto-2); }

/* --------------------------------------------------------------- cámara ---- */
.visor {
  position: relative;
  aspect-ratio: 1;
  margin: 0 auto 1rem;
  background: #221C18;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio-s);
  overflow: hidden;
  display: grid; place-items: center;
}
.visor video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* El marco señala LO QUE SE ANALIZA, y desde W14 eso es el cuadrado entero: el
   contenedor es 1/1 y el video entra con `cover`, así que la región visible ES
   el cuadrado central del fotograma. Con el marco más pequeño que la ventana de
   consulta, el lector encuadraría a una cosa y se leería otra. */
.guia {
  position: relative;
  width: 100%; aspect-ratio: 1;
  pointer-events: none;
}
.guia i {
  position: absolute; width: 24px; height: 24px;
  border: 1px solid rgba(250, 245, 236, .9);
}
.guia i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.guia i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.guia i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.guia i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.visor.leyendo .guia i { border-color: #E8C88A; border-width: 2px; }
.visor.hallado .guia i { border-color: #9FDDBB; border-width: 2px; }

.velo {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 1.6rem;
  text-align: center;
  color: var(--velo-texto);
  background: color-mix(in srgb, var(--velo-fondo) 92%, transparent);
}
.velo p { color: var(--velo-texto-2); }
.velo h2 { color: var(--velo-texto); }

.estado-camara {
  min-height: 3.2rem;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  text-align: center;
  font-size: .96rem; color: var(--texto-2);
  padding: .4rem .2rem;
}
#salida { scroll-margin-top: 5rem; }
#salida:focus { outline: none; }

/* El resultado sustituye visualmente al visor cuando el intento termina. Así
   el mensaje y sus dos salidas quedan dentro de la primera pantalla, en vez de
   aparecer debajo de un cuadrado de cámara que ya dejó de servir. */
.resultado-lectura {
  margin: .25rem 0 1rem;
  padding: 1.3rem 1.15rem;
  text-align: center;
  background: var(--papel-alto);
  border-top: 2px solid var(--nt);
  border-bottom: 1px solid var(--filete-fuerte);
  box-shadow: var(--sombra-1);
}
.resultado-lectura.sin-coincidencia { border-top-color: var(--ayuda); }
.resultado-senal {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  margin: 0 auto .85rem;
  color: var(--nt);
  background: color-mix(in srgb, var(--nt) 9%, var(--papel-alto));
  border: 1px solid color-mix(in srgb, var(--nt) 36%, var(--filete));
}
.sin-coincidencia .resultado-senal {
  color: var(--ayuda);
  background: color-mix(in srgb, var(--ayuda) 9%, var(--papel-alto));
  border-color: color-mix(in srgb, var(--ayuda) 36%, var(--filete));
}
.resultado-lectura > .rotulo {
  color: var(--nt);
  margin: 0 0 .25rem;
}
.resultado-lectura.sin-coincidencia > .rotulo { color: var(--ayuda); }
.resultado-lectura h2 { margin-bottom: .45rem; font-size: 1.65rem; }
.resultado-explicacion {
  max-width: 27rem;
  margin: 0 auto;
  font-size: .96rem;
  line-height: 1.55;
}
.apertura-asistida {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  max-width: 27rem;
  margin: 1rem auto 0;
  padding: .75rem;
  color: var(--texto);
  background: color-mix(in srgb, var(--accion) 8%, var(--papel));
  border: 1px solid color-mix(in srgb, var(--accion) 34%, var(--filete));
}
.apertura-asistida p { margin: 0; line-height: 1.4; }
.apertura-asistida .boton { flex: none; min-height: 44px; }
.resultado-acciones { margin-top: 1.15rem; }
.resultado-nota {
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--filete);
  color: var(--texto-3);
  font-family: var(--sans);
  font-size: .74rem;
  line-height: 1.48;
}
.pulso {
  width: 6px; height: 6px; flex: none;
  background: var(--tinta);
  transform: rotate(45deg);
  animation: latir 1.6s ease-in-out infinite;
}
@keyframes latir { 50% { opacity: .2; } }

.barra { height: 2px; background: rgba(250, 245, 236, .22); overflow: hidden; margin: .3rem 0 1rem; }
.barra span { display: block; height: 100%; width: 0; background: var(--velo-texto); transition: width .35s ease; }

.candidatos { display: grid; gap: .55rem; margin: 1.2rem 0 0; list-style: none; padding: 0; }
.candidato a {
  display: flex; align-items: center; gap: 1rem;
  min-height: 76px;
  padding: .6rem .7rem; text-decoration: none; color: inherit;
  text-align: left;
  background: var(--papel);
  border: 1px solid var(--filete-fuerte);
}
.candidato a:hover { border-color: var(--accion); }
/* Banda de tarjeta segura: la primera tarjeta no es una opción más, es la
   sugerencia firme del motor. Doble filete de acción y rótulo «Sugerido»;
   las demás quedan como alternativas visiblemente secundarias. */
.candidato-sugerido a {
  border: 2px solid var(--accion);
  padding: calc(.6rem - 1px) calc(.7rem - 1px);
}
.candidato-sugerido b { font-size: 1.18rem; }
.sugerido-rotulo { color: var(--accion); font-weight: 600; }
.candidato .medallon { width: 56px; flex: none; }
.candidato .sigla { font-size: 1.5rem; }
.candidato span { min-width: 0; }
.candidato b { font-family: var(--serif); font-size: 1.06rem; font-weight: 400; display: block; }
.candidato small { color: var(--texto-3); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.candidato-flecha { margin-left: auto; flex: none; color: var(--accion); }

@media (max-width: 420px) {
  .apertura-asistida { align-items: stretch; flex-direction: column; }
}

/* ------------------------------------------------------------------ pie ---- */
.pie {
  max-width: var(--columna);
  margin: 0 auto;
  padding: 1.8rem var(--marco) 2.6rem;
  border-top: 1px solid var(--filete);
  color: var(--texto-3);
  text-align: center;
  font-size: .85rem;
}
/* Solo el colofón —el nombre— va en versalitas espaciadas. La frase de abajo es
   una oración entera: en mayúsculas espaciadas se lee a gritos y cuesta el
   doble, que es justo lo contrario de lo que esa frase intenta transmitir. */
.pie p { color: var(--texto-3); margin-bottom: .5rem; }
.pie p:last-child { margin-bottom: 0; }
.pie .colofon b { color: var(--texto-3); font-weight: 400; }

/* La firma de la organización. El eje del pie es centrado como todo lo demás de
   esta app, así que el isotipo y el nombre van juntos en una sola línea óptica y
   no en dos bloques apilados. El isotipo conserva su color: es el
   identificador, no una viñeta, y es la única pieza a color del pie. */
.pie .firma-org {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; margin-bottom: .8rem;
}
.pie .firma-org img { width: 36px; height: 27px; display: block; flex: none; }

/* ------------------------------------------------------------ escritorio -- */
/* No se ensancha: se enmarca. La app sigue siendo una página. */
@media (min-width: 48rem) {
  :root { --marco: 2.2rem; }
  body { font-size: 1.1rem; }
  main { padding-top: 3rem; }
  .medallon-heroe { max-width: 16rem; }
  .medallon-heroe.sin-arte { max-width: none; }
  .medallon-heroe.sin-arte .sigla { font-size: 10rem; }
}