/* Tokens de la paleta de Brilliant, copiados de app/src/ui/tema.ts (una prueba verifica que coincidan). */
:root {
  --fondo: #F5F3F1; --tinta: #141414; --gris: #666666; --linea: #E4E4E4; --primario: #000000; --primario-suave: #F2F2F2;
  --acento: #375CE3; --ok: #007C23; --ok-suave: #EAFAEE; --mal: #C43939; --mal-suave: #FFEFEF; --tarjeta: #FFFFFF;
  --reintenta: #755600; --reintenta-suave: #FEF9E9;
  /* Task 029 (provisionales hasta que mergee el 025, que los define en tema.ts): profundidad 3D, espacios, radios, tipos y movimiento. */
  --borde-3d: #D9D6D2; --primario-3d: #3A3A3A; --reintenta-3d: #E9D9A6;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --r-chico: 10px; --radio: 14px; --r-grande: 20px; --r-pildora: 999px;
  --hundir: 4px; --rapido: 120ms; --normal: 220ms; --salida: cubic-bezier(.2, .8, .2, 1);
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --ancho: 1040px;
  font-family: var(--texto);
}
/* Fuentes OFL servidas desde /fonts (subconjunto latino; licencias junto a los archivos). Nunca de un CDN: CSP 'self'. */
@font-face { font-family: "Inter"; src: url(/fonts/inter-latin.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-latin.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-size: 17px; line-height: 1.55; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.salto { position: absolute; left: -999px; top: 0; background: var(--primario); color: #fff; padding: 12px 16px; z-index: 10; }
.salto:focus { left: 8px; top: 8px; }
.caja { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e4); }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: 34px; line-height: 1.1; margin: 0 0 var(--e3); }
h2 { font-size: 28px; line-height: 1.15; margin: 0 0 var(--e3); }
h3 { font-size: 18px; line-height: 1.3; margin: 0 0 6px; }
p { margin: 0 0 var(--e3); }
.chico { font-size: 14px; color: var(--gris); }
section { padding: 40px 0; }
/* Rendimiento (task 029): el navegador no calcula el diseño de las secciones de abajo hasta que se acercan a la pantalla. */
main > section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Etiqueta en mayúsculas con tracking (como en la app). #666 sobre avena ≈ 5.2:1. */
.etiqueta-mayus { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin: 0 0 var(--e2); }

.barra { padding: var(--e3) 0; }
.barra .caja { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.marca { font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--tinta); text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; }
.barra nav { display: flex; }
.barra nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--e2); color: var(--tinta); font-weight: 600; font-size: 16px; }
.solo-ancho { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.solo-ancho:focus-visible { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }   /* con teclado, el enlace oculto en móvil se ve al enfocarlo */

/* Botones 3D: canto inferior de un tono más oscuro que se hunde al presionar (CSS puro). */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; border-radius: var(--radio); border: 2px solid var(--primario); background: var(--primario); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 var(--hundir) 0 var(--primario-3d); transition: transform var(--rapido) var(--salida), box-shadow var(--rapido) var(--salida); -webkit-tap-highlight-color: transparent; margin-bottom: var(--hundir); }
.boton.secundario { background: var(--tarjeta); color: var(--primario); border-color: var(--borde-3d); box-shadow: 0 var(--hundir) 0 var(--borde-3d); }
.boton:active:not(:disabled) { transform: translateY(var(--hundir)); box-shadow: 0 0 0 transparent; }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }
.botones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: 20px; }
.botones .boton { flex: 1 1 200px; }

/* Tarjetas 3D: mismo lenguaje que la app (borde de 2 px y canto inferior). */
.tarjeta { background: var(--tarjeta); border: 2px solid var(--linea); border-radius: var(--r-grande); padding: 20px; box-shadow: 0 var(--hundir) 0 var(--borde-3d); }
.pastilla { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); background: var(--ok-suave); border: 2px solid var(--ok); border-radius: var(--r-pildora); padding: 1px 10px; margin-right: 6px; vertical-align: 1px; }

