/* Caná — estilos de la marca.
   Colores: azul Schoenstatt #010066 (el agua, el Santuario), amarillo #FFCC00 (el vino, la gracia)
   y blanco cálido #F3F2F2 (fondos). Tipografías: Archivo para la interfaz (es la letra del logo)
   y Literata para leer y rezar. Tamaños en rem para respetar la letra elegida en el teléfono.
   Reglas de la marca: el amarillo nunca es texto sobre fondo claro; itálica solo en la Sabiduría
   (la cita del día) y en las respuestas de las oraciones. */

@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap;
  src: url("../fonts/archivo-latin-400-normal.9246d621d7f0.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap;
  src: url("../fonts/archivo-latin-600-normal.7ab89eedd1b0.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap;
  src: url("../fonts/archivo-latin-800-normal.fbd292f0a665.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 200 900; font-display: swap;
  src: url("../fonts/literata-latin-opsz-normal.c0473b84f21c.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 200 900; font-style: italic; font-display: swap;
  src: url("../fonts/literata-latin-opsz-italic.b62406718c0e.woff2") format("woff2"); }

:root {
  --azul: #010066;          /* fondos: cabecera, botones, tarjetas destacadas */
  --azul-texto: #010066;    /* textos, íconos y bordes azules (en oscuro, más claro) */
  --sobre-amarillo: #010066; /* lo que va sobre amarillo: siempre azul marino */
  --azul-hover: #16168c;
  --azul-tinte: #e9e9f5;
  --azul-linea: #d3d3ea;
  --amarillo: #ffcc00;
  --amarillo-tinte: #fff7d6;
  --amarillo-linea: #f1de8e;
  --fondo: #f3f2f2;
  --superficie: #ffffff;
  --tinta: #201e1d;
  --tinta-2: #55504d;
  --tinta-3: #6b6663;
  --linea: #e4e1df;
  --linea-fuerte: #8f8a87;
  --sobre-azul: #f3f2f2;
  --sobre-azul-2: #c7c6e6;
  --error: #b42318;
  --error-tinte: #fdecea;
  --exito: #1f6e43;
  --exito-tinte: #e6f2ea;
  --radio: 16px;
  --radio-chico: 12px;
  --sombra: 0 1px 2px rgba(32, 30, 29, .05), 0 8px 24px -16px rgba(1, 0, 102, .22);
  --nav-alto: 3.75rem;
  --ancho: 40rem;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lectura: "Literata", Georgia, "Times New Roman", serif;
  color-scheme: light;
}

/* Modo oscuro: según el teléfono (salvo que se elija «claro» en Ajustes) o elegido a mano.
   El azul de la marca queda en los fondos; los textos azules pasan a un azul claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --azul: #1d1b86; --azul-texto: #b9b7ff; --azul-hover: #2a28a6;
    --azul-tinte: #26254a; --azul-linea: #3b3a6b;
    --amarillo-tinte: #2d2814; --amarillo-linea: #5e5122;
    --fondo: #111118; --superficie: #1c1c26;
    --tinta: #ecebf2; --tinta-2: #bdbbcb; --tinta-3: #a09eae;
    --linea: #2e2d3b; --linea-fuerte: #6a6879;
    --sobre-azul: #f3f2f2; --sobre-azul-2: #c7c6e6;
    --error: #ff8f85; --error-tinte: #3b1c1c; --exito: #86d6a6; --exito-tinte: #15301f;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -16px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --azul: #1d1b86; --azul-texto: #b9b7ff; --azul-hover: #2a28a6;
  --azul-tinte: #26254a; --azul-linea: #3b3a6b;
  --amarillo-tinte: #2d2814; --amarillo-linea: #5e5122;
  --fondo: #111118; --superficie: #1c1c26;
  --tinta: #ecebf2; --tinta-2: #bdbbcb; --tinta-3: #a09eae;
  --linea: #2e2d3b; --linea-fuerte: #6a6879;
  --sobre-azul: #f3f2f2; --sobre-azul-2: #c7c6e6;
  --error: #ff8f85; --error-tinte: #3b1c1c; --exito: #86d6a6; --exito-tinte: #15301f;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -16px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* Tipo de letra «Sencilla» (Ajustes): las lecturas también con la letra de la interfaz. */
:root[data-letra="sencilla"] { --lectura: var(--ui); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* iPhone: toma el tamaño de letra elegido en Ajustes (Dynamic Type). */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.375;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}
body.fondo-azul { background: var(--azul); }
a { color: var(--azul-texto); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--ui); margin: 0 0 .4em; color: var(--azul-texto); }
h1 { font-size: 1.75rem; line-height: 2rem; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; line-height: 1.625rem; font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 1rem; line-height: 1.375rem; font-weight: 600; color: var(--tinta); }
p { margin: 0 0 .75em; }
:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 2px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Estructura ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  padding: calc(var(--seguro-arriba) + .625rem) max(1rem, calc((100% - var(--ancho)) / 2 + 1rem)) .625rem;
  background: var(--azul);
  color: var(--sobre-azul);
}
.cabecera .marca {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  flex: 1; min-width: 0; height: 2.5rem; color: inherit; text-decoration: none;
}
.cabecera .marca:hover, .cabecera .marca:hover strong { text-decoration: none; }
.cabecera .marca strong, .cabecera .marca small {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cabecera .marca strong { font-size: 1rem; line-height: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.cabecera .marca small { font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--sobre-azul-2); }
/* Con logo, el logo va a la izquierda del nombre del grupo y del matrimonio, sobre un fondo claro
   para que se vea también si es oscuro. */
.cabecera .marca.con-logo { flex-direction: row; align-items: center; justify-content: flex-start; gap: .625rem; }
.cabecera .marca-texto { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cabecera .logo-cabecera {
  flex: none; width: 2.5rem; height: 2.5rem; padding: .1875rem;
  object-fit: contain; border-radius: var(--radio-chico); background: var(--sobre-azul);
}
.cabecera-acciones { margin-left: auto; display: flex; align-items: center; gap: .375rem; }
.cabecera .perfil, .cabecera .musica {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; color: var(--sobre-azul); background: rgba(243, 242, 242, .12);
}
.cabecera .musica { border: 0; padding: 0; cursor: pointer; font: inherit; appearance: none; }
.cabecera .perfil[aria-current="page"],
.cabecera .musica[aria-pressed="true"] { background: var(--amarillo); color: var(--sobre-amarillo); }
.cabecera .perfil svg, .cabecera .musica svg { width: 1.375rem; height: 1.375rem; }
.cabecera .musica > span { display: grid; place-items: center; }
.cabecera .musica .encendida { display: none; }
.cabecera .musica[aria-pressed="true"] .apagada { display: none; }
.cabecera .musica[aria-pressed="true"] .encendida { display: grid; }
.cabecera :focus-visible { outline-color: var(--amarillo); }

.contenido {
  max-width: var(--ancho); margin: 0 auto;
  padding: 1.5rem 1rem calc(var(--nav-alto) + var(--seguro-abajo) + 2rem);
}
.contenido.sin-nav { padding-bottom: 2.5rem; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  min-height: calc(var(--nav-alto) + var(--seguro-abajo));
  padding: .375rem max(.25rem, calc((100% - var(--ancho)) / 2)) calc(.375rem + var(--seguro-abajo));
  background: var(--superficie);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -8px 24px -18px rgba(1, 0, 102, .35);
}
/* iPhone instalado, con la página sin desplazarse: la ventana termina antes del borde de abajo
   (ver anclarNav en app.js). El hueco se pinta del color de la barra: se ve una sola barra hasta
   el borde. En el Teléfono, que nunca se desplaza, la barra además deja de reservar lugar para la
   línea de inicio, que queda en el hueco. En las demás páginas no se toca: el iPhone corrige el
   hueco al desplazar y la barra saltaría. */
html.hueco-abajo { background: var(--superficie); }
html.hueco-abajo body.telefono .nav { min-height: var(--nav-alto); padding-bottom: .375rem; }
.nav a { display: flex; align-items: center; justify-content: center; color: var(--tinta-2); text-decoration: none; }
.nav a svg {
  width: 1.625rem; height: 1.625rem; padding: .375rem 1rem; box-sizing: content-box;
  border-radius: 999px; transition: background .2s;
}
.nav a[aria-current="page"] { color: var(--sobre-amarillo); }
.nav a[aria-current="page"] svg { background: var(--amarillo); }

/* ---------- Encabezados de página ---------- */
.titulo-pagina { margin: 0 0 1.5rem; }
.titulo-pagina h1 { margin: 0; }
.titulo-pagina p { margin: .375rem 0 0; color: var(--tinta-2); font-size: .875rem; line-height: 1.25rem; }
.titulo-pagina .volver { margin: 0 0 .75rem; font-size: .875rem; font-weight: 600; }
.titulo-pagina .volver a { text-decoration: none; }
.sobretitulo {
  font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul-texto); margin: 0 0 .5rem;
}
/* Gana a «.titulo-pagina p», que es más específica. */
.titulo-pagina .sobretitulo { margin: 0 0 .375rem; color: var(--azul-texto); font-size: .75rem; line-height: 1rem; }

.seccion-titulo { margin: 2rem 0 .875rem; }
.seccion-titulo h2 { margin: 0; display: flex; align-items: center; gap: .625rem; }
.seccion-titulo p { margin: .25rem 0 0; color: var(--tinta-2); font-size: .875rem; line-height: 1.25rem; }
.seccion-titulo .num {
  display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--amarillo); color: var(--sobre-amarillo); font-size: .875rem; font-weight: 800;
}

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.25rem 1.125rem;
  margin-bottom: .875rem;
  box-shadow: var(--sombra);
}
.titulo-tarjeta {
  display: flex; align-items: center; gap: .625rem; margin: 0 0 .875rem;
  font-size: 1.25rem; line-height: 1.625rem; font-weight: 800; letter-spacing: -.01em; color: var(--azul-texto);
}
.titulo-tarjeta svg {
  width: 1.25rem; height: 1.25rem; padding: .5rem; box-sizing: content-box; flex: none;
  border-radius: 50%; background: var(--azul-tinte); color: var(--azul-texto);
}
/* Superficie azul: el propósito, el capital del grupo, avisos destacados. */
.tarjeta.destacada {
  background: var(--azul);
  border-color: var(--azul-texto);
  color: var(--sobre-azul);
  box-shadow: 0 14px 32px -18px rgba(1, 0, 102, .7);
}
.destacada h2, .destacada h3, .destacada .titulo-tarjeta { color: var(--sobre-azul); }
.destacada .titulo-tarjeta svg { background: rgba(255, 204, 0, .16); color: var(--amarillo); }
.destacada .sobretitulo { color: var(--amarillo); }
.destacada a { color: var(--amarillo); }
.destacada .intro, .destacada .meta-info, .destacada .ayuda { color: var(--sobre-azul-2); }
.destacada :focus-visible { outline-color: var(--amarillo); }
.destacada .boton { background: var(--amarillo); color: var(--sobre-amarillo); }
.destacada .boton.secundario { background: transparent; color: var(--sobre-azul); box-shadow: inset 0 0 0 1.5px rgba(243, 242, 242, .6); }
.destacada .boton.secundario:hover { background: rgba(243, 242, 242, .12); }

