/* ═══════════════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════════════ */
:root {
  --azul:   #1900ff;
  --cyan:   #eb0ca4;
  --violet: #8B7CFF;
  --rosa:   #FF5EA8;
  --turq:   #4EF5D6;
  --gold:   #112ff2;
  --dark:   #030716;
  --dark2:  #080a87;
  --blanco: #86e217;
  --muted:  rgba(247,251,255,0.45);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%;
  background:var(--dark);
  overflow:hidden;
  font-family:'Syne',sans-serif;
  color:var(--blanco);
  touch-action:none;
}

.stage {
  position:relative;
  width:100vw;
  height:100vh;
  overflow-y:auto; overflow-x:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.bg-cosmos {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 10%, rgba(0,200,255,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 10% 85%, rgba(139,124,255,0.07) 0%, transparent 50%),
    radial-gradient(ellipse 40% 60% at 92% 55%, rgba(255,94,168,0.05) 0%, transparent 50%),
    var(--dark);
}
#stars { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
#e1Stars { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.star {
  position:absolute; background:#fff; border-radius:50%;
  animation:twinkle var(--d) ease-in-out infinite var(--delay);
  opacity:0;
}
@keyframes twinkle { 0%,100%{opacity:0;} 50%{opacity:var(--o);} }

.scan {
  position:absolute; left:0; right:0; height:1px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,200,255,0.3),rgba(0,200,255,0.8),rgba(0,200,255,0.3),transparent);
  animation:scanMove 12s linear infinite;
}
@keyframes scanMove {
  0%{top:-2px;opacity:0;} 5%{opacity:1;} 95%{opacity:1;} 100%{top:100%;opacity:0;}
}

.corner { position:absolute; z-index:3; pointer-events:none; width:20px; height:20px; opacity:0.35; }
.c-tl { top:10px; left:10px; border-top:1.5px solid var(--azul); border-left:1.5px solid var(--azul); }
.c-tr { top:10px; right:10px; border-top:1.5px solid var(--azul); border-right:1.5px solid var(--azul); }
.c-bl { bottom:10px; left:10px; border-bottom:1.5px solid var(--azul); border-left:1.5px solid var(--azul); }
.c-br { bottom:10px; right:10px; border-bottom:1.5px solid var(--azul); border-right:1.5px solid var(--azul); }

.layout {
  position:relative; z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
  padding:0;
}

.header {
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vh,24px) 16px clamp(8px,1.5vh,14px);
  position:relative;
  width:100%;
}
.header-logo {
  width:clamp(240px,68vw,400px); height:auto;
  filter:drop-shadow(0 0 16px rgba(0,200,255,0.35));
  opacity:0;
  animation:fadeIn 0.8s ease 0.1s forwards;
}
@keyframes fadeIn {from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);}}

.music-btn {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,0.5); border:1px solid rgba(0,200,255,0.35);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; color:#fff;
  transition:all 0.3s; z-index:10;
}
.music-btn:hover { border-color:var(--azul); box-shadow:0 0 12px rgba(0,200,255,0.5); }

.col-center {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative;
  width:100%;
  padding-top: 4vh;
}

#canvas-wrap {
  width:min(94vw, 480px);
  height:min(94vw, 480px);
  position:relative;
  cursor:grab;
}
#canvas-wrap:active { cursor:grabbing; }
#canvas-wrap canvas { display:block; width:100%!important; height:100%!important; }

.cubo-tagline {
  text-align:center;
  margin-top:clamp(10px,2vh,18px);
  opacity:0;
  animation:fadeIn 1s ease 1.0s forwards;
}
.ct-main {
  font-size:clamp(1.275rem,6vw,2.075rem); font-weight:800;
  letter-spacing:0.02em; line-height:1.15;
  background: linear-gradient(90deg, #FFFFFF 0%, #1F3A8A 15%, #6B2FBF 40%, #E91E8C 60%, #F15808 80%, #E91E63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ct-main em { font-style:normal; color:var(--rosa); }

/* "¡DETENTE... / Y VÍVELA!" bajo el cubo 3D — mismo estilo que Escena 1 */
.e2-detente {
  display: inline-block;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #FFFFFF;
  color: #FFFFFF;
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 6vw, 38px);
  letter-spacing: .5em;
  text-shadow:
    0 0 12px rgba(255,255,255,.85),
    0 0 34px rgba(150,130,255,.55),
    0 2px 0 rgba(0,0,0,.35);
}
.e2-y-vive {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 8vw, 50px);
  letter-spacing: .28em;
  background-image: linear-gradient(90deg, #1F3A8A 0%, #6B2FBF 30%, #E91E8C 58%, #F15808 80%, #E91E63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ct-sub {
  font-size:clamp(0.9rem,2.5vw,1rem); letter-spacing:0.1em;
  text-transform:uppercase; color:#fff; margin-top:6px;
  font-family:'Inter',sans-serif;
}

.heart-pulse {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:100px; height:100px;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
  cursor:pointer;
  opacity:0;
  transition:opacity 10s ease;
}
.heart-pulse.active { opacity:1; }
.hp-ring {
  position:absolute;
  width:50px; height:50px;
  border:3px solid var(--rosa);
  border-radius:50%;
  animation:hpPulse 2.2s ease-out infinite, hpRingElectro 3s linear infinite;
}
.hp-ring2 { animation-delay:1.1s; }
@keyframes hpPulse {
  0%   { transform:scale(0.6); opacity:0.9; }
  100% { transform:scale(2.4); opacity:0; }
}
.hp-label {
  position:absolute;
  top:64px;
  font-family:'Inter',sans-serif;
  font-size:clamp(0.85rem, 2.2vw, 1rem);
  text-transform:uppercase;
  letter-spacing:0.06em;
  white-space:nowrap;
  font-weight:700;
  background: linear-gradient(90deg, #FFFFFF 0%, #1F3A8A 15%, #6B2FBF 40%, #E91E8C 60%, #F15808 80%, #E91E63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(233,30,140,.55));
  animation:hpLabelPulse 2.2s ease-in-out infinite;
}
@keyframes hpLabelPulse {
  0%%, 100%% { opacity:0.85; transform:scale(1); }
  50%%      { opacity:1; transform:scale(1.06); }
}
.hp-heart {
  position:absolute;
  font-size:48px;
  line-height:1;
  animation:hpBreathe 2.2s ease-in-out infinite, hpHeartElectro 3s linear infinite;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.85)) drop-shadow(0 0 45px rgba(233,30,140,0.6));
  z-index:2;
}
@keyframes hpBreathe {
  0%, 100% { transform:rotate(0deg) scale(1); }
  50%      { transform:rotate(0deg) scale(1.32); }
}
@keyframes iaBreathe {
  0%, 100% { transform:rotate(0deg) scale(1); }
  50%      { transform:rotate(0deg) scale(1.1); }
}

.historias-carousel {
  width:100%;
  margin-top:clamp(18px,3vh,28px);
  padding:0 16px;
  overflow:hidden;
}
.hc-title {
  font-size:1.025rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#fff;
  font-family:'Inter',sans-serif;
  margin-bottom:12px;
  text-align:center;
}
.hc-track {
  display:flex;
  gap:10px;
  width:max-content;
  animation:marqueeScroll 26s linear infinite;
}
.hc-track:hover,
.hc-track:active {
  animation-play-state:paused;
}
@keyframes marqueeScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

