/* RESET · "Cómo se vive": la app de RESET por dentro, ligada al scroll (scrubbed).
   Una ventana de app persistente cuyas pantallas se funden con suavidad mientras bajas;
   dentro, la biblioteca se desplaza, se abre una meditación y se reproduce, el panel se
   completa y el diario se escribe. El JS escribe --p y los subprogresos; el CSS los pinta. */

.vive{position:relative;background:var(--hueso);border-top:1px solid var(--lino)}

/* ---------- intro ---------- */
.vive-intro{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.vive-intro .h2{margin-top:14px}
.vive-intro>p{margin:20px auto 0;color:var(--tinta-2);font-size:19px;max-width:52ch}
.vive-scroll{display:inline-flex;flex-direction:column;align-items:center;gap:12px;margin-top:48px;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--tinta-3)}
.vive-scroll i{width:1px;height:50px;background:var(--lino);position:relative;overflow:hidden}
.vive-scroll i::after{content:"";position:absolute;top:-55%;left:0;width:1px;height:55%;background:var(--terracota);animation:vscroll 2s var(--ease) infinite}
@keyframes vscroll{to{top:105%}}

/* ---------- raíl: escena fija; el scroll (JS) escribe las variables ---------- */
.vive-rail{position:relative;height:384svh}
.vive-stage{position:sticky;top:0;height:100svh;overflow:hidden;
  --p:0;--ring:0;--pscroll:0;--mscroll:0;--mopen:0;--mplay:0;--reveal:0;--sreveal:0}
.vive-grid{position:relative;height:100svh;display:grid;grid-template-columns:1fr minmax(0,392px);
  align-items:center;gap:clamp(40px,6vw,96px)}

/* puntos de progreso */
.vive-dots{position:absolute;left:50%;bottom:clamp(20px,4vh,38px);transform:translateX(-50%);z-index:6;display:flex;gap:9px}
.vive-dots i{width:26px;height:4px;border-radius:2px;background:var(--lino);transition:background-color .5s var(--ease),width .5s var(--ease)}
.vive-stage[data-escena="1"] [data-ir="1"],
.vive-stage[data-escena="2"] [data-ir="2"],
.vive-stage[data-escena="3"] [data-ir="3"],
.vive-stage[data-escena="4"] [data-ir="4"],
.vive-stage[data-escena="5"] [data-ir="5"]{background:var(--terracota);width:46px}

/* pista "sigue bajando": mantiene vivo el flujo entre pasos; se apaga en el último */
.vive-cue{position:absolute;left:50%;bottom:clamp(50px,8vh,74px);transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:100px;
  background:rgba(31,39,36,.055);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--tinta-3);cursor:pointer;
  white-space:nowrap;transition:opacity .6s var(--ease)}
.vive-cue svg{width:12px;height:12px;stroke:var(--terracota);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  animation:cue-bob 1.6s var(--ease) infinite}
@keyframes cue-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.vive-stage[data-escena="5"] .vive-cue{opacity:0}
@media (prefers-reduced-motion:reduce){.vive-cue svg{animation:none}}

/* ---------- textos (apilados, se funden) ---------- */
.vs-texts{position:relative;min-height:320px}
.vs-txt{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);opacity:0;max-width:33ch}
.eb-terracota{color:var(--terracota)}
.eb-alba{color:var(--alba)}
.vs-n{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,6.5vw,5rem);line-height:.9;color:var(--lino)}
.vs-txt .eyebrow{display:block;margin-top:10px}
.vs-txt h3{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.05;margin:16px 0 18px}
.vs-txt p{color:var(--tinta-2);font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55}

/* ---------- ventana de la app (persistente) ---------- */
.vs-vis{display:flex;justify-content:center;align-items:center}
.app-window{position:relative;width:100%;max-width:392px;aspect-ratio:39/55;border-radius:34px;overflow:hidden;
  background:var(--papel);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 1px var(--lino),0 60px 110px -50px rgba(31,39,36,.55),0 24px 50px -30px rgba(31,39,36,.35)}
.app-screens{position:absolute;inset:0}
.app-screen{position:absolute;inset:0;overflow:hidden;opacity:0;will-change:opacity,transform}

