/* ─────────────────────────────────────────────────────────────────────────────
   style.css  -  Reto "Recuerdo quién soy"  ·  Mujer en Grandeza
   Mobile-first. Tipografías: Fraunces (títulos) + Jost (cuerpo).
───────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,300;1,9..144,400&family=Jost:wght@300;400;500&display=swap');

/* ─── Variables ────────────────────────────────────────────────── */
:root {
  --crema:         #F5F0E8;
  --crema-dark:    #EDE5D8;
  --crema-border:  #DDD3C3;
  --vino:          #651C28;
  --vino-hover:    #7D2232;
  --vino-light:    #F5ECEE;
  --dorado:        #C9A96E;
  --dorado-dark:   #9A7B43;
  --espresso:      #1A1410;
  --gris:          #6B5E52;
  --gris-light:    #9C8B7E;
  --blanco:        #FDFAF5;
  --sombra:        0 2px 12px rgba(26,20,16,.08);
  --sombra-md:     0 4px 24px rgba(26,20,16,.13);
  --radio:         12px;
  --radio-sm:      8px;
}

/* ─── Reset + base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  background: var(--crema);
  color: var(--espresso);
  min-height: 100vh;
  line-height: 1.75;
}

img { max-width: 100%; display: block; }
a { color: var(--vino); }
hr { border: none; border-top: 1px solid var(--crema-border); margin: 2rem 0; }

/* ─── Tipografía ───────────────────────────────────────────────── */
h1, h2, h3, .font-display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
}
h1 { font-size: clamp(2rem, 7vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
h3 { font-size: clamp(1.1rem, 4vw, 1.4rem); }

.subtitle {
  font-family: 'Jost', sans-serif;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dorado-dark);
}
.italic { font-style: italic; }
.vino   { color: var(--vino); }
.dorado { color: var(--dorado-dark); }
.gris   { color: var(--gris); }

/* ─── Layout ───────────────────────────────────────────────────── */
.page-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-wrap--narrow {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ─── Brand bar ────────────────────────────────────────────────── */
.brand-bar {
  padding: 20px 20px 0;
  text-align: center;
}
.brand-bar .subtitle { font-size: .7rem; }

/* ─── Botones ──────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 15px 28px;
  font-family: 'Jost', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  -webkit-appearance: none;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }

.btn-vino {
  background: var(--vino);
  color: var(--blanco);
  box-shadow: 0 3px 16px rgba(101,28,40,.28);
}
.btn-vino:hover, .btn-vino:focus {
  background: var(--vino-hover);
  box-shadow: 0 5px 22px rgba(101,28,40,.35);
  color: var(--blanco);
}

.btn-outline {
  background: transparent;
  color: var(--vino);
  border: 1.5px solid var(--vino);
  box-shadow: none;
}
.btn-outline:hover, .btn-outline:focus {
  background: var(--vino-light);
}

.btn-full  { width: 100%; text-align: center; }
.btn-sm    { padding: 10px 20px; font-size: .75rem; }

.btn:disabled, .btn[disabled] {
  opacity: .5;
  pointer-events: none;
}

/* ─── Formulario ───────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.form-group label {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  background: var(--blanco);
  border: 1.5px solid var(--crema-border);
  border-radius: var(--radio-sm);
  color: var(--espresso);
  transition: border-color .2s;
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--dorado);
}
.form-group textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.65;
}

/* ─── Error inline ─────────────────────────────────────────────── */
.error-msg {
  font-size: .85rem;
  color: var(--vino);
  background: var(--vino-light);
  border-radius: var(--radio-sm);
  padding: 10px 14px;
  display: none;
}
.error-msg.visible { display: block; }

/* ─── Card ─────────────────────────────────────────────────────── */
.card {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px 20px;
}
.card + .card { margin-top: 14px; }

/* ─── Sección con aire ─────────────────────────────────────────── */
.seccion {
  padding: 32px 0 16px;
}
.seccion + .seccion { padding-top: 16px; }

/* ─────────────────────────────────────────────────────────────────
   LANDING - index.html
───────────────────────────────────────────────────────────────────── */
.landing-hero {
  padding: 48px 0 36px;
  text-align: center;
}
.landing-hero h1 {
  color: var(--vino);
  margin-bottom: 12px;
}
.landing-hero h1 em { color: var(--dorado-dark); }
.landing-hero .tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  color: var(--gris);
  margin-bottom: 6px;
}
.landing-hero .descripcion {
  font-size: .95rem;
  color: var(--gris);
  max-width: 380px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

.landing-form-card {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 28px 24px;
  box-shadow: var(--sombra-md);
  margin-bottom: 48px;
}
.landing-form-card .form-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  color: var(--espresso);
  margin-bottom: 20px;
  text-align: center;
}

/* Confirmación */
.confirmacion {
  display: none;
  text-align: center;
  padding: 40px 0 60px;
}
.confirmacion.activa { display: block; }
.confirmacion h2 { color: var(--vino); margin-bottom: 14px; }
.confirmacion .desc {
  font-size: .97rem;
  color: var(--gris);
  max-width: 360px;
  margin: 0 auto 28px;
}
.confirmacion .nota {
  font-size: .82rem;
  color: var(--gris-light);
  margin-top: 14px;
}
.confirmacion .acciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 280px;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────
   DASHBOARD
───────────────────────────────────────────────────────────────────── */
.dashboard-header {
  padding: 40px 0 24px;
  text-align: center;
}
.dashboard-header h2 { color: var(--vino); margin-bottom: 4px; }
.dashboard-header .sub {
  font-size: .85rem;
  color: var(--gris-light);
}

/* Progreso principal */
.progreso-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px 0 20px;
}

