/* =============================================================================
   SALTO DE EXPANSIÓN — SISTEMA VISUAL
   Luxury Premium · Warm Minimalism · Liquid Glass · Editorial
   Basado en: IDENTIDAD SALTO DE EXPANSION.docx + PRD ULTRADETALLADO.docx
   ============================================================================= */

/* ---------- 1. TOKENS ------------------------------------------------------- */
:root {
  /* Color — neutros cálidos (valores del PRD, §5) */
  --ivory:      #F5F1EB;   /* fondo principal · 60% */
  --cream:      #FAF8F4;   /* superficies claras */
  --beige:      #DDD0C2;   /* cards / bloques · 30% */
  --taupe:      #BBA895;   /* énfasis, estado activo */
  --charcoal:   #292A29;   /* contraste, texto, acción · 10% */
  --stone:      #77736D;   /* texto secundario */
  --white:      #FFFFFF;

  /* Acento único: luz refractada en el vidrio. Aparece en < 2% de la pantalla,
     solo en el meridiano (día actual y tramos recorridos). Nunca en texto ni botones. */
  --meniscus:   #B98C4A;

  --text:            var(--charcoal);
  --text-soft:       var(--stone);
  --hairline:        color-mix(in srgb, var(--charcoal) 12%, transparent);
  --hairline-strong: color-mix(in srgb, var(--charcoal) 22%, transparent);

  /* Vidrio líquido cálido (PRD §10–11) */
  --glass-bg:      color-mix(in srgb, var(--cream) 70%, transparent);
  --glass-border:  color-mix(in srgb, var(--white) 62%, transparent);
  --glass-blur:    24px;
  --glass-filter:  blur(var(--glass-blur)) saturate(1.55) brightness(1.04);

  /* Tipografía */
  --font-display: "DM Serif Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala tipográfica (PRD §9) — fluida */
  --t-display:    clamp(2.9rem, 2rem + 4.4vw, 5.4rem);
  --t-h1:         clamp(2.2rem, 1.6rem + 2.9vw, 3.8rem);
  --t-h2:         clamp(1.85rem, 1.45rem + 1.9vw, 2.9rem);
  --t-h3:         clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --t-body-lg:    clamp(1.13rem, 1.05rem + 0.4vw, 1.35rem);
  --t-body:       1.0625rem;
  --t-small:      0.875rem;
  --t-caption:    0.78rem;

  /* Radios (PRD §13) */
  --r-input:  15px;
  --r-btn:    16px;
  --r-card:   28px;
  --r-hero:   36px;
  --r-xl:     44px;
  --r-pill:   999px;

  /* Espaciado — base 4 (PRD §37) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* Sombras — sutiles y contenidas. Regla: offsets pequeños, spread SIEMPRE
     negativo (la sombra no se derrama fuera del objeto) y alfa techo ~14 %.
     Capas: hairline de luz al canto · contacto 1px · halo ambiental corto. */
  --sh-soft:     0 1px 2px color-mix(in srgb, var(--charcoal) 7%, transparent),
                 0 4px 12px -6px color-mix(in srgb, var(--charcoal) 9%, transparent);
  --sh-glass:    inset 0 1px 0 color-mix(in srgb, var(--white) 55%, transparent),
                 0 1px 2px color-mix(in srgb, var(--charcoal) 7%, transparent),
                 0 6px 16px -10px color-mix(in srgb, var(--charcoal) 10%, transparent),
                 0 16px 34px -22px color-mix(in srgb, var(--charcoal) 11%, transparent);
  --sh-floating: inset 0 1px 0 color-mix(in srgb, var(--white) 55%, transparent),
                 0 1px 2px color-mix(in srgb, var(--charcoal) 8%, transparent),
                 0 8px 20px -12px color-mix(in srgb, var(--charcoal) 11%, transparent),
                 0 22px 44px -26px color-mix(in srgb, var(--charcoal) 13%, transparent);
  /* leve elevación para que el glass "despegue" del fondo, sin nube oscura */
  --sh-pop:      inset 0 1px 0 color-mix(in srgb, var(--white) 58%, transparent),
                 0 1px 2px color-mix(in srgb, var(--charcoal) 7%, transparent),
                 0 5px 14px -10px color-mix(in srgb, var(--charcoal) 9%, transparent),
                 0 14px 30px -22px color-mix(in srgb, var(--charcoal) 10%, transparent);

  /* Movimiento — "should feel like expansion": salida amplia, sin rebote (PRD §36) */
  --ease-expand: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --m-fast:   180ms;
  --m-normal: 320ms;
  --m-slow:   640ms;

  --shell-max: 1440px;
  --rail-w:    252px;
  --read-w:    66rem;

  color-scheme: light;
}

/* ---------- 2. RESET / BASE ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }

body {
  min-height: 100dvh;
  background:
    radial-gradient(120% 80% at 85% -10%, color-mix(in srgb, var(--taupe) 18%, transparent) 0%, transparent 55%),
    radial-gradient(120% 90% at -10% 110%, color-mix(in srgb, var(--beige) 55%, transparent) 0%, transparent 50%),
    var(--ivory);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
svg { width: 1em; height: 1em; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--taupe) 45%, transparent); }

:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. TIPOGRAFÍA ---------------------------------------------- */
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--charcoal);
  text-wrap: balance;
}
.display { font-size: var(--t-display); line-height: 1.02; }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); letter-spacing: -0.006em; }

.lede { font-size: var(--t-body-lg); color: var(--text-soft); line-height: 1.55; text-wrap: pretty; max-width: 46rem; }
.body-lg { font-size: var(--t-body-lg); }
.muted { color: var(--text-soft); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.serif-accent { font-family: var(--font-display); font-style: italic; }

/* iconos que van en línea con texto */
.day__state svg,
.link-quiet svg,
.note svg { display: inline-block; vertical-align: -0.16em; margin-right: 0.2em; }

/* ---------- 4. UTILIDADES DE LAYOUT ---------------------------------- */
.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-8 > * + * { margin-top: var(--s-8); }
.stack-12 > * + * { margin-top: var(--s-12); }

/* Entrada editorial: los bloques suben en cascada (PRD §36).
   El contenido nunca se oculta: la animación solo desplaza (fill backwards),
   así que si por lo que sea no corre, todo queda igualmente visible. */
.screen { animation: screen-fade var(--m-normal) var(--ease-expand) both; }
.screen > * { animation: rise-in var(--m-slow) var(--ease-expand) backwards; }
.screen > .meridianbar { animation: none; }
.screen > *:nth-child(2) { animation-delay: 55ms; }
.screen > *:nth-child(3) { animation-delay: 110ms; }
.screen > *:nth-child(4) { animation-delay: 165ms; }
.screen > *:nth-child(5) { animation-delay: 220ms; }
.screen > *:nth-child(6) { animation-delay: 275ms; }
.screen > *:nth-child(n+7) { animation-delay: 320ms; }
@keyframes rise-in {
  from { transform: translateY(14px); }
  to   { transform: translateY(0); }
}
@keyframes screen-fade {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

/* Ken Burns: la foto se asienta al abrir (profundidad + cine) */
.dayhero .photo,
.hero .photo { animation: kenburns 1.5s var(--ease-expand) backwards; }
@keyframes kenburns { from { transform: scale(1.085); } to { transform: scale(1); } }

/* ---------- 5. VIDRIO / SUPERFICIES --------------------------------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-glass);
  border-radius: var(--r-card);
}
.surface {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.surface-beige {
  background: color-mix(in srgb, var(--beige) 55%, var(--cream));
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.is-highlight { animation: highlight-pulse 1.8s var(--ease-expand) both; }
@keyframes highlight-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--meniscus) 55%, transparent); }
  30%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--meniscus) 22%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--meniscus) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .is-highlight { animation: none; } }

/* ---------- 6. FOTOGRAFÍA (placeholder editorial) -------------------
   Cada slot tiene un "mood" cálido. Para poner una foto real:
   <div class="photo" data-mood="mapa" style="--img:url('assets/dia-3.jpg')">
   y la clase .photo la usa como capa superior. Ver LEEME.md.               */
.photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-hero);
  background: var(--beige);
  aspect-ratio: 4 / 5;
}
.photo::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
}
.photo::after {
  /* luz direccional + grano fino + viñeta cálida */
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(65% 60% at 24% 20%, color-mix(in srgb, var(--white) 38%, transparent), transparent 72%),
    radial-gradient(120% 100% at 78% 112%, color-mix(in srgb, var(--charcoal) 26%, transparent), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: cover, cover, 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.85;
}
.photo > * { position: relative; z-index: 3; }

.photo[data-mood="umbral"]     { background: linear-gradient(152deg, #F3ECE0 0%, #D3C1AC 40%, #A98F76 68%, #5E5145 100%); }
.photo[data-mood="silueta"]    { background: linear-gradient(198deg, #E7DCCC 0%, #B8A088 45%, #7C6B5C 74%, #443C34 100%); }
.photo[data-mood="mapa"]       { background: linear-gradient(128deg, #F4EBDB 0%, #CDB496 42%, #9C7E5E 70%, #5B4A38 100%); }
.photo[data-mood="frecuencia"] { background: linear-gradient(172deg, #ECE2D2 0%, #B7A68F 46%, #766A5E 76%, #3C382F 100%); }
.photo[data-mood="numero"]     { background: linear-gradient(146deg, #F5ECD9 0%, #D8BF9E 44%, #A2814F 72%, #5A4526 100%); }
.photo[data-mood="identidad"]  { background: linear-gradient(206deg, #E9DFD0 0%, #B39B82 48%, #6D6153 76%, #37322C 100%); }
.photo[data-mood="plano"]      { background: linear-gradient(140deg, #EFE5D4 0%, #C6AC8C 46%, #8A6F4F 74%, #4C3D2A 100%); }
.photo[data-mood="estrategia"] { background: linear-gradient(190deg, #E4DACA 0%, #AE997F 46%, #6B5F51 76%, #35312B 100%); }
.photo[data-mood="inicio"]     { background: linear-gradient(156deg, #F6EEDD 0%, #DBBF98 40%, #B08A5B 70%, #6A4E2E 100%); }

/* fotos reales de las clases 1–4 (respaldo: el gradiente de su mood).
   Rutas relativas a este css (css/); en el artifact se sustituyen por data URIs. */
.photo[data-mood="umbral"]::before     { background-image: var(--img, url("../assets/dia-1.jpg")); background-position: center 30%; }
/* la tarjeta cuadrada (grid de Reto y carrusel de Inicio) es 1:1, muy
   distinta al recorte panorámico del héroe de Inicio — usa su propio
   recorte cuadrado para que ella quede bien encuadrada en ambos lugares,
   sin tocar la foto del héroe. */
.sqcard .photo[data-mood="umbral"]::before { background-image: url("../assets/dia-1-square.jpg"); background-position: center; }
.photo[data-mood="silueta"]::before    { background-image: var(--img, url("../assets/dia-2.jpg")); background-position: center 28%; }
.photo[data-mood="mapa"]::before       { background-image: var(--img, url("../assets/dia-3.jpg")); background-position: center 32%; }
.photo[data-mood="frecuencia"]::before { background-image: var(--img, url("../assets/dia-4.jpg")); background-position: center 30%; }
.photo[data-mood="numero"]::before     { background-image: var(--img, url("../assets/dia-5.jpg")); background-position: center 32%; }
.photo[data-mood="identidad"]::before  { background-image: var(--img, url("../assets/dia-6.jpg")); background-position: center 35%; }
.photo[data-mood="plano"]::before      { background-image: var(--img, url("../assets/dia-7.jpg")); background-position: center 30%; }
.photo[data-mood="estrategia"]::before { background-image: var(--img, url("../assets/dia-8.jpg")); background-position: center 40%; }
.photo[data-mood="inicio"]::before     { background-image: var(--img, url("../assets/dia-9.jpg")); background-position: center 28%; }
.photo[data-mood="clase"]              { background: linear-gradient(150deg, #EFE6D6 0%, #C9B291 46%, #8E7350 74%, #4E3E2B 100%); }
.photo[data-mood="clase"]::before      { background-image: var(--img, url("../assets/clase.jpg")); background-position: center 40%; }
.photo[data-mood="premio-r20"]         { background: linear-gradient(150deg, #F1E7D6 0%, #CBB491 46%, #90764F 74%, #50402B 100%); }
.photo[data-mood="premio-r20"]::before { background-image: var(--img, url("../assets/premio-r20.jpg")); background-position: center 30%; }
.photo[data-mood="premio-r30"]         { background: linear-gradient(150deg, #E4DBCB 0%, #AD9880 46%, #6A5E50 74%, #34302A 100%); }
.photo[data-mood="premio-r30"]::before { background-image: var(--img, url("../assets/premio-r30.jpg")); background-position: center 40%; }
.photo[data-mood="premio-r90"]         { background: linear-gradient(150deg, #F0E7D8 0%, #C7B090 46%, #8B7050 74%, #4C3D2B 100%); }
.photo[data-mood="premio-r90"]::before { background-image: var(--img, url("../assets/premio-r90.jpg")); background-position: center 30%; }
.photo[data-mood="banner"]             { background: linear-gradient(165deg, #E7DDE6 0%, #E9D9C6 45%, #D8BFA0 75%, #B9987A 100%); }
.photo[data-mood="banner"]::before     { background-image: var(--img, url("../assets/banner.jpg")); background-position: center 42%; }
.photo[data-mood="racha"]              { background: linear-gradient(150deg, #F1E7D6 0%, #CBB491 46%, #90764F 74%, #50402B 100%); }
.photo[data-mood="racha"]::before      { background-image: var(--img, url("../assets/racha.jpg")); background-position: center 38%; }
.photo[data-mood="frase"]              { background: linear-gradient(150deg, #F3E2C9 0%, #D3A76C 46%, #A9703E 74%, #5E3C22 100%); }
.photo[data-mood="frase"]::before      { background-image: var(--img, url("../assets/yoga-frase.jpg")); background-position: center 42%; }

/* en móvil se sirven versiones más livianas de las mismas fotos (menor
   resolución y más compresión): la pantalla es más chica y no necesita
   el archivo pensado para laptop/escritorio. */
@media (max-width: 860px) {
  .photo[data-mood="umbral"]::before     { background-image: var(--img, url("../assets/dia-1-mobile.jpg")); }
  .photo[data-mood="silueta"]::before    { background-image: var(--img, url("../assets/dia-2-mobile.jpg")); }
  .photo[data-mood="mapa"]::before       { background-image: var(--img, url("../assets/dia-3-mobile.jpg")); }
  .photo[data-mood="frecuencia"]::before { background-image: var(--img, url("../assets/dia-4-mobile.jpg")); }
  .photo[data-mood="numero"]::before     { background-image: var(--img, url("../assets/dia-5-mobile.jpg")); }
  .photo[data-mood="identidad"]::before  { background-image: var(--img, url("../assets/dia-6-mobile.jpg")); }
  .photo[data-mood="plano"]::before      { background-image: var(--img, url("../assets/dia-7-mobile.jpg")); }
  .photo[data-mood="estrategia"]::before { background-image: var(--img, url("../assets/dia-8-mobile.jpg")); }
  .photo[data-mood="inicio"]::before     { background-image: var(--img, url("../assets/dia-9-mobile.jpg")); }
  .photo[data-mood="clase"]::before      { background-image: var(--img, url("../assets/clase-mobile.jpg")); }
  .photo[data-mood="premio-r20"]::before { background-image: var(--img, url("../assets/premio-r20-mobile.jpg")); }
  .photo[data-mood="premio-r30"]::before { background-image: var(--img, url("../assets/premio-r30-mobile.jpg")); }
  .photo[data-mood="premio-r90"]::before { background-image: var(--img, url("../assets/premio-r90-mobile.jpg")); }
  .photo[data-mood="banner"]::before     { background-image: var(--img, url("../assets/banner-mobile.jpg")); background-position: 68% 42%; }
  .photo[data-mood="racha"]::before      { background-image: var(--img, url("../assets/racha-mobile.jpg")); }
  .photo[data-mood="frase"]::before      { background-image: var(--img, url("../assets/yoga-frase-mobile.jpg")); }
}
/* mood cálido tipo hora dorada — respaldo de la foto de registro */
.photo[data-mood="registro"] {
  background:
    radial-gradient(62% 46% at 80% 20%, color-mix(in srgb, #FAF3E3 78%, transparent), transparent 62%),
    radial-gradient(52% 44% at 10% 64%, color-mix(in srgb, #93A47C 42%, transparent), transparent 66%),
    linear-gradient(168deg, #F4ECDB 0%, #E1CFB2 40%, #C1A882 68%, #8B7355 100%);
}

.photo__label {
  position: absolute;
  left: var(--s-4); bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 88%, transparent);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--charcoal) 60%, transparent);
}

/* ---------- 7. BOTONES (PRD §42) ----------------------------------- */
.btn {
  --btn-bg: var(--charcoal);
  --btn-fg: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 54px;
  padding: 0 var(--s-8);
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform var(--m-fast) var(--ease-expand),
              box-shadow var(--m-normal) var(--ease-expand),
              background var(--m-normal) var(--ease-soft);
  box-shadow: var(--sh-soft);
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--sh-floating); }
.btn:active { transform: translateY(1px); box-shadow: var(--sh-soft); }
.btn:disabled { opacity: 0.45; pointer-events: none; box-shadow: none; }
.btn--block { display: flex; width: 100%; }

.btn--secondary {
  --btn-bg: color-mix(in srgb, var(--beige) 70%, var(--cream));
  --btn-fg: var(--charcoal);
  border-color: var(--hairline);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--charcoal);
  border-color: var(--hairline-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: color-mix(in srgb, var(--charcoal) 5%, transparent); }
.btn--glass {
  --btn-fg: var(--charcoal);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border-color: var(--glass-border);
}
.btn--sm { min-height: 42px; padding: 0 var(--s-5, 20px); font-size: var(--t-small); }

.link-quiet {
  font-size: var(--t-small);
  color: var(--text-soft);
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 1px;
  transition: color var(--m-fast) var(--ease-soft);
}
.link-quiet:hover { color: var(--charcoal); }

/* ---------- 8. FORMULARIOS (PRD §22) ------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--charcoal);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-input);
  transition: border-color var(--m-normal) var(--ease-soft),
              box-shadow var(--m-normal) var(--ease-soft);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--taupe);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--taupe) 26%, transparent);
}
.field input::placeholder,
.field textarea::placeholder { color: color-mix(in srgb, var(--stone) 70%, transparent); }
.field__hint { font-size: var(--t-caption); color: var(--text-soft); }
.field__error {
  font-size: var(--t-caption);
  color: color-mix(in srgb, #8a3b2f 85%, var(--charcoal));
}
.field--invalid input,
.field--invalid select { border-color: color-mix(in srgb, #8a3b2f 60%, var(--taupe)); }

/* ---------- 9. ESTRUCTURA DE APP ---------------------------------- */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100dvh;
  max-width: var(--shell-max);
  margin-inline: auto;
}

/* Barra lateral — pieza arquitectónica, no menú admin (PRD §27–28) */
.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-10) var(--s-6);
  background: color-mix(in srgb, var(--cream) 60%, transparent);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border-right: 1px solid var(--hairline);
}
.rail__brand {
  font-family: var(--font-display);
  font-size: 1.755rem;
  line-height: 1.1;
  color: var(--charcoal);
}
.rail__nav { display: flex; flex-direction: column; gap: 2px; }
.rail__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 11px var(--s-3);
  border-radius: 13px;
  color: var(--text-soft);
  font-size: 0.95rem;
  transition: background var(--m-fast) var(--ease-soft),
              color var(--m-fast) var(--ease-soft);
}
.rail__link svg { width: 19px; height: 19px; flex: none; stroke-width: 1.5; }
.navlock { margin-left: auto; display: flex; color: var(--stone); opacity: 0.65; }
.navlock svg { width: 14px; height: 14px; flex: none; }
.rail__link:hover { color: var(--charcoal); background: color-mix(in srgb, var(--charcoal) 4%, transparent); }
.rail__link.is-active {
  color: var(--charcoal);
  background: color-mix(in srgb, var(--taupe) 30%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 50%, transparent);
}
.rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-3); }
.rail__user { font-size: var(--t-small); color: var(--text-soft); line-height: 1.35; }
.rail__user b { display: block; color: var(--charcoal); font-weight: 500; }

.canvas {
  min-width: 0;
}

/* ---------- 10. MERIDIANO DE EXPANSIÓN (elemento firma) -----------
   9 lentes de vidrio sobre un hilo de luz, horizontal, en la parte
   superior del contenido — antes de cualquier tarjeta de la página.
   El canal está hundido en la superficie (tallado, no flotante): las
   lentes reposan dentro de él, cada una con su propio relieve óptico.
   El estado se lee como óptica: bloqueado = esmerilado y plano ·
   disponible = claro · actual = lente convexa que respira, con luz
   cálida · recorrido = lente asentada con menisco de latón, número
   siempre visible en el centro de cada lente.                            */
.meridianbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: var(--s-4) var(--s-6);
  margin-bottom: var(--s-10);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--charcoal) 5%, var(--ivory)),
    color-mix(in srgb, var(--white) 55%, var(--ivory)));
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 2px 5px color-mix(in srgb, var(--charcoal) 12%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--white) 65%, transparent),
    0 1px 0 color-mix(in srgb, var(--white) 55%, transparent);
}
.meridian__seg {
  flex: 1 1 auto;
  height: 2px;
  background: var(--hairline);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--charcoal) 10%, transparent);
  transition: background var(--m-slow) var(--ease-expand);
}
.meridian__seg.is-lit {
  background: linear-gradient(90deg, var(--meniscus), color-mix(in srgb, var(--meniscus) 30%, transparent));
  box-shadow: 0 0 6px 0 color-mix(in srgb, var(--meniscus) 55%, transparent);
}
.node {
  --d: 26px;
  position: relative;
  width: var(--d);
  height: var(--d);
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--beige) 60%, var(--cream));
  border: 1px solid var(--hairline-strong);
  color: var(--stone);
  opacity: 0.55;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  transition: transform var(--m-normal) var(--ease-expand),
              box-shadow var(--m-normal) var(--ease-expand),
              background var(--m-normal) var(--ease-soft),
              color var(--m-normal) var(--ease-soft),
              opacity var(--m-normal) var(--ease-soft);
}
.node.is-available {
  opacity: 1;
  color: var(--charcoal);
  background: var(--cream);
  border-color: var(--hairline-strong);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--charcoal) 14%, transparent),
              inset 0 1px 0 color-mix(in srgb, var(--white) 70%, transparent);
}
.node.is-current {
  --d: 34px;
  opacity: 1;
  color: var(--charcoal);
  background:
    radial-gradient(60% 60% at 35% 30%, color-mix(in srgb, var(--white) 80%, transparent), transparent 70%),
    radial-gradient(120% 120% at 70% 80%, color-mix(in srgb, var(--meniscus) 55%, transparent), transparent 70%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: color-mix(in srgb, var(--meniscus) 45%, var(--white));
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--meniscus) 12%, transparent),
    0 10px 24px -8px color-mix(in srgb, var(--meniscus) 40%, transparent),
    inset 0 1px 3px color-mix(in srgb, var(--white) 70%, transparent);
  animation: breathe 4.2s var(--ease-soft) infinite;
}
.node.is-completed {
  opacity: 1;
  color: var(--charcoal);
  background: var(--cream);
  border-color: color-mix(in srgb, var(--meniscus) 55%, transparent);
  box-shadow: inset 0 -6px 8px -4px color-mix(in srgb, var(--meniscus) 45%, transparent);
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
.node--link { display: grid; }
@media (max-width: 480px) {
  .node { --d: 21px; font-size: 0.6rem; }
  .node.is-current { --d: 27px; }
}

/* ---------- 11. CONTENIDO -------------------------------------------- */
.content {
  min-width: 0;
  padding: clamp(var(--s-8), 3vw, var(--s-16)) clamp(var(--s-6), 5vw, var(--s-20));
}
.content__inner { max-width: var(--read-w); margin-inline: auto; }
.pagehead { margin-bottom: var(--s-12); }
.pagehead .eyebrow { display: block; margin-bottom: var(--s-3); }

/* ---------- 12. CARDS (PRD §39) ----------------------------------- */
/* A — Hero card: grande, fotográfica, emocional */
.hero {
  position: relative;
  border-radius: var(--r-hero);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-glass);
  min-height: 440px;
  display: flex;
}
.hero .photo {
  position: absolute; inset: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
.hero__panel {
  position: relative;
  z-index: 2;
  margin: auto auto var(--s-6) var(--s-6);
  padding: var(--s-8);
  width: min(30rem, calc(100% - var(--s-12)));
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-glass);
}
.hero__panel .eyebrow { display: block; margin-bottom: var(--s-3); }
.hero__panel .h2 { margin-bottom: var(--s-3); }
.hero__panel .btn { margin-top: var(--s-6); }

/* B — Glass card: funcional + premium */
.card {
  padding: var(--s-8);
  border-radius: var(--r-card);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-glass);
}

/* C — Surface card: información secundaria */
.tile {
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: var(--cream);
  border: 1px solid var(--hairline);
}

.navcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-8);
  border-radius: var(--r-card);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-soft);
  transition: transform var(--m-normal) var(--ease-expand),
              box-shadow var(--m-normal) var(--ease-expand);
  text-align: left;
}
.navcard:hover { transform: translateY(-4px); box-shadow: var(--sh-floating); }
.navcard:active { transform: translateY(0); }
.navcard__icon { width: 34px; height: 34px; stroke-width: 1.4; color: var(--charcoal); }
.navcard h3 { font-family: var(--font-display); font-size: var(--t-h3); color: var(--charcoal); }
.navcard p { font-size: var(--t-small); color: var(--text-soft); }

/* ---------- 13. LISTA DEL RETO ---------------------------------- */
.days { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.day {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: var(--s-6);
  width: 100%;
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: var(--cream);
  border: 1px solid var(--hairline);
  text-align: left;
  transition: transform var(--m-normal) var(--ease-expand),
              box-shadow var(--m-normal) var(--ease-expand),
              border-color var(--m-normal) var(--ease-soft);
}
.day:hover { transform: translateY(-3px); box-shadow: var(--sh-soft); }
.day__n {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 4px;
}
.day__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.08rem + 0.7vw, 1.6rem);
  color: var(--charcoal);
  line-height: 1.12;
}
.day__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 6px;
}
.day__state {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}
.day.is-locked { opacity: 0.5; }
.day.is-locked:hover { transform: none; box-shadow: none; }
.day.is-current {
  border-color: color-mix(in srgb, var(--meniscus) 45%, transparent);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--sh-glass);
}
.day.is-current .day__state { color: color-mix(in srgb, var(--meniscus) 80%, var(--charcoal)); }
.day.is-completed .day__n { color: color-mix(in srgb, var(--meniscus) 75%, var(--charcoal)); }

/* ---------- 14. PROGRESO / PUNTOS ------------------------------ */
.score {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.score__n { font-family: var(--font-display); font-size: var(--t-display); color: var(--charcoal); line-height: 1; }
.score__u { font-family: var(--font-mono); font-size: var(--t-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }

.track { display: flex; flex-direction: column; gap: var(--s-2); }
.track__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.track__row:last-child { border-bottom: none; }
.nombre-editbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-soft);
  opacity: 0.55;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity .15s, background .15s;
}
.nombre-editbtn svg { width: 14px; height: 14px; }
.nombre-editbtn:hover { opacity: 1; background: var(--hairline); }
.track__row [data-nombre-input] {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  color: var(--charcoal);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--white);
}
.pill {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  color: var(--text-soft);
  white-space: nowrap;
}
.pill.is-done { border-color: color-mix(in srgb, var(--meniscus) 50%, transparent); color: color-mix(in srgb, var(--meniscus) 80%, var(--charcoal)); }

/* barra de progreso hacia el próximo premio */
.bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--charcoal) 8%, transparent);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--taupe), var(--meniscus));
  transition: width var(--m-slow) var(--ease-expand);
}

/* ---------- 14b. MI PROGRESO — dashboard ------------------------ */
.prog-top { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.4vw, 24px); margin-bottom: 24px; }
@media (min-width: 860px) { .prog-top { grid-template-columns: 1.5fr 1fr; align-items: stretch; } }

.prog-hero {
  position: relative; display: flex; min-height: 220px; border-radius: var(--r-card);
  overflow: hidden; isolation: isolate; box-shadow: var(--sh-glass);
}
.prog-hero .photo { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.prog-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, color-mix(in srgb, var(--charcoal) 78%, transparent) 0%, color-mix(in srgb, var(--charcoal) 30%, transparent) 55%, transparent 85%);
}
.prog-hero__panel { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: var(--s-8); max-width: 22rem; }
.prog-hero__panel .eyebrow { color: color-mix(in srgb, var(--white) 82%, transparent); }
.prog-hero__ico {
  width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%;
  display: grid; place-items: center; color: var(--meniscus);
  background: color-mix(in srgb, var(--white) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 30%, transparent);
}
.prog-hero__ico svg { width: 22px; height: 22px; }
.prog-hero__n { font-family: var(--font-display); font-size: clamp(2.2rem, 1.7rem + 2.4vw, 3.2rem); line-height: 1; color: var(--white); margin: 4px 0 6px; }
.prog-hero__txt { font-size: 0.94rem; color: color-mix(in srgb, var(--white) 86%, transparent); line-height: 1.4; }

.prog-donuts { display: flex; flex-direction: column; justify-content: center; }

.prog-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.prog-stat {
  display: flex; align-items: center; gap: 14px; padding: var(--s-5, 20px);
  border-radius: var(--r-card); background: var(--cream); border: 1px solid var(--hairline);
}
.prog-stat__ico {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: var(--charcoal);
  background: color-mix(in srgb, var(--beige) 45%, var(--cream));
}
.prog-stat__ico svg { width: 19px; height: 19px; }
.prog-stat__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prog-stat__body b { font-family: var(--font-display); font-size: 1.25rem; color: var(--charcoal); line-height: 1.1; }
.prog-stat__body span { font-size: 0.78rem; color: var(--text-soft); }
@media (max-width: 640px) { .prog-stats { grid-template-columns: 1fr; } }

.prog-consist { margin-bottom: 24px; }
.prog-consist__scroll { overflow-x: auto; margin-top: 18px; }
.prog-consist__row { display: flex; align-items: center; gap: 14px; padding: 7px 0; }
.prog-consist__row + .prog-consist__row { border-top: 1px solid var(--hairline); }
.prog-consist__row--head { border-top: none; padding-bottom: 10px; }
.prog-consist__lbl { flex: 0 0 11rem; font-size: 0.86rem; color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-consist__row--head .prog-consist__lbl { flex-basis: 11rem; }
.prog-consist__dots { display: flex; gap: 10px; min-width: 18rem; }
.prog-consist__day {
  flex: 1; text-align: center; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.04em; color: var(--text-soft);
}
.prog-consist__dot {
  flex: 1; aspect-ratio: 1; max-width: 18px; margin-inline: auto; border-radius: 50%;
  background: color-mix(in srgb, var(--charcoal) 8%, transparent);
}
.prog-consist__dot.is-done { background: var(--meniscus); }
.prog-consist__dot.is-miss { background: transparent; border: 1.5px solid var(--hairline-strong); }
.prog-consist__dot.is-blocked { background: color-mix(in srgb, var(--charcoal) 5%, transparent); }
.prog-consist__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.prog-consist__legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--text-soft); }
.prog-consist__legend .prog-consist__dot { flex: none; width: 10px; height: 10px; max-width: none; margin: 0; }

