:root{
    color-scheme: dark;
    --night:#121212;
    --gray:#8A8C8E;
    --smoke:#F3F3F3;
    --white:#FFFFFF;
    --line-1: rgba(243,243,243,0.09);
    --line-2: rgba(243,243,243,0.18);
    --stone-1: rgba(243,243,243,0.05);
    --stone-2: rgba(0,0,0,0.35);
    --font-display: 'Cormorant Garamond', serif;
    --font-ui: 'Montserrat', sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;padding:0;height:100%;
    background:var(--night);
    color:var(--smoke);
    font-family:var(--font-ui);
    font-weight:400;
    overflow:hidden;
  }
  #app{
    position:relative; width:100%; height:100vh; height:100dvh;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }

  .ambient{
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(ellipse 55% 40% at 50% 6%, rgba(255,255,255,0.05), transparent 60%),
      radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,255,255,0.025), transparent 60%);
    animation: ambientDrift 34s ease-in-out infinite;
  }
  @keyframes ambientDrift{
    0%,100%{ transform:scale(1) translateY(0); opacity:.92; }
    50%{ transform:scale(1.04) translateY(-10px); opacity:1; }
  }

  /* -------- polvo casi invisible: vida de fondo, nunca decoración -------- */
  .dust-field{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
  .mote{ position:absolute; top:100%; width:2px; height:2px; border-radius:50%; background:rgba(243,243,243,0.55); opacity:0; animation: moteDrift linear infinite; }
  .mote:nth-child(1){ left:8%;  animation-duration:46s; animation-delay:0s;  }
  .mote:nth-child(2){ left:22%; animation-duration:58s; animation-delay:6s;  }
  .mote:nth-child(3){ left:38%; animation-duration:51s; animation-delay:12s; }
  .mote:nth-child(4){ left:55%; animation-duration:63s; animation-delay:3s;  }
  .mote:nth-child(5){ left:68%; animation-duration:47s; animation-delay:18s; }
  .mote:nth-child(6){ left:78%; animation-duration:55s; animation-delay:9s;  }
  .mote:nth-child(7){ left:88%; animation-duration:60s; animation-delay:22s; }
  .mote:nth-child(8){ left:48%; animation-duration:44s; animation-delay:15s; }
  @keyframes moteDrift{
    0%{ transform:translate(0,0); opacity:0; }
    8%{ opacity:.16; }
    50%{ transform:translate(14px,-55vh); }
    92%{ opacity:.1; }
    100%{ transform:translate(-10px,-112vh); opacity:0; }
  }
  .grain{
    position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0.04; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* -------- viñeta de sala: profundidad global, sin elementos nuevos -------- */
  .room-vignette{
    position:absolute; inset:0; pointer-events:none; z-index:1;
    background: radial-gradient(ellipse 72% 62% at 50% 46%, transparent 42%, rgba(0,0,0,0.5) 100%);
  }


  .scene{
    position:relative; z-index:2; width:100%; max-width:640px; height:100%;
    display:flex; flex-direction:column; align-items:center;
    padding:28px 20px 88px; text-align:center;
    overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    /* centrado vertical cuando el contenido entra completo en pantalla; en navegadores
       que no soportan "safe" queda en flex-start, así el contenido largo nunca se
       recorta arriba de forma inalcanzable con scroll (bug clásico de justify-content:center) */
    justify-content: flex-start;
    justify-content: safe center;
  }
  .scene::-webkit-scrollbar{ width:0; height:0; }
  .fade-in{ animation: fadeIn 900ms ease forwards; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

  .waveform{ display:flex; align-items:center; gap:4px; height:26px; margin-bottom:36px; }
  .waveform span{ display:block; width:2px; background:var(--gray); border-radius:2px; animation: pulse 1.6s ease-in-out infinite; }
  .waveform span:nth-child(1){height:8px; animation-delay:0s;}
  .waveform span:nth-child(2){height:18px; animation-delay:.15s;}
  .waveform span:nth-child(3){height:10px; animation-delay:.3s;}
  .waveform span:nth-child(4){height:24px; animation-delay:.45s;}
  .waveform span:nth-child(5){height:12px; animation-delay:.6s;}
  .waveform span:nth-child(6){height:20px; animation-delay:.75s;}
  .waveform span:nth-child(7){height:9px; animation-delay:.9s;}
  @keyframes pulse{ 0%,100%{transform:scaleY(0.5); opacity:.5;} 50%{transform:scaleY(1); opacity:1;} }

  .voice-line{
    font-family:var(--font-display); font-weight:400; font-size:clamp(20px,4.6vw,28px);
    line-height:1.5; color:var(--smoke); max-width:520px; margin:0; opacity:0;
  }
  .voice-line.show{ animation: lineIn 900ms cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes lineIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
  .voice-line b{ color:var(--white); font-weight:700; }

  /* -------- orbe "Voz de la Verdad" — mismo diseño que Hub y Llamada (video real,
     con sus anillos), única otra excepción de color aprobada por Manuela -------- */
  .voice-orb{ position:relative; margin:0 auto 40px; }
  .voice-orb .orb-ring{ position:absolute; inset:-12.5%; border-radius:50%; border:1px solid rgba(45,212,191,0.35); animation: orb-pulse 3s ease-in-out infinite; }
  .voice-orb .orb-ring:nth-child(2){ inset:-25%; animation-delay:1s; }
  @keyframes orb-pulse{ 0%,100%{ transform:scale(0.94); opacity:.6; } 50%{ transform:scale(1.04); opacity:.15; } }
  .voice-orb .orb-circle{ position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; border:1.5px solid rgba(45,212,191,0.4); z-index:2; }
  .voice-orb .orb-video{ width:100%; height:100%; object-fit:cover; display:block; }
  .voice-orb.pre-speak{ animation: orbPreSpeak 650ms ease-in-out; }
  @keyframes orbPreSpeak{
    0%{ filter:brightness(1); transform:scale(1); }
    40%{ filter:brightness(0.72); transform:scale(0.97); }
    100%{ filter:brightness(1); transform:scale(1); }
  }

  /* -------- pantalla de activación de audio (gate) -------- */
  .gate-hero{ position:relative; width:110px; height:170px; margin:0 auto 32px; display:flex; align-items:center; justify-content:center; }
  .gate-hero .hero-key{ position:relative; width:56px; animation: heroFloat 3.6s ease-in-out infinite; }
  .gate-hero .hero-key svg{ width:56px; height:auto; }
  @keyframes heroFloat{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-10px) rotate(3deg); } }
  .gate-title{ font-family:var(--font-display); font-weight:400; font-size:22px; color:var(--smoke); margin:0 0 10px; letter-spacing:.01em; }
  .gate-message{ font-size:13px; color:var(--gray); line-height:1.65; max-width:280px; margin:0 0 8px; }

  /* -------- mosaico de llaves + tarjeta de resultado -------- */
  .key-mosaic{ position:relative; margin:4px auto 2px; }
  .mosaic-glow{
    position:absolute; left:50%; top:50%; width:52%; height:52%; transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0.22) 38%, transparent 72%);
    filter:blur(9px); animation: mosaicPulse 3s ease-in-out infinite;
  }
  @keyframes mosaicPulse{ 0%,100%{ opacity:.75; transform:translate(-50%,-50%) scale(0.9); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); } }
  .mosaic-keyhole{ position:absolute; left:50%; top:50%; width:22px; height:22px; transform:translate(-50%,-50%); z-index:2; }
  .mosaic-key{ position:absolute; width:17px; height:32px; z-index:1; }
  .mosaic-key svg{ width:100%; height:100%; }

  @keyframes cardReveal{
    0%{ opacity:0; transform: scale(0.93) translateY(18px); filter:brightness(1.35); }
    55%{ opacity:1; filter:brightness(1.1); }
    100%{ opacity:1; transform: scale(1) translateY(0); filter:brightness(1); }
  }
  @keyframes cardGlowPulse{
    0%,100%{ box-shadow:0 14px 34px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04); }
    50%{ box-shadow:0 14px 34px rgba(0,0,0,0.45), 0 0 30px 3px rgba(255,255,255,0.14); }
  }
  @keyframes sheenSweep{
    0%{ transform:translateX(-140%) rotate(12deg); opacity:0; }
    10%{ opacity:.7; }
    38%{ opacity:0; }
    100%{ transform:translateX(220%) rotate(12deg); opacity:0; }
  }
  .result-card{
    position:relative; margin:6px auto 26px; padding:28px 24px 24px; flex-shrink:0;
    border:1px solid var(--line-2); border-radius:8px; max-width:300px; overflow:hidden;
    background:radial-gradient(ellipse at 50% 20%, rgba(255,255,255,0.045), transparent 60%), linear-gradient(165deg, rgba(255,255,255,0.02), rgba(0,0,0,0.4));
    opacity:0;
    animation: cardReveal 900ms cubic-bezier(.2,.7,.2,1) 1.7s forwards, cardGlowPulse 4.5s ease-in-out 2.9s infinite;
  }
  .result-card::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(243,243,243,0.08); border-radius:5px; pointer-events:none; z-index:1; }
  .result-card::after{
    content:""; position:absolute; top:-30%; left:0; width:34%; height:160%; pointer-events:none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
    opacity:0; animation: sheenSweep 6s ease-in-out 3.1s infinite;
  }
  .result-card .archetype-tag{ font-size:9.5px; font-weight:700; letter-spacing:.2em; color:var(--gray); text-transform:uppercase; margin:14px 0 6px; }
  .result-card .archetype-name{ font-family:var(--font-display); font-style:italic; font-weight:700; font-size:28px; color:var(--white); margin:0 0 16px; }
  .result-card .card-indices{ display:flex; justify-content:center; gap:26px; }
  .result-card .card-indices .index{ width:96px; }

  .btn{
    font-family:var(--font-ui); font-weight:500;
    font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
    background:transparent; color:var(--smoke); border:1px solid var(--line-2);
    padding:15px 36px; cursor:pointer; border-radius:2px;
    transition: border-color .25s ease, background .25s ease, transform .15s ease;
  }
  .btn:active{ transform:scale(0.98); }
  .btn:focus-visible{ outline:1px solid var(--white); outline-offset:3px; }
  .btn[disabled]{ opacity:.3; cursor:not-allowed; }
  .btn-primary{ margin-top:24px; }

  .progress-rail{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:6; background:rgba(255,255,255,0.06); }
  .progress-rail i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, rgba(243,243,243,0.5), var(--white)); box-shadow:0 0 8px 1px rgba(255,255,255,.4); transition:width .6s cubic-bezier(.2,.7,.2,1); }

  .q-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--gray); margin-bottom:18px; text-transform:uppercase; }

  .q-text{ font-family:var(--font-display); font-weight:400; font-size:clamp(21px,4.6vw,28px); line-height:1.4; max-width:520px; margin:0 0 34px 0; color:var(--smoke); }
  .options{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:420px; }
  .option{
    font-family:var(--font-ui); font-weight:400; font-size:14px; text-align:left;
    color:var(--smoke); background:transparent; border:1px solid var(--line-1);
    padding:15px 18px; border-radius:2px; cursor:pointer;
    transition:border-color .2s ease, background .2s ease, padding-left .2s ease;
    display:flex; align-items:center; gap:12px;
  }
  .option:focus-visible{ outline:1px solid var(--white); outline-offset:2px; }
  .option .marker{ width:6px; height:6px; border-radius:50%; border:1px solid var(--gray); flex:none; }

  /* -------- variante grid: cada otra pregunta cambia de formato -------- */
  .options.grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; max-width:420px; width:100%; }
  .option-card{
    font-family:var(--font-ui); font-weight:500; font-size:13.5px; text-align:center; line-height:1.35;
    color:var(--smoke); background:transparent; border:1px solid var(--line-1);
    padding:18px 12px; border-radius:8px; cursor:pointer; min-height:82px; min-width:0;
    display:flex; align-items:center; justify-content:center; overflow-wrap:break-word; word-break:break-word;
    transition:border-color .2s ease, background .2s ease, transform .15s ease;
  }
  .option-card:active{ transform:scale(0.98); }
  .option-card:focus-visible{ outline:1px solid var(--white); outline-offset:2px; }
  .option-card.span-2{ grid-column:1 / -1; }

  /* -------- variante letras: lista con distintivo tipo trivia -------- */
  .options.letras{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:420px; }
  .option-letra{
    display:flex; align-items:center; gap:14px; text-align:left;
    font-family:var(--font-ui); font-weight:400; font-size:14px; color:var(--smoke);
    background:transparent; border:1px solid var(--line-1); border-radius:2px;
    padding:14px 16px; cursor:pointer; transition:border-color .2s ease, background .2s ease, padding-left .2s ease;
  }
  .option-letra:focus-visible{ outline:1px solid var(--white); outline-offset:2px; }
  .option-letra .letra-badge{
    flex:none; width:26px; height:26px; border-radius:4px; border:1px solid var(--line-2);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-style:italic; font-weight:700; font-size:13px; color:var(--gray);
    transition:border-color .2s ease, color .2s ease;
  }

  /* -------- formularios (nombre / contacto) -------- */
  .field-wrap{ display:flex; flex-direction:column; gap:6px; width:100%; max-width:420px; text-align:left; }
  .field-label{ font-size:10px; font-weight:700; letter-spacing:.18em; color:var(--gray); text-transform:uppercase; padding-left:2px; }
  .text-input, .select-input{
    width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line-1); border-radius:2px;
    padding:14px 16px; font-family:var(--font-ui); font-weight:400; font-size:16px;
    color:var(--smoke); outline:none; transition:border-color .2s ease, background .2s ease; -webkit-appearance:none;
  }
  /* Safari (iOS) y Chrome (Android) a veces ignoran `color` en un input y lo
     pintan con su propio texto oscuro sobre nuestro fondo oscuro — el usuario
     escribe y no ve nada. -webkit-text-fill-color fuerza el color real, y el
     override de :-webkit-autofill evita que el autocompletado imponga su fondo
     claro encima. Mismo fix ya aplicado en Snake, donde el bug se confirmó en
     un dispositivo real. */
  .text-input, .phone-number{ -webkit-text-fill-color:var(--smoke); caret-color:var(--smoke); }
  .text-input:-webkit-autofill,
  .text-input:-webkit-autofill:hover,
  .text-input:-webkit-autofill:focus,
  .phone-number:-webkit-autofill,
  .phone-number:-webkit-autofill:hover,
  .phone-number:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--smoke) !important;
    -webkit-box-shadow:0 0 0px 1000px #1a1a1a inset !important;
    transition:background-color 9999s ease-in-out 0s;
  }
  .text-input::placeholder{ color:rgba(243,243,243,0.25); }
  .text-input:focus, .select-input:focus{ border-color:var(--white); background:rgba(255,255,255,0.05); }
  .text-input.error, .phone-group.error{ border-color:rgba(214,90,90,0.6); }
  .select-input option{ background:#1c1c1c; color:var(--smoke); }
  .field-error{ font-size:10px; font-weight:500; color:rgba(214,110,110,0.85); letter-spacing:.05em; height:0; overflow:hidden; transition:height .2s ease; }
  .field-error.show{ height:16px; }
  .phone-group{
    width:100%; display:flex; align-items:stretch; background:rgba(255,255,255,0.03);
    border:1px solid var(--line-1); border-radius:2px; transition:border-color .2s ease, background .2s ease;
  }
  .phone-group:focus-within{ border-color:var(--white); background:rgba(255,255,255,0.05); }
  .phone-code{ padding:14px 12px; font-size:13px; color:var(--gray); white-space:nowrap; display:flex; align-items:center; }
  .phone-divider{ width:1px; background:var(--line-1); margin:8px 0; }
  .phone-number{ flex:1; min-width:0; background:transparent; border:none; padding:14px 16px; font-family:var(--font-ui); font-weight:400; font-size:16px; color:var(--smoke); outline:none; }
  .phone-number::placeholder{ color:rgba(243,243,243,0.25); }
  .microcopy{ font-size:10px; font-weight:500; color:var(--gray); letter-spacing:.03em; line-height:1.5; max-width:420px; }

  /* -------- texto completo del arquetipo, bajo la tarjeta de resultado -------- */
  .archetype-text{ text-align:left; max-width:480px; margin:26px 0 6px; }
  .archetype-text p{ font-family:var(--font-display); font-weight:400; font-size:19px; line-height:1.75; color:rgba(243,243,243,0.85); margin:0 0 16px; opacity:0; animation: lineIn 800ms ease forwards; }
  .archetype-text p:last-child{ margin-bottom:0; }
  .archetype-text.archetype-more{ margin-top:-10px; }
  .btn-text{
    background:none; border:none; cursor:pointer; font-family:var(--font-ui); font-weight:500;
    font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray);
    padding:6px 4px 22px; text-decoration:underline; text-underline-offset:4px;
    transition:color .2s ease;
  }

  /* -------- confirmación final -------- */
  .final-check{ width:64px; height:64px; flex-shrink:0; border-radius:50%; border:1px solid rgba(29,158,117,0.35); display:flex; align-items:center; justify-content:center; margin-bottom:22px; opacity:0; animation: checkPop 700ms cubic-bezier(.2,.8,.3,1.3) 200ms forwards; }
  .final-check svg{ width:26px; height:26px; }
  @keyframes checkPop{ 0%{ transform:scale(0.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
  .final-headline{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,6vw,34px); color:var(--white); margin-bottom:14px; opacity:0; animation: lineIn 800ms ease 500ms forwards; }
  .final-sub{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:15px; color:var(--gray); margin-bottom:22px; opacity:0; animation: lineIn 800ms ease 750ms forwards; }
  .final-eye{ font-size:26px; margin-bottom:26px; opacity:0; animation: lineIn 800ms ease 950ms forwards, eyePulse 3s ease-in-out infinite 1.8s; }
  @keyframes eyePulse{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }
  .channel-eyebrow{ font-size:10px; font-weight:300; letter-spacing:.2em; color:rgba(255,255,255,0.5); text-transform:uppercase; margin-bottom:16px; opacity:0; animation: lineIn 800ms ease 1150ms forwards; text-align:center; }

  .channel-list{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:360px; }
  .channel-card{
    display:flex; align-items:center; gap:12px; padding:13px 18px; border-radius:8px; flex-shrink:0;
    border:1px solid var(--line-2); text-decoration:none; color:var(--smoke);
    opacity:0; animation: lineIn 700ms ease forwards; transition: transform .2s ease, border-color .2s ease;
  }
  .channel-card:nth-child(1){ animation-delay:1.3s; }
  .channel-card:nth-child(2){ animation-delay:1.45s; }
  .channel-card:nth-child(3){ animation-delay:1.6s; }
  .channel-card.tg{ background:rgba(41,182,246,0.08); border-color:rgba(41,182,246,0.25); }
  .channel-card.wa{ background:rgba(37,211,102,0.08); border-color:rgba(37,211,102,0.25); }
  .channel-card.ig{ background:rgba(225,48,108,0.08); border-color:rgba(225,48,108,0.25); }
  .channel-icon{ width:32px; height:32px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
  .channel-card.tg .channel-icon{ background:rgba(41,182,246,0.15); }
  .channel-card.wa .channel-icon{ background:rgba(37,211,102,0.15); }
  .channel-card.ig .channel-icon{ background:rgba(225,48,108,0.15); }
  .channel-info{ flex:1; text-align:left; min-width:0; }
  .channel-name{ font-family:var(--font-ui); font-weight:500; font-size:13.5px; color:var(--white); }
  .channel-handle{ font-family:var(--font-ui); font-weight:400; font-size:11.5px; color:var(--gray); margin-top:2px; }
  .channel-chevron{ opacity:.4; flex:none; }

  .share-divider{ display:flex; align-items:center; gap:12px; width:100%; max-width:360px; margin:26px 0 16px; opacity:0; animation: lineIn 700ms ease 1800ms forwards; }
  .share-divider::before, .share-divider::after{ content:""; flex:1; height:1px; background:var(--line-2); }
  .share-divider span{ font-size:9.5px; font-weight:700; letter-spacing:.2em; color:var(--gray); text-transform:uppercase; white-space:nowrap; }

  .share-card{
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:360px;
    padding:16px; border:1px solid rgba(255,255,255,0.5); border-radius:4px; margin:0;
    background:linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%);
    font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--smoke);
    opacity:0; animation: lineIn 700ms ease 1950ms forwards, cta-breathe 3s ease-in-out infinite;
  }
  @keyframes cta-breathe{
    0%,100%{ box-shadow:0 0 24px rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5); }
    50%{ box-shadow:0 0 36px rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.75); }
  }

  .quick-actions{ display:flex; gap:10px; width:100%; max-width:360px; margin-top:14px; opacity:0; animation: lineIn 700ms ease 2100ms forwards; }
  .quick-btn{
    flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 8px;
    border:1px solid rgba(255,255,255,0.07); border-radius:4px; cursor:pointer; background:rgba(255,255,255,0.02); color:rgba(255,255,255,0.5);
    font-family:var(--font-ui); font-size:9px; font-weight:300; letter-spacing:.15em; text-transform:uppercase;
    transition:border-color .2s ease, color .2s ease, background .2s ease;
  }

  /* -------- HUD compacto de llaves (pantallas de preguntas) -------- */
  #inventory{
    position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:10;
    background:rgba(14,14,14,0.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    padding:13px 22px 12px; display:flex; align-items:center; gap:16px;
    border:1px solid var(--line-2); border-radius:26px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset;
    max-width:92vw;
  }
  #inventory .inv-label{ font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--gray); white-space:nowrap; }
  #inventory .inv-slots{ display:flex; gap:9px; flex-wrap:nowrap; overflow-x:auto; max-width:min(74vw,480px); scrollbar-width:none; scroll-behavior:smooth; }
  #inventory .inv-slots::-webkit-scrollbar{ width:0; height:0; }
  #inventory .slot{ width:38px; height:52px; flex:none; }
  #inventory .slot svg{ width:22px; height:42px; }

  /* -------- llave (slot) — usada en el HUD y en la vault de la puerta -------- */
  .slot{
    width:64px; height:88px; border-radius:8px; position:relative;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg, rgba(255,255,255,0.035), rgba(0,0,0,0.3));
    border:1px solid var(--line-2);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: transform .25s cubic-bezier(.2,.8,.3,1.2), box-shadow .25s ease;
  }
  .slot::before{ content:""; position:absolute; inset:4px; border:1px solid rgba(243,243,243,0.06); border-radius:3px; pointer-events:none; }
  .slot.empty{ border-color:rgba(138,140,142,0.22); }
  .slot.empty .lock-icon{ opacity:.4; }
  .slot.filled{
    animation: slotPop 480ms cubic-bezier(.2,.8,.3,1.3);
    border-color: var(--kcolor, var(--white));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 0 14px -2px var(--kcolor, transparent), 0 0 4px var(--kcolor, transparent);
  }
  .slot.filled::after{
    content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
    width:65%; height:7px; border-radius:50%;
    background: radial-gradient(ellipse, var(--kcolor, transparent), transparent 70%);
    opacity:.65; filter:blur(1.5px);
  }
  .slot.filled svg{ animation: keyShimmer 3.2s ease-in-out infinite, keyBob 3.4s ease-in-out infinite; animation-delay: 0s, calc(var(--stagger,0) * 140ms); transform-origin:50% 50%; }
  @keyframes keyShimmer{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.4); } }
  @keyframes keyBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
  @keyframes slotPop{ 0%{ transform:scale(0.3) rotate(-6deg); } 55%{ transform:scale(1.15) rotate(3deg); } 100%{ transform:scale(1) rotate(0); } }
  .slot svg{ width:34px; height:64px; position:relative; z-index:1; }
  .slot.selectable{ cursor:pointer; }
  .slot.selected{ transform:translateY(-10px) scale(1.3); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 0 34px 3px var(--kcolor, white); z-index:3; }
  .slot:focus-visible{ outline:1px solid var(--white); outline-offset:2px; }

  /* -------- vault: tarjeta de llaves, subordinada a la puerta -------- */
  .door-controls .key-vault{ margin-bottom:24px; }
  .key-vault{
    position:relative; padding:26px 24px 22px; border-radius:14px;
    border:1px solid var(--line-2); width:min(360px,92vw);
    background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.055), transparent 60%), linear-gradient(165deg, rgba(255,255,255,0.035), rgba(0,0,0,0.4));
    box-shadow:0 18px 42px rgba(0,0,0,0.5);
  }
  .key-vault::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(243,243,243,0.07); border-radius:10px; pointer-events:none; }
  .vault-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px 14px; justify-items:center; }

  /* -------- header de la vault: label + spotlight compacto al lado, no arriba.
     El spotlight muestra SIEMPRE una sola llave (la última tocada) — nunca dos a la vez,
     aunque el mecanismo siga permitiendo tener 2 seleccionadas para insertar. Así el
     usuario nunca ve "dos llaves elegidas" como un bloque, solo un cambio de foco. -------- */
  .vault-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; min-height:40px; }
  .vault-label{ font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gray); text-align:left; }
  .vault-spotlight{ position:relative; width:30px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; }
  .vault-spotlight:not(:empty)::before{
    content:""; position:absolute; inset:-12px; border-radius:50%; z-index:-1;
    background:radial-gradient(circle, var(--kcolor, rgba(243,243,243,0.5)), transparent 70%);
    opacity:.45; filter:blur(9px); animation: glowPulse 1.8s ease-in-out infinite;
  }
  .spotlight-key{ width:100%; height:100%; animation: stageFill 420ms cubic-bezier(.2,.8,.25,1.2); }
  .spotlight-key svg{ width:100%; height:100%; animation: keyShimmer 2.4s ease-in-out infinite; }
  @keyframes stageFill{
    0%{ transform:scale(0.4) rotate(-10deg); opacity:0; }
    55%{ transform:scale(1.18) rotate(4deg); opacity:1; }
    100%{ transform:scale(1) rotate(0); opacity:1; }
  }

  /* llave volando hacia el inventario */
  .flying-key{ position:fixed; z-index:50; pointer-events:none; transition: transform 620ms cubic-bezier(.3,.6,.25,1), opacity 620ms ease; }
  .flying-key svg{ width:26px; height:48px; }

  /* -------- revelación de llave (momento "loot") -------- */
  .key-reveal{
    position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0); transition:background 350ms ease; pointer-events:auto;
  }
  .key-reveal.show{ background:rgba(0,0,0,0.6); }
  .reveal-rays{
    position:absolute; width:360px; height:360px; opacity:0;
    background: conic-gradient(from 0deg,
      transparent 0deg, var(--kcolor) 3deg, transparent 10deg, transparent 40deg,
      var(--kcolor) 43deg, transparent 50deg, transparent 90deg,
      var(--kcolor) 93deg, transparent 100deg, transparent 140deg,
      var(--kcolor) 143deg, transparent 150deg, transparent 190deg,
      var(--kcolor) 193deg, transparent 200deg, transparent 240deg,
      var(--kcolor) 243deg, transparent 250deg, transparent 290deg,
      var(--kcolor) 293deg, transparent 300deg, transparent 340deg,
      var(--kcolor) 343deg, transparent 350deg);
    filter: blur(3px); mix-blend-mode: screen; animation: rayRotate 7s linear infinite;
  }
  .key-reveal.show .reveal-rays{ opacity:.32; transition:opacity 550ms ease; }
  @keyframes rayRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  .reveal-glow{
    position:absolute; width:210px; height:210px; border-radius:50%;
    background:radial-gradient(circle, var(--kcolor), transparent 70%);
    opacity:0; filter:blur(8px); mix-blend-mode:screen; animation: glowPulse 1.8s ease-in-out infinite;
  }
  .key-reveal.show .reveal-glow{ opacity:.34; transition:opacity 550ms ease; }
  @keyframes glowPulse{ 0%,100%{ transform:scale(0.9); } 50%{ transform:scale(1.08); } }
  .reveal-key{ position:relative; z-index:2; width:56px; transform:scale(0.35); opacity:0; transition: transform 750ms cubic-bezier(.2,.9,.25,1.3), opacity 500ms ease; }
  .reveal-key svg{ width:56px; height:auto; filter:drop-shadow(0 0 3px var(--kcolor)) drop-shadow(0 0 14px var(--kcolor)) drop-shadow(0 0 34px var(--kcolor)); }
  .key-reveal.show .reveal-key{ transform:scale(1); opacity:1; }
  .key-reveal.collapsing{ background:rgba(0,0,0,0); }
  .key-reveal.collapsing .reveal-key{ transition: transform 560ms cubic-bezier(.4,0,.6,1), opacity 400ms ease 300ms; }
  .key-reveal.collapsing .reveal-rays, .key-reveal.collapsing .reveal-glow{ opacity:0; transition:opacity 300ms ease; }
  .reveal-label{ position:absolute; bottom:32%; font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--smoke); opacity:0; transition:opacity 500ms ease 250ms; }
  .key-reveal.show .reveal-label{ opacity:1; }
  .key-reveal.collapsing .reveal-label{ opacity:0; transition:opacity 200ms ease; }

  /* -------- interrupción (beat mudo) -------- */
  .interrupt-line{ width:1px; height:60px; background:var(--line-2); animation: growLine 1.6s ease forwards; }
  @keyframes growLine{ from{height:0;} to{height:60px;} }
  .interrupt-dots{ display:flex; gap:8px; margin-top:26px; }
  .interrupt-dots span{ width:4px; height:4px; border-radius:50%; background:var(--gray); animation: dot 1.4s ease-in-out infinite; }
  .interrupt-dots span:nth-child(2){animation-delay:.2s;}
  .interrupt-dots span:nth-child(3){animation-delay:.4s;}
  @keyframes dot{ 0%,100%{opacity:.25;} 50%{opacity:1;} }

  /* -------- puerta: jerarquía — la puerta es la protagonista, todo lo demás es apoyo -------- */
  .door-scene{ max-width:760px; padding-bottom:40px; }

  /* HUD de intentos: compacto, discreto, no compite con la puerta */
  .attempts-hud{ display:flex; align-items:center; gap:9px; margin-bottom:22px; }
  .attempts{ display:flex; gap:7px; align-items:center; }
  .attempts .dot{ width:6px; height:6px; border-radius:50%; border:1px solid var(--gray); transition:all .3s ease; }
  .attempts .dot.spent{ background:transparent; border-color:rgba(138,140,142,0.22); }
  .attempts .dot.live{ background:var(--smoke); border-color:var(--smoke); }
  .attempts-hud-label{ font-size:9px; font-weight:700; letter-spacing:.18em; color:rgba(138,140,142,0.65); text-transform:uppercase; }

  /* la puerta: elemento hero, con espacio propio para respirar */
  .door-stage{ display:flex; flex-direction:column; align-items:center; }

  /* aviso metafórico: una inscripción bajo la puerta, no un titular que compite con ella */
  .door-notice{ max-width:320px; margin:20px 0 0; text-align:center; }
  .door-notice-eyebrow{ font-size:8.5px; font-weight:700; letter-spacing:.22em; color:rgba(138,140,142,0.6); text-transform:uppercase; margin-bottom:6px; }
  .door-notice p{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:13.5px; line-height:1.5; color:rgba(243,243,243,0.6); }

  /* zona de control: la vault y la acción, claramente subordinadas a la puerta */
  .door-controls{ display:flex; flex-direction:column; align-items:center; margin-top:36px; }

  /* -------- momento de apertura: flash + mensaje central -------- */
  .door-flash{ position:fixed; inset:0; z-index:45; background:#fff; opacity:0; pointer-events:none; transition:opacity 160ms ease; }
  .door-flash.show{ opacity:.5; }
  /* toda la página se atenúa detrás de la moraleja — la Voz vuelve a ser el único foco,
     igual que en bienvenida/interrupción/umbral, para que no compita con la puerta abierta */
  .page-dim{ position:fixed; inset:0; z-index:40; background:#000; opacity:0; pointer-events:none; transition:opacity 900ms ease; }
  .page-dim.show{ opacity:.78; }
  .door-reveal-wrap{
    position:fixed; z-index:42; left:50%; top:50%; transform:translate(-50%,-50%);
    pointer-events:none; width:88vw; max-width:420px;
    display:flex; flex-direction:column; align-items:center;
  }
  .door-reveal-wrap .voice-orb{ margin:0 0 30px; }
  .door-reveal-lines{ min-height:90px; display:flex; align-items:center; justify-content:center; }
  .door-reveal-text{
    font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(19px,4.4vw,26px);
    color:var(--white); text-align:center; opacity:0;
    text-shadow:0 0 24px rgba(255,255,255,0.55), 0 3px 16px rgba(0,0,0,0.85);
    transition: opacity 700ms ease, transform 700ms ease;
    transform:translateY(10px); margin:0;
  }
  .door-reveal-text.show{ opacity:1; transform:translateY(0); }
  .door-wrap.dimmed svg{ transition:opacity 550ms ease; opacity:.32; }

  .door-wrap{ position:relative; width:260px; margin:0 auto 10px; }
  .door-wrap svg{ width:100%; height:auto; overflow:visible; animation: doorLive 6.5s ease-in-out infinite; transform-origin:50% 62%; }
  .door-wrap.open svg{ animation:none; }
  @keyframes doorLive{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.008); } }
  .door-panel{ transform-origin:left center; transition: transform 2.2s cubic-bezier(.16,.6,.18,1); }
  .door-panel.right{ transform-origin:right center; }
  .door-wrap.open .door-panel.left{ transform:rotateY(56deg) translateX(-2px); }
  .door-wrap.open .door-panel.right{ transform:rotateY(-56deg) translateX(2px); }
  .door-inner-glow{ opacity:.22; transition:opacity 1.2s ease; animation: anticipation 4.5s ease-in-out infinite; }
  .door-wrap.open .door-inner-glow{ opacity:1; animation:none; }
  @keyframes anticipation{ 0%,100%{ opacity:.16; } 50%{ opacity:.34; } }
  .door-breathe{ animation: breathe 5s ease-in-out infinite; }
  @keyframes breathe{ 0%,100%{opacity:.55;} 50%{opacity:.95;} }

  /* -------- ojo oculto en la cerradura: casi invisible, parpadea solo -------- */
  .eye-pupil{ transform-box:fill-box; transform-origin:center; animation: eyeBlink 6s ease-in-out infinite; }
  @keyframes eyeBlink{
    0%, 91%, 100%{ transform:scaleY(1); opacity:.3; }
    94%{ transform:scaleY(0.12); opacity:.15; }
    97%{ transform:scaleY(1); opacity:.3; }
  }
  .eye-pupil.eye-startled{ animation: eyeStartle 550ms ease; }
  @keyframes eyeStartle{
    0%{ transform:scaleY(1); opacity:.3; }
    20%{ transform:scaleY(0.1); opacity:.15; }
    40%{ transform:scaleY(1.35); opacity:.6; }
    60%{ transform:scaleY(0.1); opacity:.15; }
    100%{ transform:scaleY(1); opacity:.3; }
  }
  .door-seam-glow{ opacity:.15; animation: seamPulse 4s ease-in-out infinite; }
  @keyframes seamPulse{ 0%,100%{opacity:.1;} 50%{opacity:.3;} }
  .door-wrap.open .door-seam-glow{ opacity:0; }

  #keyhole-1 circle, #keyhole-1 path, .keyhole-2 circle, .keyhole-2 path{ transition: stroke 700ms ease; }
  .keyhole-2{ opacity:0; transition:opacity 900ms ease; }
  .keyhole-2.kh-lit{ opacity:1; animation: khAppear 900ms ease; }
  @keyframes khAppear{ from{opacity:0; transform:scale(.6);} to{opacity:1; transform:scale(1);} }
  @keyframes khGlimmer{ 0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0));} 50%{filter:drop-shadow(0 0 6px rgba(255,255,255,.4));} }
  /* -------- brillo de las DOS llaves correctas — más largo y marcado que el flash
     neutro de un fallo, para que se note que hicieron falta las dos a la vez -------- */
  #keyhole-1.kh-success, .keyhole-2.kh-success{ animation: khSuccessPulse 2200ms ease-in-out forwards; }
  @keyframes khSuccessPulse{
    0%{ filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
    30%{ filter:drop-shadow(0 0 14px rgba(255,255,255,1)); }
    65%{ filter:drop-shadow(0 0 10px rgba(255,255,255,0.8)); }
    100%{ filter:drop-shadow(0 0 6px rgba(255,255,255,0.55)); }
  }

  .door-shake{ animation: shake .45s ease; }
  @keyframes shake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(7px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);} }

  .fail-msg{ min-height:20px; font-size:12.5px; color:var(--gray); font-weight:500; margin-bottom:16px; max-width:320px; text-align:center; line-height:1.4; }
  .fail-msg strong{ color:var(--white); font-weight:700; }

  /* -------- resultado -------- */
  .result-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--gray); margin-bottom:22px; text-transform:uppercase; }
  .insight-line{ font-family:var(--font-display); font-weight:400; font-size:clamp(18px,3.8vw,22px); color:var(--smoke); line-height:1.55; max-width:480px; margin:0 0 12px 0; opacity:0; animation: lineIn 900ms ease forwards; }
  .bridge-line{ font-family:var(--font-display); font-style:italic; font-weight:700; font-size:clamp(19px,4.2vw,24px); color:var(--white); line-height:1.5; max-width:480px; margin:22px 0 30px; opacity:0; animation: lineIn 1000ms ease forwards; }
  .indices{ display:flex; gap:36px; margin-bottom:30px; }
  .index{ width:120px; }
  .index-label{ font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--gray); margin-bottom:10px; text-transform:uppercase; }
  .index-bar{ width:100%; height:5px; border-radius:3px; background:var(--line-1); position:relative; margin-bottom:8px; overflow:hidden; }
  .index-bar i{ position:absolute; left:0; top:0; height:100%; border-radius:3px; background:linear-gradient(90deg, rgba(243,243,243,0.5), var(--white)); box-shadow:0 0 10px 1px rgba(255,255,255,0.5); width:0%; transition:width 1.4s cubic-bezier(.2,.7,.2,1); }
  .index-value{ font-size:13px; color:var(--smoke); font-weight:700; }

  /* -------- estados :hover — solo para dispositivos con puntero real (mouse/trackpad).
     En touch, tocar un botón deja el :hover "pegado" hasta el próximo toque en otro lugar
     (bug clásico de WebKit/Chrome mobile); si la siguiente pantalla renderiza una opción
     nueva en esa misma posición, hereda el hover fantasma y parece pre-seleccionada.
     Ese mismo problema pasa en DESKTOP aunque el mouse no se mueva: al recrearse la
     escena, el navegador reevalúa :hover contra la posición actual del cursor, y si la
     nueva opción cae justo donde estaba el botón anterior, aparece "ya elegida" sin que
     el usuario haya hecho nada. body.hover-locked (agregado un instante en cada render()
     y quitado en el primer mousemove real) bloquea el estilo de hover hasta que el
     usuario mueva el mouse de verdad sobre la pantalla nueva. -------- */
  @media (hover:hover) and (pointer:fine){
    body:not(.hover-locked) .btn:hover{ border-color:var(--white); background:rgba(255,255,255,0.05); }
    body:not(.hover-locked) .btn[disabled]:hover{ border-color:var(--line-2); background:transparent; }
    body:not(.hover-locked) .option:hover{ border-color:var(--line-2); background:rgba(255,255,255,0.03); padding-left:22px; }
    body:not(.hover-locked) .option-card:hover{ border-color:var(--line-2); background:rgba(255,255,255,0.04); transform:translateY(-3px); }
    body:not(.hover-locked) .option-letra:hover{ border-color:var(--line-2); background:rgba(255,255,255,0.03); padding-left:20px; }
    body:not(.hover-locked) .option-letra:hover .letra-badge{ border-color:var(--white); color:var(--white); }
    body:not(.hover-locked) .btn-text:hover{ color:var(--white); }
    body:not(.hover-locked) .channel-card:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,0.35); }
    body:not(.hover-locked) .quick-btn:hover{ border-color:rgba(255,255,255,0.35); color:var(--smoke); }
    body:not(.hover-locked) .slot.selectable:hover{ transform:translateY(-5px) scale(1.1); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 0 22px -1px var(--kcolor, rgba(255,255,255,.4)); z-index:2; }
  }

  @media (max-width:480px){
    .scene{ padding:20px 16px 76px; }
    .gate-hero{ width:88px; height:130px; margin-bottom:22px; }
    .result-card{ padding:22px 18px 18px; }
    .indices{ gap:22px; } .index{ width:100px; }
    .channel-list{ gap:8px; }
    .quick-actions{ gap:8px; }

    /* -------- /puerta comprimida: puerta + llaves + Insertar deben caber en una pantalla -------- */
    .door-scene{ padding-top:10px; padding-bottom:12px; }
    .attempts-hud{ margin-bottom:8px; }
    .door-wrap{ width:128px; }
    .door-notice{ margin-top:10px; max-width:280px; }
    .door-notice-eyebrow{ margin-bottom:3px; }
    .door-notice p{ font-size:12px; line-height:1.4; }
    .door-controls{ margin-top:10px; }
    .door-controls .key-vault{ margin-bottom:12px; }
    .key-vault{ padding:12px 10px 10px; width:min(300px,94vw); }
    .vault-header{ margin-bottom:10px; min-height:34px; }
    .vault-spotlight{ width:26px; height:34px; }
    .vault-grid{ gap:7px 6px; }
    .slot{ width:38px; height:53px; }
    .slot svg{ width:21px; height:39px; }
    .fail-msg{ min-height:16px; margin-bottom:8px; font-size:11px; max-width:260px; }
    .btn-primary{ margin-top:0; }
  }
  /* -------- /puerta en viewports bajos (celulares chicos o navegador in-app de
     WhatsApp, que recorta ~120-150px de alto con su propia barra fija): la compresión
     de arriba no alcanza y el botón Insertar queda fuera de pantalla sin scroll -------- */
  @media (max-width:480px) and (max-height:620px){
    .door-wrap{ width:96px; }
    .attempts-hud{ margin-bottom:4px; }
    .door-notice{ margin-top:6px; }
    .door-notice p{ font-size:11px; line-height:1.3; }
    .door-controls{ margin-top:6px; }
    .key-vault{ padding:8px 8px; }
    .vault-header{ min-height:26px; margin-bottom:6px; }
    .vault-grid{ gap:5px; }
    .slot{ width:34px; height:46px; }
    .slot svg{ width:19px; height:34px; }
    .fail-msg{ min-height:14px; margin-bottom:5px; font-size:10px; }
  }
  /* caso extremo: teléfonos muy chicos dentro de un navegador in-app */
  @media (max-width:480px) and (max-height:540px){
    .door-wrap{ width:80px; }
    .door-notice p{ font-size:10.5px; }
    .vault-grid{ gap:4px; }
    .slot{ width:32px; height:42px; }
    .slot svg{ width:18px; height:31px; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }