/* =====================================================================
   ZEN CONTINUUM · Design System en código
   App de suscripción fitness femenino — Kathe Gallego / ZEN Fitness Academy
   Base: 390×844 px (iPhone 14/15) · dark-first · Spanish-first
   Los HEX son los de la marca real (PALETA-EXTRAIDA.json). Ver tokens.json.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* color base — literales de marca */
  --carbon-900:#14120F;
  --carbon-800:#242221;
  --carbon-700:#3A342F;
  --salvia-300:#B5B9A3;
  --salvia-100:#D8D8D1;
  --hueso-50:#FBFAF9;
  --oliva-500:#8A9359;
  --lima-400:#909F30;
  --bronce-500:#987B4A;

  /* color semántico — derivados declarados */
  --t-0:#FBFAF9;              /* 17.94:1 sobre carbon-900 */
  --t-1:#D8D8D1;              /* 13.05:1 */
  --t-2:#B5B9A3;              /*  9.29:1 */
  --t-3:#858777;              /*  5.10:1  salvia-300 @70% */
  --t-off:#5C5D52;            /*  2.80:1  solo inactivos */
  --borde-control:#6D6E60;    /*  3.61:1  salvia-300 @55% */
  --hairline:#3A342F;         /*  1.52:1  decorativo */
  --oliva-hover:#959D69;      /*  6.50:1 con carbon-900 */
  --oliva-press:#7C8450;      /*  4.70:1 con carbon-900 */
  --riel-tenue:#44443B;

  /* luz (solo checkout / documentos) */
  --l-fondo:#FBFAF9;
  --l-t-0:#14120F;            /* 17.94:1 */
  --l-t-1:#3A342F;            /* 11.77:1 */
  --l-superficie:#F3F1ED;
  --l-borde:#D9D6D0;

  /* espacio */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:96px;
  --gutter:24px;

  /* radio */
  --r-xs:2px; --r-sm:4px; --r-md:8px; --r-lg:12px; --r-full:999px;

  /* movimiento */
  --d-instant:80ms; --d-fast:160ms; --d-base:240ms; --d-slow:420ms; --d-breath:1200ms;
  --e-settle:cubic-bezier(.22,.61,.36,1);
  --e-rail:cubic-bezier(.4,0,.6,1);
  --e-in:cubic-bezier(.16,1,.3,1);
  --e-out:cubic-bezier(.4,0,1,1);

  /* tipos */
  --f-display:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --f-text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
html,body{background:#0B0A09}
body{font-family:var(--f-text);color:var(--t-1);width:390px;height:844px;overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- 2. TIPOGRAFÍA ---------- */
.d-xl{font-family:var(--f-display);font-weight:300;font-size:40px;line-height:44px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-0)}
.d-l {font-family:var(--f-display);font-weight:300;font-size:32px;line-height:38px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-0)}
.t-l {font-weight:600;font-size:26px;line-height:32px;letter-spacing:-.01em;color:var(--t-0)}
.t-m {font-weight:600;font-size:20px;line-height:26px;color:var(--t-0)}
.t-s {font-weight:600;font-size:17px;line-height:24px;color:var(--t-0)}
.body-l{font-weight:400;font-size:17px;line-height:26px;color:var(--t-1)}
.body-m{font-weight:400;font-size:16px;line-height:25px;color:var(--t-1)}
.label{font-weight:500;font-size:14px;line-height:20px;letter-spacing:.01em;color:var(--t-1)}
.caption{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.01em;color:var(--t-2)}
.micro{font-weight:600;font-size:12px;line-height:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-2)}
.data-xl{font-weight:500;font-size:44px;line-height:44px;letter-spacing:.02em;color:var(--t-0);font-variant-numeric:tabular-nums}
.data-l{font-weight:500;font-size:28px;line-height:30px;letter-spacing:.02em;color:var(--t-0);font-variant-numeric:tabular-nums}
.data-m{font-weight:500;font-size:20px;line-height:24px;letter-spacing:.02em;color:var(--t-0);font-variant-numeric:tabular-nums}
.muted{color:var(--t-2)}
.quiet{color:var(--t-3)}