/* ---------- 15. PREMIOS --------------------------------------- */
.rewards { display: grid; gap: var(--s-4); }
.reward {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: var(--cream);
  border: 1px solid var(--hairline);
  transition: opacity var(--m-normal) var(--ease-soft);
}
.reward.is-locked { opacity: 0.55; }
.reward__type {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.reward h3 { font-family: var(--font-display); font-size: var(--t-h3); color: var(--charcoal); margin: 2px 0 4px; }
.reward p { font-size: var(--t-small); color: var(--text-soft); }

/* ---------- 16. HÁBITOS ------------------------------------- */
.habits { display: grid; gap: var(--s-3); }
.habit {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5, 20px) var(--s-6);
  border-radius: var(--r-card);
  background: var(--cream);
  border: 1px solid var(--hairline);
  text-align: left;
  transition: background var(--m-normal) var(--ease-soft);
}
.habit__check {
  width: 26px; height: 26px;
  border-radius: 9px;
  border: 1.5px solid var(--hairline-strong);
  display: grid; place-items: center;
  transition: background var(--m-fast) var(--ease-expand), border-color var(--m-fast) var(--ease-expand);
}
.habit__check svg { width: 15px; height: 15px; stroke-width: 2.4; opacity: 0; transform: scale(0.6); transition: opacity var(--m-fast), transform var(--m-fast) var(--ease-expand); }
.habit.is-done { background: color-mix(in srgb, var(--taupe) 20%, var(--cream)); }
.habit.is-done .habit__check { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.habit.is-done .habit__check svg { opacity: 1; transform: none; }
.habit h3 { font-size: 1rem; font-weight: 500; color: var(--charcoal); }
.habit p { font-size: var(--t-small); color: var(--text-soft); }

/* ---------- 17. SINCRONIZADOR --------------------------------- */
.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 40px;
}
.wave i {
  width: 3px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--charcoal) 28%, transparent);
  height: 40%;
}
.wave i:nth-child(even) { height: 70%; }
.wave i:nth-child(3n) { height: 55%; }
.player.is-playing .wave i { animation: wave 1.1s var(--ease-soft) infinite; }
.player.is-playing .wave i:nth-child(2) { animation-delay: 0.15s; }
.player.is-playing .wave i:nth-child(3) { animation-delay: 0.3s; }
.player.is-playing .wave i:nth-child(4) { animation-delay: 0.45s; }
.player.is-playing .wave i:nth-child(5) { animation-delay: 0.6s; }
@keyframes wave { 0%, 100% { height: 25%; } 50% { height: 92%; } }

/* ---------- 18. INTRO (portal) ------------------------------- */
.intro {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s-8);
  background:
    radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--cream) 90%, transparent), transparent 70%),
    var(--ivory);
  z-index: 60;
}
.intro__stage { text-align: center; max-width: 40rem; }
.intro__orb {
  width: clamp(120px, 26vw, 200px);
  height: clamp(120px, 26vw, 200px);
  margin: 0 auto var(--s-10);
  border-radius: 50%;
  background:
    radial-gradient(50% 45% at 38% 32%, color-mix(in srgb, var(--white) 85%, transparent), transparent 70%),
    radial-gradient(130% 130% at 72% 82%, color-mix(in srgb, var(--meniscus) 40%, transparent), transparent 65%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-glass);
  opacity: 0;
  transform: scale(0.7);
  animation: orb-form 1.5s var(--ease-expand) 0.15s forwards, breathe 5s var(--ease-soft) 1.8s infinite;
}
.intro__title {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: 1.02;
  color: var(--charcoal);
  opacity: 0;
  filter: blur(14px);
  animation: rise-blur 1.1s var(--ease-expand) 0.75s forwards;
}
.intro__sub {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: var(--s-6);
  opacity: 0;
  animation: rise-blur 1s var(--ease-expand) 1.35s forwards;
}
.intro__skip {
  position: absolute;
  bottom: var(--s-10);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  opacity: 0;
  animation: fade-in 0.6s ease 2s forwards;
}
@keyframes orb-form { to { opacity: 1; transform: scale(1); } }
@keyframes rise-blur { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes fade-in { to { opacity: 1; } }

/* ---------- 19. ACCESO (2 columnas, PRD §20) ---------------- */
.access {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.access__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--s-6), 4.5vw, var(--s-14)) clamp(var(--s-6), 6vw, var(--s-20));
  max-width: 34rem;
  margin-inline: auto;
  width: 100%;
}
/* compactado para que la página no haga scroll */
.access__form .field { gap: 5px; }
.access__form .field > label { font-size: var(--t-caption); letter-spacing: 0.02em; }
.access__form .field input,
.access__form .field select { padding: 10px 14px; }
.access__form .field__hint { font-size: 0.72rem; line-height: 1.35; }
.access__aside {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(158deg, var(--cream) 0%, color-mix(in srgb, var(--taupe) 20%, var(--cream)) 100%);
}
/* slider de fotos (color original, sin filtro; transición suave y sutil, cada 5 s) */
.access__slider { position: absolute; inset: 0; }
.access__slider img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1800ms var(--ease-soft), transform 7200ms var(--ease-soft);
  will-change: opacity;
}
/* la primera imagen queda de base para que nunca se vea el gradiente al cruzar */
.access__slider img:first-child { opacity: 1; transform: scale(1); }
.access__slider img.is-on { opacity: 1; transform: scale(1); }
.access__aside .photo { display: none; }

/* crédito flotante translúcido */
.access__aside-panel {
  position: absolute;
  z-index: 2;
  left: var(--s-8); right: auto; bottom: var(--s-10);
  width: auto;
  padding: 12px var(--s-5);
  overflow: hidden;
  background: color-mix(in srgb, var(--cream) 40%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3) brightness(1.05);
  backdrop-filter: blur(16px) saturate(1.3) brightness(1.05);
  border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-floating);
  animation: panel-float 7.5s var(--ease-soft) infinite;
}
.access__aside-panel::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--white) 42%, transparent) 48%, transparent 66%);
  background-size: 260% 100%;
  animation: panel-sheen 6s var(--ease-soft) 1s infinite;
}
.access__aside-panel > * { position: relative; z-index: 1; }
@keyframes panel-float {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-9px) rotate(0.5deg); }
}
@keyframes panel-sheen {
  0%, 55% { background-position: 130% 0; }
  90%, 100% { background-position: -40% 0; }
}
.access__signature {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}
.acc-heart {
  color: var(--meniscus);
  font-size: 1.15em;
  vertical-align: -0.06em;
  letter-spacing: 0;
}

