/* ============================================================
   AUTHCODE // CONDUIT  —  retro-futuristic deck stylesheet
   ============================================================ */

:root{
  /* tokens (overridable by Tweaks) */
  --accent:#FFD400;
  --accent-2:#FFB300;
  --pipe-speed:2.4s;
  --font-display:"Chakra Petch", system-ui, sans-serif;
  --font-body:"Space Grotesk", system-ui, sans-serif;
  --font-mono:"Space Mono", ui-monospace, monospace;

  /* dark theme defaults */
  --bg-0:#08080b;
  --bg-1:#0d0d12;
  --ink:#F4F1E6;
  --ink-dim:#9d9a8c;
  --ink-faint:#5c5a52;
  --line:rgba(255,212,0,.14);
  --grid:rgba(255,255,255,.035);
  --panel:rgba(255,255,255,.035);
  --panel-line:rgba(255,255,255,.10);
  --metal-a:#1a1a20;
  --metal-b:#0a0a0d;

  /* density */
  --pad:118px;
  --gap:1;
}

/* ---- light "amber blueprint" theme ---- */
.deck[data-theme="light"]{
  --bg-0:#ece5d2;
  --bg-1:#f3eedd;
  --ink:#1a1712;
  --ink-dim:#6b6450;
  --ink-faint:#a59c80;
  --line:rgba(40,34,18,.18);
  --grid:rgba(40,34,18,.05);
  --panel:rgba(26,23,18,.04);
  --panel-line:rgba(26,23,18,.14);
  --metal-a:#d8cfb6;
  --metal-b:#c4baa0;
}

/* density variants */
.deck[data-density="compact"]{ --pad:96px; --gap:.86; }
.deck[data-density="comfy"]{ --pad:140px; --gap:1.16; }

/* ============================================================ */
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:#000; }
body{ font-family:var(--font-body); -webkit-font-smoothing:antialiased; }

deck-stage:not(:defined){ visibility:hidden; }
deck-stage{ background:#000; }

/* ---- slide canvas ---- */
section.slide{
  background:
    radial-gradient(120% 90% at 18% 8%, color-mix(in srgb,var(--accent) 7%, transparent) 0%, transparent 42%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb,var(--accent) 5%, transparent) 0%, transparent 40%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 60%, #000 140%);
  color:var(--ink);
  font-size:20px;
  overflow:hidden;
  --rail-w:150px;
}
/* texture overlays */
section.slide::before{   /* grid */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(130% 120% at 30% 20%, #000 35%, transparent 88%);
}
section.slide::after{   /* scanlines + vignette */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:60;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px),
    radial-gradient(120% 130% at 50% 50%, transparent 58%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply; opacity:.55;
}
.deck[data-theme="light"] section.slide::after{ opacity:.30; mix-blend-mode:multiply; }

/* ---------- header chrome (injected) ---------- */
.chrome{ position:absolute; inset:0; z-index:50; pointer-events:none; }
.chrome .brand{
  position:absolute; left:var(--pad); top:54px; display:flex; align-items:center; gap:16px;
}
.chrome .brand img{ height:34px; display:block; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 40%,transparent)); }
.deck[data-theme="light"] .chrome .brand .logo-w{ display:none; }
.deck:not([data-theme="light"]) .chrome .brand .logo-d{ display:none; }

