/*
 * KANNEKO · CAPA VIVA (5-nov-2026, pedido del dueño con referencias de "fondos vivos",
 * "loaders", "3D interactivo" y "efectos hover").
 *
 * Es una CAPA: no reescribe la landing. Se carga después del <style> de index.html y solo
 * añade movimiento, luz y profundidad. Si este archivo no carga, la landing queda igual
 * que antes.
 *
 * Reglas que respeta:
 * - Blue Glass manda (acero, hielo, cyan solo como energía). El ESMERALDA es el sello de
 *   Shoptrix OS (shoptrix-design/esmeralda.css): va en destellos, facetas y el sello del
 *   pie, nunca como color de texto ni de botón principal.
 * - Nada toca #face-wrap por dentro con eventos: el tap-to-talk es sagrado (ver CLAUDE.md).
 * - prefers-reduced-motion apaga todo lo que se mueve.
 * - Sin dependencias externas: la CSP solo permite 'self'.
 */
:root{
  --vv-esmeralda:#0f9f74;
  --vv-jade:#57d3a6;
  --vv-menta:#d9f7ec;
  --vv-noche:#0B1A2E;
}

/* ── 1. FONDOS VIVOS (lienzo WebGL que pinta viva.js) ── */
.viva-fondo{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;display:block;   /* -1 dentro de la sección (que ya es contexto de apilado): debajo de TODO su contenido */
  opacity:0;transition:opacity 1.2s ease;
}
.viva-fondo.on{opacity:1;}
#waitlist,#final-cta{overflow:hidden;isolation:isolate;}

/* El cierre pasa a NOCHE: rayos de luz azul, cyan y jade sobre navy, como un tablero
   de noche. Es el único bloque oscuro de la página, y por eso pesa. */
#final-cta{background:var(--vv-noche);border-top:0;padding:110px 20px 120px;}
#final-cta h2{color:#fff;}
#final-cta .grad-text{
  background:linear-gradient(100deg,#FFFFFF,#BFE0FF 35%,#8FE8C8 55%,#FFFFFF 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:300% 100%;
}
#final-cta p,#final-cta .cta-note{color:rgba(232,242,255,.82);opacity:1;}

/* ── 1b. TEXTO LIMPIO SOBRE LA CONSTELACIÓN (aviso del dueño, 5-nov) ──
   Los puntos y líneas de #bg-canvas son navy, el mismo color que las letras: detrás del
   titular se confundían con él y no se leía. La constelación ahora se desvanece en la
   franja del texto y solo aparece de la cara hacia abajo; y el texto lleva un halo
   blanco por si algún punto se cuela. Regla: NADA del mismo color que la letra pasa por
   detrás de la letra. */
#bg-canvas{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 40%,rgba(0,0,0,.35) 50%,#000 62%);
          mask-image:linear-gradient(to bottom,transparent 0%,transparent 40%,rgba(0,0,0,.35) 50%,#000 62%);
}
#hero-copy .hero-title,#hero-copy .hero-sub{
  text-shadow:0 0 14px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9);
}

/* ── 2. BARRA DE PROGRESO de lectura: acero → cyan → jade ── */
#viva-progreso{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#2F6FB8,#00E5FF 60%,var(--vv-jade));
  box-shadow:0 0 12px rgba(0,229,255,.55);
}