/* Textos para leer y rezar. */
.lectura, .texto-evangelio, .oracion-texto, .proposito {
  font-family: var(--lectura); font-size: 1.125rem; line-height: 1.8125rem; font-optical-sizing: auto;
}
.lectura, .texto-evangelio { max-width: 36em; }
.proposito { font-size: 1.25rem; line-height: 1.875rem; margin: 0; }
.nombre-destacado { font-family: var(--lectura); font-size: 1.25rem; line-height: 1.625rem; font-weight: 600; margin: 0 0 .5rem; }
.referencia { font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--azul-texto); margin: 0 0 .25rem; }
.meta-info { color: var(--tinta-3); font-size: .875rem; line-height: 1.25rem; margin: .75rem 0 0; }
.intro { color: var(--tinta-2); }

.enlace-accion {
  display: inline-flex; align-items: center; gap: .25rem; min-height: 2.75rem;
  font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--azul-texto);
}
.enlace-accion svg { width: 1.125rem; height: 1.125rem; }
.enlace-accion:hover span { text-decoration: underline; text-underline-offset: .18em; }

/* Sabiduría (la cita del día): superficie amarilla suave, el «vino» de la marca. */
.tarjeta.cita-dia { background: var(--amarillo-tinte); border-color: var(--amarillo-linea); }
.cita-dia .titulo-tarjeta svg { background: var(--amarillo); color: var(--sobre-amarillo); }
blockquote.cita {
  margin: 0; font-family: var(--lectura); font-style: italic; font-size: 1.375rem; line-height: 1.9375rem;
  color: var(--tinta); font-optical-sizing: auto;
}
.autor { margin: 1rem 0 0; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--azul-texto); }
.autor::before { content: "— "; }
.autor small { display: block; font-size: .875rem; font-weight: 400; color: var(--tinta-2); }

details.desplegable { margin-top: .5rem; }
details.desplegable summary {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; cursor: pointer; list-style: none;
  color: var(--azul-texto); font-weight: 600; font-size: .9375rem;
}
details.desplegable summary::-webkit-details-marker { display: none; }
details.desplegable summary::after {
  content: ""; width: .45rem; height: .45rem; margin-top: -.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .2s;
}
details.desplegable[open] summary::after { transform: rotate(-135deg); margin-top: .2rem; }
.texto-evangelio { white-space: pre-line; margin-top: .5rem; }
.desplegable > ul { margin: .25rem 0 0; padding-left: 1.25rem; }
.desplegable > ul > li { margin-bottom: .375rem; }

.banner-instalar { display: none; }
.banner-instalar.visible { display: flex; align-items: center; gap: .75rem; }
.banner-instalar p { margin: 0; flex: 1; font-size: .9375rem; }
.icono-inline { width: 1.25rem; height: 1.25rem; vertical-align: -.25rem; color: var(--azul-texto); flex: none; }
.banner-instalar .icono-inline { width: 1.5rem; height: 1.5rem; }

/* ---------- Oraciones ---------- */
.lista-numerada { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.item-numerado {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; align-items: center; gap: .875rem;
  padding: 1rem; text-decoration: none; color: inherit;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
  transition: border-color .2s, transform .1s;
}
.item-numerado:active { transform: scale(.99); }
.item-numerado .numero {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radio-chico);
  background: var(--azul-tinte); color: var(--azul-texto); font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums;
}
.item-numerado h3 { font-family: var(--lectura); font-size: 1.25rem; line-height: 1.625rem; font-weight: 600; margin: 0 0 .125rem;
  overflow-wrap: anywhere; hyphens: auto; }
.item-numerado p {
  margin: 0; color: var(--tinta-2); font-size: .875rem; line-height: 1.25rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-numerado .chevron { width: 1.25rem; height: 1.25rem; color: var(--azul-texto); }
/* Marcapáginas: «Seguir leyendo» arriba del libro y, en la lista, el texto por el que se va. */
.seguir-leyendo { margin-bottom: .875rem; border-color: var(--amarillo); }
.seguir-leyendo .sobretitulo { margin: 0 0 .125rem; }
.seguir-leyendo .numero, .item-numerado.marcado .numero { background: var(--amarillo); color: var(--sobre-amarillo); }
.item-numerado p.en-marcapaginas { display: flex; align-items: center; gap: .25rem; margin-top: .25rem; color: var(--azul-texto); font-weight: 600; }
.en-marcapaginas svg { width: 1rem; height: 1rem; flex: none; }

.oracion-texto h2 { font-family: var(--ui); font-size: 1.125rem; line-height: 1.5rem; color: var(--azul-texto); margin: 1.75em 0 .5em; }
.oracion-texto > :first-child { margin-top: 0; }
.oracion-texto p { margin: 0 0 1em; }
.oracion-texto strong { font-weight: 600; color: var(--azul-texto); }
.oracion-texto ol { padding-left: 1.4em; margin: 0 0 1em; }
.oracion-texto li { margin-bottom: .3em; }
.oracion-texto li::marker { color: var(--azul-texto); font-family: var(--ui); font-weight: 600; }
.oracion-texto em { font-style: italic; color: var(--tinta-2); }
/* El número de cada estrofa de Hacia el Padre (la numeración internacional, para citarlas). */
.oracion-texto sup.estrofa { font-family: var(--ui); font-size: .6875rem; font-weight: 600; color: var(--azul-texto); line-height: 0; margin-right: .2em; }
.oracion-texto h2:target { background: var(--amarillo-tinte); box-shadow: 0 0 0 .5rem var(--amarillo-tinte); border-radius: 2px; }
.submenu {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; margin: 0 0 1.5rem; padding: .25rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px; box-shadow: var(--sombra);
}
.submenu a {
  display: grid; place-items: center; min-height: 2.75rem; border-radius: 999px; color: var(--azul-texto);
  transition: background .2s, color .2s;
}
.submenu a svg { width: 1.625rem; height: 1.625rem; }
.submenu a[aria-current="page"] { background: var(--azul); color: var(--sobre-azul); }
/* Biblia y Catecismo. */
.libros, .capitulos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.libros { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.capitulos { grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr)); }
.libros a, .capitulos a {
  display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .5rem .75rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-chico);
  color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .9375rem; line-height: 1.25rem;
}
.libros .abreviatura { min-width: 2.25rem; color: var(--azul-texto); font-size: .75rem; font-weight: 800; }
.capitulos a { justify-content: center; padding: .5rem .25rem; color: var(--azul-texto); font-variant-numeric: tabular-nums; }
.libros a:active, .capitulos a:active { transform: scale(.98); }
.versiculos p { margin: 0 0 .5em; }
.lectura-del-dia { margin-top: .5rem; }
.salto-capitulo { display: block; margin: .75rem 0 .25rem; font-family: var(--ui); font-size: .8125rem; font-weight: 600; color: var(--azul-texto); }
.versiculos sup {
  margin-right: .3em; font-family: var(--ui); font-size: .6875rem; font-weight: 800; color: var(--azul-texto);
  font-variant-numeric: tabular-nums;
}
.versiculos p:target,
.versiculos p.marcado { background: var(--amarillo-tinte); box-shadow: 0 0 0 .375rem var(--amarillo-tinte); border-radius: 2px; }
.paginacion { display: flex; justify-content: space-between; gap: .75rem; }
.puntos-clave, .referencias { margin: 0; padding-left: 1.25rem; }
.puntos-clave li, .referencias li { margin-bottom: .375rem; }
.puntos-clave li::marker { color: var(--azul-texto); }
/* Libros. */
.item-numerado .numero svg { width: 1.375rem; height: 1.375rem; }
.sobre-obra .lectura p { margin: 0 0 .75em; }
.sobre-obra .enlace-accion { margin-top: .25rem; }

.aviso-misterios { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.aviso-misterios span { flex: 1; }
.aviso-misterios strong { color: var(--amarillo); }
.aviso-misterios svg { width: 1.25rem; height: 1.25rem; color: var(--amarillo); flex: none; }
:target { scroll-margin-top: 6rem; }

/* ---------- Teléfono del Padre ---------- */
.chat, .turno { display: flex; flex-direction: column; gap: .625rem; }
/* En el iPhone, si el Teléfono es más corto que la pantalla, la barra fija queda arriba.
   La página ocupa toda la altura y el botón de responder queda al final, justo encima de la barra. */
body.telefono { min-height: 100dvh; display: flex; flex-direction: column; }
/* width: con margin auto, un hijo de una columna flex toma el ancho de su contenido, no el de la
   pantalla: al abrir, el título solo dejaba todo angosto y corrido a la derecha. */
body.telefono .contenido { flex: 1; display: flex; flex-direction: column; width: 100%; }
body.telefono .chat { flex: 1; }
body.telefono .chat > .turno:last-child { flex: 1; }
body.telefono .respuestas { margin-top: auto; }
.chat > .turno > *, .chat .escribiendo { scroll-margin-bottom: calc(var(--nav-alto) + var(--seguro-abajo) + 1.5rem); }
.burbuja {
  max-width: 85%; margin: 0; padding: .75rem 1rem; border-radius: var(--radio);
  font-size: 1rem; line-height: 1.375rem; animation: burbuja-aparece .25s ease-out both;
}
.burbuja.padre, .escribiendo {
  align-self: flex-start; background: var(--superficie); border: 1px solid var(--linea);
  border-bottom-left-radius: .25rem; box-shadow: var(--sombra);
}
.burbuja.yo { align-self: flex-end; background: var(--azul); color: var(--sobre-azul); border-bottom-right-radius: .25rem; }
/* El mensaje del Padre se lee como la cita del día: letra de lectura sobre el amarillo suave. */
.burbuja.mensaje {
  background: var(--amarillo-tinte); border-color: var(--amarillo-linea);
  font-family: var(--lectura); font-size: 1.125rem; line-height: 1.75rem; font-optical-sizing: auto;
}
.burbuja.mensaje p { margin: 0; }
.burbuja.mensaje footer { margin-top: .5rem; font-family: var(--ui); font-size: .8125rem; line-height: 1.125rem; font-weight: 600; color: var(--azul-texto); }
.burbuja.mensaje footer::before { content: "— "; }
.escribiendo {
  display: inline-flex; gap: .3rem; margin: 0; padding: 1rem 1.125rem;
  border-radius: var(--radio) var(--radio) var(--radio) .25rem;
}
.escribiendo i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--linea-fuerte); animation: escribiendo 1s ease-in-out infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; }
.escribiendo i:nth-child(3) { animation-delay: .3s; }
.respuestas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin: .25rem 0 0; }
.respuestas .ayuda { flex-basis: 100%; text-align: right; margin: 0; }
.respuestas[hidden], .respuestas [hidden] { display: none; }
/* Solo se puede responder la última pregunta del Padre. */
.chat .turno:not(:last-child) .respuestas { display: none; }
/* Lo ya conversado hoy aparece quieto al volver; solo se anima lo nuevo. */
.turno.guardado .burbuja { animation: none; }
@keyframes burbuja-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes escribiendo { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .burbuja, .escribiendo i { animation: none; }
}

