/* =====================================================================
   Camino a Guadalupe · componentes
   Depende de app/tokens.css. Pensado para copiarse tal cual a app/app.css.
   Cada bloque corresponde a una sección de trabajo/design/DESIGN.md.
   ===================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-tinta);
  font: 400 var(--t-ui)/var(--lh-ui) var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--c-seleccion); color: var(--c-tinta); }
:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 3px; border-radius: 6px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--c-titulo); text-wrap: balance; }
a { color: inherit; }
.icono { width: 1.5rem; height: 1.5rem; flex: none; fill: currentColor; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app {
  max-width: var(--ancho-app);
  margin-inline: auto;
  min-height: 100dvh;
  padding-bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom) + var(--e-6));
}

/* Texto */
.titulo { font: 500 var(--t-h1)/var(--lh-titulo) var(--f-titulo); letter-spacing: var(--tracking-titulo); }
.subtitulo { font: 600 var(--t-h3)/1.25 var(--f-lectura); color: var(--c-titulo); }
.lectura { font: 400 var(--t-lectura)/var(--lh-lectura) var(--f-lectura); max-width: var(--medida); text-wrap: pretty; }
.lectura + .lectura { margin-top: var(--e-4); }
.meta { font-size: var(--t-ui-sm); color: var(--c-tinta-2); }
.referencia { color: var(--c-rosa-texto); font-weight: 600; }

.seccion { padding: var(--e-10) var(--margen) 0; }
.seccion__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.seccion__titulo { font: 600 1.5rem/1.2 var(--f-lectura); }
.seccion__nota { font-size: var(--t-ui-sm); color: var(--c-tinta-2); white-space: nowrap; }

/* ---------- Botón ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque); padding: 0 var(--e-6);
  border: 2px solid transparent; border-radius: var(--r-control);
  font: 700 var(--t-ui)/1.2 var(--f-ui); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color var(--d-rapida) var(--ease-salida), transform var(--d-rapida) var(--ease-salida);
}
.boton:active { transform: scale(0.98); }
.boton--bloque { display: flex; width: 100%; min-height: var(--toque-cta); padding-inline: var(--e-4); }
.boton--accion { background: var(--c-accion); color: var(--c-sobre-accion); box-shadow: var(--sombra-1); }
.boton--accion:hover { background: var(--c-accion-hover); }
.boton--borde { background: transparent; color: var(--c-titulo); border-color: currentColor; }
.boton--texto { background: transparent; color: var(--c-rosa-texto); padding-inline: var(--e-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.boton-icono {
  display: inline-grid; place-items: center; gap: 2px;
  min-width: var(--toque); min-height: var(--toque); padding: 0 var(--e-2);
  border: 0; border-radius: var(--r-control); background: transparent; color: inherit;
  font: 700 var(--t-ui-sm)/1 var(--f-ui); text-decoration: none; cursor: pointer;
}
.boton-icono:active { background: rgb(18 59 72 / 0.08); }

/* ---------- Banner de prueba ---------- */
.banner-prueba {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--margen);
  background: var(--c-banner); color: var(--c-tinta);
  font-size: var(--t-ui-sm); line-height: 1.35;
}
.banner-prueba .icono { color: var(--c-oro-texto); }
.banner-prueba__texto { flex: 1; }
.banner-prueba__texto strong { display: block; }
.banner-prueba__tiempo { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.banner-prueba__accion {
  min-height: var(--toque); padding: 0 var(--e-3); border: 0; background: none;
  color: var(--c-rosa-texto); font: 700 var(--t-ui-sm)/1 var(--f-ui);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer; white-space: nowrap;
}

/* ---------- Cabecera del manto (Inicio) ---------- */
.cabecera-manto {
  position: relative;
  padding: var(--e-2) var(--margen) calc(var(--e-12) + var(--e-2));
  background-color: var(--c-manto);
  background-image: radial-gradient(ellipse 42% 38% at 50% 50%, var(--c-resplandor), transparent 72%);
  color: var(--c-sobre-manto);
  text-align: center;
}
.cabecera-manto__barra { display: flex; align-items: center; justify-content: space-between; min-height: var(--toque); }
.marca { font: 600 1.125rem/1 var(--f-titulo); letter-spacing: 0.04em; color: var(--c-oro); }
.cabecera-manto__fecha { margin-top: var(--e-1); font-size: var(--t-ui-sm); color: var(--c-sobre-manto-2); }
.cabecera-manto__cuenta { margin-top: var(--e-2); font-size: var(--t-ui); color: var(--c-sobre-manto); text-wrap: balance; }
.cabecera-manto__cuenta strong { color: var(--c-oro); }

/* El momento firma: 46 estrellas alrededor del nicho */
/* En pantallas bajas (navegador de WhatsApp) el anillo se encoge para que
   el botón "Rezar el día de hoy" quede a la vista sin desplazar. */
.manto-estrellas { position: relative; width: min(100%, 21rem); width: min(100%, 21rem, 36svh); margin: var(--e-2) auto 0; aspect-ratio: 320 / 272; }
/* Base del anillo en HTML (no escala con el SVG): 28 oct · Día N de 46 · 12 dic */
.manto-estrellas__base { display: flex; justify-content: center; align-items: baseline; gap: var(--e-5); margin-top: var(--e-1); font: 700 var(--t-pie)/1.2 var(--f-ui); color: var(--c-sobre-manto-2); }
.manto-estrellas__base strong { color: var(--c-oro); font-size: var(--t-ui); }
.manto-estrellas__anillo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.manto-estrellas .nicho { position: absolute; left: 50%; top: 53%; width: 41%; transform: translate(-50%, -50%); }

.estrella { color: var(--c-estrella-apagada); }
.manto-estrellas .estrella { color: var(--c-estrella-manto-apagada); }
.estrella--encendida, .manto-estrellas .estrella--encendida { color: var(--c-oro); }
.estrellas-fila .estrella--encendida { color: var(--c-estrella); }
.estrella--hoy, .manto-estrellas .estrella--hoy { color: var(--c-sobre-manto); }
.estrella-halo { fill: none; stroke: var(--c-oro); stroke-width: 1.5; opacity: 0.9; }
/* Luz detrás de la estrella encendida en el manto. En SVG un filter: drop-shadow
   sobre <use> se recorta en cuadro, por eso la luz es un círculo aparte. */
.estrella-luz { fill: var(--c-oro); opacity: 0.16; }

.estrella--recien {
  transform-box: fill-box; transform-origin: center;
  animation: encender var(--d-estrella) var(--ease-salida) both;
}
@keyframes encender {
  0%   { transform: scale(0.4); opacity: 0.2; }
  55%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------- Nicho (marco en arco de la imagen principal) ---------- */
.nicho {
  margin: 0; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--r-nicho);
  background: var(--c-superficie-2);
  box-shadow: 0 0 0 1px var(--oro-300), 0 0 0 5px var(--c-manto), 0 0 0 6px rgb(232 197 111 / 0.45), var(--sombra-2);
}
.nicho img { width: 100%; height: 100%; object-fit: cover; }
.nicho--ancho {
  aspect-ratio: 4 / 3;
  border-radius: 50% 50% var(--r-tarjeta) var(--r-tarjeta) / 34% 34% var(--r-tarjeta) var(--r-tarjeta);
  box-shadow: 0 0 0 1px var(--c-linea), 0 0 0 5px var(--c-fondo), 0 0 0 6px var(--c-linea);
}

/* ---------- Tarjeta del día ---------- */
.tarjeta-dia {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto; gap: var(--e-2) var(--e-4);
  margin: calc(-1 * var(--e-12)) var(--margen) 0;
  padding: var(--e-5);
  background: var(--c-superficie);
  border: 1px solid var(--c-linea-suave);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-2);
}
.tarjeta-dia__titulo { grid-column: 1; font: 500 var(--t-h2)/var(--lh-titulo) var(--f-titulo); }
.tarjeta-dia__meta { grid-column: 1; font-size: var(--t-ui-sm); color: var(--c-tinta-2); }
.tarjeta-dia__arte {
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
  width: 4.5rem; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 999px 999px var(--r-pequeno) var(--r-pequeno);
  box-shadow: 0 0 0 1px var(--c-linea);
}
.tarjeta-dia .boton { grid-column: 1 / -1; margin-top: var(--e-2); }
.tarjeta-dia--hecha .boton { background: var(--c-hecho-suave); color: var(--c-hecho); box-shadow: none; }