.det-chip, .det-chip-r {
  flex:0 0 auto;
  width:170px;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.08);
  border-left:2px solid var(--c, var(--azul));
  border-radius:10px;
  padding:10px 12px;
  font-size:0.875rem;
  color:#fff;
  line-height:1.3;
}
.det-chip span, .det-chip-r span {
  display:block; font-size:1em; color:#fff; opacity:0.9; margin-top:3px;
}

.heart-badge {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:6px;
  cursor:pointer;
}
.heart-badge .heart-orb {
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,94,168,0.95),rgba(255,20,100,0.2));
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  animation:heartbeat 1.5s ease-in-out infinite;
  box-shadow:0 0 18px rgba(255,94,168,0.6);
}
@keyframes heartbeat {
  0%,100%{transform:scale(1);}
  15%{transform:scale(1.2);}
  30%{transform:scale(1);}
  45%{transform:scale(1.08);}
}

.footer-bar {
  grid-column: 1 / 4;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(8px,1.5vh,14px) 16px clamp(10px,2vh,18px);
  gap:6px;
}
.ia-hint {
  font-size:clamp(1.375rem, 3vw, 1.5rem);
  color:#fff;
  text-align:center;
  max-width:320px;
  font-family:'Inter',sans-serif;
  line-height:1.3;
  opacity:0;
  animation:fadeIn 0.8s ease 0.9s forwards;
}

.ia-bar {
  display:flex; align-items:center; gap:10px;
  background:rgba(0,0,0,0.5);
  border:1px solid rgba(139,124,255,0.2);
  border-radius:50px; padding:8px 18px;
  backdrop-filter:blur(14px);
  max-width:380px; width:100%;
  opacity:0; animation:fadeIn 0.8s ease 1.2s forwards;
}
.ia-logo { width:32px; height:32px; flex-shrink:0; }
.ia-wave {
  flex:1; height:20px; display:flex; align-items:center; gap:2px;
}
.wbar {
  flex:1; border-radius:2px; background:var(--violet); max-width:4px;
  animation:waveA 0.8s ease-in-out infinite;
}
.wbar:nth-child(1){height:3px;animation-delay:0s;}
.wbar:nth-child(2){height:8px;animation-delay:0.1s;}
.wbar:nth-child(3){height:14px;animation-delay:0.2s;}
.wbar:nth-child(4){height:18px;animation-delay:0.3s;}
.wbar:nth-child(5){height:14px;animation-delay:0.4s;}
.wbar:nth-child(6){height:8px;animation-delay:0.5s;}
.wbar:nth-child(7){height:3px;animation-delay:0.6s;}
@keyframes waveA {0%,100%{transform:scaleY(0.4);opacity:0.5;} 50%{transform:scaleY(1);opacity:1;}}

.ia-text { display:flex; flex-direction:column; }
.ia-name { font-size:0.95rem; font-weight:700; letter-spacing:0.1em; color:var(--violet); }
.ia-status { font-size:0.8rem; color:var(--muted); font-style:italic; font-family:'Inter',sans-serif; }

.ia-cta {
  padding:7px 14px;
  background:linear-gradient(135deg,var(--violet),var(--rosa));
  border:none; border-radius:20px;
  font-family:'Syne',sans-serif; font-size:0.6rem; font-weight:700;
  color:#fff; cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; gap:4px;
  transition:all 0.2s;
}
.ia-cta:hover { transform:scale(1.05); box-shadow:0 0 14px rgba(139,124,255,0.5); }

.tagline-bottom {
  font-size:clamp(0.975rem,2vw,1.125rem); letter-spacing:0.15em;
  text-transform:uppercase;
  background: linear-gradient(90deg, #FFFFFF 0%, #1F3A8A 15%, #6B2FBF 40%, #E91E8C 60%, #F15808 80%, #E91E63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family:'Inter',sans-serif;
}

.detonador-overlay {
  position:absolute; inset:0; z-index:20;
  pointer-events:none;
  display:flex; align-items:flex-start; justify-content:center;
}

.det-floating {
  background:rgba(2, 16, 84, 0.92);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  padding:12px 15px;
  width:min(289px, 36vw);
  min-width:280px;
  text-align:left;
  opacity:0;
  transform-origin:top center;
  transform:scale(0.08);
  transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  position:absolute;
  margin-left:calc(min(340px, 42vw) / -2);
  margin-top:clamp(-100px, -16vh, -50px);
  display:grid;
  grid-template-columns:46px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:4px;
  align-items:center;
}
.det-floating::after {
  content:'';
  position:absolute;
  bottom:-42px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:46px solid rgba(2, 16, 84, 0.92);
  filter:drop-shadow(0 6px 4px rgba(0,0,0,0.25));
}
.det-floating.show {
  opacity:1;
  transform:scale(1);
}
.det-floating.hide {
  opacity:0;
  transform:scale(0.08);
  transition:all 0.35s ease-in;
}
.df-emoji {
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  margin:0;
  font-size:2rem;
  line-height:1;
}
.df-sub {
  font-size:clamp(0.65rem,1.5vw,0.78rem); color:var(--muted);
  line-height:1.4; font-family:'Inter',sans-serif;
}
.df-dot {
  width:6px; height:6px; border-radius:50%;
  margin:8px auto 0;
  animation:dotPulse 1.5s ease-in-out infinite;
}
@keyframes dotPulse {0%,100%{opacity:0.3;transform:scale(1);} 50%{opacity:1;transform:scale(1.5);}}

.loader {
  position:fixed; inset:0; z-index:100;
  background:var(--dark);
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  padding-top:0;
  gap:20px;
  overflow-x: hidden;
  overflow-y: auto;
  transition:opacity 0.8s ease;
}
.loader.out { opacity:0; pointer-events:none; }
.loader-logo {
  width:clamp(260px,72vw,420px);
  height:auto;
  margin-top:-20px;
}
.loader-bar {
  width:180px; height:2px; background:rgba(255,255,255,0.08);
  border-radius:2px; overflow:hidden;
}
.loader-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--azul),var(--violet),var(--rosa));
  width:0%; transition:width 0.8s ease;
}
.loader-text {
  font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase;
  color:#fff(--muted); font-family:'Inter',sans-serif;
}
.loader-tagline {
  text-align:center;
  max-width:min(340px, 85vw);
  margin:8px 0;
}
.loader-tagline .ct-main {
  opacity: 1;
}
.loader-tagline .ct-sub {
  margin-top:17px;
}
.ct-sub-line1,
.ct-sub-line2,
.ct-sub-line3 {
  display:block;
  opacity:0;
}
.ct-sub-line1 {
  animation:loaderTaglineIn 0.9s ease 4.5s forwards;
}
.ct-sub-line2 {
  animation:loaderTaglineIn 0.9s ease 6s forwards;
}
.ct-sub-line3 {
  animation:loaderTaglineIn 0.9s ease 7s forwards;
}
@keyframes loaderTaglineIn {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}

.df-emoji {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin:0 10px 0 0;
  vertical-align:middle;
  font-size:2rem;
  line-height:1;
  flex:0 0 auto;
}

.df-titulo {
  grid-column:2;
  grid-row:1;
  margin:0;
  font-size:clamp(0.95rem,2.6vw,1.12rem);
  font-weight:700;
  color:#fff;
  line-height:1.15;
  text-align:left;
}

.df-sub {
  grid-column:1 / 3;
  grid-row:2;
  margin:3px 0 0 0;
  font-size:clamp(0.64rem,1.45vw,0.76rem);
  color:#D30361(--muted);
  line-height:1.35;
  font-family:'Inter',sans-serif;
  text-align:center;
}

