/* ============================================================
   EL CÓDIGO DE LA VIDA — Sistema de diseño (v2, premium claro)
   Paleta clara y serena · microinteracciones · igual en los 15
   ============================================================ */

@import url('fonts.css');

:root {
  /* Paleta clara y serena */
  --fondo: #FAF7F0;
  --superficie: #FFFDF8;
  --tinta: #40382C;
  --tinta-suave: #8A7D68;
  --borde: #EAE1CF;

  --terracota: #C0765A;
  --terracota-hover: #B06A4F;
  --salvia: #8CA083;
  --azul: #6E93A8;
  --oro: #C9A25E;
  --melocoton: #F6E8DA;
  --salvia-claro: #EDF1E8;

  --mapa-fondo: #EFE6D2;
  --sombra: 0 10px 30px rgba(90, 74, 52, .08);
  --sombra-suave: 0 4px 14px rgba(90, 74, 52, .06);

  --fs-base: 18px;
  --titulo: 'Cormorant Garamond', Georgia, serif;
  --cuerpo: 'Lora', Georgia, serif;
  --radio: 18px;
  --transicion: .22s cubic-bezier(.4, 0, .2, 1);
}

/* Modo noche: cálido y suave, nunca negro puro */
html[data-tema="oscuro"] {
  --fondo: #262119;
  --superficie: #2E2820;
  --tinta: #EFE7D8;
  --tinta-suave: #B5A88F;
  --borde: #3E3628;
  --melocoton: #3A3126;
  --salvia-claro: #303629;
  --mapa-fondo: #332C20;
  --sombra: 0 10px 30px rgba(0, 0, 0, .25);
  --sombra-suave: 0 4px 14px rgba(0, 0, 0, .2);
}

html[data-fuente="1"] { --fs-base: 16px; }
html[data-fuente="2"] { --fs-base: 18px; }
html[data-fuente="3"] { --fs-base: 20px; }
html[data-fuente="4"] { --fs-base: 23px; }

* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--melocoton); }

html { scroll-behavior: smooth; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background var(--transicion), color var(--transicion);
}

/* ---------- Cabecera ---------- */
header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px 12px;
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Filete dourado que desvanece nas pontas */
header::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--oro) 45%, transparent) 22%,
    color-mix(in srgb, var(--oro) 45%, transparent) 78%, transparent);
}
.marca-lockup {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; min-width: 0;
}
.marca-lockup .sol-marca { width: 28px; height: 28px; flex: none; }
.marca-lockup .wordmark {
  font-family: var(--titulo);
  font-weight: 600; font-size: .9rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--tinta); padding-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marca-lockup .wordmark .vida { color: var(--oro); }
.btn-menu {
  background: none; border: none; cursor: pointer;
  padding: 10px 2px 10px 12px; display: inline-flex;
  color: var(--tinta); flex: none;
  transition: color var(--transicion), transform var(--transicion);
}
.btn-menu svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round;
}
.btn-menu:hover { color: var(--oro); }
.btn-menu:active { transform: scale(.94); }

button.icono {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px;
  color: var(--tinta); font-family: var(--cuerpo); font-size: .88rem;
  cursor: pointer;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion), border-color var(--transicion);
}
button.icono svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
button.icono:hover { transform: translateY(-1px); box-shadow: var(--sombra); border-color: var(--oro); }
button.icono:active { transform: scale(.95); }
button.icono.texto { width: auto; }

/* ---------- Zona de lectura ---------- */
main {
  flex: 1; width: 100%;
  max-width: 660px; margin: 0 auto;
  padding: 30px 22px 140px;
}

/* Entrada suave y escalonada del contenido */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
main.entrando > * { animation: aparecer .5s cubic-bezier(.25, .6, .3, 1) both; }
main.entrando > *:nth-child(2) { animation-delay: .06s; }
main.entrando > *:nth-child(3) { animation-delay: .12s; }
main.entrando > *:nth-child(4) { animation-delay: .18s; }
main.entrando > *:nth-child(5) { animation-delay: .24s; }
main.entrando > *:nth-child(n+6) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  main.entrando > * { animation: none; }
  * { transition-duration: .01ms !important; }
}

.kicker {
  font-size: .72rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--salvia);
  font-weight: 600; margin-bottom: 10px;
}
html[data-tema="oscuro"] .kicker { color: #A8BC9E; }

h1, h2 {
  font-family: var(--titulo); font-weight: 600; color: var(--tinta);
  line-height: 1.12; margin-bottom: 18px;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.8rem; }
h2::after {
  content: ''; display: block;
  width: 46px; height: 2px; border-radius: 2px;
  background: var(--oro);
  margin-top: 12px;
}
p { margin-bottom: 15px; }
ul { margin: 0 0 15px 20px; }
li { margin-bottom: 9px; }
strong { color: var(--terracota); font-weight: 600; }
.nota-suave { color: var(--tinta-suave); font-style: italic; font-size: .92em; }

/* ---------- Imágenes ---------- */
figure.ilustracion { margin: 22px 0; }
figure.ilustracion img {
  width: 100%; border-radius: var(--radio); display: block;
  background: var(--melocoton);
  box-shadow: var(--sombra);
}
figure.ilustracion figcaption {
  font-size: .72rem; color: var(--tinta-suave);
  text-align: right; margin-top: 7px; font-style: italic;
}
.img-pendiente {
  width: 100%; aspect-ratio: 3/4; border-radius: var(--radio);
  background: linear-gradient(155deg, var(--melocoton), var(--salvia-claro));
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta-suave); font-size: .85rem; font-style: italic;
  border: 1px dashed var(--borde); text-align: center; padding: 20px;
}

/* ---------- Mapa ---------- */
.mapa-svg {
  margin: 22px 0; border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--borde); box-shadow: var(--sombra);
}
.mapa-svg svg { width: 100%; height: auto; display: block; }

/* ---------- Portada ---------- */
.pantalla-portada { text-align: center; padding-top: 3vh; }
.pantalla-portada .saludo {
  font-family: var(--titulo); font-size: 1.5rem; color: var(--tinta); margin-bottom: 2px;
}
.pantalla-portada .fecha {
  font-size: .82rem; color: var(--tinta-suave);
  margin-bottom: 22px;
}
.pantalla-portada figure.ilustracion { margin: 10px 0 24px; }
.pantalla-portada .coleccion {
  font-size: .7rem; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--oro); font-weight: 600; margin-bottom: 8px;
}
.pantalla-portada h1 { font-size: 2.7rem; margin-bottom: 6px; }
.pantalla-portada .subtitulo {
  font-family: var(--titulo); font-style: italic;
  font-size: 1.2rem; color: var(--tinta-suave); margin-bottom: 26px;
}

.tarjeta-avance {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 16px 18px; margin: 0 0 22px;
}
.tarjeta-avance .donde { font-size: .92rem; }
.tarjeta-avance .donde strong { display: block; color: var(--tinta); font-family: var(--titulo); font-size: 1.15rem; }
.tarjeta-avance .mini-datos { display: flex; gap: 14px; }
.tarjeta-avance .mini { text-align: center; }
.tarjeta-avance .mini .v { font-family: var(--titulo); font-weight: 600; font-size: 1.3rem; color: var(--terracota); line-height: 1; }
.tarjeta-avance .mini .e { font-size: .66rem; letter-spacing: 1px; text-transform: uppercase; color: var(--tinta-suave); }
.anillo { position: relative; width: 54px; height: 54px; flex: none; }
.anillo svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 5; }
.anillo .fondo-anillo { stroke: var(--borde); }
.anillo .valor-anillo { stroke: var(--salvia); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.anillo span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 600; color: var(--tinta);
}