/* ---------- 3. SHELL DE PANTALLA ---------- */
.screen{position:relative;width:390px;height:844px;background:var(--carbon-900);display:flex;flex-direction:column;overflow:hidden}
.screen--light{background:var(--l-fondo)}
/* en superficie clara se remapean los tokens de texto: un solo interruptor */
.screen--light{--t-0:#14120F;--t-1:#3A342F;--t-2:#3A342F;--t-3:#4E473F;--hairline:#D9D6D0;--borde-control:#3A342F;--carbon-700:#E4E1DB;--carbon-800:#F3F1ED}
.statusbar{height:44px;flex:0 0 44px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 var(--gutter) 8px}
.statusbar .hora{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--t-1)}
.screen--light .statusbar .hora{color:var(--l-t-0)}
.statusbar .glifos{display:flex;align-items:center;gap:4px;opacity:.9}
.appbar{flex:0 0 auto;padding:8px var(--gutter) 12px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}
.appbar .acciones{min-width:40px;display:flex;justify-content:flex-end;gap:4px;align-items:center}
.appbar .volver{width:40px;height:40px;margin-left:-10px;display:flex;align-items:center;justify-content:center;color:var(--t-1)}
.main{flex:1 1 auto;padding:0 var(--gutter);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.main--nav{padding-bottom:114px}
.block{flex:0 0 auto}
.block+.block{margin-top:var(--s7)}
.push{margin-top:auto}
.block+.block.push{margin-top:auto}

/* ---------- 4. WORDMARK E ISOTIPO ---------- */
.lockup{display:flex;align-items:center;gap:10px}
.lockup .zen{font-family:var(--f-display);font-weight:300;font-size:18px;line-height:18px;letter-spacing:.28em;color:var(--t-0);padding-left:2px}
.lockup .linea{width:18px;height:1px;background:var(--salvia-300);opacity:.75}
.lockup .bykathe{font-size:12px;line-height:14px;font-weight:400;letter-spacing:.20em;color:var(--t-2);text-transform:none}
.screen--light .lockup .zen{color:var(--l-t-0)}
.screen--light .lockup .linea{background:var(--l-t-1)}
.screen--light .lockup .bykathe{color:var(--l-t-1)}

.wordmark-grande{display:flex;flex-direction:column;align-items:center;gap:18px}
.wordmark-grande .zen{font-family:var(--f-display);font-weight:300;font-size:44px;line-height:44px;letter-spacing:.24em;color:var(--t-0);padding-left:10px}
.wordmark-grande .fila{display:flex;align-items:center;gap:12px}
.wordmark-grande .linea{width:34px;height:1px;background:var(--salvia-300);opacity:.6}
.wordmark-grande .bykathe{font-size:13px;line-height:16px;letter-spacing:.26em;color:var(--t-2);text-transform:none}

/* ---------- 5. BOTONES ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;padding:0 var(--s6);border-radius:var(--r-xs);
  font-size:16px;font-weight:600;letter-spacing:.02em;transition:background var(--d-fast) var(--e-settle),border-color var(--d-fast) var(--e-settle),transform var(--d-instant) var(--e-settle)}
.btn--primario{background:var(--oliva-500);color:var(--carbon-900)}
.btn--primario:hover{background:var(--oliva-hover)}
.btn--primario:active{background:var(--oliva-press);transform:scale(.994)}
.btn--secundario{background:transparent;border:1px solid var(--borde-control);color:var(--salvia-100)}
.btn--secundario:active{background:var(--carbon-800)}
.btn--terciario{background:transparent;color:var(--salvia-100);font-weight:500;height:48px}
.btn--terciario:active{text-decoration:underline;text-decoration-color:var(--salvia-300);text-underline-offset:4px}
.btn--sm{height:48px;font-size:15px;padding:0 var(--s5)}
.btn[disabled],.btn.is-disabled{background:var(--carbon-700);color:var(--t-off);pointer-events:none}
.btn--secundario[disabled],.btn--secundario.is-disabled{background:transparent;border-color:var(--carbon-700);color:var(--t-off)}
.btn--cargando{position:relative;color:transparent;pointer-events:none}
.btn--cargando::after{content:'';position:absolute;left:50%;top:50%;width:120px;height:1.5px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,var(--carbon-900) 0 40%,transparent 40% 60%,var(--carbon-900) 60% 100%);opacity:.55;
  animation:cargador 1.2s var(--e-rail) infinite}
@keyframes cargador{0%{opacity:.25}50%{opacity:.7}100%{opacity:.25}}
.fila-botones{display:flex;flex-direction:column;gap:var(--s3)}
:focus-visible{outline:2px solid var(--salvia-100);outline-offset:2px}

/* ---------- 6. INPUT ---------- */
.campo{display:flex;flex-direction:column;gap:var(--s2)}
.campo .etiqueta{font-size:14px;font-weight:500;color:var(--salvia-100)}
.input{display:flex;align-items:center;gap:12px;height:56px;padding:0 var(--s4);background:var(--carbon-800);border:1px solid var(--borde-control);border-radius:var(--r-xs)}
.input .texto{font-size:16px;color:var(--salvia-100)}
.input .placeholder{font-size:16px;color:var(--t-3)}
.input--foco{border-color:var(--salvia-100);box-shadow:0 0 0 2px rgba(216,216,209,.14)}
.input--error{border-color:var(--hueso-50);border-left-width:2px}
.campo .ayuda{font-size:12px;line-height:16px;color:var(--t-2)}
.campo .error{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--hueso-50)}
.input--buscar{height:48px;background:transparent;border-color:var(--borde-control)}
.input--buscar .placeholder{font-size:15px}