/* Anillo SVG */
.anillo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anillo {
  transform: rotate(-90deg);
  width: 120px;
  height: 120px;
}
.anillo-fondo { fill: none; stroke: var(--crema-dark); stroke-width: 7; }
.anillo-progreso {
  fill: none;
  stroke: var(--vino);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}
.anillo-texto {
  position: absolute;
  text-align: center;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  line-height: 1.1;
}
.anillo-num {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem;
  color: var(--vino);
  line-height: 1;
}
.anillo-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-light);
}

/* Estrellas */
.estrellas {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.estrella-svg {
  width: 26px; height: 26px;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.estrella-svg.activa { transform: scale(1.18); }

/* Mapa de transición */
.mapa-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--gris);
  text-align: center;
  margin-bottom: 18px;
  margin-top: 8px;
}
.mapa {
  position: relative;
  padding-left: 36px;
}
.mapa::before {
  content: '';
  position: absolute;
  left: 11px; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(to bottom, var(--dorado) 0%, var(--crema-border) 100%);
}
.mapa-nodo {
  position: relative;
  min-height: 44px;
  margin-bottom: 16px;
  padding-top: 2px;
}
.mapa-nodo:last-child { margin-bottom: 0; }
.mapa-punto {
  position: absolute;
  left: -28px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--crema-border);
  border: 2px solid var(--crema-dark);
  transition: background .4s, border-color .4s;
}
.mapa-nodo.completado .mapa-punto {
  background: var(--vino);
  border-color: var(--vino);
}
.mapa-nodo.dorado .mapa-punto {
  background: var(--dorado);
  border-color: var(--dorado);
}
.mapa-dia-label {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-light);
  margin-bottom: 2px;
}
.mapa-frase-texto {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: .98rem;
  color: var(--espresso);
  line-height: 1.45;
}
.mapa-frase-texto.vacia {
  font-family: 'Jost', sans-serif;
  font-style: normal;
  font-size: .85rem;
  color: var(--gris-light);
}

/* Lista de días */
.dias-lista { display: flex; flex-direction: column; gap: 10px; }

.dia-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 18px 18px 18px 20px;
  box-shadow: var(--sombra);
  text-decoration: none;
  transition: box-shadow .2s, transform .15s;
  border-left: 4px solid var(--crema-border);
}
.dia-card.disponible {
  border-left-color: var(--vino);
  cursor: pointer;
}
.dia-card.disponible:hover, .dia-card.disponible:focus {
  box-shadow: var(--sombra-md);
  transform: translateY(-1px);
}
.dia-card.completado { border-left-color: var(--dorado); }
.dia-card.bloqueado  { opacity: .55; cursor: default; }