.df-dot {
  margin:8px auto 0;
}
.ia-icon-only {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(10px,2vh,16px) 0;
  opacity:0;
  animation:fadeIn 0.8s ease 1.2s forwards;
}
.ia-logo-small {
  width:80px; height:80px;
  border-radius:50%;
  filter:drop-shadow(0 0 14px rgba(139,124,255,0.5));
  animation:iaBreathe 2.2s ease-in-out infinite;
  cursor:pointer;
}
   #historiasCarousel {
     display: none;
   }
.loader-logo-wrap {
  position: relative;
  width: 60vw;
  max-width: 420px;
  margin: 0 auto;
}
.loader-glow-wide {
  position: absolute; inset: -8%;
  background-image: url('../assets/images/logosin_fondo0.png');
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: blur(45px) brightness(2) saturate(1.3);
  opacity: 0.12; mix-blend-mode: screen; z-index: 1;
}
.loader-glow-tight {
  position: absolute; inset: 0;
  background-image: url('../assets/images/logosin_fondo0.png');
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: blur(14px) brightness(1.8) saturate(1.2);
  opacity: 0.15; mix-blend-mode: screen; z-index: 2;
}
.loader-logo-crisp {
  position: relative; width: 100%; display: block;
  filter: brightness(1.12) contrast(1.08) saturate(1.05)
          drop-shadow(0 0 8px rgba(0, 200, 255, 0.4))
          drop-shadow(0 0 20px rgba(0, 200, 255, 0.2));
  z-index: 3;
}
@keyframes pulseLight { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

.iahuman-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(circle at 50% 38%, #2A1E5C 0%, #170F3D 35%, #0A0821 65%, #05060F 100%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
}
.iahuman-overlay.show { display: flex; }

.iah-orbita-wrap {
  position: relative;
  width: min(42vw, 300px);
  height: min(42vw, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: iahEntradaEscala 1.1s ease-out forwards;
}
.iah-esfera {
  position: relative;
  width: 34%; height: 34%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #FFFFFF 0%, #FFE7BD 18%, #FFB25E 42%, #F15808 68%, rgba(241,88,8,0) 100%);
  filter: blur(0.3px);
  box-shadow: 0 0 18px 6px rgba(255,210,140,0.9), 0 0 55px 22px rgba(241,137,8,0.55), 0 0 110px 45px rgba(140,70,220,0.28);
  z-index: 3;
  animation: iahPulso 3.2s ease-in-out infinite;
}
.iah-anillo {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(210,195,255,0.85);
  box-shadow: 0 0 8px 1px rgba(160,140,255,0.6), 0 0 24px 4px rgba(120,90,255,0.35);
  z-index: 2;
}
.iah-satelite-rotor {
  position: absolute; inset: 0; z-index: 4;
  animation: iahGirar 13s linear infinite;
}
.iah-satelite {
  position: absolute; top: -5px; left: 50%;
  width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 0 10px 3px rgba(255,255,255,0.95), 0 0 22px 8px rgba(180,160,255,0.7);
}
.iah-texto {
  margin-top: clamp(28px, 5vh, 46px);
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 500;
  letter-spacing: 0.42em;
  color: #FFFFFF;
  text-indent: 0.42em;
  text-shadow: 0 0 12px rgba(255,255,255,0.85), 0 0 34px rgba(150,120,255,0.55);
  opacity: 0;
  animation: iahApareceTexto 1s ease-out 0.7s forwards;
}
.iah-barra-wrap {
  position: relative;
  width: min(55.2vw, 408px); height: 20px;
  margin-top: clamp(18px, 3vh, 30px);
  opacity: 0;
  animation: iahApareceTexto 1s ease-out 1.1s forwards;
}
.iah-barra-linea {
  position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,0.25);
  transform: translateY(-50%);
}
.iah-barra-punto {
  position: absolute; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%; background: #FF5A3C;
  box-shadow: 0 0 8px 3px rgba(255,90,60,0.9), 0 0 18px 6px rgba(255,90,60,0.5);
  transform: translate(-50%, -50%);
  animation: iahBarrido 2.6s ease-in-out infinite;
}
.iah-cerrar {
  position: absolute;
  top: clamp(16px, 4vh, 30px);
  right: clamp(16px, 4vw, 30px);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
}

@keyframes iahEntradaEscala { 0%{opacity:0;transform:scale(0.85);} 100%{opacity:1;transform:scale(1);} }
@keyframes iahPulso {
  0%,100% { box-shadow: 0 0 18px 6px rgba(255,210,140,0.9), 0 0 55px 22px rgba(241,137,8,0.55), 0 0 110px 45px rgba(140,70,220,0.28); }
  50% { box-shadow: 0 0 24px 9px rgba(255,210,140,1), 0 0 70px 30px rgba(241,137,8,0.68), 0 0 130px 55px rgba(140,70,220,0.36); }
}
@keyframes iahGirar { from{transform:rotate(-25deg);} to{transform:rotate(335deg);} }
@keyframes iahApareceTexto { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
@keyframes iahBarrido { 0%{left:0%;} 50%{left:100%;} 100%{left:0%;} }

@media (prefers-reduced-motion: reduce) {
  .iah-satelite-rotor, .iah-esfera, .iah-barra-punto { animation: none !important; }
}

.loader-sound-hint {
  position: absolute;
  top: clamp(16px, 4vh, 30px);
  right: clamp(16px, 4vw, 30px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 200, 255, 0.12);
  border: 1.5px solid rgba(0, 200, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00C8FF;
  cursor: pointer;
  z-index: 10;
  animation: loaderSoundPulse 1.8s ease-in-out infinite;
}
@keyframes loaderSoundPulse {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(0,200,255,0.5); transform: scale(1); }
  50%      { box-shadow: 0 0 18px 6px rgba(0,200,255,0.8); transform: scale(1.1); }
}

.ct-detente {
  display: inline-block;
  opacity: 0;
  filter: none;
  background: linear-gradient(90deg, #FFFFFF 0%, #1F3A8A 15%, #6B2FBF 40%, #E91E8C 60%, #F15808 80%, #E91E63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transform: translateY(-6px) scale(1.05);
  animation: detenteSlowDown 1.6s cubic-bezier(0.16, 1, 0.3, 1) 2.5s forwards;
}
@keyframes detenteSlowDown {
  0%   { opacity: 0; transform: translateY(-6px) scale(1.05); }
  60%  { opacity: 0.7; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.ct-vive {
  display: inline-block;
  opacity: 0;
  background: linear-gradient(90deg, #FFFFFF 0%, #1F3A8A 15%, #6B2FBF 40%, #E91E8C 60%, #F15808 80%, #E91E63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transform: scale(0.7);
  animation: viveAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.3s forwards,
             viveLatido 1.8s ease-in-out 3.9s infinite;
}
@keyframes viveAppear {
  0%   { opacity: 0; transform: scale(0.7); filter: brightness(1) drop-shadow(0 0 0 rgba(255,90,60,0)); }
  60%  { opacity: 1; transform: scale(1.15); filter: brightness(1.6) drop-shadow(0 0 25px rgba(255,90,60,0.9)); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) drop-shadow(0 0 8px rgba(255,90,60,0.5)); }
}
@keyframes viveLatido {
  0%, 100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 8px rgba(255,90,60,0.5)); }
  50%      { transform: scale(1.06); filter: brightness(1.25) drop-shadow(0 0 16px rgba(255,90,60,0.75)); }
}

.escena3 {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: radial-gradient(circle at 50% 30%, #1F3A8A 0%, #0A0821 45%, #05060F 100%);
  display: none;
  min-height: 100vh;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 5.5vh, 44px) 20px;
  overflow-y: auto;
  font-family: 'Inter', sans-serif;
  color: #fff;
}
.escena3.show { display: flex; }

.e3-header {
  text-align: center;
  max-width: 480px;
  opacity: 0;
  position: relative;
  z-index: 1;
  animation: e3FadeUp 0.9s ease 0.1s forwards;
}
.e3-badge {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00C8FF;
  border: 1px solid rgba(0,200,255,0.4);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 16px;
}
/* "La película de tu vida" — mismo estilo de caja dorada que Escena 1,
   con colores fijos (no depende de variables que solo existen en #loader) */
.e3-titulo-caja-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(16px, 2.6vh, 26px);
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: e3FadeUp 0.9s ease 0.05s forwards;
}
.e3-titulo-pelicula {
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 6.5vw, 36px);
  letter-spacing: .03em;
  text-align: center;
  line-height: 1.2;
  background-image: linear-gradient(90deg, #FFFFFF 20%, #1F3A8A 35%, #6B2FBF 50%, #E91E8C 70%, #F15808 85%, #E91E63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(150,110,255,.25);
}

.e3-titulo {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 600;
  margin: 0 0 8px;
  background: linear-gradient(90deg, #1F3A8A, #6B2FBF, #E91E8C, #F15808);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.e3-subtitulo {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  color: rgba(255,255,255,0.75);
  margin: 0;
}
.e3-tipos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
  gap: 14px;
  margin-top: clamp(14px, 2.5vh, 24px);
  max-width: 480px;
  opacity: 0;
  animation: e3FadeUp 0.9s ease 0.5s forwards;
}
.e3-tipo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 140px;
  padding: 12px 10px;
  border-radius: 16px;
  font-size: 20px;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: normal;
  cursor: pointer;
  transition: transform 0.2s ease;
  animation: e3LatidoColorTarjeta 3.2s ease-in-out infinite;
}
.e3-tipo:nth-child(1) { animation-delay: 0s;    }
.e3-tipo:nth-child(2) { animation-delay: 0.5s;  }
.e3-tipo:nth-child(3) { animation-delay: 1s;    }
.e3-tipo:nth-child(4) { animation-delay: 1.5s;  }
.e3-tipo:nth-child(5) { animation-delay: 2s;    }
.e3-tipo:hover, .e3-tipo:active {
  transform: translateY(-4px);
  animation-play-state: paused;
  background: rgba(233, 30, 140, 0.4);
  border: 1px solid rgba(233, 30, 140, 0.95);
  box-shadow: 0 0 24px rgba(233, 30, 140, 0.6);
}
.e3-icon {
  font-size: 1.6rem;
}
.e3-carousel-wrap {
  width: 100%;
  margin-top: clamp(28px, 5vh, 44px);
  opacity: 0;
  animation: e3FadeUp 0.9s ease 0.9s forwards;
}
@keyframes e3FadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes e3LatidoColorTarjeta {
  0%, 100% {
    background: rgba(14, 190, 255, 0.22);
    border: 1px solid rgba(14, 190, 255, 0.6);
    box-shadow: 0 0 14px rgba(14, 190, 255, 0.35);
  }
  50% {
    background: rgba(233, 30, 140, 0.28);
    border: 1px solid rgba(233, 30, 140, 0.7);
    box-shadow: 0 0 16px rgba(233, 30, 140, 0.4);
  }
}

.e3-stars { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.e3-star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; }
.e3-cities { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.e3-city span {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  font-size: 8px; white-space: nowrap; color: rgba(255,255,255,0.85);
  opacity: 0;
  animation: e3CityLabelFlash 9s ease-in-out infinite;
}
@keyframes e3CityBlink {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.7); }
}
.e3-city:nth-child(odd)  { animation-delay: 0.3s; }
.e3-city:nth-child(even) { animation-delay: 0.9s; }
.e3-city:nth-child(3n)   { animation-delay: 1.5s; }