/* ---------- Tarjeta cerrada (candado + arte desenfocado) ---------- */
.cerrada {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--e-4); align-items: center;
  width: 100%; padding: var(--e-3); text-align: left;
  background: var(--c-superficie); color: var(--c-tinta);
  border: 1px solid var(--c-linea-suave); border-radius: var(--r-tarjeta);
  font: inherit; cursor: pointer;
}
.cerrada__arte { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-pequeno); overflow: hidden; background: var(--c-manto); }
.cerrada__arte img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px) saturate(0.85); transform: scale(1.15); opacity: 0.75; }
.candado {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--c-manto); color: var(--c-oro);
  box-shadow: 0 0 0 1px var(--oro-300), 0 4px 12px rgb(0 0 0 / 0.3);
}
.candado .icono { width: 1.25rem; height: 1.25rem; }
.cerrada__cuando { font-size: var(--t-ui-sm); color: var(--c-tinta-2); }
.cerrada__titulo { display: block; margin-top: 2px; font: 600 1.3125rem/1.2 var(--f-lectura); color: var(--c-titulo); }
.cerrada__nota { display: flex; align-items: center; gap: var(--e-1); margin-top: var(--e-1); font-size: var(--t-ui-sm); font-weight: 700; color: var(--c-rosa-texto); }
.cerrada__nota .icono { width: 1rem; height: 1rem; }

/* ---------- Riel horizontal (capítulos de la historia) ---------- */
.riel {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--e-3);
  margin: 0 calc(-1 * var(--margen)); padding: 0 var(--margen) var(--e-2);
  list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
  scrollbar-width: thin; scrollbar-color: var(--c-linea) transparent;
}
.riel > li { scroll-snap-align: start; }
.capitulo {
  display: block; height: 100%; padding: 0; text-align: left; text-decoration: none;
  background: var(--c-superficie); color: var(--c-tinta);
  border: 1px solid var(--c-linea-suave); border-radius: var(--r-tarjeta); overflow: hidden;
  font: inherit; width: 100%; cursor: pointer;
}
.capitulo__arte { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--c-manto); overflow: hidden; }
.capitulo__arte img { width: 100%; height: 100%; object-fit: cover; }
.capitulo--cerrado .capitulo__arte img { filter: blur(6px) saturate(0.85); transform: scale(1.12); opacity: 0.7; }
.capitulo__texto { display: block; padding: var(--e-3) var(--e-4) var(--e-4); }
.capitulo__num { display: block; font-size: var(--t-ui-sm); color: var(--c-tinta-2); }
.capitulo__titulo { display: block; margin-top: 2px; font: 600 1.3125rem/1.2 var(--f-lectura); color: var(--c-titulo); }
.capitulo__estado { display: flex; align-items: center; gap: var(--e-1); margin-top: var(--e-2); font-size: var(--t-ui-sm); font-weight: 700; color: var(--c-hecho); }
.capitulo--cerrado .capitulo__estado { color: var(--c-rosa-texto); }
.capitulo__estado .icono { width: 1rem; height: 1rem; }

/* ---------- Reproductor grande ---------- */
.reproductor {
  margin: var(--e-10) var(--margen) 0; padding: var(--e-6) var(--e-5) var(--e-5);
  background-color: var(--c-manto);
  /* El resplandor nace arriba del borde: no lava el sello ni el subtítulo (4.5:1). */
  background-image: radial-gradient(ellipse 60% 50% at 50% -10%, var(--c-resplandor), transparent 70%);
  color: var(--c-sobre-manto); border-radius: var(--r-tarjeta); text-align: center;
}
.reproductor__titulo { font: 500 var(--t-h2)/var(--lh-titulo) var(--f-titulo); color: var(--c-sobre-manto); }
.reproductor__autor { margin-top: var(--e-2); color: var(--c-sobre-manto-2); font-size: var(--t-ui); }
.reproductor__sello {
  display: inline-flex; align-items: center; gap: var(--e-1); margin-top: var(--e-3);
  padding: var(--e-1) var(--e-3); border-radius: var(--r-control);
  background: rgb(232 197 111 / 0.16); color: var(--c-oro); font-size: var(--t-ui-sm); font-weight: 700;
}
.reproductor__controles { display: flex; align-items: center; justify-content: center; gap: var(--e-6); margin-top: var(--e-5); }
.reproductor__play {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 0; border-radius: 50%;
  background: var(--c-oro); color: var(--manto-950); cursor: pointer;
  box-shadow: var(--sombra-2);
  transition: transform var(--d-rapida) var(--ease-salida);
}
.reproductor__play:active { transform: scale(0.96); }
.reproductor__play .icono { width: 2rem; height: 2rem; }
.reproductor__saltar {
  display: grid; place-content: center; justify-items: center; gap: 2px; width: 3.5rem; height: 3.5rem; border: 0; border-radius: 50%;
  background: rgb(246 238 219 / 0.1); color: var(--c-sobre-manto); font: 700 var(--t-pie)/1 var(--f-ui); cursor: pointer;
}
.reproductor__saltar .icono { width: 1.25rem; height: 1.25rem; }
.reproductor__barra {
  --avance: 0%;
  width: 100%; height: var(--toque); margin: var(--e-3) 0 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.reproductor__barra::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(var(--c-oro), var(--c-oro)) 0 / var(--avance) 100% no-repeat, rgb(246 238 219 / 0.25);
}
.reproductor__barra::-moz-range-track { height: 6px; border-radius: 3px; background: rgb(246 238 219 / 0.25); }
.reproductor__barra::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--c-oro); }
.reproductor__barra::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--c-sobre-manto); border: 3px solid var(--c-oro); }
.reproductor__barra::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--c-sobre-manto); border: 3px solid var(--c-oro); }
.reproductor__tiempos { display: flex; justify-content: space-between; font-size: var(--t-ui-sm); font-variant-numeric: tabular-nums; color: var(--c-sobre-manto-2); }
.reproductor__mas {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2); width: 100%;
  min-height: var(--toque); margin-top: var(--e-3); border: 0; border-top: 1px solid rgb(246 238 219 / 0.16);
  background: none; color: var(--c-sobre-manto); font: 700 var(--t-ui-sm)/1.3 var(--f-ui); cursor: pointer;
}
.reproductor__mas .icono { width: 1.125rem; height: 1.125rem; color: var(--c-oro); }

