/* ==========================================================================
   MOVE ON — HYBRID BOX
   Sistema Híbrido de Rendimiento
   ========================================================================== */

:root{
  --black:#000000;
  --bg-0:#050506;
  --bg-1:#0b0c0e;
  --bg-2:#101113;
  --panel:#131417;
  --line:#232529;
  --line-soft:rgba(255,255,255,0.08);
  --gray-500:#8a8d94;
  --gray-300:#c4c6cb;
  --white:#f4f5f7;
  --pure-white:#ffffff;
  --blue:#208dff;
  --blue-2:#4fa6ff;
  --blue-dim:#12508f;
  --blue-glow:rgba(32,141,255,.45);

  --font-display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'Space Mono', 'Courier New', monospace;

  --container:1360px;
  --gutter:clamp(20px, 5vw, 64px);
  --radius:2px;
  --ease:cubic-bezier(.16,.84,.28,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --nav-h:84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  background:var(--black);
  /* `clip`, never `hidden`: overflow-x:hidden turns the page into a scroll
     container and silently kills every position:sticky inside it. */
  overflow-x:clip;
}
html.no-smooth{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body.lock{ overflow:hidden; height:100vh; }
/* Bloqueo que conserva la posición de lectura: el JS guarda el scroll y lo
   compensa con `top`, así al cerrar el panel la página vuelve donde estaba. */
body.lock-fixed{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,p,ul,figure{ margin:0; padding:0; }
ul{ list-style:none; }
::selection{ background:var(--blue); color:#000; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* Custom cursor (desktop only) --------------------------------------- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--blue); transition:opacity .2s; }
.cursor-ring{
  width:34px; height:34px; border:1px solid rgba(255,255,255,.4);
  transition:width .25s var(--ease-soft), height .25s var(--ease-soft), border-color .25s, background .25s, opacity .2s;
}
.cursor-ring.is-active{
  width:64px; height:64px; border-color:var(--blue); background:rgba(32,141,255,.08);
}
body.cursor-ready{ cursor:none; }
body.cursor-ready a, body.cursor-ready button{ cursor:none; }
@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{ display:none !important; }
}

/* Preloader ------------------------------------------------------------ */
#preloader{
  position:fixed; inset:0; z-index:10000; background:#000;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:22px;
  transition:opacity .9s var(--ease), visibility .9s;
}
#preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-line{
  width:0; height:1px; background:var(--blue);
  box-shadow:0 0 12px var(--blue-glow);
  animation:pre-grow 1.6s var(--ease) forwards;
}
@keyframes pre-grow{ to{ width:220px; } }
.pre-status{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.25em;
  color:var(--gray-500); text-transform:uppercase;
  opacity:0; animation:pre-fade .6s ease forwards .4s;
}
@keyframes pre-fade{ to{ opacity:1; } }
.pre-percent{
  font-family:var(--font-mono); font-size:15px; color:var(--blue); letter-spacing:.1em;
  min-width:52px; text-align:center;
}

/* Navigation ------------------------------------------------------------ */
#site-nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h);
  display:flex; align-items:center;
  transform:translateY(0);
  transition:transform .5s var(--ease), background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
#site-nav.is-scrolled{
  background:rgba(5,5,6,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
#site-nav.is-hidden{ transform:translateY(-100%); }
.nav-inner{
  width:100%; max-width:var(--container); margin:0 auto;
  padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-logo svg{ width:26px; height:26px; }
.nav-logo-text{ font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:.02em; }
.nav-logo-text b{ color:var(--blue); font-weight:800; }

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  position:relative; padding:9px 15px; font-size:12.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gray-300);
  transition:color .25s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:15px; right:15px; bottom:4px; height:1px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover,.nav-links a.is-active{ color:var(--pure-white); }
.nav-links a:hover::after,.nav-links a.is-active::after{ transform:scaleX(1); }

.nav-right{ display:flex; align-items:center; gap:18px; flex-shrink:0; }

/* Language: minimal trigger that unfolds a delicate bar ---------------- */
.lang-select{ position:relative; }
.lang-trigger{
  display:flex; align-items:center; gap:7px;
  background:none; border:1px solid transparent; padding:7px 9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  color:var(--gray-500); transition:color .25s, border-color .25s;
}
.lang-trigger:hover,.lang-select.is-open .lang-trigger{ color:var(--white); border-color:var(--line); }
.lang-caret{
  width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); transition:transform .35s var(--ease);
}
.lang-select.is-open .lang-caret{ transform:rotate(225deg) translate(-2px,-2px); }

.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:190px;
  background:rgba(8,9,11,.94); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line); padding:5px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index:920;
}
.lang-select.is-open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu button{
  display:flex; align-items:center; gap:14px; width:100%;
  background:none; border:none; padding:10px 12px; text-align:left;
  color:var(--gray-500); transition:color .2s, background .2s;
}
.lang-menu button:hover{ color:var(--white); background:rgba(255,255,255,.04); }
.lang-menu button.is-active{ color:var(--blue); }
.lang-menu .lang-code{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; min-width:22px; }
.lang-menu .lang-name{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; }

/* Mobile language rail */
.lang-rail{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:34px; }
.lang-rail button{
  background:none; border:none; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  color:var(--gray-500); transition:color .2s;
}
.lang-rail button.is-active{ color:var(--blue); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.btn-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:#020202; font-weight:700;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 20px; border-radius:1px; border:1px solid var(--blue);
  transition:background .25s, color .25s, transform .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn-cta:hover{ background:transparent; color:var(--blue); box-shadow:0 0 24px rgba(32,141,255,.25); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--white); font-weight:600;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 22px; border:1px solid var(--line); border-radius:1px;
  transition:border-color .25s, color .25s, background .25s;
}
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.cta-short{ display:none; }
.btn-arrow{ transition:transform .25s var(--ease); }
.btn-cta:hover .btn-arrow, .btn-ghost:hover .btn-arrow, .link-arrow:hover .btn-arrow{ transform:translateX(4px); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:6px;
  width:38px; height:38px; background:none; border:1px solid var(--line);
}
.nav-toggle span{ display:block; width:16px; height:1px; background:var(--white); margin:0 auto; transition:transform .3s ease, opacity .3s ease; }
.nav-toggle.is-active span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle.is-active span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

#mobile-menu{
  position:fixed; inset:0; z-index:895; background:rgba(4,4,5,.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .4s ease, visibility .4s, transform .4s ease;
}
#mobile-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
#mobile-menu nav{ display:flex; flex-direction:column; align-items:center; gap:22px; }
#mobile-menu nav a{
  font-family:var(--font-display); font-weight:800; font-size:1.7rem; text-transform:uppercase;
  color:var(--white); letter-spacing:-.01em;
}
#mobile-menu nav a:hover{ color:var(--blue); }
@media (max-width:1200px){ .nav-toggle{ display:flex; } }

/* Progress line under nav ---------------------------------------------- */
#scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; background:var(--blue);
  z-index:901; box-shadow:0 0 10px var(--blue-glow);
  transition:width .1s linear;
}

/* Sections / type system ------------------------------------------------ */
section{ position:relative; }
.section{ padding:min(14vw,140px) 0; }
.section-tight{ padding:min(9vw,90px) 0; }
.bg-black{ background:var(--black); }
.bg-0{ background:var(--bg-0); }
.bg-1{ background:var(--bg-1); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--blue); margin-bottom:22px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--blue); }