/* ---------- Botones y formularios ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .75rem 1.5rem; border: 0; border-radius: 999px;
  background: var(--azul); color: var(--sobre-azul);
  font-family: var(--ui); font-size: .9375rem; line-height: 1.25rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background .15s, transform .1s;
}
.boton:hover { background: var(--azul-hover); }
.boton:active { transform: scale(.98); }
.boton.secundario { background: transparent; color: var(--azul-texto); box-shadow: inset 0 0 0 1.5px var(--azul-texto); }
.boton.secundario:hover { background: var(--azul-tinte); }
.boton.acento { background: var(--amarillo); color: var(--sobre-amarillo); }
.boton.bloque { display: flex; width: 100%; }
.boton.chico { min-height: 2.25rem; padding: .375rem 1rem; font-size: .875rem; }
.boton svg { width: 1.25rem; height: 1.25rem; flex: none; }
.boton:disabled { opacity: .55; cursor: default; }
.boton.bloque + .boton.bloque, form + form { margin-top: .625rem; }

form .campo { margin-bottom: 1rem; }
label { display: block; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--tinta); margin-bottom: .375rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; min-height: 3rem; padding: .75rem .875rem;
  font-family: var(--ui); font-size: 1rem; line-height: 1.375rem; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 7.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul-texto); box-shadow: 0 0 0 3px rgba(1, 0, 102, .18); }
input[type=checkbox] { width: 1.25rem; height: 1.25rem; accent-color: var(--azul-texto); margin: 0; }
.ayuda { color: var(--tinta-3); font-size: .875rem; line-height: 1.25rem; margin-top: .375rem; }
.ayuda.centrada { text-align: center; margin: 1.5rem auto 0; max-width: 30rem; }
.errorlist { list-style: none; padding: 0; margin: .375rem 0 0; color: var(--error); font-size: .875rem; font-weight: 600; }
form > .errorlist { margin: 0 0 1rem; padding: .75rem .875rem; border-radius: var(--radio-chico); background: var(--error-tinte); }
.checkbox label { display: flex; align-items: center; gap: .625rem; font-size: 1rem; font-weight: 400; }

.mensajes { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.mensajes li {
  padding: .75rem 1rem; border-radius: var(--radio-chico); border-left: 4px solid var(--azul-texto);
  background: var(--azul-tinte); color: var(--tinta); font-size: .9375rem;
}
.mensajes li.success { background: var(--exito-tinte); border-color: var(--exito); }
.mensajes li.warning { background: var(--amarillo-tinte); border-color: var(--amarillo); }
.mensajes li.error { background: var(--error-tinte); border-color: var(--error); }

/* ---------- Páginas públicas (entrar, crear contraseña, sin conexión) ---------- */
.publica {
  min-height: 100dvh; display: grid; place-items: center;
  padding: calc(var(--seguro-arriba) + 2rem) 1rem calc(var(--seguro-abajo) + 2rem);
  color: var(--sobre-azul);
}
.publica .caja { width: 100%; max-width: 25rem; }
.logo-grande { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 2rem; }
.logo-grande .simbolo { height: 5.5rem; width: auto; }
.logo-grande h1 { color: var(--sobre-azul); font-size: 3rem; line-height: 1; letter-spacing: -.02em; margin: 1rem 0 .625rem; }
.logo-grande p { margin: 0; color: var(--sobre-azul-2); font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.publica .tarjeta { color: var(--tinta); border: 0; padding: 1.5rem 1.25rem; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .5); }
.publica .caja > .ayuda { color: var(--sobre-azul-2); text-align: center; margin-top: 1.25rem; }
.publica :focus-visible { outline-color: var(--amarillo); }
.publica .tarjeta :focus-visible { outline-color: var(--azul-texto); }
.enlace-chico { display: block; text-align: center; margin-top: 1rem; font-size: .9375rem; font-weight: 600; }

/* ---------- Ofrecer ---------- */
/* Cada área del capital se abre y se cierra: al entrar se ve primero la lista de las áreas. */
.area-acciones { border-bottom: 1px solid var(--linea); }
.area-acciones > summary.seccion-titulo {
  position: relative; margin: 0; padding: 1rem 2.25rem 1rem 0; cursor: pointer; list-style: none;
}
.area-acciones > summary::-webkit-details-marker { display: none; }
.area-acciones > summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.375rem;
  border-right: 2px solid var(--azul-texto); border-bottom: 2px solid var(--azul-texto); transform: rotate(45deg);
  transition: transform .2s;
}
.area-acciones[open] > summary::after { transform: rotate(-135deg); margin-top: -.125rem; }
.area-acciones > summary p { margin: .25rem 0 0 2.375rem; }
.area-marcadas { color: var(--azul-texto); font-weight: 600; }
.area-acciones[open] { padding-bottom: .75rem; }

/* La descripción no se muestra en la lista: se abre con ⓘ o manteniendo pulsada la acción. */
.fila-accion { position: relative; margin-bottom: .625rem; }
.accion {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .875rem;
  padding: .875rem .875rem .875rem 1.125rem; margin: 0;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
  transition: background .25s, border-color .25s;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.accion h3 { margin: 0; }
.fila-accion:has(.ver-descripcion) .accion h3 { margin-right: 2.75rem; }
.ver-descripcion {
  position: absolute; top: 50%; right: 4rem; transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: var(--tinta-3); cursor: pointer;
}
.ver-descripcion svg { width: 1.375rem; height: 1.375rem; }
.ver-descripcion:active { background: var(--azul-tinte); color: var(--azul-texto); }
.accion.ofrecida { background: var(--amarillo-tinte); border-color: var(--amarillo-linea); }
label.accion { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.accion input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.accion .marca {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--azul-linea); background: var(--superficie); color: transparent;
  transition: background .2s, border-color .2s, color .2s, transform .1s;
}
.accion .marca svg { width: 1.375rem; height: 1.375rem; stroke-width: 2.6; }
.accion:has(input:checked) { background: var(--azul-tinte); border-color: var(--azul-texto); }
.accion:has(input:checked) .marca { background: var(--azul); border-color: var(--azul-texto); color: var(--sobre-azul); }
.accion:has(input:focus-visible) { outline: 3px solid var(--amarillo); outline-offset: 2px; }
label.accion:active .marca { transform: scale(.92); }
.accion.ofrecida .marca { background: var(--amarillo); border-color: var(--amarillo); color: var(--sobre-amarillo); }
.accion.ofrecida h3 { opacity: .7; }
.barra-ofrecer {
  position: sticky; bottom: calc(var(--nav-alto) + var(--seguro-abajo) + .75rem); z-index: 5;
  margin-top: 1rem;
}
.barra-ofrecer .boton { box-shadow: 0 6px 20px rgba(1, 0, 102, .25); }

/* Una página entera abierta en un modal sobre el inicio (los detalles del santuario). */
dialog.modal-pagina {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow-y: auto; background: var(--fondo); color: var(--tinta);
}
dialog.modal-pagina[open] { animation: subir-hoja .25s ease-out; }
dialog.modal-pagina::backdrop { background: var(--fondo); }
.modal-pagina .interior {
  max-width: var(--ancho); margin: 0 auto;
  padding: calc(var(--seguro-arriba) + 1rem) 1rem calc(var(--seguro-abajo) + 2rem);
}
.modal-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin: 0 0 1.5rem; }
.modal-cabecera h1 { margin: 0; }
.modal-cabecera p { margin: .375rem 0 0; color: var(--tinta-2); font-size: .875rem; line-height: 1.25rem; }
.cerrar-modal {
  flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--superficie);
  box-shadow: var(--sombra); font-size: 1.75rem; line-height: 1; color: var(--azul); cursor: pointer;
}

/* Tarjeta con ⓘ en el título: la explicación se abre en una hoja aparte. */
.cab-tarjeta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .625rem; }
.cab-tarjeta .titulo-tarjeta { margin: 0; }
.boton-info {
  flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: var(--tinta-3); cursor: pointer;
}
.boton-info svg { width: 1.375rem; height: 1.375rem; }
.boton-info:active { background: var(--azul-tinte); color: var(--azul); }

/* Ofrecer: la aclaración de que lo ofrecido es privado. */
.nota-privada {
  margin: -.75rem 0 1.25rem;
  color: var(--tinta-2); font-size: .875rem; line-height: 1.25rem;
}

/* ---------- Aviso de privacidad ---------- */
.privacidad h2 { font-size: 1.125rem; line-height: 1.5rem; margin: 0 0 .5rem; }
.privacidad p, .privacidad li { font-size: .9375rem; line-height: 1.4375rem; color: var(--tinta); }
.privacidad ul { margin: 0 0 .5rem; padding-left: 1.25rem; }
.privacidad li { margin-bottom: .375rem; }
.privacidad .tarjeta > :last-child { margin-bottom: 0; }
.publica .privacidad { margin-top: 0; }