/* ---------- Oferta (acceso completo, marco doble del libro) ---------- */
.oferta {
  position: relative; margin: var(--e-10) var(--margen) 0; padding: var(--e-8) var(--e-4) var(--e-6);
  background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--r-pequeno);
}
.oferta::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid var(--c-linea); border-radius: 6px; opacity: 0.55;
}
.oferta__titulo { font: 500 var(--t-h2)/var(--lh-titulo) var(--f-titulo); text-align: center; }
.oferta__precio { display: flex; flex-direction: column; align-items: center; margin-top: var(--e-4); }
.oferta__monto { font: 700 2.5rem/1 var(--f-ui); color: var(--c-titulo); font-variant-numeric: lining-nums; }
.oferta__nota { margin-top: var(--e-2); font-size: var(--t-ui-sm); color: var(--c-tinta-2); }
.oferta__lista { display: grid; gap: var(--e-3); margin: var(--e-6) 0; padding: var(--e-5) 0 0; list-style: none; border-top: 1px solid var(--c-linea-suave); }
.oferta__lista li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--e-3); font: 400 var(--t-lectura)/1.35 var(--f-lectura); }
.oferta__lista .icono { margin-top: 3px; color: var(--c-estrella); }
.oferta__como { margin-top: var(--e-3); font-size: var(--t-ui-sm); color: var(--c-tinta-2); text-align: center; }

/* ---------- Barra inferior ---------- */
.barra {
  position: fixed; z-index: var(--z-barra); left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: var(--ancho-app); margin-inline: auto;
  height: calc(var(--barra-alto) + env(safe-area-inset-bottom));
  padding: 0 var(--e-2) env(safe-area-inset-bottom);
  background: var(--c-superficie); border-top: 1px solid var(--c-linea-suave);
  box-shadow: 0 -6px 20px -12px rgb(18 59 72 / 0.3);
}
.barra__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-1);
  min-height: var(--toque); color: var(--c-tinta-2); text-decoration: none;
  font: 600 var(--t-pie)/1 var(--f-ui);
}
.barra__icono { display: grid; place-items: center; width: 4rem; height: 2rem; border-radius: var(--r-control); transition: background-color var(--d-media) var(--ease-salida); }
.barra__item[aria-current="page"] { color: var(--c-titulo); font-weight: 700; }
.barra__item[aria-current="page"] .barra__icono { background: var(--manto-100); }
@media (prefers-color-scheme: dark) {
  .barra__item[aria-current="page"] .barra__icono { background: var(--manto-700); }
}

/* ---------- Barra superior (pantallas internas) ---------- */
.barra-superior {
  position: sticky; top: 0; z-index: var(--z-banner);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-2);
  min-height: 3.5rem; padding: var(--e-1) var(--e-2);
  background: var(--c-fondo); border-bottom: 1px solid var(--c-linea-suave);
}
.barra-superior__titulo { text-align: center; font: 700 var(--t-ui)/1.2 var(--f-ui); color: var(--c-titulo); }
.barra-superior .boton-icono { grid-auto-flow: column; gap: var(--e-1); color: var(--c-titulo); }