/* ---------- 7. CARD DE SESIÓN ---------- */
.card-sesion{background:var(--carbon-800);border-radius:var(--r-sm);padding:var(--s5) var(--s5);min-height:88px;display:flex;align-items:center;gap:var(--s4)}
.card-sesion .cuerpo{flex:1;min-width:0}
.card-sesion .micro{margin-bottom:6px}
.card-sesion .t-s{color:var(--t-0)}
.card-sesion .meta{font-size:12px;line-height:16px;color:var(--t-2);margin-top:4px}
.card-sesion .marca{width:28px;height:28px;border-radius:var(--r-full);border:1px solid var(--borde-control);display:flex;align-items:center;justify-content:center;flex:0 0 28px}
.card-sesion .marca.done{background:var(--salvia-100);border-color:var(--salvia-100)}
.card-sesion .marca.done svg{color:var(--carbon-900)}
.card-sesion .riel{height:1.5px;background:var(--carbon-700);margin-top:14px;position:relative}
.card-sesion .riel i{position:absolute;left:0;top:0;height:1.5px;background:var(--lima-400)}

/* ---------- 8. CARD DE PROGRAMA ---------- */
.card-programa{border-radius:var(--r-sm);overflow:hidden;background:var(--carbon-800)}
.card-programa .media{height:198px;background:var(--carbon-700);position:relative}
.card-programa .media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,0) 40%,rgba(20,18,15,.72) 100%)}
.card-programa .media .sello{position:absolute;left:16px;top:16px;z-index:2}
.card-programa .media .etq{top:18px;right:16px;left:auto;bottom:auto}
.card-programa .media .titulo{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s4);z-index:2}
.card-programa .media .titulo .t-m{color:var(--t-0)}
.card-programa .pie{display:flex;align-items:center;justify-content:space-between;padding:14px var(--s5) 16px}
.fila-lista{display:flex;gap:var(--s4);align-items:center;padding:var(--s4) 0}
.fila-lista+.fila-lista{border-top:1px solid var(--hairline)}
.miniatura{width:64px;height:64px;border-radius:var(--r-xs);background:var(--carbon-700);flex:0 0 64px;position:relative;overflow:hidden}
.miniatura::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:rgba(181,185,163,.18)}