.btn-principal {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer;
  background: var(--terracota); color: #FFF9F2;
  font-family: var(--cuerpo); font-size: 1rem; font-weight: 600;
  padding: 15px 36px; border-radius: 999px; margin: 6px 4px;
  box-shadow: 0 8px 20px rgba(192, 118, 90, .28);
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.btn-principal:hover { background: var(--terracota-hover); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(192, 118, 90, .34); }
.btn-principal:active { transform: scale(.97); }
.btn-secundario {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borde); cursor: pointer;
  background: var(--superficie); color: var(--tinta);
  font-family: var(--cuerpo); font-size: .95rem;
  padding: 13px 28px; border-radius: 999px; margin: 6px 4px;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), border-color var(--transicion);
}
.btn-secundario:hover { transform: translateY(-1px); border-color: var(--oro); }
.btn-secundario:active { transform: scale(.97); }

/* ---------- Mandamiento ---------- */
.numero-mandamiento {
  font-family: var(--titulo); font-size: 3.6rem; font-weight: 600;
  color: var(--oro); line-height: 1; margin-bottom: 4px;
}
.verso-caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--oro);
  border-radius: 6px var(--radio) var(--radio) 6px;
  box-shadow: var(--sombra-suave);
  padding: 18px 20px; margin: 16px 0 22px;
  font-family: var(--titulo); font-size: 1.35rem; line-height: 1.4;
}
.verso-caja .ref { display: block; font-family: var(--cuerpo); font-size: .78rem; color: var(--tinta-suave); margin-top: 10px; }

.jesus-box {
  background: var(--salvia-claro);
  border: 1px solid color-mix(in srgb, var(--salvia) 35%, var(--borde));
  border-radius: var(--radio); padding: 16px 18px; margin-top: 20px;
  transition: box-shadow var(--transicion);
}
.jesus-box:hover { box-shadow: var(--sombra-suave); }
.jesus-tag {
  display: inline-block; font-size: .68rem; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--salvia); font-weight: 700;
  margin-bottom: 8px;
}
html[data-tema="oscuro"] .jesus-tag { color: #A8BC9E; }
.jesus-box p { margin-bottom: 0; }

/* ---------- Autoexamen ---------- */
.pregunta { font-weight: 600; margin: 20px 0 10px; }
textarea.nota {
  width: 100%; min-height: 100px; resize: vertical;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 14px;
  font-family: var(--cuerpo); font-size: .95em; line-height: 1.6; padding: 14px;
  box-shadow: var(--sombra-suave) inset;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
textarea.nota:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 22%, transparent); }
.guardado-tag {
  font-size: .74rem; color: var(--salvia); min-height: 1.2em;
  display: block; margin-top: 5px;
  opacity: 0; transition: opacity .4s;
}
.guardado-tag.visible { opacity: 1; }

.oracion-caja {
  background: var(--melocoton);
  border-radius: var(--radio); padding: 16px 18px; margin: 22px 0;
  font-style: italic; color: var(--tinta);
}
.oracion-caja .etiqueta {
  display: block; font-style: normal; font-size: .68rem; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--terracota); font-weight: 700; margin-bottom: 7px;
}

label.completar {
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; padding: 14px 18px; cursor: pointer; user-select: none;
  font-weight: 600; margin-top: 10px;
  box-shadow: var(--sombra-suave);
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
}
label.completar:hover { transform: translateY(-1px); }
label.completar:active { transform: scale(.98); }
label.completar input { position: absolute; opacity: 0; }
label.completar .caja-check {
  width: 24px; height: 24px; flex: none;
  border: 2px solid var(--borde); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transicion), border-color var(--transicion);
}
label.completar .caja-check svg {
  width: 14px; height: 14px; fill: none; stroke: #FFF; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20;
  transition: stroke-dashoffset .3s ease .05s;
}
label.completar.hecho { border-color: var(--salvia); background: var(--salvia-claro); color: var(--salvia); }
html[data-tema="oscuro"] label.completar.hecho { color: #A8BC9E; }
label.completar.hecho .caja-check { background: var(--salvia); border-color: var(--salvia); }
label.completar.hecho .caja-check svg { stroke-dashoffset: 0; }

/* ---------- Cierre ---------- */
.frase-final {
  font-family: var(--titulo); font-size: 2rem; line-height: 1.3;
  text-align: center; margin: 12vh 0 22px;
}
.ref-final { text-align: center; color: var(--tinta-suave); font-style: italic; }
.verso-destacado {
  font-family: var(--titulo); font-size: 1.4rem; text-align: center;
  margin: 24px 0; line-height: 1.4;
}
.verso-destacado .ref { font-family: var(--cuerpo); font-size: .78rem; color: var(--tinta-suave); }
.nota-legal { font-size: .85rem; color: var(--tinta-suave); }

/* ---------- Navegación inferior ---------- */
footer.navegacion {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.nav-caja {
  pointer-events: auto;
  max-width: 660px; margin: 0 auto;
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--borde);
  border-radius: 20px;
  box-shadow: var(--sombra);
  padding: 12px 14px;
}
.barra-progreso {
  height: 5px; background: var(--borde); border-radius: 3px;
  margin-bottom: 10px; overflow: hidden;
}
.barra-progreso > div {
  height: 100%;
  background: linear-gradient(90deg, var(--salvia), var(--oro));
  width: 0%; border-radius: 3px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.nav-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nav-fila button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tinta); font-family: var(--cuerpo); font-size: .93rem; font-weight: 600;
  padding: 12px; border-radius: 999px; cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.nav-fila button svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nav-fila button:hover { transform: translateY(-1px); box-shadow: var(--sombra-suave); }
.nav-fila button:active { transform: scale(.97); }
.nav-fila button.principal {
  background: var(--terracota); color: #FFF9F2; border-color: var(--terracota);
  box-shadow: 0 6px 16px rgba(192, 118, 90, .25);
}
.nav-fila button.principal:hover { background: var(--terracota-hover); }
.nav-fila button:disabled { opacity: .35; cursor: default; transform: none; box-shadow: none; }
.nav-posicion { font-size: .76rem; color: var(--tinta-suave); white-space: nowrap; }

/* ---------- Paneles ---------- */
.panel-fondo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(64, 56, 44, .35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.panel-fondo.abierto { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; z-index: 50; left: 50%; bottom: 0;
  width: 100%; max-width: 560px;
  max-height: 82dvh; overflow-y: auto;
  background: var(--fondo);
  border-radius: 24px 24px 0 0;
  border: 1px solid var(--borde); border-bottom: none;
  box-shadow: 0 -10px 40px rgba(64, 56, 44, .18);
  padding: 20px 24px calc(28px + env(safe-area-inset-bottom));
  transform: translate(-50%, 105%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.panel.abierto { transform: translate(-50%, 0); }
.panel-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.panel h3 { font-family: var(--titulo); font-size: 1.5rem; color: var(--tinta); }

.indice-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--borde);
  font-family: var(--cuerpo); font-size: .95rem; color: var(--tinta);
  padding: 13px 6px; cursor: pointer; text-align: left;
  border-radius: 8px;
  transition: background var(--transicion), padding-left var(--transicion);
}
.indice-item:hover { background: var(--melocoton); padding-left: 12px; }
.indice-item .check { color: var(--salvia); width: 1.2em; flex: none; }
.indice-item.actual { color: var(--terracota); font-weight: 600; }
.indice-sec {
  font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 700; margin: 18px 0 4px;
}

/* Progreso */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px 12px; text-align: center;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion);
}
.stat:hover { transform: translateY(-2px); }
.stat .valor { font-family: var(--titulo); font-size: 2.1rem; font-weight: 600; color: var(--terracota); line-height: 1.1; }
.stat .etiqueta { font-size: .76rem; color: var(--tinta-suave); }