/* barra superior de la app (misma posición en todas → sensación de una sola app) */
.scr-top{position:absolute;top:0;left:0;right:0;z-index:5;height:52px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:var(--papel);border-bottom:1px solid var(--lino)}
.scr-brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:14px;letter-spacing:.2em;color:var(--tinta)}
.scr-brand .scr-logo{width:18px;height:18px;flex-shrink:0;overflow:visible}
.scr-ctx{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--tinta-3)}
.scr-ctx .rec{width:8px;height:8px;border-radius:50%;background:var(--terracota);box-shadow:0 0 0 3px rgba(169,80,47,.28)}
.scr-top-dark{background:transparent;border-bottom-color:rgba(244,239,230,.12)}
.scr-top-dark .scr-brand{color:var(--hueso)}
.scr-top-dark .scr-ctx{color:rgba(244,239,230,.7)}
.scr-top-light{background:transparent;border-bottom:0}
.scr-top-light .scr-brand{color:var(--hueso)}
.scr-top-light .scr-ctx{color:var(--hueso)}
.scr-body{position:absolute;top:52px;left:0;right:0;bottom:0}

/* ---------- pantalla 01 · videollamada 1 a 1 (con vida) ---------- */
.scr-1{background:radial-gradient(120% 90% at 50% 10%,#2c3669,#12173a 72%);color:var(--hueso)}
.call{position:absolute;top:52px;left:0;right:0;bottom:96px;padding:14px 16px}
.call-main{position:relative;z-index:1;width:100%;height:100%;border-radius:22px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(80% 70% at 50% 30%,#3a4a86,#181e42 76%);box-shadow:inset 0 0 0 1px rgba(244,239,230,.1)}
/* luz ambiental que se mueve (sensación de vídeo en vivo) */
.call-amb{position:absolute;inset:14px 16px;border-radius:22px;overflow:hidden;pointer-events:none;z-index:2}
.call-amb::before{content:"";position:absolute;width:170%;height:170%;left:-35%;top:-35%;
  background:radial-gradient(38% 38% at 32% 28%,rgba(232,180,138,.16),transparent 70%),radial-gradient(42% 42% at 72% 74%,rgba(120,116,170,.2),transparent 70%);
  transform:translate(calc(var(--p) * 10%),calc(var(--p) * -10%))}

.call-av{position:relative;display:grid;place-items:center;border-radius:50%;overflow:hidden}
.call-main .call-av{width:120px;height:120px;background:radial-gradient(66% 58% at 50% 30%,#4a5793,#1f2650 82%);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.14),inset 0 0 0 1.5px rgba(232,180,138,.4)}
.call-sil{width:82%;height:82%;display:block;margin-top:16%}
.call-main .call-sil{fill:var(--alba)}
.call-aura{position:absolute;top:42%;left:50%;width:168px;height:168px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(232,180,138,.5),transparent 62%);pointer-events:none}
.call-wave{position:absolute;z-index:3;display:flex;align-items:flex-end;gap:3px;height:16px;pointer-events:none}
.call-main .call-wave{left:50%;bottom:22%;transform:translateX(-50%)}
.call-wave i{width:3px;border-radius:2px;background:var(--alba)}
.call-wave i:nth-child(1){height:40%}.call-wave i:nth-child(2){height:85%}.call-wave i:nth-child(3){height:60%}.call-wave i:nth-child(4){height:100%}.call-wave i:nth-child(5){height:50%}
.call-name{position:absolute;z-index:4;font-size:12.5px;font-weight:600;color:var(--hueso);
  background:rgba(14,18,40,.55);padding:4px 11px;border-radius:100px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.call-main .call-name{left:12px;bottom:12px}
/* self-view (Tú) */
.call-self{position:absolute;z-index:4;right:26px;top:66px;width:92px;height:118px;border-radius:16px;overflow:hidden;
  display:grid;place-items:center;background:radial-gradient(80% 72% at 50% 32%,#5a5986,#272748 80%);
  box-shadow:0 14px 28px -12px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(244,239,230,.26)}
.call-self .call-av{width:58px;height:58px;background:radial-gradient(66% 58% at 50% 30%,#6f6ea0,#34345c 82%)}
.call-self .call-sil{fill:var(--anil-suave)}
.call-self .call-aura{width:92px;height:92px;top:40%}
.call-self .call-wave{left:50%;bottom:16%;transform:translateX(-50%);height:12px}
.call-self .call-wave i{background:var(--anil-suave)}
.call-self .call-name{left:8px;bottom:8px;font-size:10.5px;padding:3px 9px}
/* movimiento LIGADO AL SCROLL: conversan por turnos y se balancean según bajas */
.call-jose .call-av{transform:translateX(calc((var(--p) - .5) * -13px))}
.call-you .call-av{transform:translateX(calc((var(--p) - .5) * 11px))}
.call-jose .call-aura,.call-jose .call-wave{opacity:calc(1.15 - var(--p) * 2.3)}
.call-you .call-aura,.call-you .call-wave{opacity:calc(var(--p) * 2.3 - 0.95)}
/* sin bucle automático: las ondas son barras fijas que solo aparecen/desaparecen con el scroll */
/* pie: caption + controles de llamada */
.call-foot{position:absolute;left:0;right:0;bottom:0;height:96px;padding:0 20px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.call-cap{display:flex;align-items:center;gap:10px;font-size:12.5px;color:rgba(244,239,230,.82)}
.call-cap span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.call-cap b{margin-left:auto;font-weight:400;font-variant-numeric:tabular-nums;opacity:.72;flex:none}
.call-ctrls{display:flex;justify-content:center;align-items:center;gap:16px}
.cc{width:44px;height:44px;border-radius:50%;background:rgba(244,239,230,.12);display:grid;place-items:center;position:relative;color:var(--hueso)}
.cc-mic::before{content:"";width:11px;height:16px;border-radius:6px;background:currentColor}
.cc-mic::after{content:"";position:absolute;bottom:9px;width:18px;height:9px;border:2px solid currentColor;border-top:0;border-radius:0 0 10px 10px}
.cc-cam::before{content:"";width:17px;height:12px;border-radius:3px;background:currentColor;margin-right:4px}
.cc-cam::after{content:"";position:absolute;right:11px;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.cc-end{background:#c0462f;width:50px;height:50px}
.cc-end svg{width:22px;height:22px;fill:var(--hueso);transform:rotate(135deg)}

/* ---------- pantalla 02 · panel ---------- */
.scr-2{background:var(--papel)}
.pc-body{display:flex;flex-direction:column;justify-content:center;padding:18px 30px 30px}
.pc-anillo{position:relative;width:216px;max-width:68%;margin:0 auto 24px}
.pc-anillo svg{width:100%;display:block;overflow:visible}
.pc-dot{fill:var(--papel);stroke:var(--lino);stroke-width:1}
.pc-arc{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--ring));transform:rotate(-90deg);transform-origin:center}
.pc-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.pc-num b{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1}
.pc-num span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3)}
.pc-estado{text-align:left;padding-left:14px;border-left:2px solid var(--alba);font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.4;color:var(--tinta)}
.pc-estado span{display:block;font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--tinta-3);margin-bottom:5px}

/* panel 02 como dashboard del área de miembros */
.pc-body{gap:0;padding:20px 22px 24px;justify-content:center}
.pc-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.pc-head .pc-anillo{width:104px;max-width:104px;margin:0;flex:none}
.pc-head .pc-num b{font-size:34px}
.pc-head .pc-num span{font-size:9px;letter-spacing:.14em}
.pc-head-txt{min-width:0}
.pc-kicker{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--tinta-3)}
.pc-paso-nombre{display:block;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.1;margin:5px 0 6px;color:var(--tinta)}
.pc-sub{display:block;font-size:12px;color:var(--tinta-2)}
.pc-rows{display:flex;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0}
.pc-row{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:14px;background:var(--hueso);border:1px solid var(--lino)}
.pc-ic{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--salvia-suave);color:var(--musgo)}
.pc-ic .ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pc-row-txt{flex:1;min-width:0}
.pc-row-txt b{display:block;font-size:14px;font-weight:600;color:var(--tinta)}
.pc-row-txt em{font-style:normal;font-size:12px;color:var(--tinta-3)}
.pc-row-go{width:8px;height:8px;flex:none;border-right:2px solid var(--tinta-3);border-top:2px solid var(--tinta-3);transform:rotate(45deg);opacity:.55}
.pc-row:first-child{background:rgba(232,180,138,.12);border-color:rgba(232,180,138,.4)}
.pc-row:first-child .pc-ic{background:var(--alba);color:var(--anil-hondo)}

/* ---------- pantalla 03 · meditaciones ---------- */
.scr-3{background:linear-gradient(180deg,#273163,#141a38 80%);color:var(--hueso)}
.med-view{position:absolute;top:52px;left:0;right:0;bottom:0;overflow:hidden;padding:12px 16px 0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 90%,transparent 100%)}
.med-list{display:flex;flex-direction:column;gap:5px;padding:14px 0 24px;transform:translateY(calc(var(--mscroll) * -160px))}
.med-row{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;
  background:rgba(244,239,230,.045);border:1px solid rgba(244,239,230,.07)}
.med-ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--alba);
  background:linear-gradient(150deg,var(--anil),var(--anil-hondo));box-shadow:inset 0 0 0 1px rgba(232,180,138,.2)}
.med-ic .ico{width:18px;height:18px;stroke-width:1.4;fill:none;stroke:currentColor}
.med-meta{flex:1;min-width:0}
.med-meta b{display:block;font-size:14.5px;font-weight:600}
.med-meta em{font-style:normal;font-size:12px;color:rgba(244,239,230,.6)}
.med-row.hoy{background:rgba(232,180,138,.14);border-color:rgba(232,180,138,.42)}
.med-row.hoy .med-ic{background:var(--alba);color:var(--anil-hondo)}
.med-go{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--alba);color:var(--anil-hondo)}
.med-go::before{content:"";border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.med-row.ok{opacity:.7}
.med-chk{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(138,154,123,.32)}
.med-chk::before{content:"";width:9px;height:5px;border-left:2px solid var(--salvia-suave);border-bottom:2px solid var(--salvia-suave);transform:rotate(-45deg) translate(1px,-1px)}

.med-player2{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:66px 30px 30px;background:linear-gradient(180deg,#2b356a,#141a38 82%);
  opacity:var(--mopen);transform:translateY(calc((1 - var(--mopen)) * 24px));pointer-events:none}
.med-player2::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:320px;height:320px;pointer-events:none;
  background:radial-gradient(circle,rgba(232,180,138,.3),transparent 62%)}
.mp-art{position:relative;width:118px;height:118px;margin:6px auto 4px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,rgba(232,180,138,.32),rgba(232,180,138,.04) 70%)}
.mp-art .ico{position:relative;width:50px;height:50px;color:var(--alba);stroke-width:1.1;fill:none;stroke:currentColor;stroke-linecap:round}
.mp-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(232,180,138,.45);opacity:0;animation:mp-breathe 4.4s ease-in-out infinite}
.mp-ring2{animation-delay:2.2s}
@keyframes mp-breathe{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.26)}}
.mp-title{position:relative;font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.05;margin-top:10px;color:var(--hueso)}
.mp-by{position:relative;font-size:12px;color:rgba(244,239,230,.62);margin-top:5px}
.mp-wave{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;gap:2.5px;height:32px;margin-top:20px}
.mp-wave i{width:3px;height:26%;border-radius:2px;background:rgba(232,180,138,.5);transform-origin:center;animation:mp-eq 1s ease-in-out infinite alternate}
.mp-wave i:nth-child(3n){animation-duration:1.3s}.mp-wave i:nth-child(3n+1){animation-duration:.8s}
.mp-wave i:nth-child(2n){animation-delay:.3s}.mp-wave i:nth-child(5n){animation-delay:.6s}
@keyframes mp-eq{to{transform:scaleY(3)}}
.mp-bar{position:relative;align-self:stretch;height:4px;border-radius:2px;background:rgba(244,239,230,.16);margin-top:10px}
.mp-bar span{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--alba);width:calc(6% + var(--mplay) * 64%)}
.mp-bar span::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:var(--alba);box-shadow:0 0 0 3px rgba(232,180,138,.3)}
.mp-time{position:relative;align-self:stretch;display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:rgba(244,239,230,.6);font-variant-numeric:tabular-nums}
.mp-ctrls{position:relative;display:flex;align-items:center;gap:30px;margin-top:18px}
.mp-step{position:relative;width:26px;height:18px;color:rgba(244,239,230,.82)}
.mp-step::before,.mp-step::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent}
.mp-prev::before{left:2px;border-right:9px solid currentColor}.mp-prev::after{left:11px;border-right:9px solid currentColor}
.mp-next::before{right:2px;border-left:9px solid currentColor}.mp-next::after{right:11px;border-left:9px solid currentColor}
.mp-pp{width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--alba);color:var(--anil-hondo);box-shadow:0 14px 34px -12px rgba(232,180,138,.7)}
.mp-pp::before{content:"";width:16px;height:18px;border-left:6px solid currentColor;border-right:6px solid currentColor}