/* ---------- Pantalla del día ---------- */
.dia { padding: var(--e-6) var(--margen) 0; }
.dia__cabeza { margin-top: var(--e-6); }
.dia__fecha { margin-top: var(--e-2); font-size: var(--t-ui-sm); color: var(--c-tinta-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.25rem; margin-top: var(--e-3);
  padding: 0 var(--e-4); border-radius: var(--r-control);
  background: var(--c-hecho-suave); color: var(--c-titulo); font: 700 var(--t-ui-sm)/1 var(--f-ui);
}
.chip .icono { width: 1.125rem; height: 1.125rem; color: var(--c-oro-texto); }
.dia__bloque { margin-top: var(--e-8); }
.dia__bloque > .subtitulo { margin-bottom: var(--e-3); }
.con-maria { margin-top: var(--e-8); padding: var(--e-5); background: var(--c-hecho-suave); border-radius: var(--r-tarjeta); }
.con-maria .subtitulo { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.con-maria .subtitulo .icono { width: 1.25rem; height: 1.25rem; color: var(--c-oro-texto); }

.misterios { margin: 0; padding: 0; list-style: none; counter-reset: misterio; }
.misterio {
  display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: var(--e-3);
  min-height: 4rem; padding: var(--e-3) 0; color: var(--c-tinta); text-decoration: none;
}
.misterios li + li .misterio { border-top: 1px solid var(--c-linea-suave); }
.misterio::before {
  counter-increment: misterio; content: counter(misterio);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--c-titulo); color: var(--c-fondo); font: 600 1.0625rem/1 var(--f-titulo);
}
.misterio__titulo { display: block; font: 600 var(--t-ui)/1.3 var(--f-ui); }
.misterio__ref { display: block; font-size: var(--t-ui-sm); color: var(--c-tinta-2); }
.misterio > .icono { color: var(--c-tinta-3); }

.campo { display: grid; gap: var(--e-2); }
.campo__control {
  width: 100%; min-height: 7.5rem; padding: var(--e-3) var(--e-4); resize: vertical;
  font: 400 var(--t-lectura)/1.5 var(--f-lectura); color: var(--c-tinta);
  background: var(--c-superficie); border: 1.5px solid var(--c-borde-control); border-radius: var(--r-pequeno);
}
.campo__control::placeholder { color: var(--c-tinta-3); }
.campo__control:focus-visible { outline-offset: 1px; }
.campo__ayuda { font-size: var(--t-ui-sm); color: var(--c-tinta-2); }

/* Botón grande "Recé mi Rosario": aria-pressed hace el estado */
.marcar {
  display: flex; align-items: center; gap: var(--e-4); width: 100%; min-height: 4.5rem; margin-top: var(--e-8);
  padding: var(--e-3) var(--e-5); text-align: left;
  background: var(--c-superficie); color: var(--c-titulo);
  border: 2px solid var(--c-linea); border-radius: var(--r-tarjeta);
  font: 700 1.25rem/1.25 var(--f-ui); cursor: pointer;
  transition: background-color var(--d-media) var(--ease-salida), color var(--d-media) var(--ease-salida);
}
.marcar .icono { width: 2.25rem; height: 2.25rem; color: var(--c-estrella); }
.marcar__extra { display: block; font: 400 var(--t-ui-sm)/1.3 var(--f-ui); color: var(--c-tinta-2); }
.marcar[aria-pressed="true"] { background: var(--c-manto); color: var(--c-sobre-manto); border-color: var(--c-manto); }
.marcar[aria-pressed="true"] .icono { color: var(--c-oro); filter: var(--brillo-estrella); }
.marcar[aria-pressed="true"] .marcar__extra { color: var(--c-sobre-manto-2); }

.estrellas-fila { margin-top: var(--e-6); }
.estrellas-fila__cabeza { display: flex; justify-content: space-between; font-size: var(--t-ui-sm); color: var(--c-tinta-2); }
.estrellas-fila__cabeza strong { color: var(--c-titulo); font-variant-numeric: tabular-nums; }
.estrellas-fila__svg { display: block; width: 100%; height: auto; margin-top: var(--e-2); }

/* ---------- Hoja de desbloqueo (<dialog>) ---------- */
.hoja {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-hoja);
  width: 100%; max-width: var(--ancho-app); max-height: 92dvh; margin: 0 auto; padding: 0;
  border: 0; border-radius: var(--r-hoja); overflow: auto;
  background: var(--c-superficie); color: var(--c-tinta); box-shadow: var(--sombra-hoja);
  outline: none; /* el foco va al botón Cerrar, no al contenedor */
}
.hoja[open] { animation: hoja-sube var(--d-media) var(--ease-salida); }
.hoja::backdrop { background: var(--c-velo); }
@keyframes hoja-sube { from { transform: translateY(100%); } to { transform: none; } }
.hoja__arte {
  position: relative; display: grid; place-items: center; height: 10rem;
  background: var(--c-manto); overflow: hidden; border-radius: var(--r-hoja);
}
.hoja__arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(4px); transform: scale(1.1); opacity: 0.8; }
.hoja__arte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(18 59 72 / 0.15), rgb(18 59 72 / 0.55)); }
.hoja__arte > :not(img) { z-index: 1; }
.hoja__arte .candado { position: relative; left: auto; top: auto; transform: none; width: 3.5rem; height: 3.5rem; }
.hoja__arte .candado .icono { width: 1.75rem; height: 1.75rem; }
.hoja__cerrar { position: absolute; top: var(--e-2); right: var(--e-2); color: var(--c-sobre-manto); background: rgb(12 42 53 / 0.78); }
/* El X vive en una barra de alto 0, fija arriba de la hoja: sigue a la vista al bajar. */
.hoja__barra { position: sticky; top: 0; z-index: 2; height: 0; }
.hoja__cuerpo { padding: var(--e-6) var(--margen) calc(var(--e-6) + env(safe-area-inset-bottom)); }
.hoja__titulo { font: 500 var(--t-h2)/var(--lh-titulo) var(--f-titulo); text-align: center; }
.hoja__gancho { margin-top: var(--e-3); text-align: center; }
.hoja__precio { display: flex; align-items: baseline; justify-content: center; gap: var(--e-2); margin-top: var(--e-5); }
.hoja__precio .oferta__monto { font-size: 2rem; }
.hoja__lista { display: grid; gap: var(--e-2); margin: var(--e-5) 0; padding: 0; list-style: none; }
.hoja__lista li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--e-3); font-size: var(--t-ui); }
.hoja__lista .icono { width: 1.25rem; height: 1.25rem; margin-top: 2px; color: var(--c-estrella); }
.hoja__como { margin-top: var(--e-3); font-size: var(--t-ui-sm); color: var(--c-tinta-2); text-align: center; }
.hoja__ahora-no { display: flex; margin: var(--e-2) auto 0; color: var(--c-tinta-2); }

/* ---------- Visor de oración ---------- */
.visor { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--c-fondo); }
.visor__cuerpo { padding: var(--e-8) var(--margen); }
.visor__paso { font-size: var(--t-ui-sm); color: var(--c-tinta-2); text-align: center; }
.visor__titulo { margin-top: var(--e-2); font: 500 var(--t-h1)/var(--lh-titulo) var(--f-titulo); text-align: center; }
.visor__ref { margin-top: var(--e-2); text-align: center; }
.visor__texto { margin: var(--e-6) auto 0; font: 400 var(--t-oracion)/1.65 var(--f-lectura); max-width: var(--medida); white-space: pre-line; text-wrap: pretty; }
.visor__texto + .visor__texto { margin-top: var(--e-5); }
/* Cuentas de la decena: solo muestran; se avanza con el botón grande del pie */
.visor__decena { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-6); }
.visor__cuenta { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--c-linea); }
.visor__cuenta[data-hecha] { background: var(--c-estrella); border-color: var(--c-estrella); }
.visor__pie {
  position: sticky; bottom: 0;
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-3);
  padding: var(--e-3) var(--margen) calc(var(--e-3) + env(safe-area-inset-bottom));
  background: var(--c-fondo); border-top: 1px solid var(--c-linea-suave);
}
.visor__pie .boton { min-height: var(--toque-cta); padding-inline: var(--e-4); white-space: nowrap; }
.visor__cuenta-texto { margin-top: var(--e-2); text-align: center; font-size: var(--t-ui-sm); color: var(--c-tinta-2); }

@media (prefers-reduced-motion: reduce) {
  .estrella--recien, .hoja[open] { animation: none; }
}

/* =====================================================================
   Agregados del constructor (pantallas del app real).
   Mismas reglas del DESIGN.md: tokens semánticos, nada menor a 16px,
   alvos de 48px, rosa sólo en acción, oro como luz.
   ===================================================================== */
