/* ==========================================================================
   DECK (intro de 4 núcleos) — TODO aislado bajo #deckExp para no chocar con
   styles.css (chat). Se integra INLINE en la misma página (sin iframe) → el
   táctil funciona nativo. Tokens en #deckExp; clases que chocaban renombradas
   (logo→dklogo, pill→dkpill, eyebrow→dkeyebrow, btn-contacta→dkcontacta,
   reveal→dkshown); keyframe bob→dkbob. La chat-scene del deck se eliminó.
   ========================================================================== */
@font-face{ font-family:'Geist'; src:url('../fonts/Geist-Variable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:block; }
@font-face{ font-family:'Geist Mono'; src:url('../fonts/GeistMono-Variable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:block; }
@font-face{ font-family:'Sora Deck'; src:url('../fonts/Sora-Variable.woff2') format('woff2'); font-weight:100 800; font-style:normal; font-display:block; }

/* raíz del deck = capa fija a pantalla completa + tokens (solo dentro del deck) */
#deckExp{
  position:fixed; inset:0; overflow:hidden; z-index:2147483000;
  --bg:#0f1f10; --bg-2:#0b170c; --ink:#f5f4f2; --muted:#8ea08a; --faint:rgba(245,244,242,.5);
  --accent:#C7FF2E; --accent-2:#ddff8f; --line:rgba(199,255,46,.16); --glass:rgba(255,255,255,.04);
  --ease:cubic-bezier(.62,.01,.06,1);
  --sans:"Geist", system-ui, -apple-system, sans-serif;
  --mono:"Geist Mono", ui-monospace, monospace;
  --ui:"Geist", system-ui, sans-serif;   /* unificado: todo el texto principal en Geist */
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  transition:opacity .5s ease, transform .5s ease;
}
html.chatting #deckExp{ opacity:0; transform:scale(1.04); pointer-events:none; }  /* al entrar el chat, el deck se retira */
/* CLAVE: deckView lleva pointer-events:auto inline (render()) y cubre inset:0 → capturaría
   los toques encima del chat. Al entrar el chat forzamos TODO el deck a no interceptar. */
html.chatting #deckExp, html.chatting #deckExp *{ pointer-events:none !important; }
#deckExp, #deckExp *{ box-sizing:border-box; margin:0; padding:0; touch-action:none; -ms-touch-action:none; }
#deckExp button{ font-family:inherit; cursor:pointer; color:inherit; }
#deckExp ::selection{ background:var(--accent); color:#0b170c; }
@media (hover:hover) and (pointer:fine){ #deckExp.has-cursor, #deckExp.has-cursor *{ cursor:none; } }

/* fondo atmosférico */
#deckExp .bg-field{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(199,255,46,.10), transparent 55%),
    radial-gradient(90% 70% at 82% 20%, rgba(199,255,46,.06), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, #0b170c 0%, transparent 60%),
    linear-gradient(180deg, #0f1f10 0%, #0b170c 100%); }
#deckExp .bg-grid{ position:absolute; inset:0; z-index:1; opacity:.4; pointer-events:none;
  background-image:
    linear-gradient(rgba(199,255,46,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,255,46,.018) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%); }
#deckExp .vignette{ position:absolute; inset:0; z-index:56; pointer-events:none;
  background:radial-gradient(130% 120% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%); }
#deckExp .grain{ position:absolute; inset:-120px; z-index:57; pointer-events:none; opacity:.06; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:dkgrain .5s steps(4) infinite; }
@keyframes dkgrain{ 0%{transform:translate(0,0)}25%{transform:translate(-6px,4px)}50%{transform:translate(5px,-5px)}75%{transform:translate(-4px,-3px)}100%{transform:translate(4px,5px)} }

/* cursor custom */
#deckExp .cursor-dot,#deckExp .cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%;
  transform:translate(-50%,-50%); will-change:transform; }
#deckExp .cursor-dot{ width:6px; height:6px; background:var(--accent); }
#deckExp .cursor-ring{ width:34px; height:34px; border:1.5px solid rgba(245,244,242,.35);
  transition:width .28s var(--ease),height .28s var(--ease),border-color .28s,background .28s; }
#deckExp .cursor-ring.hot{ width:62px; height:62px; border-color:var(--accent); background:rgba(199,255,46,.10); }
#deckExp .cursor-ring.down{ width:26px; height:26px; }

/* ====== HEADER ====== */
#deckExp .hdr{ position:absolute; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; padding:28px 40px; }
#deckExp .dklogo{ font-family:var(--sans); font-weight:600; font-size:24px; letter-spacing:-0.03em;
  display:inline-flex; align-items:center; color:var(--ink); line-height:1; }
#deckExp .dklogo .dkpill{ background:var(--accent); color:#0b170c; font-weight:700; font-size:0.6em; letter-spacing:-0.01em;
  border-radius:.3em; padding:.16em .4em .2em; margin-left:.16em; line-height:1; display:inline-flex; }