/* ---------- 20. CEREMONIA "SALTO" (PRD §34) ---------------- */
.ceremony {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--s-8);
  background: color-mix(in srgb, var(--ivory) 78%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fade-in var(--m-normal) ease both;
}
.ceremony__card {
  position: relative;
  overflow: hidden;
  text-align: center;
  max-width: 32rem;
  padding: var(--s-16) var(--s-12);
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-floating);
  transform: translateY(16px) scale(0.96);
  animation: lift var(--m-slow) var(--ease-expand) forwards;
}
.ceremony__card::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--white) 75%, transparent), transparent);
  transform: skewX(-18deg);
  animation: sweep 1.1s var(--ease-expand) 0.35s;
}
.ceremony__eyebrow { display: block; margin-bottom: var(--s-4); }
.ceremony__title { font-family: var(--font-display); font-size: var(--t-h1); color: var(--charcoal); }
.ceremony__pts { font-family: var(--font-mono); font-size: var(--t-body-lg); color: color-mix(in srgb, var(--meniscus) 82%, var(--charcoal)); margin-top: var(--s-4); }
.ceremony__diag { margin-top: var(--s-6); color: var(--stone); font-size: 0.92rem; line-height: 1.4; }
.confetti-layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.confetti-piece {
  position: absolute; top: -8%; width: 6px; height: 12px; border-radius: 1px; opacity: 0.9;
  transform: rotate(var(--rot, 0deg));
  animation: confetti-fall var(--dur, 1.5s) cubic-bezier(.35,.62,.55,1) var(--delay, 0s) both;
}
.confetti-piece.is-wide { width: 9px; height: 9px; border-radius: 50%; }
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(var(--rot, 0deg)); opacity: 0.95; }
  100% { transform: translateY(420px) rotate(calc(var(--rot, 0deg) + 200deg)); opacity: 0; }
}
.ceremony__ring {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 40px; height: 40px;
  border: 1px solid color-mix(in srgb, var(--meniscus) 60%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: expand-ring 1.4s var(--ease-expand) 0.4s forwards;
  pointer-events: none;
}
@keyframes lift { to { transform: none; } }
@keyframes sweep { to { left: 120%; } }
@keyframes expand-ring { to { width: 620px; height: 620px; opacity: 0; } }

/* ---------- 21. TOAST + MODAL -------------------------------- */
.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: var(--s-10);
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
}
.toast {
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--charcoal);
  color: var(--cream);
  font-size: var(--t-small);
  box-shadow: var(--sh-floating);
  animation: toast-in var(--m-normal) var(--ease-expand) both;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

.modal {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: var(--s-8);
  background: color-mix(in srgb, var(--charcoal) 22%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fade-in var(--m-fast) ease both;
}
.modal__card {
  max-width: 30rem;
  width: 100%;
  padding: var(--s-10);
  border-radius: var(--r-xl);
  background: var(--cream);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-floating);
  animation: lift var(--m-normal) var(--ease-expand) both;
}
.modal__card h2 { font-family: var(--font-display); font-size: var(--t-h2); color: var(--charcoal); margin-bottom: var(--s-3); }
.modal__actions { display: flex; gap: var(--s-3); margin-top: var(--s-8); }
.modal__actions .btn { flex: 1; }

/* ---------- 22. QUIZ ---------------------------------------- */
.quiz__q { margin-bottom: var(--s-10); }
.quiz__q > p { font-family: var(--font-display); font-size: var(--t-h3); color: var(--charcoal); margin-bottom: var(--s-4); line-height: 1.2; }
.quiz__opts { display: grid; gap: var(--s-3); }
.opt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5, 20px);
  border-radius: var(--r-input);
  background: var(--cream);
  border: 1px solid var(--hairline-strong);
  text-align: left;
  font-size: 0.98rem;
  transition: border-color var(--m-fast) var(--ease-soft), background var(--m-fast) var(--ease-soft);
}
.opt:hover { border-color: var(--taupe); }
.opt__dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--hairline-strong); flex: none; transition: all var(--m-fast) var(--ease-expand); }
.opt.is-picked { border-color: var(--charcoal); background: color-mix(in srgb, var(--taupe) 16%, var(--cream)); }
.opt.is-picked .opt__dot { background: var(--charcoal); border-color: var(--charcoal); box-shadow: inset 0 0 0 3px var(--cream); }

/* ---------- 23. VARIOS ------------------------------------- */
.divider { height: 1px; background: var(--hairline); border: none; }
.note {
  font-size: var(--t-small);
  color: var(--text-soft);
  padding: var(--s-4) var(--s-5, 20px);
  border-left: 2px solid var(--hairline-strong);
  background: color-mix(in srgb, var(--beige) 30%, transparent);
  border-radius: 0 12px 12px 0;
}
.tag-borrador {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.center-narrow { max-width: 34rem; margin-inline: auto; text-align: center; }

/* preview / modo desarrollo */
.dev {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5, 20px);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--charcoal) 5%, transparent);
  border: 1px dashed var(--hairline-strong);
  font-size: var(--t-small);
}
.dev select { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--hairline-strong); background: var(--white); }

/* ---------- 23b. TOPBAR: cápsula de puntos + campana (siempre) ---- */
.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}
.capsule {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-soft);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  color: var(--charcoal);
  transition: box-shadow var(--m-normal) var(--ease-expand);
}
.capsule:hover { box-shadow: var(--sh-glass); }
.capsule__u { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
.capsule__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--meniscus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--meniscus) 20%, transparent);
}
.bell, .snd {
  position: relative;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--charcoal);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-soft);
  transition: transform var(--m-fast) var(--ease-expand), box-shadow var(--m-normal) var(--ease-expand),
              color var(--m-normal) var(--ease-soft), opacity var(--m-normal) var(--ease-soft);
}
.bell svg, .snd svg { width: 20px; height: 20px; }
.bell:hover, .snd:hover { transform: translateY(-2px); box-shadow: var(--sh-glass); }
.snd[aria-pressed="false"] { color: var(--text-soft); opacity: 0.7; }
.bell.has-dot svg {
  transform-origin: 50% 3px;
  animation: bell-ring 5s var(--ease-soft) 1.4s infinite;
}
@keyframes bell-ring {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(9deg); }
  90% { transform: rotate(-7deg); }
  94% { transform: rotate(4deg); }
  97% { transform: rotate(-2deg); }
}
.bell.has-dot::after {
  content: "";
  position: absolute; top: 8px; right: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--meniscus);
  border: 2px solid var(--cream);
}
.notif {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(22rem, 86vw);
  z-index: 45;
  padding: var(--s-4);
  border-radius: var(--r-card);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-floating);
  animation: lift var(--m-normal) var(--ease-expand) both;
}
.notif__head {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 var(--s-2) var(--s-3);
}
.notif__item {
  display: block;
  padding: 10px var(--s-2);
  border-radius: 12px;
  transition: background var(--m-fast) var(--ease-soft);
}
.notif__item + .notif__item { border-top: 1px solid var(--hairline); }
.notif__item:hover { background: color-mix(in srgb, var(--charcoal) 4%, transparent); }
.notif__item b { display: block; font-size: 0.92rem; font-weight: 500; color: var(--charcoal); }
.notif__item span { font-size: var(--t-small); color: var(--text-soft); }

/* ---------- 23c. FRASE DE INICIO (tarjeta de vidrio, una sola línea) --- */
.fraseband {
  border-radius: var(--r-card);
  padding: var(--s-6) var(--s-8);
  margin-bottom: var(--s-8);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-soft);
  overflow-x: auto;
}
.fraseband p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--charcoal);
  text-align: center;
  white-space: nowrap;
}
/* marcador elegante: mismo tono que el resaltado nativo de selección
   (::selection, arriba) — así la frase ya se ve "subrayada a mano" sin
   necesidad de negrita (DM Serif Display no trae peso bold). */
.fraseband mark {
  background: color-mix(in srgb, var(--taupe) 52%, transparent);
  color: var(--charcoal);
  padding: 0.06em 0.1em;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.fraseband__br { display: none; }
@media (max-width: 640px) {
  .fraseband p { white-space: normal; text-align: center; }
  .fraseband__br { display: inline; }
}

/* ---------- 23d. TARJETAS CUADRADAS (reto, premios) ------------- */
.grid-sq {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.sqcard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  box-shadow: var(--sh-soft);
  transition: transform var(--m-normal) var(--ease-expand), box-shadow var(--m-normal) var(--ease-expand);
}
.sqcard .photo { position: absolute; inset: 0; z-index: 0; border-radius: 0; aspect-ratio: auto; }
.sqcard::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(172deg, color-mix(in srgb, var(--charcoal) 8%, transparent) 28%, color-mix(in srgb, var(--charcoal) 64%, transparent) 100%);
}
.sqcard > * { position: relative; z-index: 2; }
.sqcard:hover { transform: translateY(-4px); box-shadow: var(--sh-floating); }
.sqcard.is-current { box-shadow: 0 0 0 2px color-mix(in srgb, var(--meniscus) 55%, transparent), var(--sh-glass); }
.sqcard.is-locked { box-shadow: none; }
.sqcard.is-locked::after { background: color-mix(in srgb, var(--ivory) 58%, transparent); }
.sqcard.is-locked:hover { transform: none; box-shadow: none; }
.sqcard__body { margin-top: auto; padding: var(--s-6); }
.sqcard__n {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 78%, transparent);
}
.sqcard.is-locked .sqcard__n { color: var(--text-soft); }
.sqcard__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.1;
  color: var(--white);
  margin-top: 6px;
}
.sqcard.is-locked .sqcard__title { color: var(--charcoal); }
.sqcard__desc { margin-top: 8px; font-size: var(--t-small); color: color-mix(in srgb, var(--white) 82%, transparent); }
.sqcard.is-locked .sqcard__desc { color: var(--text-soft); }
.sqcard__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px var(--s-5);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border-top: 1px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.sqcard__foot svg { width: 12px; height: 12px; flex: none; }
.sqcard__foot span { white-space: nowrap; }
.sqcard.is-current .sqcard__foot { color: color-mix(in srgb, var(--meniscus) 80%, var(--charcoal)); }
.sqcard__cta { display: inline-flex; align-items: center; gap: 6px; }
.reward-sq.is-done .sqcard__foot { color: color-mix(in srgb, var(--meniscus) 75%, var(--charcoal)); }

/* --- indicador "Paso 1 / Paso 2" (Reto extra del Día 5): antes del audio
   y antes del acordeón de preguntas, para que la secuencia sea evidente. */
.pasos-step {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-soft);
}
.pasos-step__n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--charcoal); color: var(--cream);
  font-family: var(--font-mono); font-size: 0.7rem;
}

/* ---------- 23d-2. Conteo regresivo grande (lanzamiento Masterclass) --- */
.cd-grande { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 18px); }
.cd-grande__unit { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 3.4em; }
.cd-grande__n {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem); line-height: 1; color: var(--charcoal);
}
.cd-grande__l {
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-soft);
}
.cd-grande__sep {
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem);
  color: color-mix(in srgb, var(--meniscus) 60%, var(--charcoal)); line-height: 1;
  transform: translateY(-8px);
}
@media (max-width: 480px) {
  .cd-grande { gap: 6px; }
  .cd-grande__unit { min-width: 2.6em; }
}

/* ---------- 23e. FRECUENCIAS: tarjetas editoriales -------------- */
.freq2-list { display: flex; flex-direction: column; gap: 14px; }
.freq2 {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px, 3vw, 32px);
  align-items: center; padding: clamp(20px, 3vw, 30px);
  border-radius: var(--r-card); background: var(--cream); border: 1px solid var(--hairline);
}
.freq2__num {
  font-family: var(--font-display); font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem);
  color: color-mix(in srgb, var(--charcoal) 22%, transparent); line-height: 1;
}
.freq2__t { font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); color: var(--charcoal); margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.01em; }
.freq2__tag { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--text-soft); margin: 0 0 10px; }
.freq2__txt { font-size: 0.92rem; line-height: 1.55; color: var(--charcoal); margin: 0 0 10px; max-width: 52ch; }
.freq2__usos { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--stone); }
.freq2__usos b { color: var(--text-soft); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; }
.freq2__side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.freq2__side .wave { width: 60px; height: 24px; }
.freq-play {
  width: 66px; height: 66px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--charcoal);
  color: var(--cream);
  box-shadow: var(--sh-glass);
  transition: transform var(--m-fast) var(--ease-expand), box-shadow var(--m-normal) var(--ease-expand), background var(--m-normal) var(--ease-soft);
}
.freq-play svg { width: 26px; height: 26px; margin-left: 3px; }
.freq-play:hover { transform: scale(1.06); box-shadow: var(--sh-floating); }
.freq-play:active { transform: scale(0.97); }
.player.is-playing .freq-play { background: color-mix(in srgb, var(--meniscus) 32%, var(--charcoal)); }
.player.is-playing .freq-play svg { margin-left: 0; }
@media (max-width: 640px) {
  .freq2 { grid-template-columns: 1fr; text-align: center; }
  .freq2__side { flex-direction: row-reverse; justify-content: center; }
}

/* ---------- 23g. INICIO: héroe del día + banda funcional ------- */
/* Banner clicable de Inicio (debajo de la barra de los 9 días) — el texto ya
   viene dibujado en la propia imagen, así que esto solo la enmarca. */
.inicio-banner {
  display: block;
  border-radius: var(--r-hero);
  overflow: hidden;
  box-shadow: var(--sh-glass);
  margin-bottom: var(--s-8);
  transition: transform .2s ease, box-shadow .2s ease;
}
.inicio-banner:hover,
.inicio-banner:focus-visible { transform: translateY(-2px); box-shadow: var(--sh-floating); }
.inicio-banner img { display: block; width: 100%; height: auto; }

.dayhero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-hero);
  min-height: 430px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-glass);
  margin-bottom: var(--s-8);
}
.dayhero .photo { position: absolute; inset: 0; z-index: 0; border-radius: 0; aspect-ratio: auto; }
.dayhero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(178deg,
    color-mix(in srgb, var(--charcoal) 30%, transparent) 0%,
    transparent 34%,
    color-mix(in srgb, var(--charcoal) 30%, transparent) 66%,
    color-mix(in srgb, var(--charcoal) 66%, transparent) 100%);
}
.dayhero__strip {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-8) 0;
}
.dayhero__strip .eyebrow {
  color: color-mix(in srgb, var(--white) 84%, transparent);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--charcoal) 55%, transparent);
}
.dayhero__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 92%, transparent);
  background: color-mix(in srgb, var(--meniscus) 32%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--white) 32%, transparent);
}
.dayhero__tag svg { width: 12px; height: 12px; }
.dayhero__panel {
  position: relative; z-index: 2;
  margin: auto var(--s-8) var(--s-8);
  padding: var(--s-8);
  max-width: 34rem;
  border-radius: var(--r-card);
  /* más transparente que el vidrio estándar (--glass-bg 70% crema): deja
     asomar la foto detrás con más claridad, cuidando que el texto (charcoal
     oscuro) siga legible sobre el degradado oscuro de la foto. */
  background: color-mix(in srgb, var(--cream) 46%, transparent);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-glass);
}
.dayhero__panel > .eyebrow { display: block; }
.dayhero__title {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: 1.05;
  color: var(--charcoal);
  margin: 10px 0 8px;
  text-wrap: balance;
}
/* más oscura que --text-soft: con el panel ahora más transparente (46%
   crema), el gris estándar quedaba bajo de contraste contra la foto de
   fondo — sobre todo en zonas claras de la imagen. */
.dayhero__frase {
  font-size: var(--t-body-lg);
  line-height: 1.5;
  margin: 0 0 22px;
  color: color-mix(in srgb, var(--charcoal) 78%, var(--stone));
  text-shadow: 0 1px 12px color-mix(in srgb, var(--cream) 70%, transparent);
  text-wrap: balance;
}
.dayhero__prog { margin: 20px 0 22px; display: flex; flex-direction: column; gap: 8px; }
.dayhero__bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--charcoal) 10%, transparent);
  overflow: hidden;
}
.dayhero__bar > i {
  display: block; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--taupe), var(--meniscus));
  transition: width var(--m-slow) var(--ease-expand);
}
.dayhero__meta {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
/* brillo de vidrio líquido en los paneles del héroe (Editorial + Glass) */
.dayhero__panel::after,
.hero__panel::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(142deg, color-mix(in srgb, var(--white) 34%, transparent) 0%, transparent 38%);
}
.dayhero__panel > *,
.hero__panel > * { position: relative; z-index: 1; }

.dayhero__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
/* mismo ajuste de contraste que .dayhero__frase: sobre el panel más
   transparente, --text-soft se perdía contra la foto de fondo. */
.dayhero__next {
  font-size: var(--t-small);
  color: color-mix(in srgb, var(--charcoal) 70%, var(--stone));
  text-shadow: 0 1px 10px color-mix(in srgb, var(--cream) 60%, transparent);
}
.dayhero__next span { color: var(--charcoal); font-variant-numeric: tabular-nums; }
.dayhero.is-done .dayhero__next { font-size: var(--t-body); color: var(--charcoal); }

/* ---------- 23h. CARNET: tarjeta de identidad + pantalla split ----
   Credencial vertical tipo lanyard: papel crema con textura suave,
   emblema celeste en latón, ventana de foto y dunas al pie.          */
.idcard {
  position: relative;
  aspect-ratio: 63 / 100;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  color: var(--charcoal);
  background:
    linear-gradient(179deg, rgba(251,247,240,0.86) 0%, rgba(247,241,231,0.9) 55%, rgba(240,232,219,0.92) 100%),
    url("../assets/carnet-tex.jpg") center / cover no-repeat;
  border: 1px solid color-mix(in srgb, var(--white) 60%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 60%, transparent),
    0 1px 2px color-mix(in srgb, var(--charcoal) 8%, transparent),
    0 12px 26px -16px color-mix(in srgb, var(--charcoal) 14%, transparent),
    0 26px 52px -32px color-mix(in srgb, var(--charcoal) 16%, transparent);
}
/* la variante flotante lleva su sombra proyectada como filter (ver
   .idcard--float más abajo), animada junto al movimiento — el box-shadow
   estático de arriba se reduce aquí para no duplicar el mismo efecto y
   verse pesado/turbio. */
.idcard--float {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 60%, transparent),
    0 1px 2px color-mix(in srgb, var(--charcoal) 12%, transparent),
    0 3px 6px -2px color-mix(in srgb, var(--charcoal) 14%, transparent);
}
/* brillo especular: una veta de luz diagonal sobre el papel, como si la
   superficie fuera ligeramente convexa — refuerza el relieve sin sombra. */
