/* Dirección visual Vigilia: modo oscuro (.noche) y modo claro (.dia). Ver Decisiones.md, 6 y 8 de octubre. */

/* Letras guardadas en la app (licencia SIL Open Font, ver Fuentes/Licencias.txt): Spectral para
   títulos, frases y preguntas; Manrope para todo lo demás. */
@font-face{font-family:Manrope;src:url("Fuentes/Manrope.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:Spectral;src:url("Fuentes/Spectral-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Spectral;src:url("Fuentes/Spectral-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:Spectral;src:url("Fuentes/Spectral-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Spectral;src:url("Fuentes/Spectral-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}

.noche{--bg:#0d1120;--rgb:13,17,32;--ink:#ece4d4;--soft:#d8cfbd;--muted:#a9a294;--accent:#e8b86b;--on:#1a1408;--mark:#e8b86b;--oro-texto:#e8b86b;--bead:rgba(236,228,212,.22);--line:rgba(236,228,212,.28);--glow:rgba(13,17,32,.6);--hoja:#161b2f}
.dia{--bg:#f6f6f4;--rgb:246,246,244;--ink:#1b1d26;--soft:#34363f;--muted:#5a5c66;--accent:#e8b86b;--on:#1a1408;--mark:#a8741f;--oro-texto:#8f6218;--bead:rgba(27,29,38,.16);--line:rgba(27,29,38,.22);--glow:rgba(246,246,244,.75);--hoja:#ffffff}

*{box-sizing:border-box;margin:0;padding:0}
:root{--seguro:env(safe-area-inset-top,0px);--radio-sup:20px;--radio-mini:12px;--letra:1}
/* Tamaño de letra (Ajustes): cada font-size va multiplicado por --letra. Los íconos (.ic) no. */
/* Redondeos: botones, etiquetas e interruptores en píldora (999px); superficies (hojas, accesos)
   en --radio-sup; miniaturas y segmentos en --radio-mini; puntos y cuentas, círculos. */
html,body{background:var(--bg);color:var(--ink)}
/* Cuentas macizas de la tira: el color de la cuenta mezclado con el fondo. */
.noche,.dia{--cuenta:var(--bead);--cuenta-hecha:var(--mark)}
@supports (color:color-mix(in srgb,red,blue)){
  .noche{--cuenta:color-mix(in srgb,var(--ink) 24%,var(--bg));--cuenta-hecha:color-mix(in srgb,var(--mark) 55%,var(--bg))}
  .dia{--cuenta:color-mix(in srgb,var(--ink) 18%,var(--bg));--cuenta-hecha:color-mix(in srgb,var(--mark) 55%,var(--bg))}
}
body{font-family:Manrope,system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;transition:background .4s}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
/* El título al que va el foco al cambiar de pantalla (para VoiceOver y teclado): sin marco. */
[tabindex="-1"]:focus{outline:none}
.lector{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#app{position:relative;max-width:520px;margin:0 auto;min-height:100dvh}

.vista{position:relative;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.vista.fija{height:100dvh}
.vista.fija .cuerpo{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.t1{font-family:Spectral,serif;font-weight:300;letter-spacing:-.01em}
/* Íconos (dibujos de Tabler, ver App.js) */
.ico{display:block;width:1em;height:1em;flex-shrink:0}
.k{font-size:calc(12px*var(--letra));color:var(--muted)}

/* Pintura de fondo */
.hero{position:absolute;inset:0 0 34% 0;overflow:hidden}
/* En el rezo la pintura baja más: el texto la tapa desde arriba según lo que haya que leer,
   y con "solo el nombre" queda casi toda a la vista. El borde de abajo queda siempre debajo
   del texto (150 px es menos que el pie más corto), para que no se vea la costura. */
.rezo .hero{bottom:150px}
/* Las imágenes (--pleno:1) van hasta arriba de la pantalla, debajo de la isla del iPhone. Sin
   --pleno (las pinturas con una cara arriba, ver Generar datos.py) arrancan debajo de la isla y
   de los botones de arriba, con el borde fundido en el fondo.
   El acercamiento crece hacia abajo para no esconder las caras. */
.arte{position:absolute;left:0;right:0;top:calc((1 - var(--pleno,0))*(var(--seguro) + 24px + var(--extra,0px)) - var(--subir,0px));height:calc(100% + var(--subir,0px));background-size:cover;background-repeat:no-repeat;transform:scale(var(--z,1));transform-origin:50% 0;opacity:0;transition:opacity 1s ease;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,var(--pleno,0)) 0,#000 72px);mask-image:linear-gradient(180deg,rgba(0,0,0,var(--pleno,0)) 0,#000 72px)}
.arte.on{opacity:1}
.fundido{position:absolute;inset:-1px 0;background:linear-gradient(180deg,rgba(var(--rgb),.15) 0%,rgba(var(--rgb),0) 26%,rgba(var(--rgb),.72) 64%,rgba(var(--rgb),.96) 84%,var(--bg) 97%)}
/* De día, fundir hacia el blanco desde tan arriba lava la imagen: se funde recién al final. */
.dia .fundido{background:linear-gradient(180deg,rgba(var(--rgb),0) 0%,rgba(var(--rgb),0) 52%,rgba(var(--rgb),.5) 76%,rgba(var(--rgb),.88) 89%,var(--bg) 97%)}
/* Una sola pasada, lenta, y quieta después (un acercamiento sin fin gastaba batería). */
@media (prefers-reduced-motion:no-preference){.arte{animation:acercar 70s cubic-bezier(.3,.1,.3,1) forwards}}
/* Inmersión: el fondo se corre más que los protagonistas, que se corren en sentido contrario dentro de él.
   El fondo va apenas más grande, para que al correrse no se le vea el borde. Las dos capas van siempre
   (quietas, se ven igual que la ilustración); con el modo inmersivo apagado (.quieto) o el movimiento
   reducido, no se mueven. Fondo 18 px, protagonistas 8 px (más que la primera versión, José, 11 de octubre). */
.arte.honda,.mq-arte.honda{scale:1.1;translate:calc(var(--hx,0)*-18px) calc(var(--hy,0)*-18px);will-change:transform}
.honda > .personas{position:absolute;inset:0;background-size:inherit;background-position:inherit;background-repeat:no-repeat;translate:calc(var(--hx,0)*10px) calc(var(--hy,0)*10px);will-change:transform}
.ign-personas{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;transition:transform 1.8s cubic-bezier(.45,0,.15,1);pointer-events:none}
.ign-marco.honda .ign-img{translate:calc(var(--hx,0)*-18px) calc(var(--hy,0)*-18px)}
.ign-marco.honda .ign-personas{translate:calc(var(--hx,0)*-8px) calc(var(--hy,0)*-8px)}
.quieto .honda,.quieto .honda > .personas,.quieto .ign-marco.honda :is(.ign-img,.ign-personas){scale:none;translate:none}
@media (prefers-reduced-motion:reduce){.honda,.honda > .personas,.ign-marco.honda :is(.ign-img,.ign-personas){scale:none;translate:none}.ign-personas{transition:none}}
@keyframes acercar{from{transform:scale(calc(var(--z,1)*1.02))}to{transform:scale(calc(var(--z,1)*1.13))}}

.barra{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--seguro) + 14px) 18px 0}
.ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:rgba(var(--rgb),.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:20px}
.ic .g-ros{width:22px;height:22px}
.ic.chico{width:44px;height:44px;font-size:17px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--muted)}
.fantasma{visibility:hidden}
/* "Tu opinión", arriba a la izquierda del inicio: el mismo vidrio que Ajustes, con su nombre. */
.ic.opina{width:auto;display:flex;gap:7px;padding:0 16px 0 13px;border-radius:999px;font-size:calc(13px*min(var(--letra),1.15));font-weight:600}
.ic.opina .ico{width:18px;height:18px}

.cuerpo{position:relative;z-index:2;margin-top:auto;padding:28px 26px calc(env(safe-area-inset-bottom) + 22px);background:linear-gradient(180deg,rgba(var(--rgb),0) 0,var(--bg) 28px)}
.vista h1,.vista h2,.lift{text-shadow:0 1px 14px var(--glow)}

/* La entrada (José, 11 de octubre): al abrir la app, un momento quieto, con una luz cálida que se
   enciende y respira (más adelante, el logo). Está en index.html, para verse desde el primer instante;
   App.js la abre al inicio por capas (ver entrada()). Mientras tanto, las capas esperan ocultas. */
.entrada{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--bg);pointer-events:none}
.entrada i{width:min(60vw,240px);aspect-ratio:1;margin-bottom:8dvh;border-radius:50%;background:radial-gradient(circle,rgba(255,242,218,.95) 0,rgba(244,206,140,.62) 4%,rgba(232,184,107,.22) 22%,rgba(232,184,107,.07) 44%,rgba(232,184,107,0) 68%);animation:encender 1.6s cubic-bezier(.16,1,.3,1) both,respiro 4s ease-in-out 1.6s infinite}
.dia .entrada i{background:radial-gradient(circle,rgba(232,184,107,.95) 0,rgba(232,184,107,.6) 4%,rgba(232,184,107,.24) 22%,rgba(232,184,107,.08) 44%,rgba(232,184,107,0) 68%)}
@keyframes encender{from{opacity:0;transform:scale(.45)}}
@keyframes respiro{50%{transform:scale(1.07)}}
.inicio.entrando .personas,.inicio.entrando > .barra,.inicio.entrando > .cuerpo{opacity:0}
.inicio.llegando > .barra,.inicio.llegando > .cuerpo{pointer-events:none}

/* Inicio */
.grupo-t{font-size:calc(35px*var(--letra));line-height:1.05;margin:6px 0 8px}
.grupo-sel{display:block;width:100%;min-height:44px;text-align:left}
.grupo-sel .ico{display:inline-block;width:18px;height:18px;color:var(--muted);margin-left:8px;vertical-align:middle}
.sub{font-size:calc(14px*var(--letra));color:var(--soft);line-height:1.45}
.pregunta{font-size:calc(19px*var(--letra));font-weight:600;margin:22px 0 12px;letter-spacing:-.01em}
.btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:999px;padding:15px 22px;font-size:calc(15px*var(--letra));transition:transform .2s cubic-bezier(.16,1,.3,1)}
.btn:active{transform:scale(.98)}
.btn.principal{background:var(--accent);color:var(--on);font-weight:600}
.btn small{display:block;font-weight:500;font-size:calc(12px*var(--letra));opacity:.75;margin-top:1px}
.btn.centro{justify-content:center}
.btn.alt{border:1px solid var(--line);margin-top:10px}
.btn .min{font-size:calc(13px*var(--letra));font-weight:500;flex-shrink:0}
.btn.alt .min{color:var(--muted)}
.accesos{display:flex;gap:8px;margin-top:14px}
.mini{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:calc(12px*var(--letra));font-weight:500;background:rgba(var(--rgb),.5);border:1px solid var(--line);border-radius:var(--radio-sup);padding:10px 4px 9px;white-space:nowrap}
.mini .ico{width:18px;height:18px;color:var(--mark)}
/* Retomar, o la primera vez: el botón principal va primero, sin la pregunta del tiempo. */
.sub + .btn{margin-top:22px}
.btn.primera{justify-content:center;text-align:center}
.solo-acerca{display:flex;align-items:center;gap:6px;margin:12px auto 0}
.solo-acerca .ico{width:16px;height:16px;color:var(--mark)}

/* Rezo */
.cinco{display:flex;gap:7px;padding:10px 13px;border-radius:999px;background:rgba(var(--rgb),.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cinco i{width:9px;height:9px;border-radius:50%;border:1.3px solid var(--ink);opacity:.45}
.cinco i.hecho{opacity:1;background:var(--mark);border-color:var(--mark)}
.cinco i.ahora{opacity:1;border-color:var(--mark);background:conic-gradient(var(--mark) calc(var(--p,0)*1turn),transparent 0)}
.g-arte{display:none}
.con-mapa .g-ros{display:none}.con-mapa .g-arte{display:block}

.rezo .titulo{font-size:calc(25px*var(--letra));line-height:1.12;margin:4px 0 4px}
.rezo .cita{font-size:calc(12px*var(--letra));color:var(--muted);margin-bottom:10px}
.rezo .mira{font-family:Spectral,serif;font-style:italic;font-weight:300;font-size:calc(16px*var(--letra));line-height:1.42;color:var(--soft);margin-bottom:14px;min-height:1.42em;transition:opacity .5s}
/* Lo que se contempla en cada misterio: cerrado, la píldora "Para contemplar", igual a la del
   nombre de la oración y centrada como ella; abierto, el texto y al final una flechita para cerrarlo. */
.abre-mira,.cierra-mira{display:none}
.con-frase:not(.mira-abierta) .mira{display:none}
.con-frase:not(.mira-abierta) .abre-mira{display:flex;align-items:center;width:max-content;min-height:44px;margin:-8px auto 6px}
.con-frase.mira-abierta .cierra-mira{display:inline-grid}
.cierra-mira{position:relative;place-items:center;width:24px;height:1em;margin-left:2px;vertical-align:-.08em;color:var(--muted)}
.cierra-mira::before{content:'';position:absolute;inset:-14px -10px}
.cierra-mira .ico{width:16px;height:16px}
.tira{display:block;width:100%;height:26px;margin:0 0 14px;overflow:visible}
/* Pasar una cuenta: se desliza por el hilo hacia el Padrenuestro, como en el Rosario físico.
   Las cuentas son macizas, para que el hilo no se vea a través. */
.tira .hebra{stroke-width:1.2}
.tira .hilo{stroke:transparent;stroke-width:3.4;stroke-linecap:round;transition:stroke .35s}
.tira .hilo.actual{stroke:var(--mark)}
.tira .nudo{fill:var(--muted)}
.tira .padre,.tira .ave{fill:var(--cuenta);transition:fill .35s}
.tira .ave{transform-box:fill-box;transform-origin:center;transform:translateX(calc(var(--x)*1px));transition:fill .35s,transform .55s cubic-bezier(.2,.8,.2,1)}
.tira .hecha{fill:var(--cuenta-hecha)}
.tira .actual{fill:var(--mark)}
.tira .ave.actual{transform:translateX(calc(var(--x)*1px)) scale(1.12)}
.guia{font-size:calc(15px*var(--letra));line-height:1.5;color:var(--muted);margin-bottom:8px}
.guia:empty{display:none}
/* A dos voces, cuando empezás vos, tu parte va arriba y la de la voz abajo. */
.todos + .guia{margin:8px 0 0}
.todos{font-size:calc(18px*var(--letra));line-height:1.4;font-weight:500}
.todos.largo{font-size:calc(15px*var(--letra));line-height:1.45}
.todos span{transition:color .4s}
/* Texto de las oraciones: solo el nombre (abajo, en la etiqueta). Ver Decisiones.md, 7 de octubre. */
.sin-texto .guia,.sin-texto .todos{display:none}
.todos.sonando span{color:var(--muted)}
.todos.sonando span.ahora{color:var(--ink)}
/* A dos voces: la frase que dice quien guía se resalta; mientras habla, tu parte espera atenuada;
   cuando termina, tu parte sube, "Ahora vos" aparece arriba y la cuenta de la tira late (ver relevo()
   en App.js). Se atenúa con color y no con opacidad, para que todo se lea (contraste AA; auditoría
   de Impeccable, 11 de octubre). El lugar de "Ahora vos" está siempre reservado: nada se mueve. */
.guia,.todos{transition:color .5s}
.guia span{transition:color .4s}
.guia.sonando span.ahora{color:var(--ink)}
.rezo.guiando .todos{color:var(--muted)}
.con-relevo .todos::before{content:'Ahora vos';content:'Ahora vos' / '';display:block;font-size:calc(13px*var(--letra));font-weight:600;line-height:1.5;color:var(--oro-texto);opacity:0;transition:opacity .4s}
.con-relevo.tu-turno .todos::before{opacity:1}
@media (prefers-reduced-motion:no-preference){.rezo.tu-turno .tira .actual{animation:turno 1.8s ease-in-out infinite}}
@keyframes turno{50%{opacity:.4}}
.pie{position:relative;display:grid;grid-template-columns:1fr max-content 1fr;column-gap:8px;align-items:center;margin-top:12px}
.pie > .ic{justify-self:start}
.controles{display:flex;justify-self:end}
/* La velocidad de la voz: una píldora chica, como la de los audios de WhatsApp. */
.ic.chico.vel{width:auto;min-width:44px}
/* Con la letra muy grande, la píldora crece menos, para dejarle lugar al nombre de la oración. */
.vel span{min-width:46px;text-align:center;padding:4px 7px;border-radius:999px;background:rgba(127,127,127,.16);font-size:calc(12px*min(var(--letra),1.15));font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--soft)}
.vel[hidden]{display:none}
/* El nombre de la oración: tocarlo muestra u oculta el texto entero. */
.etq{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center}
.etq span,.abre-mira span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 14px;border:1px solid var(--line);border-radius:999px;font-size:calc(12px*min(var(--letra),1.2));white-space:nowrap;color:var(--soft);background:rgba(var(--rgb),.35)}
.etq .ico,.abre-mira .ico{width:14px;height:14px;color:var(--muted)}
.etq.vacia{visibility:hidden}
/* Para VoiceOver y teclado: invisible hasta que recibe el foco. */
.siguiente{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.siguiente:focus-visible{left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);width:auto;height:44px;clip-path:none;padding:0 14px;border-radius:999px;font-size:calc(13px*var(--letra));background:var(--accent);color:var(--on)}
.pista-rezo{font-size:calc(14px*var(--letra));line-height:1.4;color:var(--soft);text-align:center;margin-top:2px;text-wrap:balance}
/* El pie (volver, el nombre de la oración, la voz) queda siempre a la vista, aunque con letra grande
   o "Para contemplar" abierto el texto no entre y se desplace por detrás (auditoría, 11 de octubre). */
.rezo .cuerpo{padding-bottom:0}
.rezo .abajo{position:sticky;bottom:0;z-index:1;margin-top:12px;padding:8px 0 calc(env(safe-area-inset-bottom) + 22px);background:linear-gradient(180deg,rgba(var(--rgb),0),var(--bg) 8px)}
.rezo .abajo .pie{margin-top:0}
.pista-rezo:empty{display:none}

.pide,.credito,.vida-q,.acciones{display:none}
.es-anuncio .titulo{font-size:calc(33px*var(--letra));line-height:1.06;margin-bottom:8px}
.es-anuncio .cita{font-size:calc(14px*var(--letra));margin-bottom:22px}
.es-anuncio .pide{display:block;margin-bottom:22px}
.pide .k{display:block;margin-bottom:4px}
.fruto{display:block;font-family:Spectral,serif;font-style:italic;font-weight:500;font-size:calc(22px*var(--letra));line-height:1.15;color:var(--mark)}
.es-anuncio .credito{display:block;font-size:calc(11px*var(--letra));line-height:1.35;color:var(--muted);text-align:right;margin:0 0 18px 30%}
.es-anuncio .mira,.es-anuncio .tira,.es-anuncio .guia,.es-anuncio .todos{display:none}
.es-anuncio .acciones,.es-vida .acciones,.es-intencion .acciones{display:flex;flex-direction:column;gap:10px;align-items:center}
.acciones .btn.alt{margin-top:0}
.es-vida .fundido,.es-intencion .fundido{background:linear-gradient(180deg,rgba(var(--rgb),.55) 0%,rgba(var(--rgb),.8) 50%,var(--bg) 100%)}
.dia .es-vida .fundido,.dia .es-intencion .fundido{background:linear-gradient(180deg,rgba(var(--rgb),.3) 0%,rgba(var(--rgb),.5) 50%,var(--bg) 100%)}
/* Por quién se reza, antes de empezar (ver Decisiones.md, 8 de octubre). */
.explica,.papa-t{display:none}
.es-intencion .cita,.es-intencion .mira,.es-intencion .tira,.es-intencion .guia,.es-intencion .todos{display:none}
.es-intencion .titulo{font-size:calc(33px*var(--letra));line-height:1.06;margin-bottom:12px}
.es-intencion .explica{display:block;font-size:calc(15px*var(--letra));line-height:1.5;color:var(--soft);margin-bottom:26px}
.con-papa .papa-t{display:block;margin-bottom:26px;font-family:Spectral,serif;font-style:italic;font-weight:500;font-size:calc(20px*var(--letra));line-height:1.2;color:var(--mark)}
.es-vida .titulo,.es-vida .cita,.es-vida .mira,.es-vida .tira,.es-vida .guia,.es-vida .todos{display:none}
.es-vida .vida-q{display:block;font-family:Spectral,serif;font-weight:300;font-size:calc(24px*var(--letra));line-height:1.24;margin:10px 0 30px}
/* Escuchando, después de la pregunta: el botón se va llenando mientras dura el silencio, para
   que se vea que el rezo sigue y no que se cortó. */
.btn.principal.esperando{position:relative;isolation:isolate;overflow:hidden;background:rgba(232,184,107,.4)}
.btn.principal.esperando::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--accent);transform-origin:left;transform:scaleX(0);animation:llenar var(--espera,8s) linear forwards}
@keyframes llenar{to{transform:scaleX(1)}}
.enlace{font-size:calc(13px*var(--letra));color:var(--muted);min-height:44px;padding:6px 12px}

/* Mapa */
.mapa{position:absolute;inset:0;z-index:4;background:var(--bg);display:flex;flex-direction:column;padding:calc(var(--seguro) + 76px) 26px calc(env(safe-area-inset-bottom) + 24px);opacity:0;pointer-events:none;transition:opacity .35s}
.con-mapa .mapa{opacity:1;pointer-events:auto}
.mapa .mapa-t{font-size:calc(21px*var(--letra));line-height:1.15;margin:2px 0 6px}
.ros-caja{position:relative;flex:1;min-height:0}
.ros-caja .ros{position:absolute;inset:0;width:100%;height:100%}
/* La pregunta para tu vida, en el hueco del Rosario (José, 11 de octubre). El tamaño y el lugar los
   calcula encajarCentro() en App.js, para que entre entera. */
.ros-centro{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;opacity:0;transition:opacity .6s ease;pointer-events:none}
.ros-centro.on{opacity:1}
.ros-centro span{display:block;font-family:Spectral,serif;font-weight:300;line-height:1.28;color:var(--ink);text-wrap:balance}
.aqui{font-size:calc(15px*var(--letra));text-align:center;margin-top:10px}
.pista{font-size:calc(12px*var(--letra));color:var(--muted);text-align:center;margin-top:4px}
.ros .cuenta{fill:var(--bg);stroke:var(--muted);stroke-width:1;transform-box:fill-box;transform-origin:center;transition:all .35s}
.ros .solida{fill:var(--muted);stroke:none}
.ros .hecho{fill:var(--mark);stroke:var(--mark);opacity:.5}
.ros .ahora{fill:var(--mark);stroke:var(--mark);opacity:1;transform:scale(1.55)}
.ros .mov{transform:translate(calc(var(--x)*1px),calc(var(--y)*1px));transition:fill .35s,stroke .35s,opacity .35s,transform .55s cubic-bezier(.2,.8,.2,1)}
.ros .mov.ahora{transform:translate(calc(var(--x)*1px),calc(var(--y)*1px)) scale(1.4)}
.ros .nudo{fill:var(--muted);opacity:.7}
.ros .cadena{fill:none;stroke:transparent;stroke-width:3;stroke-linecap:round}
.ros .cadena.hecho{stroke:var(--mark);opacity:.4}
.ros .cadena.ahora{stroke:var(--mark);stroke-width:5.5;transform:none}
/* Las cuentas que vuelan entre la tira y el mapa (ver volarCuentas en App.js). */
.vuelo{position:fixed;inset:0;z-index:60;pointer-events:none}
.vuelo i{position:absolute;box-sizing:border-box;border-radius:50%;border-style:solid;will-change:transform}
.vuela{visibility:hidden!important;transition:none!important}

/* Fin, Primera vez y Acerca */
.fin .amen{font-size:calc(48px*var(--letra));line-height:1;margin:0 0 12px}
.fin .ofrecido{font-family:Spectral,serif;font-style:italic;font-size:calc(17px*var(--letra));line-height:1.45;color:var(--soft);margin:0 0 14px;text-wrap:pretty}
.fin .pide{display:block;margin:18px 0 0}
.fin .detalle{margin-top:14px}
/* Las opciones para seguir aparecen después del Amén, para no cortar la quietud del final. */
.salidas{display:flex;flex-direction:column;gap:10px;margin-top:28px;animation:demorar .9s cubic-bezier(.16,1,.3,1) 2.2s both}
.salidas .btn{margin-top:0}
.salidas .enlace{align-self:center}
@keyframes demorar{from{opacity:0;visibility:hidden;transform:translateY(6px)}to{opacity:1;visibility:visible;transform:none}}
/* Es mi primera vez: el recorrido (ver Decisiones.md, 8 de octubre, a la noche). Tres formas de
   pantalla: corta (la imagen arriba y el texto abajo), larga (la imagen arriba y el texto que sube
   sobre ella al desplazarse) y plena (sin imagen: los grupos, el mapa y la práctica). La página se
   desplaza entera; la barra de arriba y los botones de abajo quedan siempre a mano. */
.pv{--alto-arte:72dvh;overflow:clip}
.pv.larga{--alto-arte:48dvh}
.pv .hero{inset:0 0 auto 0;height:var(--alto-arte)}
/* La barra de arriba es sólida: la imagen arranca debajo, también la ilustración. */
.pv .arte{--pleno:0 !important}
/* Arriba, un fondo que se funde, para que el texto no pase por detrás de la × al desplazarse. */
.pv .barra{position:sticky;top:0;padding-bottom:14px;background:linear-gradient(180deg,var(--bg) calc(100% - 30px),rgba(var(--rgb),0))}
.pv .barra + .aire{margin-top:-14px}
.pv .aire{flex:1 0 22dvh}
.pv.larga .aire{flex:1 0 20dvh}
.pv.plena{height:100dvh}
.pv.plena .aire{display:none}
.pv .cuerpo{display:flex;flex-direction:column;padding-bottom:0}
.pv.plena .cuerpo{flex:1;min-height:0;margin-top:0;padding-top:16px;overflow-y:auto;overscroll-behavior:contain}
/* Una barra por parte del recorrido, que se va llenando. */
.avance{flex:1;display:flex;gap:6px;align-items:center;height:42px;margin-left:12px;padding:0 16px;border-radius:999px;background:rgba(var(--rgb),.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.avance i{flex:1;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--mark) calc(var(--p)*100%),var(--line) 0)}
.pv h1{font-size:calc(28px*var(--letra));line-height:1.14;margin:4px 0 12px}
.pv .cuerpo > p{font-size:calc(15px*var(--letra));line-height:1.55;color:var(--soft);margin-bottom:14px}
.pv .cuerpo > p:last-of-type{margin-bottom:22px}
.pv .nota-pv,.pv .cuerpo > .nota-pv{font-size:calc(13px*var(--letra));line-height:1.5;color:var(--muted)}
.cita-pv small{display:block;margin-top:4px;font-family:Manrope,system-ui,sans-serif;font-style:normal;font-size:calc(12px*var(--letra));color:var(--muted)}
.pv .cuerpo > .cita-pv{font-family:Spectral,serif;font-style:italic;font-weight:300;font-size:calc(18px*var(--letra));line-height:1.35;color:var(--ink)}
.en-linea{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em;color:var(--mark)}
/* Los botones de abajo quedan a la vista aunque la pantalla se desplace. */
.pv-nav{position:sticky;bottom:0;z-index:3;display:flex;gap:10px;margin-top:auto;padding:16px 0 calc(env(safe-area-inset-bottom) + 20px);background:linear-gradient(180deg,rgba(var(--rgb),0),var(--bg) 16px)}
.pv-nav .btn.alt{margin-top:0;width:auto;flex:0 0 auto;padding:15px 22px}
.pv-nav .principal{flex:1}
.pv-nav.columna{flex-direction:column;align-items:center;gap:4px}
.pv-nav.columna .principal{width:100%}
/* Portada: las tres partes, para saltar a una. */
.indice{margin:4px 0 6px}
.indice .fila{padding:12px 0}
.indice .fila b{font-size:calc(15px*var(--letra));font-weight:600}
.fila > .ico{width:18px;height:18px;color:var(--muted)}
/* Desplegables: los grupos de misterios y las oraciones. */
.desplegables{margin:4px 0 14px;border-bottom:1px solid var(--line)}
.desplegable .fila{gap:14px;padding:12px 0}
.desplegable .nombre{flex:1;min-width:0}
.desplegable .nombre b{font-size:calc(15px*var(--letra));font-weight:600}
.desplegable .flecha{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.desplegable.abierto .flecha{transform:rotate(180deg)}
.desplegable .contenido{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.16,1,.3,1)}
.desplegable.abierto .contenido{grid-template-rows:1fr}
.desplegable .contenido > div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .35s}
/* Cerrado, también oculto para VoiceOver y el teclado (no solo a la vista); se oculta al terminar de cerrarse. */
.desplegable.abierto .contenido > div{visibility:visible;transition-delay:0s}
.miniatura{width:44px;height:56px;flex-shrink:0;border-radius:var(--radio-mini);background-color:var(--bg);background-size:cover;background-position:50% 30%}
.desplegable .sub{font-size:calc(13px*var(--letra));color:var(--muted);margin:0 0 8px 58px}
.desplegable ol{list-style:none;counter-reset:m;margin:0 0 16px 58px}
.desplegable li{counter-increment:m;position:relative;font-size:calc(14px*var(--letra));line-height:1.4;color:var(--soft);padding:3px 0 3px 20px}
.desplegable li::before{content:counter(m);position:absolute;left:0;color:var(--oro-texto);font-weight:600;font-size:calc(12px*var(--letra));top:5px}
.explica-pv{font-size:calc(14px*var(--letra));line-height:1.5;color:var(--soft);margin-bottom:12px}
.parte-pv{line-height:1.45;margin-bottom:10px}
.parte-pv .k{display:block;margin-bottom:1px}
.parte-pv.guia{font-size:calc(14px*var(--letra));color:var(--muted)}
.parte-pv.todos{font-size:calc(15.5px*var(--letra));font-weight:500}
.oir{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;margin:4px 0 16px;border:1px solid var(--line);border-radius:999px;font-size:calc(13px*var(--letra));font-weight:600;color:var(--oro-texto)}
.oir .ico{width:16px;height:16px}
/* El mapa, cuenta por cuenta. */
.pv .ros{flex:1;min-height:220px;width:100%;margin:2px 0 6px}
.ros .marca{fill:var(--mark);stroke:var(--mark)}
.ros .cadena.marca{stroke:var(--mark);stroke-width:5.5}
.pv-aqui{min-height:calc(7.2em*var(--letra));text-align:center}
.pv-aqui b{display:block;font-family:Spectral,serif;font-weight:300;font-size:calc(21px*var(--letra));line-height:1.2;margin-bottom:4px}
.pv-aqui span{display:block;font-size:calc(14px*var(--letra));line-height:1.5;color:var(--soft);text-wrap:balance}
/* Inicio, en chico. */
.captura{display:flex;flex-direction:column;gap:8px;margin:2px 0 16px;padding:10px;border-radius:var(--radio-sup);background:rgba(127,127,127,.1);pointer-events:none}
.captura .btn.alt{margin-top:0}
/* La práctica: la pantalla de rezo en chico. */
.pr-guia{display:flex;gap:10px;align-items:flex-start;min-height:calc(4.4em*var(--letra));margin-bottom:12px}
.pr-n{flex-shrink:0;margin-top:2px;padding:2px 9px;border-radius:999px;background:var(--accent);color:var(--on);font-size:calc(11px*var(--letra));font-weight:600;white-space:nowrap}
.pr-guia p{font-size:calc(14.5px*var(--letra));line-height:1.45;text-wrap:pretty}
.maqueta{position:relative;flex:1 0 300px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--bg);cursor:pointer;transition:box-shadow .3s}
.mq-arte{position:absolute;inset:0 0 32% 0;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.mq-barra{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:12px 12px 0}
.mq-chico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:var(--ink);font-size:16px}
.mq-barra .mq-chico{background:rgba(var(--rgb),.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mq-barra .g-ros{width:19px;height:19px}
.maqueta .cinco{padding:8px 11px;gap:6px}
.maqueta .cinco i{width:7px;height:7px}
.mq-mapa{position:absolute;z-index:1;inset:52px 0 0;display:flex;padding:8px 18px 18px;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .35s}
.maqueta.con-mapa .mq-mapa{opacity:1;pointer-events:auto}
.mq-mapa .ros{flex:1;width:100%;min-height:0}
.mq-cuerpo{position:relative;margin-top:auto;padding:22px 14px 8px;background:linear-gradient(180deg,rgba(var(--rgb),0) 0,var(--bg) 22px)}
.mq-titulo{font-family:Spectral,serif;font-weight:300;font-size:calc(19px*var(--letra));line-height:1.15;margin:2px 0 10px}
.maqueta .tira{height:20px;margin-bottom:10px}
.mq-guia{font-size:calc(11.5px*var(--letra));line-height:1.45;color:var(--muted);margin-bottom:5px}
.mq-guia:empty{display:none}
.mq-todos{font-size:calc(14px*var(--letra));line-height:1.4;font-weight:500}
.maqueta.sin-texto .mq-guia,.maqueta.sin-texto .mq-todos{display:none}
.mq-pie{display:grid;grid-template-columns:1fr max-content 1fr;align-items:center;column-gap:6px;margin-top:8px}
.mq-pie .mq-chico{color:var(--muted)}
.mq-etq,.mq-abre{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:4px 9px 4px 12px;border:1px solid var(--line);border-radius:999px;font-size:calc(11.5px*min(var(--letra),1.2));white-space:nowrap;color:var(--soft);background:rgba(var(--rgb),.35)}
.mq-etq .ico,.mq-abre .ico{width:13px;height:13px;color:var(--muted)}
.mq-abre{display:flex;width:max-content;margin:-2px auto 10px}
.mq-mira{font-family:Spectral,serif;font-style:italic;font-weight:300;font-size:calc(13.5px*var(--letra));line-height:1.4;color:var(--soft);margin:-2px 0 10px;text-wrap:balance}
.mq-cierra{display:inline-grid;place-items:center;width:20px;height:1em;margin-left:2px;vertical-align:-.08em;color:var(--muted)}
.mq-cierra .ico{width:14px;height:14px}
.maqueta:not(.mirando) .mq-mira,.maqueta.mirando .mq-abre{display:none}
.mq-controles{display:flex;align-items:center;justify-self:end}
.mq-vel{display:grid;place-items:center;min-width:40px;height:36px}
.mq-vel span{padding:3px 7px;border-radius:999px;background:rgba(127,127,127,.16);font-size:calc(11px*min(var(--letra),1.15));font-weight:600;font-variant-numeric:tabular-nums;color:var(--soft)}
/* Lo que hay que tocar (ver Decisiones.md, 8 de octubre: José lo pidió más resaltado). Un botón:
   anillo dorado grueso, con una onda que se expande, y el resto de la práctica atenuado. La pantalla
   entera: el borde dorado y un círculo que late en el medio de la imagen. */
.maqueta :is(.mq-barra,.mq-cuerpo,.mq-pie,.mq-controles) > *,.mq-arte,.mq-mapa{transition:opacity .35s}
.maqueta.guiando :is(.mq-barra,.mq-cuerpo,.mq-pie,.mq-controles) > :not(.foco):not(:has(.foco)),.maqueta.guiando .mq-arte{opacity:.28}
.maqueta.guiando.con-mapa .mq-mapa{opacity:.55}
.maqueta .foco{position:relative;border-radius:999px;color:var(--ink);background:rgba(232,184,107,.2);box-shadow:0 0 0 3px var(--mark),0 0 18px 2px rgba(232,184,107,.45)}
.maqueta.foco{box-shadow:0 0 0 3px var(--mark),0 0 22px rgba(232,184,107,.35)}
.toque{position:absolute;z-index:3;left:50%;top:30%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:3px solid var(--mark);background:rgba(232,184,107,.25);box-shadow:0 0 18px rgba(232,184,107,.5);opacity:0;pointer-events:none;transition:opacity .35s}
.maqueta.foco .toque{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .maqueta .foco::after,.toque::after{content:'';position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--mark);animation:onda 1.6s ease-out infinite;pointer-events:none}
  .toque{animation:latir 1.6s ease-in-out infinite}
}
@keyframes onda{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
@keyframes latir{50%{transform:scale(.88)}}
/* Acerca del Rosario (ver Decisiones.md, 9 de octubre): un índice y ocho capítulos para leer, con
   tono de libro: números romanos, citas con filete dorado, mucho aire. La imagen llega hasta arriba;
   al bajar, la barra toma fondo y una línea dorada marca cuánto se leyó. */
.acerca{overflow:clip}
.acerca .hero{inset:0 0 auto 0;height:58dvh}
.acerca .barra{position:sticky;top:0;padding-bottom:12px}
.acerca .barra::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg) calc(100% - 24px),rgba(var(--rgb),0));opacity:0;transition:opacity .35s}
.acerca.bajando .barra::before{opacity:1}
.acerca .aire{height:max(48px,calc(38dvh - var(--seguro) - 68px));flex-shrink:0}
.acerca .cuerpo{margin-top:0;padding-bottom:calc(env(safe-area-inset-bottom) + 18px)}
.k-ac{display:block;font-size:calc(11px*var(--letra));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-texto)}
.acerca h1{font-size:calc(34px*var(--letra));line-height:1.06;margin:6px 0 10px}
.indice-ac .sub{font-size:calc(14.5px*var(--letra));line-height:1.5}
/* El índice: cada capítulo, con su número y su imagen que se funde a la derecha. */
.capitulos{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:24px}
.cap-fila,.cap-sig{position:relative;isolation:isolate;overflow:hidden;width:100%;display:grid;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--radio-sup);background:rgba(var(--rgb),.6);text-align:left;transition:transform .2s cubic-bezier(.16,1,.3,1)}
/* La columna del número entra "VIII" también con la letra más grande (antes pisaba el título). */
.cap-fila{grid-template-columns:calc(52px*min(var(--letra),1.15)) 1fr 18px;min-height:80px;padding:14px 14px 14px 12px}
.cap-fila:active,.cap-sig:active{transform:scale(.985)}
.cap-img{position:absolute;inset:0 0 0 auto;z-index:-1;width:55%;background-color:var(--bg);background-size:cover;background-repeat:no-repeat;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 80%);mask-image:linear-gradient(90deg,transparent,#000 80%)}
.dia .cap-img{opacity:.4}
.cap-num{font-family:Spectral,serif;font-weight:300;font-size:calc(28px*min(var(--letra),1.15));line-height:1;color:var(--mark);text-align:center}
.cap-txt b{display:block;font-size:calc(15.5px*var(--letra));font-weight:600;line-height:1.25;text-shadow:0 1px 10px var(--glow)}
.cap-txt small{display:block;margin-top:3px;font-size:calc(12.5px*var(--letra));line-height:1.35;color:var(--soft);text-shadow:0 1px 10px var(--glow)}
.cap-fila > .ico,.cap-sig > .ico{width:18px;height:18px;color:var(--muted)}
/* Un capítulo */
.leido{flex:1;height:44px;margin-left:12px;padding:0 16px;display:flex;align-items:center;border-radius:999px;background:rgba(var(--rgb),.38) linear-gradient(var(--line),var(--line)) center/calc(100% - 32px) 3px no-repeat;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.leido i{display:block;width:100%;height:3px;border-radius:999px;background:var(--mark);transform-origin:left;transform:scaleX(0)}
.cap-cab{display:flex;align-items:baseline;gap:12px}
.cap-romano{font-family:Spectral,serif;font-weight:300;font-size:calc(46px*min(var(--letra),1.15));line-height:.9;color:var(--mark);text-shadow:0 1px 14px var(--glow)}
.cap .cuerpo > .bajada{font-family:Spectral,serif;font-style:italic;font-weight:300;font-size:calc(19px*var(--letra));line-height:1.35;color:var(--soft);margin:0 0 26px;text-wrap:balance}
.cap .cuerpo > p{font-size:calc(16px*var(--letra));line-height:1.62;color:var(--soft);margin-bottom:16px;text-wrap:pretty}
.cap .cuerpo em{font-style:italic}
.h-ac{font-family:Spectral,serif;font-weight:300;font-size:calc(24px*var(--letra));line-height:1.2;margin:38px 0 12px;text-wrap:balance}
.h-ac::before{content:'';display:block;width:28px;height:1px;background:var(--mark);margin-bottom:16px}
.cita-ac{margin:26px 0 28px;padding:2px 0 2px 18px;border-left:2px solid var(--mark)}
.cita-ac p{font-family:Spectral,serif;font-style:italic;font-weight:300;font-size:calc(20px*var(--letra));line-height:1.36;color:var(--ink);text-wrap:pretty}
.cita-ac cite,.hito cite,.per cite,.ign-texto cite{display:block;margin-top:8px;font-style:normal;font-size:calc(12px*var(--letra));line-height:1.45;color:var(--muted)}
.cap .cuerpo > .fuentes{margin:36px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:calc(12px*var(--letra));line-height:1.6;color:var(--muted)}
.fuentes .k-ac{margin-bottom:6px;color:var(--muted)}
.cap-sig{grid-template-columns:1fr 18px;min-height:104px;margin-top:26px;padding:18px 16px 18px 18px}
.cap-sig .cap-img{width:62%;opacity:.65}
.cap-sig b{font-family:Spectral,serif;font-weight:300;font-size:calc(22px*var(--letra));line-height:1.15;margin:5px 0 2px}
.a-capitulos{display:block;margin:12px auto 0}
.fin-ac{margin-top:30px;padding:24px 20px 20px;border:1px solid var(--line);border-radius:var(--radio-sup);text-align:center}
.fin-ac-t{font-family:Spectral,serif;font-weight:300;font-size:calc(23px*var(--letra));line-height:1.25;margin:8px 0 18px;text-wrap:balance}
/* Lo que entra en pantalla aparece con un fundido, una sola vez. */
.revelar{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.js-revelar .revelar:not(.visto){opacity:0;transform:translateY(16px)}

/* Las veinte escenas, para deslizar. Arriba, la etapa de la vida de Jesús y una marca por escena. */
.escenas{margin:22px -26px 28px}
.esc-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 26px;margin-bottom:10px}
.esc-etapa{font-family:Spectral,serif;font-weight:300;font-size:calc(20px*var(--letra));line-height:1.2}
.esc-n{flex-shrink:0;font-size:calc(12px*var(--letra));color:var(--muted);font-variant-numeric:tabular-nums}
.esc-marcas{display:flex;gap:7px;padding:0 26px;margin-bottom:16px}
.esc-tramo{flex:1;display:flex;gap:3px}
.esc-tramo i{flex:1;height:3px;border-radius:999px;background:rgba(var(--luz),.3);transition:background .3s,transform .3s}
.esc-tramo i.on{background:rgb(var(--luz));transform:scaleY(1.9)}
.desliza{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px calc((min(100vw,520px) - var(--ancho))/2) 10px}
.desliza::-webkit-scrollbar{display:none}
.desliza:focus-visible{outline-offset:-2px}
.esc-pista{--ancho:min(62vw,250px);gap:14px}
.esc,.per{flex:0 0 var(--ancho);scroll-snap-align:center;transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1)}
.esc:not(.on){opacity:.5;transform:scale(.93)}
.esc-img{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radio-sup);background-color:var(--hoja);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.esc-img img{display:block;width:100%;height:100%;object-fit:cover}
/* Sin imágenes: la luz del grupo y el número del misterio. */
.esc-img > b{display:grid;place-items:center;height:100%;font-family:Spectral,serif;font-weight:300;font-size:96px;color:var(--ink);opacity:.5}
.esc figcaption{padding:12px 4px 0;text-align:center}
.esc figcaption b{display:block;font-family:Spectral,serif;font-weight:300;font-size:calc(18px*var(--letra));line-height:1.2;margin:4px 0 3px;text-wrap:balance}
.esc figcaption small{font-size:calc(12px*var(--letra));color:var(--muted)}
/* El Rosario dibujado */
.cuentas-ac{margin:18px 0 8px;padding:18px 14px 10px;border:1px solid var(--line);border-radius:var(--radio-sup)}
.cuentas-ac .ros{display:block;width:100%;height:min(46dvh,340px)}
.cuentas-ac .pv-aqui{min-height:calc(7.4em*var(--letra));margin-top:8px}
.mapa-nav{display:flex;justify-content:center;align-items:center;gap:6px}
.mapa-n{min-width:64px;text-align:center;font-size:calc(12px*var(--letra));color:var(--muted);font-variant-numeric:tabular-nums}
/* El Avemaría, por partes. El nombre de Jesús va en el centro, entre dos filetes dorados. */
.ave-ac{margin:20px 0 28px;border-top:1px solid var(--line)}
.ave-p{border-bottom:1px solid var(--line)}
.ave-f{display:block;width:100%;padding:16px 0 14px}
.ave-quien{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:calc(11px*var(--letra));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--oro-texto)}
.ave-quien em{flex-shrink:0;font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;font-size:calc(12px*var(--letra));color:var(--muted)}
.ave-t{display:block;margin-top:6px;font-family:Spectral,serif;font-weight:300;font-size:calc(21px*var(--letra));line-height:1.3;color:var(--ink);transition:opacity .35s}
.ave-ac.con-abierta .ave-p:not(.abierto) .ave-t{opacity:.5}
.ave-exp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1)}
.ave-p.abierto .ave-exp{grid-template-rows:1fr}
.ave-exp > div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .4s}
.ave-p.abierto .ave-exp > div{visibility:visible;transition-delay:0s}
.ave-exp p{padding:0 0 18px;font-size:calc(15px*var(--letra));line-height:1.58;color:var(--soft);text-wrap:pretty}
.ave-p.centro .ave-f{padding:22px 0 14px;text-align:center}
.ave-p.centro .ave-quien{justify-content:center;gap:8px}
.ave-p.centro .ave-quien > em::before{content:"· "}
.ave-p.centro .ave-t{display:flex;align-items:center;gap:18px;font-style:italic;font-size:calc(42px*var(--letra));line-height:1.1;color:var(--mark)}
.ave-p.centro .ave-t::before,.ave-p.centro .ave-t::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--mark))}
.ave-p.centro .ave-t::after{background:linear-gradient(90deg,var(--mark),transparent)}
.ave-p.centro .ave-exp p{text-align:center;text-wrap:balance}
/* Contemplar con San Ignacio: la imagen y la mirada que va a cada parte. */
.ign{margin:22px 0 28px}
.ign-marco{position:relative;overflow:hidden;aspect-ratio:1/1.05;border-radius:var(--radio-sup);background:var(--hoja)}
.ign-img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;transition:transform 1.8s cubic-bezier(.45,0,.15,1)}
.ign-velo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 72% 64% at 50% 50%,transparent 42%,rgba(5,7,14,.62));opacity:0;transition:opacity 1.2s}
.ign.enfocando .ign-velo{opacity:1}
.ign-puntos{display:flex;gap:6px;margin:14px 0 6px}
.ign-puntos i{flex:1;height:3px;border-radius:999px;background:var(--line);transition:background .4s}
.ign-puntos i.on{background:var(--mark)}
.ign-texto{padding-top:8px}
.ign-texto .ign-t{display:block;font-family:Spectral,serif;font-weight:300;font-size:calc(25px*var(--letra));line-height:1.15;margin:4px 0 8px}
.ign-texto > p{font-size:calc(15px*var(--letra));line-height:1.55;color:var(--soft);text-wrap:pretty}
.ign-texto blockquote{margin-top:12px;padding-left:14px;border-left:2px solid var(--mark)}
.ign-texto blockquote p{font-family:Spectral,serif;font-style:italic;font-weight:300;font-size:calc(17.5px*var(--letra));line-height:1.38;color:var(--ink);text-wrap:pretty}
.ign-nav{display:flex;gap:10px;margin-top:16px}
.ign-nav .btn.alt{margin-top:0;width:auto;flex:0 0 auto}
.ign-nav .principal{flex:1}
.ign-nav .btn:disabled{opacity:.35;cursor:default}
/* El coloquio: cuatro pasos unidos por un camino que se ilumina. */
.col{margin:22px 0 26px}
.col-camino{display:flex;align-items:center}
.col-tramo{position:relative;flex:1;height:2px;margin:0 -1px;background:var(--line);overflow:hidden}
.col-tramo::after{content:'';position:absolute;inset:0;background:var(--mark);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.col-tramo.on::after{transform:none}
.col-nodo{flex:0 0 auto;width:70px;height:70px;padding:6px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg);font-family:Spectral,serif;font-size:calc(15px*min(var(--letra),1.1));line-height:1.05;text-align:center;color:var(--soft);transition:background .4s,color .4s,border-color .4s,transform .3s cubic-bezier(.16,1,.3,1)}
.col-nodo.on{border-color:var(--mark);color:var(--ink)}
.col-nodo.ahora{background:var(--accent);border-color:var(--accent);color:var(--on);transform:scale(1.06)}
.col-texto{min-height:calc(8.6em*var(--letra));margin-top:18px;text-align:center}
.col-texto b{display:block;font-family:Spectral,serif;font-weight:300;font-size:calc(24px*var(--letra));line-height:1.15}
.col-texto .k-ac{margin-top:4px}
.col-texto p{margin-top:8px;font-size:calc(15px*var(--letra));line-height:1.55;color:var(--soft);text-wrap:balance}
/* La historia: una línea que se dibuja mientras se baja, con un punto por época. */
.hist{--p:0;position:relative;list-style:none;margin:26px 0 8px;padding-left:30px}
.hist::before,.hist::after{content:'';position:absolute;left:6px;top:10px;bottom:30px;width:1px;background:var(--line)}
.hist::after{left:5.5px;width:2px;background:var(--mark);transform-origin:top;transform:scaleY(var(--p))}
.hito{position:relative;padding-bottom:30px}
.hito::before{content:'';position:absolute;z-index:1;left:-28px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--muted);transition:background .4s,border-color .4s}
.hito.pasado::before{background:var(--mark);border-color:var(--mark)}
.hito-anio{display:block;font-family:Spectral,serif;font-weight:300;font-size:calc(30px*var(--letra));line-height:1.1;color:var(--mark)}
.hito b{display:block;margin:3px 0 6px;font-size:calc(16px*var(--letra));font-weight:600;line-height:1.3}
.hito p{font-size:calc(15px*var(--letra));line-height:1.58;color:var(--soft);text-wrap:pretty}
.hito.hoy{padding-bottom:6px}
.hito.hoy .hito-anio{font-style:italic}
.hito.hoy b{font-family:Spectral,serif;font-weight:300;font-size:calc(24px*var(--letra))}
/* Los santos, en tarjetas para deslizar. De fondo, el año en que nacieron. */
.pers{margin:20px -26px 26px}
.pers-pista{--ancho:min(84vw,400px);gap:12px}
.per{position:relative;isolation:isolate;overflow:hidden;padding:22px 20px 20px;border:1px solid var(--line);border-radius:var(--radio-sup);background:rgba(127,127,127,.07)}
.per:not(.on){opacity:.55}
.per-fondo{position:absolute;z-index:-1;right:-8px;top:-18px;font-family:Spectral,serif;font-weight:300;font-size:118px;line-height:1;letter-spacing:-.04em;color:var(--mark);opacity:.1}
.per h3{margin:8px 0 2px;font-family:Spectral,serif;font-weight:300;font-size:calc(25px*var(--letra));line-height:1.12;text-wrap:balance}
.per-anios{display:block;margin-bottom:12px;font-size:calc(12px*var(--letra));color:var(--muted);font-variant-numeric:tabular-nums}
.per p{font-size:calc(14.5px*var(--letra));line-height:1.56;color:var(--soft);text-wrap:pretty}
.per blockquote{margin-top:14px;padding-left:14px;border-left:2px solid var(--mark);font-family:Spectral,serif;font-style:italic;font-weight:300;font-size:calc(18px*var(--letra));line-height:1.34;color:var(--ink);text-wrap:pretty}
.pers-puntos{display:flex;justify-content:center;gap:8px;margin-top:12px}
.pers-puntos i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.pers-puntos i.on{background:var(--mark);transform:scale(1.3)}
/* La respiración: dos ritmos que laten en tiempo real (quietos con movimiento reducido). */
.resp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 26px;padding:24px 12px 16px;border:1px solid var(--line);border-radius:var(--radio-sup)}
.resp-col{display:flex;flex-direction:column;align-items:center;text-align:center}
.resp-aro{display:grid;place-items:center;width:min(34vw,132px);aspect-ratio:1;margin-bottom:12px;border-radius:50%;border:1px solid var(--line)}
.resp-aro i{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(127,127,127,.42),rgba(127,127,127,.1));transform:scale(.42)}
.resp-col.lento .resp-aro i{background:radial-gradient(circle,rgba(232,184,107,.85),rgba(232,184,107,.18))}
.resp-col b{font-family:Spectral,serif;font-weight:300;font-size:calc(42px*var(--letra));line-height:1}
.resp-col.lento b{color:var(--mark)}
.resp-col small{display:block;max-width:13em;margin-top:4px;font-size:calc(12px*var(--letra));line-height:1.4;color:var(--muted)}
.resp-pie{grid-column:1/-1;margin-top:6px;text-align:center;font-size:calc(11px*var(--letra));letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.resp.visto .resp-aro i{animation:respirar var(--t) ease-in-out infinite}}
@keyframes respirar{0%,100%{transform:scale(.42)}46%{transform:scale(1)}}
/* Las preguntas */
.preg{margin-top:18px}
.preg .fila b{font-size:calc(15.5px*var(--letra));line-height:1.35}
.preg .contenido p{font-size:calc(15px*var(--letra));line-height:1.58;color:var(--soft);margin-bottom:12px;text-wrap:pretty}
.preg .contenido p:last-child{margin-bottom:20px}