.h-xxl{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.6rem, 8vw, 6.4rem); line-height:.98; letter-spacing:-.01em;
  text-transform:uppercase;
}
.h-xl{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.1rem, 5.6vw, 4.4rem); line-height:1.02; letter-spacing:-.01em;
  text-transform:uppercase;
}
.h-lg{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem, 3.4vw, 2.6rem); line-height:1.08; letter-spacing:-.005em;
  text-transform:uppercase;
}
.h-md{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.2rem, 2vw, 1.6rem); line-height:1.15; text-transform:uppercase;
}
.body-lg{ font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; color:var(--gray-300); font-weight:400; }
.body-md{ font-size:1rem; line-height:1.6; color:var(--gray-300); }
.text-blue{ color:var(--blue); }
.text-dim{ color:var(--gray-500); }
.mono-label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-500); }
.max-w-content{ max-width:760px; }

/* Word-reveal ------------------------------------------------------------ */
.reveal-word{ display:inline-block; overflow:hidden; }
.reveal-word span{
  display:inline-block; transform:translateY(110%); opacity:0;
  transition:transform .7s var(--ease), opacity .7s var(--ease);
}
.is-inview .reveal-word span{ transform:translateY(0); opacity:1; }

[data-reveal]{
  opacity:0; transform:translateY(36px);
  transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
[data-reveal].is-inview{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="scale"].is-inview{ transform:scale(1); }
[data-reveal-delay="1"]{ transition-delay:.1s; }
[data-reveal-delay="2"]{ transition-delay:.2s; }
[data-reveal-delay="3"]{ transition-delay:.32s; }
[data-reveal-delay="4"]{ transition-delay:.44s; }

/* ===================== HERO ===================== */
#hero{
  height:100svh; min-height:600px; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; background:#000;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
/* <picture> es inline por defecto y colapsaría el alto del contenedor. */
.hero-media picture{ display:block; width:100%; height:100%; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  transform:scale(1.08); opacity:0;
  transition:opacity 1.6s var(--ease) .2s, transform 6s var(--ease-soft);
}
#hero.is-loaded .hero-media img{ opacity:1; transform:scale(1); }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 32%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.96) 100%),
    linear-gradient(90deg, rgba(0,0,0,.5) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.5) 100%);
}
.hero-grid-line{ position:absolute; inset:0; z-index:1; opacity:.35; pointer-events:none;
  background-image:linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:calc(100%/6) 100%;
}
.hero-content{ position:relative; z-index:2; padding:0 var(--gutter) clamp(50px,9vw,96px); }
.hero-kicker{
  display:flex; align-items:center; gap:12px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--blue-2);
  margin-bottom:14px;
}
.hero-kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px var(--blue-glow); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* the invitation — leads the hero, held to two lines so the wall logo stays clear */
.hero-invite{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.45rem, 3vw, 2.7rem); line-height:1.06; letter-spacing:-.01em;
  color:var(--pure-white);
  opacity:0; transform:translateY(14px);
  transition:opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s;
}
#hero.is-loaded .hero-invite{ opacity:1; transform:translateY(0); }
.hero-invite b{ color:var(--blue); font-weight:800; }

/* kicker + brand statement sit under the headline, clear of the painted logo */
.hero-meta{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft);
  max-width:640px;
  opacity:0; transform:translateY(10px);
  transition:opacity .8s var(--ease) .7s, transform .8s var(--ease) .7s;
}
#hero.is-loaded .hero-meta{ opacity:1; transform:translateY(0); }

.hero-statement-sm{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(.72rem, 1vw, .88rem); letter-spacing:.16em;
  color:var(--gray-300);
}
.hero-statement-sm span{ display:inline-flex; align-items:center; gap:14px; }
.hero-statement-sm span:not(:last-child)::after{
  content:''; width:14px; height:1px; background:var(--line); display:inline-block;
}

.hero-actions{
  margin-top:34px; display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease) .88s, transform .8s var(--ease) .88s;
}
#hero.is-loaded .hero-actions{ opacity:1; transform:translateY(0); }

/* Short desktop viewports: tighten the block so it never rides up into the
   painted wall logo, which sits at roughly 43–45% of the frame. */
@media (min-width:900px) and (max-height:720px){
  .hero-invite{ font-size:clamp(1.3rem, 2.4vw, 2.05rem); }
  .hero-meta{ margin-top:18px; padding-top:16px; }
  .hero-kicker{ margin-bottom:10px; }
  .hero-actions{ margin-top:24px; }
  .hero-content{ padding-bottom:clamp(38px,5vw,60px); }
}

.hero-scroll{
  position:absolute; right:var(--gutter); bottom:36px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; transition:opacity 1s ease 1.8s;
}
#hero.is-loaded .hero-scroll{ opacity:1; }
.hero-scroll span{ writing-mode:vertical-rl; font-family:var(--font-mono); font-size:10px; letter-spacing:.25em; color:var(--gray-500); text-transform:uppercase; }
.hero-scroll .track{ width:1px; height:52px; background:var(--line); position:relative; overflow:hidden; }
.hero-scroll .track::after{ content:''; position:absolute; top:0; left:0; width:100%; height:30%; background:var(--blue); animation:scrolldown 1.8s infinite ease-in-out; }
@keyframes scrolldown{ 0%{ transform:translateY(-100%);} 100%{ transform:translateY(340%);} }

/* Moved off the left edge — that side already carries the headline block.
   Sits top-right as one thin dash-separated line, balancing the logo. */
.hero-coords{
  position:absolute; right:var(--gutter); top:calc(var(--nav-h) + 24px); z-index:2;
  display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:0 10px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gray-500);
  opacity:0; transition:opacity 1s ease 1.4s;
}
#hero.is-loaded .hero-coords{ opacity:1; }
.hero-coords span{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.hero-coords span:not(:last-child)::after{
  content:''; width:12px; height:1px; background:var(--line); display:inline-block;
}
@media (max-width:760px){
  .hero-coords{ font-size:9px; letter-spacing:.16em; max-width:62vw; }
}

/* Ticker ------------------------------------------------------------ */
.ticker-clip{
  position:relative; z-index:3; overflow:hidden;
  background:var(--bg-1);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
/* fade the edges so words enter and leave instead of getting chopped */
.ticker-clip::before,.ticker-clip::after{
  content:''; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none;
}
.ticker-clip::before{ left:0;  background:linear-gradient(90deg, var(--bg-1), transparent); }
.ticker-clip::after{  right:0; background:linear-gradient(270deg, var(--bg-1), transparent); }

.ticker-wrap{ overflow:hidden; padding:18px 0; }
.ticker-track{ display:flex; width:max-content; animation:ticker 38s linear infinite; }
.ticker-track span{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(.95rem, 1.5vw, 1.25rem); letter-spacing:.14em;
  color:var(--gray-500); padding:0 28px;
}
.ticker-track span b{ color:var(--white); font-weight:800; }
.ticker-track span::after{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--blue); margin-left:56px; flex-shrink:0;
}
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ===================== IDENTIFICACION ===================== */
#identificacion{ padding:min(16vw,180px) 0; text-align:center; }
.identidad-stack{ display:flex; flex-direction:column; gap:6px; align-items:center; margin-top:56px; }
.identidad-stack .row{
  display:flex; align-items:center; gap:16px; font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; font-size:clamp(1.5rem,4.4vw,3.2rem); color:var(--gray-500);
  opacity:.35; transition:opacity .6s ease, color .6s ease;
}
.identidad-stack .row.is-active{ opacity:1; color:var(--pure-white); }
.identidad-stack .row b{ color:var(--blue); font-weight:800; }
.identidad-stack .row .idx{ font-family:var(--font-mono); font-size:13px; color:var(--gray-500); width:28px; text-align:right; }

.negacion-list{ display:flex; flex-direction:column; gap:10px; margin-top:34px; max-width:620px; margin-left:auto; margin-right:auto; }
.negacion-list p{ font-size:clamp(1rem,1.6vw,1.2rem); color:var(--gray-500); }
.negacion-list p b{ color:var(--gray-300); font-weight:600; }

/* ===================== SYSTEM / PROTOCOL INTERFACE ===================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; }
.split.reverse{ direction:rtl; } .split.reverse > *{ direction:ltr; }

.frame-media{ position:relative; border:1px solid var(--line); overflow:hidden; background:var(--bg-1); }
.frame-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame-corner{ position:absolute; width:16px; height:16px; border:1px solid var(--blue); opacity:.9; }
.frame-corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.frame-corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.frame-tag{
  position:absolute; top:14px; left:14px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-2);
  background:rgba(0,0,0,.55); padding:5px 9px; border:1px solid var(--line-soft);
}

.tier-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.tier-pill{
  border:1px solid var(--line); padding:9px 16px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-500);
  transition:border-color .3s, color .3s;
}
.tier-pill.is-featured{ border-color:var(--blue); color:var(--blue); }

/* ===================== MANIFIESTO ===================== */
#manifiesto{ min-height:70vh; display:flex; align-items:center; text-align:center; }
.manifiesto-lines{ display:flex; flex-direction:column; gap:.15em; }
.manifiesto-lines .m1{ color:var(--gray-500); }
.manifiesto-lines .m2{ color:var(--pure-white); }
.manifiesto-lines .m3{ color:var(--blue); }

/* ===================== METODO / PILARES ===================== */
.pilar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:60px; }
.pilar-card{ background:var(--bg-0); padding:44px 30px; transition:background .35s; }
.pilar-card:hover{ background:var(--bg-1); }
.pilar-num{ font-family:var(--font-mono); color:var(--blue); font-size:12px; letter-spacing:.2em; margin-bottom:26px; display:block; }
.pilar-card h3{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; text-transform:uppercase; margin-bottom:14px; }
.pilar-card p{ color:var(--gray-500); font-size:.94rem; line-height:1.6; }