.idcard::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(158deg, color-mix(in srgb, var(--white) 50%, transparent) 0%, transparent 34%);
  mix-blend-mode: soft-light;
}
.idcard::after { /* borde de luz cálido, papel mate + relieve superior */
  content: "";
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 30%, transparent),
              inset 0 2px 0 color-mix(in srgb, var(--white) 85%, transparent),
              inset 0 -40px 60px -50px color-mix(in srgb, var(--taupe) 60%, transparent),
              inset 0 -2px 0 color-mix(in srgb, var(--charcoal) 18%, transparent);
}
.idcard__slot {
  position: absolute; z-index: 5;
  top: 5.5%; left: 50%; transform: translateX(-50%);
  width: 32%; height: 2.1%;
  min-height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 78%, #6c6257);
  box-shadow:
    inset 0 1.5px 3px color-mix(in srgb, var(--charcoal) 45%, transparent),
    0 1px 0 color-mix(in srgb, var(--white) 70%, transparent);
}
.idcard__deco {
  position: absolute; z-index: 1; top: 4%; right: 0;
  width: 42%; height: auto; pointer-events: none;
}
.idcard__edge {
  position: absolute; z-index: 3; left: 7%; top: 13%;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-mono); font-size: clamp(0.44rem, 1.5%, 0.58rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: color-mix(in srgb, var(--stone) 88%, transparent);
}
.idcard__edge::after {
  content: ""; position: absolute; left: 50%; bottom: -22px;
  width: 1px; height: 18px; background: currentColor; opacity: 0.5;
}
.idcard__in {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(10px, 3%, 18px);
  padding: clamp(34px, 13.5%, 56px) clamp(20px, 9%, 34px) clamp(20px, 8%, 32px);
}
.idcard__emblem { width: 39%; height: auto; margin-top: 4%; display: block; }
.idcard__win {
  width: 63%; aspect-ratio: 4 / 5;
  border-radius: 16px; overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cream) 80%, var(--beige));
  color: color-mix(in srgb, var(--stone) 60%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--white) 55%, transparent),
    inset 0 4px 10px color-mix(in srgb, var(--charcoal) 28%, transparent),
    inset 0 -1.5px 0 color-mix(in srgb, var(--white) 45%, transparent),
    0 5px 16px -6px color-mix(in srgb, var(--charcoal) 32%, transparent);
}
.idcard__win svg { width: 40%; height: 40%; }
.idcard__win img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idcard__id { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: clamp(6px, 2.5%, 14px); }
.idcard__div {
  position: relative; width: 44%; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0 L7 5 L12 6 L7 7 L6 12 L5 7 L0 6 L5 5 Z' fill='%23B79A6A'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.idcard__div::before, .idcard__div::after {
  content: ""; position: absolute; top: 50%; width: 36%; height: 1px;
  background: #B79A6A; opacity: 0.55;
}
.idcard__div::before { left: 0; }
.idcard__div::after { right: 0; }
.idcard__kicker {
  font-family: var(--font-mono); font-size: clamp(0.44rem, 1.5%, 0.58rem);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: color-mix(in srgb, var(--stone) 85%, transparent);
  padding-left: 0.34em;
}
.idcard__brand {
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 4.7%, 1.55rem); line-height: 1.15;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--charcoal);
  /* relieve grabado: leve luz arriba, leve sombra abajo, como texto tallado
     en el papel del pasaporte. */
  text-shadow: 0 1px 0 color-mix(in srgb, var(--white) 65%, transparent),
               0 -1px 0 color-mix(in srgb, var(--charcoal) 12%, transparent);
}
.idcard__name {
  margin-top: 7px; font-size: clamp(0.7rem, 2.5%, 0.92rem); font-weight: 500;
  color: var(--charcoal); letter-spacing: 0.01em;
}
.idcard__meta {
  font-family: var(--font-mono); font-size: clamp(0.42rem, 1.4%, 0.56rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--stone) 80%, transparent);
}
.idcard__dunes {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  width: 100%; height: 23%; display: block;
}

/* bloque para pedir la foto del "antes" en el cuestionario del carnet */
.carnetfoto {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--beige) 40%, var(--cream));
  border: 1px solid var(--hairline);
}
.carnetfoto__pic {
  width: 96px; height: 96px; flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cream) 72%, var(--beige));
  border: 1px solid color-mix(in srgb, var(--white) 60%, transparent);
  color: color-mix(in srgb, var(--stone) 70%, transparent);
  box-shadow: inset 0 1px 4px color-mix(in srgb, var(--charcoal) 12%, transparent);
}
.carnetfoto__pic svg { width: 42%; height: 42%; }
.carnetfoto__pic img { width: 100%; height: 100%; object-fit: cover; }
.carnetfoto__txt { min-width: 0; }
@media (max-width: 560px) {
  .carnetfoto { flex-direction: column; text-align: center; }
}
/* sombra proyectada dinámica, contenida: se ajusta apenas cuando la
   tarjeta "sube" — el relieve de la superficie (bisel + brillo especular,
   arriba) es quien hace el trabajo de dar 3D, no una sombra grande. */
.idcard--float {
  animation: idfloat 6s var(--ease-soft) infinite;
  filter: drop-shadow(0 6px 7px color-mix(in srgb, var(--charcoal) 16%, transparent));
}
@keyframes idfloat {
  0%, 100% {
    transform: translateY(0) rotate(-1.4deg);
    filter: drop-shadow(0 5px 6px color-mix(in srgb, var(--charcoal) 15%, transparent));
  }
  50% {
    transform: translateY(-10px) rotate(1.4deg);
    filter: drop-shadow(0 12px 12px color-mix(in srgb, var(--charcoal) 22%, transparent));
  }
}

/* variante compacta (teaser en Inicio): emblema + ventana + marca */
.idcard--mini .idcard__edge,
.idcard--mini .idcard__slot,
.idcard--mini .idcard__deco,
.idcard--mini .idcard__div,
.idcard--mini .idcard__kicker,
.idcard--mini .idcard__name,
.idcard--mini .idcard__meta { display: none; }
.idcard--mini .idcard__in { justify-content: center; gap: 12px; padding: 16px 12px 20px; }
.idcard--mini .idcard__emblem { width: 42%; margin: 0; }
.idcard--mini .idcard__win { width: 68%; border-radius: 11px; }
.idcard--mini .idcard__id { margin-top: 4px; }
.idcard--mini .idcard__brand { font-size: 0.66rem; letter-spacing: 0.09em; }

.carnetsplit {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.carnetsplit__text .lede { max-width: 42ch; }
.carnetsplit__card { width: 100%; max-width: 20.5rem; margin-inline: auto; }

/* pasaporte en Inicio: ancho completo, discreto — segundo paso después
   del día de la fase, así que su CTA es un link sutil, no un botón. */
.passcard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-10);
  align-items: center;
  /* visible, no hidden: el pasaporte lleva una sombra proyectada animada
     (.idcard--float) que necesita poder salirse un poco de la tarjeta para
     leerse como relieve/3D — con overflow:hidden se recortaba en seco. */
  overflow: visible;
  padding: var(--s-6) var(--s-6) var(--s-6) var(--s-8);
  border-radius: var(--r-card);
  /* más presencia de vidrio: un poco más transparente que el glass-bg
     estándar (deja ver algo del fondo) y un blur algo mayor, para que el
     efecto se note más en una tarjeta grande y plana como esta. */
  background: color-mix(in srgb, var(--cream) 58%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.6) brightness(1.05);
  backdrop-filter: blur(28px) saturate(1.6) brightness(1.05);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-soft);
  margin-bottom: var(--s-8);
  text-decoration: none;
  transition: transform var(--m-normal) var(--ease-expand), box-shadow var(--m-normal) var(--ease-expand);
}
.passcard:hover { transform: translateY(-4px); box-shadow: var(--sh-floating); }

/* Recordatorio en Inicio: ya puede ver la Masterclass pero nunca la ha
   abierto (ver viewInicio). Mismo patrón que .passcard (icono/insignia +
   cuerpo con cta subrayado + flecha circular aparte), con acento dorado
   para que se note como un pendiente real, no un anuncio más. */
.mc-nudge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-10);
  align-items: center;
  padding: var(--s-6) var(--s-6) var(--s-6) var(--s-8);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--cream) 58%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.6) brightness(1.05);
  backdrop-filter: blur(28px) saturate(1.6) brightness(1.05);
  border: 1px solid color-mix(in srgb, var(--meniscus) 45%, var(--glass-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--meniscus) 10%, transparent), var(--sh-soft);
  margin-bottom: var(--s-8);
  text-decoration: none;
  transition: transform var(--m-normal) var(--ease-expand), box-shadow var(--m-normal) var(--ease-expand);
}
.mc-nudge:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--meniscus) 18%, transparent), var(--sh-floating); }
.mc-nudge__ico {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; flex: none; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--charcoal), color-mix(in srgb, var(--charcoal) 70%, black));
  color: var(--cream); font-size: 1.7rem;
}
.mc-nudge__ico--float {
  animation: idfloat 6s var(--ease-soft) infinite;
  filter: drop-shadow(0 6px 7px color-mix(in srgb, var(--charcoal) 35%, transparent));
}
.mc-nudge__body { min-width: 0; max-width: 46rem; }
.mc-nudge__body h3 { font-family: var(--font-display); font-size: calc(var(--t-h3) * 1.2); color: var(--charcoal); margin: 6px 0; }
.mc-nudge__body p { font-size: var(--t-small); color: var(--text-soft); }
.mc-nudge__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-size: var(--t-small); font-weight: 600; color: var(--charcoal);
  border-bottom: 1px solid var(--hairline-strong); padding-bottom: 2px;
}
.mc-nudge__cta svg { width: 13px; height: 13px; }
.mc-nudge:hover .mc-nudge__cta { border-color: var(--charcoal); }
.mc-nudge__arrow {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: var(--charcoal);
  border: 1px solid var(--hairline-strong); background: var(--cream);
  transition: transform var(--m-fast) var(--ease-expand), background var(--m-fast), color var(--m-fast), border-color var(--m-fast);
}
.mc-nudge__arrow svg { width: 16px; height: 16px; }
.mc-nudge:hover .mc-nudge__arrow { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); transform: translateX(2px); }
@media (max-width: 560px) {
  .mc-nudge { grid-template-columns: 1fr; text-align: center; padding: var(--s-6); gap: var(--s-4); }
  .mc-nudge__ico { margin: 0 auto; }
  .mc-nudge__body p { max-width: none; }
  .mc-nudge__arrow { margin: 0 auto; }
}
.passcard__body { min-width: 0; max-width: 46rem; }
.passcard h3 { font-family: var(--font-display); font-size: calc(var(--t-h3) * 1.2); color: var(--charcoal); margin: 6px 0; }
/* sin max-width en ch: en tarjetas anchas (pantallas grandes) el texto debe
   usar el espacio real disponible en su columna — limitarlo a 56ch dejaba
   un vacío enorme entre el párrafo y la flecha de la derecha. */
.passcard p { font-size: var(--t-small); color: var(--text-soft); }
.passcard__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-size: var(--t-small); font-weight: 600; color: var(--charcoal);
  border-bottom: 1px solid var(--hairline-strong); padding-bottom: 2px;
}
.passcard__cta svg { width: 13px; height: 13px; }
.passcard:hover .passcard__cta { border-color: var(--charcoal); }
.passcard .idcard { width: 168px; flex: none; }
.passcard__arrow {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: var(--charcoal);
  border: 1px solid var(--hairline-strong); background: var(--cream);
  transition: transform var(--m-fast) var(--ease-expand), background var(--m-fast), color var(--m-fast), border-color var(--m-fast);
}
.passcard__arrow svg { width: 16px; height: 16px; }
.passcard:hover .passcard__arrow { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); transform: translateX(2px); }
@media (max-width: 560px) {
  .passcard { grid-template-columns: 1fr; text-align: center; padding: var(--s-6); gap: var(--s-4); }
  .passcard .idcard { width: 132px; margin: 0 auto; }
  .passcard p { max-width: none; }
  .passcard__arrow { margin: 0 auto; }
}

/* carrusel de clases del reto (accesos directos) */
.dayrail { margin-bottom: var(--s-8); }
.dayrail__hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.carousel {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  margin-inline: calc(-1 * var(--s-4));
  padding-inline: var(--s-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: var(--r-pill); }
.carousel .sqcard { flex: 0 0 clamp(12.5rem, 44vw, 15.5rem); scroll-snap-align: start; }
.carousel .sqcard__title { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.7rem); }

.tools__links { display: flex; flex-wrap: wrap; gap: 10px var(--s-5); }
.tools__links a {
  font-size: var(--t-small);
  color: var(--text-soft);
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 1px;
  transition: color var(--m-fast) var(--ease-soft);
}
.tools__links a:hover { color: var(--charcoal); }

/* ---------- 23f. RAIL FOOT = bloque de cuenta (perfil sin duplicar) --- */
a.rail__foot {
  margin-top: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
  padding: 10px;
  border-radius: 14px;
  transition: background var(--m-fast) var(--ease-soft);
}
a.rail__foot:hover { background: color-mix(in srgb, var(--charcoal) 4%, transparent); }
.rail__avatar {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--taupe) 35%, var(--cream));
  border: 1px solid var(--glass-border);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--charcoal);
}
.rail__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail__ident { display: flex; flex-direction: column; line-height: 1.3; }
.rail__ident b { font-weight: 500; font-size: 0.95rem; color: var(--charcoal); }
.rail__ident span { font-size: var(--t-caption); color: var(--text-soft); }

/* ---------- 24. NAVEGACIÓN MÓVIL --------------------------- */

/* botón hamburguesa: 3 líneas que forman una X al abrir */
.hambtn {
  display: none;
  position: relative;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  border-radius: 50%;
  color: var(--charcoal);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-soft);
}
.hambtn span {
  display: block; width: 18px; height: 1.5px; border-radius: 1px;
  background: currentColor;
  transition: transform var(--m-fast) var(--ease-expand), opacity var(--m-fast) var(--ease-soft);
}
.hambtn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hambtn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hambtn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* panel de menú móvil: única navegación en móvil, con la lista completa de secciones */
.mobnav { position: fixed; inset: 0; z-index: 70; }
.mobnav[hidden] { display: none; }
.mobnav__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--charcoal) 42%, transparent);
  opacity: 0;
  transition: opacity var(--m-normal) var(--ease-soft);
}
.mobnav.is-open .mobnav__backdrop { opacity: 1; }
.mobnav__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(78vw, 320px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-8) var(--s-5) var(--s-8);
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--sh-floating);
  transform: translateX(-100%);
  transition: transform var(--m-normal) var(--ease-expand);
  overflow-y: auto;
}
.mobnav.is-open .mobnav__panel { transform: none; }
.mobnav__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--s-6);
}
.mobnav__brand { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.15; color: var(--charcoal); }
.mobnav__close {
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--charcoal);
  background: color-mix(in srgb, var(--charcoal) 6%, transparent);
}
.mobnav__close svg { width: 16px; height: 16px; }
.mobnav__link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 13px var(--s-3);
  border-radius: 13px;
  color: var(--text-soft);
  font-size: 0.98rem;
  transition: background var(--m-fast) var(--ease-soft), color var(--m-fast) var(--ease-soft);
}
.mobnav__link svg { width: 19px; height: 19px; flex: none; stroke-width: 1.5; }
.mobnav__link.is-active { color: var(--charcoal); background: color-mix(in srgb, var(--taupe) 30%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .hambtn span, .mobnav__backdrop, .mobnav__panel { transition: none; }
}

/* video de bienvenida, versión fija en Perfil (siempre disponible) */
.perfilvideo { padding: 0; overflow: hidden; }
.perfilvideo__body { padding: var(--s-6) var(--s-6) var(--s-5); }
.perfilvideo__frame { position: relative; padding-top: 56.25%; background: #000; }
.perfilvideo__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* popup del video de bienvenida (1ª y 2ª vez que entra a la app) */
.videopopup { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s-5); }
.videopopup__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--charcoal) 62%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.videopopup__panel {
  position: relative;
  width: min(720px, 100%);
  border-radius: 20px;
  overflow: hidden;
  background: var(--charcoal);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-floating);
  animation: se-video-in var(--m-normal) var(--ease-expand);
}
.videopopup__close {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: color-mix(in srgb, var(--charcoal) 55%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid color-mix(in srgb, #fff 32%, transparent);
  box-shadow: var(--sh-soft);
}
.videopopup__close svg { width: 17px; height: 17px; }
.videopopup__frame { position: relative; padding-top: 56.25%; background: #000; }
.videopopup__frame iframe { position: absolute; inset: 0; top: 0; width: 100%; height: 100%; border: 0; }
@keyframes se-video-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .videopopup__panel { animation: none; }
}

/* ---------- 24b. HOLOGRAMA DE FRECUENCIA (popup al reproducir audio) --- */
.freqholo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s-5); }
.freqholo__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--charcoal) 74%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.freqholo__panel {
  position: relative;
  width: min(420px, 100%);
  padding: var(--s-8) var(--s-6) var(--s-6);
  border-radius: var(--r-hero);
  background: radial-gradient(120% 100% at 50% -10%, color-mix(in srgb, var(--meniscus) 16%, var(--charcoal)) 0%, var(--charcoal) 62%);
  border: 1px solid color-mix(in srgb, var(--meniscus) 30%, transparent);
  box-shadow: var(--sh-floating);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  animation: se-video-in var(--m-normal) var(--ease-expand);
}
.freqholo__close {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2;
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: color-mix(in srgb, var(--charcoal) 55%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid color-mix(in srgb, #fff 32%, transparent);
  box-shadow: var(--sh-soft); cursor: pointer;
}
.freqholo__close svg { width: 17px; height: 17px; }
.freqholo__stage { position: relative; width: 100%; aspect-ratio: 1; max-width: 300px; }
.freqholo__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.freqholo__num {
  font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--meniscus) 85%, #fff); margin-top: var(--s-4);
}
.freqholo__t {
  font-family: var(--font-display); font-size: 1.4rem; color: #fff;
  margin: 6px 0 4px; text-transform: uppercase; letter-spacing: 0.01em;
}
.freqholo__tag { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: color-mix(in srgb, #fff 72%, transparent); margin: 0 0 22px; }
.freqholo__toggle {
  width: 56px; height: 56px; border-radius: 50%; flex: none; cursor: pointer;
  display: grid; place-items: center; color: var(--charcoal);
  background: color-mix(in srgb, #fff 92%, var(--meniscus));
  border: 0; box-shadow: var(--sh-soft);
  transition: transform var(--m-fast) var(--ease-expand);
}
.freqholo__toggle:hover { transform: scale(1.06); }
.freqholo__toggle svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) {
  .freqholo__panel { animation: none; }
}

/* ---------- 25. RESPONSIVE -------------------------------- */
@media (max-width: 1080px) {
  :root { --rail-w: 216px; }
}

@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  .shell, .canvas { display: block; width: 100%; max-width: 100%; min-width: 0; margin: 0; }
  .rail { display: none; }
  .hambtn { display: flex; margin-right: auto; }
  .topbar { justify-content: flex-start; }

  .content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: var(--s-8) var(--s-5);
  }
  .content__inner { width: 100%; max-width: 100%; margin: 0; }
  .content__inner > * { max-width: 100%; }
  .grid-2 { grid-template-columns: 1fr; }
  .pagehead { margin-bottom: var(--s-10); }

  .topbar { margin-bottom: var(--s-6); }

  .dayhero { min-height: 420px; }
  .dayhero__strip { padding: var(--s-6) var(--s-6) 0; }
  .dayhero__panel { margin: auto var(--s-4) var(--s-4); padding: var(--s-6); max-width: none; }
  .dayhero__title { font-size: var(--t-h2); }

  .carnetsplit { grid-template-columns: 1fr; gap: var(--s-8); }
  .carnetsplit__card { max-width: 15rem; order: -1; }
  .passcard { padding: var(--s-6); gap: var(--s-3); }
  .passcard .idcard { width: 64%; }

  .grid-sq { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .freq { grid-template-columns: auto 1fr; gap: 6px var(--s-4); }
  .freq-play { width: 58px; height: 58px; }

  .hero { min-height: 380px; flex-direction: column; justify-content: flex-end; }
  .hero__panel {
    margin: var(--s-4);
    width: auto;
    padding: var(--s-6);
  }

  /* meridiano horizontal fijo bajo el encabezado, en pantallas angostas */
  .meridianbar {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: calc(-1 * var(--s-4)) 0 var(--s-8);
    max-width: 100%;
    overflow: hidden;
    background: color-mix(in srgb, var(--ivory) 78%, transparent);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow:
      inset 0 2px 5px color-mix(in srgb, var(--charcoal) 12%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--white) 55%, transparent),
      0 10px 18px -14px color-mix(in srgb, var(--charcoal) 30%, transparent);
  }

  .access { grid-template-columns: 1fr; }
  .access__aside { position: relative; height: auto; min-height: 44vh; order: -1; overflow: hidden; }
  .access__aside-panel { left: var(--s-5); right: auto; bottom: var(--s-6); width: auto; max-width: calc(100% - var(--s-10)); padding: 10px var(--s-5); }
  .access__signature { white-space: normal; }
  .access__form { padding: var(--s-10) var(--s-5, 20px) var(--s-16); }

  .day { grid-template-columns: 2rem 1fr; gap: var(--s-4); }
  .day__state { grid-column: 2; }
}

@media (max-width: 420px) {
  .ceremony__card { padding: var(--s-12) var(--s-8); }
}

/* ================================================================
   25b. LENTE DE VIDRIO — aumento óptico real sobre los iconos
   Chromium refracta el fondo con backdrop-filter: url(#se-lens);
   el resto de navegadores usa el esmerilado del @supports final.
   ================================================================ */

/* base translúcida + esmerilado (todos los navegadores) */
.bell, .snd, .capsule,
.freq-play, .vctrl {
  -webkit-backdrop-filter: blur(7px) saturate(1.6) brightness(1.05);
  backdrop-filter: blur(7px) saturate(1.6) brightness(1.05);
  background: color-mix(in srgb, var(--white) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
}

/* rim especular + sombras de vidrio flotante en los botones redondos */
.bell, .snd, .freq-play, .vctrl {
  box-shadow:
    inset 0 1px 1px color-mix(in srgb, var(--white) 72%, transparent),
    inset 0 -12px 20px -10px color-mix(in srgb, var(--white) 14%, transparent),
    0 2px 6px -1px color-mix(in srgb, var(--charcoal) 16%, transparent),
    0 16px 34px -12px color-mix(in srgb, var(--charcoal) 26%, transparent);
}
.bell::before, .snd::before, .freq-play::before, .vctrl::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(120% 82% at 30% 16%,
    color-mix(in srgb, var(--white) 80%, transparent), transparent 56%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* el play de Frecuencias pasa a vidrio ahumado (mantiene contraste) */
.freq-play {
  background: color-mix(in srgb, var(--charcoal) 32%, transparent);
  color: var(--white);
}
.freq-play svg { position: relative; z-index: 1; }
.player.is-playing .freq-play { background: color-mix(in srgb, var(--meniscus) 40%, transparent); }

/* meridiano: cada nodo es una lente; la actual siempre, el resto al pasar */
.node.is-current {
  -webkit-backdrop-filter: blur(6px) saturate(1.5) brightness(1.05);
  backdrop-filter: blur(6px) saturate(1.5) brightness(1.05);
}
.node.is-available:hover,
.node.is-completed:hover {
  background: color-mix(in srgb, var(--cream) 26%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(1.5) brightness(1.05);
  backdrop-filter: blur(6px) saturate(1.5) brightness(1.05);
  transform: scale(1.12);
}

/* controles de video (MasterClass) */
/* cortina de vidrio sobre un video real (Bunny): se retira al tocar play */
[data-video-cover] { transition: opacity var(--m-normal) var(--ease-soft); }
[data-video-cover].is-hidden { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  [data-video-cover] { transition: none; }
}

.vplayer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s-6), 6vw, var(--s-12));
  z-index: 2;
}
.vctrl {
  position: relative;
  width: 56px; height: 56px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--white);
  cursor: pointer;
  transition: transform var(--m-fast) var(--ease-expand),
              box-shadow var(--m-normal) var(--ease-expand);
}
.vctrl svg { position: relative; z-index: 1; width: 22px; height: 22px; }
.vctrl--play { width: 84px; height: 84px; }
.vctrl--play svg { width: 34px; height: 34px; margin-left: 3px; }
.vctrl.is-playing.vctrl--play svg { margin-left: 0; }
.vctrl:hover { transform: translateY(-2px) scale(1.04); }
.vctrl:active { transform: scale(0.96); }
.vctrl__n {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 500;
  z-index: 1;
}