.chrome .meta{
  position:absolute; left:var(--pad); top:104px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.28em; color:var(--ink-faint);
  text-transform:uppercase;
}
.chrome .topright{
  position:absolute; right:calc(var(--rail-w) + 26px); top:52px;
  display:flex; align-items:center; gap:14px; pointer-events:auto;
}
.lang{
  display:flex; border:1px solid var(--panel-line); border-radius:2px; overflow:hidden;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  background:var(--panel); backdrop-filter:blur(4px);
}
.lang button{
  appearance:none; background:transparent; color:var(--ink-dim); border:0; cursor:pointer;
  padding:8px 13px; font:inherit; letter-spacing:inherit; transition:.18s;
}
.lang button.on{ background:var(--accent); color:#0a0a0a; }
.lang button:not(.on):hover{ color:var(--ink); }

/* ---------- conduit rail (injected per slide) ---------- */
.conduit{
  position:absolute; top:0; right:0; bottom:0; width:var(--rail-w); z-index:40;
  pointer-events:none;
}
.conduit svg{ position:absolute; inset:0; height:100%; width:100%; overflow:visible; }
.conduit .pipe-dim{ stroke:var(--metal-a); opacity:.9; }
.conduit .pipe-flow{
  stroke:var(--accent);
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 75%,transparent));
}
/* energized pipe draws on when slide activates (normalized pathLength=1) */
.conduit .pipe-flow.draw{ stroke-dasharray:1 1; stroke-dashoffset:0; }
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .conduit .pipe-flow.draw{ animation:pipe-draw .9s cubic-bezier(.4,.6,.2,1) both; }
}
@keyframes pipe-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* traveling energy pulse along the energized segment */
.conduit .flow-dash{
  stroke:color-mix(in srgb,var(--accent) 70%, #fff 30%);
  stroke-dasharray:.05 .95; stroke-dashoffset:1;
  filter:drop-shadow(0 0 6px var(--accent));
  animation:flow-pulse var(--pipe-speed) linear infinite;
}
@keyframes flow-pulse{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* current-station node pulse */
.conduit .node .pulse{ transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion:no-preference){
  .conduit .node .pulse{ animation:node-pulse 2.2s ease-out infinite; }
}
@keyframes node-pulse{ 0%{ transform:scale(1); opacity:.9; } 70%,100%{ transform:scale(2.4); opacity:0; } }

/* station labels */
.conduit .station{
  position:absolute; right:84px; transform:translateY(-50%);
  text-align:right; font-family:var(--font-mono); white-space:nowrap;
  transition:opacity .4s, color .4s;
}
.conduit .station .n{ font-size:11px; letter-spacing:.2em; color:var(--ink-faint); }
.conduit .station .nm{ font-size:13px; letter-spacing:.22em; color:var(--ink-faint); }
.conduit .station.past .nm{ color:var(--ink-dim); }
.conduit .station.past .n{ color:var(--accent-2); opacity:.6; }
.conduit .station.cur{ }
.conduit .station.cur .nm{ color:var(--ink); font-size:14px; }
.conduit .station.cur .n{ color:var(--accent); }
.conduit .station .nm[data-lang]{ }

/* current readout chip */
.conduit .readout{
  position:absolute; right:120px; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; color:#0a0a0a;
  background:var(--accent); padding:3px 8px; border-radius:1px;
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 55%,transparent);
  opacity:0; transition:opacity .4s;
}

/* ---------- content frame ---------- */
.frame{
  position:absolute; inset:0; z-index:20;
  padding:172px var(--rail-w) 92px var(--pad);
  display:flex; flex-direction:column; justify-content:center;
}
.kicker{
  font-family:var(--font-mono); font-size:14px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:14px; margin:0 0 26px;
}
.kicker::before{
  content:""; width:42px; height:1px; background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
h1.title{
  font-family:var(--font-display); font-weight:700; line-height:1.05;
  font-size:calc(108px * var(--gap)); letter-spacing:-.01em; margin:0;
  text-wrap:balance;
}
h2.title{
  font-family:var(--font-display); font-weight:700; line-height:1.0;
  font-size:calc(74px * var(--gap)); letter-spacing:-.005em; margin:0;
  text-wrap:balance;
}
.title .hl{ color:var(--accent); text-shadow:0 0 28px color-mix(in srgb,var(--accent) 45%,transparent); }
.lead{
  font-size:calc(27px * var(--gap)); line-height:1.5; color:var(--ink-dim);
  max-width:30ch; margin:30px 0 0;
}

/* ---------- glass tiles / cards ---------- */
.tile{
  position:relative; background:var(--panel); border:1px solid var(--panel-line);
  border-radius:3px; padding:26px 26px 28px; overflow:hidden;
  transition:border-color .3s, transform .3s;
}
.tile::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent 70%); opacity:.0; transition:.3s;
}
.tile:hover{ border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.tile:hover::before{ opacity:.9; }
.tile .ico{ height:54px; margin-bottom:18px; display:block;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 30%,transparent)); }
.tile h3{
  font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:.01em;
  margin:0 0 10px; text-transform:uppercase; line-height:1.12;
}
.tile p{ font-size:15px; line-height:1.5; color:var(--ink-dim); margin:0; }
.tile .tag{
  position:absolute; right:18px; top:18px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.2em; color:var(--accent); opacity:.7;
}

/* service tiles use the brand yellow icon-tiles */
.svc .ico{ height:64px; }

/* numbered step */
.step .num{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.2em; color:var(--accent); margin-bottom:14px;
  display:block;
}