/* ===================== EL BOX (campaña) ===================== */
.box-campaign{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--bg-0);
  padding:min(15vw,150px) 0 min(13vw,130px);
}
.box-campaign-inner{ position:relative; z-index:2; }

/* Only the blue survives — blown out, soft, sitting behind everything. */
.box-ghost{
  position:absolute; z-index:0; pointer-events:none;
  right:-14%; top:50%; transform:translateY(-50%);
  width:min(92vw,1080px); aspect-ratio:1;
  opacity:.20;
  filter:blur(46px) saturate(150%);
}
.box-ghost svg{ width:100%; height:100%; display:block; }
.box-campaign::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 30% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.86) 70%);
}

.box-head{ max-width:900px; }
.box-title{
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.3rem,7vw,6rem); line-height:.94; letter-spacing:-.03em;
  color:var(--pure-white); margin-top:4px;
}
.box-sub{ margin-top:26px; max-width:56ch; }

/* ---- Coverflow 3D del box ----------------------------------------------
   Las tarjetas viven sobre un arco en perspectiva real. JS escribe el
   transform de cada una según su distancia a la activa; acá sólo se define
   el escenario, el material de la tarjeta y las transiciones.            */
.box-deck{ position:relative; margin-top:clamp(40px,5vw,72px); }

/* Halo azul detrás del arco: hereda el gesto del logo fantasma. */
.deck-halo{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(96vw,1080px); height:min(60vw,540px);
  background:radial-gradient(50% 50% at 50% 50%, var(--blue-glow) 0%, transparent 70%);
  opacity:.34; filter:blur(34px);
}
/* Línea de horizonte: cruza todo el ancho y apoya el arco, para que la
   composición no quede flotando en el centro de un vacío. */
.deck-halo::after{
  content:''; position:absolute; left:0; right:0; top:76%; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  opacity:.9;
}

.deck-stage{
  position:relative; z-index:1;
  height:clamp(430px,54vw,700px);
  perspective:2000px; perspective-origin:50% 44%;
  transform-style:preserve-3d;
  transition:transform .32s var(--ease-soft);
  touch-action:pan-y;                 /* el arrastre horizontal es nuestro */
}
/* Suelo. Va colgado de .box-deck y no del escenario: dentro de un contexto
   preserve-3d un pseudo-elemento plano se cruzaría con las tarjetas. */
.box-deck::after{
  content:''; position:absolute; left:50%; bottom:52px; transform:translateX(-50%);
  width:min(86%,900px); height:130px; pointer-events:none; z-index:0;
  background:radial-gradient(50% 50% at 50% 0%, rgba(0,0,0,.85) 0%, transparent 72%);
}

.deck-card{
  position:absolute; left:50%; top:44%;
  width:clamp(190px,27vw,420px); aspect-ratio:3/4;
  margin:0; padding:0; border:1px solid var(--line); background:#0a0a0a;
  overflow:hidden; cursor:pointer;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  will-change:transform, opacity, filter;
  transition:
    transform .78s cubic-bezier(.5,.02,.2,1),
    opacity .6s ease,
    filter .6s ease,
    box-shadow .6s ease;
  -webkit-box-reflect:below 10px linear-gradient(transparent 48%, rgba(255,255,255,.22));
}
.deck-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* Escalada de más: deja margen para el paralaje interno que aplica el JS. */
  transform:scale(1.14);
  transition:transform .78s cubic-bezier(.5,.02,.2,1);
}
/* Brillo diagonal: le da materia de objeto, no de foto pegada. */
.dc-sheen{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.10) 0%, transparent 34%, transparent 66%, rgba(0,0,0,.42) 100%);
}
.deck-card.is-active{
  box-shadow:0 50px 110px rgba(0,0,0,.8), 0 0 0 1px var(--blue-dim), 0 0 90px -18px var(--blue-glow);
}
.deck-card:not(.is-active):hover{ filter:none !important; opacity:.85 !important; }

.deck-hud{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:clamp(18px,3vw,40px);
  margin-top:clamp(6px,1.5vw,18px);
}
.deck-count{
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--gray-500);
}
.deck-count b{ color:var(--pure-white); font-weight:400; }
.deck-count i{ width:18px; height:1px; background:var(--line); display:block; }

.deck-bars{ display:flex; gap:clamp(8px,1.2vw,16px); flex:1; }
/* El padding es el área táctil: la barra visible mide 2px. */
.brb{ flex:1; padding:16px 0 14px; background:none; border:0; cursor:pointer; }
.brb i{ display:block; height:2px; background:var(--line); position:relative; overflow:hidden; }
.brb b{
  position:absolute; inset:0; background:var(--blue);
  transform:scaleX(0); transform-origin:left center;
}
.brb.is-active b{ box-shadow:0 0 12px var(--blue-glow); }
.brb:hover i{ background:var(--line-soft); }

@media (prefers-reduced-motion: reduce){
  .deck-card, .deck-card img, .deck-stage{ transition:none; }
}

.box-claim{
  position:relative; isolation:isolate;
  margin-top:clamp(56px,7vw,100px); text-align:center;
  /* Mucho aire abajo: ahí se apoya el perfil de esfuerzo, sin cruzar la frase. */
  padding:clamp(34px,4vw,60px) 0 clamp(120px,14vw,190px);
}

/* Fondo del cierre: un perfil de esfuerzo que cruza despacio. El SVG lleva dos
   copias del mismo trazo, así que correrlo la mitad de su ancho equivale a una
   copia exacta y el bucle no tiene salto. */