/* ±15 s skip buttons (replace ‹ › arrows) */
.mp-skip{font-size:11px;font-weight:700;letter-spacing:.04em;color:rgba(244,239,230,.82);
  width:40px;height:28px;display:flex;align-items:center;justify-content:center;position:relative;cursor:default}

/* INHALA / EXHALA breathing cue */
.mp-breath{position:relative;height:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:rgba(244,239,230,.72);margin-top:4px}
.mp-breath .mp-inhala,.mp-breath .mp-exhala{position:absolute;left:50%;transform:translateX(-50%)}
.mp-breath .mp-inhala{animation:breath-in 4.4s ease-in-out infinite}
.mp-breath .mp-exhala{animation:breath-out 4.4s ease-in-out infinite}
@keyframes breath-in{0%,42%{opacity:1}52%,100%{opacity:0}}
@keyframes breath-out{0%,42%{opacity:0}52%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.mp-breath .mp-inhala,.mp-breath .mp-exhala{animation:none}.mp-breath .mp-exhala{opacity:0}}

/* ---------- pantalla 04 · diario ---------- */
.scr-4{background:var(--papel)}
.dia-body{display:flex;flex-direction:column;padding:14px 28px 20px;gap:10px}
.diario-q{font-family:var(--serif);font-size:19px;line-height:1.32}
.diario-a{margin-top:14px;font-size:14.5px;color:var(--tinta-2);line-height:1.6;flex:1}
.cursor{display:inline-block;width:1.5px;height:1.05em;background:var(--anil);vertical-align:-2px;margin-left:1px;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.diario-foot{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--lino);
  opacity:var(--reveal);transform:translateY(calc((1 - var(--reveal)) * 8px))}