.dia-card-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.6rem;
  color: var(--crema-border);
  min-width: 32px;
  text-align: center;
  line-height: 1;
}
.dia-card.disponible .dia-card-num { color: var(--vino); }
.dia-card.completado .dia-card-num { color: var(--dorado); }

.dia-card-info { flex: 1; min-width: 0; }
.dia-card-tema {
  display: block;
  font-weight: 500;
  font-size: .97rem;
  color: var(--espresso);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dia-card.bloqueado .dia-card-tema { color: var(--gris-light); }
.dia-card-estado {
  font-size: .75rem;
  color: var(--gris-light);
  letter-spacing: .05em;
}
.dia-card.disponible .dia-card-estado { color: var(--vino); font-weight: 500; }
.dia-card.completado .dia-card-estado { color: var(--dorado-dark); }

.dia-card-icon { font-size: 1rem; }

/* Botón WA flotante */
.wa-fab {
  position: fixed;
  bottom: 24px; right: 20px;
  background: var(--vino);
  color: var(--blanco);
  border-radius: 50px;
  padding: 13px 20px;
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(101,28,40,.35);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 100;
  transition: background .2s, box-shadow .2s;
}
.wa-fab:hover { background: var(--vino-hover); color: var(--blanco); }
.wa-fab svg { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────
   DÍA - dia.html
───────────────────────────────────────────────────────────────────── */
.dia-header {
  padding: 28px 0 8px;
}
.dia-header .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--gris-light);
  text-decoration: none;
  margin-bottom: 20px;
  letter-spacing: .06em;
}
.dia-header .back-link:hover { color: var(--vino); }
.dia-header .dia-num {
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dorado-dark);
  margin-bottom: 6px;
}
.dia-header h1 { color: var(--vino); margin-bottom: 0; }
.dia-header h1 em { font-style: italic; color: var(--dorado-dark); }

/* Audio player */
.audio-block { margin: 28px 0; }
.audio-label {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dorado-dark);
  margin-bottom: 10px;
}
.audio-player {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
  display: flex;
  align-items: center;
  gap: 14px;
}
.audio-player audio { display: none; }
.audio-play-btn {
  width: 44px; height: 44px;
  flex-shrink: 0;
  background: var(--vino);
  border: none;
  border-radius: 50%;
  color: var(--blanco);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .15s;
  -webkit-appearance: none;
}
.audio-play-btn:hover { background: var(--vino-hover); }
.audio-play-btn:active { transform: scale(.93); }
.audio-barra-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.audio-barra {
  width: 100%;
  height: 4px;
  background: var(--crema-dark);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.audio-progreso {
  height: 100%;
  background: var(--vino);
  border-radius: 2px;
  width: 0%;
  transition: width .4s linear;
  pointer-events: none;
}
.audio-tiempo {
  font-size: .75rem;
  color: var(--gris-light);
  font-variant-numeric: tabular-nums;
}

/* Bloques de contenido del día */
.bloque {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 22px 20px;
  margin-bottom: 14px;
  box-shadow: var(--sombra);
}
.bloque-titulo {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dorado-dark);
  margin-bottom: 10px;
}
.bloque-versiculo {
  border-left: 3px solid var(--dorado);
  padding-left: 16px;
}
.bloque-versiculo .ref {
  font-size: .8rem;
  font-weight: 500;
  color: var(--dorado-dark);
  margin-bottom: 6px;
}
.bloque-versiculo .texto {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--espresso);
}
.bloque-oracion .cuerpo,
.bloque-tarea .cuerpo,
.bloque-guia .cuerpo {
  font-size: .97rem;
  color: var(--espresso);
  white-space: pre-line;
  line-height: 1.75;
}

/* Práctica de hoy */
.practica-block {
  background: var(--vino-light);
  border-radius: var(--radio);
  padding: 24px 20px;
  margin-bottom: 14px;
  border: 1px solid rgba(101,28,40,.1);
}
.practica-block .practica-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  color: var(--vino);
  margin-bottom: 8px;
}
.practica-block .practica-prompt {
  font-size: .92rem;
  color: var(--gris);
  margin-bottom: 16px;
  line-height: 1.65;
}
.frase-mapa-block { margin-top: 18px; }
.frase-mapa-block .frase-label {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dorado-dark);
  margin-bottom: 8px;
}
.frase-mapa-block .frase-hint {
  font-size: .8rem;
  color: var(--gris-light);
  margin-bottom: 8px;
  font-style: italic;
}