.claim-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  display:flex; align-items:flex-end;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.claim-bg svg{
  flex:0 0 200%; width:200%;
  height:clamp(95px,12vw,155px);
  animation:claimDrift 38s linear infinite;
}
.cb-b{ fill:var(--line); }
.cb-a{ fill:var(--blue); opacity:.24; }
.cb-base{ stroke:var(--line-soft); stroke-width:1.5; }
@keyframes claimDrift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .claim-bg svg{ animation:none; } }

.box-claim-line{ position:relative; z-index:1; }
.box-claim-line{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.25rem,3.2vw,2.6rem); line-height:1.12; letter-spacing:-.015em;
  color:var(--gray-500);
}
.box-claim-line.is-accent{ color:var(--pure-white); }
.box-claim-line.is-accent::after{
  content:''; display:block; width:56px; height:2px; background:var(--blue);
  margin:clamp(22px,2.6vw,34px) auto 0;
}

.box-foot{
  margin-top:clamp(34px,4vw,52px);
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
}

@media (max-width:900px){
  .box-ghost{ right:-30%; opacity:.15; }
}
@media (max-width:560px){
  /* Menos perspectiva y arco más cerrado: en pantalla chica la profundidad
     exagerada deforma las tarjetas laterales. */
  .deck-stage{ perspective:1200px; height:clamp(340px,86vw,430px); }
  .deck-card{ width:clamp(160px,44vw,210px); }
  .deck-hud{ flex-direction:column; align-items:stretch; gap:4px; }
  .brb{ padding:20px 0 18px; }
}

/* ===================== HORARIOS ===================== */
/* Las grillas son imágenes sobre negro puro dentro de una sección negra: sin
   marco ni borde, la tabla queda flotando y no se lee como una captura. */
.grid-block{ margin-top:clamp(40px,5vw,68px); }
.grid-head{
  display:flex; align-items:baseline; gap:clamp(12px,1.6vw,20px);
  padding-bottom:14px; margin-bottom:clamp(14px,2vw,24px);
  border-bottom:1px solid var(--line);
}
.grid-num{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; color:var(--blue); }
.grid-name{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.05rem,2.2vw,1.7rem); letter-spacing:-.01em; color:var(--pure-white);
}
.grid-wrap{ position:relative; }
.grid-img{ display:block; width:100%; height:auto; }

/* Un botón por celda, posicionado en porcentajes sobre la imagen. Es
   transparente hasta que se lo apunta: ahí la celda se pinta de azul y dice
   qué va a pasar si se hace click. */
.grid-hot{ position:absolute; inset:0; }
.gh{
  position:absolute; padding:0; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:clamp(8px,.78vw,11px);
  letter-spacing:.16em; text-transform:uppercase; color:transparent;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Relleno opaco: si dejara pasar la celda, la hora se leería fantasma debajo
   de la palabra "Reservar". */
.gh:hover, .gh:focus-visible{
  outline:none;
  background:var(--blue);
  color:var(--pure-white);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
/* En táctil no hay hover: el toque abre WhatsApp directo, y la nota de abajo
   lo explica. Se marca sólo mientras el dedo está encima. */
.gh:active{ background:var(--blue); color:var(--pure-white); }

.hor-foot{
  margin-top:clamp(38px,5vw,60px);
  display:flex; align-items:center; gap:clamp(18px,3vw,36px); flex-wrap:wrap;
}
.hor-foot .mono-label{ opacity:.6; max-width:46ch; line-height:1.7; }

/* ===================== EVOLUCION ===================== */
.metric-panel{ margin-top:60px; border:1px solid var(--line); padding:clamp(24px,4vw,44px); }
.metric-panel .mono-label{ margin-bottom:26px; }
.bar-row{ margin-bottom:22px; }
.bar-row:last-child{ margin-bottom:0; }
.bar-row-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.bar-row-top span:first-child{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-500); }
.bar-value{ font-family:var(--font-mono); font-size:1rem; color:var(--blue); }
.bar-track{ height:8px; background:var(--bg-2); border:1px solid var(--line); overflow:hidden; }
.bar-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--blue-dim), var(--blue)); transition:width 1.4s var(--ease); }

.evo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:1px; }
.evo-stat{ background:var(--bg-0); padding:28px 20px; text-align:center; }
.evo-stat .val{ font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--white); }
.evo-stat .val.is-pending{ color:var(--gray-500); font-size:1.3rem; }
.evo-stat .lbl{ margin-top:8px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-500); }

/* ===================== NUMEROS ===================== */
.numeros-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,1px); margin-top:56px; }
.numero-item{ text-align:center; padding:20px 10px; border-top:1px solid var(--line); }
.numero-val{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,5vw,4.2rem); color:var(--pure-white); line-height:1; }
.numero-val .suffix{ color:var(--blue); }
.numero-lbl{ margin-top:14px; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-500); }

/* ===================== SOBRE MI ===================== */
#sobre-mi{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg-0);
}
.sm-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
/* Cuadrícula de plano: da profundidad sin competir con la pieza. */
.sm-bg::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, var(--line-soft) 0 1px, transparent 1px 96px);
  opacity:.35;
}
.sm-glow{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(86vw,860px); height:min(64vw,620px);
  background:radial-gradient(50% 50% at 50% 50%, var(--blue-glow) 0%, transparent 70%);
  opacity:.26; filter:blur(44px);
}
/* Reglas laterales con marcas y números: la referencia de "medición". */
.sm-rail{
  position:absolute; top:9%; bottom:9%; width:52px;
  display:flex; flex-direction:column; justify-content:space-between;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.16em;
  color:var(--gray-500); opacity:.55;
}
.sm-rail::before{ content:''; position:absolute; top:0; bottom:0; width:1px; background:var(--line); }
.sm-rail::after{
  content:''; position:absolute; top:0; bottom:0; width:9px;
  background:repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 19px);
}
.sm-rail-l{ left:max(14px,2.5vw); align-items:flex-start; padding-left:18px; }
.sm-rail-l::before, .sm-rail-l::after{ left:0; }
.sm-rail-r{ right:max(14px,2.5vw); align-items:flex-end; padding-right:18px; }
.sm-rail-r::before, .sm-rail-r::after{ right:0; }

.sm-inner{ position:relative; z-index:1; }
.sm-head{ max-width:900px; }

.sm-layout{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(34px,5vw,82px); align-items:center;
  margin-top:clamp(44px,5.5vw,76px);
}

/* ---- Retrato montado como pieza de campaña ---- */
.sm-plate{ position:relative; margin:0; }
/* El marco se ancla al recuadro de la foto, no a la figura entera: si no,
   se estira por debajo del pie de foto y pierde la lectura de póster. */
.sm-plate-media{ position:relative; }
/* Marco desplazado: el truco de póster de los 90, da volumen sin efectos. */
.sm-plate-frame{
  position:absolute; inset:20px -20px -20px 20px;
  border:1px solid rgba(32,141,255,.38); pointer-events:none;
}
.sm-vert{
  position:absolute; left:-30px; top:2px;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:9.5px; letter-spacing:.22em; color:var(--gray-500); opacity:.7;
}
.sm-plate-img{
  position:relative; overflow:hidden; z-index:1;
  border:1px solid var(--line); background:var(--bg-1);
  box-shadow:0 50px 110px rgba(0,0,0,.7), 0 0 90px -30px var(--blue-glow);
}
.sm-plate-img::before{
  content:''; position:absolute; left:0; top:0; width:72px; height:2px;
  background:var(--blue); z-index:2;
}
.sm-plate-img img{ width:100%; height:auto; transition:transform 1.2s var(--ease); }
.sm-plate:hover .sm-plate-img img{ transform:scale(1.03); }
/* Marcas de encuadre en las esquinas. */
.sm-tick{ position:absolute; width:16px; height:16px; border:0 solid var(--blue); z-index:2; }
.sm-tick.tl{ top:12px; left:12px; border-top-width:1px; border-left-width:1px; }
.sm-tick.tr{ top:12px; right:12px; border-top-width:1px; border-right-width:1px; }
.sm-tick.bl{ bottom:12px; left:12px; border-bottom-width:1px; border-left-width:1px; }
.sm-tick.br{ bottom:12px; right:12px; border-bottom-width:1px; border-right-width:1px; }