/* refracción real: solo donde el navegador la soporta */
@supports (backdrop-filter: url("#se-lens")) or (-webkit-backdrop-filter: url("#se-lens")) {
  .bell, .snd, .capsule,
  .freq-play, .vctrl,
  .node.is-current {
    -webkit-backdrop-filter: url("#se-lens") saturate(1.5) brightness(1.04);
    backdrop-filter: url("#se-lens") saturate(1.5) brightness(1.04);
  }
  .vctrl--play {
    -webkit-backdrop-filter: url("#se-lens-lg") saturate(1.55) brightness(1.05);
    backdrop-filter: url("#se-lens-lg") saturate(1.55) brightness(1.05);
  }
  .node.is-available:hover,
  .node.is-completed:hover,
  .node--link:hover {
    -webkit-backdrop-filter: url("#se-lens") saturate(1.5) brightness(1.05);
    backdrop-filter: url("#se-lens") saturate(1.5) brightness(1.05);
  }

  /* menú: la lente aparece al pasar / enfocar / activar — una a la vez */
  .rail__link { position: relative; }
  .rail__link::before {
    content: "";
    position: absolute;
    width: 34px; height: 34px;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.66);
    transition: opacity 0.26s var(--ease-soft), transform 0.26s var(--ease-expand);
    pointer-events: none;
    z-index: 0;
    left: 5px; top: 50%; margin-top: -17px;
  }
  .rail__link:hover::before, .rail__link:focus-visible::before, .rail__link.is-active::before {
    opacity: 1;
    transform: scale(1);
    -webkit-backdrop-filter: url("#se-lens") saturate(1.5) brightness(1.04);
    backdrop-filter: url("#se-lens") saturate(1.5) brightness(1.04);
    border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
    box-shadow:
      inset 0 1px 1px color-mix(in srgb, var(--white) 66%, transparent),
      0 4px 14px -4px color-mix(in srgb, var(--charcoal) 30%, transparent);
  }
  .rail__link svg, .rail__link span { position: relative; z-index: 1; }
}

/* accesibilidad: sin transparencias si el sistema lo pide */
@media (prefers-reduced-transparency: reduce) {
  .bell, .snd, .capsule, .freq-play, .vctrl,
  .rail__link::before,
  .node.is-current, .node:hover {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .bell, .snd, .capsule { background: var(--cream); }
  .freq-play { background: var(--charcoal); }
  .vctrl { background: color-mix(in srgb, var(--charcoal) 82%, transparent); }
}

/* ================================================================
   25c. PROFUNDIDAD + COMPONENTES NUEVOS (carnet wizard, silueta,
   mapa de sueños, visualizador)
   ================================================================ */

/* leve elevación: el glass despega del fondo sin sombra invasiva */
.tile, .card, .navcard, .passcard, .freq2, .reward, .sqcard {
  box-shadow: var(--sh-pop);
}
.freq2 {
  transform: translateY(-1px);
  transition: transform var(--m-normal) var(--ease-expand), box-shadow var(--m-normal) var(--ease-expand);
}
.tile:hover, .card:hover, .navcard:hover, .freq2:hover {
  box-shadow: var(--sh-floating);
  transform: translateY(-3px);
}

/* --- cuestionario del carnet: una pregunta por pantalla --- */
.cwiz { max-width: 40rem; }
.cwiz__bar { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--charcoal) 10%, transparent); overflow: hidden; }
.cwiz__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--taupe), var(--meniscus)); transition: width var(--m-slow) var(--ease-expand); }
.cwiz__step { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.16em; color: var(--text-soft); }
.cwiz__q { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 2vw, 2rem); line-height: 1.15; margin: 8px 0 10px; color: var(--charcoal); }
.cwiz__hint { color: var(--text-soft); font-size: 0.92rem; margin-bottom: 18px; }
.cwiz__inp, .cwiz__ta {
  width: 100%; padding: 14px 16px; background: var(--white);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-input);
}
.cwiz__ta { min-height: 120px; resize: vertical; line-height: 1.6; }
.cwiz__opts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cwiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.cwiz__skip { display: inline-block; margin-top: 14px; font-size: 0.85rem; }

/* --- Día 2: silueta del YO — figura de luz a un lado, campos alineados a cada zona --- */
.sil {
  display: grid;
  grid-template-columns: minmax(160px, 30%) 1fr;
  grid-template-areas: "fig zones" ". act" ". out";
  column-gap: clamp(28px, 5vw, 60px);
  row-gap: 22px;
  align-items: start;
}
.sil__fig {
  grid-area: fig;
  position: sticky; top: 24px;
  /* sin aspect-ratio fijo: se estira (align-self:stretch) para ocupar
     exactamente la altura de "zones" — su fila del grid — en vez de un
     tamaño propio que quedaba desalineado del acordeón de preguntas. El
     SVG interno ya escala con preserveAspectRatio="xMidYMid meet". */
  align-self: stretch;
  min-height: 220px;
  border-radius: var(--r-hero);
  overflow: hidden;
  background:
    radial-gradient(48% 42% at 50% 44%, #FCEFD3 0%, transparent 74%),
    radial-gradient(120% 120% at 50% 24%, #EEE0C4 0%, #DFCBA6 58%, #D2BB93 100%);
  box-shadow: var(--sh-pop);
}
.sil__zones { grid-area: zones; display: flex; flex-direction: column; gap: 18px; padding-left: 6px; }
.sil__act { grid-area: act; }
.sil__out { grid-area: out; }
.sil-rim {
  transform-origin: 200px 300px;
  animation: sil-breathe 8.5s var(--ease-soft) infinite;
  filter: blur(0.4px);
}
.sil-body {
  width: 100%; height: 100%; display: block; overflow: visible;
  filter: saturate(1) brightness(1);
  transition: filter 800ms var(--ease-soft);
  animation: sil-float 11s var(--ease-soft) infinite;
}
@keyframes sil-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.sil-figure, .sil-halo {
  animation: sil-breathe 8.5s var(--ease-soft) infinite;
  transform-origin: 200px 300px;
}
.sil-halo { opacity: 0.72; }
.sil-bloom {
  opacity: 0.44; transform-box: fill-box; transform-origin: center;
  animation: sil-bloom 7.5s var(--ease-soft) infinite;
  transition: opacity 800ms var(--ease-soft);
}
.sil-core {
  opacity: 0.78; transform-box: fill-box; transform-origin: center;
  animation: sil-core 4.6s var(--ease-soft) infinite;
  transition: opacity 800ms var(--ease-soft);
}
.sil-wisp { mix-blend-mode: screen; opacity: 0; animation: sil-wisp 22s ease-in-out infinite; }
.sil-wisp--a { animation-delay: 0s; }
.sil-wisp--b { animation-delay: -7.3s; }
.sil-wisp--c { animation-delay: -14.6s; }
.sil-chakras { mix-blend-mode: screen; }
.sil-chakra {
  transform-box: fill-box; transform-origin: center;
  animation: sil-chakra 3.4s var(--ease-soft) infinite;
}
.sil-chakra:nth-child(1) { animation-delay: 0s; }
.sil-chakra:nth-child(2) { animation-delay: 0.45s; }
.sil-chakra:nth-child(3) { animation-delay: 0.9s; }
.sil-chakra:nth-child(4) { animation-delay: 1.35s; }
.sil-chakra:nth-child(5) { animation-delay: 1.8s; }
@keyframes sil-chakra { 0%, 100% { opacity: 0.35; transform: scale(0.7); } 50% { opacity: 0.9; transform: scale(1.1); } }
.sil__fig:hover .sil-chakra { animation-duration: 2.4s; }
.sil-licks { mix-blend-mode: screen; opacity: 0.5; }
.sil-lick { transform-box: fill-box; transform-origin: 50% 90%; animation: sil-lick 13s ease-in-out infinite; }
.sil-lick--2 { animation-delay: -3.2s; }
.sil-lick--3 { animation-delay: -6.5s; }
.sil-lick--4 { animation-delay: -9.7s; }
.sil__fig:hover .sil-body { filter: saturate(1.16) brightness(1.13); }
.sil__fig:hover .sil-bloom { opacity: 0.85; }
.sil__fig:hover .sil-core { opacity: 1; }
.sil__fig:hover .sil-halo { opacity: 0.82; }
@keyframes sil-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes sil-bloom { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.58; transform: scale(1.045); } }
@keyframes sil-core { 0%, 100% { opacity: 0.66; transform: scale(0.95); } 50% { opacity: 0.95; transform: scale(1.07); } }
@keyframes sil-wisp { 0%, 100% { opacity: 0; } 42% { opacity: 0.5; } 72% { opacity: 0; } }
@keyframes sil-lick {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.32; }
  50% { transform: translateY(-9px) rotate(3deg); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .sil-body, .sil-figure, .sil-halo, .sil-rim, .sil-bloom, .sil-core, .sil-wisp, .sil-lick, .sil-chakra { animation: none !important; }
  .sil-wisp--b { opacity: 0.42; }
  .sil-chakra { opacity: 0.6; }
}
.sil__zone {
  position: relative;
  border-radius: 16px;
  background: color-mix(in srgb, var(--beige) 26%, var(--cream));
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-pop);
}
.sil__zhead {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 16px 18px; background: none; border: none; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
}
.sil__zstatus {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--text-soft); flex: none;
}
.sil__zstatus.is-done { color: var(--meniscus); }
.sil__zchev { flex: none; display: flex; color: var(--stone); transition: transform var(--m-normal) var(--ease-expand); }
.sil__zchev svg { width: 16px; height: 16px; }
.sil__zone.is-open .sil__zchev { transform: rotate(180deg); color: var(--charcoal); }
.sil__zbody { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 18px; }
/* punto luminoso + hilo hacia la figura, para "señalar" cada zona sin taparla */
.sil__zone::before {
  content: ""; position: absolute; left: -6px; top: 24px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--meniscus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--meniscus) 18%, transparent),
              0 0 16px 3px color-mix(in srgb, var(--meniscus) 55%, transparent);
}
.sil__zone::after {
  content: ""; position: absolute; top: 29px; right: 100%;
  width: clamp(18px, 4.5vw, 52px); height: 1px;
  margin-right: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--meniscus) 55%, transparent));
}
.sil__ztitle { font-family: var(--font-display); font-size: 1.05rem; color: var(--charcoal); }
.sil__zq { color: var(--text-soft); font-size: 0.9rem; margin: -2px 0 2px; }
.sil__zq--ayuda { font-size: 0.82rem; }
.sil__ta {
  width: 100%; padding: 12px 14px; font-size: 0.92rem;
  background: var(--white); min-height: 90px; resize: vertical; line-height: 1.55;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-input);
}
.sil__ta:focus { outline: none; border-color: var(--taupe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--taupe) 22%, transparent); }
.sil__reveal {
  font-family: var(--font-display); font-style: italic; font-size: 0.98rem; color: var(--charcoal);
  background: color-mix(in srgb, var(--meniscus) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--meniscus) 30%, transparent);
  border-radius: 14px; padding: 12px 14px; margin: 0;
}
/* chips: ejemplos para inspirar (mente) y opciones de acción a elegir (manos) */
.chiprow { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--hairline-strong);
  background: var(--white); font-size: 0.82rem; color: var(--charcoal);
  transition: background var(--m-fast), border-color var(--m-fast), color var(--m-fast);
}
.chip:hover { border-color: var(--meniscus); }
.chip.is-on { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.chip--ejemplo { border-style: dashed; color: var(--text-soft); }
@media (max-width: 720px) {
  .sil { grid-template-columns: 1fr; grid-template-areas: "fig" "zones" "act" "out"; }
  .sil__fig { position: static; max-width: 260px; min-height: 0; aspect-ratio: 400 / 484; align-self: center; margin-inline: auto; }
  .sil__zones { padding-left: 0; }
  .sil__zone::before { left: 50%; top: -6px; transform: translateX(-50%); }
  .sil__zone::after { display: none; }
}

/* --- pregunta grande de cierre de "El Vacío" (Día 5, Reto extra), entre
   guardar las 4 zonas y ver la recapitulación final ---------------------- */
.bigq { max-width: 40rem; margin: 0 auto; text-align: center; }
.bigq .eyebrow { display: block; margin-bottom: 12px; }
.bigq__q {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 1.05rem + 1.8vw, 1.9rem); line-height: 1.25;
  margin: 0 0 22px; color: var(--charcoal);
}
.bigq__ta {
  width: 100%; padding: 16px 18px; font-size: 1rem; text-align: left;
  background: var(--white); border: 1px solid var(--hairline-strong); border-radius: var(--r-input);
  min-height: 130px; resize: vertical; line-height: 1.6;
}
.bigq__ta:focus { outline: none; border-color: var(--taupe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--taupe) 22%, transparent); }
.bigq .btn { margin-top: 20px; }