/* Estado completado del día */
.dia-completado-banner {
  background: #F0FAF4;
  border: 1.5px solid #A7D8B5;
  border-radius: var(--radio);
  padding: 18px 20px;
  text-align: center;
  margin-bottom: 14px;
  display: none;
}
.dia-completado-banner.visible { display: block; }
.dia-completado-banner .check { font-size: 2rem; margin-bottom: 6px; }
.dia-completado-banner p {
  font-size: .9rem;
  color: #2F6B45;
}

/* ─────────────────────────────────────────────────────────────────
   CIERRE - cierre.html
───────────────────────────────────────────────────────────────────── */
.cierre-hero {
  text-align: center;
  padding: 52px 0 32px;
}
.cierre-hero .emoji-grande { font-size: 3rem; margin-bottom: 16px; display: block; }
.cierre-hero h1 { color: var(--vino); margin-bottom: 10px; }
.cierre-hero .sub-cierre {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gris);
  max-width: 340px;
  margin: 0 auto;
}

.cierre-sorteo {
  background: linear-gradient(135deg, var(--vino) 0%, #8B2436 100%);
  border-radius: var(--radio);
  padding: 28px 24px;
  text-align: center;
  color: var(--crema);
  margin: 8px 0;
}
.cierre-sorteo .sorteo-icono { font-size: 2rem; margin-bottom: 10px; }
.cierre-sorteo h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem;
  color: var(--dorado);
  margin-bottom: 8px;
}
.cierre-sorteo p { font-size: .92rem; opacity: .9; line-height: 1.65; }

.cierre-sesion {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px 20px;
  box-shadow: var(--sombra);
  margin: 8px 0;
}
.cierre-sesion .sesion-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  color: var(--vino);
  margin-bottom: 12px;
}
.cierre-sesion .sesion-detalle {
  font-size: .92rem;
  color: var(--gris);
  line-height: 1.7;
  margin-bottom: 14px;
}
.cierre-sesion .sesion-detalle strong { color: var(--espresso); }

.cierre-puente {
  text-align: center;
  padding: 28px 0 48px;
}
.cierre-puente blockquote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gris);
  max-width: 360px;
  margin: 0 auto 20px;
  line-height: 1.6;
}
.cierre-puente .firma {
  font-size: .85rem;
  color: var(--gris-light);
}

/* ─────────────────────────────────────────────────────────────────
   Footer
───────────────────────────────────────────────────────────────────── */
.footer-reto {
  text-align: center;
  padding: 16px 20px 32px;
  font-size: .75rem;
  color: var(--gris-light);
  letter-spacing: .06em;
}

/* ─────────────────────────────────────────────────────────────────
   Animaciones
───────────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulso {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}
.fade-up { animation: fadeUp .5s ease forwards; }
.pulso   { animation: pulso 1.8s ease infinite; }

/* ─────────────────────────────────────────────────────────────────
   Anchos mayores
───────────────────────────────────────────────────────────────────── */
@media (min-width: 520px) {
  .landing-form-card { padding: 36px 36px; }
  .card              { padding: 28px 28px; }
  .bloque            { padding: 26px 26px; }
  .practica-block    { padding: 28px 26px; }
  .confirmacion .acciones { flex-direction: row; justify-content: center; }
}
@media (min-width: 720px) {
  .progreso-block { flex-direction: row; justify-content: center; gap: 48px; }
}

/* ═════════════════════════════════════════════════════════════════
   PLAN DETOX 21 DÍAS - añadidos sobre la base del reto de 5 días
═══════════════════════════════════════════════════════════════════ */