/* ── 3. BOTONES VIVOS: luz que sigue al dedo, destello de cristal y hundido al tocar ── */
.viva-btn{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;}
.viva-btn::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.38),rgba(191,224,255,.12) 40%,transparent 70%);
  opacity:0;transition:opacity .3s ease;
}
.viva-btn:hover::before,.viva-btn:focus-visible::before{opacity:1;}
/* Destello esmeralda-hielo que cruza el botón cada pocos segundos: la "talla" de Shoptrix */
.viva-btn::after{
  content:'';position:absolute;top:-50%;bottom:-50%;width:38%;left:-60%;z-index:-1;pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(217,247,236,.55),rgba(255,255,255,.85),rgba(217,247,236,.55),transparent);
  animation:viva-destello 5.5s ease-in-out infinite;
}
@keyframes viva-destello{0%,70%{left:-60%;}100%{left:130%;}}
.viva-btn:active{transform:scale(.965)!important;transition-duration:.08s;}
/* Halo que respira bajo el CTA principal */
.cta-btn.viva-btn{box-shadow:0 8px 24px rgba(47,111,184,.22),0 0 0 0 rgba(87,211,166,.0);animation:viva-halo 3.2s ease-in-out infinite;}
@keyframes viva-halo{
  0%,100%{box-shadow:0 8px 24px rgba(47,111,184,.22),0 0 0 0 rgba(87,211,166,0);}
  50%{box-shadow:0 12px 34px rgba(47,111,184,.34),0 0 0 7px rgba(87,211,166,.14);}
}
#final-cta .cta-btn.viva-btn{
  background:linear-gradient(135deg,#3B82D6,#1F4E86);
  box-shadow:0 0 0 1px rgba(191,224,255,.35) inset,0 18px 50px rgba(0,229,255,.22);
}

/* ── 4. LOADER de marca: mientras el formulario envía, el botón muestra un anillo
   de cristal (acero + jade) en vez de quedarse gris y mudo ── */
.wl-form button.viva-btn:disabled{color:transparent!important;}
.wl-form button.viva-btn:disabled::before{
  opacity:1;inset:auto;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;z-index:1;
  background:conic-gradient(from 0deg,rgba(255,255,255,0),#BFE0FF 40%,#fff 60%,var(--vv-jade) 85%,rgba(255,255,255,0));
  -webkit-mask:radial-gradient(circle,transparent 7px,#000 8px);mask:radial-gradient(circle,transparent 7px,#000 8px);
  animation:viva-gira .8s linear infinite;
}
.wl-form button.viva-btn:disabled::after{display:none;}
@keyframes viva-gira{to{transform:rotate(360deg);}}

/* Puntos de "Listening / Thinking" del chat: de puntos grises a tres gemas que laten */
#chat-thinking .ct-dots i{
  background:linear-gradient(135deg,#2F6FB8,var(--vv-jade))!important;
  box-shadow:0 0 8px rgba(87,211,166,.55);
}

/* ── 5. TARJETAS EN 3D: se inclinan hacia el cursor con reflejo de cristal ── */
.viva-tilt{transform-style:preserve-3d;position:relative;}
.viva-tilt.viva-tilt-on{transition:transform .12s ease-out,box-shadow .3s ease!important;
  box-shadow:0 24px 50px rgba(22,40,63,.14);}
.viva-tilt::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),rgba(217,247,236,.18) 30%,transparent 60%);
  opacity:0;transition:opacity .35s ease;mix-blend-mode:soft-light;
}
.viva-tilt.viva-tilt-on::after{opacity:1;}
/* Faceta esmeralda (la gema de Shoptrix) que asoma en la esquina al pasar */
.why-card.viva-tilt::before,.drv-card.viva-tilt::before{
  content:'';position:absolute;top:-30px;right:-30px;width:96px;height:96px;pointer-events:none;z-index:0;
  background:conic-gradient(from 15deg,#fff,#c9f2e2 12%,#fff 22%,#a8e9d1 33%,#fff 44%,#dceeff 55%,#fff 66%,#bfeedd 80%,#fff);
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
  opacity:.35;transition:opacity .35s ease,transform .5s ease;
}
.why-card.viva-tilt.viva-tilt-on::before,.drv-card.viva-tilt.viva-tilt-on::before{opacity:.85;transform:rotate(12deg) scale(1.08);}
.why-card.viva-tilt,.drv-card.viva-tilt{overflow:hidden;}
.why-card>*,.drv-card>*{position:relative;z-index:1;}

/* ── 6. EFECTO HOVER en las escenas: la foto se acerca hacia donde apunta el cursor ── */
.rv-video{overflow:hidden;}
.rv-video img{transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-origin:var(--ox,50%) var(--oy,50%);}
.rv-card:hover .rv-video img{transform:scale(1.08);}
.chip{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease;}
@media(hover:hover){
  .chip:hover{transform:translateY(-3px);border-color:rgba(87,211,166,.55);
    box-shadow:0 10px 26px rgba(47,111,184,.14),0 0 0 4px rgba(87,211,166,.10);}
}

/* ── 7. OTTO CON VIDA: flota y respira; en ordenador además mira hacia el cursor.
   Se mueve #face-container (la cara y su boca juntas), nunca #face-wrap, que es el botón. ── */
/* Se usan las propiedades SUELTAS `translate` y `rotate` (no `transform`): así el
   hundido al tocar (#face-wrap.pressed → transform:scale) y el cambio de personaje
   siguen funcionando igual, y la boca (lip-canvas) se mueve pegada a la cara. */
#face-wrap{perspective:900px;}
#face-container.viva-cara{transition:transform .13s cubic-bezier(.2,.7,.3,1),rotate .5s cubic-bezier(.2,.8,.2,1);
  animation:viva-respira 5.5s ease-in-out infinite;}
