/* =========================================================
   ABANICA — Bienestar para la mujer en la menopausia
   Colores corporativos: rojo #C81D25 sobre crema #FFF4EC
   ========================================================= */
@property --f { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --rojo: #C81D25;
  --rojo-oscuro: #8E1219;
  --texto: #5E0F15;          /* rojo muy profundo para leer cómodo */
  --crema: #FFF4EC;
  --crema-2: #FCE6DA;        /* crema un poco más tostada para tarjetas */
  --blanco: #FFFDFB;
  --rosa-suave: #F9D3CF;
  --borde: #EBC3B9;
  --sombra: 0 8px 24px rgba(142, 18, 25, .10);
  --radio: 22px;
  --base: 18px;
  --titulos: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --cuerpo: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tam: 120px;
  color-scheme: light;
}
html.letra-grande { --base: 21px; }
html.letra-enorme { --base: 24px; }

* { box-sizing: border-box; }
html { font-size: var(--base); -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; scroll-padding-bottom: 110px; }
body {
  margin: 0; min-height: 100vh;
  background: var(--crema);
  color: var(--texto);
  font-family: var(--cuerpo);
  line-height: 1.55;
  overflow-x: hidden;
}
body::before { /* lunares de flamenca muy suaves de fondo */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(200, 29, 37, .055) 9px, transparent 10px),
                    radial-gradient(circle, rgba(200, 29, 37, .04) 6px, transparent 7px);
  background-size: 140px 140px, 140px 140px;
  background-position: 0 0, 70px 70px;
}
h1, h2, h3, h4 { font-family: var(--titulos); color: var(--rojo); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -.5px; }
h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--rojo); font-weight: 700; }
a:hover { color: var(--rojo-oscuro); }
strong { color: var(--rojo-oscuro); }
:focus-visible { outline: 4px solid var(--rojo); outline-offset: 3px; border-radius: 8px; }
.oculto-vista { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- Botones ---------- */
.btn {
  font-family: var(--titulos); font-weight: 600; font-size: 1rem;
  border-radius: 999px; padding: .75em 1.4em; min-height: 52px;
  border: 3px solid var(--rojo); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.96); }
.btn-rojo { background: var(--rojo); color: var(--crema); box-shadow: 0 5px 0 var(--rojo-oscuro); }
.btn-rojo:hover { background: #B3181F; color: var(--crema); }
.btn-borde { background: var(--blanco); color: var(--rojo); }
.btn-borde:hover { background: var(--crema-2); }
.btn-peq { font-size: .88rem; padding: .5em 1.05em; min-height: 44px; }
.btn-grande { font-size: 1.15rem; padding: .9em 1.8em; min-height: 62px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-texto { background: none; border: none; color: var(--rojo); font-weight: 700; cursor: pointer; font-family: var(--cuerpo); font-size: .95rem; text-decoration: underline; padding: .4em; min-height: 44px; }
.fila-botones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- Estructura ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 16px; background: rgba(255, 244, 236, .94);
  backdrop-filter: blur(6px); border-bottom: 2px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: .5rem; text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; }
.marca svg { width: 46px; height: 46px; }
.marca-nombre { font-family: var(--titulos); font-weight: 700; font-size: 1.6rem; color: var(--rojo); letter-spacing: -1px; line-height: 1; }
.marca-lema { display: block; font-family: var(--titulos); font-weight: 500; font-size: .58rem; letter-spacing: 3px; text-transform: uppercase; color: var(--rojo-oscuro); }
.cabecera-der { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.icono-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--borde);
  background: var(--blanco); color: var(--rojo); cursor: pointer; display: grid; place-items: center;
  font-family: var(--titulos); font-weight: 700; font-size: .9rem;
}
.icono-btn:hover { border-color: var(--rojo); }
.icono-btn svg { width: 22px; height: 22px; }
.icono-btn[aria-pressed="true"] { background: var(--rojo); color: var(--crema); border-color: var(--rojo); }
.contador-abaniquitos { text-decoration: none; display: flex; align-items: center; gap: .3rem; font-family: var(--titulos); font-weight: 700; color: var(--rojo); background: var(--blanco); border: 2px solid var(--borde); padding: .25rem .7rem .25rem .35rem; border-radius: 999px; min-height: 46px; cursor: pointer; font-size: .95rem; }
.contador-abaniquitos svg { width: 30px; height: 30px; }

main { max-width: 1080px; margin: 0 auto; padding: 24px 16px 160px; }
.pantalla { animation: entrar .45s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.tarjeta {
  background: var(--blanco); border: 2px solid var(--borde); border-radius: var(--radio);
  padding: 1.4rem; box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: 1rem; }
.tarjeta-roja { background: var(--rojo); color: var(--crema); border-color: var(--rojo); }
.tarjeta-roja h2, .tarjeta-roja h3, .tarjeta-roja strong { color: var(--crema); }
.tarjeta-crema { background: var(--crema-2); }
.etiqueta { display: inline-block; font-family: var(--titulos); font-weight: 600; font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rojo); background: var(--rosa-suave); padding: .2em .8em; border-radius: 999px; margin-bottom: .6rem; }
.explica { background: var(--crema-2); border-radius: 16px; padding: .9rem 1rem .9rem 3.1rem; font-size: .95rem; position: relative; margin: 0 0 1.2rem; }
.explica::before { content: 'i'; position: absolute; left: .85rem; top: .85rem; width: 28px; height: 28px; border-radius: 50%; background: var(--rojo); color: var(--crema); font-family: var(--titulos); font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.aviso-bienestar { font-size: .85rem; text-align: center; color: var(--rojo-oscuro); background: var(--crema-2); border: 2px dashed var(--borde); padding: .8rem 1rem; border-radius: 16px; margin-top: 2rem; }
.volver { margin-bottom: 1rem; }

/* ---------- Pie ---------- */
.pie { text-align: center; padding: 2rem 16px 140px; font-size: .85rem; border-top: 2px solid var(--borde); }
.pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; margin-bottom: .6rem; }

/* ---------- Bienvenida ---------- */
.portada { display: grid; gap: 2rem; align-items: center; min-height: calc(100vh - 160px); grid-template-columns: 1fr 1fr; }
.portada-hueco { height: 380px; align-self: start; margin-top: 3vh; }
.portada h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
.portada .grande { font-size: 1.2rem; }
.lista-ventajas { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .5rem; }
.lista-ventajas li { display: flex; gap: .6rem; align-items: center; }
.lista-ventajas li::before { content: ''; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF4EC' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; }

/* ---------- Formularios ---------- */
.formulario { max-width: 620px; margin: 0 auto; }
.paso-registro { min-height: 320px; }
.campo { margin-bottom: 1.2rem; }
.campo label, .campo legend { display: block; font-family: var(--titulos); font-weight: 600; color: var(--rojo); font-size: 1.05rem; margin-bottom: .35rem; }
.campo .ayuda { font-size: .85rem; margin: -.15rem 0 .5rem; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
  width: 100%; font: inherit; color: var(--texto); background: var(--blanco);
  border: 3px solid var(--borde); border-radius: 16px; padding: .8em 1em; min-height: 56px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 4px rgba(200, 29, 37, .15); }
textarea { min-height: 110px; resize: vertical; }
fieldset { border: none; padding: 0; margin: 0; }
.opciones-chip { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip > span { display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: .5em 1.1em; border-radius: 999px; border: 3px solid var(--borde); background: var(--blanco); font-weight: 700; cursor: pointer; transition: all .15s; }
.chip input:checked + span { background: var(--rojo); border-color: var(--rojo); color: var(--crema); }
.chip input:focus-visible + span { outline: 4px solid var(--rojo); outline-offset: 2px; }
.check { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .9rem; font-size: .95rem; cursor: pointer; }
.check input { width: 26px; height: 26px; accent-color: var(--rojo); flex: none; margin-top: .1rem; }
.pass-envoltorio { position: relative; }
.pass-envoltorio input { padding-right: 7.5em; }
.pass-envoltorio .btn-texto { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); }
.fuerza { height: 12px; border-radius: 999px; background: var(--crema-2); overflow: hidden; margin-top: .55rem; }
.fuerza i { display: block; height: 100%; width: 0; background: var(--rojo); transition: width .3s; border-radius: 999px; }
.fuerza-texto { font-size: .85rem; margin-top: .3rem; min-height: 1.4em; }
.requisitos { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .85rem; display: grid; gap: .2rem; }
.requisitos li::before { content: '○ '; font-weight: 700; }
.requisitos li.ok::before { content: '● '; color: var(--rojo); }
.error { background: var(--rojo); color: var(--crema); border-radius: 14px; padding: .7rem 1rem; font-weight: 700; margin-bottom: 1rem; }
.ok-msg { background: var(--crema-2); border: 2px solid var(--rojo); border-radius: 14px; padding: .7rem 1rem; font-weight: 700; margin-bottom: 1rem; }
.progreso-pasos { display: flex; gap: .4rem; justify-content: center; margin-bottom: 1.4rem; }
.progreso-pasos i { width: 34px; height: 10px; border-radius: 999px; background: var(--borde); transition: background .3s; }
.progreso-pasos i.hecho { background: var(--rojo); }

/* ---------- Menú principal ---------- */
.saludo { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.saludo h1 { margin: 0; }
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.modo {
  text-align: left; cursor: pointer; border-radius: var(--radio); padding: 1.4rem; font: inherit; color: inherit;
  border: 3px solid var(--rojo); background: var(--blanco); box-shadow: 0 6px 0 var(--rojo-oscuro); transition: transform .15s;
  display: flex; flex-direction: column; gap: .4rem;
}
.modo:hover { transform: translateY(-3px); }
.modo:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--rojo-oscuro); }
.modo h2 { margin: 0; }
.modo-guiado { background: var(--rojo); color: var(--crema); }
.modo-guiado h2 { color: var(--crema); }
.modo .modo-icono { width: 58px; height: 58px; }
.secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.seccion-btn {
  text-align: left; cursor: pointer; font: inherit; color: inherit; background: var(--blanco);
  border: 2px solid var(--borde); border-radius: var(--radio); padding: 1.1rem; display: flex; gap: .85rem; align-items: flex-start;
  transition: transform .15s, border-color .15s, box-shadow .15s; position: relative;
}
.seccion-btn:hover { transform: translateY(-4px) rotate(-.5deg); border-color: var(--rojo); box-shadow: var(--sombra); }
.seccion-btn .ico { flex: none; width: 54px; height: 54px; border-radius: 16px; background: var(--crema-2); display: grid; place-items: center; color: var(--rojo); }
.seccion-btn .ico svg { width: 32px; height: 32px; }
.seccion-btn h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.seccion-btn p { margin: 0; font-size: .85rem; }
.seccion-btn .nuevo { position: absolute; top: -10px; right: 12px; background: var(--rojo); color: var(--crema); font-family: var(--titulos); font-weight: 600; font-size: .7rem; padding: .15em .7em; border-radius: 999px; letter-spacing: 1px; }
.titulo-bloque { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 .8rem; }
.titulo-bloque h2 { margin: 0; }
.resumen-dia { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.dato-mini { background: var(--blanco); border: 2px solid var(--borde); border-radius: 18px; padding: .9rem; text-align: center; }
.dato-mini b { display: block; font-family: var(--titulos); font-size: 1.9rem; color: var(--rojo); line-height: 1.1; }
.dato-mini span { font-size: .82rem; }

/* ---------- Plan guiado ---------- */
.plan { display: grid; gap: .8rem; counter-reset: paso; }
.plan-paso { display: flex; gap: 1rem; align-items: center; background: var(--blanco); border: 2px solid var(--borde); border-radius: 20px; padding: 1rem; }
.plan-paso::before { counter-increment: paso; content: counter(paso); flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--crema-2); color: var(--rojo); font-family: var(--titulos); font-weight: 700; font-size: 1.2rem; display: grid; place-items: center; }
.plan-paso.hecho::before { content: '✓'; background: var(--rojo); color: var(--crema); }
.plan-paso.actual { border-color: var(--rojo); box-shadow: var(--sombra); }
.plan-paso h3 { margin: 0; font-size: 1.05rem; }
.plan-paso p { margin: 0; font-size: .88rem; }
.plan-paso .btn { margin-left: auto; flex: none; }
.barra { height: 16px; background: var(--crema-2); border-radius: 999px; overflow: hidden; border: 2px solid var(--borde); }
.barra i { display: block; height: 100%; background: var(--rojo); border-radius: 999px; transition: width .6s cubic-bezier(.3,1.4,.5,1); }