/* Ajustes */
.ajuste-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 0; border-bottom: 1px solid var(--borde);
}
.ajuste-fila .grupo { display: flex; gap: 8px; }
.ajuste-fila input[type="number"] {
  width: 90px; text-align: center;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 10px;
  font-family: var(--cuerpo); font-size: .95rem; padding: 9px;
}
.ajuste-fila input[type="number"]:focus { outline: none; border-color: var(--oro); }
.aviso-datos {
  background: var(--melocoton);
  border-radius: 14px; padding: 13px 15px; font-size: .84rem;
  color: var(--tinta-suave); margin-top: 18px;
}

/* Chips */
.chips { display: flex; gap: 8px; margin: 14px 0 4px; }
.chip {
  flex: 1; padding: 11px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 999px; font-family: var(--cuerpo); font-size: .9rem; color: var(--tinta);
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
}
.chip:hover { transform: translateY(-1px); }
.chip.activo { border-color: var(--terracota); background: var(--melocoton); font-weight: 600; }

/* ---------- Cronómetro ---------- */
.timer-pill {
  position: fixed; right: 16px; bottom: 108px; z-index: 35;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 999px; padding: 9px 15px;
  font-size: .86rem; font-weight: 600; color: var(--tinta);
  box-shadow: var(--sombra); cursor: pointer;
  animation: aparecer .4s ease both;
}
.timer-pill svg {
  width: 16px; height: 16px; fill: none; stroke: var(--terracota);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.timer-pill[hidden], .timer-aviso[hidden] { display: none; }
.timer-aviso {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(64, 56, 44, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 24px;
}
.timer-aviso-caja {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 24px; box-shadow: var(--sombra);
  max-width: 380px; text-align: center; padding: 30px 26px;
  animation: aparecer .4s ease both;
}
.timer-aviso-titulo { font-family: var(--titulo); font-size: 1.5rem; margin-bottom: 8px; }

/* Nombre (primer acceso) */
.captura-nombre { text-align: center; padding-top: 9vh; }
.captura-nombre input {
  width: 100%; max-width: 320px; text-align: center;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 14px;
  font-family: var(--cuerpo); font-size: 1.1rem; padding: 15px; margin: 20px 0 10px;
  box-shadow: var(--sombra-suave);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.captura-nombre input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 22%, transparent); }

/* Escritorio */
@media (min-width: 900px) {
  main { padding-top: 48px; }
  .pantalla-portada h1 { font-size: 3.3rem; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
}

/* ============================================================
   PORTADA INTERACTIVA — héroe central + luz ambiente + selector
   ============================================================ */

body.en-portada header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Na portada o herói já traz a marca: o cabeçalho mostra só o menu */
body.en-portada header::after { display: none; }
body.en-portada .marca-lockup { visibility: hidden; }
body.en-portada footer.navegacion { display: none; }
body.en-portada main { max-width: none; padding: 0; }

.hero {
  position: relative;
  min-height: 100dvh;
  margin-top: -65px; /* la cabecera queda flotando encima */
  display: flex;
  overflow: hidden;
}

/* Luz ambiente: dos capas que se funden */
.hero-luz {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-luz.activa { opacity: 1; }

/* Contenido en columna */
.hero-contenido {
  position: relative; z-index: 2;
  width: 100%; max-width: 560px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  padding: 84px 22px calc(22px + env(safe-area-inset-bottom));
}

.hero-top { text-align: center; margin-bottom: 14px; }
.hero-top .saludo {
  font-family: var(--titulo); font-size: 1.45rem; color: var(--tinta);
}
.hero-top .fecha { font-size: .8rem; color: var(--tinta-suave); }

/* Carta del héroe */
.hero-carta-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.hero-carta {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 3 / 4;
  max-height: 44dvh;
  margin: 0 auto;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(90, 74, 52, .16);
  transition: box-shadow 1.4s ease;
}
.hero-escena {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s ease, transform 6.5s ease;
}
.hero-escena.activa { opacity: 1; transform: scale(1); }
.hero-escena img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-escena .escena-nombre {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titulo); font-size: 1.3rem; font-style: italic;
  color: rgba(74, 64, 50, .5);
}
.rotulo-rec {
  position: absolute; left: 12px; bottom: 10px; z-index: 3;
  font-size: .64rem; font-style: italic;
  color: rgba(74, 64, 50, .75);
  background: rgba(255, 253, 248, .68);
  border-radius: 999px; padding: 3px 10px;
  opacity: 0; transition: opacity .6s;
}
.rotulo-rec.visible { opacity: 1; }

/* Selector de escenas */
.chips-escenas {
  display: flex; justify-content: center; gap: 8px;
  margin: 16px auto 0;
}
.chip-escena {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 10px;
  border: 1px solid var(--borde); border-radius: 999px;
  background: rgba(255, 253, 248, .8);
  font-family: var(--cuerpo); font-size: .78rem; color: var(--tinta-suave);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion), color var(--transicion);
}
.chip-escena .punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--borde);
  transition: background var(--transicion), transform var(--transicion);
}
.chip-escena .nombre {
  max-width: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .45s cubic-bezier(.4,0,.2,1);
}
.chip-escena:hover { transform: translateY(-1px); }
.chip-escena:active { transform: scale(.94); }
.chip-escena.activa { color: var(--tinta); border-color: currentColor; }
.chip-escena.activa .nombre { max-width: 90px; }