/* ---------- Ajustes ---------- */
.titulo-ajuste { margin: 0 0 .875rem; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: var(--tinta); }
.titulo-ajuste label { font: inherit; color: inherit; margin: 0; }
.ajustes .ayuda { margin: .625rem 0 0; }

/* ---------- Recordatorios ---------- */
.recordatorio-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.recordatorio-fila .titulo-ajuste { margin: 0; }
.recordatorio-fila .ayuda { margin: .25rem 0 0; }
.recordatorio .enlace-accion { margin-top: .5rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
/* Interruptor encendido / apagado. */
.interruptor {
  position: relative; flex: none; width: 3.25rem; height: 2rem; padding: 0; border: 0; border-radius: 999px;
  background: var(--linea-fuerte); cursor: pointer; transition: background .2s;
}
.interruptor span {
  position: absolute; top: .25rem; left: .25rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--superficie); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s;
}
.interruptor[aria-checked="true"] { background: var(--azul-texto); }
.interruptor[aria-checked="true"] span { transform: translateX(1.25rem); }
.interruptor:disabled { opacity: .45; cursor: default; }
.aviso-recordatorios {
  margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--radio-chico);
  background: var(--amarillo-tinte); border-left: 4px solid var(--amarillo); color: var(--tinta); font-size: .9375rem;
}
.hoja .error-recordatorio { margin: 0 0 1rem; color: var(--error); font-weight: 600; }
.hoja .error-recordatorio a { color: inherit; }
.intro-recordatorios { margin: 0 0 1rem; color: var(--tinta-2); }
.permitir-push p { margin: 0 0 .75rem; }
.permitir-push .error-recordatorio { margin: .75rem 0 0; color: var(--error); font-weight: 600; }
.permitir-push .error-recordatorio a { color: inherit; }
.recordatorio .error-recordatorio { margin: .75rem 0 0; color: var(--error); font-weight: 600; }
.recordatorio .error-recordatorio a { color: inherit; }
.segmentado {
  display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: .25rem; padding: .25rem;
  border-radius: var(--radio-chico); background: var(--azul-tinte);
}
.segmentado label { margin: 0; cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmentado label > span {
  display: grid; place-items: center; min-height: 2.75rem; border-radius: calc(var(--radio-chico) - .25rem);
  color: var(--tinta-2); font-size: 1rem; font-weight: 600; transition: background .2s, color .2s;
}
.segmentado label > span svg { width: 1.5rem; height: 1.5rem; }
.segmentado input:checked + span { background: var(--azul); color: var(--sobre-azul); }
.segmentado input:focus-visible + span { outline: 3px solid var(--azul-texto); outline-offset: 2px; }
.letra-clasica { font-family: "Literata", Georgia, serif; }
.letra-sencilla { font-family: var(--ui); }
.tamano { display: flex; align-items: center; gap: .875rem; }
.tamano span { font-weight: 700; color: var(--tinta-2); font-size: .875rem; }
.tamano .grande { font-size: 1.375rem; }
.tamano input { flex: 1; accent-color: var(--amarillo); height: 2.75rem; margin: 0; }
.ejemplo-texto { margin: .5rem 0 0; font-family: var(--lectura); font-size: 1.125rem; line-height: 1.75rem; color: var(--tinta); }

/* Hoja que sube desde abajo con la descripción de una acción. */
dialog.hoja {
  position: fixed; inset: auto 0 0; width: 100%; max-width: var(--ancho); max-height: 85dvh;
  margin: 0 auto; padding: 0; border: 0; border-radius: var(--radio) var(--radio) 0 0; overflow-y: auto;
  background: var(--superficie); color: var(--tinta); box-shadow: 0 -12px 32px -16px rgba(1, 0, 102, .45);
}
dialog.hoja[open] { animation: subir-hoja .25s ease-out; }
dialog.hoja::backdrop { background: rgba(1, 0, 102, .45); }
.hoja-interior { padding: 1.5rem 1.25rem calc(1.25rem + var(--seguro-abajo)); }
.hoja h2 { margin: 0 0 .75rem; }
.hoja .lectura { margin: 0 0 1.5rem; }
.hoja-ofrendas { margin: -.75rem 0 1.5rem; padding: .625rem .875rem; border-radius: var(--radio-chico); background: var(--amarillo-tinte); font-size: .9375rem; line-height: 1.375rem; color: var(--tinta); }
.hoja-ofrendas strong { color: var(--azul-texto); font-weight: 600; }
@keyframes subir-hoja { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* El botón «Ofrecer» al final de una oración, un capítulo o un tema del catecismo. */
.ofrecer-una { margin: 1.25rem 0 1rem; }
.ofrecer-una .ayuda.centrada { margin-top: .5rem; }
.ofrecer-una-estado {
  display: flex; align-items: center; gap: .625rem; margin: 0 0 .75rem; padding: .875rem 1rem;
  border-radius: var(--radio-chico); background: var(--amarillo-tinte); border: 1px solid var(--amarillo-linea);
  font-weight: 600; color: var(--tinta);
}
.ofrecer-una-estado svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--azul-texto); stroke-width: 2.4; }
/* Recién ofrecida: la misma animación del papelito que al ofrecer desde el capital. */
.ofrecer-una-recien {
  text-align: center; margin: 0 0 .75rem; padding: 1rem 1rem .75rem;
  border-radius: var(--radio-chico); background: var(--amarillo-tinte); border: 1px solid var(--amarillo-linea);
  animation: efecto-aparece .4s ease-out both;
}
.ofrecer-una-recien .papelito-jarra { margin-bottom: .5rem; }
.ofrecer-una-titulo { margin: 0 0 .25rem; font-weight: 800; color: var(--azul-texto); }
.ofrecer-una-recien .intro { margin: 0; }

/* ---------- Sin conexión: aviso y lo pendiente de envío ---------- */
.aviso-conexion {
  position: sticky; top: calc(var(--seguro-arriba) + 3.75rem); z-index: 15; margin: 0;
  padding: .5rem 1rem; text-align: center; font-size: .875rem; line-height: 1.25rem; font-weight: 600;
  background: var(--amarillo); color: var(--sobre-amarillo);
}
.aviso-conexion[hidden] { display: none; }
.accion.pendiente { background: var(--amarillo-tinte); border-style: dashed; border-color: var(--amarillo-linea); }
.accion.pendiente .marca { border-style: dashed; }
.pendiente-envio { display: block; margin-top: .125rem; font-size: .8125rem; font-weight: 600; color: var(--tinta-2); }
.pendiente-envio[hidden] { display: none; }
.ofrecer-una.pendiente .ofrecer-una-estado { border-style: dashed; }

/* ---------- Pantalla de respuesta al ofrecer ---------- */
.ofrecido { text-align: center; padding-top: 1rem; }
.ofrecido h1 { margin-bottom: .375rem; }
.ofrecido .intro { margin-bottom: 1.25rem; }
.papelito-jarra { position: relative; width: 6rem; height: 7rem; margin: 0 auto 1rem; }
.papelito-jarra .jarra { position: absolute; left: 0; bottom: 0; width: 6rem; height: 6rem; color: var(--azul-texto); stroke-width: 1.4; }
.papelito {
  position: absolute; left: 50%; top: 0; width: 1.5rem; height: 1.125rem; margin-left: -.75rem;
  background: var(--superficie); border: 1.5px solid var(--azul-texto); border-radius: 2px;
  animation: papelito 1.4s ease-in .2s both;
}
@keyframes papelito {
  0% { transform: translateY(-1.5rem) rotate(-12deg); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translateY(2.25rem) rotate(6deg); opacity: 1; }
  100% { transform: translateY(3.25rem) rotate(0deg) scale(.6); opacity: 0; }
}
.efectos { list-style: none; padding: 0; margin: 0 0 1.5rem; text-align: left; }
.efectos li {
  display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; margin-bottom: .5rem;
  background: var(--amarillo-tinte); border: 1px solid var(--amarillo-linea); border-radius: var(--radio-chico);
  font-weight: 600; animation: efecto-aparece .4s ease-out both;
}
.efectos li:nth-child(2) { animation-delay: .15s; }
.efectos li svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--azul-texto); }
@keyframes efecto-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Desde tu última visita ---------- */
.desde-visita { padding-bottom: .5rem; }
.desde-visita .cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.desde-visita .titulo-tarjeta { margin: 0; }
.desde-visita .cerrar {
  width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent;
  font-size: 1.5rem; line-height: 1; color: var(--tinta-2); cursor: pointer;
}
.desde-visita .efectos { margin-bottom: .5rem; }