#deckExp .nav-mono{ font-family:var(--ui); font-weight:500; font-size:12px; letter-spacing:.02em; color:var(--muted);
  display:flex; align-items:center; gap:9px; }
#deckExp .nav-mono .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
#deckExp .dkcontacta{ background:transparent; color:var(--ink); border:1px solid var(--line); font-family:var(--ui);
  font-weight:600; font-size:13px; letter-spacing:0; padding:9px 17px; border-radius:40px;
  transition:transform .3s var(--ease),background .25s,border-color .25s,color .25s; text-decoration:none; display:inline-flex; align-items:center; }
#deckExp .dkcontacta:hover{ background:var(--accent); color:#0b170c; border-color:var(--accent); }

/* ====== TIMELINE lateral ====== */
#deckExp .timeline{ position:absolute; left:40px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:22px;
  align-items:flex-start; justify-content:flex-start; width:auto; padding:0; background:none;
  pointer-events:none; }  /* resetea la regla nav{} de styles.css; el contenedor no intercepta, solo los items */
#deckExp .tl-rail{ position:absolute; left:4px; top:4px; bottom:4px; width:1px; background:var(--line); overflow:hidden; }
#deckExp .tl-fill{ position:absolute; left:0; top:0; width:100%; height:0; background:var(--accent); box-shadow:0 0 8px var(--accent); }
#deckExp .tl-item{ display:flex; align-items:center; gap:14px; cursor:pointer; padding:5px 10px 5px 0; margin:-5px 0; pointer-events:auto; }
#deckExp .tl-ic{ display:none; }   /* icono solo en móvil (en desktop mandan los puntos) */
#deckExp .tl-item:hover .tl-lab{ color:var(--ink); opacity:1; }
#deckExp .tl-item:hover .tl-dot{ border-color:var(--accent); }
#deckExp .tl-dot{ width:9px; height:9px; border-radius:50%; border:1px solid var(--line); background:transparent; position:relative; transition:all .45s var(--ease); flex:none; }
#deckExp .tl-dot::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--accent); opacity:0; transform:scale(.4); transition:all .45s var(--ease); }
#deckExp .tl-lab{ font-family:var(--ui); font-weight:500; font-size:12.5px; letter-spacing:.01em; color:var(--muted); opacity:.6; transition:color .45s,opacity .45s; white-space:nowrap; }
#deckExp .tl-item.is-active .tl-dot{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 12px var(--accent); }
#deckExp .tl-item.is-active .tl-dot::after{ opacity:1; transform:scale(1); }
#deckExp .tl-item.is-active .tl-lab{ color:var(--ink); opacity:1; }