/* Bloque de información con velo de luz */
.hero-info {
  text-align: center;
  background: rgba(255, 253, 248, .74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 24px;
  box-shadow: var(--sombra-suave);
  padding: 20px 20px 16px;
  margin-top: 18px;
}
.hero-info .coleccion {
  font-size: .66rem; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--oro); font-weight: 700; margin-bottom: 6px;
}
.hero-info h1 { font-size: 2.1rem; margin-bottom: 2px; }
.hero-info .subtitulo {
  font-family: var(--titulo); font-style: italic;
  font-size: 1.02rem; color: var(--tinta-suave); margin-bottom: 14px;
}
.hero-progreso { margin: 0 auto 12px; max-width: 320px; }
.hero-progreso .linea {
  height: 4px; border-radius: 2px; background: var(--borde);
  overflow: hidden; margin-bottom: 6px;
}
.hero-progreso .linea > div {
  height: 100%; border-radius: 2px; width: 0%;
  background: linear-gradient(90deg, var(--salvia), var(--oro));
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.hero-progreso .donde { font-size: .78rem; color: var(--tinta-suave); }

.hero-info .btn-principal { width: min(100%, 320px); margin: 2px 0 4px; }
.hero-info .btn-secundario { font-size: .85rem; padding: 10px 22px; }

/* Interruptor del cronómetro */
.timer-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 4px;
  font-size: .8rem; color: var(--tinta-suave);
  cursor: pointer; user-select: none;
}
.timer-toggle input { position: absolute; opacity: 0; }
.timer-toggle svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.timer-toggle .pista {
  width: 36px; height: 21px; border-radius: 999px;
  background: var(--borde); position: relative;
  transition: background var(--transicion);
}
.timer-toggle .pista::after {
  content: ''; position: absolute; top: 2.5px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #FFFDF8; box-shadow: 0 1px 4px rgba(90,74,52,.25);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.timer-toggle input:checked + .pista { background: var(--salvia); }
.timer-toggle input:checked + .pista::after { transform: translateX(14px); }

@media (min-width: 900px) {
  .hero-carta { max-height: 52dvh; width: min(100%, 380px); }
  .hero-info h1 { font-size: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-escena, .hero-luz { transition: opacity .01ms; transform: none; }
}

/* ============================================================
   INTERFAZ INTERNA v3 — lectura centrada, luz ambiente, tabbar
   ============================================================ */

/* Fondo de luz global (dos capas que se funden) */
.fondo-luz { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.fondo-luz .capa {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.2s ease;
}
.fondo-luz .capa.activa { opacity: 1; }
body.en-portada .fondo-luz { display: none; }

main { position: relative; z-index: 2; }

/* Hoja de lectura: velo de luz para legibilidad */
main { max-width: 620px; padding: 22px 18px 190px; }
.hoja {
  background: rgba(255, 253, 248, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 26px;
  box-shadow: var(--sombra-suave);
  padding: 28px 24px;
}
html[data-tema="oscuro"] .hoja {
  background: rgba(38, 33, 25, .78);
  border-color: rgba(255, 255, 255, .06);
}
.hoja .kicker { text-align: center; }
.hoja h2 { text-align: center; }
.hoja h2::after { margin-left: auto; margin-right: auto; }

/* Halo de sol suave (nunca anillo de neón) */
.halo {
  position: relative;
  width: 150px; height: 150px;
  margin: 6px auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.halo::before {
  content: ''; position: absolute; inset: -34px;
  background: radial-gradient(circle,
    rgba(233, 200, 138, .55) 0%,
    rgba(243, 224, 181, .35) 38%,
    rgba(250, 247, 240, 0) 70%);
  border-radius: 50%;
}
.halo .numero-mandamiento { position: relative; margin: 0; font-size: 4.2rem; }

/* Tarjeta de idea (cita o versículo destacado) */
.tarjeta-idea {
  position: relative;
  text-align: center;
  background: linear-gradient(170deg, rgba(255,253,248,.92), rgba(246,232,218,.55));
  border: 1px solid rgba(201, 162, 94, .3);
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(90, 74, 52, .1);
  padding: 30px 24px 20px;
  margin: 14px 0 24px;
}
html[data-tema="oscuro"] .tarjeta-idea {
  background: linear-gradient(170deg, rgba(46,40,32,.95), rgba(58,49,38,.7));
}
.tarjeta-idea .comillas {
  font-family: var(--titulo);
  font-size: 2.6rem; line-height: .5;
  color: var(--oro);
  display: block; margin-bottom: 12px;
}
.tarjeta-idea .texto-idea {
  font-family: var(--titulo);
  font-size: 1.45rem; line-height: 1.4;
  color: var(--tinta);
  margin-bottom: 10px;
}
.tarjeta-idea .ref { font-family: var(--cuerpo); font-size: .76rem; color: var(--tinta-suave); }

/* Pie: progreso + CTA + tabbar */
footer.pie {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  padding: 0 14px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.pie-caja {
  pointer-events: auto;
  max-width: 620px; margin: 0 auto;
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--borde);
  border-radius: 22px;
  box-shadow: var(--sombra);
  padding: 10px 14px 8px;
}
.progreso-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.progreso-fila .barra-progreso { flex: 1; height: 4px; margin: 0; }
.progreso-fila .nav-posicion { font-size: .7rem; }

.lectura-cta { display: flex; gap: 10px; margin-bottom: 9px; }
.lectura-cta .volver {
  flex: none; width: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tinta); border-radius: 999px; cursor: pointer;
  transition: transform var(--transicion), border-color var(--transicion);
}
.lectura-cta .volver svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lectura-cta .volver:hover { border-color: var(--oro); }
.lectura-cta .volver:active { transform: scale(.94); }
.lectura-cta .volver:disabled { opacity: .3; }
.pill-siguiente {
  flex: 1; border: none; cursor: pointer;
  background: var(--terracota); color: #FFF9F2;
  font-family: var(--cuerpo); font-size: 1rem; font-weight: 600;
  padding: 14px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(192, 118, 90, .26);
  transition: transform var(--transicion), background var(--transicion), box-shadow var(--transicion);
}
.pill-siguiente:hover { background: var(--terracota-hover); transform: translateY(-1px); }
.pill-siguiente:active { transform: scale(.98); }
.pill-siguiente:disabled { opacity: .4; transform: none; }

.tabbar {
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--borde);
  padding-top: 6px;
}
.tabbar button {
  flex: 1; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: var(--tinta-suave);
  font-family: var(--cuerpo); font-size: .64rem; letter-spacing: .3px;
  border-radius: 12px;
  transition: color var(--transicion), background var(--transicion), transform var(--transicion);
}
.tabbar button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar button:hover { color: var(--terracota); }
.tabbar button:active { transform: scale(.94); }

/* Índice como recorrido (stepper) */
.paso {
  display: flex; align-items: stretch; gap: 14px;
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 0; margin: 0;
  font-family: var(--cuerpo); color: var(--tinta);
  border-radius: 12px;
  transition: background var(--transicion);
}
.paso:hover { background: var(--melocoton); }
.paso .nodo-col { display: flex; flex-direction: column; align-items: center; flex: none; width: 34px; }
.paso .nodo {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--borde); background: var(--superficie);
  font-family: var(--titulo); font-weight: 600; font-size: .82rem;
  color: var(--tinta-suave);
  transition: all var(--transicion);
}
.paso .hilo { width: 2px; flex: 1; min-height: 14px; background: var(--borde); }
.paso:last-child .hilo { display: none; }
.paso.hecho .nodo { background: var(--salvia); border-color: var(--salvia); color: #FFFDF8; }
.paso.actual .nodo { border-color: var(--terracota); color: var(--terracota); box-shadow: 0 0 0 4px rgba(192, 118, 90, .14); }
.paso .paso-info { padding: 5px 0 16px; }
.paso .paso-titulo { font-weight: 600; font-size: .95rem; }
.paso.actual .paso-titulo { color: var(--terracota); }
.paso .paso-sub { font-size: .76rem; color: var(--tinta-suave); }
.paso .nodo svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Tu recorrido: donut + stats */
.recorrido-donut { display: flex; justify-content: center; margin: 8px 0 16px; }
.donut { position: relative; width: 150px; height: 150px; }
.donut svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.donut .pista { stroke: var(--borde); }
.donut .valor { transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.donut .centro {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut .centro .pct { font-family: var(--titulo); font-size: 2rem; font-weight: 600; color: var(--tinta); line-height: 1; }
.donut .centro .sub { font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tinta-suave); }

.stats-fila { display: flex; gap: 10px; margin-bottom: 14px; }
.stats-fila .stat { flex: 1; padding: 13px 8px; }
.stats-fila .stat .valor { font-size: 1.4rem; }
.stats-fila .stat .etiqueta { font-size: .68rem; }

.fila-botones { display: flex; gap: 8px; margin-top: 14px; }
.fila-botones .btn-secundario { flex: 1; margin: 0; }

/* Lista de anotaciones */
.anotacion-item {
  display: block; width: 100%; text-align: left;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
  cursor: pointer; font-family: var(--cuerpo); color: var(--tinta);
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), border-color var(--transicion);
}
.anotacion-item:hover { transform: translateY(-1px); border-color: var(--oro); }
.anotacion-item .de { font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--salvia); font-weight: 700; margin-bottom: 3px; }
.anotacion-item .fragmento { font-size: .88rem; color: var(--tinta-suave); font-style: italic; }
.sin-anotaciones { text-align: center; color: var(--tinta-suave); font-style: italic; padding: 18px 0; }

/* La pantalla de frase final respira sin hoja */
.solo-frase { text-align: center; padding-top: 8vh; }

/* Escuchar: lectura en voz alta */
.fila-escuchar { display: flex; justify-content: center; margin-bottom: 16px; }
.btn-escuchar {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--superficie); color: var(--tinta);
  font-family: var(--cuerpo); font-size: .88rem; font-weight: 600;
  cursor: pointer; box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.btn-escuchar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn-escuchar:hover { transform: translateY(-1px); border-color: var(--oro); }
.btn-escuchar:active { transform: scale(.96); }
.btn-escuchar.activo { border-color: var(--salvia); color: var(--salvia); background: var(--salvia-claro); }
html[data-tema="oscuro"] .btn-escuchar.activo { color: #A8BC9E; }

/* Enlaces con aspecto de botón (Descargar PDF) */
a.icono {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px;
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px;
  color: var(--tinta); font-family: var(--cuerpo); font-size: .88rem;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), border-color var(--transicion);
}
a.icono:hover { transform: translateY(-1px); border-color: var(--oro); }

/* La portada no muestra el pie de lectura */
body.en-portada footer.pie { display: none; }

/* ============================================================
   PORTADA v2 — héroe a pantalla completa con overlay integrado
   ============================================================ */

.hero-full { display: block; }

.hero-escenas { position: absolute; inset: 0; overflow: hidden; }
.hero-full .hero-escena { position: absolute; inset: 0; border-radius: 0; }
.hero-full .hero-escena img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-full .hero-escena .escena-nombre {
  font-size: 1.6rem;
  color: rgba(74, 64, 50, .35);
  align-items: flex-start;
  padding-top: 26dvh;
}

/* Halo de sol suave sobre el punto focal */
.hero-halo {
  position: absolute; left: 50%; top: 36%;
  width: min(92vw, 440px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 243, 210, .8) 0%,
    rgba(255, 243, 210, .38) 42%,
    rgba(255, 243, 210, 0) 70%);
  pointer-events: none;
}

.hero-full .rotulo-rec {
  position: absolute; right: 14px; top: 76px; left: auto; bottom: auto;
  z-index: 3;
}

/* Overlay en columna, pegado a los bordes de la pantalla */
.hero-full .hero-contenido {
  position: relative; z-index: 2;
  max-width: none; margin: 0; padding: 0;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: space-between;
}

/* Velo de luz superior para el saludo */
.hero-full .hero-top {
  margin: 0; padding: 92px 22px 34px;
  background: linear-gradient(to bottom,
    rgba(250, 247, 240, .9) 0%,
    rgba(250, 247, 240, .55) 55%,
    rgba(250, 247, 240, 0) 100%);
}

.hero-abajo { width: 100%; }
.hero-full .chips-escenas { margin: 0 auto 14px; position: relative; z-index: 3; }

/* Velo de luz inferior integrado (sin tarjeta) */
.hero-full .hero-info {
  background: linear-gradient(to top,
    rgba(250, 247, 240, .96) 0%,
    rgba(250, 247, 240, .92) 55%,
    rgba(250, 247, 240, .7) 78%,
    rgba(250, 247, 240, 0) 100%);
  border: none; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  margin: -46px 0 0; padding: 52px 22px calc(20px + env(safe-area-inset-bottom));
}
html[data-tema="oscuro"] .hero-full .hero-top {
  background: linear-gradient(to bottom, rgba(38, 33, 25, .88), rgba(38, 33, 25, 0));
}
html[data-tema="oscuro"] .hero-full .hero-info {
  background: linear-gradient(to top, rgba(38, 33, 25, .96) 0%, rgba(38, 33, 25, .9) 55%, rgba(38, 33, 25, .65) 78%, rgba(38, 33, 25, 0) 100%);
}
html[data-tema="oscuro"] .hero-halo { opacity: .35; }

/* ============================================================
   CAPA — limpieza final (spec): dots, link fino, cron discreto
   ============================================================ */

/* Chips como dots discretos (área de toque amplia, punto pequeño) */
.hero-full .chip-escena {
  width: 36px; min-height: 36px; padding: 0;
  justify-content: center;
  background: rgba(255, 253, 248, .5);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: none;
}
.hero-full .chip-escena .punto { width: 8px; height: 8px; }
.hero-full .chip-escena.activa { transform: scale(1.12); background: rgba(255, 253, 248, .85); }
.hero-full .chip-escena .nombre { display: none; }

/* Enlace fino, sin caja */
.link-fino {
  display: inline-block;
  background: none; border: none; box-shadow: none;
  color: var(--tinta-suave);
  font-family: var(--cuerpo); font-size: .88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 12px 8px; margin: 0;
  cursor: pointer;
  transition: color var(--transicion);
}
.link-fino:hover { color: var(--terracota); }

/* Cronómetro: ícono pequeño y discreto en la esquina de la base */
.hero-full .hero-info { position: relative; }
.icono-cronometro {
  position: absolute; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom));
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 253, 248, .6);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: transform var(--transicion), color var(--transicion), background var(--transicion);
}
.icono-cronometro svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.icono-cronometro:hover { transform: translateY(-1px); color: var(--terracota); background: rgba(255, 253, 248, .9); }
.icono-cronometro:active { transform: scale(.92); }
html[data-tema="oscuro"] .icono-cronometro { background: rgba(38, 33, 25, .6); border-color: rgba(255, 255, 255, .12); }