/* ── Fondo con leve profundidad ───────────────────────────────── */
body {
  background: linear-gradient(180deg, #F8F3EB 0%, var(--crema) 38%);
  background-attachment: fixed;
}

/* ── Vistas (app de una sola página) ──────────────────────────── */
.vista { display: none; }
.vista.activa { display: block; animation: fadeUp .35s ease both; }

/* ── Saludo del mapa con un toque ✦ ───────────────────────────── */
.dashboard-header h2 { letter-spacing: .005em; }
.dashboard-header .sub { margin-top: 6px; }

/* ── Inscripción compacta (todo en una pantalla, sin foto) ─────── */
#vista-registro .landing-hero { padding: 20px 0 14px; }
#vista-registro h1 { font-size: clamp(1.9rem, 6vw, 2.7rem); }
#vista-registro .landing-hero .descripcion { max-width: 400px; margin-bottom: 18px; font-size: .9rem; }
#vista-registro .landing-form-card { margin-bottom: 20px; padding: 24px 26px; }
#vista-registro .form-group { margin-bottom: 14px; }
/* el pie sobra en la inscripción: lo ocultamos solo ahí */
body.en-registro .footer-reto { display: none; }

/* ── Foto de Paola (hero) ─────────────────────────────────────── */
.hero-foto {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 22px;
  box-shadow: 0 4px 22px rgba(26,20,16,.18);
  border: 3px solid var(--blanco);
}

/* ── Epígrafe / cita ───────────────────────────────────────────── */
.epigrafe {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--gris);
  max-width: 360px;
  margin: 22px auto 0;
  text-align: center;
}

/* ── Tarjeta de progreso (anillo + barra) ──────────────────────── */
.progreso-card {
  position: relative;
  overflow: hidden;
  padding: 30px 24px;
  background: linear-gradient(180deg, #FFFDF8 0%, var(--blanco) 100%);
  box-shadow: var(--sombra-md);
  border: 1px solid rgba(201,169,110,.20);
}
.progreso-card::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 170px; height: 170px;
  background: radial-gradient(circle, rgba(201,169,110,.18), transparent 70%);
  pointer-events: none;
}
.anillo { width: 128px; height: 128px; }
.anillo-progreso {
  stroke: url(#grad-anillo);
  filter: drop-shadow(0 0 4px rgba(201,169,110,.45));
}
.anillo-num { font-size: 2.2rem; }
.progreso-info {
  text-align: center;
  width: 240px;
  max-width: 100%;
  margin: 0 auto;
}
.progreso-info .subtitle { letter-spacing: .24em; }
.progreso-frase {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gris);
  margin: 4px 0 0;
}
.barra-global {
  height: 8px;
  width: 100%;
  max-width: 240px;
  margin: 16px auto 9px;
  background: var(--crema-dark);
  border-radius: 20px;
  overflow: hidden;
}
.barra-global-fill {
  height: 100%;
  width: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--dorado) 0%, var(--vino) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.4,0,.2,1);
}
.progreso-pct {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dorado-dark);
}

/* ── Botón principal del mapa (por dónde empezar) ──────────────── */
.mapa-cta { margin: 26px 0 6px; text-align: center; }
.cta-label {
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dorado-dark);
  margin-bottom: 11px;
}
.cta-grande {
  font-size: 1rem;
  padding: 19px 28px;
  background: linear-gradient(135deg, var(--vino-hover) 0%, var(--vino) 100%);
  box-shadow: 0 8px 26px rgba(101,28,40,.34);
  animation: latido 2.6s ease-in-out infinite;
}
.cta-grande:hover, .cta-grande:focus {
  background: linear-gradient(135deg, var(--vino-hover) 0%, var(--vino) 100%);
  transform: translateY(-2px);
  box-shadow: 0 13px 34px rgba(101,28,40,.42);
}
.cta-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: .95rem;
  color: var(--gris);
  margin-top: 13px;
}

/* ── Contador de desbloqueo (espera a las 6 am Miami) ──────────── */
.cta-espera {
  background: linear-gradient(180deg, #FFFDF8 0%, var(--blanco) 100%);
  border: 1px solid rgba(201,169,110,.3);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px 22px;
}
.espera-flor { display: block; color: var(--dorado); font-size: 1.4rem; line-height: 1; margin-bottom: 8px; }
.espera-msg {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--gris);
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto 14px;
}
.espera-timer {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--vino);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.espera-tz {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dorado-dark);
  margin-top: 8px;
}
@keyframes latido {
  0%, 100% { box-shadow: 0 8px 26px rgba(101,28,40,.34); }
  50%      { box-shadow: 0 11px 32px rgba(101,28,40,.48); }
}