/* Hojas (ajustes y elegir misterios) */
.velo{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;animation:aparecer .25s}
.hoja{width:100%;max-width:520px;max-height:min(90dvh,100%);overflow-y:auto;overscroll-behavior:contain;background:var(--hoja);border-radius:var(--radio-sup) var(--radio-sup) 0 0;padding:22px 22px calc(env(safe-area-inset-bottom) + 24px);animation:subir .3s cubic-bezier(.16,1,.3,1)}
.hoja:focus{outline:none}
.hoja-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-8px 0 6px}
.hoja-cab h2{font-size:calc(17px*var(--letra));font-weight:600}
.listo{min-height:44px;padding:0 4px 0 12px;font-size:calc(15px*var(--letra));font-weight:600;color:var(--oro-texto)}
.listo.suave{font-weight:500;color:var(--soft)}
.fila{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line);width:100%}
.fila small{display:block;font-size:calc(12px*var(--letra));color:var(--muted)}
.fila.sel b{color:var(--oro-texto)}
.etiqueta{font-size:calc(11px*var(--letra));font-weight:600;color:var(--on);background:var(--accent);border-radius:999px;padding:3px 9px}
.segmentos{display:flex;background:rgba(127,127,127,.13);border-radius:var(--radio-mini);padding:3px;margin-top:8px}
.segmentos button{flex:1;min-height:44px;text-align:center;padding:8px 4px;border-radius:calc(var(--radio-mini) - 3px);font-size:calc(13px*var(--letra));color:var(--soft);transition:background .2s,color .2s}
/* Lo elegido, en tinta llena: se distingue de un vistazo, de día y de noche. */
.segmentos button.sel{background:var(--ink);color:var(--hoja);font-weight:600}
.opcion-desc{display:block;font-size:calc(12px*var(--letra));line-height:1.45;color:var(--muted);margin-top:8px;min-height:2.9em}
.segmentos button:disabled{opacity:.35;cursor:default}
/* Las siete voces, en dos renglones: arriba las de mujer, abajo las de varón. */
.segmentos.voces{flex-wrap:wrap;row-gap:3px}
.segmentos.voces .corte{flex-basis:100%;height:0}
.muestras{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.muestra{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:calc(12px*var(--letra));color:var(--muted);text-align:center}
.muestra span{display:block;width:100%;aspect-ratio:3/4;border-radius:var(--radio-mini);background-color:var(--bg);background-size:cover;background-position:50% 30%;background-repeat:no-repeat;border:2px solid transparent;transition:border-color .2s}
.muestra.sel{color:var(--ink);font-weight:600}
.muestra.sel span{border-color:var(--ink)}
.muestra:disabled{opacity:.35;cursor:default}
.ajuste{padding:14px 0;border-top:1px solid var(--line)}
.hoja-cab + .ajuste{border-top:0;padding-top:0}
.ajuste > b{font-size:calc(14px*var(--letra))}
.interruptor{width:46px;height:28px;border-radius:999px;background:var(--line);position:relative;flex-shrink:0;transition:background .2s}
.interruptor::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
/* De día, apagado: la pista más oscura y la perilla con sombra, para que se distinga del fondo blanco. */
.dia .interruptor:not(.on){background:rgba(27,29,38,.5)}
.interruptor::after{box-shadow:0 1px 3px rgba(0,0,0,.25)}
.interruptor.on{background:var(--mark)}
.interruptor.on::after{transform:translateX(18px)}
/* Ajustes en tres grupos con título (Cómo rezás, Lo que ves, Momentos del rezo). */
.seccion{font-size:calc(11px*var(--letra));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-texto);margin:28px 0 2px}
.hoja-cab + .seccion{margin-top:6px}
.seccion + .ajuste,.seccion + .fila{border-top:0;padding-top:8px}
.ajuste[hidden],.fila[hidden],.ritmo-borrar[hidden],.pide-ritmo[hidden]{display:none}
/* "Personalizá tu ritmo": un botón centrado, dorado, y abajo para qué sirve (José, 11 de octubre). */
.pide-ritmo{margin-top:18px;text-align:center}
.btn-ritmo{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-height:52px;padding:10px 26px 9px;border:1px solid rgba(232,184,107,.6);border-radius:999px;background:rgba(232,184,107,.13);color:var(--oro-texto);font-size:calc(15px*var(--letra));font-weight:600;text-align:center;transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s}
.dia .btn-ritmo{border-color:rgba(168,116,31,.5);background:rgba(232,184,107,.16)}
.btn-ritmo:active{transform:scale(.97);background:rgba(232,184,107,.22)}
.btn-ritmo > span{display:flex;align-items:center;gap:8px}
.btn-ritmo .ico{width:18px;height:18px}
.btn-ritmo,.btn-ritmo small{transition:transform .2s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,color .3s}
.btn-ritmo.medido{border-color:rgba(134,199,154,.6);background:rgba(134,199,154,.13);color:#86c79a}
.btn-ritmo.medido small{color:rgba(134,199,154,.8)}
.btn-ritmo.medido:active{background:rgba(134,199,154,.22)}
.dia .btn-ritmo.medido{border-color:rgba(46,133,73,.5);background:rgba(46,133,73,.1);color:#2e8549}
.dia .btn-ritmo.medido small{color:#3b7a4f}
.btn-ritmo small{font-size:calc(12px*var(--letra));font-weight:500;color:var(--muted)}
.ritmo-para{max-width:31em;margin:10px auto 0;font-size:calc(12px*var(--letra));line-height:1.45;color:var(--muted);text-wrap:balance}
/* Una pantalla dentro de la hoja (Personalizá tu ritmo), con su flecha para volver a Ajustes. El
   título va grande, abajo de la flecha y de "Listo". */
.hoja.pagina{height:min(90dvh,780px);display:flex;flex-direction:column}
.cab-pagina{display:grid;grid-template-columns:1fr auto 1fr}
.cab-pagina .listo{justify-self:end}
.t-pagina{font-size:calc(27px*var(--letra));line-height:1.1;margin:6px 0 4px}
.volver-hoja{display:flex;align-items:center;gap:2px;min-height:44px;margin-left:-8px;font-size:calc(15px*var(--letra));font-weight:600;color:var(--oro-texto)}
.volver-hoja .ico{width:20px;height:20px}
/* Tu ritmo: arriba la explicación y el lugar donde se lee la parte que se mide, que ocupa lo que
   sobra (así los botones no se mueven debajo del dedo); abajo, donde llega el pulgar, los botones. */
.ritmo-intro{font-size:calc(13px*var(--letra));line-height:1.5;color:var(--muted);margin-top:4px;text-wrap:pretty}
.ritmo-lee{flex:1;min-height:170px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 0}
.ritmo-ayuda{font-size:calc(14px*var(--letra));line-height:1.45;color:var(--soft);text-align:center;text-wrap:balance}
.ritmo-texto{font-family:Spectral,serif;font-weight:300;font-size:calc(19px*var(--letra));line-height:1.4;color:var(--ink);text-wrap:pretty}
.ritmo-reloj{font-size:calc(26px*var(--letra));font-weight:600;font-variant-numeric:tabular-nums;color:var(--oro-texto)}
/* Las columnas comparten las filas, para que las dos partes de cada oración queden parejas. */
.ritmo-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;grid-auto-flow:column;gap:8px}
.ritmo-col{display:contents}
.ritmo-col .k{padding-left:2px;margin-bottom:-2px}
.mide{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:84px;padding:10px;border-radius:var(--radio-mini);background:rgba(127,127,127,.13);text-align:left;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;transition:background .2s,transform .2s}
.mide-t{font-size:calc(12px*var(--letra));line-height:1.3;color:var(--soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mide-s{font-size:calc(14px*var(--letra));font-weight:600;font-variant-numeric:tabular-nums}
.mide.estimado .mide-s{font-weight:400;color:var(--muted)}
.mide.midiendo{background:var(--accent);transform:scale(.97)}
.mide.midiendo .mide-t,.mide.midiendo .mide-s{color:var(--on)}
.ritmo-borrar{display:block;margin:10px auto 0}
/* Tu opinión: la hoja para escribir (ver hojaOpinion en App.js). La letra del texto, de 16 px o más:
   con menos, el iPhone agranda la pantalla al escribir. */
.opina-intro{font-size:calc(14px*var(--letra));line-height:1.5;color:var(--soft);margin:2px 0 14px;text-wrap:pretty}
.opina-tipo{margin:0 0 10px}
.opina-texto{display:block;width:100%;min-height:128px;resize:none;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radio-mini);background:rgba(127,127,127,.08);color:var(--ink);font:inherit;font-size:calc(16px*var(--letra));line-height:1.45;transition:border-color .2s}
.opina-texto::placeholder{color:var(--muted);opacity:1}
.opina-texto:focus{outline:none;border-color:var(--mark)}
.opina-enviar{margin-top:14px}
.opina-enviar:disabled{opacity:.4;cursor:default}
.opina-enviar:disabled:active{transform:none}
.opina-aviso{font-size:calc(13px*var(--letra));line-height:1.45;color:var(--oro-texto);text-align:center;margin-top:10px;text-wrap:balance}
.opina-aviso:empty{display:none}
.opina-priv{font-size:calc(12px*var(--letra));line-height:1.45;color:var(--muted);text-align:center;margin-top:12px;text-wrap:balance}
.opina-gracias{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 0 18px}
.opina-gracias .ico{width:30px;height:30px;color:var(--mark);margin-bottom:12px}
.opina-gracias h3{font-size:calc(30px*var(--letra));line-height:1.1;margin-bottom:6px}
.opina-gracias p{font-size:calc(14px*var(--letra));color:var(--soft)}
@keyframes aparecer{from{opacity:0}}
@keyframes subir{from{transform:translateY(40px);opacity:0}}
/* Viudas: títulos, preguntas y frases parejas, sin una palabra sola en el último renglón. */
.t1,.mira,.fruto,.vida-q,.explica,.papa-t,.aqui,.sub{text-wrap:balance}
.todos,.guia,.pv p,.explica-pv{text-wrap:pretty}

/* Fundido entre pantallas (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:ease}

/* Con movimiento reducido se frenan el acercamiento, el latido de la cuenta y los deslizamientos.
   Los fundidos quedan: no marean. */
@media (prefers-reduced-motion:reduce){.entrada i{animation:aparecer 1s ease-out both}.mide.midiendo{transform:none}.tira .ave,.ros .mov{transition:fill .35s,stroke .35s}.hoja{animation:aparecer .25s}.salidas{animation-name:aparecer2}.ign-img{transition:none}.js-revelar .revelar:not(.visto){transform:none}.esc,.per{transition:opacity .4s}}
@keyframes aparecer2{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}