/* ---------- Diario ---------- */
.pregunta { margin-bottom: 1.6rem; }
.pregunta h3 { margin-bottom: .2rem; }
.pregunta .ayuda { font-size: .88rem; margin: 0 0 .6rem; }
.caritas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.carita { position: relative; }
.carita input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.carita > span { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .6rem .3rem; border: 3px solid var(--borde); border-radius: 18px; background: var(--blanco); cursor: pointer; font-size: .82rem; font-weight: 700; text-align: center; transition: all .15s; min-height: 100px; justify-content: center; }
.carita svg { width: 44px; height: 44px; }
.caritas.cinco { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 760px) {
  .caritas.cinco { gap: .35rem; }
  .caritas.cinco .carita > span { min-height: 84px; font-size: .72rem; padding: .45rem .1rem; border-radius: 14px; }
  .caritas.cinco svg { width: 34px; height: 34px; }
}
.carita input:checked + span { border-color: var(--rojo); background: var(--rosa-suave); transform: scale(1.04); }
.carita input:focus-visible + span { outline: 4px solid var(--rojo); outline-offset: 2px; }
.comparativa { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.comparativa th { font-family: var(--titulos); color: var(--rojo); text-align: left; font-size: .9rem; padding: 0 .5rem; }
.comparativa td { background: var(--blanco); padding: .6rem .5rem; border-top: 2px solid var(--borde); border-bottom: 2px solid var(--borde); vertical-align: middle; font-size: .9rem; }
.comparativa td:first-child { border-left: 2px solid var(--borde); border-radius: 14px 0 0 14px; font-weight: 700; }
.comparativa td:last-child { border-right: 2px solid var(--borde); border-radius: 0 14px 14px 0; }
.comparativa .resp { display: flex; align-items: center; gap: .4rem; }
.comparativa .resp svg { width: 32px; height: 32px; flex: none; }
.tabla-scroll { overflow-x: auto; }
.historial { display: flex; gap: .4rem; flex-wrap: wrap; }
.historial span { display: inline-flex; flex-direction: column; align-items: center; font-size: .7rem; }
.historial svg { width: 30px; height: 30px; }
.contador-sofocos { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.contador-sofocos b { font-family: var(--titulos); font-size: 3rem; color: var(--rojo); line-height: 1; min-width: 1.5em; text-align: center; }

/* ---------- Respiración ---------- */
.respira-escena { display: grid; place-items: center; gap: 1rem; text-align: center; padding: 1rem 0; }
.respira-circulo { width: min(320px, 78vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--blanco) 55%, var(--rosa-suave) 56%, var(--rosa-suave) 70%, transparent 71%); position: relative; }
.respira-circulo .abi-hueco { width: 70%; aspect-ratio: 1; }
.respira-instruccion { font-family: var(--titulos); font-size: 2rem; color: var(--rojo); font-weight: 700; min-height: 1.3em; }
.respira-cuenta { font-family: var(--titulos); font-size: 1.1rem; }
.lista-tecnicas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

/* ---------- Ejercicio ---------- */
.rutina-paso { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.temporizador { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; font-family: var(--titulos); font-weight: 700; font-size: 2.6rem; color: var(--rojo); background: conic-gradient(var(--rojo) calc(var(--p, 0) * 1%), var(--crema-2) 0); position: relative; }
.temporizador::before { content: ''; position: absolute; inset: 12px; background: var(--blanco); border-radius: 50%; }
.temporizador span { position: relative; }
.pasos-lista { padding-left: 1.3rem; }
.pasos-lista li { margin-bottom: .4rem; }
.figura-ejercicio { width: 150px; height: 150px; }

/* ---------- Tarjetas de contenido ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.carta { background: var(--blanco); border: 2px solid var(--borde); border-radius: var(--radio); padding: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.carta h3 { margin: 0; }
.carta p { margin: 0; font-size: .95rem; }
.carta .btn { align-self: flex-start; margin-top: auto; }
.carta-truco { perspective: 900px; min-height: 230px; cursor: pointer; background: none; border: none; padding: 0; font: inherit; color: inherit; text-align: left; width: 100%; }
.carta-truco .interior { position: relative; width: 100%; height: 100%; min-height: 230px; transition: transform .6s; transform-style: preserve-3d; }
.carta-truco.girada .interior { transform: rotateY(180deg); }
.carta-truco .cara { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radio); padding: 1.3rem; display: flex; flex-direction: column; justify-content: center; gap: .5rem; border: 2px solid var(--borde); background: var(--blanco); }
.carta-truco .cara.frente { background: var(--rojo); color: var(--crema); border-color: var(--rojo); }
.carta-truco .cara.frente h3 { color: var(--crema); font-size: 1.3rem; }
.carta-truco .cara.detras { transform: rotateY(180deg); }
.carta-truco .pista { font-size: .8rem; opacity: .9; }
.receta-ing { columns: 2 200px; padding-left: 1.2rem; }

/* ---------- Agua ---------- */
.vasos { display: flex; flex-wrap: wrap; gap: .5rem; }
.vaso { width: 56px; height: 72px; border: 3px solid var(--rojo); border-radius: 6px 6px 16px 16px; background: var(--blanco); cursor: pointer; position: relative; overflow: hidden; padding: 0; }
.vaso::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--rosa-suave); transition: height .4s; }
.vaso.lleno::after { height: 78%; }
.vaso span { position: relative; z-index: 1; font-family: var(--titulos); font-weight: 700; color: var(--rojo); }

/* ---------- Frasco de buenos momentos ---------- */
.frasco { width: 200px; height: 240px; margin: 0 auto 1rem; position: relative; }
.frasco svg { width: 100%; height: 100%; }
.notas-frasco { display: grid; gap: .5rem; }
.nota-frasco { background: var(--crema-2); border-radius: 14px; padding: .7rem 1rem; font-size: .95rem; display: flex; justify-content: space-between; gap: .5rem; }
.nota-frasco small { white-space: nowrap; }

/* ---------- Mitos ---------- */
.mito-opciones { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1rem 0; }
.mito-resultado { border-radius: 16px; padding: 1rem; background: var(--crema-2); }

/* ---------- Logros ---------- */
.medallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.medalla { text-align: center; background: var(--blanco); border: 2px solid var(--borde); border-radius: 20px; padding: 1rem .6rem; }
.medalla .disco { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto .5rem; display: grid; place-items: center; background: var(--crema-2); border: 3px dashed var(--borde); color: var(--borde); }
.medalla .disco svg { width: 40px; height: 40px; }
.medalla.ganada .disco { background: var(--rojo); border: 3px solid var(--rojo-oscuro); color: var(--crema); animation: brillo 2.5s ease-in-out infinite; }
.medalla h4 { margin: 0 0 .2rem; font-size: .92rem; }
.medalla p { margin: 0; font-size: .75rem; }
@keyframes brillo { 50% { transform: scale(1.06) rotate(-4deg); } }

/* ---------- Botón SOS sofoco ---------- */
.boton-sofoco {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  background: var(--rojo); color: var(--crema); border: 4px solid var(--crema);
  box-shadow: 0 6px 0 var(--rojo-oscuro), 0 10px 30px rgba(142,18,25,.35);
  border-radius: 999px; padding: .6em 1.2em .6em .8em; font-family: var(--titulos); font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; gap: .5rem; cursor: pointer; min-height: 60px;
  animation: latido 3s ease-in-out infinite;
}
.boton-sofoco svg { width: 34px; height: 34px; }
@keyframes latido { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.07); } 16% { transform: scale(1); } }
.capa-sofoco { position: fixed; inset: 0; z-index: 60; background: rgba(255, 244, 236, .97); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.capa-sofoco .contenido { max-width: 560px; text-align: center; width: 100%; }
.viento { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.viento i { position: absolute; height: 4px; border-radius: 4px; background: var(--rosa-suave); animation: soplar 1.4s linear infinite; }
@keyframes soplar { from { transform: translateX(-30vw); opacity: 0; } 20% { opacity: 1; } to { transform: translateX(110vw); opacity: 0; } }

/* ---------- Modal ---------- */
.modal-fondo { position: fixed; inset: 0; z-index: 70; background: rgba(94, 15, 21, .35); display: grid; place-items: center; padding: 16px; }
.modal { background: var(--crema); border: 3px solid var(--rojo); border-radius: 26px; padding: 1.5rem; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; animation: entrar .3s ease both; }

/* ---------- Aviso de logro (toast) ---------- */
.toast { position: fixed; left: 50%; top: 80px; transform: translateX(-50%); z-index: 80; background: var(--rojo); color: var(--crema); font-family: var(--titulos); font-weight: 600; padding: .8rem 1.4rem; border-radius: 999px; box-shadow: 0 8px 24px rgba(142,18,25,.35); animation: toast 3.2s ease both; text-align: center; max-width: calc(100vw - 32px); }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -20px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -20px); } }

/* =========================================================
   ABI — animaciones del personaje
   ========================================================= */