/* --- Día 6: contrato de compromiso (3 pasos → contrato firmado) --------- */
:root { --font-firma: "Mrs Saint Delafield", "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; }
.ctr { width: 100%; }
.ctr__steps { display: flex; align-items: center; gap: 10px; list-style: none; padding: 0; margin: 0 0 26px; }
.ctr__step {
  display: flex; align-items: center; gap: 9px; flex: none;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-soft);
}
.ctr__step + .ctr__step::before {
  content: ""; width: clamp(14px, 5vw, 44px); height: 1px; background: var(--hairline-strong); margin-right: 1px;
}
.ctr__step .pasos-step__n { background: transparent; color: var(--text-soft); border: 1px solid var(--hairline-strong); }
.ctr__step .pasos-step__n svg { width: 12px; height: 12px; }
.ctr__step.is-current { color: var(--charcoal); }
.ctr__step.is-current .pasos-step__n,
.ctr__step.is-done .pasos-step__n { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.ctr__step-t { display: none; }
.ctr__step.is-current .ctr__step-t { display: inline; }
@media (min-width: 640px) { .ctr__step-t { display: inline; } }
.ctr__panel .eyebrow { display: block; margin-bottom: 12px; }
.ctr__q {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 1.05rem + 1.8vw, 1.9rem); line-height: 1.25;
  margin: 0 0 8px; color: var(--charcoal); text-wrap: balance;
}
.ctr__ayuda { color: var(--text-soft); font-size: 0.92rem; margin: 0 0 24px; }
.ctr__big {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  padding: 22px 16px; margin-bottom: 18px;
  background: var(--white); border: 1px solid var(--hairline-strong); border-radius: var(--r-input);
}
.ctr__cur, .ctr__unit { font-family: var(--font-mono); color: var(--text-soft); font-size: 1rem; letter-spacing: 0.08em; }
.ctr__cur { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
.ctr__monto-inp, .ctr__num {
  font-family: var(--font-display); font-size: clamp(2.2rem, 1.4rem + 4vw, 3.6rem); line-height: 1.05;
  color: var(--charcoal); font-variant-numeric: tabular-nums;
}
.ctr__monto-inp {
  width: 1ch; min-width: 1ch; max-width: 100%; padding: 0; border: 0; background: transparent; text-align: center;
}
.ctr__monto-inp::placeholder { color: color-mix(in srgb, var(--stone) 45%, transparent); }
.ctr__monto-inp:focus { outline: none; }
.ctr__big:focus-within { border-color: var(--taupe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--taupe) 22%, transparent); }
.ctr__big--plazo { padding-block: 26px; margin-bottom: 10px; }
.ctr__sub { text-align: center; color: var(--text-soft); font-size: 0.92rem; margin: 0 0 18px; min-height: 1.4em; }

/* selector de rango: pista rellena hasta el valor (--p) y perilla de vidrio */
.ctr__range {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 6px; margin: 8px 0 10px; padding: 0; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--charcoal) var(--p, 0%), var(--hairline-strong) var(--p, 0%));
  cursor: pointer;
}
.ctr__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--charcoal); box-shadow: var(--sh-pop); cursor: grab;
}
.ctr__range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--charcoal); box-shadow: var(--sh-pop); cursor: grab;
}
.ctr__range:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 6px; }
.ctr__range.is-untouched { background: var(--hairline-strong); }
.ctr__range.is-untouched::-webkit-slider-thumb { border-color: var(--taupe); }
.ctr__range.is-untouched::-moz-range-thumb { border-color: var(--taupe); }
.ctr__scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-soft); }
.ctr__eq { text-align: center; color: var(--charcoal); font-size: 0.92rem; margin: 20px auto 0; max-width: 32rem; min-height: 1.4em; }
.ctr__ta {
  width: 100%; padding: 16px 18px; font-size: 1rem; line-height: 1.6; min-height: 140px; resize: vertical;
  background: var(--white); border: 1px solid var(--hairline-strong); border-radius: var(--r-input);
}
.ctr__ta:focus { outline: none; border-color: var(--taupe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--taupe) 22%, transparent); }
.ctr__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.ctr__nav .btn:only-child { margin-left: auto; }
.ctr__nav .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* el contrato como documento */
.ctr-doc {
  position: relative; background: var(--white); color: var(--charcoal);
  border: 1px solid var(--hairline-strong); border-radius: 20px; box-shadow: var(--sh-pop);
  padding: clamp(24px, 5vw, 44px);
}
.ctr-doc::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid var(--hairline); border-radius: 14px; pointer-events: none;
}
.ctr-doc .eyebrow { display: block; text-align: center; }
.ctr-doc__t {
  font-family: var(--font-display); font-weight: 400; text-align: center; text-wrap: balance;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem); line-height: 1.2; margin: 10px 0 0;
}
.ctr-doc__t::after {
  content: ""; display: block; width: 56px; height: 1px; margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, var(--meniscus), transparent);
}
.ctr-doc__intro { text-align: center; color: var(--text-soft); font-size: 0.95rem; margin: 18px auto 0; max-width: 30rem; }
.ctr-doc__cl { margin: 26px 0 0; display: grid; gap: 18px; }
.ctr-doc__cl > div { padding-top: 16px; border-top: 1px solid var(--hairline); }
.ctr-doc__cl dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px; }
.ctr-doc__cl dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1.3vw, 1.8rem); line-height: 1.25; font-variant-numeric: tabular-nums; }
.ctr-doc__cl dd small { display: block; font-family: var(--font-body); font-size: 0.85rem; color: var(--text-soft); margin-top: 3px; }
.ctr-doc__cl .ctr-doc__precio { font-style: italic; font-size: clamp(1.1rem, 1rem + 0.8vw, 1.35rem); overflow-wrap: anywhere; }
.ctr-doc__cierre { margin: 26px 0 0; font-size: 0.92rem; color: var(--text-soft); text-align: center; }
.ctr-doc__pie { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-top: 34px; }
.ctr-doc__firma, .ctr-doc__fecha { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ctr-doc__firma-inp {
  width: 100%; min-height: 3rem; padding: 0 4px; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--charcoal);
  font-family: var(--font-firma); font-size: clamp(2rem, 1.5rem + 2.4vw, 2.8rem); line-height: 1.1; color: var(--charcoal);
}
.ctr-doc__firma-inp::placeholder { font-family: var(--font-body); font-size: 0.95rem; color: color-mix(in srgb, var(--stone) 70%, transparent); }
.ctr-doc__firma-inp:focus { outline: none; border-bottom-width: 2px; }
.ctr-doc__firma-inp--fija { display: block; overflow-wrap: anywhere; }
.ctr-doc__fecha-v { font-size: 0.95rem; padding-bottom: 6px; border-bottom: 1px solid var(--hairline-strong); white-space: nowrap; }
.ctr-doc__lbl { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
@media (max-width: 560px) { .ctr-doc__pie { grid-template-columns: 1fr; } }

/* --- Día 4: visualizador de futuro financiero --- */
.vis__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 18px; }
.vis__grid .field span { display: block; font-size: var(--t-small); font-weight: 500; color: var(--charcoal); margin-bottom: 6px; }
.vis__inp { width: 100%; padding: 12px 14px; background: var(--white); border: 1px solid var(--hairline-strong); border-radius: var(--r-input); }
@media (max-width: 560px) { .vis__grid { grid-template-columns: 1fr; } }
.vis__guion {
  margin-top: 22px; padding: clamp(20px, 4vw, 34px);
  border-radius: var(--r-card); background: color-mix(in srgb, var(--cream) 78%, var(--beige));
  border: 1px solid var(--hairline);
  max-height: 420px; overflow-y: auto;
  font-size: 1.02rem; line-height: 1.85; color: var(--text);
}
.vis__guion p { margin: 0 0 14px; }
.vis__guion mark { background: color-mix(in srgb, var(--meniscus) 24%, transparent); color: var(--charcoal); padding: 1px 5px; border-radius: 5px; font-weight: 500; }
.vis__salto { margin-top: 8px; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); }

/* --- Mapa de Diseño de Realidad (Día 2): preguntas + prompt en vivo --- */
.mapa2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
@media (max-width: 860px) { .mapa2col { grid-template-columns: 1fr; } }
.mapa2col__preview { position: sticky; top: var(--s-6); }
@media (max-width: 860px) { .mapa2col__preview { position: static; } }
.mapa2col__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.mapa-upload { padding-top: var(--s-6); border-top: 1px solid var(--hairline); }
.mapaprompt {
  margin: 0;
  padding: clamp(16px, 3vw, 26px);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--cream) 78%, var(--beige));
  border: 1px solid var(--hairline);
  max-height: 60vh;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Reto extra (ej. Día 5): mismo módulo de entrega, marco discreto --- */
.mapa-extra { border-style: dashed; background: color-mix(in srgb, var(--cream) 55%, transparent); }

/* --- Día 9: checklist + manifiesto (El Manifiesto de tu Nueva Realidad) ---
   Los 3 pasos se presentan como una mini-línea de tiempo: insignias
   circulares unidas por un hilo vertical, cuyo check se "dibuja" al
   entrar (stroke-dasharray), en cascada. El manifiesto va en una tarjeta
   tipo carta, con comilla editorial y filo dorado — mismo lenguaje que
   el resto de la app (glass cálido + serif itálica de acento).          */
.manif-check {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
}
.manif-check::before {
  content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 1px;
  background: var(--hairline-strong);
}
.manif-step {
  display: flex; align-items: flex-start; gap: 14px; position: relative;
  opacity: 0; transform: translateY(10px);
  animation: manif-rise var(--m-slow) var(--ease-expand) forwards;
  animation-delay: var(--d, 0ms);
}
.manif-step__badge {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--charcoal); box-shadow: 0 0 0 4px var(--cream);
}
.manif-step__check { width: 14px; height: 14px; color: var(--cream); }
.manif-step__check path {
  stroke-dasharray: 24; stroke-dashoffset: 24;
  animation: manif-draw 480ms var(--ease-expand) forwards;
  animation-delay: calc(var(--d, 0ms) + 320ms);
}
.manif-step__t { padding-top: 4px; line-height: 1.55; color: var(--text); }
@keyframes manif-rise { to { opacity: 1; transform: none; } }
@keyframes manif-draw { to { stroke-dashoffset: 0; } }

.manif-quote {
  position: relative; margin-top: 14px; overflow: hidden;
  padding: clamp(30px, 4vw, 40px) clamp(26px, 4vw, 36px) clamp(24px, 3vw, 30px);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--cream) 78%, var(--beige));
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--meniscus);
}
.manif-quote__mark {
  position: absolute; top: -6px; left: 20px;
  font-family: var(--font-display); font-size: 4.2rem; line-height: 1;
  color: color-mix(in srgb, var(--meniscus) 45%, transparent);
  pointer-events: none;
}
.manif-quote__t {
  position: relative; margin: 0; padding-left: 4px;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.1rem; line-height: 1.8; color: var(--charcoal);
}
@media (prefers-reduced-motion: reduce) {
  .manif-step { opacity: 1; transform: none; animation: none; }
  .manif-step__check path { stroke-dashoffset: 0; animation: none; }
}

/* --- Comentarios de estudiantes (debajo de cada reto) --- */
.coments { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.coments__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.coments__head .link-quiet { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.coments__head .link-quiet svg { width: 15px; height: 15px; }
.coments__new { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 24px; }
.coments__ta {
  flex: 1; padding: 12px 15px; background: var(--white);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-input);
  resize: vertical; min-height: 46px; line-height: 1.55;
}
.coments__new .btn { flex: none; }
.coments__list { display: flex; flex-direction: column; gap: 4px; }
.coment {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px;
  padding: 18px 0; border-top: 1px solid var(--hairline);
}
.coment:first-child { border-top: 0; }
.coment__av {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--charcoal);
  background: color-mix(in srgb, var(--beige) 55%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
}
.coment--propio .coment__av { background: color-mix(in srgb, var(--meniscus) 26%, var(--cream)); }
.coment__meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.coment__meta b { font-weight: 600; color: var(--charcoal); }
.coment__meta span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-soft); }
.coment__text p { margin: 0 0 8px; color: var(--text); line-height: 1.6; }
.coment__text p:last-child { margin-bottom: 0; }
.coment__actions { display: flex; align-items: center; gap: 20px; margin-top: 12px; }
.coment__like {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--charcoal) 4%, transparent);
  border: 1px solid transparent;
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-soft);
  transition: color var(--m-fast) var(--ease-soft), background var(--m-fast) var(--ease-soft), transform var(--m-fast) var(--ease-expand);
}
.coment__like svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.coment__like:hover { color: var(--charcoal); }
.coment__like:active { transform: scale(0.94); }
.coment__like.is-liked { color: var(--meniscus); background: color-mix(in srgb, var(--meniscus) 12%, transparent); }
.coment__like.is-liked svg { fill: var(--meniscus); stroke: var(--meniscus); }
.coment__reply { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-soft); }
.coment__reply:hover { color: var(--charcoal); }

/* respuesta de Andrea, anidada dentro del propio comentario del estudiante
   (se revela al tocar "Responder", ver data-hasanswer/data-answer) */
.coment__answer { display: flex; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--hairline); }
.coment__answer-av {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 0.85rem; color: var(--cream);
  background: var(--charcoal);
}
.coment__answer-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.coment__answer-meta b { font-weight: 600; color: var(--charcoal); }
.coment__answer-meta span {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--meniscus);
}
.coment__answer-text { color: var(--text); line-height: 1.6; font-size: 0.94rem; }
@media (max-width: 520px) {
  .coments__new { flex-direction: column; align-items: stretch; }
  .coment { grid-template-columns: 36px 1fr; gap: 11px; }
  .coment__av { width: 36px; height: 36px; font-size: 0.9rem; }
}

/* ================================================================
   25d. PLANIFICADOR TÁCTICO — dashboard tipo calendario
   ================================================================ */
.plan-dash { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 28px); align-items: start; }
@media (min-width: 960px) { .plan-dash { grid-template-columns: 1.6fr 1fr; } }
.plan-dash__main, .plan-dash__side { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 24px); }

/* enfoque del día — mantra */
.plan-enfoque__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-enfoque__tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--meniscus) 70%, var(--charcoal));
}
.plan-enfoque__tag svg { width: 14px; height: 14px; }
.plan-enfoque__frase {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.5rem); line-height: 1.35;
  color: var(--charcoal); margin: 16px 0 0; text-wrap: balance;
}

/* tareas de hoy — checklist plano */
.plan-tareas__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-tareas__count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-soft); }
.plan-tareas__bar { height: 6px; border-radius: var(--r-pill); background: var(--hairline); margin: 12px 0 18px; overflow: hidden; }
.plan-tareas__bar i { display: block; height: 100%; background: var(--meniscus); border-radius: inherit; transition: width var(--m-normal) var(--ease-expand); }
.plan-tareas__list { display: flex; flex-direction: column; gap: 8px; }

.plan-task {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 14px;
  background: var(--cream); border: 1px solid var(--hairline);
  transition: transform var(--m-fast) var(--ease-expand), box-shadow var(--m-fast) var(--ease-expand), background var(--m-fast);
}
button.plan-task { cursor: pointer; }
button.plan-task:hover { transform: translateY(-1px); box-shadow: var(--sh-soft); }
.plan-task__check {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cream);
  border: 1.5px solid var(--hairline-strong); background: var(--white);
  transition: background var(--m-fast), border-color var(--m-fast);
}
.plan-task__check svg { width: 15px; height: 15px; }
.plan-task__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.plan-task__body b { font-weight: 600; color: var(--charcoal); font-size: 0.95rem; }
.plan-task__body span { font-size: 0.8rem; color: var(--text-soft); }
.plan-task__meta { flex: none; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--stone); white-space: nowrap; }
.plan-task__go svg, .plan-task__del svg { width: 16px; height: 16px; color: var(--stone); flex: none; }
.plan-task__del { flex: none; padding: 4px; border-radius: 50%; }
.plan-task__del:hover { background: color-mix(in srgb, var(--charcoal) 8%, transparent); }
.plan-task.is-done { background: color-mix(in srgb, var(--meniscus) 8%, var(--cream)); }
.plan-task.is-done .plan-task__check { background: var(--meniscus); border-color: var(--meniscus); }
.plan-task.is-done .plan-task__body b { color: var(--text-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-soft) 50%, transparent); }
.plan-task--reto .plan-task__body, .plan-task--extra .plan-task__body { cursor: pointer; }

.plan-tareas__add { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--hairline); }
.plan-tareas__input {
  flex: 1; padding: 10px 14px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--hairline-strong); font-size: 0.9rem;
}
.plan-tareas__input:focus { outline: none; border-color: var(--taupe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--taupe) 22%, transparent); }
.plan-tareas__addbtn {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--charcoal); color: var(--cream);
  transition: transform var(--m-fast) var(--ease-expand);
}
.plan-tareas__addbtn:hover { transform: scale(1.06); }
.plan-tareas__addbtn svg { width: 18px; height: 18px; }

.plan-more__t { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 12px; }

/* calendario del mes */
.plan-cal__hd { font-family: var(--font-display); font-size: 1.05rem; color: var(--charcoal); margin-bottom: 12px; }
.plan-cal__wd, .plan-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.plan-cal__wd span { text-align: center; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--text-soft); padding-bottom: 6px; }
.plan-cal__grid { row-gap: 4px; }
.plan-cal__cell {
  position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; color: var(--charcoal); border-radius: 50%;
}
.plan-cal__cell.is-hoy { background: var(--charcoal); color: var(--cream); font-weight: 600; }
.plan-cal__dot { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--hairline-strong); }
.plan-cal__cell.dot-done .plan-cal__dot { background: var(--meniscus); }
.plan-cal__cell.dot-now .plan-cal__dot { background: var(--charcoal); }
.plan-cal__cell.is-hoy.dot-now .plan-cal__dot { background: var(--cream); }
.plan-cal__cell.dot-miss .plan-cal__dot { background: transparent; border: 1px solid var(--text-soft); }

/* mi progreso — donas */
.plan-progreso__hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.plan-donut__row { display: flex; justify-content: space-between; gap: 8px; }
.plan-donut__item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.plan-donut__wrap { position: relative; width: 64px; height: 64px; }
.plan-donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.plan-donut__track { fill: none; stroke: var(--hairline); stroke-width: 5; }
.plan-donut__fill { fill: none; stroke: var(--meniscus); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset var(--m-slow) var(--ease-expand); }
.plan-donut__pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--charcoal);
}
.plan-donut__lbl { font-size: 0.72rem; text-align: center; color: var(--text-soft); line-height: 1.3; }

/* tarjeta con imagen + frase motivacional */
.plan-motiv {
  position: relative; display: flex; min-height: 200px; border-radius: var(--r-card);
  overflow: hidden; isolation: isolate; box-shadow: var(--sh-glass);
}
.plan-motiv .photo { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.plan-motiv::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, color-mix(in srgb, var(--charcoal) 65%, transparent), transparent 60%);
}
.plan-motiv__panel { position: relative; z-index: 2; margin-top: auto; padding: var(--s-6); }
.plan-motiv__frase {
  font-family: var(--font-display); font-style: italic; color: var(--cream);
  font-size: 1.05rem; line-height: 1.4; text-wrap: balance; margin: 0;
  text-shadow: 0 1px 8px color-mix(in srgb, #000 35%, transparent);
}


.plan-count { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 6px; }
.plan-count b { font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 3vw, 3.2rem); line-height: 1; color: var(--charcoal); }
.plan-count span { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); }
.plan-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-stat {
  padding: 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--beige) 30%, var(--cream)); border: 1px solid var(--hairline);
}
.plan-stat b { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--charcoal); }
.plan-stat span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.plan-stats--cierre { grid-template-columns: repeat(3, 1fr); margin: 8px 0 30px; }
.plan-cierre { max-width: 40rem; }
.plan-refl { margin-top: 8px; }
.plan-refl__q { font-family: var(--font-display); font-size: 1.3rem; color: var(--charcoal); margin: 10px 0 12px; }
.plan-refl textarea, .plan-final textarea {
  width: 100%; min-height: 96px; padding: 14px 16px; line-height: 1.6; resize: vertical;
  background: var(--white); border: 1px solid var(--hairline-strong); border-radius: var(--r-input);
}
.plan-cierre__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.plan-final { max-width: 40rem; }
.plan-final .field span { display: block; font-size: var(--t-small); font-weight: 500; color: var(--charcoal); margin-bottom: 6px; }