/* ── Camino de 21 pasos agrupado en áreas ──────────────────────── */
.camino { display: flex; flex-direction: column; gap: 16px; }

.area-bloque {
  position: relative;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px 18px 16px;
  border: 1px solid var(--crema-border);
  border-left: 4px solid var(--crema-border);
  transition: border-color .4s, box-shadow .3s, transform .2s;
  animation: fadeUp .45s ease both;
  animation-delay: var(--delay, 0s);
}
.area-bloque.en-curso  { border-left-color: var(--vino);   box-shadow: var(--sombra-md); }
.area-bloque.completa  { border-left-color: var(--dorado); background: linear-gradient(180deg, #FFFDF6 0%, var(--blanco) 100%); }
.area-bloque.bloqueada { opacity: .6; }
/* conector entre áreas (sensación de camino) */
.area-bloque:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 23px; bottom: -16px;
  width: 2px; height: 16px;
  background: repeating-linear-gradient(var(--crema-border) 0 3px, transparent 3px 7px);
}

.area-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}
.area-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.area-nombre {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.12rem;
  color: var(--vino);
  display: flex;
  align-items: center;
  gap: 8px;
}
.area-nombre .estrella-area {
  color: var(--crema-border);
  font-size: .92rem;
  transition: color .4s;
}
.area-bloque.en-curso  .area-nombre .estrella-area { color: var(--vino); }
.area-bloque.completa  .area-nombre .estrella-area { color: var(--dorado); }
.area-rango {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-light);
  white-space: nowrap;
}
.area-progreso {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--gris-light);
  background: var(--crema);
  border-radius: 20px;
  padding: 5px 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.area-bloque.en-curso .area-progreso { color: var(--vino); background: var(--vino-light); }
.area-progreso.completa { color: var(--blanco); background: var(--dorado); }

/* fila de pasos (✦) */
.pasos { display: flex; gap: 8px; }
.paso {
  flex: 1 1 0;
  min-width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 8px 2px;
  border-radius: var(--radio-sm);
  transition: background .2s, transform .2s;
}
.paso.clickable:hover { background: var(--crema); transform: translateY(-2px); }
.paso.bloqueado { cursor: default; }

.paso-estrella {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--crema-border);
  transition: color .4s, transform .3s cubic-bezier(.34,1.56,.64,1), filter .4s;
}
.paso.disponible .paso-estrella { color: var(--vino); }
.paso.completado .paso-estrella {
  color: var(--dorado);
  transform: scale(1.1);
  filter: drop-shadow(0 0 5px rgba(201,169,110,.55));
}
.paso.bloqueado .paso-estrella { opacity: .55; }
.paso.actual {
  background: var(--vino-light);
  box-shadow: inset 0 0 0 1.5px rgba(101,28,40,.55);
}
.paso.actual .paso-estrella {
  color: var(--vino);
  animation: brilla 1.9s ease-in-out infinite;
}
@keyframes brilla {
  0%, 100% { transform: scale(1);    text-shadow: 0 0 0 rgba(101,28,40,0); }
  50%      { transform: scale(1.18); text-shadow: 0 0 11px rgba(101,28,40,.5); }
}
.paso-tag {
  display: block;
  margin-top: 2px;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--vino);
  border-radius: 20px;
  padding: 3px 8px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(101,28,40,.3);
}

.paso-num {
  font-size: .72rem;
  color: var(--gris-light);
  font-variant-numeric: tabular-nums;
}
.paso.disponible .paso-num { color: var(--vino); font-weight: 500; }
.paso.completado .paso-num { color: var(--dorado-dark); }

/* barra de llenado del área (se llena por bloques) */
.area-barra {
  height: 5px;
  margin-top: 14px;
  background: var(--crema-dark);
  border-radius: 20px;
  overflow: hidden;
}
.area-barra-fill {
  height: 100%;
  width: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--dorado) 0%, var(--dorado-dark) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.4,0,.2,1);
}
.area-bloque.completa .area-barra-fill {
  background: linear-gradient(90deg, var(--dorado) 0%, var(--vino) 100%);
}