/* ============================================================
   SISTEMA DE DISEÑO PREMIUM — editorial sagrado
   Serifa para lectura, sans discreta para interfaz, bordas finas,
   progreso oliva, foco visible, logo en cabecera
   ============================================================ */

:root {
  --ui: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --radio: 16px;
}

/* Interfaz y rótulos en sans discreta (la lectura sigue en serifa) */
button.icono, .btn-principal, .btn-secundario, .link-fino, .chip, .chip-escena,
.tabbar button, .pill-siguiente, .nav-fila button, .nav-posicion,
.kicker, .coleccion, .fecha, .stat .etiqueta, .indice-sec, .paso-sub,
.guardado-tag, .jesus-tag, .oracion-caja .etiqueta, .ajuste-fila,
.aviso-datos, .hero-progreso .donde, .timer-pill, .btn-escuchar,
.anotacion-item .de, .donut .centro .sub, .lectura-cta .volver,
.hero-full .hero-top .fecha, a.icono, .rotulo-rec, input {
  font-family: var(--ui);
}

/* Bordas quentes e finas */
button.icono, a.icono, .chip, .chip-escena, .hoja, .pie-caja, .panel,
textarea.nota, .stat, .anotacion-item, .jesus-box, .tarjeta-idea,
label.completar, .lectura-cta .volver, .btn-secundario, .verso-caja,
.aviso-datos, .mapa-svg, .btn-escuchar, .timer-pill, .icono-cronometro {
  border-width: .5px;
}

/* Progreso em oliva (fina) */
.barra-progreso > div { background: var(--salvia); }
.hero-progreso .linea > div { background: var(--salvia); }
@keyframes brillo-barra {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.4); }
  100% { filter: brightness(1); }
}
.barra-progreso > div.brillo { animation: brillo-barra .9s ease; }

/* Foco visível (acessibilidade) */
:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Logo no cabeçalho (slot parametrizável; placeholder até chegar o arquivo) */
/* (cabecera: marca-lockup + btn-menu definidos junto al header) */

/* ---------- Interações do conjunto piloto ---------- */