/* generic grids */
.grid{ display:grid; gap:calc(20px * var(--gap)); }
.g4{ grid-template-columns:repeat(4,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g6{ grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px; font-family:var(--font-mono);
  font-size:15px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:16px 26px; border-radius:2px; cursor:pointer; transition:.2s;
}
.btn.primary{ background:var(--accent); color:#0a0a0a; box-shadow:0 0 30px color-mix(in srgb,var(--accent) 35%,transparent); }
.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 0 44px color-mix(in srgb,var(--accent) 55%,transparent); }
.btn.ghost{ color:var(--ink); border:1px solid var(--panel-line); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- bilingual ---------- */
[data-lang]{ display:inline; }
.deck[data-ui-lang="es"] [data-lang="en"]{ display:none; }
.deck[data-ui-lang="en"] [data-lang="es"]{ display:none; }
/* block-level bilingual wrappers */
p[data-lang], span.block[data-lang], div[data-lang]{ display:block; }
.deck[data-ui-lang="es"] p[data-lang="en"],
.deck[data-ui-lang="es"] .block[data-lang="en"]{ display:none; }
.deck[data-ui-lang="en"] p[data-lang="es"],
.deck[data-ui-lang="en"] .block[data-lang="es"]{ display:none; }

/* ---------- entrance animations (medium) ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .anim{ animation:rise .62s cubic-bezier(.2,.7,.2,1) both; }
  [data-deck-active] .anim{ animation-delay:calc(var(--d,0) * 90ms + 120ms); }
  @keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
  [data-deck-active] .anim-x{ animation:slidein .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--d,0)*70ms + 100ms); }
  @keyframes slidein{ from{ opacity:0; transform:translateX(-30px); } to{ opacity:1; transform:none; } }
}

/* base state must be visible for print/reduced motion */
.anim,.anim-x{ opacity:1; }

/* ---------- decorative HUD bits ---------- */
.corner-tag{
  position:absolute; z-index:30; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.24em; color:var(--ink-faint); text-transform:uppercase;
}
.corner-tag.bl{ left:var(--pad); bottom:54px; }
.hud-line{ display:flex; align-items:center; gap:12px; }
.hud-line .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:blink 2.4s steps(1) infinite; }
@keyframes blink{ 0%,70%{opacity:1} 71%,100%{opacity:.25} }

/* misc text helpers */
.mono{ font-family:var(--font-mono); }
.dim{ color:var(--ink-dim); }
.big-num{ font-family:var(--font-display); font-weight:700; color:color-mix(in srgb,var(--accent) 90%, #fff); }

/* FAQ rows */
.faq-row{ border-top:1px solid var(--panel-line); padding:22px 0; display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:start; }
.faq-row:last-child{ border-bottom:1px solid var(--panel-line); }
.faq-row .q{ font-family:var(--font-display); font-weight:600; font-size:23px; text-transform:uppercase; letter-spacing:.01em; line-height:1.15; }
.faq-row .q .qmark{ color:var(--accent); margin-right:12px; font-family:var(--font-mono); font-size:16px; }
.faq-row .a{ font-size:16px; line-height:1.55; color:var(--ink-dim); }

/* testimonial */
.quote{ font-family:var(--font-display); font-weight:600; font-size:calc(46px*var(--gap)); line-height:1.18; letter-spacing:-.01em; max-width:20ch; text-wrap:balance; }
.quote .qt{ color:var(--accent); }
.stars{ display:flex; gap:8px; margin-bottom:30px; }
.stars img{ height:26px; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 50%,transparent)); }
.person{ display:flex; align-items:center; gap:18px; margin-top:40px; }
.person img{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:1px solid var(--accent); }
.person .nm{ font-family:var(--font-display); font-weight:600; font-size:20px; }
.person .rl{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; color:var(--ink-dim); text-transform:uppercase; }

/* resource cards */
.res .ix{ font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; color:var(--accent); margin-bottom:18px; display:block; }
.res h3{ font-family:var(--font-display); font-weight:700; font-size:25px; text-transform:uppercase; line-height:1.1; margin:0 0 14px; }
.res p{ font-size:15px; color:var(--ink-dim); line-height:1.5; margin:0 0 22px; }
.res .lk{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:3px; }

/* sedes */
.sedes{ display:flex; gap:14px; flex-wrap:wrap; }
.sede{ font-family:var(--font-mono); font-size:15px; letter-spacing:.14em; color:var(--ink); border:1px solid var(--panel-line); padding:12px 18px; border-radius:2px; text-transform:uppercase; display:inline-flex; align-items:center; }
.sede .flag{ width:22px; height:22px; border-radius:50%; object-fit:cover; margin-right:8px; flex-shrink:0; }
.social{ display:flex; gap:14px; margin-top:8px; }
.social a{ width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--panel-line); border-radius:2px; transition:.2s; pointer-events:auto; }
.social a:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.social img{ height:20px; }

/* tweaks mount */
#tweaks-root{ position:fixed; inset:0; z-index:9000; pointer-events:none; }
#tweaks-root > *{ pointer-events:auto; }