.sm-cap{
  position:relative; z-index:1;
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
}
.sm-dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 12px var(--blue-glow); }
.sm-name{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.05rem,1.6vw,1.3rem); letter-spacing:-.005em; color:var(--pure-white);
}
.sm-role{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-500); }

/* ---- Sus palabras ---- */
.sm-copy{ max-width:660px; }
.sm-lead{
  font-size:clamp(1.16rem,1.9vw,1.55rem); line-height:1.45;
  letter-spacing:-.01em; color:var(--white);
}
.sm-lead b{ color:var(--pure-white); font-weight:700; }
.sm-text{ margin-top:22px; font-size:clamp(1rem,1.1vw,1.06rem); line-height:1.75; color:var(--gray-300); }
.sm-pillars{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,26px); margin-top:clamp(28px,3.4vw,42px);
}
.sm-pillars li{ padding-top:16px; border-top:1px solid var(--line); }
.smp-n{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--blue); }
.smp-t{
  display:block; margin-top:9px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(.88rem,1.1vw,1rem); text-transform:uppercase; letter-spacing:.02em; color:var(--white);
}
.sm-open{ margin-top:clamp(26px,3vw,38px); }

@media (max-width:980px){
  .sm-layout{ grid-template-columns:1fr; gap:clamp(30px,5vw,44px); }
  .sm-plate{ max-width:520px; }
  .sm-vert{ display:none; }
  .sm-plate-frame{ inset:16px -16px -16px 16px; }
}
@media (max-width:640px){
  /* Las reglas se comen el ancho útil en pantallas chicas. */
  .sm-rail{ display:none; }
  .sm-plate-frame{ display:none; }
}

/* ---- Panel lateral: el acompañamiento como información aparte ---- */
.sm-drawer{ position:fixed; inset:0; z-index:960; }
.sm-drawer[hidden]{ display:none; }
.smd-scrim{
  position:absolute; inset:0; background:rgba(2,3,5,.74);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .45s var(--ease-soft);
}
.smd-panel{
  position:absolute; top:0; right:0; height:100%; width:min(520px,100%);
  overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(180deg,#0c0e11 0%, #050506 64%);
  border-left:1px solid var(--line);
  padding:clamp(30px,4vw,54px) clamp(22px,3.4vw,46px) clamp(34px,4vw,54px);
  transform:translateX(100%); transition:transform .55s var(--ease);
  box-shadow:-40px 0 100px rgba(0,0,0,.68);
}
.smd-panel::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--blue) 0%, transparent 58%);
}
.sm-drawer.is-open .smd-scrim{ opacity:1; }
.sm-drawer.is-open .smd-panel{ transform:none; }

.smd-close{
  position:absolute; top:16px; right:16px; width:40px; height:40px;
  display:grid; place-items:center; background:transparent;
  border:1px solid var(--line); color:var(--gray-300);
  transition:border-color .25s, color .25s;
}
.smd-close:hover{ border-color:var(--blue); color:var(--blue); }
.smd-close svg{ width:17px; height:17px; }

.smd-label{ display:block; color:var(--blue); }
.smd-title{
  margin-top:14px; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.6rem,3.2vw,2.15rem); line-height:1.06;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--pure-white);
}
.smd-lead{ margin-top:18px; font-size:1rem; line-height:1.7; color:var(--gray-300); }

.smd-list{ margin-top:clamp(24px,3vw,34px); }
.smd-list li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.smd-list li:last-child{ border-bottom:1px solid var(--line); }
.smd-ico{
  flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--blue); background:rgba(32,141,255,.05);
}
.smd-ico svg{ width:19px; height:19px; }
.smd-t{ font-family:var(--font-display); font-weight:600; font-size:.98rem; color:var(--white); }

.smd-foot{ margin-top:clamp(24px,3vw,34px); }
.smd-note{ font-size:.92rem; line-height:1.68; color:var(--gray-500); }
.smd-foot .btn-cta{ margin-top:20px; }

@media (prefers-reduced-motion: reduce){
  .smd-panel, .smd-scrim{ transition:none; }
  .sm-plate-img img{ transition:none; }
}

/* ===================== VERIFICADO ===================== */
/* Panel de calificación: el 5,0 es el argumento, así que se muestra grande y
   con la fuente de números del sitio, no como una insignia más. */
.rating-panel{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(24px,4vw,64px);
  margin-top:clamp(30px,4vw,48px);
  padding:clamp(24px,3vw,38px) clamp(22px,3vw,40px);
  border:1px solid var(--line); background:var(--bg-0);
}
.rating-score{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.rs-num{
  font-family:var(--font-display); font-weight:900; line-height:.9;
  font-size:clamp(3.2rem,7vw,5rem); color:var(--pure-white); letter-spacing:-.03em;
}
.rs-stars{ color:var(--blue); font-size:1.05rem; letter-spacing:.18em; }
.rs-count{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gray-500);
}
.rating-side{ flex:1 1 320px; }
.rating-pitch{ color:var(--gray-300); font-size:1rem; line-height:1.65; max-width:52ch; }
.rating-link{
  display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue);
  border-bottom:1px solid transparent; padding-bottom:3px; transition:border-color .3s;
}
.rating-link:hover{ border-bottom-color:var(--blue); }
.rating-link:hover .btn-arrow{ transform:translateX(4px); }

/* Bloque de ubicación en el cierre */
.contacto-place{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(18px,3vw,36px); margin-top:clamp(34px,4vw,52px);
  padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line);
}
.cp-text{ text-align:left; }
.cp-addr{ margin-top:8px; color:var(--white); font-size:1rem; line-height:1.6; }
.cp-addr span{ color:var(--gray-500); font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; }
.cp-go{ display:inline-flex; align-items:center; gap:10px; }

@media (max-width:640px){
  .contacto-place{ flex-direction:column; }
  .cp-text{ text-align:center; }
}

/* Cinta de reseñas: avanza sola y se detiene al apuntarla para poder leer.
   Los bordes se desvanecen para que las tarjetas entren y salgan del cuadro
   en vez de aparecer cortadas de golpe. */
.reviews-track-wrap{
  margin-top:56px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.reviews-track{ display:flex; width:max-content; }
.reviews-track.is-marquee{ animation:revMarquee var(--rev-dur,70s) linear infinite; }
.reviews-track-wrap:hover .reviews-track.is-marquee{ animation-play-state:paused; }
@keyframes revMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .reviews-track.is-marquee{ animation:none; }
  .reviews-track-wrap{ overflow-x:auto; }
}
/* Sin gap y con bordes idénticos en todas: cada tarjeta ocupa exactamente lo
   mismo, así la mitad de la cinta equivale a una copia entera y el bucle cierra
   sin desfase. Un borde distinto en la última desplazaría el ciclo un píxel por
   vuelta. */