/* Fila de ações (Escuchar / Guardar / Anotar) */
.fila-acciones {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin-bottom: 16px;
}
.fila-acciones .btn-escuchar { min-height: 44px; padding: 0 16px; font-size: .82rem; }
.btn-favorito.activo { border-color: var(--oro); color: var(--oro); background: rgba(201, 162, 94, .12); }
.btn-favorito.activo svg { fill: var(--oro); stroke: var(--oro); }

/* Revelar por toque */
.oculto { display: none; }
.revelado { animation: aparecer .45s cubic-bezier(.25, .6, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .revelado { animation: none; } }
.btn-revelar {
  display: block; margin: 6px auto 0;
  min-height: 46px; padding: 0 24px;
  background: none; cursor: pointer;
  border: .5px dashed var(--oro); border-radius: 999px;
  color: var(--tinta-suave);
  font-family: var(--ui); font-size: .85rem;
  transition: color var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.btn-revelar:hover { color: var(--terracota); border-color: var(--terracota); transform: translateY(-1px); }
.btn-revelar:active { transform: scale(.96); }

/* Luz que florece ao completar um capítulo */
.bloom {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 1; transition: opacity .5s ease;
}
.bloom.irse { opacity: 0; }
.bloom-luz {
  position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 240, 200, .85) 0%,
    rgba(255, 240, 200, .4) 45%,
    rgba(255, 240, 200, 0) 70%);
  animation: florecer-luz 2.2s ease both;
}
@keyframes florecer-luz {
  0% { transform: scale(.2); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.25); opacity: .0; }
}
.bloom-sello {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 253, 248, .95);
  border: .5px solid var(--oro); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(90, 74, 52, .18);
  padding: 13px 22px;
  font-family: var(--ui); font-size: .9rem; font-weight: 600; color: var(--tinta);
  animation: aparecer .5s cubic-bezier(.25, .6, .3, 1) both .15s;
}
.bloom-check {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--salvia);
  display: inline-flex; align-items: center; justify-content: center;
}
.bloom-check svg {
  width: 14px; height: 14px; fill: none; stroke: #FFFDF8;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .bloom-luz { animation: none; opacity: 0; }
  .bloom-sello { animation: none; }
}

/* Menú de la casita */
.menu-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 56px; text-align: left;
  background: var(--superficie); border: .5px solid var(--borde);
  border-radius: 14px; padding: 0 16px; margin-bottom: 10px;
  cursor: pointer; color: var(--tinta);
  font-family: var(--ui); font-size: 1rem; font-weight: 600;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), border-color var(--transicion), background var(--transicion);
}
.menu-item svg {
  width: 21px; height: 21px; flex: none;
  fill: none; stroke: var(--terracota); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.menu-item:hover { transform: translateY(-1px); border-color: var(--oro); }
.menu-item:active { transform: scale(.98); }

/* ============================================================
   PORTADA v3 PREMIUM — cena de amanecer realista + tarjeta de vidrio
   (aprovada 2026-08-14; a cena CSS é placeholder até as fotos chegarem)
   ============================================================ */

.hero-paisaje { position: absolute; inset: 0; overflow: hidden; }
.hero-paisaje .cielo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,#B7CFDB 0%,#DFDCC2 22%,#F0D8A4 42%,#EDC488 60%,#E0AC72 78%,#CE9862 92%,#C08A58 100%);
}
.hero-paisaje .horizonte-rosa {
  position: absolute; left: 0; right: 0; top: 26%; height: 34%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(238,178,140,.35), transparent 70%);
}
.hero-paisaje .sol-halo {
  position: absolute; left: 50%; top: 38%; width: min(100vw, 400px); aspect-ratio: 1;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,246,218,.95) 0%, rgba(255,232,180,.55) 25%, rgba(255,222,162,.22) 48%, transparent 68%);
  filter: blur(2px);
  animation: respira-sol 7s ease-in-out infinite;
}
@keyframes respira-sol {
  0%,100% { opacity: .92; }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .hero-paisaje .sol-halo { animation: none; } }
.hero-paisaje .sol-disco {
  position: absolute; left: 50%; top: 38%; width: 60px; height: 60px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #FFF8E2, #FFE4A8 62%, #F6CB7C);
  box-shadow: 0 0 38px 12px rgba(255,230,172,.85);
}
.montes-cielo { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; }
.montes-cielo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-paisaje .bruma {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
  background: linear-gradient(180deg, transparent 0%, rgba(244,220,170,.3) 42%, rgba(210,156,98,.34) 100%);
}
.hero-paisaje .grano {
  position: absolute; inset: 0; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-paisaje .vineta {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 42%, transparent 62%, rgba(74,52,32,.16) 100%);
}
html[data-tema="oscuro"] .hero-paisaje { filter: brightness(.72) saturate(.85); }

/* As fotos das cenas entram por cima do paisaje; sem foto, só um tinte de luz */
.hero-full .hero-escena { opacity: 0; transition: opacity 1.4s ease; }
.hero-full .hero-escena.activa { opacity: .28; }
.hero-full .hero-escena.con-img.activa { opacity: 1; }

/* Cronómetro de vidro flutuando sobre a cena */
.hero-full .fila-cron {
  display: flex; justify-content: flex-end;
  padding: 0 16px; margin-bottom: 10px;
  position: relative; z-index: 3;
}
.hero-full .icono-cronometro {
  position: static;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,253,248,.42);
  border: .5px solid rgba(255,255,255,.65);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 3px 10px rgba(62,46,35,.16);
}