/* ── Día: cajas del diario (una por pregunta) ──────────────────── */
.tarea-caja { margin-top: 18px; }
.tarea-caja:first-of-type { margin-top: 12px; }
.tarea-pregunta {
  font-size: .96rem;
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.55;
  margin-bottom: 8px;
}
.tarea-caja textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  background: var(--blanco);
  border: 1.5px solid var(--crema-border);
  border-radius: var(--radio-sm);
  color: var(--espresso);
  line-height: 1.65;
  resize: vertical;
  min-height: 90px;
  -webkit-appearance: none;
  transition: border-color .2s;
}
.tarea-caja textarea:focus { outline: none; border-color: var(--dorado); }

/* ── Día: navegación entre bloques (revelado progresivo) ───────── */
.bloque.oculto,
.practica-block.oculto,
.oracion-bloque.oculto { display: none; }

.bloque.aparece,
.practica-block.aparece,
.oracion-bloque.aparece { animation: fadeUp .45s ease both; }

.bloque-lectura .cuerpo { margin-top: 4px; }

.paso-acciones {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
}

/* checkbox "Hecho" de la acción concreta */
.check-hecho {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  cursor: pointer;
  user-select: none;
}
.check-hecho input { position: absolute; opacity: 0; pointer-events: none; }
.check-hecho .casilla {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border: 2px solid var(--vino);
  border-radius: 7px;
  background: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  font-size: .9rem;
  line-height: 1;
  transition: background .2s, transform .15s;
}
.check-hecho input:checked + .casilla {
  background: var(--vino);
  transform: scale(1.05);
}
.check-hecho .casilla::after { content: '✓'; opacity: 0; transition: opacity .2s; }
.check-hecho input:checked + .casilla::after { opacity: 1; }
.check-hecho .etiqueta {
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vino);
}

/* oración */
.oracion-bloque .cuerpo {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--espresso);
  white-space: pre-line;
}

/* progreso de pasos dentro del día */
.dia-pasos-info {
  text-align: center;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-light);
  margin-bottom: 18px;
}

/* ── Indicador de los 4 pasos del día ──────────────────────────── */
.dia-stepper {
  display: flex;
  gap: 8px;
  margin: 2px 0 10px;
}
.dia-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.dia-step-barra {
  width: 100%;
  height: 5px;
  border-radius: 20px;
  background: var(--crema-dark);
  transition: background .4s;
}
.dia-step-label {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-light);
  transition: color .4s;
}
.dia-step.hecho .dia-step-barra { background: linear-gradient(90deg, var(--dorado), var(--dorado-dark)); }
.dia-step.hecho .dia-step-label { color: var(--dorado-dark); }
.dia-step.actual .dia-step-barra { background: var(--vino); animation: pulsoBarra 1.8s ease-in-out infinite; }
.dia-step.actual .dia-step-label { color: var(--vino); font-weight: 500; }
@keyframes pulsoBarra { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Detalle ✦ en los títulos de bloque ────────────────────────── */
.bloque-icono { color: var(--dorado); margin-right: 2px; }

/* Comilla decorativa del versículo */
.bloque-versiculo { position: relative; overflow: hidden; }
.bloque-versiculo::before {
  content: '\201C';
  position: absolute;
  top: 4px; right: 16px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--dorado);
  opacity: .15;
  pointer-events: none;
}

/* ── Diario: estado "Guardado" ─────────────────────────────────── */
.practica-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.practica-cabecera .practica-titulo { margin-bottom: 0; }
.diario-estado {
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--gris-light);
  opacity: 0;
  transition: opacity .3s, color .3s;
  white-space: nowrap;
}
.diario-estado.guardando { opacity: 1; color: var(--gris-light); }
.diario-estado.guardado  { opacity: 1; color: var(--dorado-dark); }