.chip-ok{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 13px;border-radius:100px;background:var(--salvia-suave);color:var(--musgo)}
.chip-ok::before{content:"";width:9px;height:5px;border-left:2px solid var(--musgo);border-bottom:2px solid var(--musgo);transform:rotate(-45deg) translateY(-1px)}
.prox{margin-left:auto;text-align:right;font-size:12.5px;color:var(--tinta-3)}
.prox b{color:var(--tinta);font-family:var(--serif);font-weight:400;display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- panel: saludo ---------- */
.pc-greet{font-family:var(--serif);font-size:15px;font-style:italic;color:var(--tinta-2);margin-bottom:12px}

/* ---------- pantalla protocolo ---------- */
.scr-proto{background:var(--papel)}
.proto-body{padding:14px 16px 16px;overflow:hidden}
.proto-lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;
  transform:translateY(calc(var(--pscroll) * -142px))}
.proto-row{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:13px;
  background:var(--hueso);border:1px solid var(--lino)}
.proto-n{font-family:var(--serif);font-size:15px;font-weight:400;color:var(--tinta-3);flex:none;width:20px;text-align:center}
.proto-t{flex:1;font-size:13px;font-weight:500;color:var(--tinta);line-height:1.25}
.proto-row.done{opacity:.65}
.proto-row.done .proto-n{color:var(--musgo)}
.proto-chk{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--salvia-suave)}
.proto-chk::before{content:"";width:8px;height:4.5px;border-left:2px solid var(--musgo);border-bottom:2px solid var(--musgo);transform:rotate(-45deg) translate(1px,-1px)}
.proto-row.activo{background:rgba(169,80,47,.14);border-color:rgba(169,80,47,.55)}
.proto-row.activo .proto-n{color:var(--terracota);font-weight:700}
.proto-row.activo .proto-t{font-weight:700}
.proto-row.lock{opacity:.28}
.proto-badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;
  border-radius:100px;background:var(--terracota);color:var(--hueso);flex:none}