/* ---------- Pantallas completas: novedades y celebraciones ---------- */
dialog.pantalla-completa {
  position: fixed; inset: 0; z-index: 50; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow-y: auto;
  background: var(--azul); color: var(--sobre-azul);
}
dialog.pantalla-completa::backdrop { background: var(--azul); }
.pantalla-completa .interior {
  max-width: var(--ancho); margin: 0 auto; text-align: center;
  padding: calc(2.5rem + env(safe-area-inset-top)) 1rem calc(2rem + var(--seguro-abajo));
}
.pantalla-completa h1 { color: var(--sobre-azul); margin-bottom: .5rem; }
.pantalla-completa .sobretitulo { color: var(--amarillo); }
.pantalla-completa .intro, .pantalla-completa p { color: var(--sobre-azul-2); }
.pantalla-completa strong { color: var(--sobre-azul); }
.pantalla-completa form { margin-top: 1.75rem; }
.pasos { list-style: none; padding: 0; margin: 1.5rem 0 0; text-align: left; }
.pasos li {
  display: flex; gap: .875rem; align-items: flex-start; padding: .875rem 1rem; margin-bottom: .625rem;
  background: rgba(243, 242, 242, .08); border-radius: var(--radio-chico);
}
.pasos li > svg { width: 1.75rem; height: 1.75rem; flex: none; color: var(--amarillo); }
.pasos strong { display: block; margin-bottom: .125rem; }
.pasos p { margin: 0; font-size: .9375rem; line-height: 1.375rem; }
.vino { position: relative; width: 7rem; height: 8rem; margin: 0 auto 1.25rem; }
.vino .jarra { position: absolute; left: 0; bottom: 0; width: 7rem; height: 7rem; color: #E58FA9; stroke-width: 1.3; }
/* La quema del 18: la jarra con fuego; las chispas y los papelitos suben al cielo. */
.quema { width: min(16rem, 70vw); margin: 0 auto 1rem; }
/* Las fechas especiales: lo nuevo, recortado de la escena del grupo, y su cita. */
.fecha-especial + .fecha-especial { margin-top: 2rem; }
.fecha-especial .encuadre { width: min(16rem, 70vw); margin: 0 auto 1rem; border-radius: var(--radio); overflow: hidden; line-height: 0; }
.fecha-especial .encuadre svg { display: block; width: 100%; height: auto; }
.fecha-especial blockquote {
  margin: 0 0 1rem; font-family: var(--lectura); font-style: italic; font-size: 1.1875rem; line-height: 1.625rem;
  color: var(--sobre-azul); font-optical-sizing: auto;
}
.fecha-especial blockquote cite { display: block; margin-top: .25rem; font-family: var(--ui); font-style: normal; font-size: .875rem; font-weight: 600; color: var(--amarillo); }
.fecha-especial blockquote cite a { color: inherit; }
.quema-svg { display: block; width: 100%; height: auto; border-radius: var(--radio); }
.quema-svg .quema-chispa { transform-box: fill-box; transform-origin: center; animation: quema-chispa 2.4s ease-out infinite; }
.quema-svg .quema-chispa:nth-of-type(3n) { animation-delay: -.8s; animation-duration: 2.8s; }
.quema-svg .quema-chispa:nth-of-type(3n+1) { animation-delay: -1.6s; }
.quema-svg #quema-fuego { transform-box: fill-box; transform-origin: center bottom; animation: titilar 1.2s ease-in-out infinite alternate; }
.quema-svg #quema-papelitos { animation: quema-papelitos 3.2s ease-in infinite; }
.quema-svg .quema-llama { transform-box: fill-box; transform-origin: center bottom; animation: titilar 1s ease-in-out infinite alternate; }
.quema-svg .quema-llama:nth-of-type(2n) { animation-duration: 1.3s; animation-delay: -.4s; }
@keyframes quema-chispa {
  0% { transform: translateY(12px) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-46px) scale(1); opacity: 0; }
}
@keyframes quema-papelitos {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(-10px); opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
  .papelito, .efectos li, .quema-svg * { animation: none !important; }
}

/* ---------- Inicio: el santuario arriba de todo, de borde a borde ---------- */
/* Los márgenes negativos anulan el relleno de .contenido. Los 2px de más se meten debajo de la
   cabecera (queda por encima), así no se ve el fondo ni de día ni de noche. */
.santuario-inicio { margin: calc(-1.5rem - 2px) -1rem 1rem; overflow: hidden; }
.santuario-inicio .escena { display: block; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.santuario-inicio .escena:focus-visible { outline-offset: -3px; }
/* Más ancho que la columna, la escena queda centrada y redondeada abajo. */
@media (min-width: 40rem) {
  .santuario-inicio { border-radius: 0 0 var(--radio) var(--radio); box-shadow: var(--sombra); }
}
.ofrecer-inicio { margin-bottom: .875rem; }
/* Atajos del inicio: el Rosario y el Denario, uno al lado del otro. */
.atajos-rezo { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-bottom: .875rem; }
.atajos-rezo .atajo {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin: 0; padding: .875rem 1rem;
  color: var(--tinta); text-decoration: none;
}
.atajos-rezo .atajo > svg { width: 1.75rem; height: 1.75rem; color: var(--azul-texto); }
.atajos-rezo .atajo > svg.flecha { position: absolute; top: .875rem; right: .75rem; width: 1.25rem; height: 1.25rem; color: var(--tinta-3); }
.atajos-rezo strong { display: block; color: var(--azul-texto); font-size: 1rem; line-height: 1.25rem; }
.atajos-rezo small { display: block; margin-top: .125rem; color: var(--tinta-2); font-size: .8125rem; line-height: 1.125rem; }
@media (hover: hover) { .atajos-rezo .atajo:hover { border-color: var(--azul-linea); } }

/* ---------- Santuario ---------- */
.escena {
  border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); background: #dce8f3;
  margin-bottom: .875rem; line-height: 0; box-shadow: var(--sombra);
}
.escena svg { display: block; width: 100%; height: auto; }

/* ---------- Mi grupo y perfil ---------- */
.miembros { list-style: none; padding: 0; margin: 0; }
.miembros > li { padding: .875rem 0; border-top: 1px solid var(--linea); }
.miembros > li:first-child { border-top: none; padding-top: 0; }
.miembros .nombre-mat { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-weight: 800; color: var(--azul-texto); }
.persona { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .5rem; }
.persona > span { min-width: 0; overflow-wrap: anywhere; }
.persona small { display: block; color: var(--tinta-3); font-size: .875rem; }
.estado {
  font-size: .75rem; line-height: 1rem; font-weight: 600; padding: .25rem .625rem; border-radius: 999px;
  background: var(--linea); color: var(--tinta-2); white-space: nowrap;
}
.estado.pendiente { background: var(--amarillo-tinte); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--amarillo-linea); }
.estado.coord { background: var(--azul-tinte); color: var(--azul-texto); }

.menu-perfil { padding-top: .25rem; padding-bottom: .25rem; }
.menu-perfil a.fila, .boton-salir {
  display: flex; align-items: center; gap: .875rem; width: 100%; min-height: 3.25rem; padding: .75rem 0;
  border-top: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-size: 1rem;
}
.menu-perfil a.fila:first-child { border-top: none; }
.menu-perfil svg { width: 1.375rem; height: 1.375rem; color: var(--azul-texto); flex: none; }
.boton-salir { background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; color: var(--error); cursor: pointer; }
.boton-salir svg { color: var(--error); }

/* ---------- Instalar ---------- */
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; }
.pasos li { counter-increment: paso; position: relative; padding: 0 0 .875rem 2.75rem; }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -.125rem; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--amarillo); color: var(--sobre-amarillo); font-size: .875rem; font-weight: 800;
}