@keyframes viva-respira{0%,100%{translate:0 0;}50%{translate:0 -7px;}}
/* El destello al cambiar de personaje manda sobre la respiración (si no, la taparía) */
#face-container.viva-cara.char-swap{animation:containerFlash .34s cubic-bezier(.2,1.6,.4,1) forwards;}
/* Brillo especular que recorre la cara cuando se inclina */
#face-container.viva-cara::after{
  content:'';position:absolute;inset:6%;border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(60% 50% at var(--fx,35%) var(--fy,25%),rgba(255,255,255,.28),transparent 60%);
  mix-blend-mode:overlay;
}

/* ── 8. TÍTULOS que entran enfocándose (de desenfocado a nítido) ── */
section h2.reveal{filter:blur(10px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .9s ease;}
section h2.reveal.in{filter:none;}

/* ── 9. SELLO SHOPTRIX OS en el pie: gema esmeralda de cristal ── */
.viva-sello{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:7px 14px 7px 9px;border-radius:999px;
  text-transform:none;letter-spacing:.01em;font-size:12.5px;color:var(--ink-soft);text-decoration:none;
  background:linear-gradient(155deg,rgba(255,255,255,.85),rgba(217,247,236,.6));
  border:1px solid rgba(15,159,116,.22);
  box-shadow:inset 0 1px 0 #fff,0 6px 18px rgba(10,110,82,.10);}
.viva-sello b{color:#0a6e52;font-weight:700;}
.viva-gema{width:18px;height:18px;flex:0 0 auto;
  background:conic-gradient(from 20deg,#0a6e52,#57d3a6,#d9f7ec,#0f9f74,#57d3a6,#0a6e52);
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
  filter:drop-shadow(0 2px 4px rgba(10,110,82,.35));}

@media(prefers-reduced-motion:reduce){
  .viva-btn::after,.cta-btn.viva-btn,#face-container.viva-cara{animation:none!important;}
  section h2.reveal{filter:none;}
  .viva-tilt,.rv-video img{transition:none!important;transform:none!important;}
  #viva-progreso{display:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   10. "UN TURNO, CUATRO MOMENTOS" (#real.mo), rehecha el 5-nov-2026.
   Marcado: scripts/momentos-seccion.mjs · lógica: viva.js → momentos().
   Pestañas con la hora (barra que avanza), escena que respira, y la conversación
   que aparece como de verdad: el conductor habla, Kanneko "escribe", contesta.
   En el móvil se desliza con el dedo. Sin JS: primer momento completo y quieto.
   ══════════════════════════════════════════════════════════════════════════ */
#real.mo{position:relative;z-index:1;padding:72px 16px 64px;background:var(--bg0,#F6F8FB);border-top:1px solid var(--line,#E3EAF3);text-align:center;--mo-dur:7s;}
#real.mo .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-deep);margin-bottom:12px;}
#real.mo h2{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(30px,6.4vw,52px);font-weight:700;letter-spacing:-.04em;line-height:1.04;margin:0 auto 14px;max-width:820px;color:var(--ink);text-wrap:balance;}
#real.mo>p{color:var(--ink-soft);font-size:16.5px;max-width:520px;margin:0 auto 30px;line-height:1.6;}
.mo-wrap{max-width:1000px;margin:0 auto;}

/* Pestañas: la hora del turno. Cristal; la activa se llena con una barra acero, cyan, jade */
.mo-tabs{display:flex;gap:10px;justify-content:center;overflow-x:auto;scrollbar-width:none;padding:4px 2px 10px;scroll-snap-type:x mandatory;}
.mo-tabs::-webkit-scrollbar{display:none;}
.mo-tab{position:relative;overflow:hidden;flex:0 0 auto;min-width:138px;min-height:56px;padding:10px 16px 12px;text-align:left;cursor:pointer;scroll-snap-align:center;
  font:inherit;color:var(--ink);border-radius:16px;border:1px solid var(--glass-brd,rgba(47,111,184,.2));
  background:var(--glass,linear-gradient(160deg,rgba(255,255,255,.86),rgba(233,242,252,.66)));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease,background .25s ease;}
.mo-tab b{display:block;font-family:'Archivo',system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--steel-deep);}
.mo-tab span{display:block;font-size:15px;font-weight:600;color:var(--ink-soft);margin-top:1px;}
.mo-tab.on{background:#fff;border-color:rgba(47,111,184,.45);box-shadow:0 10px 26px rgba(47,111,184,.16),0 0 0 3px rgba(87,211,166,.12);}
.mo-tab.on span{color:var(--ink);}
@media(hover:hover){.mo-tab:not(.on):hover{transform:translateY(-2px);border-color:rgba(47,111,184,.35);}}
.mo-tab:focus-visible{outline:3px solid var(--steel);outline-offset:2px;}
.mo-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#2F6FB8,#00E5FF,var(--vv-jade));}
.mo-tab.on .mo-bar{transform:scaleX(1);}
.mo.auto .mo-tab.on .mo-bar{transform:scaleX(0);animation:mo-barra var(--mo-dur) linear forwards;}
.mo.pausa .mo-tab.on .mo-bar{animation-play-state:paused;}
@keyframes mo-barra{to{transform:scaleX(1);}}

/* Escenario */
.mo-stage{position:relative;margin-top:18px;}
.mo-panel{margin:0;display:none;}
.mo-panel.on{display:grid;gap:18px;}
.mo-panel[hidden]{display:none!important;}
@media(min-width:860px){
  .mo-panel.on{grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;text-align:left;}
}
.mo-img{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:1/1;width:100%;max-width:520px;margin:0 auto;
  background:#dfe8f3;box-shadow:0 26px 60px rgba(22,40,63,.18),0 0 0 1px rgba(255,255,255,.7) inset;isolation:isolate;}
.mo-img>img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 45%;}
/* La escena respira: la cámara se acerca despacio, como un plano real */
.mo-panel.vivo .mo-img>img{animation:mo-push 12s cubic-bezier(.2,.6,.3,1) both;}
@keyframes mo-push{from{transform:scale(1.0);}to{transform:scale(1.09);}}
/* Luces de la calle que pasan por el cristal */
.mo-luz{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(191,224,255,.35) 45%,rgba(255,255,255,.55) 50%,rgba(191,224,255,.3) 55%,transparent 70%);
  background-size:250% 100%;}
.mo-panel.vivo .mo-luz{animation:mo-luz 6.5s ease-in-out 1.2s infinite;}
@keyframes mo-luz{0%{background-position:120% 0;opacity:0;}15%{opacity:1;}55%{background-position:-60% 0;opacity:1;}70%,100%{background-position:-60% 0;opacity:0;}}
.mo-who{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:14px;color:var(--ink);
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 6px 18px rgba(22,40,63,.14);}
.mo-who img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#fff;}
.mo-car{position:absolute;bottom:14px;left:14px;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(11,26,46,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}

/* La conversación */
.mo-chat{display:flex;flex-direction:column;gap:14px;justify-content:center;min-height:210px;max-width:520px;width:100%;margin:0 auto;text-align:left;}
.mo-msg p{margin:0;font-size:17px;line-height:1.45;}
.mo-you{align-self:flex-end;display:flex;align-items:center;gap:10px;max-width:92%;flex-direction:row-reverse;}
.mo-you p{padding:13px 17px;border-radius:22px 22px 6px 22px;color:#fff;font-weight:500;
  background:linear-gradient(135deg,#2F6FB8,#1F4E86);box-shadow:0 10px 24px rgba(31,78,134,.25);}
.mo-mic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--steel-deep);
  background:#fff;border:1px solid var(--glass-brd,rgba(47,111,184,.2));}
.mo-mic svg{width:17px;height:17px;}
.mo-panel.vivo .mo-mic{animation:mo-oye 1.6s ease-out .1s 2;}
@keyframes mo-oye{0%{box-shadow:0 0 0 0 rgba(0,229,255,.45);}100%{box-shadow:0 0 0 12px rgba(0,229,255,0);}}
.mo-kk{position:relative;align-self:flex-start;display:flex;align-items:flex-end;gap:10px;max-width:94%;}
.mo-kk>img{flex:0 0 auto;width:34px;height:34px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 4px 12px rgba(22,40,63,.15);}
.mo-kk p{padding:13px 17px;border-radius:22px 22px 22px 6px;color:var(--ink);
  background:linear-gradient(155deg,rgba(255,255,255,.95),rgba(232,244,255,.85) 60%,rgba(217,247,236,.6));
  border:1px solid rgba(47,111,184,.16);box-shadow:0 10px 26px rgba(22,40,63,.08);}
.mo-typing{display:none;}

/* Coreografía (solo con JS y sin reduced-motion: .vivo la pone viva.js) */
.mo-panel.vivo .mo-you{animation:mo-entra .5s cubic-bezier(.2,.8,.2,1) .15s both;}
.mo-panel.vivo .mo-kk{animation:mo-entra .5s cubic-bezier(.2,.8,.2,1) .9s both;}
.mo-panel.vivo .mo-kk p{animation:mo-texto .45s ease 2.05s both;}
.mo-panel.vivo .mo-typing{display:flex;position:absolute;left:44px;bottom:0;gap:5px;align-items:center;padding:16px 18px;border-radius:22px 22px 22px 6px;
  background:#fff;border:1px solid rgba(47,111,184,.16);animation:mo-fuera .2s ease 2s both;}
.mo-typing i{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#2F6FB8,var(--vv-jade));animation:mo-punto 1s ease-in-out infinite;}
.mo-typing i:nth-child(2){animation-delay:.15s;}
.mo-typing i:nth-child(3){animation-delay:.3s;}
@keyframes mo-entra{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes mo-texto{from{opacity:0;filter:blur(4px);}to{opacity:1;filter:none;}}
@keyframes mo-fuera{to{opacity:0;visibility:hidden;}}
@keyframes mo-punto{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(-4px);opacity:1;}}

/* Navegación: flechas de 46 px y puntos */
.mo-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px;}
.mo-nav button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--steel-deep);
  background:var(--glass,#fff);border:1px solid var(--glass-brd,rgba(47,111,184,.2));box-shadow:0 6px 16px rgba(22,40,63,.08);
  transition:transform .2s ease,box-shadow .2s ease;}
.mo-nav button svg{width:20px;height:20px;}
.mo-nav button:active{transform:scale(.92);}
@media(hover:hover){.mo-nav button:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(47,111,184,.18);}}
.mo-dots{display:flex;gap:7px;}
.mo-dots i{width:7px;height:7px;border-radius:99px;background:rgba(47,111,184,.25);transition:width .3s ease,background .3s ease;}
.mo-dots i.on{width:22px;background:linear-gradient(90deg,#2F6FB8,var(--vv-jade));}
.mo-pista{display:none;}

/* ── MÓVIL ── */
@media(max-width:859px){
  #real.mo{padding:56px 14px 52px;}
  #real.mo>p{font-size:16px;margin-bottom:22px;}
  /* Pestañas de lado a lado; el borde se desvanece para invitar a deslizar */
  .mo-tabs{justify-content:flex-start;margin:0 -14px;padding:4px 14px 10px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);}
  .mo-tab{min-width:124px;}
  .mo-img{border-radius:22px;touch-action:pan-y;}
  .mo-chat{min-height:230px;}
  .mo-msg p{font-size:16.5px;}
  .mo-pista{display:block;font-size:12.5px;color:var(--ink-soft);opacity:.8;margin-top:10px;letter-spacing:.02em;}
  .mo.tocado .mo-pista{display:none;}
}

@media(prefers-reduced-motion:reduce){
  .mo-panel.vivo .mo-img>img,.mo-panel.vivo .mo-luz,.mo-panel.vivo .mo-you,.mo-panel.vivo .mo-kk,.mo-panel.vivo .mo-kk p,.mo-panel.vivo .mo-mic{animation:none!important;}
  .mo-panel.vivo .mo-typing{display:none;}
  .mo.auto .mo-tab.on .mo-bar{animation:none;transform:scaleX(1);}
}

/* ══════════════════════════════════════════════════════════════════════════
   11. "HIDDEN POWERS" (#secret.pw), rehecha el 5-nov-2026.
   Marcado: scripts/poderes-seccion.mjs · lógica: viva.js → poderes().
   Escena FIJA (sticky) + 7 poderes. El que llega al centro de la pantalla se
   enciende, la escena dice su frase y el riel se llena: bajar tiene premio.
   Sin JS: lista completa, todas encendidas, con la frase en cada tarjeta.
   ══════════════════════════════════════════════════════════════════════════ */
#secret.pw{padding:76px 16px 70px;text-align:center;overflow:visible;}
#secret.pw>h2{max-width:780px;text-wrap:balance;}
#secret.pw>p{max-width:540px;font-size:16.5px;line-height:1.6;color:var(--ink-soft);}
.pw-wrap{max-width:1060px;margin:34px auto 30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start;text-align:left;}
.pw-stage{position:sticky;top:max(84px,calc(50vh - 250px));}
.pw-scene{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:1/1;background:#0B1A2E;
  box-shadow:0 30px 70px rgba(22,40,63,.22),0 0 0 1px rgba(255,255,255,.6) inset;isolation:isolate;}
.pw-scene>img{width:100%;height:100%;object-fit:cover;display:block;}
.pw-scene::after{content:'';position:absolute;inset:auto 0 0 0;height:62%;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(8,18,34,.78),rgba(8,18,34,.35) 55%,transparent);}
.pw-count{position:absolute;top:14px;right:14px;z-index:2;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-soft);
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 16px rgba(22,40,63,.14);}
.pw-count b{color:var(--steel-deep);font-family:'Archivo',system-ui,sans-serif;}
.pw-conv{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;}
.pw-conv.on{opacity:1;transform:none;}
.pw-b{margin:0;max-width:86%;padding:11px 15px;font-size:15.5px;line-height:1.4;}
.pw-tu{align-self:flex-end;color:#fff;font-weight:500;border-radius:18px 18px 5px 18px;background:linear-gradient(135deg,#2F6FB8,#1F4E86);box-shadow:0 8px 20px rgba(0,0,0,.25);}
.pw-kk{align-self:flex-start;color:var(--ink);border-radius:18px 18px 18px 5px;
  background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(232,244,255,.92) 60%,rgba(217,247,236,.85));box-shadow:0 8px 20px rgba(0,0,0,.22);}
.pw.js .pw-conv.on .pw-tu{animation:mo-entra .4s cubic-bezier(.2,.8,.2,1) .05s both;}
.pw.js .pw-conv.on .pw-kk{animation:mo-entra .45s cubic-bezier(.2,.8,.2,1) .6s both;}

/* Riel de progreso a la izquierda de la lista */
.pw-list{list-style:none;margin:0;padding:0 0 0 26px;position:relative;display:flex;flex-direction:column;gap:14px;}
.pw-list::before,.pw-list::after{content:'';position:absolute;left:8px;top:22px;width:3px;border-radius:3px;}
.pw-list::before{bottom:22px;background:rgba(47,111,184,.14);}
.pw-list::after{height:calc((100% - 44px) * var(--pw-fill,0));background:linear-gradient(180deg,#2F6FB8,#00E5FF,var(--vv-jade));transition:height .3s ease;}
.pw-item{position:relative;display:flex;gap:15px;align-items:flex-start;padding:18px 20px;border-radius:20px;
  background:var(--glass,linear-gradient(160deg,rgba(255,255,255,.86),rgba(233,242,252,.66)));border:1px solid var(--glass-brd,rgba(47,111,184,.2));
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background .35s ease,border-color .35s ease;}
.pw-item::before{content:'';position:absolute;left:-23px;top:26px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid rgba(47,111,184,.3);transition:all .3s ease;}
.pw-ico{flex:0 0 auto;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2F6FB8,#1F4E86);box-shadow:0 6px 14px rgba(31,78,134,.25);}
.pw-ico .kkico{width:22px;height:22px;stroke:#fff;}
.pw-txt h3{margin:2px 0 4px;font-family:'Archivo',system-ui,sans-serif;font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink);}
.pw-txt p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-soft);}
.pw-txt .pw-say{margin-top:9px;font-size:15px;color:var(--steel-deep);font-weight:500;}
.pw-say span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#6B7C94);margin-bottom:2px;}
/* Con JS: las que no están en el centro se apagan un poco; la del centro se enciende */
.pw.js .pw-item{opacity:.62;}
.pw.js .pw-item.on{opacity:1;transform:translateX(6px);background:#fff;border-color:rgba(47,111,184,.4);
  box-shadow:0 16px 36px rgba(47,111,184,.16),0 0 0 3px rgba(87,211,166,.12);}
.pw.js .pw-item.on::before{background:var(--vv-jade);border-color:#fff;box-shadow:0 0 0 4px rgba(87,211,166,.25);}
.pw.js .pw-item.visto:not(.on)::before{background:#2F6FB8;border-color:#fff;}
/* En ordenador la frase ya la dice la escena: en la tarjeta solo aparece la activa */
@media(min-width:860px){
  .pw.js .pw-item .pw-say{max-height:0;opacity:0;margin-top:0;overflow:hidden;transition:max-height .35s ease,opacity .35s ease,margin .35s ease;}
  .pw.js .pw-item.on .pw-say{max-height:120px;opacity:1;margin-top:9px;}
}

/* ── MÓVIL: la escena se queda arriba, compacta, y las tarjetas pasan por debajo ── */
@media(max-width:859px){
  #secret.pw{padding:58px 14px 56px;}
  .pw-wrap{grid-template-columns:1fr;gap:16px;margin-top:24px;}
  .pw-stage{top:6px;z-index:3;padding-bottom:12px;
    background:linear-gradient(var(--bg0,#F6F8FB) 82%,rgba(246,248,251,0));}
  .pw-scene{aspect-ratio:16/11;border-radius:22px;}
  .pw-scene>img{object-position:50% 40%;}
  .pw-b{font-size:14.5px;padding:9px 13px;}
  .pw-conv{left:12px;right:12px;bottom:12px;gap:6px;}
  .pw-list{padding-left:24px;}
  .pw-item{padding:16px;}
  /* En el móvil la escena enseña la frase: en las tarjetas apagadas sobra */
  .pw.js .pw-item .pw-say{display:none;}
}
@media(max-width:859px) and (max-height:700px){ .pw-scene{aspect-ratio:16/9;} }

@media(prefers-reduced-motion:reduce){
  .pw-item,.pw-conv,.pw-list::after{transition:none!important;}
  .pw.js .pw-conv.on .pw-tu,.pw.js .pw-conv.on .pw-kk{animation:none!important;}
  .pw.js .pw-item.on{transform:none;}
}