.proto-lk{width:14px;height:12px;flex:none;position:relative;border:1.5px solid var(--tinta-3);border-radius:3px;margin-right:3px}
.proto-lk::before{content:"";position:absolute;left:50%;top:-6px;transform:translateX(-50%);
  width:8px;height:8px;border:1.5px solid var(--tinta-3);border-bottom:0;border-radius:4px 4px 0 0}

/* ---------- pantalla sesiones ---------- */
.scr-5{background:var(--papel)}
.ses-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.ses-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--tinta-3)}
.ses-card{padding:15px 16px;border-radius:16px;background:var(--hueso);border:1px solid var(--lino)}
.ses-prox{background:rgba(169,80,47,.07);border-color:rgba(169,80,47,.3);
  opacity:var(--sreveal);transform:translateY(calc((1 - var(--sreveal)) * 10px))}
.ses-paso{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--terracota)}
.ses-titulo{font-family:var(--serif);font-size:18px;font-weight:400;line-height:1.1;margin:5px 0 10px}
.ses-when{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--tinta-2)}
.ses-when b{font-weight:600;color:var(--tinta)}
.ses-btn{display:inline-flex;align-items:center;margin-top:12px;padding:9px 18px;border-radius:100px;
  background:var(--terracota);color:var(--hueso);font-size:13px;font-weight:600}
