/* 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); }
.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(4, 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 1.25rem; 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); }

/* 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 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); }

.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); }
.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 ---------- */
.form-ofrecer > .seccion-titulo:first-of-type { margin-top: 0; }

/* 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; }
.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; }

/* ---------- 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; }
.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; }

/* ---------- 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); } }

/* ---------- 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); }