/* ====== DECK 3D ====== */
#deckExp .deck-view{ position:absolute; inset:0; z-index:20; perspective:1050px; perspective-origin:calc(50% + 110px) 46%; }
#deckExp .deck{ position:absolute; inset:0; transform-style:preserve-3d; }
#deckExp .card{
  position:absolute; top:47%; left:calc(50% + 110px);
  width:min(72vw,1360px); height:min(70vh,760px);
  margin:0; border-radius:36px; overflow:hidden;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d; will-change:transform,opacity,filter;
  background:
    radial-gradient(120% 100% at 80% 8%, rgba(199,255,46,.11), transparent 48%),
    linear-gradient(158deg, #1a3820 0%, #10230f 58%, #0b180b 100%);
  border:1px solid rgba(199,255,46, calc(.07 + .34*var(--lit,0)));
  box-shadow:0 70px 160px -50px rgba(0,0,0,.92), inset 0 2px 0 rgba(255,255,255,.06), inset 0 0 80px rgba(199,255,46,.04); }
#deckExp .card-dim{ position:absolute; inset:0; z-index:5; pointer-events:none; background:#081007; opacity:var(--dim,0); }
#deckExp .deck-halo{ position:absolute; z-index:19; pointer-events:none;
  left:calc(50% + 110px); top:44%; transform:translate(-50%,-50%);
  width:66vw; max-width:1040px; height:66vh; max-height:700px; border-radius:50%;
  background:
    radial-gradient(ellipse at center, rgba(199,255,46,.34), rgba(199,255,46,.10) 40%, transparent 66%),
    radial-gradient(circle at 52% 46%, rgba(216,255,140,.22), transparent 40%);
  filter:blur(48px); opacity:0; mix-blend-mode:screen; will-change:opacity; }
#deckExp .card::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(130deg, rgba(255,255,255,.07), transparent 34%); }
/* foto de fondo bien visible (sin máscara que la desvanecía); el sombreado para el texto
   lo pone .card-scrim en la esquina inferior-izquierda. Encuadre por card más abajo. */
#deckExp .card-photo{ position:absolute; inset:0; z-index:1; background-size:cover; background-position:72% 36%;
  background-repeat:no-repeat; opacity:.9; pointer-events:none;
  animation:dkphotoFloat 11s ease-in-out infinite; }
/* encuadre del sujeto por núcleo (sesgo a la derecha; escalar sube para ver el cohete) */
#deckExp .card[data-i="0"] .card-photo{ background-position:74% 46%; }   /* atraer: placa Petri */
#deckExp .card[data-i="1"] .card-photo{ background-position:80% 42%; }   /* convertir: embudo */
#deckExp .card[data-i="2"] .card-photo{ background-position:76% 40%; }   /* automatizar: panel */
#deckExp .card[data-i="3"] .card-photo{ background-position:72% 26%; }   /* escalar: cohete (arriba-dcha) */
@keyframes dkphotoFloat{ 0%,100%{ transform:scale(1.02) translateY(0) } 50%{ transform:scale(1.05) translateY(-8px) } }
/* sombra SOLO en la zona del texto (abajo + izquierda) para legibilidad; la esquina
   superior-derecha queda transparente → la foto y su sujeto se ven bien */
#deckExp .card-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, rgba(6,14,6,.97) 4%, rgba(6,14,6,.86) 26%, rgba(6,14,6,.6) 46%, rgba(6,14,6,.28) 60%, transparent 75%),
    linear-gradient(105deg, rgba(6,14,6,.9) 0%, rgba(6,14,6,.4) 34%, transparent 60%); }
#deckExp .card-body{ position:absolute; z-index:4; left:58px; bottom:52px; right:58px; }
/* el texto despega de la foto aunque el sujeto (claro) quede detrás */
#deckExp .card-body h2, #deckExp .card-body p, #deckExp .dkeyebrow{ text-shadow:0 1px 16px rgba(6,14,6,.6); }
#deckExp .card-index{ position:absolute; z-index:4; right:44px; top:34px; font-family:var(--mono); font-weight:500;
  font-size:13px; letter-spacing:.14em; color:var(--faint); }