.ses-call-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--lino);background:transparent;color:var(--tinta-2);font-size:11.5px;font-weight:500;cursor:pointer;width:100%;transition:background .2s,color .2s,border-color .2s;line-height:1.3;text-align:center}
.ses-call-btn .ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;flex:none}
.ses-call-btn:active,.ses-call-btn:hover{background:rgba(169,80,47,.08);border-color:rgba(169,80,47,.3);color:var(--tinta)}
.ses-call-btn.enviado{background:var(--salvia-suave);border-color:transparent;color:var(--musgo);pointer-events:none}
.ses-ant{display:flex;flex-direction:column;gap:9px;padding:12px 14px;border-radius:14px;background:var(--hueso);border:1px solid var(--lino)}
.ses-past-row{display:flex;align-items:center;gap:11px}
.ses-p-n{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--salvia-suave);font-size:12px;font-weight:600;color:var(--musgo)}
.ses-p-txt{flex:1;font-size:12.5px;color:var(--tinta-2)}
.ses-p-ok{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--salvia-suave)}
.ses-p-ok::before{content:"";width:7px;height:4px;border-left:1.8px solid var(--musgo);border-bottom:1.8px solid var(--musgo);transform:rotate(-45deg) translate(1px,-1px)}

/* ---------- espejo final (sin cambios) ---------- */
.gs-espejo{background:var(--arena);overflow:hidden}
.espejo-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.espejo{max-width:440px;justify-self:center;width:100%;transform:scale(.97);opacity:.82;transition:transform 2.4s var(--ease),opacity 2s var(--ease)}
.espejo svg{width:100%;height:auto;display:block}
.esp-luz{opacity:.08;transition:opacity 2.6s var(--ease) .3s}
.esp-reflejo{opacity:.14;transition:opacity 2.6s var(--ease) .7s}
.esp-sim{opacity:0;transition:opacity 2s var(--ease) 1.5s}
.esp-sim > g{animation:girar 140s linear infinite;transform-box:fill-box;transform-origin:center}
.gs-espejo.visto .espejo{transform:scale(1);opacity:1}
.gs-espejo.visto .esp-luz{opacity:1}
.gs-espejo.visto .esp-reflejo{opacity:1}
.gs-espejo.visto .esp-sim{opacity:.6}
.espejo-txt .h2 em{font-style:italic;color:var(--terracota);font-weight:400}
.espejo-txt p{margin:22px 0 0;color:var(--tinta-2);font-size:18px}
.espejo-txt p+p{margin-top:18px}
.espejo-txt p strong{color:var(--tinta);font-weight:600}
.espejo-txt .btn{margin-top:30px}
@media (prefers-reduced-motion:reduce){.espejo{transform:none;opacity:1}}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .esp-luz,.esp-reflejo{opacity:1}.esp-sim{opacity:.55}
  .call-aura,.call-wave,.call-amb::before,.scr-1 .call-av,.face,.eye,.mouth,.mp-ring,.mp-wave i{animation:none}
  .vive-scroll i::after{animation:none}
}