.review-card{
  width:min(380px,80vw); background:var(--bg-0);
  padding:32px 28px; display:flex; flex-direction:column; flex:0 0 auto;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.review-stars{ color:var(--blue); font-size:15px; letter-spacing:2px; margin-bottom:18px; }
.review-quote{ color:var(--gray-300); font-size:.98rem; line-height:1.6; flex:1; }
.review-quote.is-pending{ color:var(--gray-500); font-style:normal; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.02em; }
.review-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:26px; padding-top:18px; border-top:1px solid var(--line-soft); }
.review-name{ font-weight:700; font-size:.92rem; }
.review-date{ font-family:var(--font-mono); font-size:10.5px; color:var(--gray-500); }
.google-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-500); }

/* ===================== EQUIPO ===================== */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px; }
.team-card{ position:relative; background:var(--bg-0); aspect-ratio:3/4; overflow:hidden; }
.team-card img{ width:100%; height:100%; object-fit:cover; filter:grayscale(60%) contrast(1.05); transition:filter .5s, transform .6s; }
.team-card:hover img{ filter:grayscale(0%) contrast(1.05); transform:scale(1.05); }
.team-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.94)); }
.team-info{ position:absolute; left:20px; right:20px; bottom:20px; z-index:2; }
.team-info .name{ font-family:var(--font-display); font-weight:800; font-size:1.2rem; text-transform:uppercase; }
.team-info .role{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-2); margin-top:6px; }
.team-info .exp{ font-size:.78rem; color:var(--gray-500); margin-top:4px; }

/* ===================== INSTAGRAM ===================== */

/* ===================== CONTACTO / FINAL ===================== */
#contacto{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; }
.contacto-media{ position:absolute; inset:0; z-index:0; }
.contacto-media img{ width:100%; height:100%; object-fit:cover; opacity:.4; }
.contacto-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.5) 40%, rgba(0,0,0,.94)); }
.contacto-content{ position:relative; z-index:2; text-align:center; width:100%; }
.contacto-actions{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin-top:44px; }
.contacto-meta{ margin-top:56px; display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap; }
.contacto-meta a{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--gray-500); transition:color .25s; }
.contacto-meta a:hover{ color:var(--blue); }

/* ===================== FOOTER ===================== */
footer{ border-top:1px solid var(--line); padding:60px 0 30px; background:#000; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--line-soft); }
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand svg{ width:24px; height:24px; }
.footer-tagline{ margin-top:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-500); }
.footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h5{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-500); margin-bottom:16px; }
.footer-col a,.footer-col p{ display:block; font-size:.9rem; color:var(--gray-300); margin-bottom:10px; transition:color .2s; }
.footer-col a:hover{ color:var(--blue); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding-top:26px; }
.footer-bottom p{ font-family:var(--font-mono); font-size:10.5px; color:var(--gray-500); letter-spacing:.06em; }
.footer-seguí{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:var(--white); font-size:.95rem; }

/* Magnetic + WA fixed button --------------------------------------------- */
.wa-fixed{
  position:fixed; right:22px; bottom:22px; z-index:850;
  width:56px; height:56px; border-radius:50%; background:var(--blue);
  display:flex; align-items:center; justify-content:center; color:#000;
  box-shadow:0 6px 24px rgba(32,141,255,.35);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.wa-fixed:hover{ transform:scale(1.08); box-shadow:0 8px 30px rgba(32,141,255,.55); }
.wa-fixed svg{ width:26px; height:26px; }

/* Marquee small brand line ---------------------------------------------- */
.small-caps{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; }

/* ===================== COMENZAR MI MOVE (conversion panel) ===================== */
#comenzar{ position:relative; overflow:hidden; background:var(--black); isolation:isolate; }
#comenzar > .container{ position:relative; z-index:2; }

/* Atmospheric backdrop. The gym blur is baked into the asset so the pulse trace
   stays razor sharp — no CSS blur here, and only enough overscan for parallax. */
.start-bg{ position:absolute; inset:-6% -2%; z-index:0; pointer-events:none; }
.start-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center center;
  transform:scale(1.06);
  opacity:.9;
}
/* Pulse traces. Each tile is an exact number of beats wide, so sliding it by one
   tile width loops with no seam. The outer element drifts vertically, the inner
   one scrolls horizontally — separate elements so the two transforms coexist.
   Drift stays well inside the frame, so a trace is on screen at all times. */
.ecg{
  position:absolute; left:0; right:0; z-index:1; pointer-events:none;
  will-change:transform;
}
.ecg i{
  display:block; height:100%;
  background-repeat:repeat-x; background-position:0 center;
  will-change:transform;
}
.ecg-a{ top:44%; height:340px; margin-top:-170px; animation:ecgDriftA 19s ease-in-out infinite alternate; }
.ecg-a i{ width:calc(100% + 2204px); background-image:url("../img/ecg-a.png"); background-size:2200px 340px;
          animation:ecgScrollA 30s linear infinite; }

.ecg-b{ top:68%; height:240px; margin-top:-120px; animation:ecgDriftB 25s ease-in-out infinite alternate; }
.ecg-b i{ width:calc(100% + 2164px); background-image:url("../img/ecg-b.png"); background-size:2160px 240px;
          animation:ecgScrollB 42s linear infinite; }

.ecg-c{ top:21%; height:190px; margin-top:-95px; animation:ecgDriftC 33s ease-in-out infinite alternate; }
.ecg-c i{ width:calc(100% + 2104px); background-image:url("../img/ecg-c.png"); background-size:2100px 190px;
          animation:ecgScrollC 56s linear infinite; }

@keyframes ecgScrollA{ from{ transform:translate3d(0,0,0); }      to{ transform:translate3d(-2200px,0,0); } }
@keyframes ecgScrollB{ from{ transform:translate3d(-2160px,0,0);} to{ transform:translate3d(0,0,0); } }
@keyframes ecgScrollC{ from{ transform:translate3d(0,0,0); }      to{ transform:translate3d(-2100px,0,0); } }

@keyframes ecgDriftA{ from{ transform:translate3d(0,-26px,0); } to{ transform:translate3d(0,26px,0); } }
@keyframes ecgDriftB{ from{ transform:translate3d(0,30px,0); }  to{ transform:translate3d(0,-30px,0); } }
@keyframes ecgDriftC{ from{ transform:translate3d(0,-18px,0); } to{ transform:translate3d(0,22px,0); } }

@media (prefers-reduced-motion: reduce){
  .ecg, .ecg i{ animation:none !important; }
}

/* Melts the backdrop into the black sections above and below. */
.start-bg::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,.18) 76%, #000 100%),
    radial-gradient(125% 90% at 50% 50%, rgba(0,0,0,0) 38%, rgba(0,0,0,.7) 100%);
}
@media (prefers-reduced-motion: no-preference){
  .start-bg img{ transition:transform 1.4s var(--ease-soft); }
}

.start-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,80px); align-items:center;
}
.start-bullets{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:34px; }
.start-bullets li{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-500);
}
.start-bullets li::before{ content:''; width:14px; height:1px; background:var(--blue); flex-shrink:0; }