.abi { position: fixed; left: 0; top: 0; z-index: 50; width: var(--tam); height: var(--tam); will-change: transform; pointer-events: none; }
.abi-cuerpo { width: 100%; height: 100%; background: none; border: none; padding: 0; cursor: pointer; pointer-events: auto; border-radius: 50%; display: block; }
.abi-cuerpo.rebote { animation: rebote .5s ease; }
@keyframes rebote { 30% { transform: scale(1.15, .85); } 60% { transform: scale(.92, 1.1); } }
.abi-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(142,18,25,.18)); }
.abi-saltito { transform-box: view-box; transform-origin: 200px 340px; animation: flotar 3.2s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
.abi.viajando .abi-saltito { animation: none; }

/* Abanico: cada varilla gira sobre el eje según --f (0 abierto, 1 cerrado) */
.abi-abanico { --f: 0; }
.varilla { transform-box: view-box; transform-origin: 200px 240px; transform: rotate(calc(var(--a) * var(--f) * -1deg)); }
:is(.abi, .abi-dibujo).abanicando .abi-abanico { animation: aletear .22s ease-in-out infinite alternate; }
@keyframes aletear { from { --f: 0; transform: rotate(-4deg); } to { --f: .28; transform: rotate(4deg); } }
.abi-abanico { transform-box: view-box; transform-origin: 200px 240px; }
:is(.abi, .abi-dibujo)[data-estado="habla"] .abi-abanico { animation: abanicoHabla 1.6s ease-in-out infinite; }
@keyframes abanicoHabla { 50% { --f: .08; } }

/* Ojos */
.abi-ojos-abiertos, .abi-guino { display: none; }
:is(.abi, .abi-dibujo)[data-estado="atenta"] .abi-ojos-felices, :is(.abi, .abi-dibujo)[data-estado="habla"] .abi-ojos-felices,
:is(.abi, .abi-dibujo)[data-estado="sorpresa"] .abi-ojos-felices, :is(.abi, .abi-dibujo)[data-estado="calor"] .abi-ojos-felices,
:is(.abi, .abi-dibujo)[data-estado="guino"] .abi-ojos-felices { display: none; }
:is(.abi, .abi-dibujo)[data-estado="atenta"] .abi-ojos-abiertos, :is(.abi, .abi-dibujo)[data-estado="habla"] .abi-ojos-abiertos,
:is(.abi, .abi-dibujo)[data-estado="sorpresa"] .abi-ojos-abiertos, :is(.abi, .abi-dibujo)[data-estado="calor"] .abi-ojos-abiertos { display: inline; }
:is(.abi, .abi-dibujo)[data-estado="guino"] .abi-guino { display: inline; }
.abi-ojo { transform-box: fill-box; transform-origin: center; transition: transform .08s; }
:is(.abi, .abi-dibujo).parpadea .abi-ojo { transform: scaleY(.08); }
:is(.abi, .abi-dibujo)[data-estado="sorpresa"] .abi-ojo { transform: scale(1.25); }

/* Boca */
.abi-boca-o { display: none; transform-box: fill-box; transform-origin: center; }
:is(.abi, .abi-dibujo)[data-estado="habla"] .abi-boca { animation: hablar .28s steps(2) infinite; }
:is(.abi, .abi-dibujo)[data-estado="habla"] .abi-boca-o { display: inline; animation: hablarO .28s steps(2) infinite; }
@keyframes hablar { 50% { opacity: 0; } }
@keyframes hablarO { 0% { opacity: 0; } 50% { opacity: 1; } }
:is(.abi, .abi-dibujo)[data-estado="sorpresa"] .abi-boca { display: none; }
:is(.abi, .abi-dibujo)[data-estado="sorpresa"] .abi-boca-o { display: inline; }
:is(.abi, .abi-dibujo)[data-estado="dormida"] .abi-boca { transform-box: fill-box; transform-origin: center; transform: scale(.6, .4); }

/* Detalles que bailan */
.abi-pendiente { transform-box: fill-box; transform-origin: 50% -40%; animation: pendiente 2.4s ease-in-out infinite; }
.abi-pendiente.der { animation-delay: -1.2s; }
@keyframes pendiente { 50% { transform: rotate(14deg); } }
.abi-clavel { transform-box: fill-box; transform-origin: 80% 100%; animation: clavel 4s ease-in-out infinite; }
@keyframes clavel { 50% { transform: rotate(-6deg); } }
.abi-cabeza { transform-box: view-box; transform-origin: 200px 330px; transition: transform .4s; }
:is(.abi, .abi-dibujo)[data-estado="guino"] .abi-cabeza { transform: rotate(-6deg); }
:is(.abi, .abi-dibujo)[data-estado="atenta"] .abi-cabeza { transform: rotate(4deg); }
:is(.abi, .abi-dibujo)[data-estado="dormida"] .abi-cabeza { transform: rotate(-10deg) translateY(6px); }
:is(.abi, .abi-dibujo)[data-estado="celebra"] .abi-saltito { animation: celebrar .5s ease-in-out infinite alternate; }
@keyframes celebrar { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-26px) rotate(6deg); } }
:is(.abi, .abi-dibujo)[data-estado="celebra"] .abi-abanico { animation: aletear .18s ease-in-out infinite alternate; }

/* Extras */
.abi-extra { opacity: 0; transition: opacity .3s; }
:is(.abi, .abi-dibujo)[data-estado="calor"] .abi-calor, :is(.abi, .abi-dibujo).abanicando .abi-calor { opacity: 1; }
.abi-calor path { animation: gota 1s ease-in infinite; transform-box: fill-box; }
@keyframes gota { from { transform: translateY(-8px); } to { transform: translateY(18px); opacity: 0; } }
:is(.abi, .abi-dibujo)[data-estado="dormida"] .abi-zzz { opacity: 1; }
.abi-zzz text { animation: zeta 2.4s ease-in-out infinite; }
.abi-zzz text:nth-child(2) { animation-delay: .4s; } .abi-zzz text:nth-child(3) { animation-delay: .8s; }
@keyframes zeta { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
:is(.abi, .abi-dibujo)[data-estado="celebra"] .abi-corazones { opacity: 1; }
.abi-corazones path { transform-box: fill-box; transform-origin: center; animation: corazon .7s ease-in-out infinite alternate; }
@keyframes corazon { to { transform: scale(1.3) translateY(-6px); } }
:is(.abi, .abi-dibujo)[data-estado="sorpresa"] .abi-sorpresa { opacity: 1; }

/* Bocadillo (va fuera de Abi y se coloca con JS) */
.abi-bocadillo {
  position: fixed; z-index: 55; width: min(360px, calc(100vw - 32px));
  background: var(--blanco); border: 3px solid var(--rojo); border-radius: 22px; padding: .9rem 1.1rem 1rem;
  box-shadow: 0 10px 30px rgba(142, 18, 25, .2); font-size: 1rem; line-height: 1.45;
  animation: globo .35s cubic-bezier(.3,1.5,.5,1) both; transition: left .35s, top .35s;
}
.abi-bocadillo.en-viaje { opacity: 0; transition: opacity .2s; }
@keyframes globo { from { opacity: 0; transform: scale(.75); } }
.abi-bocadillo::before { content: ''; position: absolute; width: 18px; height: 18px; background: var(--blanco); border: 3px solid var(--rojo); }
.abi-bocadillo.lado-der::before { left: -12px; top: calc(var(--flecha, 50%) - 9px); border-right: none; border-top: none; transform: rotate(45deg); }
.abi-bocadillo.lado-izq::before { right: -12px; top: calc(var(--flecha, 50%) - 9px); border-left: none; border-bottom: none; transform: rotate(45deg); }
.abi-bocadillo.lado-arriba::before { bottom: -12px; left: calc(var(--flechaX, 50%) - 9px); border-left: none; border-top: none; transform: rotate(45deg); }
.abi-bocadillo.lado-abajo::before { top: -12px; left: calc(var(--flechaX, 50%) - 9px); border-right: none; border-bottom: none; transform: rotate(45deg); }
.abi-texto { color: var(--texto); }
.abi-texto b, .abi-texto strong { color: var(--rojo); }
.abi-botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.abi-botones:empty { display: none; }
.abi-nombre { font-family: var(--titulos); font-weight: 700; color: var(--rojo); display: block; font-size: .85rem; letter-spacing: 1px; margin-bottom: .15rem; }

/* Confeti de abanicos */
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.confeti i { position: absolute; width: 12px; height: 18px; border-radius: 3px 3px 10px 10px; animation: confeti 1.6s cubic-bezier(.2,.6,.4,1) forwards; }
.confeti i.c1 { background: var(--rojo); } .confeti i.c2 { background: #F7A1A1; } .confeti i.c3 { background: var(--rojo-oscuro); border-radius: 50%; width: 10px; height: 10px; }
@keyframes confeti { to { transform: translate(var(--dx), calc(var(--dy) + 520px)) rotate(var(--r)); opacity: 0; } }

/* Abi incrustada (sin moverse por pantalla), p. ej. en la respiración */
.abi-fija { width: 100%; height: 100%; }
.abi-fija .abi-svg { filter: none; }

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .portada { grid-template-columns: 1fr; min-height: auto; gap: 0; }
  .portada-hueco { height: 230px; }
  .modos { grid-template-columns: 1fr; }
  .marca-lema { display: none; }
  .marca-nombre { font-size: 1.35rem; }
  .cabecera-der .icono-btn.opcional { display: none; }
  .caritas { grid-template-columns: repeat(2, 1fr); }
  .rutina-paso { grid-template-columns: 1fr; justify-items: center; }
  .plan-paso { flex-wrap: wrap; }
  .plan-paso .btn { margin-left: 60px; }
  .boton-sofoco span.txt-largo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}
html.sin-animaciones *, html.sin-animaciones *::before, html.sin-animaciones *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }

@media print { .abi, .abi-bocadillo, .boton-sofoco, .cabecera-der { display: none !important; } }

/* =========================================================
   LECTURA: arreglos de textos que no se veían bien
   ========================================================= */