/* ---------- 9. CHIP DE FASE DEL CICLO ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border:1px solid var(--borde-control);border-radius:var(--r-xs);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--t-1);white-space:nowrap}
.chip--filtro{height:34px;padding:0 14px;font-size:13px;color:var(--t-2);border-color:var(--hairline)}
.chip--filtro.is-on{color:var(--t-0);border-color:var(--salvia-100)}
.fase{display:flex;align-items:center;gap:2.5px}
.fase i{display:block;width:7px;height:2px;background:var(--riel-tenue)}
.fase i.on{background:var(--lima-400)}

/* ---------- 10. NAV INFERIOR (5 tabs) ---------- */
.nav{position:absolute;left:0;right:0;bottom:0;height:98px;background:var(--carbon-900);padding-bottom:34px;z-index:20}
.nav::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--hairline)}
.nav-items{display:flex;height:64px;align-items:center}
.tab{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:64px;color:var(--t-2)}
.tab span{font-size:12px;font-weight:500;letter-spacing:.01em}
.tab svg{width:22px;height:22px}
.tab.is-active{color:var(--t-0)}
.tab.is-active::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:12px;height:2px;background:var(--salvia-100)}
.screen--light .nav{background:var(--l-fondo)}
.screen--light .nav::before{background:var(--l-borde)}
.screen--light .tab{color:var(--l-t-1)}

/* ---------- 11. ANILLO DE PROGRESO DEL DÍA ---------- */
.anillo{position:relative;width:120px;height:120px;flex:0 0 120px}
.anillo svg{transform:rotate(-90deg)}
.anillo .centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.anillo .centro .n{font-size:30px;font-weight:500;line-height:32px;letter-spacing:.01em;color:var(--t-0);font-variant-numeric:tabular-nums}
.anillo .centro .u{font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:var(--t-2)}

/* ---------- 12. AVATAR CON CORTE ---------- */
.avatar{position:relative;width:40px;height:40px;flex:0 0 40px}
.avatar svg{width:100%;height:100%}
.avatar .ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--t-1);letter-spacing:.02em}
.avatar--64{width:64px;height:64px;flex-basis:64px}
.avatar--64 .ini{font-size:18px}
.avatar--28{width:28px;height:28px;flex-basis:28px}
.avatar--28 .ini{font-size:12px}

/* ---------- 13. BADGE DE TIER ---------- */
.tier{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid var(--borde-control);border-radius:var(--r-xs);
  font-size:12px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--t-1)}
.tier--guiado{border-color:var(--salvia-300);color:var(--t-0)}
.tier--premium{border-color:var(--bronce-500);color:var(--bronce-500)}

/* ---------- 14. TOAST ---------- */
.toast{display:flex;align-items:center;gap:12px;background:var(--carbon-800);border-radius:var(--r-md);padding:14px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.44);border-left:2px solid var(--salvia-300)}
.toast .txt{font-size:14px;line-height:20px;color:var(--salvia-100)}