/* Dots das cenas: anel fino, ativo vira pílula dourada */
.hero-full .chip-escena {
  width: 30px; min-height: 30px;
  background: none; border: none; box-shadow: none;
}
.hero-full .chip-escena .punto {
  width: 7px; height: 7px; border-radius: 99px;
  border: 1px solid rgba(255,253,248,.85); background: transparent;
  box-shadow: 0 1px 4px rgba(62,46,35,.28);
  transition: all .25s ease;
}
.hero-full .chip-escena.activa { transform: none; background: none; }
.hero-full .chip-escena.activa .punto {
  width: 20px;
  background: linear-gradient(90deg, #FFF3D8, #F2D9A6);
  border-color: transparent;
}

/* Tarjeta de vidrio */
.tarjeta-vidrio {
  position: relative; z-index: 2;
  width: min(calc(100% - 28px), 540px);
  margin: 0 auto calc(14px + env(safe-area-inset-bottom));
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,253,248,.6), rgba(255,253,248,.82));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: .5px solid rgba(255,255,255,.8);
  box-shadow: 0 12px 38px rgba(62,46,35,.24), inset 0 1px 0 rgba(255,255,255,.95);
  padding: 18px 22px;
  text-align: center;
}
.tarjeta-vidrio .filete { width: 190px; height: 11px; margin: 2px auto 8px; position: relative; }
.tarjeta-vidrio .filete::before, .tarjeta-vidrio .filete::after {
  content: ""; position: absolute; top: 5px; height: 1px; width: 76px;
  background: linear-gradient(90deg, transparent, rgba(201,162,94,.75));
}
.tarjeta-vidrio .filete::before { left: 0; }
.tarjeta-vidrio .filete::after { right: 0; transform: scaleX(-1); }
.tarjeta-vidrio .filete i {
  position: absolute; left: 50%; top: 2.5px; width: 6px; height: 6px;
  background: var(--oro); transform: translateX(-50%) rotate(45deg);
}
.kicker-capa {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 4px;
  font-size: .66rem; letter-spacing: .28em; text-transform: uppercase;
  color: #A88544; font-weight: 600;
}
.kicker-capa .sol-mini { width: 17px; height: 17px; }
.tarjeta-vidrio h1 {
  font-family: var(--titulo); font-weight: 600;
  font-size: 2.05rem; line-height: 1.06; color: #3A3226;
  margin: 7px 0 4px;
}
.tarjeta-vidrio .subtitulo {
  font-family: var(--cuerpo); font-style: italic;
  font-size: .85rem; color: var(--tinta-suave);
}
.panel-progreso {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  margin: 14px auto 2px; padding: 10px 16px; width: fit-content;
  background: rgba(255,253,248,.65);
  border: .5px solid rgba(62,46,35,.13); border-radius: 16px;
  text-align: left;
}
.anillo { width: 44px; height: 44px; flex: none; }
.anillo circle { fill: none; stroke-linecap: round; }
.anillo .pct { font-family: var(--ui); font-size: 10px; font-weight: 600; fill: #8A6E3F; }
.panel-progreso .donde { font-size: .75rem; color: var(--tinta-suave); line-height: 1.5; margin: 0; font-family: var(--ui); }
.panel-progreso .donde b { display: block; color: #4A4032; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }

.btn-capa {
  display: block; width: 100%;
  margin-top: 13px; padding: 16px 18px;
  border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--ui); font-size: .97rem; font-weight: 600;
  color: #FFF9EE; letter-spacing: .02em;
  background: linear-gradient(180deg, #CE8568, #B2623D);
  box-shadow: 0 10px 24px rgba(178,98,61,.36), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-capa:hover { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(178,98,61,.42), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-capa:active { transform: scale(.985); }
.btn-suave-capa {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 11px; padding: 10px 20px;
  border-radius: 999px; cursor: pointer;
  font-family: var(--ui); font-size: .78rem; color: #5A4C38;
  background: transparent; border: .5px solid rgba(90,76,56,.28);
  transition: border-color .18s ease, background .18s ease;
}
.btn-suave-capa:hover { border-color: var(--oro); background: rgba(201,162,94,.07); }
.btn-suave-capa svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Menu do cabeçalho vira círculo de vidro na portada */
body.en-portada .btn-menu {
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,253,248,.42);
  border: .5px solid rgba(255,255,255,.65);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 3px 10px rgba(62,46,35,.16);
}

/* Tema noturno da tarjeta */
html[data-tema="oscuro"] .tarjeta-vidrio {
  background: linear-gradient(180deg, rgba(38,33,25,.62), rgba(38,33,25,.86));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 12px 38px rgba(0,0,0,.4);
}
html[data-tema="oscuro"] .tarjeta-vidrio h1 { color: #EDE4D4; }
html[data-tema="oscuro"] .panel-progreso {
  background: rgba(38,33,25,.55); border-color: rgba(255,255,255,.12);
}
html[data-tema="oscuro"] .panel-progreso .donde b { color: #EDE4D4; }

/* ---------- Bienvenida premium (mismo lenguaje de la portada) ---------- */
.bienvenida { display: block; position: relative; }
.bienvenida .sol-halo, .bienvenida .sol-disco { top: 21%; }
.bienvenida-centro {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh;
  padding: 84px 0 44px;
}
.tarjeta-bienvenida { margin: 0 auto; padding: 24px 26px 26px; }
.tarjeta-bienvenida h1 {
  font-family: var(--titulo); font-weight: 600;
  font-size: 1.9rem; line-height: 1.1; color: #3A3226;
  margin: 8px 0 10px;
}
.pregunta-intro { font-family: var(--cuerpo); font-size: .9rem; color: var(--tinta-suave); }
.pregunta {
  font-family: var(--titulo); font-weight: 600;
  font-size: 1.3rem; color: var(--terracota);
  margin: 6px 0 16px;
}
.tarjeta-bienvenida input {
  width: 100%; padding: 13px 18px;
  text-align: center;
  font-family: var(--cuerpo); font-size: 1rem; color: var(--tinta);
  background: rgba(255,253,248,.78);
  border: .5px solid rgba(62,46,35,.2); border-radius: 999px;
  outline: none;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.tarjeta-bienvenida input:focus {
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(201,162,94,.18);
}
.tarjeta-bienvenida input::placeholder { color: var(--tinta-suave); font-style: italic; }
.tarjeta-bienvenida .nota-suave {
  font-family: var(--cuerpo); font-style: italic;
  font-size: .78rem; color: var(--tinta-suave);
  margin-top: 9px;
}
.btn-compacto {
  display: inline-block; width: auto;
  padding: 12px 38px; margin-top: 15px;
  font-size: .92rem;
}
html[data-tema="oscuro"] .tarjeta-bienvenida h1 { color: #EDE4D4; }
html[data-tema="oscuro"] .tarjeta-bienvenida input {
  background: rgba(38,33,25,.6); color: #EDE4D4;
  border-color: rgba(255,255,255,.16);
}

/* ---------- Ações da leitura: chips minimalistas ---------- */
.fila-acciones { gap: 5px; margin-bottom: 14px; }
.fila-acciones .btn-escuchar {
  min-height: 29px; padding: 0 10px;
  font-size: .64rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  gap: 5px;
  background: transparent;
  border-color: rgba(62,46,35,.22);
  box-shadow: none;
  color: var(--tinta-suave);
  transition: transform .16s ease, border-color .16s ease, color .16s ease,
              background .16s ease, box-shadow .16s ease;
}
.fila-acciones .btn-escuchar svg { width: 13px; height: 13px; stroke-width: 1.6; }
.fila-acciones .btn-escuchar:hover {
  border-color: var(--oro); color: #A88544;
  background: rgba(201,162,94,.07);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(62,46,35,.08);
}
.fila-acciones .btn-escuchar:active { transform: scale(.92); }
.fila-acciones .btn-escuchar.activo {
  border-color: var(--salvia); color: var(--salvia);
  background: var(--salvia-claro);
}
.fila-acciones .btn-favorito.activo {
  border-color: var(--oro); color: #A88544;
  background: rgba(201,162,94,.12);
}
.fila-acciones .btn-favorito.activo svg { fill: var(--oro); stroke: var(--oro); }
html[data-tema="oscuro"] .fila-acciones .btn-escuchar {
  border-color: rgba(255,255,255,.2); color: #B8AC98;
}
html[data-tema="oscuro"] .fila-acciones .btn-escuchar.activo { color: #A8BC9E; }

/* ---------- Siguiente: compacto, com seta viva ---------- */
.lectura-cta { justify-content: center; align-items: center; gap: 12px; }
.lectura-cta .volver { width: 46px; height: 46px; }
.pill-siguiente {
  flex: 0 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 180px;
  padding: 12px 28px;
  font-size: .92rem; letter-spacing: .02em;
  background: linear-gradient(180deg, #CE8568, #B2623D);
  box-shadow: 0 8px 20px rgba(178,98,61,.32), inset 0 1px 0 rgba(255,255,255,.38);
  position: relative; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.pill-siguiente .flecha {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  animation: empuja-flecha 3.2s ease-in-out infinite;
  transition: transform .18s ease;
}
@keyframes empuja-flecha {
  0%, 70%, 100% { transform: translateX(0); }
  79% { transform: translateX(4px); }
  87% { transform: translateX(0); }
  93% { transform: translateX(2.5px); }
}
.pill-siguiente::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 36%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  animation: brillo-pill 4.6s ease-in-out infinite;
}
@keyframes brillo-pill {
  0%, 55% { left: -45%; }
  80%, 100% { left: 115%; }
}
@media (prefers-reduced-motion: reduce) {
  .pill-siguiente .flecha, .pill-siguiente::after { animation: none; }
}
.pill-siguiente:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #D48B6D, #B96844);
  box-shadow: 0 11px 24px rgba(178,98,61,.42), inset 0 1px 0 rgba(255,255,255,.38);
}
.pill-siguiente:hover .flecha { animation: none; transform: translateX(3px); }
.pill-siguiente:active { transform: scale(.93); filter: brightness(1.06); }
.pill-siguiente:active .flecha { animation: none; transform: translateX(6px); }
.pill-siguiente:disabled { opacity: .4; }
.pill-siguiente:disabled::after, .pill-siguiente:disabled .flecha { animation: none; }

/* ---------- Abertura de seção premium (kicker + título + filete) ---------- */
.kicker {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: .66rem; letter-spacing: .3em;
  color: #A88544; margin-bottom: 12px;
}
.kicker::before, .kicker::after {
  content: ""; height: 1px; width: 34px; flex: none;
  background: linear-gradient(90deg, transparent, rgba(201,162,94,.6));
}
.kicker::after { transform: scaleX(-1); }
html[data-tema="oscuro"] .kicker { color: var(--oro); }
html[data-tema="oscuro"] .kicker::before, html[data-tema="oscuro"] .kicker::after {
  background: linear-gradient(90deg, transparent, rgba(201,162,94,.5));
}
h2::after {
  width: 160px; height: 9px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='9' viewBox='0 0 160 9'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23C9A25E' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23C9A25E' stop-opacity='.75'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23C9A25E' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23C9A25E' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='4' width='66' height='1' fill='url(%23a)'/%3E%3Crect x='94' y='4' width='66' height='1' fill='url(%23b)'/%3E%3Crect x='76.8' y='1.3' width='5.8' height='5.8' transform='rotate(45 79.7 4.2)' fill='%23C9A25E'/%3E%3C/svg%3E") center/contain no-repeat;
  margin-top: 13px;
}

/* ---------- Painéis premium (folhas inferiores) ---------- */
.panel::before {
  content: ""; display: block;
  width: 40px; height: 4px; border-radius: 99px;
  background: rgba(62,46,35,.16);
  margin: 0 auto 14px;
}
.panel-cabecera { position: relative; padding-bottom: 12px; margin-bottom: 16px; }
.panel-cabecera::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(201,162,94,.55), transparent 78%);
}
.panel-cabecera .icono {
  min-width: 36px; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; background: transparent; box-shadow: none;
  color: var(--tinta-suave); font-size: .88rem;
  border-color: rgba(62,46,35,.2);
}
.panel-cabecera .icono:hover { color: #A88544; border-color: var(--oro); transform: none; box-shadow: none; }
.panel-cabecera .icono:active { transform: scale(.9); }

/* Itens do menu: linhas serenas com medalhão e seta */
.menu-item {
  background: transparent; border: none; box-shadow: none;
  min-height: 58px; margin-bottom: 0; padding: 0 10px;
  border-radius: 14px;
  border-bottom: .5px solid rgba(62,46,35,.09);
  font-weight: 500; font-size: .95rem;
  transition: background .18s ease, transform .18s ease;
}
.menu-item:last-of-type { border-bottom: none; }
.menu-item svg {
  width: 38px; height: 38px; padding: 9px;
  border-radius: 50%;
  background: rgba(192,118,90,.1);
  transition: background .18s ease;
}
.menu-item::after {
  content: ""; margin-left: auto; flex: none;
  width: 7px; height: 7px;
  border-right: 1.4px solid rgba(122,111,93,.5);
  border-top: 1.4px solid rgba(122,111,93,.5);
  transform: rotate(45deg);
  transition: transform .18s ease, border-color .18s ease;
}
.menu-item:hover { transform: none; background: rgba(201,162,94,.07); border-color: rgba(62,46,35,.09); }
.menu-item:hover svg { background: rgba(192,118,90,.16); }
.menu-item:hover::after { transform: rotate(45deg) translate(2px,-2px); border-color: #A88544; }
.menu-item:active { transform: scale(.985); background: rgba(201,162,94,.12); }
.menu-item:active::after { transform: rotate(45deg) translate(3px,-3px); border-color: #A88544; }

/* Entrada escalonada quando o painel abre */
@keyframes sube-item {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.panel.abierto .menu-item { animation: sube-item .38s cubic-bezier(.25,.6,.3,1) both; }
.panel.abierto .menu-item:nth-of-type(1) { animation-delay: .04s; }
.panel.abierto .menu-item:nth-of-type(2) { animation-delay: .09s; }
.panel.abierto .menu-item:nth-of-type(3) { animation-delay: .14s; }
.panel.abierto .menu-item:nth-of-type(4) { animation-delay: .19s; }
.panel.abierto .menu-item:nth-of-type(5) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .panel.abierto .menu-item { animation: none; } }

/* ---------- Harmonia sobre as fotos reais (2026-08-14) ---------- */
/* Saudação legível sobre qualquer cena */
.hero-full .hero-top {
  padding: 88px 22px 46px;
  background: linear-gradient(to bottom,
    rgba(250, 247, 240, .94) 0%,
    rgba(250, 247, 240, .72) 48%,
    rgba(250, 247, 240, 0) 100%);
}
.hero-full .hero-top .saludo,
.hero-full .hero-top .fecha {
  text-shadow: 0 1px 10px rgba(250,247,240,.95), 0 0 26px rgba(250,247,240,.8);
}
/* Vidros um pouco mais firmes para segurar fotos claras e escuras */
.tarjeta-vidrio {
  background: linear-gradient(180deg, rgba(255,253,248,.68), rgba(255,253,248,.88));
}
.hero-full .icono-cronometro,
body.en-portada .btn-menu {
  background: rgba(255,253,248,.55);
}
.hero-full .chip-escena .punto {
  border-color: rgba(255,253,248,.95);
  box-shadow: 0 1px 5px rgba(62,46,35,.4);
}

/* Confirmação de reinício do progresso (Ajustes) */
.confirmar-reinicio {
  margin: 4px 0 14px;
  padding: 14px 16px;
  background: rgba(192,118,90,.08);
  border: .5px solid rgba(192,118,90,.3);
  border-radius: 14px;
  animation: aparecer .3s ease both;
}
.confirmar-reinicio p {
  font-family: var(--ui); font-size: .82rem;
  color: var(--tinta-suave); line-height: 1.5;
  margin-bottom: 11px;
}
.confirmar-reinicio .grupo { display: flex; gap: 8px; flex-wrap: wrap; }
.confirmar-reinicio .peligro {
  background: linear-gradient(180deg, #CE8568, #B2623D);
  color: #FFF9EE; border: none;
}
.confirmar-reinicio .peligro:hover { border-color: transparent; filter: brightness(1.05); }

html[data-tema="oscuro"] .panel::before { background: rgba(255,255,255,.18); }
html[data-tema="oscuro"] .menu-item { border-bottom-color: rgba(255,255,255,.08); }
html[data-tema="oscuro"] .menu-item svg { background: rgba(192,118,90,.18); }
html[data-tema="oscuro"] .menu-item:hover, html[data-tema="oscuro"] .menu-item:active { background: rgba(201,162,94,.1); }

/* Volver a la biblioteca (área de miembros) */
.volver-biblioteca{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:14px;z-index:58;
  display:none;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  font-family:var(--ui,-apple-system,'Segoe UI',sans-serif);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:#544835;text-decoration:none;background:rgba(255,253,248,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:.5px solid rgba(201,162,94,.42);box-shadow:0 6px 18px rgba(62,46,35,.16)}
body.en-portada .volver-biblioteca{display:inline-flex}
.volver-biblioteca svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.volver-biblioteca:active{transform:scale(.95)}
a.menu-item{text-decoration:none;color:inherit}