/* Enlaces, negritas y títulos sobre fondo rojo: antes salían rojo sobre rojo */
.tarjeta-roja a:not(.btn), .modo-guiado a:not(.btn), .error a { color: var(--crema); }
.tarjeta-roja h1, .tarjeta-roja h4, .tarjeta-roja b, .modo-guiado strong, .modo-guiado b { color: var(--crema); }
.tarjeta-roja .etiqueta { background: var(--crema); color: var(--rojo); }
/* Safari (iPhone y Mac): sin el prefijo, la cara de atrás de las cartas se veía al revés encima de la de delante */
.carta-truco .interior { -webkit-transform-style: preserve-3d; }
.carta-truco .cara { -webkit-backface-visibility: hidden; }
.cabecera { -webkit-backdrop-filter: blur(6px); }
/* Letra demasiado pequeña o clara */
.marca-lema { font-size: .66rem; letter-spacing: 2.5px; }
::placeholder { color: #9A5B5F; opacity: 1; }
.medalla p { font-size: .82rem; }
.historial span { font-size: .78rem; }
.seccion-btn .nuevo { font-size: .75rem; }
.btn[disabled] { opacity: .6; }
.medalla .disco { color: #C99286; }
@media (max-width: 760px) { .caritas.cinco .carita > span { font-size: .78rem; } }

/* =========================================================
   PORTADA: probar sin cuenta
   ========================================================= */
.prueba { margin-top: 1.4rem; padding: 1rem 1.1rem; border: 2px dashed var(--borde); border-radius: 20px; background: var(--blanco); }
.prueba h2 { font-size: 1.1rem; margin-bottom: .7rem; }
.prueba .btn svg { width: 22px; height: 22px; }

/* =========================================================
   GANCHOS DEL DÍA (regalo, nivel, reto, invitar)
   ========================================================= */
.ganchos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; margin-bottom: 1.8rem; }
.gancho { display: flex; align-items: center; gap: .8rem; text-align: left; font: inherit; color: var(--texto); text-decoration: none; cursor: pointer;
  background: var(--blanco); border: 2px solid var(--borde); border-radius: 20px; padding: .8rem 1rem; min-height: 84px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.gancho:hover { transform: translateY(-3px); border-color: var(--rojo); box-shadow: var(--sombra); color: var(--texto); }
.gancho > span:last-child { flex: 1; min-width: 0; }
.gancho b { display: block; font-family: var(--titulos); font-weight: 600; color: var(--rojo); line-height: 1.2; }
.gancho small { display: block; font-size: .82rem; line-height: 1.35; margin-top: .15rem; }
.gancho-ico { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--crema-2); color: var(--rojo); display: grid; place-items: center; }
.gancho-ico svg { width: 30px; height: 30px; }
.gancho .caja-regalo { flex: none; width: 56px; height: 56px; }
.gancho-regalo.listo { border-color: var(--rojo); background: var(--rosa-suave); box-shadow: 0 5px 0 var(--rojo-oscuro); }
.gancho-regalo.listo .caja-tapa { animation: tapa 1.6s ease-in-out infinite; transform-box: view-box; transform-origin: 50px 40px; }
@keyframes tapa { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-6px) rotate(-6deg); } 80% { transform: translateY(-3px) rotate(5deg); } 90% { transform: translateY(-5px) rotate(-3deg); } }
.barra.mini { height: 10px; border-width: 1.5px; margin-top: .4rem; }
.insignia { flex: none; position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--rojo); color: var(--crema); display: grid; place-items: center; border: 3px solid var(--rojo-oscuro); box-shadow: 0 3px 0 var(--rojo-oscuro); }
.insignia svg { width: 30px; height: 30px; }
.insignia b { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--crema); color: var(--rojo) !important; border: 2px solid var(--rojo); font-family: var(--titulos); font-size: .8rem; display: grid !important; place-items: center; }
.insignia.grande { width: 92px; height: 92px; }
.insignia.grande svg { width: 54px; height: 54px; }
.insignia.grande b { width: 34px; height: 34px; font-size: 1.05rem; }