/* ---------- 15. STREAK REPARADO — el corazón del sistema ---------- */
.streak{display:flex;flex-direction:column;gap:12px}
.streak-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.streak-cab .cifra{display:flex;align-items:baseline;gap:6px}
.streak-cab .cifra b{font-size:26px;font-weight:500;line-height:26px;letter-spacing:.02em;color:var(--t-0);font-variant-numeric:tabular-nums}
.streak-cab .cifra span{font-size:13px;font-weight:500;color:var(--t-2)}
.streak-cab .nota{font-size:13px;line-height:16px;letter-spacing:.02em;color:var(--t-2)}
.streak-riel{display:flex;align-items:center;height:18px}
.dia{position:relative;flex:1 1 0;height:18px;display:flex;align-items:center;justify-content:center}
.dia::before{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;transform:translateY(-50%);background:var(--ln,var(--riel-tenue))}
.dia.done{--ln:var(--salvia-100)}
.dia.futuro{--ln:var(--riel-tenue)}
.dia.corte{--ln:var(--salvia-100)}
.dia.corte::before{background:linear-gradient(90deg,var(--ln) 0 45%,transparent 45% 55%,var(--ln) 55% 100%)}
.dia.reparado{--ln:var(--salvia-100)}
.dia.reparado::before{background:linear-gradient(90deg,var(--ln) 0 42%,transparent 42% 58%,var(--ln) 58% 100%)}
.dia .marca{position:relative;z-index:2;width:1px;height:9px;background:var(--carbon-900)}
.dia.done .marca{background:var(--carbon-900)}
.dia.futuro .marca{height:5px;background:var(--carbon-900)}
.dia.corte .marca{height:9px;background:transparent}
.dia.hoy{--ln:var(--salvia-100)}
.dia.hoy .marca{width:2px;height:18px;background:var(--salvia-100)}
.dia .junta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:3px;background:var(--bronce-500);z-index:2}