/* ---------- 25e. TIMELINE DEL PASAPORTE + GPS DE TUS SUEÑOS ---------- */

/* cuestionario del pasaporte: barra -> timeline de pasos */
.cwiz-tl {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 4px; height: 18px; margin-top: 4px;
}
.cwiz-tl__track, .cwiz-tl__fill {
  position: absolute; left: 5px; right: 5px; top: 50%; height: 2px; transform: translateY(-50%);
  border-radius: 999px;
}
.cwiz-tl__track { background: color-mix(in srgb, var(--charcoal) 12%, transparent); right: 5px; }
.cwiz-tl__fill {
  right: auto; background: linear-gradient(90deg, var(--taupe), var(--meniscus));
  transition: width var(--m-slow) var(--ease-expand);
}
.cwiz-tl__node {
  position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--cream); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--charcoal) 20%, transparent);
  transition: background var(--m-normal), box-shadow var(--m-normal), transform var(--m-normal);
}
.cwiz-tl__node.is-done { background: var(--meniscus); box-shadow: 0 0 0 1.5px var(--meniscus); }
.cwiz-tl__node.is-now {
  background: var(--charcoal); box-shadow: 0 0 0 2px var(--charcoal), 0 0 0 5px color-mix(in srgb, var(--meniscus) 26%, transparent);
  transform: scale(1.15);
}

/* --- "Tu Punto A" : lectura del cuestionario de reconocimiento (Día 1) -- */
.puntoa { max-width: 40rem; }
.puntoa--ancho { max-width: 54rem; }
.puntoa__block { margin-top: 20px; }
.puntoa__block:first-of-type { margin-top: 12px; }
.puntoa__block h4 {
  font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-soft); font-weight: 500; margin: 0 0 6px;
}
.puntoa__block p { color: var(--charcoal); line-height: 1.6; margin: 0; }
.puntoa__block p + p { margin-top: 10px; }
.puntoa__block--patron {
  padding: 14px 16px; border-radius: var(--r-card);
  background: color-mix(in srgb, var(--meniscus) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--meniscus) 30%, transparent);
}
.puntoa__block--patron p { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; }
/* variante para lecturas más largas (varias frases): mismo tinte, sin subir a tamaño de titular */
.puntoa__block--lectura {
  padding: 14px 16px; border-radius: var(--r-card);
  background: color-mix(in srgb, var(--meniscus) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--meniscus) 30%, transparent);
}
.puntoa__banner {
  margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--hairline);
  color: var(--text-soft); font-size: 0.92rem;
}

/* --- comparación frente a frente (Día 4: realidad vs. deseo) ----------- */
.comparativa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin: 4px 0 4px;
}
.comparativa--gap { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.comparativa__col {
  padding: 16px 18px;
  border-radius: var(--r-input);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--stone) 10%, var(--cream));
}
.comparativa__col--deseo {
  background: color-mix(in srgb, var(--meniscus) 12%, var(--cream));
  border-color: color-mix(in srgb, var(--meniscus) 28%, transparent);
}
.comparativa__label {
  display: block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft);
  margin-bottom: 8px;
}
.comparativa__txt {
  margin: 0; color: var(--charcoal); font-family: var(--font-display);
  font-style: italic; font-size: 1.02rem; line-height: 1.45;
}
.comparativa__gap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 0 6px; text-align: center;
}
.comparativa__gap-eyebrow {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-soft);
}
.comparativa__gap-badge {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: 12rem; padding: 9px 14px; border-radius: var(--r-input); white-space: normal;
  background: var(--charcoal); color: var(--cream);
  font-family: var(--font-display); font-style: italic; font-size: 0.88rem; line-height: 1.3;
}
@media (max-width: 640px) {
  .comparativa, .comparativa--gap { grid-template-columns: 1fr; }
  .comparativa__gap { padding: 2px 0; }
}

/* --- indicador SER · HACER · TENER (cierre del Día 4) ------------------ */
.serhacer { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: 20px; }
.serhacer__step {
  flex: 1 1 150px;
  padding: 14px 16px;
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--cream) 60%, transparent);
  border: 1px solid var(--hairline);
}
.serhacer__step b {
  display: block; font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--meniscus);
  margin-bottom: 6px;
}
.serhacer__step p { margin: 0; color: var(--charcoal); font-size: 0.92rem; line-height: 1.4; }

/* --- Reprogramador Mental (premio) -------------------------------------- */
.reprog-form { max-width: 40rem; margin-bottom: 24px; }
.reprog { max-width: 40rem; }
.reprog__quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); line-height: 1.3;
  color: color-mix(in srgb, var(--meniscus) 70%, var(--charcoal)); margin: 10px 0 20px;
}

/* --- GPS de sueños : sistema de navegación personal --------------------- */

/* ---- pantalla de entrada — relato + instrumento en vivo + cita + pasos -- */
.gps-entrada { width: 100%; padding: clamp(8px, 2vw, 28px) 0; }
.gps-entrada__top {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.gps-entrada__col--text { max-width: 30rem; }
/* titular en dos niveles: línea firme (h1) + línea de apoyo, más pequeña e
   itálica — antes ambas líneas heredaban el tamaño de .display (5.4rem),
   lo que aplastaba la jerarquía y desbalanceaba la columna. */
.gps-entrada__t {
  margin: 16px 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--charcoal); text-wrap: balance;
}
.gps-entrada__t2 {
  display: block; margin-top: 8px;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); line-height: 1.15;
  color: var(--text-soft); font-style: italic;
}
.gps-entrada__txt { margin: 20px 0 24px; color: var(--charcoal); max-width: 34ch; }
.gps-entrada .btn { margin-top: 2px; }
.gps-entrada__time {
  display: flex; align-items: center; gap: 7px; margin: 16px 0 0;
  font-size: 0.86rem; color: var(--text-soft);
}
.gps-entrada__time svg { width: 15px; height: 15px; color: var(--meniscus); }

.gps-entrada__col--visual { display: flex; align-items: center; justify-content: center; }
.gps-entrada__stagewrap { position: relative; width: min(400px, 94%); aspect-ratio: 1 / 1; margin: 0 auto; }
.gps-entrada__stage {
  position: absolute; inset: 11%;
  filter: drop-shadow(0 18px 34px color-mix(in srgb, var(--charcoal) 10%, transparent));
}
.gps-entrada__stage svg { width: 100%; height: 100%; overflow: visible; }
.gps-entrada__node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 62px; text-align: center;
}
.gps-entrada__nodeic {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--charcoal);
  background: var(--cream); border: 1px solid var(--hairline-strong);
  box-shadow: var(--sh-soft);
}
.gps-entrada__nodeic svg { width: 16px; height: 16px; }
.gps-entrada__nodelbl { font-size: 0.68rem; color: var(--text-soft); line-height: 1.2; }
@media (prefers-reduced-motion: no-preference) {
  .gps-entrada__node { animation: gpsFade 0.5s ease both; animation-delay: calc(0.9s + var(--i) * 0.07s); }
}

/* 3 pasos — cómo funciona */
.gps-entrada__pasos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 28px);
  margin-top: clamp(36px, 5vw, 52px); padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--hairline);
}
.gps-entrada__paso { display: flex; align-items: flex-start; gap: 14px; }
.gps-entrada__pasoico {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: var(--charcoal);
  background: color-mix(in srgb, var(--beige) 45%, var(--cream));
}
.gps-entrada__pasoico svg { width: 19px; height: 19px; }
.gps-entrada__paso b { display: block; font-weight: 600; color: var(--charcoal); font-size: 0.98rem; margin-bottom: 3px; }
.gps-entrada__paso p { font-size: 0.86rem; color: var(--text-soft); line-height: 1.4; margin: 0; }

@media (max-width: 860px) {
  .gps-entrada__top { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .gps-entrada__col--text { max-width: 34rem; margin: 0 auto; }
  .gps-entrada__col--visual { order: -1; }
  .gps-entrada__txt { max-width: 34ch; margin-inline: auto; }
  .gps-entrada__time { justify-content: center; }
  .gps-entrada__pasos { grid-template-columns: 1fr; }
  .gps-entrada__paso { text-align: left; }
}
@media (max-width: 480px) {
  .gps-entrada__nodelbl { display: none; }
}

.gps-stage__ring  { fill: none; stroke: var(--hairline-strong); }
.gps-stage__ring--1, .gps-stage__ring--0 { stroke-dasharray: 2 7; stroke-linecap: round; }
.gps-stage__spoke { stroke: var(--hairline); }
.gps-stage__node  { fill: var(--cream); stroke: var(--meniscus); stroke-width: 1.5; }
.gps-stage__hub   { fill: var(--charcoal); }
.gps-stage__sweepEdge { stroke: color-mix(in srgb, var(--meniscus) 70%, transparent); stroke-width: 1; }

/* revelación de entrada (una vez) → el instrumento queda vivo para siempre */
@media (prefers-reduced-motion: no-preference) {
  .gps-stage__hub, .gps-stage__node {
    transform-box: fill-box; transform-origin: center;
  }
  .gps-stage__ring {
    transform-box: fill-box; transform-origin: center;
    animation: gpsRing 0.7s var(--ease-expand) both;
    animation-delay: calc(var(--i) * 0.12s);
  }
  .gps-stage__ring--0 { animation: gpsRing 0.7s var(--ease-expand) both, gpsSpin 34s linear infinite reverse; animation-delay: 0s, 0.9s; }
  .gps-stage__ring--1 { animation: gpsRing 0.7s var(--ease-expand) both, gpsSpin 52s linear infinite; animation-delay: 0.12s, 0.9s; }
  .gps-stage__hub {
    animation: gpsPop 0.5s var(--ease-expand) both, gpsBreathe 2.6s ease-in-out infinite;
    animation-delay: 0.42s, 0.9s;
  }
  .gps-stage__spoke { animation: gpsFade 0.5s ease both; animation-delay: calc(0.62s + var(--i) * 0.07s); }
  .gps-stage__node {
    animation: gpsPop 0.55s var(--ease-expand) both, gpsNodePulse 3.4s ease-in-out infinite;
    animation-delay: calc(0.72s + var(--i) * 0.08s), calc(1.3s + var(--i) * 0.32s);
  }
  .gps-stage__sweep {
    transform-origin: 120px 120px;
    animation: gpsFade 0.6s ease both, gpsSpin 6.5s linear infinite;
    animation-delay: 0.95s, 1.55s;
  }
}
@keyframes gpsRing    { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes gpsPop     { from { opacity: 0; transform: scale(0); }   to { opacity: 1; transform: scale(1); } }
@keyframes gpsFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes gpsSpin    { to { transform: rotate(360deg); } }
@keyframes gpsBreathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 color-mix(in srgb, var(--meniscus) 0%, transparent)); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--meniscus) 55%, transparent)); }
}
@keyframes gpsNodePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.22); opacity: 0.72; }
}

/* ---- el mapa abstracto ----------------------------------------------- */
.gps-map {
  position: relative; width: 100%; max-width: min(570px, 100%);
  margin: 26px auto; aspect-ratio: 1 / 1;
}
.gps-map__grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gps-map__grid circle { fill: none; stroke: var(--hairline); }
.gps-map__grid line { stroke: var(--hairline); }
.gps-map__spoke { stroke: var(--hairline); stroke-dasharray: 2 5; opacity: 0.55; }
.gps-map__spoke.is-pos { stroke: var(--hairline-strong); stroke-dasharray: none; opacity: 0.8; }
.gps-map__spoke.is-rumbo { stroke: var(--meniscus); stroke-dasharray: none; opacity: 0.55; }

/* marcador de "hoy" sobre el radio, entre el centro y el destino */
.gps-map__marker { fill: var(--charcoal); stroke: var(--ivory); stroke-width: 2; }
.gps-map__marker.is-rumbo { fill: var(--meniscus); }

/* dibujo cinematográfico al revelar la ruta: anillos → hub → radios → nodos */
@media (prefers-reduced-motion: no-preference) {
  .gps-map.is-anim .gps-map__grid circle {
    transform-box: fill-box; transform-origin: center;
    animation: gpsRing 0.6s var(--ease-expand) both; animation-delay: calc(var(--i) * 0.1s);
  }
  .gps-map.is-anim .gps-map__cross { animation: gpsFade 0.5s ease both; animation-delay: 0.28s; }
  .gps-map.is-anim .gps-map__hub {
    transform-box: fill-box; transform-origin: center;
    animation: gpsPop 0.5s var(--ease-expand) both; animation-delay: 0.34s;
  }
  .gps-map.is-anim .gps-map__spoke {
    animation: gpsFade 0.55s ease both; animation-delay: calc(0.46s + var(--i) * 0.08s);
  }
  .gps-map.is-anim .gps-map__node {
    animation: gpsFade 0.5s ease both; animation-delay: calc(0.56s + var(--i) * 0.09s);
  }
  .gps-map.is-anim .gps-map__marker {
    transform-box: fill-box; transform-origin: center;
    animation: gpsPop 0.4s var(--ease-expand) both; animation-delay: calc(0.62s + var(--i) * 0.09s);
  }
  .gps-map.is-anim .gps-map__ico {
    animation: gpsPop 0.5s var(--ease-expand) both; animation-delay: calc(0.56s + var(--i) * 0.09s);
  }
}

.gps-map__node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 84px; text-decoration: none;
}
.gps-map__ico {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cream); border: 1px solid var(--hairline-strong); color: var(--stone);
  transition: transform var(--m-fast) var(--ease-soft), box-shadow var(--m-fast), border-color var(--m-fast), color var(--m-fast);
}
.gps-map__ico svg { width: 23px; height: 23px; }
.gps-map__name { font-size: 0.85rem; color: var(--text-soft); text-align: center; line-height: 1.2; }
a.gps-map__node:hover .gps-map__ico,
a.gps-map__node:focus-visible .gps-map__ico { transform: scale(1.07); }
a.gps-map__node:focus-visible { outline: none; }
a.gps-map__node:focus-visible .gps-map__ico { box-shadow: 0 0 0 3px color-mix(in srgb, var(--charcoal) 30%, transparent); }

.gps-map__node.is-sin .gps-map__ico { border-style: dashed; opacity: 0.6; }
.gps-map__node.is-pos .gps-map__ico { border-color: var(--charcoal); color: var(--charcoal); }
.gps-map__node.is-rumbo .gps-map__ico {
  border-color: var(--meniscus); color: color-mix(in srgb, var(--meniscus) 82%, var(--charcoal));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--meniscus) 16%, transparent);
}
.gps-map__node.is-rumbo .gps-map__name { color: var(--charcoal); }

/* el punto vive en el centro geométrico exacto del cuadro — se posiciona
   solo (left/top 50%, sin envolver la etiqueta), porque centrar el grupo
   punto+etiqueta como bloque corría el punto hacia arriba del centro real
   (el alto de la etiqueta desplazaba el punto medio del conjunto). La
   etiqueta ahora cuelga debajo, anclada aparte, sin mover el punto. */
.gps-map__hub { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gps-map__hubdot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%; background: var(--charcoal);
  box-shadow: 0 0 0 5px var(--ivory), 0 0 0 7px color-mix(in srgb, var(--charcoal) 24%, transparent);
}
.gps-map__hublbl {
  position: absolute; left: 50%; top: calc(50% + 19px); transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--charcoal);
}
@media (max-width: 400px) {
  .gps-map { max-width: 320px; }
  .gps-map__node { width: 62px; }
  .gps-map__ico { width: 44px; height: 44px; }
  .gps-map__ico svg { width: 18px; height: 18px; }
  .gps-map__name { display: none; }
}

/* fila del mapa: gráfico a la izquierda, tarjeta de vidrio con la
   leyenda de estados a la derecha — se apila en una sola columna en
   pantallas angostas. */
.gps-mapa-row {
  display: grid; grid-template-columns: 1.8fr 1fr; gap: 20px;
  align-items: center; margin: 20px 0 4px;
}
.gps-mapa-row .gps-map { margin: 0; }
@media (max-width: 760px) {
  .gps-mapa-row { grid-template-columns: 1fr; }
}
.gps-legend-card {
  padding: var(--s-4); display: flex; flex-direction: column; gap: 10px;
  justify-content: center;
}
.gps-legend-card__intro { font-size: 0.8rem; color: var(--text-soft); line-height: 1.4; margin: 0; }
.gps-legend-card__list { display: flex; flex-direction: column; gap: 9px; }
.gps-legend-item { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; font-weight: 500; color: var(--charcoal); }
.gps-legend-item i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--cream); border: 2px solid var(--hairline-strong);
}
.gps-legend-item.is-sin i { border-style: dashed; opacity: 0.6; }
.gps-legend-item.is-pos i { background: var(--charcoal); border-color: var(--charcoal); }
.gps-legend-item.is-rumbo i { background: var(--meniscus); border-color: var(--meniscus); }

.gps-moved { color: color-mix(in srgb, var(--meniscus) 80%, var(--charcoal)); }

.gps-note {
  border: 1px solid var(--hairline-strong); border-left: 3px solid var(--meniscus);
  border-radius: var(--r-card); background: var(--cream); padding: 18px 20px;
  margin: 22px 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.gps-note p { margin: 0; color: var(--charcoal); }

/* ---- revelación de la ruta: un mini-instrumento por área --------- */
.gps-route { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.gps-route__row { display: block; text-decoration: none; }
.gps-route__area {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stone);
}
.gps-route__row:hover .gps-inst--mini { border-color: var(--hairline-strong); }

/* instrumento compacto (ruta) */
.gps-inst--mini {
  padding: 16px 18px; margin: 0; border-radius: var(--r-card);
  background: var(--cream); box-shadow: none;
  transition: border-color var(--m-fast);
}
.gps-inst--mini .gps-inst__track { height: 28px; margin: 0 0 6px; }
.gps-inst--mini .gps-inst__end b { font-size: 0.94rem; }

/* ---- configuración: un área a la vez (posición + destino) -------- */
.gps-wiz .cwiz__step { text-transform: none; letter-spacing: 0.08em; }
.gps-wiz__ctrl { margin-top: 16px; display: flex; flex-direction: column; gap: 22px; }
.gps-wiz__blk { display: flex; flex-direction: column; gap: 8px; }
.gps-wiz__blk.is-dest {
  padding: 16px 0 2px; border-top: 1px solid var(--hairline);
}
.gps-wiz__blk.is-dest > .eyebrow { color: color-mix(in srgb, var(--meniscus) 80%, var(--charcoal)); }
.gps-wiz__sub { margin: 0 0 4px; color: var(--charcoal); line-height: 1.4; }

/* escala 1–10 */
.gps-scale__cap {
  margin: 0 0 8px; font-size: 0.78rem; color: var(--text-soft);
}
.gps-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.gps-scale__b {
  flex: 1 1 calc(20% - 6px); min-width: 40px; padding: 12px 0; border-radius: 12px;
  border: 1px solid var(--hairline-strong); background: var(--white);
  font-family: var(--font-mono); font-size: 0.92rem; color: var(--stone); cursor: pointer;
  transition: background var(--m-fast), color var(--m-fast), border-color var(--m-fast);
}
.gps-scale__b:hover { border-color: var(--meniscus); }
.gps-scale__b.is-on { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.gps-scale__ends {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 7px;
  font-size: 0.68rem; letter-spacing: 0.04em; color: var(--stone);
}
.gps-scale__ends span { max-width: 47%; }
.gps-scale__ends span:last-child { text-align: right; }

/* opciones */
.gps-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.gps-chip {
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--hairline-strong);
  background: var(--white); font-size: 0.9rem; color: var(--charcoal); cursor: pointer;
  transition: background var(--m-fast), border-color var(--m-fast), color var(--m-fast);
}
.gps-chip:hover { border-color: var(--meniscus); }
.gps-chip.is-on { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

/* texto */
.gps-tin {
  width: 100%; padding: 13px 15px; background: var(--white);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-input);
  font: inherit; color: var(--charcoal); line-height: 1.5;
}
.gps-tin:focus { outline: none; border-color: var(--meniscus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--meniscus) 14%, transparent); }