.app { min-height: 100vh; min-height: 100dvh; }
#vista:focus { outline: none; }
body.sin-barra .barra { display: none; }
body.sin-barra .app { padding-bottom: 0; }
dialog:not([open]) { display: none; }
.hoja { max-height: 92vh; max-height: 92dvh; }
.velo { position: fixed; inset: 0; z-index: var(--z-velo); background: var(--c-velo); }
.centrado { text-align: center; }
.pre { white-space: pre-line; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Inicio: líneas extra de la cabecera */
.cabecera-manto__linea { margin-top: var(--e-1); font-size: var(--t-ui-sm); color: var(--c-oro); font-weight: 700; }
.tarjeta-dia__nota { grid-column: 1 / -1; font-size: var(--t-ui-sm); line-height: 1.4; color: var(--c-tinta-2); }
.tarjeta-dia--fin { grid-template-columns: 1fr; gap: var(--e-3); }
.tarjeta-dia--fin .lectura { font-size: var(--t-ui); font-family: var(--f-ui); line-height: 1.5; }
.tarjeta-dia--fin .boton { margin-top: var(--e-3); }

/* Plan de hoy (3 pasos con marca) */
.plan { margin: var(--e-6) var(--margen) 0; padding: var(--e-4) var(--e-5); background: var(--c-superficie); border: 1px solid var(--c-linea-suave); border-radius: var(--r-tarjeta); }
.plan__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); }
.plan__titulo { font: 600 var(--t-h3)/1.25 var(--f-lectura); color: var(--c-titulo); }
.plan__tiempo { font-size: var(--t-ui-sm); color: var(--c-tinta-2); white-space: nowrap; }
.plan__pasos { list-style: none; margin: var(--e-2) 0 0; padding: 0; }
.plan__pasos li + li { border-top: 1px solid var(--c-linea-suave); }
.plan__paso { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: var(--e-3); min-height: 3.25rem; color: var(--c-tinta); text-decoration: none; font-size: var(--t-ui); line-height: 1.3; }
.plan__paso > .icono { color: var(--c-tinta-3); width: 1.25rem; height: 1.25rem; }
.plan__marca { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 2px solid var(--c-borde-control); font: 700 var(--t-pie)/1 var(--f-ui); color: var(--c-tinta-2); }
.plan__paso--hecho .plan__marca { border-color: transparent; color: var(--c-hecho); }
.plan__paso--hecho .plan__marca .icono { width: 1.875rem; height: 1.875rem; }
.plan__paso--hecho .plan__texto { color: var(--c-tinta-2); }
.plan__manana { margin-top: var(--e-2); padding-top: var(--e-3); border-top: 1px solid var(--c-linea-suave); font-size: var(--t-ui-sm); color: var(--c-tinta-2); }

/* Tarjeta cerrada: línea de adelanto (curiosidad honesta) y variante abierta */
.cerrada__teaser { display: block; margin-top: 2px; font-size: var(--t-ui-sm); line-height: 1.35; color: var(--c-tinta-2); } /* entero: el adelanto es el gancho, no se corta */
.cerrada--abierta { text-decoration: none; }
.cerrada--abierta .cerrada__arte img { filter: none; transform: none; opacity: 1; }
.cerrada--abierta .cerrada__nota { color: var(--c-hecho); }
.cerrada--fecha .cerrada__nota { color: var(--c-tinta-2); }
.cerrada--fecha .cerrada__arte img { filter: saturate(0.6); transform: none; opacity: 0.7; }
.tarjetas { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }

/* Riel de capítulos en lista vertical y mosaico de misterios */
.capitulos-lista { display: grid; gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.mosaico .capitulo__texto { padding: var(--e-2) var(--e-3) var(--e-3); }
.mosaico .capitulo__titulo { font-size: 1.125rem; }
.mosaico .capitulo__estado { font-size: var(--t-pie); }

/* Páginas internas */
.pagina { padding: var(--e-6) var(--margen) 0; }
.pagina__cabeza { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--e-2); margin-bottom: var(--e-6); }
.pagina__titulo { font: 500 var(--t-h1)/var(--lh-titulo) var(--f-titulo); letter-spacing: var(--tracking-titulo); color: var(--c-titulo); white-space: pre-line; }
.pagina__sub { grid-column: 1 / -1; color: var(--c-tinta-2); font-size: var(--t-ui); }
.pagina__cabeza .boton-icono { color: var(--c-titulo); margin-top: -0.25rem; }
.pagina > .nicho--ancho { margin-bottom: var(--e-6); }
.pagina h1.titulo { white-space: pre-line; }
.bloque { margin-top: var(--e-8); }
.bloque > .subtitulo, .bloque > h2 { margin-bottom: var(--e-3); }
.bloque__titulo { font: 500 var(--t-h2)/var(--lh-titulo) var(--f-titulo); color: var(--c-titulo); white-space: pre-line; }
.caja { margin-top: var(--e-6); padding: var(--e-5); background: var(--c-hecho-suave); border-radius: var(--r-tarjeta); }
.caja__titulo { margin-bottom: var(--e-2); font: 600 var(--t-h3)/1.25 var(--f-lectura); color: var(--c-titulo); }
.caja .lectura strong { color: var(--c-titulo); }
.nota { margin-top: var(--e-4); font-size: var(--t-ui-sm); line-height: 1.45; color: var(--c-tinta-2); max-width: var(--medida); }
.texto-ora { font: 400 var(--t-oracion)/1.65 var(--f-lectura); white-space: pre-line; max-width: var(--medida); text-wrap: pretty; }
.texto-ora + .texto-ora { margin-top: var(--e-4); }
.versiculo { margin-top: var(--e-4); font: 400 var(--t-lectura)/1.5 var(--f-lectura); }
.versiculo b { color: var(--c-rosa-texto); font-family: var(--f-ui); font-size: var(--t-ui-sm); margin-right: var(--e-1); }
.versiculo + .versiculo { margin-top: var(--e-1); }
.chips { display: flex; flex-wrap: wrap; gap: 0 var(--e-2); }
.chip--rosa { background: var(--c-rosa-suave); color: var(--c-rosa-texto); }
.chip--rosa .icono { color: inherit; }
.chip--oro { background: var(--c-banner); color: var(--c-tinta); }
.lectura + .boton, .lectura + .boton--texto { margin-top: var(--e-3); }
.dia__bloque .boton--bloque { margin-top: var(--e-5); }
.dia__bloque .boton--texto, .bloque .boton--texto { margin-top: var(--e-2); }
.dia__bloque .meta { margin-top: var(--e-3); }
.pasar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); margin-top: var(--e-8); }
.pasar .boton { min-height: var(--toque-cta); padding-inline: var(--e-3); }
.pasar .boton:only-child { grid-column: 1 / -1; }
.siguiente { margin-top: var(--e-8); }