.e3-cubo-zona { margin-top: 12px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.e3-cubo-stage { width: 120px; height: 120px; perspective: 600px; margin-bottom: 6px; }
.e3-cubo-float-wrap { width: 100%; height: 100%; animation: e3CuboFlotar 4.5s ease-in-out infinite; }
.e3-cubo-3d { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: e3CuboGirar 16s linear infinite; }
@keyframes e3CuboFlotar { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-14px); } }
@keyframes e3CuboGirar { from { transform: rotateY(0deg) rotateX(-12deg); } to { transform: rotateY(360deg) rotateX(-12deg); } }
.e3-cara {
  position: absolute; width: 120px; height: 120px;
  background: linear-gradient(135deg, rgba(0,200,255,0.22), rgba(139,124,255,0.22));
  border: 1.5px solid rgba(0,200,255,0.55);
  box-shadow: inset 0 0 22px rgba(0,200,255,0.25), 0 0 18px rgba(0,200,255,0.3);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
  font-size: 1.6rem;
  filter: drop-shadow(0 0 8px rgba(0,200,255,0.7));
  animation: e3CuboElectro 4s linear infinite;
}
.e3-cara-frente  { transform: translateZ(60px); }
.e3-cara-atras   { transform: rotateY(180deg) translateZ(60px); }
.e3-cara-derecha { transform: rotateY(90deg) translateZ(60px); }
.e3-cara-izq     { transform: rotateY(-90deg) translateZ(60px); }
.e3-cara-arriba  { transform: rotateX(90deg) translateZ(60px); }
.e3-cara-abajo   { transform: rotateX(-90deg) translateZ(60px); }
.e3-cara-frente .e3-relleno {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: var(--fill, 22%);
  background: linear-gradient(180deg, rgba(0,229,255,0.05), rgba(0,229,255,0.55));
  transition: height 1s ease;
}
.e3-cara-frente .e3-icono-central { position: relative; z-index: 2; font-size: 1.3rem; font-weight: 700; font-family: 'Poppins', sans-serif; color: #fff; filter: drop-shadow(0 0 10px rgba(0,200,255,0.8)); }
.e3-cubo-halo {
  width: 100px; height: 18px;
  background: radial-gradient(ellipse at center, rgba(0,200,255,0.5) 0%, transparent 70%);
  filter: blur(4px); margin-top: -6px;
  animation: e3HaloPulse 4.5s ease-in-out infinite, e3HaloElectro 4s linear infinite;
}
@keyframes e3HaloPulse { 0%,100% { opacity: 0.5; transform: scaleX(1); } 50% { opacity: 0.85; transform: scaleX(1.15); } }
.e3-cubo-info { text-align: center; margin-top: 6px; }
.e3-cubo-numero { font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 600; color: #fff; margin-bottom: 4px; }
.e3-cubo-numero span { color: #00E5FF; }
.e3-capacidad-bar { width: 220px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; margin: 8px auto 6px; }
.e3-capacidad-fill { height: 100%; width: 22%; background: linear-gradient(90deg, #00C8FF, #8B7CFF); border-radius: 999px; }
.e3-capacidad-texto { font-size: 24px; color: rgba(255,255,255,0.65); }
.e3-capacidad-texto b { color: #fff; }

.e3-content-wrap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.e3-stars, .e3-cities {
  position: absolute;
  inset: 0;
}

.e3-timeline-zona {
  width: 100%;
  margin: 14px 0 6px;
  position: relative;
  z-index: 1;
  padding: 20px 16px;
  border-radius: 20px;
  animation: e3LatidoColorTarjeta 3.2s ease-in-out infinite;
}
.e3-timeline-titulo {
  font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 600;
  text-align: center; color: rgba(255,255,255,0.85); margin-bottom: 14px;
  letter-spacing: 0.03em;
}
.e3-timeline-track {
  position: relative;
  display: flex; gap: 22px;
  overflow-x: auto; overflow-y: hidden;
  padding: 6px 24px 10px;
  scroll-snap-type: x proximity;
}
.e3-timeline-track::-webkit-scrollbar { height: 3px; }
.e3-timeline-track::-webkit-scrollbar-thumb { background: rgba(0,200,255,0.4); border-radius: 3px; }
.e3-timeline-linea {
  position: absolute; top: 14px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(0,200,255,0.1), rgba(0,200,255,0.5), rgba(139,124,255,0.5), rgba(255,94,168,0.3));
}
.e3-decada {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  min-width: 58px; cursor: pointer; scroll-snap-align: center;
  opacity: 0.55; transition: opacity 0.25s ease;
}
.e3-decada.activa, .e3-decada:active { opacity: 1; }
.e3-decada-punto {
  width: 14px; height: 14px; border-radius: 50%;
  margin-bottom: 8px;
  transition: transform 0.25s ease;
  animation: e3LatidoColorTarjeta 3.2s ease-in-out infinite;
}
.e3-decada:nth-child(1) .e3-decada-punto { animation-delay: 0s;    }
.e3-decada:nth-child(2) .e3-decada-punto { animation-delay: 0.4s;  }
.e3-decada:nth-child(3) .e3-decada-punto { animation-delay: 0.8s;  }
.e3-decada:nth-child(4) .e3-decada-punto { animation-delay: 1.2s;  }
.e3-decada:nth-child(5) .e3-decada-punto { animation-delay: 1.6s;  }
.e3-decada:nth-child(6) .e3-decada-punto { animation-delay: 2.0s;  }
.e3-decada:nth-child(7) .e3-decada-punto { animation-delay: 2.4s;  }
.e3-decada.activa .e3-decada-punto {
  animation-play-state: paused;
  background: #00E5FF;
  border-color: #00E5FF;
  box-shadow: 0 0 10px 3px rgba(0,229,255,0.8);
  transform: scale(1.3);
}
.e3-decada-anio { font-size: 22px; font-weight: 600; color: #fff; }
.e3-decada-gen { font-size: 18px; color: rgba(255,255,255,0.55); margin-top: 1px; text-align: center; }
.e3-decada-count { font-size: 16px; color: #00E5FF; margin-top: 2px; min-height: 12px; }
.e3-timeline-hint {
  text-align: center; font-size: 22px; color: rgba(255,255,255,0.5);
  margin-top: 4px; font-style: italic;
}
.e3-iahuman-zona {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 12px; margin-bottom: 16px; position: relative; z-index: 1;
}
.e3-iahuman-icono {
  position: relative;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.e3-iah-anillo {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.2px solid rgba(210,195,255,.85);
  box-shadow: 0 0 6px 1px rgba(160,140,255,.55);
}
.e3-iah-satelite-rotor {
  position: absolute; inset: 0;
  animation: e3IahGirar 13s linear infinite;
}
.e3-iah-satelite {
  position: absolute; top: -3px; left: 50%;
  width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 7px 2px rgba(255,255,255,.9);
}
.e3-iah-esfera {
  position: relative;
  width: 34%; height: 34%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #FFFFFF 0%, #FFE7BD 18%, #FFB25E 42%, #F15808 68%, rgba(241,88,8,0) 100%);
  box-shadow: 0 0 7px 3px rgba(255,210,140,.85), 0 0 18px 8px rgba(241,137,8,.5), 0 0 32px 14px rgba(140,70,220,.3);
  animation: e3IahPulso 3.2s ease-in-out infinite;
}
@keyframes e3IahGirar { from{transform:rotate(-25deg);} to{transform:rotate(335deg);} }
@keyframes e3IahPulso {
  0%,100% { box-shadow: 0 0 7px 3px rgba(255,210,140,.85), 0 0 18px 8px rgba(241,137,8,.5), 0 0 32px 14px rgba(140,70,220,.3); }
  50%     { box-shadow: 0 0 10px 5px rgba(255,210,140,1), 0 0 24px 10px rgba(241,137,8,.62), 0 0 40px 18px rgba(140,70,220,.38); }
}
.e3-iahuman-texto { font-size: 24px; color: rgba(255,255,255,0.7); }

.ct-anios {
  display: block;
  margin-top: 14px;
  font-size: clamp(0.9rem, 3.2vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #FFFFFF 0%, #1F3A8A 15%, #6B2FBF 40%, #E91E8C 60%, #F15808 80%, #E91E63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  animation: loaderTaglineIn 0.9s ease 8.5s forwards;
}

.e3-confirm { min-height: 20px; font-size: 0.82rem; color: #00E5FF; margin-bottom: 4px; text-align: center; }
.e3-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5,6,15,0.85);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.e3-modal-overlay.show { display: flex; }
.e3-modal {
  width: 100%; max-width: 320px;
  background: rgba(15,20,50,0.95);
  border: 1px solid rgba(0,200,255,0.3);
  border-radius: 20px; padding: 22px; text-align: center;
}
.e3-modal h3 { font-family: 'Poppins', sans-serif; font-size: 1.05rem; margin: 0 0 14px; color: #fff; }
.e3-modal textarea {
  width: 100%; min-height: 100px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; color: #fff; padding: 10px;
  font-family: 'Inter', sans-serif; font-size: 0.85rem; resize: none; margin-bottom: 14px;
}
.e3-modal-btns { display: flex; gap: 10px; justify-content: center; }
.e3-btn { border: none; border-radius: 999px; padding: 9px 20px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.e3-btn-primary { background: linear-gradient(90deg,#00C8FF,#8B7CFF); color: #05060F; }
.e3-btn-secundario { background: rgba(255,255,255,0.1); color: #fff; }
.e3-select {
  width: 100%; padding: 10px; border-radius: 10px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 0.9rem; font-family: 'Inter', sans-serif;
}
.e3-select option { background: #0A0821; color: #fff; }
.e3-rec-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #FF3B30; margin: 10px auto 6px;
  animation: e3RecBlink 1s ease-in-out infinite;
}
@keyframes e3RecBlink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.e3-rec-time { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-bottom: 14px; }
.e3-modal-carpeta { max-width: 340px; text-align: left; }
.e3-modal-carpeta h3 { text-align: center; }
.e3-carpeta-lista { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.e3-item-memoria {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 9px 10px;
}
.e3-item-icono { font-size: 1.3rem; }
.e3-item-info { flex: 1; min-width: 0; }
.e3-item-tipo { font-size: 0.78rem; font-weight: 600; color: #fff; text-transform: capitalize; }
.e3-item-anio { font-size: 0.68rem; color: rgba(255,255,255,0.55); }
.e3-item-borrar {
  background: rgba(255,59,48,0.15); border: 1px solid rgba(255,59,48,0.4);
  color: #FF3B30; border-radius: 8px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.9rem; flex-shrink: 0;
}
.e3-carpeta-vacio { text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.45); padding: 20px 0; }

@keyframes e3CuboElectro {
  0%   { border-color: rgba(0,200,255,0.7); box-shadow: inset 0 0 22px rgba(0,200,255,0.3), 0 0 22px rgba(0,200,255,0.4); filter: drop-shadow(0 0 10px rgba(0,200,255,0.8)); }
  25%  { border-color: rgba(139,124,255,0.7); box-shadow: inset 0 0 22px rgba(139,124,255,0.3), 0 0 22px rgba(139,124,255,0.4); filter: drop-shadow(0 0 10px rgba(139,124,255,0.8)); }
  50%  { border-color: rgba(233,30,140,0.7); box-shadow: inset 0 0 22px rgba(233,30,140,0.3), 0 0 22px rgba(233,30,140,0.4); filter: drop-shadow(0 0 10px rgba(233,30,140,0.8)); }
  75%  { border-color: rgba(241,88,8,0.7); box-shadow: inset 0 0 22px rgba(241,88,8,0.3), 0 0 22px rgba(241,88,8,0.4); filter: drop-shadow(0 0 10px rgba(241,88,8,0.8)); }
  100% { border-color: rgba(0,200,255,0.7); box-shadow: inset 0 0 22px rgba(0,200,255,0.3), 0 0 22px rgba(0,200,255,0.4); filter: drop-shadow(0 0 10px rgba(0,200,255,0.8)); }
}
@keyframes e3HaloElectro {
  0%   { background: radial-gradient(ellipse at center, rgba(0,200,255,0.5) 0%, transparent 70%); }
  25%  { background: radial-gradient(ellipse at center, rgba(139,124,255,0.5) 0%, transparent 70%); }
  50%  { background: radial-gradient(ellipse at center, rgba(233,30,140,0.5) 0%, transparent 70%); }
  75%  { background: radial-gradient(ellipse at center, rgba(241,88,8,0.5) 0%, transparent 70%); }
  100% { background: radial-gradient(ellipse at center, rgba(0,200,255,0.5) 0%, transparent 70%); }
}

.e3-cubo-variante-2 .e3-cara { animation: e3CuboElectroV2 5s linear infinite; }
@keyframes e3CuboElectroV2 {
  0%   { border-color: rgba(241,88,8,0.7); box-shadow: inset 0 0 22px rgba(241,88,8,0.3), 0 0 22px rgba(241,88,8,0.4); filter: drop-shadow(0 0 10px rgba(241,88,8,0.8)); }
  33%  { border-color: rgba(233,30,140,0.7); box-shadow: inset 0 0 22px rgba(233,30,140,0.3), 0 0 22px rgba(233,30,140,0.4); filter: drop-shadow(0 0 10px rgba(233,30,140,0.8)); }
  66%  { border-color: rgba(0,200,255,0.7); box-shadow: inset 0 0 22px rgba(0,200,255,0.3), 0 0 22px rgba(0,200,255,0.4); filter: drop-shadow(0 0 10px rgba(0,200,255,0.8)); }
  100% { border-color: rgba(241,88,8,0.7); box-shadow: inset 0 0 22px rgba(241,88,8,0.3), 0 0 22px rgba(241,88,8,0.4); filter: drop-shadow(0 0 10px rgba(241,88,8,0.8)); }
}
.e3-cubo-variante-3 .e3-cara { animation: e3CuboElectroV3 3s linear infinite; }
@keyframes e3CuboElectroV3 {
  0%   { border-color: rgba(139,124,255,0.7); box-shadow: inset 0 0 22px rgba(139,124,255,0.3), 0 0 22px rgba(139,124,255,0.4); filter: drop-shadow(0 0 10px rgba(139,124,255,0.8)); }
  50%  { border-color: rgba(241,88,8,0.7); box-shadow: inset 0 0 22px rgba(241,88,8,0.3), 0 0 22px rgba(241,88,8,0.4); filter: drop-shadow(0 0 10px rgba(241,88,8,0.8)); }
  100% { border-color: rgba(139,124,255,0.7); box-shadow: inset 0 0 22px rgba(139,124,255,0.3), 0 0 22px rgba(139,124,255,0.4); filter: drop-shadow(0 0 10px rgba(139,124,255,0.8)); }
}
.e3-cubo-variante-4 .e3-cara { animation: e3CuboElectroV4 6s linear infinite reverse; }
@keyframes e3CuboElectroV4 {
  0%   { border-color: rgba(0,200,255,0.7); box-shadow: inset 0 0 22px rgba(0,200,255,0.3), 0 0 22px rgba(0,200,255,0.4); filter: drop-shadow(0 0 10px rgba(0,200,255,0.8)); }
  50%  { border-color: rgba(233,30,140,0.7); box-shadow: inset 0 0 22px rgba(233,30,140,0.3), 0 0 22px rgba(233,30,140,0.4); filter: drop-shadow(0 0 10px rgba(233,30,140,0.8)); }
  100% { border-color: rgba(0,200,255,0.7); box-shadow: inset 0 0 22px rgba(0,200,255,0.3), 0 0 22px rgba(0,200,255,0.4); filter: drop-shadow(0 0 10px rgba(0,200,255,0.8)); }
}

@keyframes hpRingElectro {
  0%   { border-color: rgba(0,200,255,0.8); }
  25%  { border-color: rgba(139,124,255,0.8); }
  50%  { border-color: rgba(233,30,140,0.8); }
  75%  { border-color: rgba(241,88,8,0.8); }
  100% { border-color: rgba(0,200,255,0.8); }
}
@keyframes hpHeartElectro {
  0%   { filter: drop-shadow(0 0 22px rgba(0,200,255,.85)) drop-shadow(0 0 45px rgba(0,200,255,0.6)); }
  25%  { filter: drop-shadow(0 0 22px rgba(139,124,255,.85)) drop-shadow(0 0 45px rgba(139,124,255,0.6)); }
  50%  { filter: drop-shadow(0 0 22px rgba(233,30,140,.85)) drop-shadow(0 0 45px rgba(233,30,140,0.6)); }
  75%  { filter: drop-shadow(0 0 22px rgba(241,88,8,.85)) drop-shadow(0 0 45px rgba(241,88,8,0.6)); }
  100% { filter: drop-shadow(0 0 22px rgba(0,200,255,.85)) drop-shadow(0 0 45px rgba(0,200,255,0.6)); }
}

.hp-ring-fijo {
  position: absolute;
  width: 78px; height: 78px;
  border: 2px solid rgba(0,200,255,0.6);
  border-radius: 50%;
  z-index: 1;
  animation: hpRingElectro 3s linear infinite;
}

.e3-mapa-panel {
  display: none !important; /* consolidado en el ícono .e3-mundo-icono */
  width: 100%;
  height: 820px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.e3-mapa-panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.18;
}
.e3-mapa-titulo {
  position: absolute; top: 8px; left: 14px;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); font-weight: 600;
}
.e3-city {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  animation: e3CityBlink 2.6s ease-in-out infinite;
}
.e3-city.americas { background: #00E5FF; box-shadow: 0 0 5px 2px rgba(0,229,255,0.8); }
.e3-city.europa   { background: #C77DFF; box-shadow: 0 0 5px 2px rgba(199,125,255,0.8); }
.e3-city.africa   { background: #FFB25E; box-shadow: 0 0 5px 2px rgba(255,178,94,0.8); }
.e3-city.asia     { background: #FF5EA8; box-shadow: 0 0 5px 2px rgba(255,94,168,0.8); }
.e3-city.oceania  { background: #FFD447; box-shadow: 0 0 5px 2px rgba(255,212,71,0.8); }

@keyframes e3CityLabelFlash {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  19%  { opacity: 0; }
  100% { opacity: 0; }
}
.e3-city:nth-child(1) span  { animation-delay: 0s; }
.e3-city:nth-child(2) span  { animation-delay: 0.4s; }
.e3-city:nth-child(3) span  { animation-delay: 0.8s; }
.e3-city:nth-child(4) span  { animation-delay: 1.2s; }
.e3-city:nth-child(5) span  { animation-delay: 1.6s; }
.e3-city:nth-child(6) span  { animation-delay: 2.0s; }
.e3-city:nth-child(7) span  { animation-delay: 2.4s; }
.e3-city:nth-child(8) span  { animation-delay: 2.8s; }
.e3-city:nth-child(9) span  { animation-delay: 3.2s; }
.e3-city:nth-child(10) span { animation-delay: 3.6s; }
.e3-city:nth-child(11) span { animation-delay: 4.0s; }
.e3-city:nth-child(12) span { animation-delay: 4.4s; }
.e3-city:nth-child(13) span { animation-delay: 4.8s; }
.e3-city:nth-child(14) span { animation-delay: 5.2s; }
.e3-city:nth-child(15) span { animation-delay: 5.6s; }
.e3-city:nth-child(16) span { animation-delay: 6.0s; }
.e3-city:nth-child(17) span { animation-delay: 6.4s; }
.e3-city:nth-child(18) span { animation-delay: 6.8s; }
.e3-city:nth-child(19) span { animation-delay: 7.2s; }
.e3-city:nth-child(20) span { animation-delay: 7.6s; }
.e3-city:nth-child(21) span { animation-delay: 8.0s; }
.e3-city:nth-child(22) span { animation-delay: 8.4s; }

#loader {
  --e1-c1: #FFFFFF;
  --e1-c2: #1F3A8A;
  --e1-c3: #6B2FBF;
  --e1-c4: #E91E8C;
  --e1-c5: #F15808;
  --e1-c6: #E91E63;
  max-width: 100vw;
  overflow-x: hidden;
}

#loaderFill, #loaderText, .loader-bar { display: none !important; }
.loader-logo-wrap, .loader-tagline { display: none !important; }

#loader * { box-sizing: border-box; }

.e1-escena {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 2vh, 20px);
  padding: 0 20px;
  box-sizing: border-box;
}

/* ============================================================
   PASO 1 — TÍTULO PRINCIPAL: "La película de mi vida"
   (el gancho emocional, ahora primero)
   ============================================================ */
.e1-titulo-contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: clamp(16px, 2.8vh, 28px);
  opacity: 0;
  transform: translateY(8px);
  animation: e1-apareceFade .8s ease-out forwards;
  animation-delay: 0.15s;
}
.e1-titulo-franja {
  width: min(88vw, 280px);
  height: 8px;
  background-image: repeating-linear-gradient(
    90deg,
    #E8B84B 0px, #E8B84B 6px,
    transparent 6px, transparent 12px
  );
  opacity: .8;
}
.e1-titulo-caja {
  border-radius: 18px;
  padding: 12px 16px;
  width: min(88vw, 280px);
  box-sizing: border-box;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(232,184,75,.55);
  box-shadow:
    0 0 22px rgba(232,184,75,.3),
    inset 0 0 22px rgba(150,110,255,.1);
}
.e1-titulo-principal {
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-size: calc(clamp(28px, 7.5vw, 44px) + 2px);
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.2;
  background-image: linear-gradient(90deg,
    var(--e1-c1) 20%, var(--e1-c2) 35%, var(--e1-c3) 50%, var(--e1-c4) 70%, var(--e1-c5) 85%, var(--e1-c6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(150,110,255,.25);
}

/* ============================================================
   PASO 2 — SUBTÍTULO: "¡DETENTE... Y VÍVELA!"
   (misma tipografía y colores que ya tenías)
   ============================================================ */
.e1-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  margin-bottom: clamp(16px, 2.6vh, 28px);
  font-family: 'Jost', sans-serif;
  text-align: center;
}
.e1-cta-wrap .e1-detente {
  display: inline-block;
  font-size: clamp(22px, 6vw, 38px);
  font-weight: 700;
  letter-spacing: .5em;
  text-indent: .5em;
  color: #FFFFFF;
  text-shadow:
    0 0 12px rgba(255,255,255,.85),
    0 0 34px rgba(150,130,255,.55),
    0 2px 0 rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(10px);
  animation: e1-apareceFade .8s ease-out forwards;
  animation-delay: 2.9s;
}
.e1-cta-wrap .e1-y-vive {
  display: inline-block;
  font-size: clamp(30px, 8vw, 50px);
  font-weight: 600;
  letter-spacing: .28em;
  text-indent: .28em;
  background-image: linear-gradient(90deg,
    var(--e1-c2) 0%, var(--e1-c3) 30%, var(--e1-c4) 58%, var(--e1-c5) 80%, var(--e1-c6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: scale(0.4);
  animation: e1-aparecePop .7s cubic-bezier(.2,1.4,.4,1) forwards;
  animation-delay: 3.4s;
}

/* ============================================================
   PASO 3 — BLOQUE DE MARCA: cubo + by MIORBIA + barra + tagline
   (el logo funciona como respaldo, no como apertura)
   ============================================================ */
.e1-cubo-wrap {
  position: relative;
  width: min(30vw, 190px);
  opacity: 0;
  transform: scale(0.72);
  animation: e1-aparece 1s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay: 7.0s;
  margin-top: clamp(6px, 1.4vh, 16px);
}
.e1-cubo-wrap img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 18px rgba(150,110,255,.45))
    drop-shadow(0 0 40px rgba(255,90,60,.28));
}
.e1-cubo-halo {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(120,90,255,.35) 0%, rgba(120,90,255,0) 70%);
  filter: blur(18px);
  z-index: -1;
}

.e1-texto-wrap {
  width: min(72vw, 420px);
  opacity: 0;
  transform: translateY(8px);
  animation: e1-aparece .8s ease-out forwards;
  animation-delay: 7.6s;
}
.e1-texto-wrap img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.18));
}

.e1-barra-wrap {
  position: relative;
  width: var(--bar-width, min(54vw, 310px));
  opacity: 0;
  animation: e1-aparece .7s ease-out forwards;
  animation-delay: 8.1s;
}
.e1-barra-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.e1-barra-wrap .e1-luz-viajera {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 90px;
  transform: translate(-50%, -50%);
  animation: e1-barrido 3.6s ease-in-out infinite;
  animation-delay: 8.5s;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.e1-barra-wrap.e1-activa .e1-luz-viajera {
  opacity: 1;
}
.e1-luz-viajera img {
  display: block;
  width: 100%;
  height: auto;
  animation: e1-parpadeoDestello 0.9s ease-in-out infinite;
  transform-origin: center;
}
@keyframes e1-parpadeoDestello {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.8;
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
    filter: brightness(1.2);
  }
}

.e1-tagline-wrap {
  width: calc(var(--bar-width, min(54vw, 310px)) * 1.4);
  opacity: 0;
  transform: translateY(6px);
  animation: e1-aparece .8s ease-out forwards;
  animation-delay: 8.4s;
}
.e1-tagline-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   PASO 4 — BENEFICIOS (reemplaza pilares/años, más directo)
   ninguna fuente por debajo de 22px — pensado para 50+
   ============================================================ */
.e1-beneficios-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: clamp(10px, 2vh, 18px);
  font-family: 'Jost', sans-serif;
  text-align: center;
  max-width: 380px;
}
.e1-beneficio {
  font-size: clamp(22px, 4.6vw, 26px);
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255,255,255,.92);
  opacity: 0;
  transform: translateY(8px);
  animation: e1-apareceFade .7s ease-out forwards;
}
.e1-beneficio:nth-of-type(1) {
  animation: e1-apareceFade 2s ease-out forwards;
  animation-delay: 9.2s;
}
.e1-beneficio:nth-of-type(2) {
  animation: e1-apareceFade 2s ease-out forwards;
  animation-delay: 15.2s;
}

/* ============================================================
   PASO 5 — BOTÓN "COMENZAR MI PELÍCULA" (funcional)
   ============================================================ */
.e1-boton-comenzar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: clamp(14px, 2.4vh, 24px);
  opacity: 0;
  transform: scale(0.85);
  animation: e1-apareceSello .6s cubic-bezier(.2,1.6,.4,1) forwards;
  animation-delay: 20.2s;
}
.e1-boton-comenzar button {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 5vw, 27px);
  letter-spacing: .06em;
  color: #FFFFFF;
  background: linear-gradient(90deg, var(--e1-c3), var(--e1-c4), var(--e1-c5));
  border: none;
  border-radius: 999px;
  padding: .7em 1.3em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 0 18px rgba(233,30,140,.5),
    0 0 34px rgba(241,88,8,.3);
  animation: e1-pulsoBoton 2.2s ease-in-out infinite;
  animation-delay: 20.8s;
}
@keyframes e1-pulsoBoton {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 18px rgba(233,30,140,.5), 0 0 34px rgba(241,88,8,.3); }
  50%      { transform: scale(1.04); box-shadow: 0 0 26px rgba(233,30,140,.7), 0 0 46px rgba(241,88,8,.45); }
}

@keyframes e1-apareceSello {
  0%   { opacity: 0; transform: scale(0.85); }
  70%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes e1-aparece {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes e1-apareceFade {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes e1-aparecePop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes e1-barrido {
  0%   { left: 0%; }
  50%  { left: 100%; }
  100% { left: 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .e1-luz-viajera { animation: none !important; }
  .e1-luz-viajera img { animation: none !important; }
}

/* ============================================================
   ESCENA 2 — Logo animado en el header (cubo + by MIORBIA +
   barra con destello + tagline), reemplaza la imagen estática
   ============================================================ */
.e2-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  animation: fadeIn 0.8s ease 0.1s forwards;
}

.e2-cubo {
  width: clamp(95px, 22vw, 135px);
  height: auto;
  filter: drop-shadow(0 0 12px rgba(150,110,255,.45)) drop-shadow(0 0 20px rgba(255,90,60,.28));
}

.e2-texto {
  width: clamp(160px, 40vw, 230px);
  height: auto;
  margin-top: -2px;
}

.e2-barra-wrap {
  position: relative;
  width: clamp(140px, 34vw, 200px);
  margin-top: 2px;
}
.e2-barra-wrap img {
  width: 100%;
  display: block;
}
.e2-luz-viajera {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 34px;
  transform: translate(-50%, -50%);
  animation: e2-barrido 2.6s ease-in-out infinite;
  pointer-events: none;
}
.e2-luz-viajera img {
  width: 100%;
  display: block;
}

.e2-tagline-wrap {
  width: clamp(130px, 32vw, 180px);
  margin-top: 2px;
}
.e2-tagline-wrap img {
  width: 100%;
  display: block;
}

/* Texto entre el header y el cubo, arriba de la constelación de nodos */
.e2-preservas-texto {
  text-align: center;
  max-width: 320px;
  margin: 4px auto 0;
  padding: 0 20px;
  opacity: 0;
  animation: fadeIn 0.9s ease 0.4s forwards;
}
.e2-preservas-linea1 {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-style: italic;
  color: rgba(255,255,255,.75);
}
.e2-preservas-linea2 {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
  margin-top: 2px;
  background: linear-gradient(90deg, #FFFFFF 0%, #1F3A8A 15%, #6B2FBF 40%, #E91E8C 60%, #F15808 80%, #E91E63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Ciclo automático de detonadores — misma tarjeta pulsante azul↔fucsia
   que ya usan las tarjetas de Escena 3 (reutiliza e3LatidoColorTarjeta) */
.e2-ciclo-detonadores {
  position: relative;
  width: 100%;
  max-width: 340px;
  min-height: 78px;
  margin: 22px auto 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.e2-det-tarjeta {
  position: absolute;
  min-width: 240px;
  max-width: 300px;
  padding: 14px 18px;
  border-radius: 18px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1s ease, transform 1s ease;
  animation: e3LatidoColorTarjeta 3.2s ease-in-out infinite;
}
.e2-det-tarjeta.mostrando {
  opacity: 1;
  transform: translateY(0);
}
.e2-det-titulo {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px rgba(233,30,140,.4);
}
.e2-det-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,.8);
  margin-top: 4px;
}

@keyframes e2-barrido {
  0%   { left: 0%;   }
  50%  { left: 100%; }
  100% { left: 0%;   }
}

@media (prefers-reduced-motion: reduce) {
  .e2-luz-viajera { animation: none !important; }
}

/* ============================================================
   ESCENA 3 — Ícono compacto del mundo (reemplaza el mapa de
   fondo disperso), estilo "Toca tu corazón"
   ============================================================ */
.e3-mundo-zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 10px 0 2px;
  position: relative;
  z-index: 1;
}
.e3-mundo-icono {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.e3-mundo-anillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0,200,255,.5);
}
.e3-mundo-anillo2 { animation-delay: 1.2s; }
@keyframes e3MundoRing {
  0%   { transform: scale(.7); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}
.e3-mundo-emoji {
  font-size: 1.6rem;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(0,200,255,.6));
}
@keyframes e3MundoPulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.e3-mundo-texto { font-size: .72rem; color: rgba(255,255,255,.7); }

.e3-modal-mundo { max-width: 360px; }
.e3-mundo-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-height: 300px;
  overflow-y: auto;
  margin: 12px 0;
}
.e3-mundo-chip {
  font-size: .72rem;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid;
  color: #fff;
  white-space: nowrap;
}
.e3-mundo-chip.americas { border-color: rgba(0,229,255,.6);  background: rgba(0,229,255,.1); }
.e3-mundo-chip.europa   { border-color: rgba(199,125,255,.6); background: rgba(199,125,255,.1); }
.e3-mundo-chip.africa   { border-color: rgba(255,178,94,.6);  background: rgba(255,178,94,.1); }
.e3-mundo-chip.asia     { border-color: rgba(255,94,168,.6);  background: rgba(255,94,168,.1); }
.e3-mundo-chip.oceania  { border-color: rgba(255,212,71,.6);  background: rgba(255,212,71,.1); }

.e3-continuar-entrada {
  display: none;
  margin: 4px auto 6px;
  text-decoration: none;
  text-align: center;
  width: fit-content;
}

.e3-input {
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  margin-bottom: 10px;
  display: block;
}
.e3-input::placeholder { color: rgba(255,255,255,0.4); }