.hero { padding-top: var(--e3); }
.hero-grid { display: grid; gap: var(--e5); align-items: center; }
.hero-media { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms ease; }
.hero-media video.listo { opacity: 1; }
.hero-img { width: 100%; }
.hero p.sub { font-size: 19px; color: var(--tinta); }
.gratis-nota { font-size: 15px; margin: var(--e2) 0 0; }
.cifras { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e4) 0 0; padding: 0; list-style: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.cifras li { background: var(--tarjeta); border: 2px solid var(--linea); border-radius: var(--r-pildora); padding: 4px 14px; }
.cifras span { color: var(--gris); font-weight: 400; }

/* Así se estudia: pasos con capturas en marco de teléfono (medidas fijas en el HTML: sin CLS al cambiar la imagen). */
.pasos-app { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: var(--e5); }
.paso { display: grid; grid-template-columns: 140px 1fr; gap: var(--e4); align-items: center; }
.paso h3 { font-size: 19px; }
.paso p:last-child { margin: 0; }
.telefono { margin: 0; }
.telefono .marco { border: 6px solid var(--primario); border-radius: 24px; overflow: hidden; background: var(--tarjeta); box-shadow: 0 var(--hundir) 0 var(--primario-3d); }

/* Te dice tu error: un reactivo real con su opción equivocada y la hoja de retroalimentación, como en la app. */
.reactivo { padding: 18px; }
.enunciado { font-size: 18px; font-weight: 600; }
.opciones { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: 10px; }
.opcion { display: flex; align-items: center; gap: var(--e3); min-height: 52px; padding: 8px 14px; background: var(--tarjeta); border: 2px solid var(--linea); border-radius: var(--radio); box-shadow: 0 3px 0 var(--borde-3d); font-weight: 600; }
.letra { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-pildora); border: 2px solid var(--linea); font-size: 14px; font-weight: 800; }
.opcion.fallada { background: var(--reintenta-suave); border-color: var(--reintenta); box-shadow: 0 3px 0 var(--reintenta-3d); color: var(--reintenta); }
.opcion.fallada .letra { border-color: var(--reintenta); }
.hoja-retro { background: var(--reintenta-suave); border: 2px solid var(--reintenta); border-radius: var(--radio); padding: 14px 16px; color: var(--reintenta); }
.hoja-titulo { font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.hoja-error { color: var(--tinta); margin-bottom: var(--e1); }
.ver-respuesta { background: transparent; border: 0; box-shadow: none; margin: 0; }
.ver-respuesta summary { min-height: 48px; padding: 0; color: var(--reintenta); text-decoration: underline; text-underline-offset: 3px; }
.ver-respuesta p { padding: 0; color: var(--tinta); }

/* Loops de concepto del 030 (o su poster de respaldo): marco cuadrado de medidas fijas. */
.loop { width: 140px; aspect-ratio: 1; margin: var(--e4) 0 0; }
.loop img, .loop video { width: 100%; height: 100%; object-fit: contain; }
.destacada .loop, .destacada .sticker { width: 72px; height: 72px; margin: 0 0 var(--e3); }
.sticker { height: 72px; width: auto; }

/* El mapa: 9 bloques plegables con el camino de sus temas. */
.mapa-grid { display: grid; gap: var(--e4); margin-top: var(--e4); }
.mapa-grid > .loop { width: 120px; margin: 0; }
.bloques-mapa { display: grid; gap: var(--e3); }
details.bloque { background: var(--tarjeta); border: 2px solid var(--linea); border-radius: var(--r-grande); box-shadow: 0 var(--hundir) 0 var(--borde-3d); margin: 0 0 var(--e1); }
details.bloque summary { display: grid; grid-template-columns: 1fr auto; column-gap: var(--e3); padding: 12px 18px; min-height: 64px; list-style: none; }
details.bloque summary::-webkit-details-marker { font-size: 0; }
details.bloque summary::after { content: "+"; grid-column: 2; grid-row: 1 / 4; align-self: center; font-size: 26px; font-weight: 400; color: var(--gris); }
details.bloque[open] summary::after { content: "−"; }
details.bloque .etiqueta-mayus { margin: 0; grid-column: 1; }
.bloque-nombre { font-family: var(--display); font-weight: 600; font-size: 20px; grid-column: 1; }
.bloque-cifras { grid-column: 1; font-size: 14px; color: var(--gris); font-weight: 400; }
.camino { list-style: none; margin: 0; padding: 0 18px 16px; }
.camino li { display: grid; grid-template-columns: 22px 1fr; column-gap: var(--e3); padding: 6px 0; position: relative; }
.camino li::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--linea); }
.camino li:first-child::before { top: 50%; }
.camino li:last-child::before { bottom: 50%; }
.camino li:only-child::before { content: none; }
.nodo { grid-row: 1 / 3; align-self: center; width: 22px; height: 22px; border-radius: var(--r-pildora); background: var(--tarjeta); border: 2px solid var(--tinta); box-shadow: 0 2px 0 var(--borde-3d); position: relative; z-index: 1; }
.tema-nombre { font-weight: 600; }
.tema-cifras { font-size: 14px; color: var(--gris); font-variant-numeric: tabular-nums; }