/* ── Oración: cierre con aire sagrado ──────────────────────────── */
.oracion-bloque {
  text-align: center;
  background: linear-gradient(180deg, #FBF1F0 0%, var(--blanco) 100%);
  border: 1px solid rgba(101,28,40,.10);
}
.oracion-flor {
  display: block;
  color: var(--dorado);
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 8px;
}
.oracion-bloque .bloque-titulo { text-align: center; }
.oracion-bloque .cuerpo { text-align: center; }

/* ── Botón "Día completado" (confirmación) ─────────────────────── */
.btn.btn-exito {
  background: linear-gradient(135deg, var(--dorado) 0%, var(--dorado-dark) 100%);
  color: var(--blanco);
  box-shadow: 0 8px 26px rgba(154,123,67,.42);
  animation: aparecioExito .4s ease;
}
.btn.btn-exito[disabled], .btn.btn-exito:disabled { opacity: 1; }
@keyframes aparecioExito {
  0%   { transform: scale(.96); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ── Cierre: declaración final ─────────────────────────────────── */
.cierre-declaracion {
  background: linear-gradient(135deg, var(--vino) 0%, #8B2436 100%);
  border-radius: var(--radio);
  padding: 32px 26px;
  text-align: center;
  color: var(--crema);
  margin: 8px 0;
}
.cierre-declaracion .estrella-grande {
  color: var(--dorado);
  font-size: 1.6rem;
  display: block;
  margin-bottom: 14px;
}
.cierre-declaracion p {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.6;
}

/* ── Descargar el diario (tarjeta del mapa) ────────────────────── */
.diario-descarga { text-align: center; }
.dd-card {
  background: linear-gradient(180deg, #FFFDF8 0%, var(--blanco) 100%);
  border: 1px solid rgba(201,169,110,.25);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 30px 24px;
}
.dd-flor { display: block; color: var(--dorado); font-size: 1.5rem; line-height: 1; margin-bottom: 10px; }
.dd-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.22rem;
  color: var(--vino);
  margin-bottom: 8px;
}
.dd-desc {
  font-size: .92rem;
  color: var(--gris);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto 20px;
}
.dd-botones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 280px;
  margin: 0 auto;
}
.dd-nota {
  font-size: .82rem;
  color: var(--vino);
  margin-top: 14px;
  display: none;
}
.dd-nota.visible { display: block; }
@media (min-width: 520px) {
  .dd-botones { flex-direction: row; justify-content: center; }
}

/* ── Celebración: lluvia de chispas ✦ ──────────────────────────── */
#celebracion {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}
.chispa {
  position: absolute;
  top: -28px;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  animation: caer var(--dur, 1.6s) cubic-bezier(.3,.55,.5,1) forwards;
}
@keyframes caer {
  0%   { opacity: 0; transform: translateY(-10px) rotate(0) scale(.5); }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(102vh) rotate(var(--giro, 360deg)) scale(1); }
}

/* ── Titileo de constelación (estrellas completadas) ───────────── */
@keyframes titilar {
  0%, 100% { transform: scale(1.1);  opacity: 1;   filter: drop-shadow(0 0 4px rgba(201,169,110,.5)); }
  50%      { transform: scale(1.17); opacity: .82; filter: drop-shadow(0 0 8px rgba(201,169,110,.75)); }
}
.paso.completado .paso-estrella { animation: titilar 3.6s ease-in-out infinite; }

/* ── Accesibilidad: reducir movimiento ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  #celebracion { display: none !important; }
}

/* ── Destello que recorre la tarjeta de progreso ───────────────── */
.progreso-card::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.progreso-card.brillar::before { animation: brilloSweep 1.15s ease .2s 1; }
@keyframes brilloSweep {
  0%   { left: -60%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* ── "Pop" en la estrella recién completada ────────────────────── */
.paso { position: relative; }
@keyframes popPaso {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.paso.recien { animation: popPaso .8s ease 1; }
.paso.recien::after {
  content: '';
  position: absolute;
  left: 50%; top: 16px;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid var(--dorado);
  opacity: .9;
  pointer-events: none;
  animation: onda 1s ease-out 1;
}
@keyframes onda {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(4.2); opacity: 0; }
}

/* ── Mensaje de cierre de etapa (área) ─────────────────────────── */
.dashboard-header .sub.sub-area {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--dorado-dark);
  animation: fadeUp .5s ease both;
}