/* Pantalla con candado (enlace directo a algo cerrado) */
.nicho--cerrado { position: relative; }
.nicho--cerrado img { filter: blur(8px) saturate(0.85); transform: scale(1.15); opacity: 0.8; }
.nicho--cerrado .candado { width: 4rem; height: 4rem; }
.nicho--cerrado .candado .icono { width: 1.75rem; height: 1.75rem; }
.pagina--cerrada { text-align: center; }
.pagina--cerrada .titulo { margin-top: var(--e-2); }
.pagina--cerrada .lectura { margin: var(--e-4) auto 0; }
.pagina--cerrada .cerrada__nota { justify-content: center; margin: var(--e-4) 0 var(--e-5); }
.pagina--cerrada .boton--texto { margin-top: var(--e-3); }

/* Filas de enlace */
.filas { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.fila {
  display: grid; grid-template-columns: 3.25rem 1fr auto; align-items: center; gap: var(--e-4);
  width: 100%; min-height: 4.5rem; padding: var(--e-3); text-align: left;
  background: var(--c-superficie); color: var(--c-tinta); text-decoration: none; font: inherit; cursor: pointer;
  border: 1px solid var(--c-linea-suave); border-radius: var(--r-tarjeta);
}
.fila__icono { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--c-hecho-suave); color: var(--c-titulo); overflow: hidden; }
.fila__icono img { width: 100%; height: 100%; object-fit: cover; }
.fila__titulo { display: block; font: 600 1.25rem/1.2 var(--f-lectura); color: var(--c-titulo); }
.fila__sub { display: block; margin-top: 2px; font-size: var(--t-ui-sm); line-height: 1.35; color: var(--c-tinta-2); }
.fila > .icono { color: var(--c-tinta-3); }
.fila--cerrada > span:last-child .icono { color: var(--c-rosa-texto); width: 1.25rem; height: 1.25rem; }
.fila--mateo { background: var(--c-manto); border-color: var(--c-manto); }
.fila--mateo .fila__titulo { color: var(--c-sobre-manto); }
.fila--mateo .fila__sub { color: var(--c-sobre-manto-2); }
.fila--mateo .fila__icono { background: rgb(232 197 111 / 0.18); color: var(--c-oro); }
.fila--mateo > .icono { color: var(--c-oro); }

/* Calendario de los 46 días */
.calendario { display: grid; gap: var(--e-2); margin: var(--e-6) 0 0; padding: 0; list-style: none; }
.cal {
  display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: var(--e-3);
  min-height: 4.25rem; padding: var(--e-2) var(--e-3); text-decoration: none; color: var(--c-tinta);
  background: var(--c-superficie); border: 1px solid var(--c-linea-suave); border-radius: var(--r-pequeno);
}
.cal__num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-hecho-suave); color: var(--c-titulo); font: 700 var(--t-pie)/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.cal__fecha { display: block; font-size: var(--t-pie); color: var(--c-tinta-2); }
.cal__tema { display: block; font: 600 1.1875rem/1.25 var(--f-lectura); color: var(--c-titulo); }
.cal__extra { display: block; font-size: var(--t-pie); font-weight: 700; color: var(--c-rosa-texto); }
.cal__estado .icono { color: var(--c-tinta-3); }
.cal--rezado .cal__estado .icono { color: var(--c-estrella); width: 1.75rem; height: 1.75rem; }
.cal--cerrado .cal__estado .icono { color: var(--c-rosa-texto); width: 1.25rem; height: 1.25rem; }
.cal--hoy { border: 2px solid var(--c-oro-texto); }
.cal--hoy .cal__num { background: var(--c-manto); color: var(--c-oro); }
.cal--cerrado .cal__tema { color: var(--c-tinta); }

/* Reproductor: opciones (misterios, versión, velocidad) y estado */
.reproductor .lectura { color: var(--c-sobre-manto); }
.reproductor__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); margin-top: var(--e-5); }
.opcion {
  min-height: var(--toque); padding: var(--e-1) var(--e-3); border-radius: var(--r-control);
  border: 1.5px solid rgb(246 238 219 / 0.35); background: transparent; color: var(--c-sobre-manto);
  font: 700 var(--t-ui-sm)/1.2 var(--f-ui); cursor: pointer;
}
.opcion[aria-pressed="true"] { background: var(--c-oro); color: var(--manto-950); border-color: var(--c-oro); }
.reproductor__velocidad { margin-top: var(--e-2); }
.reproductor__msg { margin-top: var(--e-3); font-size: var(--t-ui-sm); line-height: 1.4; color: var(--c-sobre-manto-2); }
.reproductor__msg:empty { display: none; }
.reproductor__play[aria-busy="true"] { opacity: 0.6; }
.reproductor__play--cerrado { background: rgb(246 238 219 / 0.14); color: var(--c-oro); }
.reproductor__grupo { margin-top: var(--e-2); font-size: var(--t-ui); color: var(--c-sobre-manto); }
.reproductor .boton--accion { margin-top: var(--e-4); }
.reproductor .boton--borde { color: var(--c-sobre-manto); margin-top: var(--e-3); }

/* Hoja: piezas extra */
.hoja__arte--abierta { height: 13rem; }
.hoja__arte--abierta img { filter: none; transform: none; opacity: 1; object-position: center 22%; }
.hoja__arte--abierta::after { background: linear-gradient(rgb(18 59 72 / 0) 55%, rgb(18 59 72 / 0.35)); }
.hoja__item { margin-top: var(--e-4); text-align: center; font: 600 var(--t-h3)/1.25 var(--f-lectura); color: var(--c-titulo); }
.hoja__item + .hoja__gancho { margin-top: var(--e-1); }
.hoja__tiempo { display: flex; align-items: flex-start; justify-content: center; gap: var(--e-2); margin-top: var(--e-4); padding: var(--e-3); border-radius: var(--r-pequeno); background: var(--c-banner); font-size: var(--t-ui-sm); line-height: 1.4; }
.hoja__tiempo .icono { width: 1.25rem; height: 1.25rem; color: var(--c-oro-texto); }
.hoja__incluye { margin-top: var(--e-5); font-weight: 700; color: var(--c-titulo); }
.hoja__incluye + .hoja__lista, .hoja__incluye + .lista-check { margin-top: var(--e-3); }
.hoja__etiqueta { display: flex; justify-content: center; }
.hoja__etiqueta .chip { margin-top: 0; margin-bottom: var(--e-3); }
.hoja__texto { margin-top: var(--e-4); }
.hoja .boton--bloque { margin-top: var(--e-5); }
.hoja .boton--bloque + .boton--bloque { margin-top: var(--e-3); }
.hoja .boton--texto:not(.hoja__ahora-no) { display: flex; margin: var(--e-2) auto 0; }
.oferta__monto small { font-size: 1.25rem; font-weight: 600; color: var(--c-tinta-2); }
.firma { margin-top: var(--e-4); text-align: center; font: italic 400 var(--t-lectura)/1.4 var(--f-lectura); color: var(--c-tinta-2); }