.bloques { display: grid; gap: var(--e4); margin-top: var(--e4); }
.doble { display: grid; gap: var(--e5); }
.bloques .tarjeta h3 { margin-bottom: 4px; }
.bloques .tarjeta p:last-child { margin: 0; }

/* Task 013: textura sutil de garabatos de mate bajo una capa avena casi opaca; el texto va sobre tarjetas blancas o sobre esa capa (contraste ≥ 4.5:1). */
.con-textura { background-color: var(--fondo); background-image: linear-gradient(rgba(245, 243, 241, 0.88), rgba(245, 243, 241, 0.88)), url(/img/textura.webp); background-size: auto, 320px 320px; }
.con-textura caption { color: var(--tinta); }
.con-textura .etiqueta-mayus, .con-textura .bloque-cifras, .con-textura .tema-cifras { color: #595959; }

table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--tarjeta); border-radius: var(--r-grande); overflow: hidden; border: 2px solid var(--linea); box-shadow: 0 var(--hundir) 0 var(--borde-3d); margin-top: var(--e4); }
caption { text-align: left; padding: var(--e3) 0 0; font-size: 14px; color: var(--gris); caption-side: bottom; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; font-size: 16px; }
thead th { background: var(--primario-suave); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
tr:last-child td, tr:last-child th { border-bottom: 0; }
.si { color: var(--ok); font-weight: 700; }
.no { color: var(--gris); }

.precio-caja { text-align: center; }
.precio { font-family: var(--display); font-size: 56px; font-weight: 600; line-height: 1; margin: 6px 0; font-variant-numeric: tabular-nums; }
.etiqueta { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--reintenta); background: var(--reintenta-suave); border: 2px solid var(--reintenta); border-radius: var(--r-pildora); padding: 1px 10px; }
.pagos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: center; padding: 0; margin: var(--e3) 0 0; }
.pagos li { border: 2px solid var(--linea); border-radius: var(--r-pildora); padding: 4px 14px; font-weight: 600; background: var(--fondo); }

form.compra { display: grid; gap: 10px; margin-top: var(--e2); }
label { font-weight: 700; }
input[type="email"] { min-height: 54px; font: inherit; border: 2px solid var(--linea); border-bottom-width: 4px; border-radius: var(--radio); padding: 0 14px; background: #fff; color: var(--tinta); width: 100%; }
input[type="email"][aria-invalid="true"] { border-color: var(--mal); }
.estado { min-height: 0; border-radius: var(--radio); padding: 0; }
.estado:not(:empty) { padding: 12px 14px; border: 2px solid; }
.estado.error { color: var(--mal); background: var(--mal-suave); border-color: var(--mal); }
.estado.info { color: var(--reintenta); background: var(--reintenta-suave); border-color: var(--reintenta); }

details { background: var(--tarjeta); border: 2px solid var(--linea); border-radius: var(--radio); margin-bottom: var(--e3); box-shadow: 0 3px 0 var(--borde-3d); }
summary { cursor: pointer; min-height: 54px; display: flex; align-items: center; padding: 8px 16px; font-weight: 700; }
details p { padding: 0 16px; }

footer { background: var(--tarjeta); border-top: 2px solid var(--linea); padding: 28px 0 40px; margin-top: var(--e5); }
.aviso { border: 2px solid var(--primario); border-radius: var(--radio); padding: 14px; font-size: 15px; background: var(--fondo); }
footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0; margin: 16px 0 0; }
footer a { display: inline-flex; align-items: center; min-height: 48px; }