#deckExp .card-body > *{ opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
#deckExp .card.focused .card-body > *{ opacity:1; transform:none; }
#deckExp .card.focused .card-body > *:nth-child(1){ transition-delay:.03s }
#deckExp .card.focused .card-body > *:nth-child(2){ transition-delay:.10s }
#deckExp .card.focused .card-body > *:nth-child(3){ transition-delay:.17s }
#deckExp .card.focused .card-body > *:nth-child(4){ transition-delay:.25s }
#deckExp .dkeyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; display:flex; align-items:center; gap:11px; }
#deckExp .dkeyebrow::before{ content:""; width:28px; height:1px; background:var(--accent); display:inline-block; box-shadow:0 0 8px var(--accent); }
#deckExp .card-body h2{ font-family:var(--sans); font-weight:600; font-size:clamp(42px,5vw,74px); line-height:.98; letter-spacing:-0.038em; margin-bottom:16px; max-width:13ch; }
#deckExp .card-body h2 .hl{ color:var(--accent); }
#deckExp .card-body p{ font-size:16px; line-height:1.5; color:var(--faint); max-width:42ch; margin-bottom:0; }
#deckExp .card-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-top:22px; padding-top:20px; border-top:1px solid rgba(199,255,46,.16); }
#deckExp .tags{ display:flex; gap:8px; flex-wrap:wrap; }
#deckExp .tags span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#e4f2cd;
  border:1px solid rgba(199,255,46,.4); border-radius:40px; padding:6px 12px; background:rgba(199,255,46,.2); }
#deckExp .kpi{ text-align:right; line-height:1; flex:none; }
#deckExp .kpi b{ font-family:var(--mono); font-weight:600; font-size:30px; letter-spacing:-.02em; color:var(--accent);
  display:block; text-shadow:0 0 22px rgba(199,255,46,.4); }
#deckExp .kpi span{ font-family:var(--ui); font-size:11px; color:var(--muted); letter-spacing:.01em; margin-top:6px; display:block; white-space:nowrap; }

/* ====== MICRO-INTRO ====== */
#deckExp .intro{ position:absolute; inset:0; z-index:48; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 24px; pointer-events:none; will-change:opacity,transform,filter; }
#deckExp .intro-kicker{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:26px;
  opacity:0; transform:translateY(10px); transition:opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s; }
#deckExp .intro.dkshown .intro-kicker{ opacity:1; transform:none; }
#deckExp .intro-title{ font-family:var(--sans); font-weight:600; font-size:clamp(46px,8.4vw,112px); line-height:.96; letter-spacing:-.045em; }
#deckExp .intro-title .l{ display:block; overflow:hidden; padding:0 .04em; }
#deckExp .intro-title .l > span{ display:inline-block; transform:translateY(115%); transition:transform 1.05s var(--ease); }
#deckExp .intro.dkshown .l > span{ transform:translateY(0); }
#deckExp .intro-title .l:nth-child(2) > span{ transition-delay:.09s } #deckExp .intro-title .l:nth-child(3) > span{ transition-delay:.18s }
#deckExp .intro-title .accent{ color:var(--accent); }
#deckExp .intro-sub{ margin-top:28px; font-size:16px; color:var(--faint); opacity:0; transition:opacity 1s var(--ease) .55s; }
#deckExp .intro.dkshown .intro-sub{ opacity:1; }

/* ====== overlays ====== */
#deckExp .counter{ position:absolute; bottom:32px; right:40px; z-index:60; font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.14em; color:var(--muted); transition:opacity .4s; }
#deckExp .counter b{ color:var(--ink); font-weight:500; }
#deckExp .hint{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; align-items:center; gap:7px;
  font-family:var(--ui); font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); transition:opacity .5s; }
#deckExp .hint .ar{ animation:dkbob 1.8s ease-in-out infinite; }
@keyframes dkbob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } }
#deckExp .progress{ position:absolute; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:70; box-shadow:0 0 10px var(--accent); }