.start-card{
  border:1px solid var(--line);
  background:rgba(8,9,11,.82);
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  padding:clamp(22px,2.6vw,34px);
  display:flex; flex-direction:column; gap:22px;
}
.start-field{ display:flex; flex-direction:column; gap:10px; }
.start-field label,.start-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-500);
}
.start-field input,.start-field select{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:10px 0; color:var(--white);
  font-family:var(--font-mono); font-size:15px; letter-spacing:.02em;
  transition:border-color .25s;
  border-radius:0; -webkit-appearance:none; appearance:none;
}
.start-field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gray-500) 50%),linear-gradient(135deg,var(--gray-500) 50%,transparent 50%);
  background-position:calc(100% - 12px) center, calc(100% - 7px) center;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:28px; cursor:pointer;
}
.start-field select option{ background:var(--bg-1); color:var(--white); }
.start-field input::placeholder{ color:#5c5f66; }
.start-field input:focus,.start-field select:focus{ outline:none; border-bottom-color:var(--blue); }
.start-field input:focus-visible,.start-field select:focus-visible{ outline:1px solid var(--blue); outline-offset:4px; }

.start-options{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.start-option{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  background:var(--bg-1); border:none; padding:14px 16px; text-align:left;
  transition:background .25s, box-shadow .25s;
}
.start-option .o-name{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:.95rem; letter-spacing:.02em; color:var(--gray-300); transition:color .25s;
}
.start-option .o-desc{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--gray-500); }
/* Fila del nombre: deja lugar a la etiqueta sin romper la columna. */
.start-option .o-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.start-option .o-flag{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); border:1px solid var(--blue-dim); padding:2px 7px; white-space:nowrap;
  transition:border-color .25s, background .25s;
}
.start-option.is-active .o-flag{ border-color:var(--blue); background:rgba(32,141,255,.12); }
.start-option:hover{ background:var(--bg-2); }
.start-option:hover .o-name{ color:var(--white); }
.start-option.is-active{ background:rgba(32,141,255,.09); box-shadow:inset 2px 0 0 var(--blue); }
.start-option.is-active .o-name{ color:var(--blue); }
.start-option:focus-visible{ outline:1px solid var(--blue); outline-offset:-1px; }

.start-submit{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; margin-top:4px; padding:17px 20px;
  background:var(--blue); color:#020202; border:1px solid var(--blue);
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:.9rem; letter-spacing:.1em;
  transition:background .25s, color .25s, box-shadow .25s;
}
.start-submit svg{ width:20px; height:20px; flex-shrink:0; }
.start-submit:hover{ background:transparent; color:var(--blue); box-shadow:0 0 30px rgba(32,141,255,.22); }
.start-note{
  text-align:center; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gray-500);
}

@media (max-width:900px){
  .start-grid{ grid-template-columns:1fr; }
}

/* ===================== STATEMENT FULL-BLEED ===================== */
.statement-full{
  position:relative; min-height:86vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; background:#000;
}
.statement-media{ position:absolute; inset:0; z-index:0; }
.statement-media img{
  width:100%; height:100%; object-fit:cover; opacity:0; filter:grayscale(30%);
  transform:scale(1.12); will-change:transform;
  transition:opacity 1.4s var(--ease-soft);
}
.statement-full.is-inview .statement-media img{ opacity:.34; }
/* brand moment: let the neon read brighter, scrim stays lighter */
.statement-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.88) 75%, #000 100%); }
.statement-body{ position:relative; z-index:2; padding:0 var(--gutter); }
.statement-lines .reveal-word span{ transition-duration:.9s; }
.statement-sub{ margin-top:28px; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; color:var(--gray-300); font-size:clamp(1rem,1.8vw,1.4rem); }
.statement-sub b{ color:var(--blue); font-weight:800; }

/* ===================== STATEMENT DIVIDER (light interstitial) ===================== */
.statement-divider{
  padding:min(9vw,90px) var(--gutter); text-align:center; background:#000;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.statement-divider .h-xl{ line-height:1.05; }
.statement-divider .text-blue{ display:block; }

/* ===================== EL SISTEMA (planes) ===================== */
.sys-head{ max-width:820px; }
.sys-head .body-lg{ margin-top:22px; max-width:64ch; }

/* Both cards share one row rhythm, so titles, pitches and CTAs line up
   across the pair no matter how long each block of copy runs. */
.sys-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(44px,5vw,72px);
  align-items:stretch;
}
.sys-card{
  display:grid; grid-template-rows:auto 1fr;
  border:1px solid var(--line); background:var(--bg-0); overflow:hidden;
  transition:border-color .35s ease, transform .35s var(--ease);
}
.sys-card:hover{ border-color:#33363c; transform:translateY(-3px); }

.sys-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-1); }
/* Gráficos de marca, no fotos: ya vienen oscuros del build, así que no hace
   falta apagarlos tanto como a una foto. */
.sys-media img{
  width:100%; height:100%; object-fit:cover; object-position:center center;
  opacity:.93; transform:scale(1.02);
  transition:opacity .5s ease, transform .8s var(--ease-soft);
}
.sys-card:hover .sys-media img{ opacity:1; transform:scale(1.07); }
/* El velo sólo aprieta en la franja baja, donde apoya la etiqueta: si cubre
   todo, el azul de la marca se apaga a azul marino. */
.sys-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.70) 100%);
}
.sys-tag{
  position:absolute; left:clamp(18px,2vw,26px); bottom:clamp(16px,1.8vw,22px); z-index:2;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-2);
}

/* auto / auto / 1fr / auto keeps the button pinned to the bottom of both cards */
.sys-body{
  display:grid; grid-template-rows:auto auto 1fr auto;
  padding:clamp(24px,2.6vw,36px);
  gap:0;
}
.sys-title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.04; letter-spacing:-.01em;
  color:var(--pure-white);
}
@media (min-width:861px){
  /* Con las tarjetas lado a lado, un título de dos líneas junto a uno de una
     empuja hacia abajo todo el texto de esa tarjeta. Se reservan las dos
     líneas para que las dos columnas sigan alineadas. */
  .sys-title{ min-height:2.08em; }
}
.sys-pitch{
  margin-top:12px; color:var(--gray-300);
  font-size:clamp(.95rem,1.15vw,1.05rem); line-height:1.55; max-width:42ch;
}
.sys-list{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:11px; align-content:start;
}
.sys-list li{
  display:grid; grid-template-columns:14px 1fr; align-items:start; gap:12px;
  font-size:.92rem; line-height:1.5; color:var(--gray-500);
}
.sys-list li::before{ content:''; width:14px; height:1px; background:var(--blue); margin-top:.62em; }
.sys-cta{
  margin-top:26px; justify-self:start;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); padding-bottom:5px; border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.sys-card:hover .sys-cta{ border-bottom-color:var(--blue); }
.sys-cta:hover .btn-arrow{ transform:translateX(4px); }

.sys-join{
  margin-top:clamp(34px,4vw,54px); text-align:center;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-500); line-height:1.9;
}
.sys-join b{ color:var(--white); font-weight:400; }

@media (max-width:860px){
  .sys-grid{ grid-template-columns:1fr; }
}

/* ===================== STAT ROW (borderless big numbers) ===================== */
.stat-row{ display:flex; flex-wrap:wrap; gap:clamp(30px,5vw,64px); margin-top:60px; padding-top:36px; border-top:1px solid var(--line-soft); }
.stat-row .stat{ min-width:120px; }
.stat-row .stat .n{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,4vw,3.2rem); color:var(--pure-white); line-height:1; }
.stat-row .stat .n.is-pending{ color:var(--gray-500); font-size:1.4rem; }
.stat-row .stat .n .suffix{ color:var(--blue); }
.stat-row .stat .l{ margin-top:10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-500); }

.pilar-row{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,54px); margin-top:56px; }
.pilar-row .pilar{ flex:1 1 220px; }
.pilar-row .pilar-num{ font-family:var(--font-mono); color:var(--blue); font-size:12px; letter-spacing:.2em; margin-bottom:16px; display:block; }
.pilar-row .pilar h3{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; text-transform:uppercase; margin-bottom:10px; }
.pilar-row .pilar p{ color:var(--gray-500); font-size:.92rem; line-height:1.6; }