@media (hover: hover) {
  .item-numerado:hover, .accion:hover { border-color: var(--azul-linea); }
  .nav a:hover { color: var(--azul-texto); }
  .submenu a:not([aria-current]):hover { background: var(--azul-tinte); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Escena del santuario (capas de docs/diseno-santuario.md) ---------- */
.santuario-svg .velo { opacity: .22; pointer-events: none; }
.santuario-svg .velo-atardecer { opacity: .3; }
.santuario-svg.atardecer.nublado .velo-atardecer, .santuario-svg.atardecer.lluvioso .velo-atardecer { opacity: .45; }
.santuario-svg .haces { animation: brillar 7s ease-in-out infinite alternate; }
.santuario-svg .velo-noche { opacity: .5; }
.santuario-svg.noche.nublado .velo-noche, .santuario-svg.noche.lluvioso .velo-noche { opacity: .6; }
.santuario-svg .estrella { animation: titilar-estrella 3.2s ease-in-out infinite alternate; }
.santuario-svg .estrella:nth-child(3n) { animation-duration: 4.1s; animation-delay: -1.3s; }
.santuario-svg .estrella:nth-child(4n+1) { animation-duration: 2.6s; animation-delay: -2.1s; }
.santuario-svg #estrella-belen { transform-box: fill-box; transform-origin: center; animation: latir 4s ease-in-out infinite alternate; }
/* Lluvia: cada gota cae en diagonal (como está dibujada) y vuelve a empezar, con desfases. */
.santuario-svg .gota { animation: llover .85s linear infinite; }
.santuario-svg .gota:nth-child(3n) { animation-duration: .7s; }
.santuario-svg .gota:nth-child(3n+1) { animation-duration: 1s; }
.santuario-svg .gota:nth-child(5n) { animation-delay: -.2s; }
.santuario-svg .gota:nth-child(5n+1) { animation-delay: -.45s; }
.santuario-svg .gota:nth-child(5n+2) { animation-delay: -.65s; }
.santuario-svg .gota:nth-child(5n+3) { animation-delay: -.3s; }
.santuario-svg .halo { transform-box: fill-box; transform-origin: center; animation: latir 6s ease-in-out infinite alternate; }
.santuario-svg .velo-noche { opacity: .5; }
.santuario-svg.noche.nublado .velo-noche, .santuario-svg.noche.lluvioso .velo-noche { opacity: .6; }
.santuario-svg .estrella { animation: titilar-estrella 3.2s ease-in-out infinite alternate; }
.santuario-svg .estrella:nth-child(3n) { animation-duration: 4.1s; animation-delay: -1.3s; }
.santuario-svg .estrella:nth-child(4n+1) { animation-duration: 2.6s; animation-delay: -2.1s; }
.santuario-svg #estrella-belen { transform-box: fill-box; transform-origin: center; animation: latir 4s ease-in-out infinite alternate; }
/* Lluvia: cada gota cae en diagonal (como está dibujada) y vuelve a empezar, con desfases. */
.santuario-svg .gota { animation: llover .85s linear infinite; }
.santuario-svg .gota:nth-child(3n) { animation-duration: .7s; }
.santuario-svg .gota:nth-child(3n+1) { animation-duration: 1s; }
.santuario-svg .gota:nth-child(5n) { animation-delay: -.2s; }
.santuario-svg .gota:nth-child(5n+1) { animation-delay: -.45s; }
.santuario-svg .gota:nth-child(5n+2) { animation-delay: -.65s; }
.santuario-svg .gota:nth-child(5n+3) { animation-delay: -.3s; }
.santuario-svg .halo { transform-box: fill-box; transform-origin: center; animation: latir 6s ease-in-out infinite alternate; }
.santuario-svg .rayos { transform-box: fill-box; transform-origin: center; animation: girar 50s linear infinite; }
.santuario-svg .nube { animation: deriva 28s ease-in-out infinite alternate; }
.santuario-svg .nube:nth-child(2n) { animation-duration: 36s; animation-delay: -9s; }
.santuario-svg .nube:nth-child(3n) { animation-duration: 44s; animation-delay: -17s; }
.santuario-svg .llama { transform-box: fill-box; transform-origin: center bottom; animation: titilar 1.6s ease-in-out infinite alternate; }
.santuario-svg .chorro { transform-box: fill-box; transform-origin: center bottom; animation: pulso-chorro 1.8s ease-in-out infinite alternate; }
.santuario-svg .ala { transform-box: fill-box; transform-origin: center; animation: aleteo 1.6s ease-in-out infinite alternate; }
.santuario-svg .vuelo { animation: volar 22s ease-in-out infinite alternate; }
.santuario-svg #pajaro-02.vuelo { animation-duration: 17s; animation-delay: -6s; }
.santuario-svg #pajaro-03.vuelo { animation-duration: 26s; animation-delay: -13s; }
.santuario-svg #pajaro-04 .ala,
.santuario-svg #pajaro-05 .ala,
.santuario-svg #pajaro-06 .ala { animation: aleteo-posado 6s ease-in-out infinite; }
.santuario-svg .obj:nth-child(odd) .llama { animation-duration: 1.9s; animation-delay: -.7s; }
.santuario-svg .obj { transform-box: fill-box; transform-origin: center bottom; }
.santuario-svg .vela.apagada .llama { display: none; }
.santuario-svg .vela .llama { transition: opacity .6s; }
.santuario-svg .obj.nuevo { animation: aparecer 1.4s cubic-bezier(.2, 1.4, .4, 1) both; }
.santuario-svg .revelar { animation: revelar 2.4s ease-out both; }
.santuario-svg .agua { animation: ola 3s ease-in-out infinite alternate; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes deriva { from { transform: translateX(-24px); } to { transform: translateX(30px); } }
@keyframes titilar { 0% { transform: scale(1, 1); opacity: .92; } 100% { transform: scale(.9, 1.08); opacity: 1; } }
@keyframes pulso-chorro { from { transform: scaleY(.92); } to { transform: scaleY(1); } }
@keyframes aleteo { from { transform: scaleY(.72); } to { transform: scaleY(1); } }
@keyframes volar { from { transform: translate(0, 8px); } to { transform: translate(110px, -22px); } }
@keyframes aleteo-posado {
  0%, 72%, 100% { transform: rotate(0deg); }
  82% { transform: rotate(-8deg); }
  90% { transform: rotate(6deg); }
}
@keyframes aparecer { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); } }
@keyframes revelar { from { opacity: 0; } to { opacity: 1; } }
@keyframes llover {
  0% { transform: translate(9px, -36px); opacity: 0; }
  15% { opacity: .7; }
  85% { opacity: .7; }
  100% { transform: translate(-9px, 36px); opacity: 0; }
}
@keyframes titilar-estrella { from { opacity: 1; } to { opacity: .35; } }
@keyframes latir { from { opacity: .7; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@keyframes llover {
  0% { transform: translate(9px, -36px); opacity: 0; }
  15% { opacity: .7; }
  85% { opacity: .7; }
  100% { transform: translate(-9px, 36px); opacity: 0; }
}
@keyframes titilar-estrella { from { opacity: 1; } to { opacity: .35; } }
@keyframes latir { from { opacity: .7; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@keyframes brillar { from { opacity: .55; } to { opacity: 1; } }
@keyframes ola { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
/* Fechas especiales: la paloma de Pentecostés y su fuego, las cenizas, las luces de Navidad. */
.santuario-svg .paloma { animation: planear 5s ease-in-out infinite alternate; }
.santuario-svg .lengua { animation: descender 4.2s ease-in infinite; }
.santuario-svg .lenguas > g:nth-child(2n) .lengua { animation-duration: 3.6s; animation-delay: -1.4s; }
.santuario-svg .lenguas > g:nth-child(3n) .lengua { animation-duration: 4.8s; animation-delay: -2.6s; }
.santuario-svg .lenguas > g:nth-child(5n) .lengua { animation-delay: -3.3s; }
.santuario-svg .copo { animation: caer-ceniza 6s linear infinite; }
.santuario-svg .copo:nth-child(2n) { animation-duration: 7.5s; animation-delay: -2.2s; }
.santuario-svg .copo:nth-child(3n) { animation-duration: 5.2s; animation-delay: -3.9s; }
.santuario-svg .copo:nth-child(5n+1) { animation-delay: -1.1s; }
.santuario-svg .copo:nth-child(7n+2) { animation-delay: -4.6s; }
.santuario-svg .foco { animation: titilar-estrella 1.8s ease-in-out infinite alternate; }
.santuario-svg .foco:nth-child(2n) { animation-duration: 2.4s; animation-delay: -.9s; }
.santuario-svg .foco:nth-child(3n) { animation-duration: 1.4s; animation-delay: -1.5s; }
.santuario-svg .foco .brillo { opacity: .35; }
.santuario-svg.noche .foco .brillo, .santuario-svg.atardecer .foco .brillo { opacity: 1; }
.santuario-svg .destello { animation: brillar 3s ease-in-out infinite alternate; }
@keyframes planear { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
/* Cada lengua está dibujada a mitad de camino: sale de la paloma y se apaga sobre el techo. */
@keyframes descender {
  0% { transform: translateY(-130px); opacity: 0; }
  15%, 80% { opacity: 1; }
  100% { transform: translateY(118px); opacity: 0; }
}
@keyframes caer-ceniza {
  0% { transform: translate(0, -40px); opacity: 0; }
  12%, 75% { opacity: 1; }
  100% { transform: translate(-16px, 150px); opacity: 0; }
}

/* ---------- Página del santuario: mes y año ---------- */
.escala .titulo-tarjeta { margin-bottom: .625rem; }
.dato-grande { margin: 0 0 .25rem; font-size: 2rem; line-height: 2.25rem; font-weight: 800; color: var(--azul-texto); font-variant-numeric: tabular-nums; }
.dato-grande small { display: block; margin-top: .125rem; font-size: .9375rem; line-height: 1.25rem; font-weight: 600; color: var(--tinta-2); }
.escala .meta-info { margin: .25rem 0 0; }
.escala .proximo { margin: .875rem 0 .5rem; }
.avance { height: .5rem; margin-top: .75rem; background: var(--azul-tinte); border-radius: 999px; overflow: hidden; }
.avance span { display: block; height: 100%; background: var(--azul); border-radius: inherit; }
.inventario {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: .625rem;
}
.inventario li {
  display: flex; align-items: center; gap: .625rem; padding: .75rem .875rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-chico);
  font-size: .9375rem; line-height: 1.25rem;
}
.inventario li > svg { width: 2.25rem; height: 2.25rem; flex: none; }
.inventario strong { font-size: 1.25rem; font-weight: 800; color: var(--azul-texto); font-variant-numeric: tabular-nums; }
.inventario .bloqueado { background: transparent; border-style: dashed; border-color: var(--linea-fuerte); color: var(--tinta-2); }
.inventario .bloqueado > svg { filter: grayscale(1); opacity: .4; }
/* Cada ofrenda con su barra hasta la siguiente: cada una tiene su propio ritmo. */
.inventario .ofrenda { flex: 1; min-width: 0; }
.inventario .avance { height: .375rem; margin-top: .5rem; }
.inventario .candado { width: 1rem; height: 1rem; vertical-align: -.125rem; color: var(--azul-texto); }
.anio-cerrado .escena-anio svg { display: block; width: 100%; height: auto; border-radius: var(--radio-chico); }
.anio-cerrado h3 { margin: .75rem 0 .125rem; }
.como-funciona ul { list-style: none; padding: 0; margin: 0; }
.como-funciona li { display: flex; gap: .75rem; align-items: flex-start; }
.como-funciona li + li { margin-top: .875rem; }
.como-funciona li > svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--azul-texto); margin-top: .125rem; }
.como-funciona p { margin: 0; font-size: .9375rem; line-height: 1.375rem; }

/* ---------- Votaciones ---------- */
/* El nombre del grupo, arriba, abre las votaciones; el punto avisa que falta un voto. */
.punto-aviso {
  display: inline-block; width: .5rem; height: .5rem; margin-left: .375rem; vertical-align: .125rem;
  border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 0 2px var(--azul);
}
.nueva-votacion { margin-bottom: .5rem; }
.votacion-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 1.25rem; align-items: center; gap: .875rem;
  text-decoration: none; color: inherit; transition: border-color .2s, transform .1s;
}
.votacion-item:active { transform: scale(.99); }
.votacion-item .chevron { width: 1.25rem; height: 1.25rem; color: var(--azul-texto); }
.votacion-item h3 {
  margin: .5rem 0 0; font-family: var(--lectura); font-size: 1.25rem; line-height: 1.625rem; font-weight: 600;
  overflow-wrap: anywhere;
}
.votacion-item .meta-info { display: block; margin-top: .375rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: .375rem; }
.estado.abierta { background: var(--exito-tinte); color: var(--exito); }
.estado.borrador { background: var(--azul-tinte); color: var(--azul-texto); }
.estado.votado { background: transparent; color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.estado.elegida { background: var(--amarillo); color: var(--sobre-amarillo); margin-left: .25rem; vertical-align: .125rem; }
.resultado-breve { display: block; margin-top: .25rem; font-size: .9375rem; color: var(--tinta-2); }
.resultado-breve::before { content: "Resultado: "; }
.resultado-breve strong { color: var(--azul-texto); }

.participacion-numero { margin: 0; font-size: 1rem; color: var(--tinta-2); }
.participacion-numero strong { font-size: 2rem; line-height: 2.25rem; font-weight: 800; color: var(--azul-texto); font-variant-numeric: tabular-nums; }
.participacion .meta-info { margin-top: .625rem; }
.lista-resultados { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lista-resultados li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .75rem; align-items: baseline; }
.lista-resultados .avance { grid-column: 1 / -1; margin-top: .25rem; }
.resultado-nombre { font-weight: 600; overflow-wrap: anywhere; }
.resultado-votos { font-size: .875rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aviso-votado {
  display: flex; gap: .625rem; align-items: flex-start; margin: 0 0 .875rem; padding: .875rem 1rem;
  border-radius: var(--radio-chico); background: var(--exito-tinte); color: var(--tinta); font-size: .9375rem; line-height: 1.375rem;
}
.aviso-votado svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--exito); }

.imagen-votacion { margin: 0 0 1rem; text-align: center; }
.imagen-votacion img { display: block; max-width: 100%; max-height: 18rem; height: auto; margin: 0 auto; border-radius: var(--radio-chico); }
.imagen-votacion figcaption { margin-top: .5rem; font-family: var(--lectura); font-style: italic; font-size: .875rem; line-height: 1.25rem; color: var(--tinta-2); }
.opcion-votacion .imagen-votacion img { max-height: 14rem; }
.opcion-votacion > h3 { margin: 0; font-family: var(--lectura); font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: var(--azul-texto); }
.subtitulo-opcion { margin: .25rem 0 0; font-family: var(--lectura); font-style: italic; color: var(--tinta-2); }
.opcion-votacion .oracion-texto { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.oracion-texto h3 { font-family: var(--ui); font-size: 1.125rem; line-height: 1.5rem; color: var(--azul-texto); margin: 1.25em 0 .5em; }
.oracion-texto > h3:first-child { margin-top: 0; }
.oracion-texto ul { padding-left: 1.25em; margin: 0 0 1em; }
.oracion-texto table { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: .875rem; line-height: 1.25rem; margin: 0 0 1em; }
.oracion-texto th, .oracion-texto td { text-align: left; vertical-align: top; padding: .5rem; border-bottom: 1px solid var(--linea); }
.contenido-votacion > :last-child, .opcion-votacion .oracion-texto > :last-child { margin-bottom: 0; }

/* Elegir una opción: toda la franja se toca; la tarjeta elegida queda marcada. */
.elegir {
  display: flex; align-items: center; gap: .75rem; margin: 1rem 0 0; padding: .75rem 1rem; min-height: 3rem;
  border-radius: var(--radio-chico); background: var(--azul-tinte); color: var(--azul-texto);
  font-size: 1rem; font-weight: 600; cursor: pointer;
}
.elegir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.marca-eleccion {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%;
  background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--azul-texto);
}
.marca-eleccion svg { width: 1rem; height: 1rem; opacity: 0; }
.elegir input:checked + .marca-eleccion { background: var(--azul); box-shadow: none; }
.elegir input:checked + .marca-eleccion svg { opacity: 1; color: var(--sobre-azul); }
.elegir input:focus-visible + .marca-eleccion { outline: 2px solid var(--azul-texto); outline-offset: 2px; }
.opcion-votacion.elegible:has(input:checked) { border-color: var(--azul-texto); box-shadow: 0 0 0 1px var(--azul-texto), var(--sombra); }
.barra-votar {
  position: sticky; bottom: calc(var(--nav-alto) + var(--seguro-abajo) + .75rem); z-index: 5;
  margin-top: 1rem;
}
.barra-votar .boton { box-shadow: 0 6px 20px rgba(1, 0, 102, .25); }
.nota-voto { margin: 1rem auto 0; }
.form-votar .seccion-titulo { margin-top: 1.5rem; }

.acciones-coordinador p { margin: 0 0 1rem; }
.boton-texto {
  display: block; width: 100%; min-height: 2.75rem; margin-top: .5rem; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .9375rem; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: .18em;
}
.cerrar-votacion { margin-top: 1.5rem; }

/* Editar una votación. */
fieldset.radios { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
fieldset.radios legend { padding: 0; margin-bottom: .375rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; }
label.radio { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; margin: 0; font-size: 1rem; font-weight: 400; }
input[type=radio] { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--azul-texto); }
input[type=file] { width: 100%; font: inherit; font-size: .9375rem; }
.form-opcion .titulo-opcion { margin: 0 0 1rem; font-size: 1rem; color: var(--azul-texto); }
.form-opcion { counter-increment: opcion; }
[data-opciones] { counter-reset: opcion; }
.form-opcion .titulo-opcion::after { content: " " counter(opcion); }
.imagen-actual { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.imagen-actual img { width: 5rem; height: 5rem; object-fit: contain; border-radius: var(--radio-chico); background: var(--fondo); }
.imagen-actual .campo { margin: 0; }
[data-agregar-opcion] { margin-bottom: 1rem; }
@media (hover: hover) {
  .votacion-item:hover { border-color: var(--azul-linea); }
}
.participacion .avance span, .lista-resultados .avance span { background: var(--azul-texto); }
.lista-resultados .ganadora .avance span { background: var(--amarillo); }

/* La página del grupo: logo, nombre y lema, sus matrimonios y su menú. */
.cabecera-grupo { text-align: center; margin: .5rem 0 1.5rem; }
.logo-grupo { display: block; width: 9rem; height: 9rem; margin: 0 auto 1rem; object-fit: contain; }
.cabecera-grupo h1 { margin: 0; }
.lema-grupo { margin: .5rem auto 0; max-width: 30rem; font-family: var(--lectura); font-style: italic; font-size: 1.125rem; line-height: 1.625rem; color: var(--tinta-2); }
.matrimonios-grupo { list-style: none; margin: 0; padding: 0; }
.matrimonios-grupo li { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .625rem 0; border-top: 1px solid var(--linea); }
.matrimonios-grupo li:first-child { border-top: 0; padding-top: 0; }
.menu-perfil a.fila .estado { margin-left: auto; }

/* La opción del menú del grupo puede llevar una segunda línea (la próxima fecha). */
.menu-grupo a.fila > span:not(.estado) { min-width: 0; }
.menu-grupo a.fila small { display: block; margin-top: .125rem; font-size: .8125rem; line-height: 1.125rem; color: var(--tinta-2); overflow-wrap: anywhere; }

/* ---------- Calendario ---------- */
.anios-cal { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin: 0 0 1rem; }
.anios-cal strong { font-size: 1.25rem; font-weight: 800; color: var(--azul-texto); font-variant-numeric: tabular-nums; }
.anios-cal a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--azul-texto); }
.anios-cal svg { width: 1.25rem; height: 1.25rem; }
.anios-cal .atras { transform: rotate(180deg); }
.proximas-cal { margin-top: 1rem; }
.lista-cal { list-style: none; margin: 0; padding: 0; }
.tarjeta.lista-cal { padding-top: .25rem; padding-bottom: .25rem; }
.fecha-cal { display: flex; align-items: flex-start; gap: .875rem; padding: .75rem 0; border-top: 1px solid var(--linea); }
.fecha-cal:first-child { border-top: 0; }
.dia-cal {
  display: grid; place-items: center; flex: none; width: 2.75rem; padding: .25rem 0; border-radius: var(--radio-chico);
  background: var(--azul-tinte); color: var(--azul-texto); line-height: 1;
}
.dia-cal strong { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dia-cal small { margin-top: .25rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.es-hoy .dia-cal { background: var(--amarillo); color: var(--sobre-amarillo); }
.texto-cal { display: flex; flex-direction: column; gap: .125rem; flex: 1; min-width: 0; padding-top: .125rem; }
.titulo-cal { font-weight: 600; overflow-wrap: anywhere; }
.icono-tipo { width: 1.125rem; height: 1.125rem; margin-right: .375rem; vertical-align: -.1875rem; color: var(--azul-texto); }
.meta-cal { font-size: .875rem; color: var(--tinta-2); }
.detalle-cal { font-size: .875rem; line-height: 1.25rem; color: var(--tinta-2); }
.pasada .titulo-cal, .pasada .dia-cal { opacity: .55; }
.editar-cal { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -.375rem -.5rem 0 0; color: var(--tinta-3); flex: none; }
.editar-cal svg { width: 1.125rem; height: 1.125rem; }
.destacada .fecha-cal { border-color: rgba(243, 242, 242, .18); }
.destacada .dia-cal { background: rgba(255, 204, 0, .16); color: var(--amarillo); }
.destacada .es-hoy .dia-cal { background: var(--amarillo); color: var(--sobre-amarillo); }
.destacada .icono-tipo { color: var(--amarillo); }
.destacada .meta-cal { color: var(--sobre-azul-2); }
.vacio-cal { margin-top: 1.5rem; text-align: center; }
.importar-cal { margin-top: 2rem; }
.boton-texto.peligro { color: var(--error); }

/* ---------- Estudio YouCat: el camino de niveles ---------- */
.avance-youcat .dato-grande, .acierto h1 { color: var(--sobre-azul); }
.avance-youcat .dato-grande small { color: var(--sobre-azul-2); }
.avance-youcat .avance { margin: .75rem 0 1.25rem; background: rgba(243, 242, 242, .18); }
.avance-youcat .avance span { background: var(--amarillo); }
/* El camino es una ilustración, como el santuario: de borde a borde y con los mismos colores en
   modo oscuro. Los tramos (uno por parte) se apilan sin cortes. */
.dibujos-youcat { position: absolute; width: 0; height: 0; overflow: hidden; }
/* El visor: arriba de todo y del mismo tamaño que el santuario del inicio (4:5, de borde a borde).
   El camino se desplaza adentro, como por una ventana. Sin barra de desplazamiento. */
.camino-visor { margin: calc(-1.5rem - 2px) -1rem 1rem; overflow: hidden; background: #22344A; }
.mensajes ~ .camino-visor { margin-top: 0; }
@media (min-width: 40rem) {
  .camino-visor { border-radius: 0 0 var(--radio) var(--radio); box-shadow: var(--sombra); }
}
.camino {
  position: relative; aspect-ratio: 4 / 5; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.camino::-webkit-scrollbar { display: none; }
.camino:focus-visible { outline: 3px solid var(--amarillo); outline-offset: -3px; }
.tramo { position: relative; }
.camino-svg { display: block; width: 100%; height: auto; }
.camino-svg .llama { transform-box: fill-box; transform-origin: center bottom; animation: titilar 1.6s ease-in-out infinite alternate; }
.camino-svg .estrella { animation: titilar-estrella 3.2s ease-in-out infinite alternate; }
.camino-svg .estrella:nth-child(3n) { animation-duration: 4.1s; animation-delay: -1.3s; }
.camino-svg .estrella:nth-child(4n+1) { animation-duration: 2.6s; animation-delay: -2.1s; }
.camino-svg .luciernaga { animation: luciernaga 3s ease-in-out infinite alternate; }
.camino-svg .luciernaga:nth-of-type(3n) { animation-duration: 4.2s; animation-delay: -1.5s; }
.camino-svg .luciernaga:nth-of-type(4n+1) { animation-duration: 2.4s; animation-delay: -.8s; }
@keyframes luciernaga { from { opacity: .15; transform: translateY(0); } to { opacity: 1; transform: translateY(-3px); } }

/* Las piedras del sendero: una por nivel. Cerradas en los grises «sin color» del santuario,
   doradas al completarlas y la que sigue, más grande y con su halo. */
.niveles { list-style: none; margin: 0; padding: 0; }
.niveles li { position: absolute; transform: translate(-50%, -50%); }
.piedra {
  position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.125rem; border-radius: 50%;
  font-family: var(--ui); font-size: .875rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
  text-decoration: none; color: #6F6A64;
  background: radial-gradient(ellipse at 62% 32%, #E2DDD5 0 18%, #C9C3BA 48%, #A39C94 100%);
  box-shadow: inset 0 -.25rem 0 rgba(0, 0, 0, .1), 0 .2rem 0 #8E8780, 0 .45rem .6rem -.1rem rgba(30, 20, 12, .35);
}
.piedra::after {
  content: ""; position: absolute; top: .25rem; right: .55rem; width: .6rem; height: .25rem; border-radius: 50%;
  background: rgba(255, 255, 255, .55); transform: rotate(-12deg);
}
.piedra.completado {
  color: #010066;
  background: radial-gradient(ellipse at 62% 32%, #FCE7B5 0 16%, #F2C57C 46%, #E3982F 100%);
  box-shadow: inset 0 -.25rem 0 rgba(122, 75, 42, .18), 0 .2rem 0 #B8741F, 0 .45rem .6rem -.1rem rgba(30, 20, 12, .35);
}
.piedra.actual {
  width: 3.4rem; height: 2.65rem; font-size: 1.0625rem; color: #010066;
  background: radial-gradient(ellipse at 62% 32%, #FFFBEA 0 20%, #FCE7B5 45%, #F2C57C 100%);
  box-shadow: inset 0 -.3rem 0 rgba(122, 75, 42, .15), 0 .25rem 0 #C98A2E, 0 0 0 .3rem rgba(255, 204, 0, .55), 0 .5rem .8rem -.1rem rgba(30, 20, 12, .4);
}
.piedra.actual::before {
  content: ""; position: absolute; inset: -1.4rem -1.6rem; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 212, 142, .9), rgba(242, 197, 124, 0));
  animation: halo-piedra 2s ease-in-out infinite alternate;
}
@keyframes halo-piedra { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.1); } }
.piedra .aqui, .marcador-viaje .aqui {
  position: absolute; bottom: calc(100% + .45rem); left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: .25rem .625rem; border-radius: 999px; background: var(--azul); color: var(--sobre-azul);
  font-size: .75rem; font-weight: 600; line-height: 1rem; box-shadow: 0 4px 12px rgba(1, 0, 102, .3);
  animation: flotar 1.6s ease-in-out infinite alternate;
}
.piedra .aqui::after, .marcador-viaje .aqui::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -.3rem;
  border: .3rem solid transparent; border-top-color: var(--azul);
}
@keyframes flotar { from { translate: 0 0; } to { translate: 0 -.25rem; } }
.piedra:active { transform: scale(.94); }
a.piedra:focus-visible { outline: 3px solid #010066; outline-offset: 3px; }

/* Al volver al camino (app.js): lo completado desde la última visita se revela piedra por piedra
   y el «Estás aquí» viaja por el sendero hasta el nivel que sigue. Mientras tanto, esas piedras
   y la actual se ven como antes: cerradas. */
.animando .piedra[data-nuevo]:not(.revelada), .animando .piedra.actual {
  width: 2.75rem; height: 2.125rem; font-size: .875rem; color: #6F6A64;
  background: radial-gradient(ellipse at 62% 32%, #E2DDD5 0 18%, #C9C3BA 48%, #A39C94 100%);
  box-shadow: inset 0 -.25rem 0 rgba(0, 0, 0, .1), 0 .2rem 0 #8E8780, 0 .45rem .6rem -.1rem rgba(30, 20, 12, .35);
}
.animando .piedra.actual::before, .animando .piedra .aqui { display: none; }
.piedra.revelada { animation: revelar-piedra .7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes revelar-piedra {
  0% { transform: scale(.75); filter: brightness(1.7); }
  55% { transform: scale(1.2); filter: brightness(1.3); }
  100% { transform: scale(1); filter: none; }
}
.marcador-viaje { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; }
.marcador-viaje .anillo {
  position: absolute; left: -2.05rem; top: -1.6rem; width: 4.1rem; height: 3.2rem; border-radius: 50%;
  border: .25rem solid rgba(255, 204, 0, .85);
  box-shadow: 0 0 1.25rem .25rem rgba(247, 212, 142, .8), inset 0 0 .75rem rgba(247, 212, 142, .6);
}
.marcador-viaje .aqui { bottom: 1.85rem; left: 0; }

/* El cartel de cada parte cuelga del pórtico, sobre el sendero. */
.cartel {
  position: absolute; left: 50%; transform: translateX(-50%); width: min(15.5rem, 64%);
  display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem;
  border-radius: .625rem; color: #FBF8F1;
  background: linear-gradient(#8C5A34, #7A4B2A); border: 2px solid #55331C;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 14px -4px rgba(30, 20, 12, .45);
}
.cartel::before, .cartel::after {
  content: ""; position: absolute; bottom: 100%; width: 2px; height: .5rem; background: #55331C;
}
.cartel::before { left: 1.25rem; }
.cartel::after { right: 1.25rem; }
.cartel .num {
  display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: #F2C57C; color: #010066; font-weight: 800; font-size: .875rem;
}
.cartel strong { display: block; font-size: .875rem; line-height: 1.125rem; }
.cartel small { display: block; margin-top: .125rem; font-size: .75rem; line-height: 1rem; color: #E9D8C0; }

/* Un nivel: la pregunta, su respuesta y el quiz. */
.pregunta-youcat { font-family: var(--lectura); font-weight: 600; }
.respuesta-youcat p:first-child { margin-top: 0; }
.respuesta-youcat strong { font-weight: 600; }
.acierto h1 { margin: 0 0 .5rem; }
.acierto .intro { margin: 0 0 1.25rem; font-family: var(--lectura); font-size: 1.0625rem; line-height: 1.5rem; }
.acierto .boton + .boton { margin-top: .625rem; }
.quiz { display: grid; gap: .75rem; }
.quiz .intro { margin: 0; font-weight: 600; }
.opcion {
  display: block; width: 100%; padding: 1rem 1.125rem; text-align: left; cursor: pointer;
  background: var(--superficie); color: var(--tinta); border: 1.5px solid var(--linea); border-radius: var(--radio);
  font-family: var(--lectura); font-size: 1rem; line-height: 1.5rem; box-shadow: var(--sombra);
  transition: border-color .15s, transform .1s;
}
.opcion:active { transform: scale(.99); }
.opcion.incorrecta { margin: 0 0 1rem; border-color: var(--error); background: var(--error-tinte); cursor: default; box-shadow: none; }
.equivocada .titulo-tarjeta { color: var(--error); }
.equivocada .lectura { margin: 0; }
@media (hover: hover) {
  .opcion:hover { border-color: var(--azul-linea); }
}

/* ---------- El altar: se entra tocando el santuario con la puerta abierta ---------- */
.santuario-svg .entrada-altar { cursor: pointer; }
/* Al tocar el santuario, la escena se acerca a la puerta y la luz del interior la llena. */
.santuario-inicio .escena { position: relative; }
.santuario-inicio .escena .santuario-svg { transform-origin: 50% 56%; }
.santuario-inicio .escena.entrando .santuario-svg { transform: scale(2.6); transition: transform .7s cubic-bezier(.5, 0, .9, .6); }
.santuario-inicio .escena::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 56%, #FFF6DD 0, #F7D48E 45%, #B5743A 100%);
}
.santuario-inicio .escena.entrando::after { opacity: 1; transition: opacity .45s ease-in .25s; }
dialog.modal-altar[open] { animation: entrar-altar .5s ease-out; }
dialog.modal-altar::backdrop { background: #FBF6EC; }
@keyframes entrar-altar { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }

/* El interior arriba de todo, de borde a borde, como la escena del inicio y del mismo tamaño. */
/* Se ve por una ventana de 4:5, como la escena del inicio, que se desplaza de la puerta al altar. */
.altar-escena {
  margin: 0 -1rem 1rem; aspect-ratio: 4 / 5; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
.altar-escena::-webkit-scrollbar { display: none; }
.altar-pagina .altar-escena { margin-top: calc(-1.5rem - 2px); }
.modal-altar .interior { position: relative; padding-top: 0; }
.cerrar-altar { position: absolute; z-index: 1; top: calc(var(--seguro-arriba) + .75rem); right: .75rem; }
@media (min-width: 40rem) {
  .altar-escena { border-radius: 0 0 var(--radio) var(--radio); box-shadow: var(--sombra); }
}
.altar-svg { display: block; width: 100%; height: auto; }
.altar-svg .altar-leyenda { font-size: 10px; letter-spacing: .5px; }
.altar-svg .altar-banda { font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.altar-svg .halo { transform-box: fill-box; transform-origin: center; animation: latir 6s ease-in-out infinite alternate; }
.altar-svg .llama { transform-box: fill-box; transform-origin: center bottom; animation: titilar 1.6s ease-in-out infinite alternate; }
.altar-svg .llama:nth-of-type(2n) { animation-duration: 1.9s; animation-delay: -.7s; }
/* Lo que el grupo deja hoy en el interior: el humo del incienso sube y se desvanece. */
.altar-svg .humo { opacity: .4; stroke-dasharray: 60 400; animation: humo 6s linear infinite; }
.altar-svg .humo-2 { animation-delay: -2s; }
.altar-svg .humo-3 { animation-delay: -4s; }
.altar-svg .brasas { animation: brillar 1.8s ease-in-out infinite alternate; }
@keyframes humo {
  0% { stroke-dashoffset: 0; opacity: 0; }
  15% { opacity: .55; }
  100% { stroke-dashoffset: -400; opacity: 0; }
}
.interior-gestos { display: grid; gap: .625rem; }
.interior-gestos .boton.bloque + .boton.bloque { margin-top: 0; }
.interior-hoy { margin: .25rem 0 0; font-size: .875rem; line-height: 1.25rem; text-align: center; }
.intencion-dejada {
  margin: 0; padding: .75rem 1rem; border-radius: var(--radio-chico); background: var(--amarillo-tinte);
  color: var(--tinta); font-size: .9375rem; text-align: center;
}
.intencion-texto { width: 100%; margin: 0 0 1rem; }
.lista-en-hoja { margin: 0 0 1rem; }
.lista-en-hoja .item-numerado { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.hoja-interior form + .boton { margin-top: .625rem; }