/* Ventana de subida de nivel y de regalo */
.subida { text-align: center; }
.subida .insignia { margin: 0 auto .8rem; animation: brillo 2.5s ease-in-out infinite; }
.subida .caja-regalo { width: 120px; height: 120px; display: block; margin: 0 auto; }
.abriendo .caja-tapa { transform-box: view-box; transform-origin: 50px 40px; animation: abrirTapa .9s cubic-bezier(.3,1.4,.5,1) forwards; }
@keyframes abrirTapa { 30% { transform: rotate(-8deg); } 100% { transform: translate(-30px, -36px) rotate(-38deg); opacity: 0; } }
.abriendo .caja-regalo { animation: cajaFuera 1.1s ease forwards; }
@keyframes cajaFuera { 0%, 60% { height: 120px; opacity: 1; } 100% { height: 0; opacity: 0; } }
.regalo-dentro { animation: regaloSale .6s .75s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes regaloSale { from { opacity: 0; transform: scale(.6) translateY(30px); } }
.regalo-dentro .abanico-col { width: 170px; height: auto; display: block; margin: 0 auto .4rem; }
.numero-regalo { font-family: var(--titulos); font-weight: 700; font-size: 3.6rem; color: var(--rojo); line-height: 1; margin: .2rem 0 .4rem; }

/* =========================================================
   COLECCIÓN Y NIVELES
   ========================================================= */
.coleccion { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .7rem; }
.pieza { background: var(--blanco); border: 2px dashed var(--borde); border-radius: 18px; padding: .7rem .5rem; text-align: center; }
.pieza.tengo { border-style: solid; }
.pieza .abanico-col { width: 100%; max-width: 120px; height: auto; display: block; margin: 0 auto .3rem; }
.pieza.tengo .abanico-col { animation: abanicoVivo 3.5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes abanicoVivo { 50% { transform: rotate(-4deg); } }
.pieza b { display: block; font-family: var(--titulos); font-weight: 600; font-size: .9rem; color: var(--rojo); line-height: 1.2; }
.pieza small { font-size: .78rem; }
.contador-col { font-family: var(--cuerpo); font-size: .95rem; background: var(--rosa-suave); padding: .1em .6em; border-radius: 999px; vertical-align: middle; }
.tarjeta-nivel { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1rem; }
.tarjeta-nivel > div { flex: 1; min-width: 0; }
.tarjeta-nivel h2 { margin-bottom: .6rem; }
.escalera { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.escalera li { font-size: .82rem; padding: .25em .75em; border-radius: 999px; border: 2px solid var(--borde); background: var(--blanco); }
.escalera li small { opacity: .8; }
.escalera li.pasado { background: var(--crema-2); }
.escalera li.actual { background: var(--rojo); border-color: var(--rojo); color: var(--crema); font-weight: 700; }
@media (max-width: 520px) { .tarjeta-nivel { flex-direction: column; align-items: center; text-align: center; } .escalera { justify-content: center; } }

/* =========================================================
   VÍDEOS
   ========================================================= */
  background: radial-gradient(circle at 30% 30%, var(--rosa-suave), var(--crema-2) 60%); }
  display: grid; place-items: center; box-shadow: 0 6px 0 var(--rojo-oscuro), 0 10px 26px rgba(142,18,25,.3); border: 4px solid var(--crema); transition: transform .2s; }
.credito { font-size: .82rem; margin-top: 1rem; padding: .7rem 1rem; border-radius: 14px; background: var(--crema-2); }

/* =========================================================
   FIGURAS ANIMADAS DE LOS EJERCICIOS
   ========================================================= */
.figura { display: block; width: 100%; height: auto; overflow: visible; }
.carta-rutina .figura-caja { background: var(--crema-2); border-radius: 16px; margin: -.3rem -.3rem .4rem; padding: .3rem; }
.carta-rutina .figura { max-height: 150px; }
.pasos-figuras { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .7rem; counter-reset: ej; }
.pasos-figuras li { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: center; background: var(--crema); border-radius: 18px; padding: .6rem .9rem .6rem .6rem; counter-increment: ej; }
.pasos-figuras .figura-caja { background: var(--blanco); border-radius: 14px; border: 2px solid var(--borde); }
.pasos-figuras b::before { content: counter(ej) '. '; }
.pasos-figuras p { margin: .2rem 0 0; font-size: .95rem; }
.pasos-figuras .seg { display: inline-block; font-size: .78rem; font-weight: 700; background: var(--rosa-suave); border-radius: 999px; padding: .05em .6em; margin-left: .3rem; }
.rutina-paso { grid-template-columns: minmax(180px, 300px) 1fr; }
.figura-grande { background: var(--crema-2); border-radius: 22px; padding: .6rem; }
.rutina-paso .temporizador { margin-top: .6rem; }
.siguiente-paso { margin: .8rem 0 0; font-size: .9rem; }
@media (max-width: 760px) {
  .rutina-paso { grid-template-columns: 1fr; }
  .figura-grande { width: min(280px, 100%); margin: 0 auto; }
  .rutina-paso .temporizador { margin: .6rem auto 0; }
  .pasos-figuras li { grid-template-columns: 96px 1fr; gap: .7rem; }
}

/* =========================================================
   RESPIRA: anillo que crece y tira de fases
   ========================================================= */
.respira-anillo { position: absolute; inset: 4%; border-radius: 50%; border: 6px solid var(--rojo); opacity: .25; pointer-events: none; transform: scale(1); }
.respira-fases { display: flex; gap: 4px; width: min(420px, 100%); margin: 0 auto; }
.respira-fases span { flex: 1; text-align: center; font-family: var(--titulos); font-weight: 600; font-size: .85rem; padding: .45em .3em; border-radius: 10px; background: var(--crema-2); color: var(--rojo-oscuro); transition: background .3s, color .3s, transform .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.respira-fases span b { color: inherit; }
.respira-fases span.activa { background: var(--rojo); color: var(--crema); transform: translateY(-2px); }
.respira-fases.mini { width: 100%; margin: .2rem 0 .3rem; }
.respira-fases.mini span { font-size: .72rem; padding: .3em .2em; }

.demo { display: flex; gap: 1.4rem; align-items: center; margin-bottom: 1.2rem; }
.demo h2 { margin-bottom: .5rem; }
.demo-respira { flex: none; position: relative; width: 170px; height: 150px; display: grid; place-items: center; }
.demo-abanico { position: relative; z-index: 1; width: 150px; height: auto; --k: 1; animation: demoAbre 8s ease-in-out infinite; }
@property --k { syntax: '<number>'; inherits: true; initial-value: 1; }
.demo-varilla { transform-box: view-box; transform-origin: 60px 82px; transform: rotate(calc(var(--a) * var(--k))); }
@keyframes demoAbre { 0%, 100% { --k: .06; } 45%, 55% { --k: 1; } }
.demo-ondas { position: absolute; inset: 0; display: grid; place-items: center; }
.demo-ondas i { grid-area: 1 / 1; width: 120px; height: 120px; border-radius: 50%; background: var(--rosa-suave); animation: ondaRespira 8s ease-in-out infinite; }
.demo-ondas i:nth-child(2) { width: 80px; height: 80px; background: var(--crema-2); animation-delay: .25s; }
.demo-ondas i:nth-child(3) { width: 150px; height: 150px; background: none; border: 3px solid var(--rosa-suave); animation-delay: .5s; }
@keyframes ondaRespira { 0%, 100% { transform: scale(.6); opacity: .6; } 50% { transform: scale(1.12); opacity: 1; } }
.demo-ondas.lentas i { animation-duration: 10s; }
.demo-texto { display: grid; margin: 0 0 .4rem; }
.demo-texto span { grid-area: 1 / 1; animation: textoA 8s ease-in-out infinite; }
.demo-texto .t2 { animation-name: textoB; }
@keyframes textoA { 0%, 46% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes textoB { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
.ayuda-anim { font-size: .85rem; margin: 0; }
.demo-persona { position: relative; z-index: 1; width: 110px; height: 110px; }
.demo-persona .tronco { transform-box: fill-box; transform-origin: 50% 100%; animation: tronco 10s ease-in-out infinite; }
@keyframes tronco { 50% { transform: scale(1.06, 1.05); } }
.pasos-medita { margin: 0; padding-left: 1.2rem; }
.pasos-medita li { margin-bottom: .3rem; }
@media (max-width: 600px) { .demo { flex-direction: column; text-align: center; } .pasos-medita { text-align: left; } }

/* =========================================================
   MEDITA: escena y reproductor
   ========================================================= */
.medita-escena { position: relative; display: grid; place-items: center; padding: 1rem 0; }
.medita-escena .respira-circulo { position: relative; z-index: 1; width: min(280px, 70vw); }
.medita-ondas { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.medita-ondas i { grid-area: 1 / 1; width: min(280px, 70vw); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--rosa-suave); opacity: 0; }
.medita-escena.sonando .medita-ondas i { animation: ondaSale 6s ease-out infinite; }
.medita-escena.sonando .medita-ondas i:nth-child(2) { animation-delay: 2s; }
.medita-escena.sonando .medita-ondas i:nth-child(3) { animation-delay: 4s; }
@keyframes ondaSale { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.reproductor { max-width: 560px; margin: 0 auto; text-align: center; }
.reproductor .btn svg { width: 22px; height: 22px; }
.rep-linea { display: flex; align-items: center; gap: .7rem; margin: 1.1rem 0 .4rem; font-family: var(--titulos); font-weight: 600; color: var(--rojo-oscuro); font-variant-numeric: tabular-nums; }
.rep-linea input { flex: 1; accent-color: var(--rojo); height: 30px; cursor: pointer; }
.rep-estado { margin: 0; font-size: .95rem; min-height: 1.5em; }
.cat-medita { margin-top: 1.6rem; }
.carta-medita .btn svg { width: 18px; height: 18px; }

/* =========================================================
   DESCANSO: dibujo del recorrido por el cuerpo
   ========================================================= */
.cuerpo-scan { width: min(460px, 100%); height: auto; display: block; margin: 0 auto .6rem; }
.cuerpo-scan .foco { opacity: 0; transform: translate(160px, 74px) scale(3); transition: transform 1.6s cubic-bezier(.4,0,.2,1), opacity .6s; }
.cuerpo-scan .foco.visible { opacity: 1; }
.cuerpo-scan .foco circle:first-child { animation: latidoFoco 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes latidoFoco { 50% { transform: scale(1.12); opacity: .7; } }
.cuerpo-scan .zetas text { animation: zeta 2.4s ease-in-out infinite; }
.cuerpo-scan .zetas text:nth-child(2) { animation-delay: .4s; } .cuerpo-scan .zetas text:nth-child(3) { animation-delay: .8s; }

/* =========================================================
   APRENDE: explicaciones animadas
   ========================================================= */
.anims { margin-bottom: .5rem; }
.anim-carta svg { width: 100%; height: auto; display: block; background: var(--crema); border-radius: 16px; margin-bottom: .6rem; }
.anim-carta text { font-family: var(--titulos); font-weight: 600; font-size: 13px; fill: var(--rojo-oscuro); }
.anim-carta .num { font-size: 12px; }
.anim-carta .doce { font-size: 14px; fill: var(--rojo); }
/* Etapas */
.anim-etapas .tramo { transform-box: fill-box; transform-origin: left center; animation: tramo 9s ease-in-out infinite; }
.anim-etapas .t3 { animation-name: tramo3; }
@keyframes tramo { 0% { transform: scaleX(0); } 25%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes tramo3 { 0%, 45% { transform: scaleX(0); } 72%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.anim-etapas .hito { transform-box: fill-box; transform-origin: center; animation: hito 9s ease-in-out infinite; }
@keyframes hito { 0%, 28% { transform: scale(0); } 34% { transform: scale(1.3); } 40%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
.anim-etapas .viajera { animation: viajera 9s ease-in-out infinite; }
@keyframes viajera { 0% { transform: translateX(20px); } 25% { transform: translateX(140px); } 45% { transform: translateX(160px); } 72%, 92% { transform: translateX(280px); } 100% { transform: translateX(20px); } }
.anim-etapas .e1 { animation: et1 9s infinite; } .anim-etapas .e2 { animation: et2 9s infinite; } .anim-etapas .e3 { animation: et3 9s infinite; }
@keyframes et1 { 0%, 4% { opacity: 0; } 10%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes et2 { 0%, 30% { opacity: 0; } 36%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes et3 { 0%, 55% { opacity: 0; } 62%, 94% { opacity: 1; } 100% { opacity: 0; } }
/* Calendario de 12 meses */
.anim-calendario .tic { stroke-dasharray: 26; stroke-dashoffset: 0; animation: tic 9s ease-out infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes tic { 0% { stroke-dashoffset: 26; } 5%, 70% { stroke-dashoffset: 0; } 80%, 100% { stroke-dashoffset: 26; } }
.anim-calendario .doce { animation: doce 9s ease-in-out infinite; }
@keyframes doce { 0%, 60% { opacity: 0; } 66%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
/* Sofoco: la ola sube, el abanico refresca y baja */
.anim-sofoco .ola { animation: ola 7s ease-in-out infinite; }
@keyframes ola { 0%, 8% { transform: translateY(120px); } 40%, 55% { transform: translateY(0); } 85%, 100% { transform: translateY(120px); } }
.anim-sofoco .vapor { animation: vapor 7s ease-in-out infinite; }
@keyframes vapor { 0%, 30% { opacity: 0; transform: translateY(6px); } 42%, 58% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(-8px); } }
.anim-sofoco .aleta { transform-box: view-box; animation: aleta .35s ease-in-out infinite alternate; transform-origin: 205px 96px; }
@keyframes aleta { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.anim-sofoco .aire { animation: aire 1.2s linear infinite; }
@keyframes aire { from { transform: translateX(10px); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(-16px); opacity: 0; } }
/* Edades */
.anim-edades .zona { animation: zona 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes zona { 50% { transform: scaleY(1.12); } }
.anim-edades .mujer { animation: mujer 8s ease-out infinite; animation-delay: calc(var(--d) * .35s); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes mujer { 0% { transform: scale(0); opacity: 0; } 6% { transform: scale(1.25); opacity: 1; } 10%, 80% { transform: scale(1); opacity: 1; } 90%, 100% { transform: scale(0); opacity: 0; } }
.anim-edades .pie-anim { font-size: 11px; }

/* Sin movimiento: se ve el dibujo terminado, quieto */
@media (prefers-reduced-motion: reduce) {
  .anims *, .demo *, .medita-escena *, .cuerpo-scan *, .pieza *, .gancho * { animation: none !important; }
  .demo-texto { display: block; } .demo-texto span { display: block; opacity: 1; }
}
html.sin-animaciones .anims *, html.sin-animaciones .demo *, html.sin-animaciones .medita-escena *, html.sin-animaciones .cuerpo-scan *, html.sin-animaciones .pieza *, html.sin-animaciones .gancho * { animation: none !important; }
html.sin-animaciones .demo-texto { display: block; } html.sin-animaciones .demo-texto span { display: block; opacity: 1; }

/* ---------- Ajustes tras la revisión de contraste ---------- */
/* Etiquetas: rojo sobre rosa no llegaba al contraste mínimo (4,2:1). En rojo oscuro, 7:1 */
.etiqueta, .contador-col { color: var(--rojo-oscuro); }
.gancho-regalo.listo b { color: var(--rojo-oscuro); }
/* Tarjetas que son «carta» y «tarjeta roja/crema» a la vez: el fondo blanco de .carta tapaba el rojo
   y la frase del día salía color crema sobre blanco (invisible) */
.carta.tarjeta-roja { background: var(--rojo); border-color: var(--rojo); color: var(--crema); }
.carta.tarjeta-roja p, .carta.tarjeta-roja h2, .carta.tarjeta-roja h3 { color: var(--crema); }
.carta.tarjeta-crema { background: var(--crema-2); }
.escalera li small { opacity: 1; }
.marca-lema { font-size: .7rem; }
/* Cabecera del móvil: que quepa todo sin salirse por la derecha */
@media (max-width: 760px) {
  .cabecera { gap: .4rem; padding: .5rem 12px; }
  .marca svg { width: 40px; height: 40px; }
  .marca-nombre { font-size: 1.25rem; }
  .cabecera-der { gap: .3rem; }
  .icono-btn { width: 42px; height: 42px; }
  .contador-abaniquitos { min-height: 42px; padding: .2rem .55rem .2rem .3rem; }
  .contador-abaniquitos svg { width: 24px; height: 24px; }
}
@media (max-width: 430px) { .cabecera-der a.btn-borde[href="#/blog"] { display: none; } }
@media (max-width: 400px) { .cabecera-der .contador-abaniquitos { display: none; } }
.gancho .barra { display: block; width: 100%; } .gancho .barra i { display: block; }
.btn svg { width: 22px; height: 22px; flex: none; } .btn-peq svg { width: 18px; height: 18px; }

/* =========================================================
   VERSIÓN 5 — INTERFAZ AL ESTILO HEADSPACE, SIEMPRE CON ABI
   Bloques de color planos, titulares grandes, mucho aire,
   tarjetas redondeadas y Abi como ilustración en todas partes.
   Solo rojo #C81D25 y crema #FFF4EC (con sus tonos).
   ========================================================= */
body::before { display: none; }
h1 { font-size: clamp(2rem, 5.4vw, 3.1rem); letter-spacing: -1px; }
h2 { letter-spacing: -.5px; }
.etiqueta { background: var(--crema-2); color: var(--rojo-oscuro); }
.btn { border-width: 2px; }
.btn-rojo { box-shadow: none; }
.btn-rojo:hover { transform: translateY(-2px); }
.btn-borde { background: transparent; }
.btn-crema { background: var(--crema); color: var(--rojo); border-color: var(--crema); }
.btn-crema:hover { background: var(--blanco); color: var(--rojo-oscuro); transform: translateY(-2px); }

/* Tarjetas planas, sin bordes ni sombras */
.tarjeta, .carta, .seccion-btn, .dato-mini, .plan-paso, .medalla, .clase-carta, .gancho { border-color: transparent !important; box-shadow: none; }
.tarjeta { border-radius: 30px; padding: 1.6rem; }
.carta, .seccion-btn, .dato-mini, .medalla { border-radius: 26px; }
.tarjeta-crema, .carta.tarjeta-crema { background: var(--crema-2); }
.seccion-btn { background: var(--blanco); padding: 1.3rem; }
.seccion-btn:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(142,18,25,.10); }
.seccion-btn .ico { border-radius: 50%; background: var(--rojo); color: var(--crema); }
.modo { border: none; box-shadow: none; border-radius: 30px; background: var(--crema-2); padding: 1.7rem; }
.modo:active { box-shadow: none; }
.plan-paso.actual { box-shadow: 0 0 0 3px var(--rojo); }
.aviso-bienestar { border: none; }
.explica { border-radius: 22px; }

/* Cabecera */
.cabecera { background: rgba(255, 244, 236, .96); border-bottom: none; padding: .7rem max(16px, calc(50vw - 560px)); min-height: 74px; box-shadow: 0 1px 0 rgba(142,18,25,.08); }
.cab-nav { display: flex; gap: 1.6rem; margin-left: 2rem; }
.cab-nav a { text-decoration: none; color: var(--texto); font-family: var(--titulos); font-weight: 600; font-size: 1rem; }
.cab-nav a:hover { color: var(--rojo); }
.cabecera .btn { white-space: nowrap; }
.cab-entrar { text-decoration: none; font-family: var(--titulos); font-weight: 600; font-size: 1rem; padding: .4em .7em; }
.icono-btn { border-color: transparent; background: var(--crema-2); }

/* Bandas a todo lo ancho */
.hs-hero, .hs-panel, .hs-cierre, .hs-valores { margin-inline: calc(50% - 50vw); padding-inline: max(16px, calc(50vw - 540px)); }
main:has(.hs-hero) { padding-top: 0; }

/* Abi dibujada */
.abi-dibujo { aspect-ratio: 1; width: 100%; pointer-events: none; }
.abi-dibujo .abi-svg { filter: none; }
.abi-dibujo .abi-cabeza { transition: none; }
.respirando .abi-abanico { animation: respAbi 8s ease-in-out infinite; }
@keyframes respAbi { 0%, 100% { --f: .55; } 50% { --f: 0; } }
.abanicando-siempre .abi-abanico { animation: aletear .22s ease-in-out infinite alternate; }
.abanicando-siempre .abi-calor { opacity: 1; }
.abi-dibujo[data-estado="celebra"] .abi-abanico, .abi-dibujo[data-estado="habla"] .abi-abanico { animation-play-state: running; }

/* ---------- Portada ---------- */
.hs-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: center; min-height: min(760px, calc(100vh - 74px)); padding-block: 40px 56px; }
.hs-hero h1 { font-size: clamp(2.6rem, 7vw, 4.8rem); line-height: 1.02; letter-spacing: -2px; margin: .6rem 0 1.1rem; }
.hs-hero h1 span { display: block; color: var(--rojo-oscuro); }
.hs-hero .grande { font-size: 1.25rem; max-width: 34em; margin-bottom: 1.6rem; }
.hs-nota { font-size: .88rem; margin-top: 1.1rem; opacity: .85; }
.hs-hero-arte { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; }
.hs-sol { position: absolute; inset: 6%; border-radius: 50%; background: var(--rojo); }
.hs-sol::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background-image: radial-gradient(circle, rgba(255,244,236,.18) 10px, transparent 11px); background-size: 64px 64px; }
.hs-lunar { position: absolute; border-radius: 50%; background: var(--rojo-oscuro); animation: lunarFlota 6s ease-in-out infinite; }
.hs-lunar.l1 { width: 46px; height: 46px; top: 2%; right: 12%; }
.hs-lunar.l2 { width: 26px; height: 26px; bottom: 10%; left: 2%; background: var(--rosa-suave); animation-delay: -2s; }
.hs-lunar.l3 { width: 70px; height: 70px; bottom: 0; right: 4%; background: var(--crema-2); animation-delay: -4s; }
@keyframes lunarFlota { 50% { transform: translateY(-14px); } }
.hs-hero-arte .portada-hueco { position: absolute; inset: 12%; width: 76%; height: 76%; margin: 0; align-self: auto; }

.hs-panel { background: var(--rojo); color: var(--crema); display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: center; padding-block: 56px; }
.hs-panel h2 { color: var(--crema); font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
.hs-panel p { font-size: 1.15rem; max-width: 36em; }
.hs-panel-abi { max-width: 220px; }

.hs-seccion { padding-block: 64px 8px; }
.hs-titulo { font-size: clamp(1.9rem, 4.6vw, 2.9rem); text-align: center; margin-bottom: 1.6rem; }
.titulo-bloque .hs-titulo { text-align: left; margin: 0; }
.hs-objetivos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hs-objetivo { font: inherit; color: inherit; text-align: left; cursor: pointer; border: none; border-radius: 30px; background: var(--crema-2); padding: 1.3rem 1.4rem 1.5rem; display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; align-items: center; transition: transform .2s, background .2s; }
.hs-objetivo:nth-child(3n+2) { background: var(--rosa-suave); }
.hs-objetivo:hover { transform: translateY(-5px); background: var(--rojo); color: var(--crema); }
.hs-objetivo:hover b { color: var(--crema); }
.hs-obj-abi { grid-row: span 2; width: 96px; }
.hs-objetivo b { font-family: var(--titulos); font-size: 1.35rem; color: var(--rojo); align-self: end; }
.hs-objetivo span { font-size: .92rem; align-self: start; }

.hs-valores { background: var(--crema-2); padding-block: 56px; margin-top: 64px; }
.hs-valores .hs-titulo { margin-top: 0; }
.hs-valores-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.hs-valores-fila div { display: flex; flex-direction: column; gap: .3rem; text-align: center; }
.hs-valores-fila b { font-family: var(--titulos); font-size: 1.3rem; color: var(--rojo); }
.hs-valores-fila b::before { content: ''; display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--rojo); margin: 0 auto .6rem; box-shadow: 26px 6px 0 -4px var(--rosa-suave), -24px 8px 0 -6px var(--rojo-oscuro); }
.hs-valores-fila span { font-size: .95rem; }

.hs-pestanas { display: flex; gap: .5rem; overflow-x: auto; padding: 1rem 0 .6rem; scrollbar-width: none; }
.hs-pestanas button { flex: none; font-family: var(--titulos); font-weight: 600; font-size: 1rem; color: var(--rojo); background: transparent; border: 2px solid var(--borde); border-radius: 999px; padding: .55em 1.2em; cursor: pointer; min-height: 46px; }
.hs-pestanas button[aria-selected="true"] { background: var(--rojo); border-color: var(--rojo); color: var(--crema); }
.hs-carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 260px); gap: 1rem; overflow-x: auto; padding: .6rem 2px 1.2rem; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
.hs-carta { scroll-snap-align: start; font: inherit; color: inherit; text-align: left; border: none; padding: 0; background: none; cursor: pointer; display: flex; flex-direction: column; gap: .2rem; position: relative; }
.hs-carta .hs-carta-abi, .hs-carta .hs-carta-fig { width: 100%; aspect-ratio: 1; border-radius: 26px; background: var(--crema-2); padding: 14%; margin-bottom: .55rem; transition: transform .2s; }
.hs-carta:nth-child(even) .hs-carta-abi, .hs-carta:nth-child(even) .hs-carta-fig { background: var(--rosa-suave); }
.hs-carta .hs-carta-fig { padding: 0; position: relative; overflow: hidden; }
.hs-carta .hs-carta-fig .figura { position: absolute; left: 6%; top: 8%; width: 88%; height: 84%; }
.hs-carta:hover .hs-carta-abi, .hs-carta:hover .hs-carta-fig { transform: scale(1.03); }
.hs-insignia { position: absolute; top: 12px; left: 12px; background: var(--rojo); color: var(--crema); font-family: var(--titulos); font-weight: 600; font-size: .75rem; padding: .2em .8em; border-radius: 999px; }
.hs-carta-t { font-family: var(--titulos); font-weight: 600; font-size: 1.12rem; color: var(--rojo); line-height: 1.2; }
.hs-carta-m { font-size: .85rem; }

.hs-pasos ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; counter-reset: hs; }
.hs-pasos li { background: var(--blanco); border-radius: 30px; padding: 1.5rem; display: flex; flex-direction: column; gap: .4rem; text-align: center; counter-increment: hs; }
.hs-paso-abi { width: 150px; margin: 0 auto .4rem; }
.hs-pasos li b { font-family: var(--titulos); font-size: 1.25rem; color: var(--rojo); }
.hs-pasos li b::before { content: counter(hs) '. '; color: var(--rojo-oscuro); }

.hs-preguntas { max-width: 780px; margin: 0 auto; }
.hs-preguntas details { border-bottom: 2px solid var(--borde); }
.hs-preguntas summary { cursor: pointer; list-style: none; font-family: var(--titulos); font-weight: 600; font-size: 1.2rem; color: var(--rojo); padding: 1.1rem 2.6rem 1.1rem 0; position: relative; }
.hs-preguntas summary::-webkit-details-marker { display: none; }
.hs-preguntas summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--crema-2); display: grid; place-items: center; font-size: 1.4rem; transition: transform .25s; }
.hs-preguntas details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--rojo); color: var(--crema); }
.hs-preguntas details p { margin: 0 0 1.2rem; font-size: 1rem; }

.hs-cierre { background: var(--rojo); color: var(--crema); text-align: center; padding-block: 64px 120px; margin-top: 72px; position: relative; overflow: hidden; border-radius: 50% 50% 0 0 / 70px 70px 0 0; margin-bottom: -160px; }
.hs-cierre h2 { color: var(--crema); font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1.05; letter-spacing: -1.5px; }
.hs-cierre h2 span { display: block; color: var(--rosa-suave); }
.hs-cierre .fila-botones { justify-content: center; }
.hs-cierre-abi { width: 170px; margin: 0 auto 1rem; }
.hs-claro, .hs-claro:hover { color: var(--crema); }

/* ---------- Pie ---------- */
.pie { text-align: left; border-top: none; background: var(--crema-2); padding: 3rem max(16px, calc(50vw - 540px)) 140px; position: relative; }
.pie-columnas { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.6rem; margin-bottom: 2rem; }
.pie-marca { display: flex; flex-direction: column; gap: .3rem; }
.pie-marca svg { width: 64px; height: 64px; }
.pie-marca b { font-family: var(--titulos); font-size: 1.8rem; color: var(--rojo); letter-spacing: -1px; line-height: 1; }
.pie nav { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; margin: 0; }
.pie nav h3 { font-size: .95rem; margin: 0 0 .2rem; color: var(--rojo-oscuro); }
.pie nav a { font-weight: 600; text-decoration: none; }
.pie-aviso { background: var(--crema); border-radius: 18px; padding: .9rem 1.1rem; }
.pie-copy { font-size: .8rem; margin: 0; }

/* ---------- Menú: banda de hoy ---------- */
.hs-hoy { background: var(--rojo); color: var(--crema); border-radius: 34px; padding: 2rem 2.2rem; display: grid; grid-template-columns: 1fr 210px; gap: 1.5rem; align-items: center; margin-bottom: 1.6rem; position: relative; overflow: hidden; }
.hs-hoy::before { content: ''; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; border-radius: 50%; background: var(--rojo-oscuro); }
.hs-hoy > * { position: relative; }
.hs-hoy h1 { color: var(--crema); margin: .5rem 0 .3rem; }
.hs-hoy p { font-size: 1.1rem; }
.hs-hoy .etiqueta { background: rgba(255,244,236,.18); color: var(--crema); }
.hs-hoy-abi { width: 210px; }

/* ---------- Bandas de sección con Abi ---------- */
.hs-banda { background: var(--crema-2); border-radius: 34px; padding: 1.6rem 2rem; display: grid; grid-template-columns: 1fr 150px; gap: 1rem; align-items: center; margin-bottom: 1.4rem; }
.hs-banda h1 { margin: .4rem 0 0; }
.hs-banda .etiqueta { background: var(--blanco); }
.hs-banda-abi { width: 150px; }

/* ---------- Clases animadas (sustituyen a los vídeos) ---------- */
.rejilla-clases { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.clase-carta { background: var(--blanco); border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; }
.clase-escena { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--crema-2);
  background-image: radial-gradient(circle, rgba(200,29,37,.08) 7px, transparent 8px); background-size: 46px 46px; }
.clase-escena::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: var(--rosa-suave); z-index: 0; }
.clase-figura { position: absolute; left: 18%; bottom: 4%; height: 80%; aspect-ratio: 200 / 190; z-index: 1; }
.clase-figura .figura { width: 100%; height: 100%; }
.clase-abi { position: absolute; right: 3%; bottom: 8%; width: 30%; z-index: 2; }
.clase-cap { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; max-width: 64%; }
.clase-num { background: var(--rojo); color: var(--crema); font-family: var(--titulos); font-weight: 600; font-size: .72rem; padding: .15em .7em; border-radius: 999px; }
.clase-nombre { font-family: var(--titulos); color: var(--rojo); font-size: 1.05rem; line-height: 1.1; background: rgba(255,253,251,.85); padding: .15em .5em; border-radius: 10px; }
.clase-cuenta { position: absolute; right: 12px; top: 12px; z-index: 3; width: 54px; height: 54px; border-radius: 50%; background: var(--rojo); color: var(--crema); font-family: var(--titulos); font-weight: 700; font-size: 1.4rem; display: grid; place-items: center; }
.clase-sub { margin: 0; background: var(--blanco); border-bottom: 2px solid var(--crema-2); padding: .6rem 1rem; font-size: .92rem; line-height: 1.35; min-height: 3.6em; }
.clase-sub b { color: var(--rojo); }
.clase-play-grande { position: absolute; inset: 0; margin: auto; z-index: 4; width: 78px; height: 78px; border-radius: 50%; border: 4px solid var(--crema); background: var(--rojo); color: var(--crema); cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(142,18,25,.3); transition: transform .2s; }
.clase-play-grande svg { width: 30px; height: 30px; margin-left: 5px; }
.clase-play-grande:hover { transform: scale(1.08); }
.clase-dura { position: absolute; right: 12px; top: 12px; z-index: 3; background: var(--rojo-oscuro); color: var(--crema); font-family: var(--titulos); font-weight: 600; font-size: .85rem; padding: .15em .75em; border-radius: 999px; }
.clase-carta:has(.clase-play-grande) .clase-sub { display: none; }
.clase-escena.en-pausa .clase-figura { opacity: .55; }
.clase-controles { display: flex; align-items: center; gap: .4rem; padding: .6rem .8rem; background: var(--rojo); color: var(--crema); flex-wrap: wrap; }
.clase-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,244,236,.15); color: var(--crema); cursor: pointer; display: grid; place-items: center; flex: none; }
.clase-btn:hover { background: rgba(255,244,236,.3); }
.clase-btn svg { width: 20px; height: 20px; }
.clase-linea { flex: 1 1 140px; display: flex; gap: 3px; height: 12px; min-width: 120px; }
.clase-linea button { border: none; padding: 0; background: rgba(255,244,236,.3); border-radius: 4px; cursor: pointer; position: relative; overflow: hidden; min-width: 4px; }
.clase-linea button i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--crema); }
.clase-linea button.actual { outline: 2px solid var(--crema); outline-offset: 1px; }
.clase-tiempo { font-family: var(--titulos); font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clase-texto { padding: 1.1rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.clase-texto h3, .clase-texto p { margin: 0; }
.clase-indice summary { cursor: pointer; font-weight: 700; color: var(--rojo); font-size: .9rem; }
.clase-indice ol { font-size: .88rem; padding-left: 1.3rem; margin: .4rem 0 0; }
.clase-final { position: absolute; inset: 0; z-index: 5; background: rgba(255,244,236,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; text-align: center; }
.clase-final b { font-family: var(--titulos); font-size: 1.6rem; color: var(--rojo); }
.clase-carta:fullscreen, .clase-carta.a-pantalla { background: var(--crema); border-radius: 0; justify-content: center; }
.clase-carta.a-pantalla { position: fixed; inset: 0; z-index: 65; }
.clase-carta:fullscreen .clase-escena, .clase-carta.a-pantalla .clase-escena { flex: 1; aspect-ratio: auto; max-height: calc(100vh - 70px); }
.clase-carta:fullscreen .clase-texto, .clase-carta.a-pantalla .clase-texto { display: none; }
.clase-carta:fullscreen .clase-sub, .clase-carta.a-pantalla .clase-sub { font-size: 1.3rem; }
.clase-carta:fullscreen .clase-nombre, .clase-carta.a-pantalla .clase-nombre { font-size: 2rem; }
.clase-carta:fullscreen .clase-cuenta, .clase-carta.a-pantalla .clase-cuenta { width: 90px; height: 90px; font-size: 2.4rem; }

/* ---------- Móvil (versión 5) ---------- */
@media (max-width: 900px) {
  .cab-nav { display: none; }
  .hs-objetivos { grid-template-columns: repeat(2, 1fr); }
  .hs-valores-fila { grid-template-columns: repeat(2, 1fr); }
  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hs-hero { grid-template-columns: 1fr; min-height: auto; padding-block: 16px 40px; gap: .5rem; }
  .hs-hero-arte { order: -1; max-width: 300px; }
  .hs-hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); letter-spacing: -1px; }
  .hs-hero .grande { font-size: 1.08rem; }
  .hs-hero .fila-botones .btn { width: 100%; }
  .hs-panel { grid-template-columns: 1fr; text-align: center; gap: 1rem; padding-block: 40px; }
  .hs-panel-abi { width: 150px; margin: 0 auto; }
  .hs-panel .btn { width: 100%; }
  .hs-objetivos { grid-template-columns: 1fr; }
  .hs-objetivo { grid-template-columns: 76px 1fr; }
  .hs-obj-abi { width: 76px; }
  .hs-seccion { padding-top: 48px; }
  .hs-pasos ol { grid-template-columns: 1fr; }
  .hs-cierre { border-radius: 50% 50% 0 0 / 36px 36px 0 0; }
  .hs-hoy { grid-template-columns: 1fr 96px; padding: 1.4rem; border-radius: 28px; }
  .hs-hoy-abi { width: 96px; align-self: start; }
  .hs-banda { grid-template-columns: 1fr 84px; padding: 1.1rem 1.2rem; border-radius: 26px; }
  .hs-banda-abi { width: 84px; }
  .rejilla-clases { grid-template-columns: 1fr; }
  .clase-tiempo { order: 9; width: 100%; text-align: center; }
  .cab-entrar { display: none; }
}
@media (max-width: 420px) { .cabecera #btn-son { display: none; } .marca svg { width: 40px; height: 40px; } }
@media (max-width: 420px) {
  .hs-valores-fila { grid-template-columns: 1fr; }
  .pie-columnas { grid-template-columns: 1fr; }
}

/* =========================================================
   VERSIÓN 5.1 — MÁS COLOR (decidido por David el 3 de noviembre de 2026)
   El rojo sigue siendo el color principal (marca y botones) y se suman
   colores alegres para cada tema. Cada color tiene un tono claro (fondos)
   y uno oscuro (texto y fondos con letra crema, con buen contraste).
   ========================================================= */
:root {
  --sol: #FFC93C;      --sol-claro: #FFF1C9;      --sol-oscuro: #8A5A00;
  --turquesa: #2BB3A3; --turquesa-claro: #D6F4EF; --turquesa-oscuro: #0E6E64;
  --lila: #9B7BD8;     --lila-claro: #ECE4FB;     --lila-oscuro: #5B3FA0;
  --coral: #FF8A5B;    --coral-claro: #FFE4D8;    --coral-oscuro: #A8401A;
  --hoja: #4CAF6E;     --hoja-claro: #DDF3E3;     --hoja-oscuro: #23663A;
  --rosa: #F7A1A1;     --rosa-claro: #FDE2E2;     --rosa-oscuro: #9E2A4A;
}
/* Color de cada tema */
[data-s="respira"], .banda-respira, .banda-blog, [data-clase="cuerpo"] { --c: var(--turquesa); --c-claro: var(--turquesa-claro); --c-oscuro: var(--turquesa-oscuro); }
[data-s="descanso"], .banda-descanso, .banda-diario, [data-s="diario"], [data-clase="piernas"] { --c: var(--lila); --c-claro: var(--lila-claro); --c-oscuro: var(--lila-oscuro); }
[data-s="muevete"], .banda-muevete, [data-clase="completa"] { --c: var(--coral); --c-claro: var(--coral-claro); --c-oscuro: var(--coral-oscuro); }
[data-s="come"], .banda-come { --c: var(--hoja); --c-claro: var(--hoja-claro); --c-oscuro: var(--hoja-oscuro); }
[data-s="emociones"], .banda-emociones, .banda-perfil, .banda-contacto { --c: var(--rosa); --c-claro: var(--rosa-claro); --c-oscuro: var(--rosa-oscuro); }
[data-s="aprende"], [data-s="trucos"], [data-s="logros"], .banda-aprende, .banda-mitos, .banda-trucos, .banda-logros, .banda-guiado, .banda-ayuda { --c: var(--sol); --c-claro: var(--sol-claro); --c-oscuro: var(--sol-oscuro); }
[data-s="blog"] { --c: var(--turquesa); --c-claro: var(--turquesa-claro); --c-oscuro: var(--turquesa-oscuro); }

/* Hero: confeti de lunares de colores alrededor del sol */
.hs-hero { background: radial-gradient(circle at 92% 12%, var(--sol-claro) 0 160px, transparent 161px), radial-gradient(circle at 4% 92%, var(--turquesa-claro) 0 120px, transparent 121px); }
.hs-lunar.l1 { background: var(--sol); }
.hs-lunar.l2 { background: var(--turquesa); width: 34px; height: 34px; }
.hs-lunar.l3 { background: var(--lila-claro); }
.hs-hero-arte::before, .hs-hero-arte::after { content: ''; position: absolute; border-radius: 50%; animation: lunarFlota 7s ease-in-out infinite; }
.hs-hero-arte::before { width: 22px; height: 22px; top: 18%; left: 0; background: var(--coral); animation-delay: -3s; }
.hs-hero-arte::after { width: 16px; height: 16px; top: 4%; left: 30%; background: var(--lila); animation-delay: -5s; }
.hs-hero .etiqueta { background: var(--sol-claro); color: var(--sol-oscuro); }

/* Panel del sofoco en turquesa fresquito */
.hs-panel { background: var(--turquesa-oscuro); }
.hs-panel .btn-crema { color: var(--turquesa-oscuro); }
.hs-panel { background-image: radial-gradient(circle, rgba(255,255,255,.08) 10px, transparent 11px); background-size: 70px 70px; }

/* ¿Qué necesitas hoy? — cada tarjeta con su color */
.hs-objetivo, .hs-objetivo:nth-child(3n+2) { background: var(--c-claro); }
.hs-objetivo b { color: var(--c-oscuro); }
.hs-objetivo:hover { background: var(--c-oscuro); }
.hs-obj-abi { background: #fff; border-radius: 50%; padding: 6px; box-shadow: 0 0 0 4px var(--c); }

/* Valores en amarillo sol */
.hs-valores { background: var(--sol-claro); }
.hs-valores-fila div:nth-child(1) b { color: var(--rojo); }
.hs-valores-fila div:nth-child(2) b { color: var(--turquesa-oscuro); }
.hs-valores-fila div:nth-child(3) b { color: var(--lila-oscuro); }
.hs-valores-fila div:nth-child(4) b { color: var(--coral-oscuro); }
.hs-valores-fila div:nth-child(1) b::before { background: var(--rojo); box-shadow: 26px 6px 0 -4px var(--sol), -24px 8px 0 -6px var(--coral); }
.hs-valores-fila div:nth-child(2) b::before { background: var(--turquesa); box-shadow: 26px 6px 0 -4px var(--sol), -24px 8px 0 -6px var(--lila); }
.hs-valores-fila div:nth-child(3) b::before { background: var(--lila); box-shadow: 26px 6px 0 -4px var(--rosa), -24px 8px 0 -6px var(--turquesa); }
.hs-valores-fila div:nth-child(4) b::before { background: var(--coral); box-shadow: 26px 6px 0 -4px var(--hoja), -24px 8px 0 -6px var(--sol); }

/* Biblioteca */
.hs-carta .hs-carta-abi, .hs-carta .hs-carta-fig, .hs-carta:nth-child(even) .hs-carta-abi, .hs-carta:nth-child(even) .hs-carta-fig { background: var(--c-claro); }
.hs-insignia { background: var(--c-oscuro); }
.hs-carta-t { color: var(--c-oscuro); }
.hs-pestanas button:nth-child(2)[aria-selected="true"] { background: var(--turquesa-oscuro); border-color: var(--turquesa-oscuro); }
.hs-pestanas button:nth-child(3)[aria-selected="true"] { background: var(--coral-oscuro); border-color: var(--coral-oscuro); }
.hs-pestanas button:nth-child(4)[aria-selected="true"] { background: var(--lila-oscuro); border-color: var(--lila-oscuro); }
.hs-pestanas button:nth-child(5)[aria-selected="true"] { background: var(--hoja-oscuro); border-color: var(--hoja-oscuro); }

/* Así funciona */
.hs-pasos li:nth-child(1) { background: var(--lila-claro); }
.hs-pasos li:nth-child(2) { background: var(--turquesa-claro); }
.hs-pasos li:nth-child(3) { background: var(--sol-claro); }
.hs-pasos li:nth-child(1) b { color: var(--lila-oscuro); }
.hs-pasos li:nth-child(2) b { color: var(--turquesa-oscuro); }
.hs-pasos li:nth-child(3) b { color: var(--sol-oscuro); }
.hs-pasos li b::before { color: inherit; }
.hs-paso-abi { background: #fff; border-radius: 50%; padding: 10px; }

/* Preguntas */
.hs-preguntas details:nth-of-type(6n+1) summary::after { background: var(--sol-claro); }
.hs-preguntas details:nth-of-type(6n+2) summary::after { background: var(--turquesa-claro); }
.hs-preguntas details:nth-of-type(6n+3) summary::after { background: var(--lila-claro); }
.hs-preguntas details:nth-of-type(6n+4) summary::after { background: var(--coral-claro); }
.hs-preguntas details:nth-of-type(6n+5) summary::after { background: var(--hoja-claro); }
.hs-preguntas details:nth-of-type(6n) summary::after { background: var(--rosa-claro); }

/* Cierre con confeti de colores */
.hs-cierre { background-color: var(--rojo); background-image:
  radial-gradient(circle at 8% 30%, var(--sol) 0 14px, transparent 15px),
  radial-gradient(circle at 92% 22%, var(--turquesa) 0 18px, transparent 19px),
  radial-gradient(circle at 18% 78%, var(--lila) 0 10px, transparent 11px),
  radial-gradient(circle at 84% 70%, var(--coral) 0 12px, transparent 13px),
  radial-gradient(circle at 70% 12%, var(--rosa) 0 8px, transparent 9px),
  radial-gradient(circle at 30% 14%, var(--hoja) 0 7px, transparent 8px); }
.hs-cierre h2 span { color: var(--sol); }

/* Pie en lila suave */
.pie { background: var(--lila-claro); }
.pie nav h3 { color: var(--lila-oscuro); }

/* Menú */
.hs-hoy::after { content: ''; position: absolute; left: 38%; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--sol); opacity: .9; }
.hs-hoy::before { background: var(--coral); opacity: .55; }
.hs-hoy .hs-hoy-texto, .hs-hoy .hs-hoy-abi { z-index: 1; }
.resumen-dia .dato-mini:nth-child(1) { background: var(--coral-claro); } .resumen-dia .dato-mini:nth-child(1) b { color: var(--coral-oscuro); }
.resumen-dia .dato-mini:nth-child(2) { background: var(--sol-claro); } .resumen-dia .dato-mini:nth-child(2) b { color: var(--sol-oscuro); }
.resumen-dia .dato-mini:nth-child(3) { background: var(--turquesa-claro); } .resumen-dia .dato-mini:nth-child(3) b { color: var(--turquesa-oscuro); }
.resumen-dia .dato-mini:nth-child(4) { background: var(--lila-claro); } .resumen-dia .dato-mini:nth-child(4) b { color: var(--lila-oscuro); }
.modo:not(.modo-guiado) { background: var(--turquesa-claro); }
.modo:not(.modo-guiado) h2 { color: var(--turquesa-oscuro); }
.seccion-btn[data-s] { background: var(--c-claro); }
.seccion-btn[data-s] .ico { background: var(--c-oscuro); }
.seccion-btn[data-s] h3 { color: var(--c-oscuro); }
.seccion-btn[data-s]:hover { box-shadow: 0 0 0 3px var(--c); }

/* Bandas de cada sección */
.hs-banda[class*="banda-"] { background: var(--c-claro, var(--crema-2)); position: relative; overflow: hidden; }
.hs-banda[class*="banda-"] h1 { color: var(--c-oscuro, var(--rojo)); }
.hs-banda[class*="banda-"] .etiqueta { color: var(--c-oscuro, var(--rojo-oscuro)); }
.hs-banda[class*="banda-"]::after { content: ''; position: absolute; right: -30px; top: -30px; width: 150px; height: 150px; border-radius: 50%; background: var(--c, var(--rosa)); opacity: .35; }
.hs-banda > * { position: relative; z-index: 1; }

/* Clases animadas, cada una con su color */
.clase-escena { background-color: var(--c-claro, var(--crema-2)); }
.clase-escena::after { background: var(--c, var(--rosa-suave)); opacity: .45; }
.clase-controles { background: var(--c-oscuro, var(--rojo)); }
.clase-texto h3 { color: var(--c-oscuro, var(--rojo)); }
.clase-play-grande { background: var(--c-oscuro, var(--rojo)); }

/* Botón ¡Sofoco! con un toque turquesa */
.boton-sofoco { border-color: var(--turquesa-claro); }

/* Arreglo: la tarjeta «Modo guiado» se quedaba con texto crema sobre fondo crema */
.modo.modo-guiado { background: var(--rojo); color: var(--crema); }
.modo.modo-guiado h2, .modo.modo-guiado span { color: var(--crema); }
.modo.modo-guiado:hover { background: var(--rojo-oscuro); }
/* Menú de arriba: que «Cómo funciona» no se parta en dos líneas */
.cab-nav a { white-space: nowrap; }
@media (max-width: 1080px) { .cab-nav { display: none; } }

/* Arreglos del menú principal (3 de noviembre de 2026) */
/* Botones de borde sobre fondo rojo: antes eran transparentes y no se veían */
.tarjeta-roja .btn-borde, .hs-hoy .btn-borde { background: var(--crema); color: var(--rojo); border-color: var(--crema); }
.tarjeta-roja .btn-borde:hover { background: var(--blanco); color: var(--rojo-oscuro); }
/* Tarjetas de «ganchos»: nada se sale de su fondo */
.gancho { overflow: hidden; position: relative; }
.gancho-regalo.listo { box-shadow: inset 0 0 0 3px var(--sol) !important; background: var(--sol-claro); }
.gancho-regalo.listo b { color: var(--sol-oscuro); }
.gancho .caja-regalo { width: 52px; height: 52px; }
/* Banda de «Hoy»: el círculo amarillo ya no queda debajo del botón */
.hs-hoy::after { left: auto; right: 230px; bottom: -46px; width: 96px; height: 96px; }
.hs-hoy .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .hs-hoy::after { display: none; }
  .hs-hoy::before { right: -90px; top: -90px; width: 220px; height: 220px; }
}