/* ---- ficha de área: instrumento hoy ──▶ destino ------------------ */
.gps-inst {
  border: 1px solid var(--hairline); border-radius: var(--r-hero);
  background: color-mix(in srgb, var(--cream) 72%, var(--beige));
  padding: clamp(22px, 4vw, 32px); margin: 24px 0; box-shadow: var(--sh-pop);
}
.gps-inst__track { position: relative; height: 34px; display: flex; align-items: center; margin: 2px 0 8px; }
.gps-inst__a, .gps-inst__b { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; position: relative; z-index: 1; }
.gps-inst__a { background: var(--charcoal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cream) 72%, var(--beige)), 0 0 0 6px color-mix(in srgb, var(--charcoal) 18%, transparent); }
.gps-inst__b { border: 2px solid var(--meniscus); background: transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cream) 72%, var(--beige)), 0 0 0 6px color-mix(in srgb, var(--meniscus) 26%, transparent); }
.gps-inst__line {
  flex: 1 1 auto; height: 2px; margin: 0 6px;
  background: repeating-linear-gradient(90deg, var(--meniscus) 0 7px, transparent 7px 14px); opacity: 0.55;
}
.gps-inst.is-empty .gps-inst__line { opacity: 0.28; }
.gps-inst__pill {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em;
  color: var(--charcoal); background: var(--cream); border: 1px solid var(--hairline);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap; z-index: 2;
}
.gps-inst__ends { display: flex; justify-content: space-between; gap: 18px; }
.gps-inst__end { display: flex; flex-direction: column; gap: 3px; max-width: 46%; }
.gps-inst__end.is-dest { text-align: right; align-items: flex-end; }
.gps-inst__end .eyebrow { font-size: 0.6rem; }
.gps-inst__end b { font-weight: 500; color: var(--charcoal); line-height: 1.3; }
.gps-inst__brecha {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline);
  font-size: 0.92rem; color: var(--text-soft); line-height: 1.5;
}

.gps-edit { display: flex; flex-direction: column; gap: 24px; max-width: 42rem; }
.gps-edit__blk { display: flex; flex-direction: column; gap: 10px; }
.gps-edit__blk .eyebrow { line-height: 1.4; }
.gps-lockednote {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.85rem; max-width: 42rem;
}
.gps-lockednote svg { width: 15px; height: 15px; flex: none; color: var(--stone); }
.gps-plan-link { margin-top: 22px; font-size: 0.92rem; }
.gps-plan-link .link-quiet { display: inline-flex; align-items: center; gap: 4px; }
.gps-plan-link .link-quiet svg { width: 15px; height: 15px; }

/* ---------- 25f. AFIRMACIÓN DEL DÍA (dentro de "Hábitos de hoy") ---- */
/* ---------- 25g. GPS — EL CAMINO (pase 2) --------------------------- */

/* ficha de área: A→B + bloques compactos en <details> */
.gps-more { margin-top: 24px; border-top: 1px solid var(--hairline); }
.gps-more > summary {
  cursor: pointer; padding: 16px 0; font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); list-style: none;
}
.gps-more > summary::-webkit-details-marker { display: none; }
.gps-more > summary::before { content: "+ "; color: var(--meniscus); }
.gps-more[open] > summary::before { content: "– "; }
.gps-blk { padding: 16px 0 20px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 12px; }
.gps-blk__t { font-family: var(--font-display); font-size: 1.05rem; color: var(--charcoal); margin: 0; }

.gps-wp-hint { font-size: 0.85rem; color: var(--text-soft); margin: 0; line-height: 1.5; }
.gps-wp-add { display: flex; gap: 8px; flex-wrap: wrap; }
.gps-wp-add .gps-tin { flex: 1 1 180px; }
.gps-devlines { display: flex; flex-direction: column; gap: 8px; }
.gps-devline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gps-devline__t { font-family: var(--font-mono); font-size: 0.74rem; color: var(--stone); flex: 0 0 auto; }
.gps-devline__opts, .gps-giro-est { display: flex; gap: 6px; flex-wrap: wrap; }
.gps-mini {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hairline-strong);
  background: var(--white); font-size: 0.76rem; color: var(--stone); cursor: pointer;
  transition: background var(--m-fast), color var(--m-fast), border-color var(--m-fast);
}
.gps-mini.is-on { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.gps-giro-est .btn[aria-pressed="true"] { outline: 2px solid var(--meniscus); outline-offset: 2px; }

/* "Tu ruta": tarjeta compacta por área, en carrusel horizontal.
   La respuesta (hoy/destino) ya está fija — la tarjeta solo resume el
   avance de hoy con un número y una barra (sin desglosar hoy/destino);
   entrar a un área no permite modificarla, solo trabajarla a fondo
   (favor / desvíos / cambio / próximo giro). */
.gps-legs { margin-top: 8px; }
.gps-progcard {
  flex: 0 0 clamp(11.5rem, 30vw, 13.5rem); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; border: 1px solid var(--hairline);
  border-radius: 20px; background: var(--cream); padding: 16px;
  transition: border-color var(--m-fast), box-shadow var(--m-fast), transform var(--m-fast);
}
.gps-progcard:hover { border-color: var(--hairline-strong); box-shadow: var(--sh-soft); transform: translateY(-1px); }
.gps-progcard__top { display: flex; align-items: center; justify-content: space-between; }
.gps-progcard__ico {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ivory); border: 1px solid var(--hairline-strong); color: var(--stone);
  transition: border-color var(--m-fast), color var(--m-fast);
}
.gps-progcard__ico svg { width: 18px; height: 18px; }
.gps-progcard.is-pos .gps-progcard__ico { border-color: var(--charcoal); color: var(--charcoal); }
.gps-progcard.is-rumbo .gps-progcard__ico {
  border-color: var(--meniscus); color: color-mix(in srgb, var(--meniscus) 82%, var(--charcoal));
}
.gps-progcard__arrow {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: var(--charcoal);
  border: 1px solid var(--hairline-strong); background: var(--cream);
  transition: transform var(--m-fast) var(--ease-expand), background var(--m-fast), color var(--m-fast), border-color var(--m-fast);
}
.gps-progcard__arrow svg { width: 14px; height: 14px; }
.gps-progcard:hover .gps-progcard__arrow,
.gps-progcard:focus-visible .gps-progcard__arrow {
  background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); transform: translateX(2px);
}
.gps-progcard__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0;
}
.gps-progcard__name {
  font-family: var(--font-display); font-size: 1.02rem; color: var(--charcoal); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gps-progcard__val {
  flex: none;
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; color: var(--charcoal);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
  white-space: nowrap;
}
.gps-progcard__bar {
  display: block; height: 6px; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--charcoal) 10%, transparent);
}
.gps-progcard__bar span { display: block; height: 100%; border-radius: inherit; background: var(--charcoal); }
.gps-progcard.is-rumbo .gps-progcard__bar span { background: var(--meniscus); }
.gps-progcard.is-sin .gps-progcard__bar span { background: var(--hairline-strong); }


/* ---------- 25h. PLANIFICADOR — MOVIMIENTOS TÁCTICOS -------------- */
.plan-mov { margin-top: 28px; }
.plan-mov__sub { font-size: 0.86rem; color: var(--text-soft); margin: 4px 0 14px; line-height: 1.5; }
.plan-mov__empty { font-size: 0.9rem; color: var(--text-soft); }
.plan-mov__card {
  border: 1px solid var(--hairline); border-left: 3px solid var(--meniscus);
  border-radius: var(--r-card); background: var(--cream); padding: 16px 18px; margin-bottom: 12px;
}
.plan-mov__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-mov__area { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
.plan-mov__tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); margin-left: auto; }
.plan-mov__tag.is-doing { color: color-mix(in srgb, var(--meniscus) 80%, var(--charcoal)); }
.plan-mov__tag.is-done { color: color-mix(in srgb, var(--meniscus) 60%, var(--charcoal)); }
.plan-mov__txt { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.3; color: var(--charcoal); margin: 8px 0 12px; }
.plan-mov form { display: flex; flex-direction: column; gap: 10px; }
.plan-mov .field textarea { min-height: 72px; }
.plan-mov__scale { display: flex; flex-direction: column; gap: 6px; }
.plan-mov__scale .eyebrow { font-size: 0.64rem; }
.plan-mov__deltas { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-soft); }
.plan-mov__delta { margin: 10px 0 0; font-size: 0.86rem; color: color-mix(in srgb, var(--meniscus) 78%, var(--charcoal)); line-height: 1.45; }
.plan-mov__learn { margin: 8px 0 0; font-family: var(--font-display); font-size: 1rem; color: var(--charcoal); line-height: 1.4; }

/* ---------- BÓVEDA DE IDEAS (Día 7) ------------------------------------ */
.btn--gold {
  --btn-fg: var(--cream);
  background: linear-gradient(135deg, var(--meniscus), color-mix(in srgb, var(--meniscus) 65%, var(--charcoal)));
  border-color: color-mix(in srgb, var(--meniscus) 60%, transparent);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--meniscus) 55%, transparent), var(--sh-soft);
}

/* --- Botón con palpitación lenta + brillo líquido (CTA de la Masterclass) ---
   Un aro dorado que respira despacio (glow) más un barrido de luz que cruza
   la superficie, como cristal líquido — mismo lenguaje que .access__aside-panel,
   retonado a dorado para que se sienta como el momento premium que es. */
.btn--lg { min-height: 66px; padding: 0 var(--s-10); font-size: 1.08rem; letter-spacing: 0.01em; }
.btn--pulso-glass {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: btn-pulso 2.8s var(--ease-soft) infinite;
}
.btn--pulso-glass::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--white) 60%, transparent) 48%, transparent 66%);
  background-size: 260% 100%;
  animation: panel-sheen 3.4s var(--ease-soft) infinite;
}
@keyframes btn-pulso {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--meniscus) 48%, transparent); }
  50%      { box-shadow: 0 0 0 16px color-mix(in srgb, var(--meniscus) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--pulso-glass, .btn--pulso-glass::after { animation: none; }
}

/* --- Tarjeta "spotlight" del CTA de cierre: halo dorado detrás, para que
   se sienta como el momento más importante de la pantalla. --- */
.mc-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-color: color-mix(in srgb, var(--meniscus) 38%, var(--glass-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--meniscus) 12%, var(--glass-bg)), var(--glass-bg) 60%);
}
.mc-cta::before {
  content: "";
  position: absolute; top: -55%; left: 50%; width: 140%; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--meniscus) 24%, transparent), transparent 70%);
  pointer-events: none;
}
.mc-cta__eyebrow {
  position: relative; display: block;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: color-mix(in srgb, var(--meniscus) 70%, var(--charcoal));
  margin-bottom: 12px;
}
.mc-cta__txt { position: relative; max-width: 46ch; margin: 0 auto 24px; }

.bov-vault__chest {
  width: 92px; height: 92px; margin: 0 auto var(--s-6); flex: none;
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--meniscus) 55%, var(--cream)), color-mix(in srgb, var(--meniscus) 16%, var(--cream)) 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--meniscus) 45%, transparent), 0 12px 28px -10px color-mix(in srgb, var(--meniscus) 55%, transparent);
  animation: bov-pulse 2.6s var(--ease-soft) infinite;
}
.bov-vault__lock { font-size: 2.5rem; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--charcoal) 30%, transparent)); }
@keyframes bov-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--meniscus) 35%, transparent), 0 12px 28px -10px color-mix(in srgb, var(--meniscus) 55%, transparent); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 14px color-mix(in srgb, var(--meniscus) 0%, transparent), 0 16px 32px -8px color-mix(in srgb, var(--meniscus) 65%, transparent); }
}

/* mensaje de la Bóveda, ahora integrado como acompañamiento de la última
   pregunta (Paso 2 · Formato) en vez de ser una pantalla propia */
.bov-vault-inline {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 28px 0 4px; padding: var(--s-5) var(--s-6);
  border-radius: var(--r-card); background: color-mix(in srgb, var(--beige) 35%, var(--cream));
  border: 1px solid var(--hairline);
}
.bov-vault__chest--sm { width: 56px; height: 56px; margin: 2px 0 0; }
.bov-vault__chest--sm .bov-vault__lock { font-size: 1.6rem; }
.bov-vault-inline__t { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; margin: 0 0 6px; }
.bov-vault-inline__txt { color: var(--text-soft); font-size: 0.9rem; line-height: 1.55; margin: 0 0 6px; }
.bov-vault-inline__gancho { font-family: var(--font-display); font-size: 1rem; margin: 0; }

/* Categorías del Paso 1: nube de chips compacta en vez de lista vertical,
   con las opciones extra ocultas detrás de "ver todas" para no alargar
   la pantalla con 15-25 filas. */
.bov-opts-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bov-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong); background: var(--cream);
  font-size: 0.88rem; line-height: 1.3; text-align: left; cursor: pointer;
  transition: all var(--m-fast) var(--ease-expand);
}
.bov-chip:hover { border-color: var(--taupe); }
.bov-chip__dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--hairline-strong); flex: none; transition: all var(--m-fast) var(--ease-expand); }
.bov-chip.is-picked { border-color: var(--charcoal); background: color-mix(in srgb, var(--taupe) 16%, var(--cream)); }
.bov-chip.is-picked .bov-chip__dot { background: var(--charcoal); border-color: var(--charcoal); box-shadow: inset 0 0 0 2.5px var(--cream); }
.bov-opts-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--meniscus) 75%, var(--charcoal));
  text-decoration: underline; text-underline-offset: 3px;
}
.bov-opts-more svg { width: 1em; height: 1em; }

.bov-resultado__hero { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.bov-resultado__badge {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.5rem; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--meniscus) 45%, var(--cream)), color-mix(in srgb, var(--meniscus) 12%, var(--cream)) 75%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--meniscus) 40%, transparent);
}
.bov-resultado__t { font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1.8vw, 1.95rem); line-height: 1.18; margin: 4px 0 0; text-wrap: balance; }
.bov-resultado__sub { color: var(--text-soft); font-size: 0.92rem; line-height: 1.55; max-width: 34rem; margin-bottom: 20px; }

.bov-recomienda {
  margin: 4px 0 26px; padding: var(--s-5) var(--s-6);
  border-radius: var(--r-card);
  background: linear-gradient(135deg, color-mix(in srgb, var(--meniscus) 16%, var(--cream)), color-mix(in srgb, var(--meniscus) 3%, var(--cream)));
  border: 1px solid color-mix(in srgb, var(--meniscus) 38%, transparent);
}
.bov-recomienda__eyebrow {
  display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--meniscus) 78%, var(--charcoal)); margin-bottom: 6px;
}
.bov-recomienda__txt { line-height: 1.55; font-size: 0.95rem; }
.bov-recomienda__txt b { font-family: var(--font-display); font-size: 1.08rem; }

/* Paso final, pantalla 1: solo 3 tarjetas simples con el nombre — la
   persona elige una para ver el desglose completo (no se muestran las 3
   detalladas de una vez). */
.bov-picks { display: flex; flex-direction: column; gap: var(--s-4); margin-top: 4px; }
.bov-pick {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: var(--s-5) var(--s-6); border-radius: var(--r-card);
  background: var(--cream); border: 1px solid var(--hairline); box-shadow: var(--sh-soft);
  cursor: pointer; transition: transform var(--m-fast) var(--ease-expand), box-shadow var(--m-normal) var(--ease-expand), border-color var(--m-fast) var(--ease-expand);
}
.bov-pick:hover { transform: translateY(-2px); box-shadow: var(--sh-floating); border-color: var(--taupe); }
/* en la vista de resultado guardado, marca cuál de las 3 está abierta ahora
   (is-activa, cambia al hacer clic) y cuál fue la elegida originalmente
   (is-elegida, fija) — pueden coincidir o no. */
.bov-pick.is-activa { border-color: var(--meniscus); box-shadow: 0 0 0 1px color-mix(in srgb, var(--meniscus) 45%, transparent), var(--sh-soft); }
.bov-pick__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bov-pick__n {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--meniscus) 78%, var(--charcoal));
}
.bov-pick__nombre { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; }
.bov-pick svg { flex: none; width: 1.3em; height: 1.3em; color: var(--text-soft); }

/* Paso final, pantalla 2: el desglose de la oportunidad elegida. */
.bov-volver {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
  background: none; border: none; padding: 0; cursor: pointer; font-size: 0.9rem;
}
.bov-detalle { margin: 4px 0 4px; }
.bov-detalle__intro {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--meniscus) 78%, var(--charcoal)); margin-bottom: 8px;
}
.bov-detalle__nombre { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 2vw, 2rem); line-height: 1.18; margin: 0 0 14px; text-wrap: balance; }
.bov-detalle__promesa { font-size: 1.05rem; line-height: 1.6; margin-bottom: 16px; }
.bov-detalle__paraquien { color: var(--text-soft); line-height: 1.55; margin-bottom: 22px; }

.bov-idea__row { margin-bottom: 14px; }
.bov-idea__k {
  display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 4px;
}
.bov-idea__row p { line-height: 1.55; }

/* ---------- 26. REDUCED MOTION (PRD §48) ----------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .screen { animation: none; }
  .intro__title, .intro__sub, .intro__orb, .intro__skip { opacity: 1; filter: none; transform: none; }
  .node.is-current { animation: none; }
  .ceremony__card { transform: none; }
  .ceremony__card::after, .ceremony__ring { display: none; }
  .idcard--float { animation: none; transform: none; filter: drop-shadow(0 6px 7px color-mix(in srgb, var(--charcoal) 16%, transparent)); }
  .screen > * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .dayhero .photo, .hero .photo { animation: none !important; transform: none !important; }
  .bell.has-dot svg { animation: none !important; transform: none !important; }
  .access__aside-panel { animation: none !important; transform: none !important; }
  .access__aside-panel::after { display: none; }
  .bov-vault__chest { animation: none; }
}