/* ---------- responsive: pantalla completa, apilado ---------- */
@media (max-width:860px){
  .vive-grid{grid-template-columns:1fr;align-content:center;justify-items:center;gap:26px;padding:84px 20px 100px}
  .vs-texts{order:2;min-height:150px;width:100%;max-width:420px;text-align:center}
  .vs-txt{max-width:36ch;margin:0 auto}
  .vs-n{font-size:2.6rem}
  .vs-txt h3{margin:8px 0 10px}
  .vs-txt p{font-size:15px;line-height:1.45}
  .vs-vis{order:1;width:100%}
  .app-window{max-width:min(300px,78vw)}
  .scr-top{height:46px;padding:0 16px}
  .scr-body{top:46px}
  .med-view{top:46px}
  .med-list{transform:translateY(calc(var(--mscroll) * -140px))}
  .med-player2{padding:58px 20px 24px}
  .mp-art{width:90px;height:90px}
  .mp-art .ico{width:40px;height:40px}
  .mp-title{font-size:22px}
  .mp-wave{height:24px;margin-top:14px}
  .mp-ctrls{gap:24px;margin-top:14px}
  .mp-pp{width:50px;height:50px}
  .call{top:46px;bottom:86px;padding:12px}
  .call-main .call-av{width:104px;height:104px}
  .call-self{width:76px;height:98px;right:18px;top:58px}
  .call-self .call-av{width:50px;height:50px}
  .call-foot{height:86px;padding:0 16px;gap:11px}
  .cc{width:40px;height:40px}.cc-end{width:46px;height:46px}
  .pc-body{padding:16px 16px 20px}
  .pc-head{gap:12px;margin-bottom:14px}
  .pc-head .pc-anillo{width:84px}
  .pc-head .pc-num b{font-size:27px}
  .pc-paso-nombre{font-size:19px}
  .pc-row{padding:10px 11px;gap:10px}
  .pc-ic{width:34px;height:34px}
  .vive-intro>p{font-size:16px}
  .diario-q{font-size:17px}
  .diario-a{font-size:14px}
  .proto-lista{transform:translateY(calc(var(--pscroll) * -100px))}
  .proto-row{padding:8px 11px;gap:9px}
  .proto-t{font-size:12px}
  .ses-body{padding:12px 14px 16px;gap:9px}
  .ses-titulo{font-size:16px}
  .espejo-in{grid-template-columns:1fr}
  .espejo{max-width:300px}
}
@media (max-width:860px) and (max-height:700px){
  .vive-grid{gap:18px;padding:76px 20px 90px}
  .app-window{max-width:min(250px,64vw)}
  .vs-txt p{font-size:13.5px}
}

/* meditaciones · badges + tonos por paso + bloqueada (ref. panel real) */
.med-row{position:relative}
.med-row.art-mocha .med-ic{background:linear-gradient(150deg,#6b4e3a,#38281e);color:#e9c7a8;box-shadow:inset 0 0 0 1px rgba(232,180,138,.2)}
.med-row.art-anil .med-ic{background:linear-gradient(150deg,#30407e,#1a2044);color:var(--anil-suave);box-shadow:inset 0 0 0 1px rgba(201,205,224,.2)}
.med-badge{display:inline-flex;align-items:center;font-size:8px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:2px 6px;border-radius:100px;background:var(--alba);color:var(--anil-hondo);vertical-align:middle;margin-left:5px}
.med-badge-new{background:var(--salvia-suave);color:var(--musgo)}
.med-row.lock{opacity:.5}
.med-row.lock .med-ic{background:rgba(244,239,230,.06);color:rgba(244,239,230,.5);box-shadow:none}
.med-lk{width:16px;height:14px;flex:none;position:relative;border:1.6px solid rgba(244,239,230,.6);border-radius:3px;margin-left:2px}
.med-lk::before{content:"";position:absolute;left:50%;top:-7px;transform:translateX(-50%);width:9px;height:9px;border:1.6px solid rgba(244,239,230,.6);border-bottom:0;border-radius:5px 5px 0 0}

/* G.7 — ensure first screen is visible before JS runs; prevents flash of paper/white */
.scr-2{opacity:1}

/* G.8 / L — reduce leading blank space on vive section and filtro */
.vive{padding-top:clamp(32px,4vw,64px)}