.borrador { background: var(--reintenta-suave); color: var(--reintenta); border: 2px solid var(--reintenta); border-radius: var(--radio); padding: 12px 14px; font-weight: 700; margin: 8px 0 20px; }
.pendiente { background: var(--reintenta-suave); color: var(--reintenta); padding: 0 4px; border-radius: 4px; font-weight: 700; }
.documento h2 { margin-top: 28px; font-size: 23px; }
.documento ul { padding-left: 22px; }
.pasos { padding-left: 22px; }
.pasos li { margin-bottom: 8px; }

/* Aparición suave: app.js solo marca las secciones que están FUERA de la pantalla al cargar (sin JS todo se ve y nada visible parpadea). */
.revela.oculta { opacity: 0; transform: translateY(18px); }
.revela.entra { transition: opacity 500ms var(--salida), transform 500ms var(--salida); }

@media (min-width: 720px) {
  h1 { font-size: 50px; }
  h2 { font-size: 36px; }
  section { padding: 64px 0; }
  .hero { padding-top: 36px; }
  .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 40px; }
  .hero-media { max-width: none; margin: 0; }
  .solo-ancho { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .pasos-app { grid-template-columns: repeat(3, 1fr); gap: var(--e6); }
  .paso { grid-template-columns: 1fr; text-align: center; }
  .paso .telefono { width: 220px; margin: 0 auto; }
  .bloques { grid-template-columns: repeat(3, 1fr); }
  .doble { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .mapa-grid { grid-template-columns: 180px 1fr; align-items: start; }
  .mapa-grid > .loop { width: 180px; }
  .bloques-mapa { grid-template-columns: 1fr 1fr; align-items: start; }
}
/* Debajo de 480 px la tabla "Gratis vs. Pack" se vuelve dos tarjetas apiladas (Gratis y Pack) con los mismos datos, solo con CSS:
   la <table> sigue siendo una tabla en el HTML (y en escritorio); aquí cada celda lleva su fila en `data-fila` y los
   encabezados de columna hacen de título de cada tarjeta. Los th de fila quedan recortados (no se ven) porque el nombre ya sale en cada celda.
   Accesibilidad (revisión de Opus, task 011): `display: grid/contents` quita la semántica de tabla en Safari y en Chromium viejos, así
   que el HTML lleva roles ARIA explícitos (table/rowgroup/row/columnheader/rowheader/cell) y el lector sigue anunciando fila y columna;
   los th recortados siguen en el árbol de accesibilidad (se recortan con clip-path, no se ocultan) y el texto de `::before` lleva texto alternativo
   vacío (`/ ""`) para que el nombre de la fila no se lea dos veces. */
@media (max-width: 479.98px) {
  table { display: grid; grid-template-columns: 1fr; background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
  thead, tbody, tr { display: contents; }
  thead th:first-child, tbody th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }
  thead th:nth-child(2), thead th:nth-child(3) { background: var(--primario-suave); border: 2px solid var(--linea); border-radius: var(--radio) var(--radio) 0 0; font-size: 14px; font-weight: 800; }
  thead th:nth-child(2) { order: 1; }
  td:nth-child(2) { order: 2; }
  thead th:nth-child(3) { order: 3; margin-top: 18px; }
  td:nth-child(3) { order: 4; }
  td { display: flex; justify-content: space-between; gap: 14px; background: var(--tarjeta); border: 2px solid var(--linea); border-top: 0; }
  td::before { content: attr(data-fila); content: attr(data-fila) / ""; flex: 1 1 52%; min-width: 0; color: var(--tinta); font-weight: 600; }
  tbody tr:last-child td { border-bottom: 2px solid var(--linea); }
  tbody tr:last-child td:nth-child(2), tbody tr:last-child td:nth-child(3) { border-radius: 0 0 var(--radio) var(--radio); }
  caption { display: block; order: 5; padding: 14px 0 0; }
}
/* Reducir movimiento: nada se mueve (ni el hundimiento animado ni la aparición; app.js no arranca ningún video y deja el poster). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .revela.oculta { opacity: 1; transform: none; }
}