/* ===================== PROTOCOLOS — campaña full-bleed ===================== */
#protocolos{ background:var(--black); }
.proto-intro{ padding:min(14vw,140px) 0 min(7vw,70px); }
.proto-title{
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.2rem, 6vw, 5rem); line-height:.96; letter-spacing:-.025em;
  color:var(--pure-white); max-width:14ch;
}

/* Each stage owns a slice of scroll; the panel stays pinned while they change.
   ~60vh per stage keeps the beats readable without dragging the scroll out. */
/* 4 etapas x 60vh de recorrido cada una. Si se agrega o quita una etapa,
   ajustar esta altura para mantener el mismo ritmo de scroll. */
.proto-scroll{ position:relative; height:240vh; }
.proto-sticky{
  position:sticky; top:0; height:100svh; min-height:560px;
  overflow:hidden; background:#000;
}

.proto-frames{ position:absolute; inset:0; z-index:0; }
.proto-frame{
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity 1s var(--ease-soft);
}
.proto-frame.is-active{ opacity:1; }
/* Frames are pre-cropped to 16:9 with a per-photo framing, so a plain centre
   cover is correct here. Gentle zoom keeps them from softening on upscale. */
.proto-frame picture{ display:block; width:100%; height:100%; }
.proto-frame img{
  width:100%; height:100%; object-fit:cover; object-position:center center;
  transform:scale(1.05);
  transition:transform 7s var(--ease-soft);
}
.proto-frame.is-active img{ transform:scale(1); }

/* Weighted to the bottom-left where the copy sits, so the rest of the frame
   stays bright enough to actually read as a photograph. */
.proto-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.10) 27%, rgba(0,0,0,.28) 58%, rgba(0,0,0,.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.22) 50%, rgba(0,0,0,0) 100%);
}

.proto-hud{ position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; }
.proto-hud-inner{ width:100%; padding-bottom:clamp(28px,4vw,56px); }

/* Stacked so swapping stages never shifts the layout. */
.proto-panels{ position:relative; min-height:clamp(260px,34vh,400px); display:flex; align-items:flex-end; }
.proto-panel{
  position:absolute; left:0; bottom:0; width:min(100%,760px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s var(--ease), visibility .5s;
}
.proto-panel.is-active{ opacity:1; visibility:visible; pointer-events:auto; }

.p-tag{
  display:inline-block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--blue-2);
  margin-bottom:18px;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease) .06s, transform .5s var(--ease) .06s;
}
.p-tag i{ font-style:normal; }
.proto-panel.is-active .p-tag{ opacity:1; transform:translateY(0); }

.p-head{ display:flex; align-items:flex-start; gap:clamp(14px,2vw,28px); }
.p-num{
  font-family:var(--font-display); font-weight:900; line-height:.8;
  font-size:clamp(3.2rem, 9vw, 8rem); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.34);
  flex-shrink:0;
  opacity:0; transform:translateY(26px);
  transition:opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s;
}
.proto-panel.is-active .p-num{ opacity:1; transform:translateY(0); }

/* The name reveals from behind a mask — the "opening" beat of each stage. */
.p-name{
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.6rem, 8vw, 7rem); line-height:.88; letter-spacing:-.035em;
  color:var(--pure-white);
  clip-path:inset(0 0 100% 0); transform:translateY(18px);
  transition:clip-path .75s var(--ease) .12s, transform .75s var(--ease) .12s;
}
.proto-panel.is-active .p-name{ clip-path:inset(0 0 0 0); transform:translateY(0); }

.p-desc{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft);
  max-width:46ch; color:var(--gray-300);
  font-size:clamp(.98rem,1.5vw,1.18rem); line-height:1.55;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease) .26s, transform .6s var(--ease) .26s;
}
.proto-panel.is-active .p-desc{ opacity:1; transform:translateY(0); }

/* Rail doubles as progress and as a jump control. */
/* La pista de teclado se muestra sólo donde existe un teclado. */
.proto-hint{ display:none; }
@media (hover:hover) and (pointer:fine){
  .proto-hint{
    display:block; margin-top:14px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--gray-500); opacity:.75;
  }
}

.proto-rail{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.4vw,20px);
  margin-top:clamp(26px,4vw,52px);
}
.rail-item{
  position:relative; background:none; border:none; padding:16px 0 0; text-align:left;
  display:flex; flex-direction:column; gap:5px;
  color:var(--gray-500); transition:color .3s ease;
}
.rail-item .r-bar{
  position:absolute; top:0; left:0; right:0; height:2px; background:rgba(255,255,255,.16);
  overflow:hidden;
}
/* Completed stages snap to full; the active one is driven live by scroll
   (--p), so the bar advances continuously instead of jumping. */
.rail-item .r-bar::after{
  content:''; position:absolute; inset:0; background:var(--blue);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.rail-item.is-done .r-bar::after{ transform:scaleX(1); }
.rail-item.is-active .r-bar::after{
  transform:scaleX(var(--p,0)); transition:none; box-shadow:0 0 12px var(--blue-glow);
}
.rail-item .r-n{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; }
.rail-item .r-t{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(.7rem,1.05vw,.92rem); letter-spacing:.02em;
}
.rail-item:hover{ color:var(--gray-300); }
.rail-item.is-active{ color:var(--pure-white); }
.rail-item.is-active .r-n{ color:var(--blue); }
.rail-item:focus-visible{ outline:1px solid var(--blue); outline-offset:6px; }

@media (max-width:760px){
  .proto-scroll{ height:216vh; }
  .proto-panels{ min-height:clamp(220px,30vh,320px); }
  .p-head{ flex-direction:column; gap:6px; }
  .p-num{ font-size:2.6rem; }
  .proto-rail{ grid-template-columns:repeat(4,1fr); gap:6px; }
  .rail-item .r-t{ display:none; }
  .rail-item{ padding-top:12px; }
}
@media (prefers-reduced-motion: reduce){
  .proto-frame img{ transition:none; transform:none; }
  .p-name{ transition:none; clip-path:none; transform:none; }
}


/* ===================== RESPONSIVE ===================== */
@media (max-width:1200px){
  .nav-links{ display:none; }
}
@media (max-width:1080px){
  .pilar-grid{ grid-template-columns:1fr; }
  .evo-grid{ grid-template-columns:repeat(2,1fr); }
  .numeros-grid{ grid-template-columns:repeat(2,1fr); }
  .team-grid{ grid-template-columns:repeat(2,1fr); }

}
@media (max-width:760px){
  :root{ --nav-h:66px; }
  /* the mobile menu carries the full language list — keep the bar uncluttered */
  .lang-select{ display:none; }
  /* short CTA label so the menu button always fits on narrow screens */
  #site-nav .cta-full{ display:none; }
  #site-nav .cta-short{ display:inline; }
  #site-nav .btn-cta{ padding:10px 14px; font-size:11.5px; letter-spacing:.05em; }
  .nav-right{ gap:10px; }
  .split{ grid-template-columns:1fr; }
  .split.reverse{ direction:ltr; }
  .contacto-meta{ flex-direction:column; gap:14px; }
  .footer-top{ flex-direction:column; gap:30px; }
  .footer-cols{ gap:36px; }
  .btn-cta span.long{ display:none; }
  .numeros-grid{ grid-template-columns:1fr 1fr; }
  .stat-row{ gap:28px 40px; }
}