@media(max-width:820px){
  /* la timeline vertical pasa a ser un menú HORIZONTAL de los 4 núcleos en el hueco superior;
     se ilumina el del núcleo activo (misma lógica is-active + clic del deck.js) */
  #deckExp .timeline{ left:0; right:0; top:18vh; transform:none; flex-direction:row;
    justify-content:center; align-items:center; gap:5px; padding:0 6px; z-index:59; }
  #deckExp .tl-rail{ display:none; }
  #deckExp .tl-dot{ display:none; }
  /* cada botón = pill con iconito, como los del chat */
  #deckExp .tl-item{ margin:0; padding:4px 9px 4px 4px; gap:5px; border:1px solid var(--line);
    border-radius:40px; background:rgba(199,255,46,.03); transition:border-color .35s,background .35s,box-shadow .35s; }
  #deckExp .tl-ic{ display:grid; place-items:center; width:19px; height:19px; border-radius:50%; flex:none;
    background:rgba(199,255,46,.15); color:var(--accent); }
  #deckExp .tl-ic svg{ width:11px; height:11px; }
  #deckExp .tl-lab{ font-size:10.5px; opacity:1; color:var(--ink); font-weight:500; }
  #deckExp .tl-item .tl-n{ display:none; }               /* fuera los números en móvil */
  /* rail=hijo1 · Sistema=hijo2 · núcleos=hijos3-6 · Conversación=hijo7 → en móvil solo los 4 núcleos */
  #deckExp .tl-item:nth-child(2), #deckExp .tl-item:nth-child(7){ display:none; }
  #deckExp .tl-item.is-active{ border-color:var(--accent); background:rgba(199,255,46,.12);
    box-shadow:0 0 16px rgba(199,255,46,.22); }
  #deckExp .tl-item.is-active .tl-lab{ color:var(--accent); }
  #deckExp .deck-view{ perspective-origin:50% 50%; }
  /* card más baja y algo más corta → no choca con la cabecera (logo/Contacta) */
  #deckExp .card{ left:50%; top:57%; width:90vw; height:54vh; border-radius:22px; }
  #deckExp .card-body{ left:26px; right:26px; bottom:28px; }
  #deckExp .card-index{ top:24px; right:26px; }
  /* cabecera con fondo degradado para que el texto sea legible sobre la card */
  #deckExp .hdr{ padding:18px 20px; background:linear-gradient(to bottom, rgba(11,23,12,.92) 0%, rgba(11,23,12,.55) 62%, transparent 100%); }
  #deckExp .dkcontacta{ font-size:12px; padding:8px 14px; }   /* compacto como en modo chat */
  /* hint: minúsculas, texto en blanco y flecha lima; destaca en móvil */
  #deckExp .hint{ font-size:11.7px; color:var(--ink); text-transform:lowercase; letter-spacing:.12em; gap:9px; bottom:34px; }
  #deckExp .hint .ar{ font-size:22px; color:var(--accent); text-transform:none; }
  #deckExp .grain{ display:none; }
  #deckExp .bg-grid{ display:none; }
  #deckExp .deck-halo{ display:none; }
  #deckExp .card-photo{ animation:none; }
}
@media (pointer:coarse){
  #deckExp .grain{ display:none; }
  #deckExp .deck-halo{ mix-blend-mode:normal; }
  #deckExp .cursor-dot,#deckExp .cursor-ring{ display:none; }   /* nada de cursor de escritorio en táctil */
}
@media (prefers-reduced-motion: reduce){
  #deckExp .grain,#deckExp .card-photo{ animation:none !important; }
}

/* DESKTOP: foto a tope y con el sujeto más grande hacia la derecha → más vida.
   Zoom con transform (siempre cubre) y origen hacia el sujeto de cada card. */
@media(min-width:821px){
  #deckExp .card-photo{ opacity:1; animation:none; transform:scale(1.16); transform-origin:70% 42%; }
  #deckExp .card[data-i="0"] .card-photo{ transform-origin:72% 46%; }  /* atraer */
  #deckExp .card[data-i="1"] .card-photo{ transform-origin:74% 44%; }  /* convertir */
  #deckExp .card[data-i="2"] .card-photo{ transform-origin:72% 42%; }  /* automatizar */
  #deckExp .card[data-i="3"] .card-photo{ transform-origin:64% 30%; }  /* escalar: hacia el cohete */
}