/* Listas */
.lista-check { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.lista-check li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--e-3); font: 400 var(--t-lectura)/1.4 var(--f-lectura); }
.lista-check .icono { margin-top: 3px; color: var(--c-hecho); }
.pasos { display: grid; gap: var(--e-4); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos > li { position: relative; padding-left: 3rem; min-height: 2.25rem; }
.pasos > li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--c-titulo); color: var(--c-fondo); font: 600 1.0625rem/1 var(--f-titulo);
}
.pasos__titulo { display: block; font: 600 var(--t-h3)/1.25 var(--f-lectura); color: var(--c-titulo); }
.pasos .lectura { margin-top: var(--e-1); }
.pasos--chicos { gap: var(--e-3); margin-top: var(--e-3); text-align: left; }
.pasos--chicos > li { font-size: var(--t-ui); line-height: 1.4; padding-top: 0.3rem; }
.oferta .pasos--chicos { margin-bottom: var(--e-2); }
.oferta__sub { margin: var(--e-3) auto 0; text-align: center; font-size: var(--t-ui); font-family: var(--f-ui); line-height: 1.45; color: var(--c-tinta-2); }
.oferta__incluye { margin-top: var(--e-6); font-weight: 700; color: var(--c-titulo); }
.oferta__incluye + .oferta__lista { margin-top: var(--e-3); }
.oferta__tiempo { margin: 0 0 var(--e-4); padding: var(--e-3); border-radius: var(--r-pequeno); background: var(--c-banner); font-size: var(--t-ui-sm); text-align: center; }

/* Letanía */
.letania { margin: var(--e-4) 0 0; padding: 0; list-style: none; }
.letania li { padding: var(--e-2) 0; border-top: 1px solid var(--c-linea-suave); font: 400 var(--t-lectura)/1.45 var(--f-lectura); }
.letania li:first-child { border-top: 0; }
.letania em { display: block; color: var(--c-rosa-texto); font-style: italic; }
.letania--invocaciones li { padding: var(--e-1) 0; }
.respuesta-fija { margin-top: var(--e-4); padding: var(--e-4); border-radius: var(--r-pequeno); background: var(--c-rosa-suave); font: 400 var(--t-lectura)/1.4 var(--f-lectura); }
.respuesta-fija strong { color: var(--c-rosa-texto); }

/* Símbolos */
.simbolo { display: grid; grid-template-columns: 1fr; gap: var(--e-3); }
.simbolo__svg { display: grid; place-items: center; padding: var(--e-3); border-radius: var(--r-tarjeta); background: var(--papel-100); border: 1px solid var(--c-linea-suave); }
.simbolo__svg svg { width: 7rem; height: auto; }
.nicho--retrato { width: min(70%, 15rem); margin: 0 auto var(--e-6); }

/* Detalles plegables */
.detalle { margin-top: var(--e-4); border-top: 1px solid var(--c-linea-suave); }
.detalle > summary {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--toque);
  color: var(--c-rosa-texto); font-weight: 700; cursor: pointer; list-style: none;
  text-decoration: underline; text-underline-offset: 4px;
}
.detalle > summary::-webkit-details-marker { display: none; }
.detalle[open] > summary { text-decoration: none; }
.detalle .campo { margin-top: var(--e-2); text-align: left; }
.campo__control--linea { min-height: var(--toque); resize: none; font: 400 var(--t-ui)/1.3 var(--f-ui); }
.campo .boton--borde { justify-self: start; }

/* Más */
.acceso-estado { padding: var(--e-5); border-radius: var(--r-tarjeta); background: var(--c-manto); color: var(--c-sobre-manto); }
.acceso-estado__titulo { font: 600 var(--t-h3)/1.25 var(--f-lectura); color: var(--c-sobre-manto); }
.acceso-estado p + p { margin-top: var(--e-2); }
.acceso-estado .meta { color: var(--c-sobre-manto-2); }
.acceso-estado .boton { margin-top: var(--e-4); }
.instalar-pasos { margin-top: var(--e-3); }
.botones { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.fuentes { margin: var(--e-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); }
.fuentes a { color: var(--c-rosa-texto); font-weight: 700; text-underline-offset: 3px; }
.fuentes li { font-size: var(--t-ui-sm); line-height: 1.45; }

/* Visor: botón siguiente puede tener dos líneas */
.visor__pie .boton--accion { white-space: normal; line-height: 1.2; }
.visor__fin { text-align: center; }
.visor__fin > .icono { width: 4rem; height: 4rem; margin: 0 auto; color: var(--c-estrella); filter: var(--brillo-estrella); }
.visor__fin .marcar { text-align: left; }

/* Aviso (toast) */
.aviso {
  position: fixed; z-index: var(--z-aviso); left: 50%; transform: translateX(-50%);
  bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom) + var(--e-3));
  width: min(calc(100% - 2 * var(--margen)), 28rem); margin: 0; padding: var(--e-3) var(--e-4);
  border-radius: var(--r-tarjeta); background: var(--c-manto); color: var(--c-sobre-manto);
  font: 600 var(--t-ui)/1.35 var(--f-ui); text-align: center; box-shadow: var(--sombra-2);
}
body.sin-barra .aviso { bottom: calc(6rem + env(safe-area-inset-bottom)); }
@media (prefers-color-scheme: dark) {
  .aviso { background: var(--c-superficie); color: var(--c-tinta); box-shadow: 0 0 0 1px var(--c-linea); }
  .simbolo__svg { background: var(--papel-100); }
}

/* Barra con 5 pestañas (Hoy, Días, Rezar, Historia, Más) */
.barra { grid-template-columns: repeat(5, 1fr); padding-inline: var(--e-1); }
.barra__icono { width: 3.5rem; }
.hoja__cerrar:focus-visible { outline-color: var(--c-oro); }
.acceso-estado .boton--borde { color: var(--c-sobre-manto); }
.estrellas-fila .estrella--hoy { color: var(--c-oro-texto); }
.estrellas-fila .estrella-halo { stroke: var(--c-oro-texto); }
.seccion__cabeza { flex-wrap: wrap; }
.hoja__arte--bienvenida { height: 9.5rem; }
.hoja__arte--bienvenida img { object-position: center 18%; }
.hoja .lista-check li { font: 400 var(--t-ui)/1.4 var(--f-ui); }
.tarjeta-dia__nota { margin-top: var(--e-1); }
.opcion__sub { display: block; font-weight: 600; font-size: var(--t-pie); opacity: 0.85; }
/* Celulares bajos (navegador de WhatsApp): el anillo cede un poco para que el botón del día quede a la vista */
@media (max-height: 760px) {
  .manto-estrellas { width: min(100%, 21rem, 33svh); }
  .cabecera-manto__fecha { margin-top: 0; }
}