.etiquetas{display:flex;margin-top:6px}
.etiquetas span{flex:1 1 0;text-align:center;font-size:12px;letter-spacing:.04em;color:var(--t-3);text-transform:uppercase}
.etiquetas span.hoy{color:var(--t-2)}
/* caso roto sin reparar: el tramo posterior al corte queda atenuado hasta hoy */
.dia.posterior{--ln:#5C5D52}
.dia.posterior .marca{opacity:.45}

/* ---------- 16. RIEL DE SEMANAS / PROGRESO ---------- */
.riel-semana{display:flex;gap:4px;height:3px}
.riel-semana i{flex:1 1 0;background:var(--carbon-700);border-radius:1px}
.riel-semana i.on{background:var(--salvia-100)}
.riel-semana i.now{background:var(--lima-400)}

/* ---------- 17. TIMELINE 28 DÍAS ---------- */
.timeline{display:flex;align-items:center;height:26px}
.timeline .dia .marca{height:10px}
.timeline .dia.futuro .marca{height:6px}
.timeline .dia.reparado .junta{width:9px;height:3px}
.eje-semanas{display:flex;gap:2px;margin-top:8px}
.eje-semanas span{flex:1 1 0;font-size:12px;letter-spacing:.04em;color:var(--t-3);text-transform:uppercase;text-align:center}

/* ---------- 18. ESTADOS: SKELETON, VACÍO, CARGA ---------- */
.skel{background:var(--carbon-800);border-radius:var(--r-xs);position:relative;overflow:hidden}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(181,185,163,.06),transparent);animation:barrido 1.6s var(--e-rail) infinite}
@keyframes barrido{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skel--linea{height:12px}
.skel--titulo{height:24px}
.skel--media{height:198px;border-radius:var(--r-sm)}
.skel--circulo{border-radius:var(--r-full)}
.vacio{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.vacio .trazo{width:100%;height:32px;position:relative}
.vacio .trazo svg{width:100%;height:32px}
.punto-lim{width:6px;height:6px;border-radius:var(--r-full);background:var(--lima-400);display:inline-block}
.punto-ok{width:14px;height:14px;border-radius:var(--r-full);background:var(--salvia-100);display:inline-flex;align-items:center;justify-content:center;color:var(--carbon-900);flex:0 0 14px}

/* ---------- 19. MEDIA / PLACEHOLDER ---------- */
.media-bloque{background:var(--carbon-700);position:relative;overflow:hidden}
.media-bloque::before{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(135deg,rgba(20,18,15,.10) 0 2px,transparent 2px 9px)}
.media-bloque .etq{position:absolute;left:12px;bottom:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-2);opacity:.8}
.media-full{width:390px;margin-left:0;flex:0 0 auto}

/* ---------- 20. VARIOS ---------- */
.sep{height:1px;background:var(--hairline)}
.sep--aire{margin:var(--s6) 0}
.fila{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.pila{display:flex;flex-direction:column}
.pila-2{gap:var(--s2)} .pila-3{gap:var(--s3)} .pila-4{gap:var(--s4)} .pila-6{gap:var(--s6)}
.avatares{display:flex;gap:6px}
.avatares .avatar{margin-left:0}
.nav-fantasma{height:114px;flex:0 0 auto}


/* ---------- 21. RONDA 2 · componentes estructurales ---------- */

/* leyenda del componente de racha: explica la junta sin prosa */
.streak-leyenda{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.leyenda-item{display:flex;align-items:center;gap:7px;font-size:13px;line-height:16px;color:var(--t-2)}
.sw{display:inline-block;flex:0 0 auto;border-radius:1px}
.sw-bronce{width:14px;height:3px;background:var(--bronce-500)}
.sw-riel{width:14px;height:1.5px;background:var(--salvia-100)}
.sw-tenue{width:14px;height:1.5px;background:var(--riel-tenue)}
.sw-hoy{width:3px;height:14px;background:var(--salvia-100)}

/* divisor con interrupción: la línea que retoma, en secciones */
.divisor{position:relative;height:1px;background:var(--carbon-700);opacity:.55}
.divisor::before{content:'';position:absolute;left:0;top:0;height:1px;width:46%;background:var(--carbon-700);opacity:1}

/* retrato editorial B/N (marcador de fotografía: en producción lleva el retrato real) */
.retrato{position:relative;border-radius:var(--r-full);overflow:hidden;background:var(--carbon-700);flex:0 0 auto}
.retrato::before{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(135deg,rgba(20,18,15,.20) 0 2px,transparent 2px 7px)}
.retrato::after{content:'B/N';position:absolute;left:0;right:0;bottom:5px;text-align:center;
  font-size:12px;letter-spacing:.14em;color:var(--t-2);opacity:.85}

/* equipo: el círculo que se cierra como avatar de team */
.equipo{display:flex;flex-direction:column;gap:10px;width:104px}
.equipo .nombre{font-size:13px;line-height:17px;color:var(--t-0);font-weight:500}
.equipo .meta{font-size:12px;line-height:15px;color:var(--t-3)}

/* hilo de comentarios: la línea que retoma como conector */
.hilo{position:relative;padding-left:36px}
.hilo::before{content:'';position:absolute;left:13px;top:6px;bottom:0;width:1px;background:var(--carbon-700)}
.hilo .item{position:relative;padding:12px 0}
.hilo .item .avatar{position:absolute;left:-36px;top:10px;background:var(--carbon-900)}

/* etapas de vida: la estructura del catálogo */
.etapas{display:flex;gap:6px}
.etapa{flex:1 1 0;display:flex;flex-direction:column;gap:8px}
.etapa i{display:block;height:2px;background:var(--carbon-700);border-radius:1px}
.etapa span{font-size:12px;line-height:15px;color:var(--t-3);letter-spacing:.02em}
.etapa.is-on i{background:var(--lima-400)}
.etapa.is-on span{color:var(--t-0);font-weight:500}

/* barra de recordatorio: función, no adorno */
.recordatorio{display:flex;align-items:center;gap:12px;padding:14px 0 0;border-top:1px solid var(--hairline)}
.recordatorio .txt{font-size:13px;line-height:18px;color:var(--t-2)}

/* ---------- 22. RONDA 3 · el riel gana presencia donde es el bloque que sostiene la pantalla */
/* En Home la racha no es un pie de página: es el segundo bloque. A 30/24 px se lee como */
/* componente principal y su altura reparte el aire de la pantalla en cuatro tramos cortos. */
.streak--amplio{gap:14px}
.streak--amplio .streak-cab .cifra b{font-size:30px;line-height:30px}
.streak--amplio .streak-riel{height:24px}
.streak--amplio .dia{height:24px}
.streak--amplio .dia::before{height:2px}
.streak--amplio .dia .marca{height:11px}
.streak--amplio .dia.hoy .marca{height:24px}
.streak--amplio .etiquetas{margin-top:8px}
.streak--amplio .streak-leyenda{margin-top:14px}