/* =====================================================================
   Correcciones de la revisión (25/10/2026)
   ===================================================================== */
/* La Virgen en caja apaisada o cuadrada: el recorte deja rostro, manos y resplandor. */
.nicho--ancho img[src*="guadalupe"], .capitulo__arte img[src*="guadalupe"], .cerrada__arte img[src*="guadalupe"] { object-position: 50% 8%; }
/* Hoja con candado al centro: a 8% el rostro queda detrás del candado; a 18% queda arriba de él, con el resplandor. */
.hoja__arte:not(.hoja__arte--abierta) img[src*="guadalupe"] { object-position: 50% 18%; }
/* La franja de rosas (3:1) en cuadro: se ve el ramo de la izquierda, no el centro vacío. */
.cerrada__arte img[src*="rosas_estrellas"] { object-position: 0 50%; }

/* iPhone con muesca: nada debajo del reloj (por si el app se dibuja bajo la barra de estado). */
.barra-superior { padding-top: calc(var(--e-1) + env(safe-area-inset-top)); }
#vista > .banner-prueba:first-child { padding-top: calc(var(--e-2) + env(safe-area-inset-top)); }
#vista > .cabecera-manto:first-child { padding-top: calc(var(--e-2) + env(safe-area-inset-top)); }
.hoja { max-height: calc(92dvh - env(safe-area-inset-top)); }

/* Hoja: el foco va al título (sin anillo); el anillo del X no se corta en el borde. */
.hoja__titulo:focus { outline: none; }
.hoja__cerrar:focus-visible { outline-offset: 1px; }
/* Foco visible sobre el manto: oro (7:1), no rosa (1.9:1). */
.cabecera-manto, .reproductor, .fila--mateo, .acceso-estado, .hoja__barra, .mini-audio { --c-foco: var(--oro-300); }

/* Tarjeta "Tu prueba terminó": botones de texto sin vacíos extra. */
.tarjeta-dia--fin .boton--texto { margin-top: 0; }
.tarjeta-dia--fin { padding-inline: var(--e-4); }
.tarjeta-dia--fin .boton--bloque { padding-inline: var(--e-3); } /* "Desbloquear por WhatsApp" en una línea a 360 px */

/* Bienvenida en celulares bajos (navegador de WhatsApp): la arte cede para que el botón se vea. */
@media (max-height: 760px) {
  .hoja__arte--bienvenida { height: 6.5rem; }
}

/* Capítulos (<button> estirado): el contenido arriba, sin franja de papel sobre la arte. */
.capitulo { display: flex; flex-direction: column; justify-content: flex-start; }

/* Pasos del Rosario: respiro después del botón. */
.pasos.bloque { margin-top: var(--e-8); }

/* Muestra de Mateo dentro del Día 1 (prueba). */
.dia .reproductor { margin-inline: 0; }
.reproductor__aparte, .reproductor__guardar { display: flex; margin: var(--e-2) auto 0; color: var(--c-oro); }
.reproductor__guardar[disabled] { opacity: 1; cursor: default; text-decoration: none; color: var(--c-sobre-manto-2); }

/* Mini control: el audio suena y la pantalla no tiene su reproductor. */
.mini-audio {
  position: fixed; z-index: var(--z-aviso); right: var(--margen);
  bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom) + var(--e-3));
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--toque); padding: 0 var(--e-5) 0 var(--e-4);
  border: 0; border-radius: var(--r-control); background: var(--c-manto); color: var(--c-sobre-manto);
  font: 700 var(--t-ui)/1.2 var(--f-ui); box-shadow: var(--sombra-2); cursor: pointer;
}
.mini-audio .icono { color: var(--c-oro); }
body.sin-barra .mini-audio { bottom: calc(6rem + env(safe-area-inset-bottom)); }

/* Letra grande del sistema, zoom o pantallas de 240-320 px: nada se sale por la derecha. */
body { overflow-wrap: break-word; }
/* Barra: crece con la letra del sistema; rótulo con tope de 20 px, en una línea y sin partir la palabra. */
.barra { grid-template-columns: repeat(5, minmax(0, 1fr)); height: auto; min-height: calc(var(--barra-alto) + env(safe-area-inset-bottom)); }
.barra__item { min-width: 0; padding-block: var(--e-1); text-align: center; font-size: min(1rem, 20px); overflow-wrap: normal; white-space: nowrap; }
.barra__icono { width: 100%; max-width: 3.5rem; }
/* Debajo de 22em (letra del sistema grande en el celular): sólo el ícono; el nombre sigue para el lector de pantalla. */
@media (max-width: 22em) {
  .barra__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.banner-prueba { flex-wrap: wrap; }
.banner-prueba__texto { flex: 1 1 9rem; min-width: 0; }
.banner-prueba__accion { white-space: normal; }
.tarjeta-dia { grid-template-columns: minmax(0, 1fr) auto; }
.tarjeta-dia--fin { grid-template-columns: minmax(0, 1fr); }
.barra-superior { grid-template-columns: auto minmax(0, 1fr) auto; }
.barra-superior__titulo { min-width: 0; }
.pagina__cabeza { grid-template-columns: minmax(0, 1fr) auto; }
.cerrada { grid-template-columns: 5.5rem minmax(0, 1fr); }
.fila { grid-template-columns: 3.25rem minmax(0, 1fr) auto; }
.cal { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
.misterio { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
.plan__paso { grid-template-columns: 2rem minmax(0, 1fr) auto; }
.plan__cabeza { flex-wrap: wrap; }
.seccion__nota { white-space: normal; }
.boton { min-width: 0; }
.visor__pie { grid-template-columns: auto minmax(0, 1fr); }
.visor__pie .boton { white-space: normal; min-width: 0; padding-inline: var(--e-3); }
/* "Atrás" sólo con la flecha en pantallas estrechas (el nombre sigue en aria-label). */
@media (max-width: 24.9rem) {
  .visor__atras-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .visor__atras { min-width: var(--toque-cta); }
}
/* En em: con la letra del sistema al doble, estas reglas se activan aunque la pantalla mida 360 px. */
@media (max-width: 20em) {
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; }
  .mosaico { grid-template-columns: minmax(0, 1fr); }
  .reproductor__controles { gap: var(--e-2); }
  .cerrada { grid-template-columns: minmax(0, 1fr); }
  .fila { grid-template-columns: minmax(0, 1fr) auto; }
  .fila__icono { display: none; }
  .tarjeta-dia__arte { display: none; }
}