/* =========================================================================
   Nicolás Criales — Hoja de vida web
   Réplica estructural y visual de heynesh.com con contenido propio.
   Piedra (#DCD9D0) + coral intenso (#EF5B45), tarjetas de vidrio
   claras, una sola familia tipográfica (Switzer, alternativa libre a
   PP Neue Montreal) y medidas en vw como la referencia.
   ========================================================================= */

/* ───────────────────────────────────────────────────────────── TOKENS ── */
:root{
  --bg:         #DCD9D0;                /* piedra: un punto más fría que la arena de la referencia */
  --card:       rgba(229, 227, 220, .8);   /* #e5e3dccc */
  --card-solid: #e5e3dc;
  --card-2:     #eeede8;
  --chip:       #e8e6df;
  --panel-hi:   #d6d3c9;
  --glass-hero: rgba(36, 33, 29, .66);      /* vidrio oscuro: las fichas del hero deben leerse como tarjetas sobre la piedra */
  --glass-shadow: 0 18px 40px -22px rgba(0, 0, 0, .5);
  --ink:        #000;
  --ink-70:     rgba(0, 0, 0, .7);
  --ink-50:     rgba(0, 0, 0, .5);
  --ink-30:     rgba(0, 0, 0, .3);
  --accent:     #EF5B45;              /* coral intenso (antes #ED6A5A; la referencia usaba amarillo #ffff23) */
  --yellow:     var(--accent);        /* alias: todas las reglas usan var(--yellow) */
  --white:      #fff;
  --border:     1px solid rgba(255, 255, 255, .2);
  --border-dk:  1px solid rgba(0, 0, 0, .1);

  --r-s:  clamp(6px, .56vw, 10px);
  --r-m:  clamp(9px, .83vw, 14px);
  --r-l:  clamp(14px, 1.53vw, 24px);

  --rail-x:    1.39vw;
  --rail-w:    17.6vw;
  --content-x: 21vw;
  --gutter:    1.39vw;

  --fs-body:  clamp(.8rem, 1.18vw, 1.5rem);
  --fs-small: clamp(.7rem, .97vw, 1.5rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --h2-grad: linear-gradient(266deg, #3d3d3d 11.86%, #000 92.59%);
  --h2-grad-light: linear-gradient(89deg, #d5d5d5 7.42%, #fff 95.11%);
}

/* ────────────────────────────────────────────────────────────── RESET ── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--yellow); color:var(--ink); }

.skip{
  position:fixed; top:-100px; left:12px; z-index:999;
  background:var(--ink); color:var(--yellow);
  padding:10px 16px; border-radius:10px; font-weight:600;
}
.skip:focus{ top:12px; }
:where(a,button,[tabindex]):focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }
.section--dark :focus-visible{ outline-color:var(--yellow); }
.u-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ─────────────────────────────────────────────────────────── UTILIDAD ── */
/* Etiqueta-píldora de sección ("START SMALL GROW BIG") */
.eyebrow{
  display:inline-block;
  overflow:hidden; white-space:nowrap;   /* se despliega desde ancho 0 (como la referencia) */
  text-transform:uppercase;
  border:clamp(1.5px, .14vw, 2px) solid var(--ink-30);
  border-radius:99px;
  padding:clamp(3px, .3vw, 5px) clamp(8px, .8vw, 12px);
  font-size:var(--fs-small); font-weight:700; line-height:1;
  margin-bottom:.83vw;
}
.eyebrow--dark{ border-color:rgba(255,255,255,.3); color:var(--white); }

/* Botón: rectángulo redondeado (no píldora), como la referencia */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5vw;
  padding:clamp(.55rem, .75vw, 1.25rem) clamp(1rem, 1.39vw, 2rem);
  border-radius:var(--r-m);
  font-size:var(--fs-body); font-weight:500; line-height:1.2;
  background:var(--yellow); color:var(--ink);
  /* Sin transición de transform: el transform de los botones lo lleva GSAP
     (morph del hero, efecto magnético) y una transición CSS pelearía con
     cada fotograma (iban con retraso y se ajustaban de golpe al final). */
  transition:background .3s, color .3s, box-shadow .35s var(--ease);
  will-change:transform;
  white-space:nowrap;
}
.btn:hover{ box-shadow:0 10px 24px rgba(0,0,0,.12); }
/* Texto que "rueda" al pasar el cursor: la palabra sube y entra su gemela
   desde abajo (misma máscara que usa la referencia en botones y enlaces). */
.roll{ position:relative; display:block; overflow:hidden; }
.roll > span{ display:block; transition:transform .55s var(--ease); }
.roll > span + span{ position:absolute; inset:0; transform:translateY(105%); }
.btn:hover .roll > span:first-child, .tlcard__more:hover .roll > span:first-child,
.rail__mail:hover .roll > span:first-child{ transform:translateY(-105%); }
.btn:hover .roll > span + span, .tlcard__more:hover .roll > span + span,
.rail__mail:hover .roll > span + span{ transform:none; }
.btn--light{ background:var(--card-2); }
.btn--ghost{ background:transparent; border:1px solid var(--ink-30); }
.section--dark .btn--ghost{ border-color:rgba(255,255,255,.35); color:var(--white); }

/* Títulos de sección con degradado de texto */
.h2{
  font-size:clamp(2.2rem, 4.6vw, 5rem);
  font-weight:700; line-height:1; letter-spacing:-.035em;
  color:var(--ink);
}
/* Cada línea se recorta solo para la animación de entrada; el relleno
   (compensado con márgenes negativos) deja sitio a acentes, «¿», paréntesis y
   rabos de g/p/q, que antes salían cortados. */
.h2 .ln{ display:block; overflow:hidden; padding:.22em 0 .28em; margin:-.22em 0 -.28em; }
.h2 .ln > span{
  display:block; will-change:transform;
  background-image:var(--h2-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.h2--light{ color:var(--white); }
/* background-image (no el shorthand `background`, que resetea background-clip) */
.h2--light .ln > span{ background-image:var(--h2-grad-light); }

/* ─────────────────────────────────────────────────────────── LOADER ── */
.loader{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
}
/* Telón de piedra: en la transición sube (clip-path) y descubre el hero de abajo arriba */
.loader__curtain{ position:absolute; inset:0; background:var(--bg); will-change:clip-path; }
.loader__meta{
  position:absolute; left:3vw; right:3vw; bottom:3.2vh; z-index:2;
  display:flex; align-items:center; gap:14px;
  font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--ink-50); font-variant-numeric:tabular-nums;
}
.loader__count{ min-width:3ch; color:var(--ink); }
.loader__pct{ opacity:.55; }
.loader__bar{ position:relative; flex:1; height:1px; background:rgba(0,0,0,.12); }
.loader__bar b{ position:absolute; left:0; top:-0.5px; bottom:-0.5px; width:0; background:var(--ink); }
/* Lienzo de la apertura: una retícula de puntos de datos se desprende y se
   ensambla en la palabra (main.js → runLoader). */
.loader__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; }
.loader__caption{
  z-index:2;
  position:absolute; z-index:2; left:0; right:0; bottom:7vh;
  padding:0 8vw; text-align:center;
  text-transform:uppercase; letter-spacing:.32em; line-height:1.6;
  font-size:clamp(.62rem, .8vw, .9rem); font-weight:600;
  color:var(--ink-70); opacity:0;
}
.loader__mark{
  position:relative; z-index:2;
  position:relative; z-index:2;
  font-weight:900; text-transform:uppercase;
  color:var(--accent); line-height:.78; letter-spacing:-.045em;
  white-space:nowrap; font-size:18vw; padding:0;   /* sin padding: la caja es
                                                     idéntica a la del hero */
  display:inline-flex; align-items:flex-start;
  will-change:transform;
}
.loader__mark span{ display:inline-block; will-change:transform; backface-visibility:hidden; }
/* El ® del preloader es invisible pero ocupa sitio: así su caja es idéntica
   a la de la palabra del hero (que también lo lleva) y el vuelo encaja. */
.loader__mark sup{ font-size:.2em; line-height:1; margin-top:.02em; margin-left:.04em; letter-spacing:0; opacity:0; }
.faq__ghost sup{
  font-size:.22em; line-height:1; margin-top:.12em; margin-left:.04em;
  letter-spacing:0;
}
body.is-loaded .loader{ pointer-events:none; }

/* ─────────────────────────────────────────────────────────── CURSOR ── */
.cursor{
  position:fixed; top:0; left:0; z-index:190;
  width:12px; height:12px; border-radius:99px;
  background:var(--ink);
  pointer-events:none; opacity:0;
  display:grid; place-items:center;
  transition:width .3s var(--ease), height .3s var(--ease), background .3s, border-radius .3s;
}
.cursor__label{
  font-size:12px; font-weight:600; letter-spacing:.01em;
  color:var(--ink); opacity:0; white-space:nowrap;
}
.cursor.is-big{ width:auto; min-width:64px; height:32px; padding:0 14px; border-radius:99px; background:var(--yellow); }
.cursor.is-big .cursor__label{ opacity:1; }
@media (hover:none), (pointer:coarse){ .cursor{ display:none; } }

/* ────────────────────────────────────────────────────── TOPBAR MÓVIL ── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:none; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:rgba(220,217,208,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:var(--border-dk);
}
.topbar__burger{
  width:42px; height:42px; border-radius:10px; background:var(--ink);
  display:grid; place-content:center; gap:5px;
}
.topbar__burger span{
  display:block; width:18px; height:2px; background:var(--card-2);
  transition:transform .35s var(--ease), opacity .2s;
}
.topbar__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.topbar__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ────────────────────────────────────────────────────────── SIDEBAR ── */
.rail{
  position:fixed; top:var(--rail-x); left:var(--rail-x); z-index:110;
  width:var(--rail-w);
  height:calc(100vh - var(--rail-x) * 2);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
}
.rail.is-on{ visibility:visible; }
.rail__card, .rail__marquee, .rail__mailwrap{
  background:var(--card);
  border:var(--border);
  border-radius:var(--r-s);
  backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
  margin-bottom:1.11vw;
  transition:background .5s, color .5s, border-color .5s;
}
.rail__id{ padding:1.11vw; flex:0 0 auto; }
.rail__idtop{ display:flex; align-items:center; justify-content:flex-start; gap:.42vw; min-width:0; }
.rail__idtop .logo{ flex:none; }
.rail__idtop .lang{ flex:none; }
@media (min-width:1025px) and (max-width:1220px){ .rail__idtop{ gap:.3vw; } .rail__idtop .lang__opt{ padding:.45em .5em; } }
.rail__socials{ margin-left:auto; }
/* Mismas métricas que la palabra gigante (peso, tracking, interlineado y
   proporción de relleno): la palabra se encoge y ES este logo. */
.logo{
  display:inline-flex; align-items:flex-start;
  background:var(--yellow); color:var(--ink);
  border-radius:var(--r-s);
  padding:.68em .73em;
  font-weight:900; font-size:clamp(.8rem, 1.1vw, 1.35rem);
  letter-spacing:-.045em; line-height:.78; text-transform:uppercase;
}
.logo sup{ font-size:.2em; line-height:1; margin-top:.02em; margin-left:.04em; letter-spacing:0; }
.rail__socials{ display:flex; gap:.25rem; }
.rail__socials a{
  width:clamp(26px, 2.08vw, 34px); height:clamp(26px, 2.08vw, 34px);
  border-radius:var(--r-s); background:var(--card-2); border:var(--border-dk); color:var(--ink);
  display:grid; place-items:center;
  transition:transform .3s var(--ease), background .3s, color .3s;
}
.rail__socials a:hover{ background:var(--yellow); transform:translateY(-2px); }
.rail__socials svg{ width:clamp(12px, 1vw, 16px); height:clamp(12px, 1vw, 16px); }
.rail__bio{ margin-top:1.4vw; font-size:var(--fs-small); line-height:1.55; color:var(--ink-70); }

.rail__stats{
  display:flex; align-items:center; justify-content:center; gap:1.25vw;
  padding:1vw 1.67vw; height:8vw; flex:0 0 auto;
  font-size:clamp(.72rem, 1vw, 1.3rem); line-height:1.1;
}
.rstat{ width:7.4vw; display:flex; flex-direction:column; align-items:center; gap:.56vw; text-align:center; }
.rstat__big{ color:var(--yellow); font-weight:700; font-size:clamp(1.4rem, 2.2vw, 3rem); line-height:1; }
.rstat__small{ font-weight:500; font-size:clamp(.68rem, .9vw, 1.1rem); }
.rstat__sep{ width:1px; height:3.47vw; background:rgba(0,0,0,.1); flex:none; }

.rail__nav{
  display:flex; flex-direction:column; gap:clamp(.4rem, .69vw, .75rem);
  padding:1.11vw; flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
}
.rail__nav::-webkit-scrollbar{ width:0; }
.rail__nav{ gap:clamp(.3rem, .55vw, .65rem); padding:.9vw 1.11vw; }
.navlink{
  display:inline-flex; align-items:center; gap:.69vw;
  height:clamp(28px, 2.5vw, 38px); padding:0 .69vw;
  border-radius:var(--r-s); background:var(--card-2);
  font-weight:500; font-size:clamp(.78rem, 1.25vw, 1.5rem);
  text-transform:uppercase; letter-spacing:-.01em;
  width:fit-content;
  transition:background .3s var(--ease), color .3s, transform .3s var(--ease);
}
.navlink svg{ width:clamp(12px, 1.11vw, 18px); height:clamp(12px, 1.11vw, 18px); flex:none; }
.navlink:hover{ transform:translateX(2px); background:#cdcbc3; }
.navlink.is-active, .navlink.is-active:hover{ background:var(--yellow); color:var(--ink); }

.rail__marquee{ height:3.47vw; flex:0 0 auto; overflow:hidden; display:flex; align-items:center; }
/* La capa interior recorta y desvanece las palabras en los bordes (22 % a
   cada lado) para que no se vean letras cortadas; el fondo de la tarjeta
   queda intacto porque la máscara no se aplica al contenedor. */
.marquee__clip{
  width:100%; height:100%; display:flex; align-items:center; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.marquee__track{ display:flex; gap:1.39vw; width:max-content; will-change:transform; padding-left:1.11vw; }
.marquee__track span{
  font-weight:700; font-size:clamp(.7rem, .95vw, 1.2rem); letter-spacing:-.01em;
  white-space:nowrap; color:var(--ink);
}

.rail__mailwrap{ height:3.47vw; padding:.69vw; flex:0 0 auto; }
.rail__mail{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; gap:.6vw;
  background:var(--card-2); border:1px solid rgba(0,0,0,.05); border-radius:clamp(5px, .42vw, 8px);
  font-size:var(--fs-small); color:var(--ink-70);
  transition:background .3s, color .3s;
}
.rail__mail:hover{ background:#cdcbc3; color:var(--ink); }
.rail__cta{ height:3.47vw; width:100%; flex:0 0 auto; }

.rail__scrim{
  position:fixed; inset:0; z-index:105;
  background:rgba(0,0,0,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
body.is-menu .rail__scrim{ opacity:1; visibility:visible; }

/* Sidebar sobre la sección oscura: las tarjetas se oscurecen */
body.is-dark .rail__card, body.is-dark .rail__marquee, body.is-dark .rail__mailwrap{
  background:rgba(32,32,32,.86); border-color:rgba(255,255,255,.1); color:var(--white);
}
body.is-dark .rail__bio{ color:rgba(255,255,255,.72); }
body.is-dark .rail__socials a{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.1); color:var(--white); }
body.is-dark .navlink{ background:rgba(255,255,255,.12); color:var(--white); }
body.is-dark .navlink:hover{ background:rgba(94,94,94,.5); }
body.is-dark .navlink.is-active{ background:var(--yellow); color:var(--ink); }
body.is-dark .rstat__sep{ background:rgba(255,255,255,.15); }
body.is-dark .marquee__track span{ color:var(--white); }
body.is-dark .rail__mail{ background:rgba(255,255,255,.1); border-color:transparent; color:rgba(255,255,255,.75); }
.rail__bio, .rail__socials a, .navlink, .rstat__sep, .marquee__track span, .rail__mail{ transition:background .5s, color .5s, border-color .5s; }

/* Selector de idioma ES/EN (rail y barra móvil) */
.lang{
  display:inline-flex; align-items:center; gap:2px;
  padding:2px; border-radius:99px;
  background:var(--card-2); border:1px solid rgba(0,0,0,.05);
  transition:background .5s, border-color .5s;
}
.lang__opt{
  font-size:clamp(.6rem, .72vw, .8rem); font-weight:700; line-height:1; letter-spacing:.02em;
  padding:.45em .62em; border-radius:99px; color:var(--ink-70);
  transition:background .3s, color .3s;
}
.lang__opt:hover{ color:var(--ink); }
.lang__opt.is-on{ background:var(--ink); color:var(--card-2); }
.rail__lang{ margin-left:auto; display:inline-flex; }
body.is-dark .lang{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.12); }
body.is-dark .lang__opt{ color:rgba(255,255,255,.7); }
body.is-dark .lang__opt.is-on{ background:var(--white); color:var(--ink); }
.topbar__lang{ display:none; }
/* ── Botón de música (ecualizador de cuatro barras) ── */
.sound{
  width:clamp(26px, 2.08vw, 34px); height:clamp(26px, 2.08vw, 34px); flex:none;
  border-radius:var(--r-s); background:var(--card-2); border:var(--border-dk); color:var(--ink);
  display:inline-flex; align-items:flex-end; justify-content:center; gap:clamp(2px, .16vw, 3px); padding:0;
  transition:transform .3s var(--ease), background .3s, color .3s;
}
/* las barras se apoyan a un 24 % del borde inferior (los % de margin van sobre el ancho del botón) */
.sound i{ width:clamp(2px, .16vw, 3px); height:36%; margin-bottom:24%; border-radius:1px; background:currentColor; transform-origin:50% 100%; transform:scaleY(.45); opacity:.6; transition:transform .4s var(--ease), opacity .3s; }
.sound i:nth-child(2){ transform:scaleY(.8); } .sound i:nth-child(3){ transform:scaleY(.6); } .sound i:nth-child(4){ transform:scaleY(.35); }
.sound:hover{ background:var(--yellow); transform:translateY(-2px); }
.sound.is-on{ background:var(--yellow); color:var(--ink); }
.sound.is-on i{ opacity:1; animation:eq .9s ease-in-out infinite alternate; }
.sound.is-on i:nth-child(2){ animation-delay:-.25s; } .sound.is-on i:nth-child(3){ animation-delay:-.55s; } .sound.is-on i:nth-child(4){ animation-delay:-.4s; }
@keyframes eq{ from{ transform:scaleY(.3); } to{ transform:scaleY(1.7); } }
body.is-dark .sound{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.1); color:var(--white); }
body.is-dark .sound.is-on{ background:var(--yellow); color:var(--ink); }
.topbar__sound{ display:none; }

/* ──────────────────────────────────────────────────────────────  HERO ── */
.hero{
  position:relative; z-index:1; isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:0 3.47vw 2.2vw;
}
.hero__wordmark{
  position:relative; z-index:1;
  margin:2.4vw auto 0; width:max-content; max-width:100%;
  font-weight:900; text-transform:uppercase;
  font-size:18vw;               /* main.js lo ajusta al ancho exacto */
  line-height:.78; letter-spacing:-.045em;
  text-align:left; color:var(--yellow);
  white-space:nowrap; user-select:none;
  /* flex-start: durante el morph la caja pierde tracking y debe encogerse
     desde su borde izquierdo (el ancho del h1 se fija en px en ese momento) */
  display:flex; justify-content:flex-start; align-items:flex-start;
  transform-origin:0 0;         /* se encoge hacia la esquina del logo */
  will-change:transform;
}
/* Solo las letras (hijas de la caja): si la regla alcanzara a la propia caja
   le pisaría el display:inline-flex y el ® quedaría alineado distinto que en
   el logo (allí es un ítem flex arriba; aquí caería como sup en línea). */
.hero__wordmark-box > span{ display:block; will-change:transform; }
/* Caja que vuela: lleva el relleno del logo en proporción (y margen negativo
   para no mover el layout), así al encogerse encaja sin deformarse. */
.hero__wordmark-box{
  display:inline-flex; align-items:flex-start;
  padding:.68em .73em; margin:-.68em -.73em;
  border-radius:0; background:transparent;
  transform-origin:0 0; will-change:transform;
}
/* Oculta mientras la copia del preloader vuela hacia aquí (clase, no estilo
   inline: así ningún clearProps de GSAP la destapa antes de tiempo). */
.hero__wordmark.is-hidden{ opacity:0 !important; }
/* El ® ocupa sitio (como en el logo) pero solo se ve durante el morph */
.hero__wordmark sup{
  font-size:.2em; line-height:1; margin-top:.02em; margin-left:.04em;
  letter-spacing:0; opacity:0;
}

/* Capa FIJA con la foto: queda anclada al viewport y se desenfoca al
   hacer scroll, convirtiéndose en el fondo difuso de toda la página. */
.hero__photo{
  position:fixed; inset:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none;
}
.hero__photo-inner{
  width:min(50vw, 72vh); height:94vh;
  display:flex; align-items:flex-end; justify-content:center;
  will-change:transform, filter;
}
.hero__photo img{
  width:100%; height:auto; max-height:94vh;
  object-fit:contain; object-position:bottom center;
}
/* Escenario de la entrada: un foco de luz coral que florece detrás de la
   persona y una sombra en el suelo que se asienta cuando aterriza. */
.hero__spot{
  position:absolute; left:50%; bottom:4vh; width:min(72vw, 112vh); aspect-ratio:1; transform:translateX(-50%);
  border-radius:50%; pointer-events:none; opacity:0; will-change:transform, opacity;
  background:radial-gradient(closest-side, rgba(255,214,200,.95) 0%, rgba(239,91,69,.42) 32%, rgba(239,91,69,0) 72%);
  filter:blur(28px);
}
.hero__floor{
  position:absolute; left:50%; bottom:-1.5vh; width:min(44vw, 60vh); height:7vh; transform:translateX(-50%);
  border-radius:50%; pointer-events:none; opacity:0; will-change:transform, opacity;
  background:radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,0)); filter:blur(12px);
}
.hero__photo-fallback{ position:relative; width:100%; }
.hero__photo-fallback svg{ width:100%; height:auto; }
.hero__photo-hint{
  position:absolute; left:50%; top:22%; transform:translateX(-50%);
  background:var(--yellow); color:var(--ink);
  padding:8px 15px; border-radius:99px; white-space:nowrap;
  font-size:12px; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.hero__photo-hint code{ font-family:ui-monospace, Menlo, monospace; font-size:12px; }

.hero__ui{ position:relative; z-index:3; flex:1; display:flex; flex-direction:column; }
.hero__nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  margin-top:1.67vw; min-height:2.5vw;
  font-size:var(--fs-body); font-weight:500; text-transform:uppercase; line-height:1;
}
.hero__nav-group{ display:flex; align-items:center; gap:1.1vw; }
/* Misma anatomía que .navlink (icono + texto): el icono nace con ancho 0 y
   crece durante el vuelo hasta que el enlace es idéntico al del rail. */
.hero__nav a{ position:relative; display:inline-flex; align-items:center; gap:0; padding:0; white-space:nowrap; border-radius:0; will-change:transform; }
.hero__nav a svg{ width:0; height:clamp(12px, 1.11vw, 18px); opacity:0; flex:none; }
.hero__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-.2vw; height:2px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.hero__nav a:hover::after{ transform:scaleX(1); }
body.has-morph .hero__nav a::after{ display:none; }
.hero__nav .sep{ width:1px; height:.8vw; background:var(--ink); display:block; }

/* Bloque central de 64vw (hero-cards-wrap en la referencia) */
.hero__cluster{
  width:64vw; max-width:100%; margin:auto auto 0;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:end; gap:1.5vw;
}
.hero__stats{ position:relative; display:flex; flex-direction:column; gap:1.5vw; align-items:flex-start; justify-self:start; }
/* Misma anatomía que .rstat (cifra grande + texto): durante el vuelo pierde
   fondo, borde y relleno y ajusta tamaños hasta ser idéntica. */
.hstat{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.45vw;
  padding:1.1vw 1.5vw; border-radius:var(--r-s);
  background:var(--glass-hero); border:1px solid rgba(255,255,255,.14); box-shadow:var(--glass-shadow);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  color:var(--white); text-align:center;
  font-size:var(--fs-body); font-weight:500; line-height:1.1;
  will-change:transform; box-sizing:border-box;
}
.hstat:nth-child(2){ margin-left:3vw; }
.hstat__big{
  display:flex; align-items:baseline; justify-content:center; flex:none; white-space:nowrap;
  color:var(--yellow); font-weight:700; font-size:clamp(1.6rem, 2.7vw, 3.4rem); line-height:1;
}
.hero__stats{ gap:1.1vw; }

.hero__center{
  display:flex; flex-direction:column; align-items:center; gap:1.2vw;
  padding-bottom:.4vw;
}
.hero__title{
  font-size:min(clamp(3rem, 5.3vw, 5.5rem), 9.6vh);
  font-weight:700; line-height:1; letter-spacing:-.03em;
  color:var(--white); text-align:left;
  /* halo suave que sigue la forma de las letras (legible sobre la foto) */
  text-shadow:0 3px 30px rgba(0,0,0,.38), 0 1px 3px rgba(0,0,0,.18);
}
/* Sin overflow:hidden: recortaba la sombra en un rectángulo visible. Las
   líneas entran con desplazamiento + desenfoque, no con máscara. */
.hero__title .ln{ display:block; overflow:visible; }
.hero__title .ln > span{ display:block; will-change:transform; }
.hero__actions{ position:relative; display:flex; gap:.83vw; }
.hero__actions .btn{ will-change:transform; }

/* ── Relevo portada → rail ─────────────────────────────────────────────
   Mientras las piezas del hero vuelan, sus gemelas del rail están ocultas;
   en el instante en que aterrizan (body.is-docked) se intercambian. Como a
   esa altura son idénticas, no se nota el cambio. */
body.has-morph:not(.is-docked) .rail .logo,
body.has-morph:not(.is-docked) .rstat,
body.has-morph:not(.is-docked) .navlink,
body.has-morph:not(.is-docked) .rail__cta{ visibility:hidden; }
body.is-docked #heroWordmark,
body.is-docked #heroNav,
body.is-docked .hero__stats,
body.is-docked #heroActions{ visibility:hidden; }
/* Durante el vuelo el rail queda DEBAJO del hero: si no, sus tarjetas (con
   desenfoque de fondo) tapan y emborronan las piezas que están aterrizando. */
body.has-morph:not(.is-docked) .rail{ z-index:0; }

.hero__traits{
  justify-self:start; margin-left:.5vw; align-self:start;
  display:flex; flex-direction:column; gap:.83vw;
  padding:1.67vw 2.29vw 1.67vw 1.67vw; border-radius:var(--r-s);
  background:var(--glass-hero); border:1px solid rgba(255,255,255,.14); box-shadow:var(--glass-shadow);
  backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
  color:var(--white); font-size:var(--fs-body); font-weight:500; line-height:1.1;
}
.trait{ display:flex; align-items:center; gap:.69vw; }
.trait svg{ width:clamp(14px, 1.25vw, 24px); height:clamp(14px, 1.25vw, 24px); color:var(--yellow); flex:none; }

/* Textos de las esquinas inferiores */
.hero__kicker, .hero__intro{ position:absolute; bottom:0; z-index:3; }
.hero__kicker{ left:0; width:clamp(8rem, 11vw, 14rem); font-size:var(--fs-body); font-weight:500; line-height:1.3; }
.hero__intro{ right:0; width:clamp(200px, 24.64vw, 420px); text-align:right; font-size:var(--fs-small); line-height:1.5; color:var(--ink-70); }

/* ───────────────────────────────────────────────────────── SECCIONES ── */
.section{
  position:relative; z-index:2;
  padding:10vw var(--gutter) 10vw var(--content-x);
}
.section--dark{
  background:linear-gradient(#000, #222 44.35%);
  color:var(--white);
}
.shead{ margin-bottom:3.5vw; max-width:62vw; }
.shead__title{ margin-top:.4vw; }
.shead__lead{
  margin-top:1.6vw; max-width:clamp(18rem, 26.6vw, 30rem);
  font-size:var(--fs-body); line-height:1.6; color:var(--ink-70);
}
.section--dark .shead__lead{ color:rgba(255,255,255,.85); }
.shead--work{
  display:grid; grid-template-columns:1.35fr 1fr; gap:1.11vw;
  align-items:start; max-width:none; margin-bottom:2.5vw;
}
.shead--work .shead__title{ font-size:clamp(2rem, 3.9vw, 4.4rem); }
.shead--work .eyebrow{ grid-column:1; justify-self:start; }
.shead--work .shead__title{ grid-column:1; }
.shead--work .shead__lead{ grid-column:2; grid-row:1 / 3; justify-self:end; margin-top:2.6vw; }
.shead--row{ display:flex; justify-content:space-between; align-items:flex-end; max-width:none; gap:2vw; }

/* ────────────────────────────────────────────────── TRAYECTORIA / TL ── */
/* Más aire arriba: el contenido llega cuando las piezas del hero ya han
   aterrizado en el rail (la referencia hace lo mismo). */
.about{ padding-top:34vw; padding-bottom:12vw; }
.tl{ position:relative; padding-top:1vw; }
.tl__path{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.tl__items{ display:flex; flex-direction:column; gap:5.5vw; position:relative; z-index:1; }

.tlcard{
  width:clamp(370px, 29.58vw, 600px);
  padding:2.08vw; border-radius:var(--r-m);
  background:var(--card); border:var(--border);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  position:relative;
  /* filo de luz arriba + sombra que crece al pasar el cursor */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1.4vw 2.8vw -1.8vw rgba(0,0,0,.28);
  transition:box-shadow .45s var(--ease);
  will-change:transform;
}
.tlcard.is-hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2.6vw 4.2vw -1.9vw rgba(0,0,0,.38); }
.tlcard__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1vw; }
.tlcard__co{
  display:inline-flex; align-items:center; gap:.45vw; flex:none; margin-top:.5vw;
  padding:.38vw .8vw; border-radius:99px; background:var(--card-2); border:1px solid rgba(255,255,255,.4);
  font-size:var(--fs-small); font-weight:600; color:var(--ink-70); white-space:nowrap; letter-spacing:-.01em;
}
.tlcard__co i{ width:.5vw; height:.5vw; border-radius:50%; background:var(--yellow); }
.tlcard__tags{ display:flex; flex-wrap:wrap; gap:.4vw; margin-top:1vw; }
.tlcard__tags span{
  font-size:var(--fs-small); line-height:1; padding:.42vw .8vw; border-radius:99px;
  border:1px solid rgba(0,0,0,.14); background:rgba(255,255,255,.28); color:var(--ink-70); white-space:nowrap;
}
/* Zigzag derecha/izquierda con desplazamientos variados, como la referencia.
   (Las reglas por posición se atan al lado: antes pisaban el margin-left:auto
   de las tarjetas derechas y todo se iba al mismo lado.) */
.tlcard--right{ margin-left:auto; margin-right:2vw; }
.tlcard--left{ margin-left:10vw; }
.tlcard--right:nth-child(3){ margin-right:8vw; }
.tlcard--left:nth-child(4){ margin-left:4vw; }
.tlcard--right:nth-child(5){ margin-right:4vw; }
.tlcard--left:nth-child(6){ margin-left:8vw; }
.tlcard::before{
  content:""; position:absolute; top:12%; bottom:12%; width:clamp(1px, .14vw, 2px);
  background:linear-gradient(#2e20067d, #2e200645 44%, #2e200600 95%);
  transform:scaleY(var(--con, 1)); transform-origin:50% 0;   /* el conector se dibuja al entrar */
}
.tlcard--left::before{ left:-1.6vw; }
.tlcard--right::before{ right:-1.6vw; }

.tlcard__year{
  color:var(--yellow); font-weight:700;
  font-size:clamp(4rem, 5.56vw, 6.25rem); line-height:1; letter-spacing:-.02em;
  margin-bottom:.42vw;
}
.tlcard__title{ font-size:clamp(1rem, 1.67vw, 2.25rem); font-weight:500; line-height:1.1; margin-bottom:.42vw; }
.tlcard__text{ font-size:var(--fs-body); line-height:1.5; color:var(--ink-70); }
.tlcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:1vw; margin-top:1.39vw; }
.tlcard__who{ display:flex; align-items:center; gap:.97vw; min-width:0; }
.tlcard__avs{ display:flex; flex:none; }
.tlcard__av{
  width:clamp(2.6rem, 4.44vw, 5rem); height:clamp(2.6rem, 4.44vw, 5rem);
  border-radius:50%; background:var(--card-2); border:1px solid rgba(255,255,255,.35);
  display:grid; place-items:center; overflow:hidden;
  font-weight:700; font-size:clamp(.7rem, 1vw, 1.1rem); color:var(--ink-70); letter-spacing:-.02em;
}
.tlcard__av img{ width:100%; height:100%; object-fit:cover; }
.tlcard__av + .tlcard__av{ margin-left:-1.53vw; }
.tlcard__av svg{ width:45%; color:var(--yellow); }
.tlcard__meta{ font-size:var(--fs-small); line-height:1.3; color:var(--ink-50); min-width:0; flex:1; }
.tlcard__handle{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tlcard__date{ display:block; line-height:1.35; }   /* la fecha puede partirse en dos líneas: nunca se recorta */
.tlcard__more{
  flex:none;
  background:var(--card-2); border:1px solid rgba(54,54,54,.15); border-radius:var(--r-m);
  padding:.69vw 1.39vw; font-size:var(--fs-small); font-weight:500; white-space:nowrap;
  transition:background .3s;
}
.tlcard__more:hover{ background:var(--yellow); }
.tldot{ fill:var(--yellow); stroke:var(--ink); stroke-width:2; }
.tlring{ fill:none; stroke:var(--yellow); stroke-width:2; opacity:0; }
.tlhead{ fill:var(--ink); opacity:0; }
.tlhead-glow{ fill:var(--yellow); opacity:0; }

/* ──────────────────────────────────────────────── PROYECTOS / HSCROLL ── */
.work{ padding:6vw 0; overflow:hidden; }
.work__inner{ padding:0 var(--gutter) 0 var(--content-x); }
/* En escritorio la sección se ancla al viewport: mide exactamente 100vh y
   las tarjetas toman la altura que sobra tras la cabecera (antes medían por
   ancho y se cortaban en pantallas bajas). */
@media (min-width:1025px){
  .work{ height:100vh; display:flex; flex-direction:column; padding:3.2vw 0 2.6vw; }
  .work__inner{ flex:1; display:flex; flex-direction:column; min-height:0; }
  .shead--work{ flex:none; }
  .hscroll{ flex:1; min-height:0; }
  .hscroll__track{ height:100%; }
  .pcard{ height:100%; width:auto; aspect-ratio:375 / 530; }
  .hscroll__progress{ flex:none; margin-top:2vw; }
}
/* Visor del carril: el track arranca a la derecha (padding-left 55%, como
   la referencia) y se desplaza con el scroll anclado. */
.hscroll{
  margin:0 calc(var(--gutter) * -1) 0 calc(var(--content-x) * -1);
  padding-left:60vw;
  overflow:hidden;
}
.hscroll--swipe{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hscroll--swipe::-webkit-scrollbar{ height:0; }
.hscroll--swipe .pcard{ scroll-snap-align:center; }
.hscroll__track{ display:flex; gap:2.08vw; width:max-content; will-change:transform; padding-right:var(--gutter); }

.pcard{
  position:relative; flex:none;
  width:clamp(17rem, 27vw, 30rem); aspect-ratio:375 / 530;
  border-radius:var(--r-m); overflow:hidden;
  background:#151513; color:var(--white);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1.25vw 1.25vw 1.81vw;
}
.pcard__bg{ position:absolute; inset:0; z-index:0; background:radial-gradient(120% 90% at 70% 10%, var(--c1) 0%, var(--c2) 62%, #0a0a0a 100%); }
.pcard__img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
.pcard::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(rgba(0,0,0,.3), rgba(51,51,51,.03) 50%, rgba(0,0,0,.4));
}
.pcard__glyph{
  position:absolute; z-index:0; right:-6%; bottom:4%;
  font-weight:900; font-size:min(30vh, 16vw); line-height:.75; letter-spacing:-.06em;
  color:rgba(255,255,255,.06); user-select:none;
}
.pcard__dim{ position:absolute; inset:0; z-index:3; background:rgba(0,0,0,.6); opacity:0; transition:opacity .4s var(--ease); pointer-events:none; }
.pcard__top{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:.5vw; }
.pcard__n, .pcard__tags span{
  display:inline-block;
  background:#000; border:1px solid rgba(255,255,255,.3); border-radius:99px;
  padding:.4vw .75vw; font-size:var(--fs-small); line-height:1; white-space:nowrap;
}
.pcard__tags{ display:flex; gap:.28vw; flex-wrap:wrap; justify-content:flex-end; }
.pcard__bottom{ position:relative; z-index:2; padding-right:clamp(2.5rem, 3.47vw, 4rem); line-height:1.3; }
.pcard__name{ font-size:clamp(1.25rem, 1.94vw, 3rem); font-weight:500; line-height:1; margin-bottom:.4vw; }
.pcard__text{ font-size:var(--fs-small); line-height:1.4; color:rgba(255,255,255,.85); }
.pcard__go{
  position:absolute; right:1.25vw; bottom:1.81vw; z-index:4;
  width:clamp(1.75rem, 2.5vw, 2.75rem); height:clamp(1.75rem, 2.5vw, 2.75rem);
  border-radius:50%; background:var(--yellow); color:var(--ink);
  display:grid; place-items:center;
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.pcard__go{ overflow:hidden; }
.pcard__go svg{ width:45%; height:45%; grid-area:1/1; transition:transform .5s var(--ease); }
/* dos flechas: la primera sale hacia arriba-derecha y la segunda entra
   desde abajo-izquierda (misma idea que work-card-arrow / -arrow-2) */
.pcard__go svg + svg{ transform:translate(-130%, 130%); }
.pcard:hover .pcard__go svg:first-child{ transform:translate(130%, -130%); }
.pcard:hover .pcard__go svg + svg{ transform:none; }
@media (hover:hover){
  .hscroll__track:hover .pcard:not(:hover) .pcard__dim{ opacity:1; }
  .hscroll__track:hover .pcard:not(:hover) .pcard__go{ background:#2f2f2f; color:#8c8c8c; }
}
/* ── Tarjeta con capturas: fondo con profundidad + portátil 3D «en vídeo» ──
   Fondo: la primera captura desenfocada, dos resplandores del color de la
   marca que se mueven despacio y una retícula de puntos. Centro: un portátil
   (tapa con bisel y pantalla, base en perspectiva real, sombra en el suelo)
   que se inclina hacia el cursor; dentro, cada captura se desplaza como un
   vídeo y funde con la siguiente (initProjectMedia). */
.pcard__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.pcard__bgimg{
  position:absolute; inset:-12%; width:124%; height:124%; object-fit:cover; object-position:top;
  filter:blur(22px) saturate(1.4) brightness(.5); will-change:transform;
}
/* aurora: tres manchas con los colores dominantes de la web (--p1..--p3,
   extraídos de la captura) que derivan despacio por caminos distintos */
.pcard__glow{ position:absolute; inset:0; overflow:hidden; mix-blend-mode:screen; opacity:.95; }
.pcard__glow::before, .pcard__glow::after, .pcard__glow i{ content:""; position:absolute; border-radius:50%; filter:blur(30px); will-change:transform; }
.pcard__glow::before{ left:-25%; top:-18%; width:85%; aspect-ratio:1; background:radial-gradient(closest-side, var(--p1, var(--c1)), transparent 72%); animation:auroraA 13s ease-in-out infinite alternate; }
.pcard__glow::after{ right:-28%; top:22%; width:95%; aspect-ratio:1; background:radial-gradient(closest-side, var(--p2, var(--c1)), transparent 72%); opacity:.8; animation:auroraB 17s ease-in-out infinite alternate; }
.pcard__glow i{ left:8%; bottom:-30%; width:80%; aspect-ratio:1; background:radial-gradient(closest-side, var(--p3, var(--c2)), transparent 72%); opacity:.75; animation:auroraC 15s ease-in-out infinite alternate; }
@keyframes auroraA{ to{ transform:translate(32%, 30%) scale(1.25); } }
@keyframes auroraB{ to{ transform:translate(-30%, -26%) scale(.85); } }
@keyframes auroraC{ to{ transform:translate(-22%, -34%) scale(1.15); } }
.pcard__grid{
  position:absolute; inset:0; opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.3px);
  background-size:clamp(14px, 1.25vw, 20px) clamp(14px, 1.25vw, 20px);
  -webkit-mask-image:radial-gradient(72% 56% at 50% 42%, #000 15%, transparent 80%);
  mask-image:radial-gradient(72% 56% at 50% 42%, #000 15%, transparent 80%);
}
.pcard__shade{ position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.04) 36%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.86)); }

.pcard__stage{
  position:absolute; left:13%; right:13%; top:46%; z-index:2; transform:translateY(-52%);
  perspective:1000px; transition:transform .7s var(--ease);
}
.pcard:hover .pcard__stage{ transform:translateY(-55%); }
.laptop__float{ transform-style:preserve-3d; will-change:transform; }
.laptop{ position:relative; transform-style:preserve-3d; will-change:transform; }
/* tapa: carcasa de aluminio (degradado con brillo lateral) con grosor real
   (::before desplazado hacia atrás), bisel negro y pantalla */
.laptop__lid{
  position:relative; padding:1.3% 1.3% 1.6%; transform-style:preserve-3d;
  background:linear-gradient(100deg, #5c5c66 0%, #8e8e99 22%, #6a6a75 48%, #8a8a95 76%, #55555f 100%);
  border-radius:clamp(9px, .9vw, 16px) clamp(9px, .9vw, 16px) clamp(3px, .3vw, 5px) clamp(3px, .3vw, 5px);
  transform:rotateX(-7deg) translateZ(8px); transform-origin:50% 100%;
  box-shadow:0 0 0 .5px rgba(255,255,255,.35), 0 2.2vw 3.6vw -1.6vw rgba(0,0,0,.9);
}
.laptop__lid::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(#3c3c45, #22222a); transform:translateZ(-7px);
  box-shadow:0 0 0 1px rgba(0,0,0,.6);
}
.laptop__bezel{
  position:relative; padding:2.6% 2.4% 3%; background:#07070a;
  border-radius:clamp(7px, .7vw, 13px) clamp(7px, .7vw, 13px) clamp(2px, .2vw, 4px) clamp(2px, .2vw, 4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.laptop__cam{
  position:absolute; top:.9%; left:50%; width:clamp(4px, .42vw, 7px); height:clamp(4px, .42vw, 7px);
  border-radius:50%; background:radial-gradient(circle at 40% 35%, #2e3a4a, #05070a 70%); box-shadow:0 0 0 1px #17171c; transform:translateX(-50%);
}
.laptop__screen{
  position:relative; aspect-ratio:16 / 9.4; overflow:hidden; border-radius:clamp(2px, .25vw, 4px); background:#0b0b0e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), inset 0 0 1.2vw rgba(0,0,0,.6);
}
.laptop__frames img{
  position:absolute; top:0; left:0; width:100%; min-height:100%; object-fit:cover; object-position:top;
  opacity:0; will-change:transform, opacity;
}
.laptop__frames img.is-on{ opacity:1; }
/* reflejo del cristal: barrido diagonal muy lento */
.laptop__glare{
  position:absolute; inset:-40% -60%; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.12) 44%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.1) 56%, rgba(255,255,255,0) 70%);
  animation:glare 9s ease-in-out infinite alternate;
}
@keyframes glare{ from{ transform:translateX(-18%); } to{ transform:translateX(18%); } }
.laptop__hinge{
  position:absolute; left:18%; right:18%; bottom:-1px; height:clamp(2px, .28vw, 4px);
  background:linear-gradient(#1a1a20, #050507); border-radius:0 0 3px 3px; transform:translateZ(1px);
}
/* base: plano tumbado (rotateX) que arranca en la bisagra, con teclado,
   trackpad y un canto frontal vertical (::after) que le da grosor */
.laptop__base{
  position:relative; margin:0 -3.2%; aspect-ratio:16 / 2.7; transform-style:preserve-3d;
  background:linear-gradient(100deg, #676770 0%, #9a9aa5 25%, #7a7a85 50%, #9797a2 78%, #5d5d67 100%);
  border-radius:clamp(2px, .25vw, 4px) clamp(2px, .25vw, 4px) clamp(12px, 1.2vw, 20px) clamp(12px, 1.2vw, 20px);
  transform:rotateX(74deg); transform-origin:50% 0;
  box-shadow:0 0 0 .5px rgba(255,255,255,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.laptop__edge{
  position:absolute; left:0; right:0; top:100%; height:clamp(4px, .5vw, 9px);
  background:linear-gradient(#8b8b96, #4b4b55 55%, #2a2a31); transform-origin:50% 0; transform:rotateX(-74deg);
  border-radius:0 0 clamp(4px, .45vw, 8px) clamp(4px, .45vw, 8px); box-shadow:0 1px 0 rgba(0,0,0,.7);
}
.laptop__notch{ position:absolute; top:0; left:50%; width:14%; height:14%; transform:translateX(-50%); background:linear-gradient(#0b0b0e, #24242b); border-radius:0 0 999px 999px; }
.laptop__keys{
  position:absolute; left:6%; right:6%; top:16%; height:50%; border-radius:3px;
  background:
    repeating-linear-gradient(90deg, #26262d 0 5.6%, transparent 5.6% 6.7%),
    repeating-linear-gradient(0deg, #26262d 0 21%, transparent 21% 25%),
    #16161b;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
.laptop__pad{ position:absolute; left:38%; right:38%; top:72%; height:22%; border-radius:3px; background:linear-gradient(#8c8c97, #7a7a85); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3); }
.laptop__shadow{
  position:absolute; left:4%; right:4%; bottom:-6%; height:12%; border-radius:50%; pointer-events:none; opacity:.6;
  background:radial-gradient(closest-side, rgba(0,0,0,.85), rgba(0,0,0,0)); filter:blur(12px); transform:translateZ(-50px);
}
.pcard--media .pcard__text{ color:rgba(255,255,255,.88); }

.pcard__link{ color:inherit; }
.pcard__link::after{ content:""; position:absolute; inset:0; z-index:3; }
.pcard__link:focus-visible{ outline:none; }
.pcard:focus-within, .pcard[data-view]:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }
.pcard[data-view]{ cursor:pointer; }
.hscroll__progress{
  position:relative; height:2px; border-radius:2px;
  background:rgba(255,255,255,.12); margin-top:3vw;
}
.hscroll__progress i{ position:absolute; inset:0 auto 0 0; width:6%; background:var(--yellow); border-radius:2px; }

/* ─────────────────────────────────────────────────────── QUÉ RECIBES ── */
.overview{ padding:15vw 6.39vw 15vw var(--content-x); text-align:center; overflow:hidden; }
.h2big{
  font-size:clamp(6rem, 12.5vw, 200px);
  font-weight:700; line-height:.9; letter-spacing:-.02em;
  margin-bottom:2.78vw;
}
.overview .eyebrow{ margin-bottom:2.8vw; }
.ov__text{
  width:clamp(760px, 62.24vw, 1120px); max-width:100%;
  margin:0 auto;
  font-size:clamp(2.6rem, 4.72vw, 5.5rem);
  font-weight:700; line-height:1; letter-spacing:-.02em;
  text-align:center; color:var(--ink);
}
.ov__text--mobile{ display:none; }
.ov__text .ch{ will-change:color; }
.ov__list{ display:none; }

/* Ficha incrustada en la frase: se abre al pasar el cursor */
.capa{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  vertical-align:middle;
  background:var(--chip); border-radius:clamp(7px, .63vw, 12px);
  padding:.9vw 1.25vw; margin:0 .35vw;
  text-align:left; cursor:default; position:relative;
  /* resetea la tipografía gigante de la frase */
  font-size:var(--fs-body); font-weight:500; line-height:1.4; letter-spacing:0;
  white-space:normal;
}
.capa{ z-index:1; }
.capa:hover, .capa:focus-within, .capa.is-open{ z-index:6; }
.capa__top{ display:flex; align-items:center; justify-content:space-between; gap:1.39vw; color:var(--yellow); width:100%; }
.capa__icon{ width:clamp(1.5rem, 2.15vw, 2.75rem); height:clamp(1.5rem, 2.15vw, 2.75rem); display:block; flex:none; }
.capa__arrow{ width:clamp(.5rem, .69vw, .875rem); height:clamp(.5rem, .69vw, .875rem); flex:none; transition:transform .4s var(--ease); }
.capa:hover .capa__arrow, .capa:focus-within .capa__arrow, .capa.is-open .capa__arrow{ transform:rotate(180deg); }
/* El detalle se despliega como tarjeta flotante bajo la ficha: la ficha no
   cambia de tamaño, así la frase no se reacomoda y el cursor no la pierde
   (eso era lo que parpadeaba). */
.capa__body{
  position:absolute; left:0; top:calc(100% + .45vw);
  width:clamp(12rem, 17vw, 20rem);
  display:grid; grid-template-rows:0fr; overflow:hidden;
  background:var(--chip); border-radius:clamp(7px, .63vw, 12px);
  padding:0 1.1vw;
  opacity:0; transform:translateY(-6px);
  box-shadow:0 1.2vw 2.4vw -1vw rgba(0,0,0,.28);
  pointer-events:none;
  transition:grid-template-rows .45s var(--ease), opacity .28s var(--ease), transform .35s var(--ease), padding .35s var(--ease);
}
.capa__body > *{ overflow:hidden; min-height:0; display:block; }
.capa:hover .capa__body, .capa:focus-within .capa__body, .capa.is-open .capa__body{
  grid-template-rows:1fr; opacity:1; transform:none; padding:1vw 1.1vw; pointer-events:auto;
}
.capa__h{ font-size:clamp(.95rem, 1.39vw, 1.6rem); font-weight:500; line-height:1.1; margin-bottom:.4vw; color:var(--ink); }
.capa__p{ font-size:var(--fs-small); font-weight:400; line-height:1.4; color:var(--ink-70); }

/* ─────────────────────────────────────────────────────── FORMACIÓN ── */
.edu{ padding:2vw var(--gutter) 10vw var(--content-x); }

/* ── Logos 3D ────────────────────────────────────────────────────────────
   Cada logo es su propia forma extruida: la silueta vectorial se apila en
   catorce capas (translateZ) del color del canto y, delante, la cara con
   el color de marca, un degradado y un brillo recortado a la forma. La
   escena lleva perspectiva; GSAP los hace caer, flotar e inclinarse hacia
   el cursor. Sin cajas: la pieza ES el logo. */
.tools{ margin:2.2vw 0 3.6vw; }
.tools__title{ font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-70); margin:0 0 1.6vw; }
.tools__row{ display:flex; flex-wrap:wrap; gap:2vw 2.4vw; perspective:1200px; }
.tool{
  --front:#d97757; --front2:#c25f40; --side:#9a4a30; --back:#6e3320;
  margin:0; display:flex; flex-direction:column; align-items:center; gap:.9vw;
  width:clamp(4.4rem, 6.2vw, 7.2rem);
}
.tool[data-tool="claude"]{      --front:#e2835f; --front2:#cf6a4a; --side:#a24f36; --back:#733622; }
.tool[data-tool="antigravity"]{ --front:#3186ff; --front2:#2a6fd8; --side:#1d55ad; --back:#153c7a; }
.tool[data-tool="n8n"]{         --front:#ff6b8f; --front2:#ea4b71; --side:#b0334f; --back:#7a2036; }
.tool[data-tool="vtex"]{        --front:#ff2f75; --front2:#ed125f; --side:#b40c47; --back:#7e0631; }
.tool[data-tool="shopify"]{     --front:#9fcb52; --front2:#7ab55c; --side:#4f8236; --back:#375c25; }
.tool[data-tool="illustrator"]{ --front:#ffb133; --front2:#ff9a00; --side:#b26a00; --back:#7a4700; }
.tool[data-tool="photoshop"]{   --front:#5cbcff; --front2:#31a8ff; --side:#1c6fb5; --back:#124b7c; }
.tool__stage{ position:relative; width:100%; aspect-ratio:1; transform-style:preserve-3d; }
.tool__body{ position:absolute; inset:8%; transform-style:preserve-3d; will-change:transform; }
.tool__layer{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
/* cada capa del canto trae su tono en --lc (más oscuro hacia atrás: oclusión) */
.tool__layer path, .tool__layer text{ fill:var(--lc, var(--side)); }
.tool__layer text{ font-family:var(--font); font-weight:700; letter-spacing:-.04em; }
/* sombra en el suelo: una de contacto, nítida, y otra amplia y suave, ambas
   corridas hacia la derecha porque la luz entra desde arriba a la izquierda */
.tool__shadow, .tool__shadow--soft{
  position:absolute; border-radius:50%; pointer-events:none; transform:translateZ(-60px);
}
.tool__shadow{ left:14%; right:6%; bottom:-11%; height:12%; background:radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,0)); filter:blur(3px); }
.tool__shadow--soft{ left:0; right:-8%; bottom:-20%; height:26%; background:radial-gradient(closest-side, rgba(0,0,0,.26), rgba(0,0,0,0)); filter:blur(9px); }
/* anillo de polvo que se expande al aterrizar */
.tool__ring{
  position:absolute; left:6%; right:-2%; bottom:-14%; height:16%; border-radius:50%;
  border:2px solid rgba(0,0,0,.22); opacity:0; pointer-events:none; transform:translateZ(-59px);
}
.tool figcaption{ text-align:center; font-weight:600; font-size:var(--fs-small); line-height:1.25; }
.tool figcaption small{ display:block; font-weight:400; color:var(--ink-70); margin-top:.15em; }
@media (max-width: 1024px){
  .tools{ margin:8px 0 28px; }
  .tools__title{ font-size:12px; margin-bottom:14px; }
  .tools__row{ gap:18px 12px; justify-content:center; }
  .tool{ width:min(19vw, 74px); gap:8px; }   /* caben 4 por fila: 4 + 3, sin uno suelto */
  .tool figcaption{ font-size:12px; }
}
/* ── Bento de formación ──────────────────────────────────────────────────
   Tres tarjetas de vidrio: estudios (fichas con años tabulares), certifica-
   ciones (tarjetas por emisor con monograma) y stack (chips agrupados por
   área + barras de idiomas). #eduPanel es la rejilla. */
.panel{ display:grid; grid-template-columns:repeat(12, 1fr); gap:1.39vw; margin-top:1vw; }
.ecard{
  position:relative; display:flex; flex-direction:column; gap:1.4vw;
  background:var(--card); border:var(--border); border-radius:var(--r-m); padding:1.8vw;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 3.5vw 5vw -3vw rgba(0,0,0,.22);
}
.ecard--studies{ grid-column:span 5; }
.ecard--certs{ grid-column:span 7; }
.ecard--stack{ grid-column:1 / -1; }
.ecard__head{ display:flex; align-items:center; gap:.7vw; }
.ecard__icon{ width:clamp(2rem, 2.5vw, 3.2rem); height:clamp(2rem, 2.5vw, 3.2rem); border-radius:var(--r-s); background:var(--yellow); display:grid; place-items:center; flex:none; }
.ecard__icon svg{ width:50%; height:50%; color:var(--ink); }
.ecard__title{ font-size:clamp(1rem, 1.46vw, 1.7rem); font-weight:500; line-height:1; letter-spacing:-.02em; }
.ecard__count{
  margin-left:auto; display:inline-flex; align-items:baseline; gap:.3em; white-space:nowrap;
  background:var(--chip); border:var(--border-dk); border-radius:999px; padding:.42em .9em;
  font-size:var(--fs-small); color:var(--ink-70);
}
.ecard__count b{ font-weight:600; color:var(--ink); font-size:1.15em; }
.ecard__note{ display:flex; align-items:flex-start; gap:.4vw; margin-top:auto; font-size:var(--fs-small); line-height:1.5; color:var(--ink-50); }
.ecard__note svg{ width:clamp(13px, 1vw, 16px); height:clamp(13px, 1vw, 16px); flex:none; margin-top:.2em; }

/* estudios */
.deg{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.deg__row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:start; column-gap:1vw;
  padding:1vw 0; border-top:var(--border-dk);
}
.deg__row:first-child{ border-top:0; padding-top:0; }
.deg__years{ font-variant-numeric:tabular-nums; font-size:var(--fs-small); font-weight:600; color:var(--ink-70); letter-spacing:-.01em; padding-top:.2em; white-space:nowrap; }
.deg__body{ display:flex; flex-direction:column; gap:.25em; min-width:0; }
.deg__name{ font-size:var(--fs-body); font-weight:500; line-height:1.3; letter-spacing:-.01em; }
.deg__inst{ font-size:var(--fs-small); color:var(--ink-70); line-height:1.4; }
.deg__level{ font-size:var(--fs-small); color:var(--ink-70); border:var(--border-dk); border-radius:999px; padding:.3em .75em; white-space:nowrap; }

/* certificaciones */
.certs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.7vw; }
.cert{
  display:flex; flex-direction:column; gap:.55vw; min-width:0;
  background:var(--card-2); border:var(--border-dk); border-radius:var(--r-s); padding:1vw 1.05vw;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
@media (hover:hover){
  .cert:hover{ transform:translateY(-3px); box-shadow:0 18px 30px -22px rgba(0,0,0,.4); border-color:rgba(0,0,0,.18); }
}
.cert__top{ display:flex; align-items:baseline; justify-content:space-between; gap:.6vw; padding-bottom:.55vw; border-bottom:var(--border-dk); }
.cert__issuer{ font-size:.72em; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-70); line-height:1.3; }
.cert__date{ font-size:var(--fs-small); color:var(--ink-50); font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.3; }
.cert__name{ font-size:var(--fs-body); font-weight:500; line-height:1.3; letter-spacing:-.01em; }
.cert__program{ font-size:var(--fs-small); color:var(--ink-70); line-height:1.4; }

/* stack + idiomas */
.stack{ display:grid; grid-template-columns:minmax(0, 1fr) clamp(14rem, 20vw, 24rem); gap:1.4vw 3vw; align-items:start; }
.skills{ margin:0; display:flex; flex-direction:column; }
.skrow{ display:grid; grid-template-columns:clamp(8rem, 10.5vw, 13rem) 1fr; align-items:start; gap:1vw; padding:.75vw 0; border-top:var(--border-dk); }
.skrow:first-child{ border-top:0; padding-top:0; }
.skrow__label{ font-size:var(--fs-small); font-weight:600; color:var(--ink-70); padding-top:.45em; }
.skrow__chips{ margin:0; display:flex; flex-wrap:wrap; gap:.4vw; }
.skrow__chips span{
  font-size:var(--fs-small); line-height:1; padding:.6em .95em; border-radius:999px;
  background:var(--chip); border:var(--border-dk); white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease);
}
@media (hover:hover){ .skrow__chips span:hover{ background:var(--ink); color:#fff; } }
.langs{ display:flex; flex-direction:column; gap:1vw; background:var(--card-2); border:var(--border-dk); border-radius:var(--r-s); padding:1.1vw 1.2vw; }
.langs__title{ font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-70); }
.lng{ display:flex; flex-direction:column; gap:.45vw; }
.lng__row{ display:flex; justify-content:space-between; align-items:baseline; gap:.6vw; font-size:var(--fs-small); }
.lng__row b{ font-weight:500; color:var(--ink); font-size:var(--fs-body); }
.lng__row span{ color:var(--ink-70); text-align:right; }
.lng__bar{ display:block; height:clamp(5px, .42vw, 7px); border-radius:999px; background:rgba(0,0,0,.1); overflow:hidden; }
.lng__bar i{ display:block; height:100%; width:var(--pct, 0%); border-radius:inherit; background:var(--yellow); transform-origin:left; }

/* ──────────────────────────────────────────────────────────── CIERRE ── */
.cta{ padding:10vw var(--gutter) 10vw var(--content-x); }
.cta__title{
  font-size:clamp(3.4rem, 7.64vw, 8.5rem);
  font-weight:700; line-height:1; letter-spacing:-.03em;
  margin-bottom:2.22vw; max-width:62vw;
}
.cta__title .ln{ display:block; overflow:hidden; padding:.22em 0 .28em; margin:-.22em 0 -.28em; }
.cta__title .ln > span{ display:block; will-change:transform; }
.cta__title .lt > span{ color:rgba(255,255,255,.65); }
.cta__text{ max-width:clamp(18rem, 26.6vw, 30rem); font-size:var(--fs-body); line-height:1.6; color:var(--ink-70); }
.cta__wrap{ display:flex; align-items:flex-start; gap:1.39vw; margin-top:3.47vw; }
.cta__avatar{ width:clamp(2.4rem, 3.06vw, 3.6rem); height:clamp(2.4rem, 3.06vw, 3.6rem); border-radius:50%; object-fit:cover; flex:none; margin-top:.2vw; }
.cta__col{ display:flex; flex-direction:column; align-items:flex-start; }
.cta__bubble{
  display:inline-flex; align-items:center;
  background:var(--chip); border-radius:var(--r-m);
  padding:.76vw 1.32vw; margin-bottom:.69vw;
  font-size:var(--fs-body); line-height:1;
}
.cta__actions{ display:flex; gap:.6vw; flex-wrap:wrap; }
/* Burbuja tipo chat: primero "escribiendo…" (tres puntos), luego el mensaje */
.cta__typing{ display:inline-flex; align-items:center; gap:.3em; height:1em; }
.cta__typing i{
  width:.42em; height:.42em; border-radius:50%; background:var(--ink-70);
  animation:ctaDot 1.1s ease-in-out infinite;
}
.cta__typing i:nth-child(2){ animation-delay:.16s; }
.cta__typing i:nth-child(3){ animation-delay:.32s; }
@keyframes ctaDot{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-.3em); opacity:1; } }
.cta__bubble.is-typed .cta__typing{ display:none; }
.cta__bubble:not(.is-typed) .cta__msg{ display:none; }

/* ─────────────────────────────────────────────────────── REFERENCIAS ── */
.clients{ padding:8vw var(--gutter) 6vw var(--content-x); overflow:hidden; }
.refs__progress{
  display:flex; gap:.35vw; align-items:center;
  background:var(--card); border:var(--border); border-radius:99px;
  padding:.6vw .9vw; margin-bottom:.6vw; flex:none;
}
.refs__progress i{ display:block; width:1.6vw; height:.3vw; border-radius:99px; background:rgba(0,0,0,.18); transition:background .3s; }
.refs__progress i.is-on{ background:var(--yellow); }
.refs{ overflow:visible; margin-top:1.67vw; }
.refs .swiper-slide{ width:clamp(320px, 33vw, 520px); height:auto; }
.rcard{
  height:100%; display:flex; flex-direction:column; gap:2.2vw;
  padding:1.67vw; border-radius:var(--r-m);
  background:var(--card); border:var(--border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.rcard__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1vw; }
.rcard__h{ font-size:clamp(1.3rem, 2.08vw, 2.6rem); font-weight:500; line-height:1; letter-spacing:-.02em; color:var(--ink-70); max-width:85%; }
.rcard__q{ width:clamp(1.6rem, 2.08vw, 2.6rem); height:clamp(1.6rem, 2.08vw, 2.6rem); border-radius:clamp(5px, .42vw, 8px); background:var(--yellow); display:grid; place-items:center; flex:none; }
.rcard__q svg{ width:50%; }
.rcard__text{ font-size:var(--fs-body); line-height:1.6; color:var(--ink-70); }
.rcard__text q{ quotes:"«" "»"; }
.rcard__who{ display:flex; align-items:center; gap:.97vw; margin-top:auto; }
.rcard__av{
  width:clamp(2.6rem, 4.44vw, 5rem); height:clamp(2.6rem, 4.44vw, 5rem); border-radius:50%; flex:none;
  background:var(--ink); color:var(--yellow);
  display:grid; place-items:center; font-weight:700; font-size:clamp(.8rem, 1.2vw, 1.3rem); letter-spacing:-.02em;
}
.rcard__n{ font-size:var(--fs-body); font-weight:500; line-height:1; }
.rcard__r{ font-size:var(--fs-small); color:var(--ink-70); margin-top:.28vw; line-height:1.2; }
.rcard__tel{ font-size:var(--fs-small); color:var(--ink-70); margin-top:.28vw; text-decoration:underline; text-underline-offset:.15em; }
.refs__nav{ display:flex; align-items:center; gap:.5vw; margin-top:2vw; }
.rbtn{
  width:clamp(36px, 3vw, 48px); height:clamp(36px, 3vw, 48px); border-radius:50%;
  border:1px solid var(--ink-30); font-size:clamp(.9rem, 1.1vw, 1.2rem);
  display:grid; place-items:center;
  transition:background .3s, color .3s;
}
.rbtn:hover{ background:var(--ink); color:var(--card-2); }
.rbtn:disabled{ opacity:.28; pointer-events:none; }

/* ───────────────────────────────────────────────────────────────── FAQ ── */
.faq{ padding:6vw var(--gutter) 8vw var(--content-x); overflow:hidden; }
.faq__ghost{
  display:flex; align-items:flex-start; justify-content:flex-start;
  font-weight:900; text-transform:uppercase; color:var(--yellow);
  line-height:.8; letter-spacing:-.045em; white-space:nowrap;
  font-size:16vw; margin-bottom:8vw; user-select:none;
}
.faq .shead{ margin-bottom:0; }
.faq__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.83vw; margin-top:5vw; }
.acci{ background:var(--card); border-radius:clamp(8px, .69vw, 12px); align-self:start; }
.acci__h{ margin:0; font:inherit; }
.acci__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1vw;
  padding:1.25vw 1.67vw; text-align:left;
}
.acci__q{ font-size:clamp(.95rem, 1.32vw, 1.75rem); font-weight:500; line-height:1.4; width:89%; }
.acci__ico{ position:relative; width:clamp(20px, 2.22vw, 34px); height:clamp(20px, 2.22vw, 34px); flex:none; }
.acci__ico::before, .acci__ico::after{
  content:""; position:absolute; left:50%; top:50%;
  width:clamp(12px, 1.11vw, 18px); height:2px; background:var(--ink); border-radius:2px;
  transform:translate(-50%, -50%);
  transition:transform .45s var(--ease);
}
.acci__ico::after{ transform:translate(-50%, -50%) rotate(90deg); }
.acci.is-open .acci__ico::after{ transform:translate(-50%, -50%) rotate(0deg); }
.acci__panel{ height:0; overflow:hidden; visibility:hidden; transition:visibility 0s linear .55s; }
.acci.is-open .acci__panel{ visibility:visible; transition:visibility 0s linear 0s; }
.acci__a{ padding:.42vw 1.67vw 1.25vw; font-size:var(--fs-body); line-height:1.6; color:var(--ink-70); }

/* ───────────────────────────────────────────────────────────────── PIE ── */
.foot{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center; gap:1vw; flex-wrap:wrap;
  padding:2vw var(--gutter) 2.4vw var(--content-x);
  font-size:var(--fs-small); color:var(--ink-70);
  border-top:var(--border-dk);
}
.foot__left, .foot__right{ display:flex; gap:1.5vw; flex-wrap:wrap; align-items:center; }
.foot__right a{ text-decoration:underline; text-underline-offset:.2em; }
.foot__right a:hover{ color:var(--ink); }
.foot i{ font-style:normal; }

/* ───────────────────────────────────────────────────────────── MODAL ── */
/* ── Visor de proyecto: portátil grande a la izquierda, ficha a la derecha ──
   El ancho del portátil sale de la altura libre (alto ≈ 0,7 × ancho) para que
   nunca se recorte. En móvil se apila y la ficha va debajo. */
.viewer{
  position:fixed; inset:0; z-index:190; visibility:hidden;
  display:grid; place-items:center; padding:6vh 4vw; overflow:hidden;
}
.viewer.is-open{ visibility:visible; }
.viewer__scrim{ position:absolute; inset:0; background:rgba(8,8,10,.9); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); opacity:0; }
.viewer__x{
  position:absolute; top:2.4vh; right:2vw; z-index:4; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); color:var(--white); font-size:28px; line-height:1;
  transition:background .3s, transform .3s var(--ease);
}
.viewer__x:hover{ background:rgba(255,255,255,.22); transform:rotate(90deg); }
.viewer__inner{
  position:relative; z-index:2; width:100%; max-width:1560px;
  display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(17rem, .65fr); gap:3vw; align-items:center;
}
.viewer__stage{ width:100%; max-width:calc(78vh / .7); padding:0 4.5%; box-sizing:border-box; perspective:2000px; justify-self:center; }
.viewer__stage .laptop__float{ transform-style:preserve-3d; }
.viewer__stage .laptop{ transform:rotateX(3deg); }
.viewer__stage .laptop__lid{ box-shadow:0 0 0 .5px rgba(255,255,255,.35), 0 3vw 6vw -2vw rgba(0,0,0,.9); }
.viewer__panel{ color:var(--white); opacity:0; display:flex; flex-direction:column; align-items:flex-start; gap:1.2vh; }
.viewer__head{ display:flex; align-items:center; gap:.6vw; }
.viewer__n{ display:inline-block; background:#000; border:1px solid rgba(255,255,255,.3); border-radius:99px; padding:.45em .9em; font-size:var(--fs-small); line-height:1; }
.viewer__count{ font-size:var(--fs-small); color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums; }
.viewer__title{ font-size:clamp(1.8rem, 3vw, 3.4rem); font-weight:500; letter-spacing:-.03em; line-height:1; margin-top:.4vh; }
.viewer__tags{ display:flex; flex-wrap:wrap; gap:.35vw; }
.viewer__tags span{ border:1px solid rgba(255,255,255,.25); border-radius:99px; padding:.45em .85em; font-size:var(--fs-small); line-height:1; color:rgba(255,255,255,.85); }
.viewer__text{ font-size:var(--fs-body); line-height:1.55; color:rgba(255,255,255,.75); margin:.6vh 0 1vh; }
.viewer__actions{ display:flex; gap:.6vw; flex-wrap:wrap; }
.viewer .btn--light{ background:rgba(255,255,255,.12); color:var(--white); }
.viewer .btn--light:hover{ background:rgba(255,255,255,.22); }
.viewer__nav{ display:flex; gap:.5vw; margin-top:2vh; }
.viewer .rbtn{ border-color:rgba(255,255,255,.25); color:var(--white); }
.viewer .rbtn:hover{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
@media (max-width:1024px){
  .viewer{ padding:11vh 16px 5vh; place-items:start center; overflow:auto; }
  .viewer__inner{ grid-template-columns:1fr; gap:26px; }
  .viewer__stage{ max-width:min(100%, 50vh / .7); padding:0 4%; }
  .viewer__panel{ align-items:center; text-align:center; gap:10px; }
  .viewer__title{ font-size:clamp(1.5rem, 7vw, 2.2rem); }
  .viewer__tags{ justify-content:center; gap:6px; }
  .viewer__text{ font-size:14px; }
  .viewer__actions{ justify-content:center; gap:8px; }
  .viewer__nav{ gap:8px; margin-top:6px; }
  .viewer__x{ top:14px; right:14px; }
}
.modal{ position:fixed; inset:0; z-index:180; display:grid; place-items:center; padding:20px; visibility:hidden; }
.modal.is-open{ visibility:visible; }
.modal__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; }
.modal__box{
  position:relative; z-index:1; width:clamp(370px, 29.58vw, 600px); max-width:100%;
  background:linear-gradient(201deg, #3b3d38, #222 48%, #444 98%);
  color:var(--white); border:1px solid rgba(255,255,255,.4);
  border-radius:var(--r-l);
  padding:2.08vw; opacity:0; transform:translateY(24px) scale(.97);
  max-height:86vh; overflow:auto;
  backdrop-filter:blur(8px);
}
.modal__x{ position:absolute; top:1vw; right:1.2vw; font-size:28px; line-height:1; color:rgba(255,255,255,.6); }
.modal__x:hover{ color:var(--white); }
.modal__year{
  font-weight:700; font-size:clamp(3rem, 5.56vw, 6.25rem); line-height:.9;
  color:var(--yellow);
  background:linear-gradient(#F58E7C, #EF5B45); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:inline-block;
}
.modal__title{ font-size:clamp(1.3rem, 1.94vw, 2.2rem); font-weight:500; letter-spacing:-.02em; margin-top:1vw; line-height:1.1; }
.modal__meta{ font-size:var(--fs-small); color:rgba(255,255,255,.6); margin-top:.5vw; }
.modal__body{ margin-top:1.4vw; font-size:var(--fs-body); line-height:1.6; color:rgba(255,255,255,.85); }

/* ══════════════════════════════════════════ EFECTOS DE LA REFERENCIA ══ */
/* Odómetro: cada dígito rueda dentro de su ventana */
.odo__win{ display:inline-block; overflow:hidden; vertical-align:top; height:1em; line-height:1; }
.odo__track{ display:block; will-change:transform; }
.odo__d{ display:block; height:1em; line-height:1; }
.odo__fixed{ display:inline-block; line-height:1; }

[data-clip]{ will-change:clip-path; }
[data-reveal]{ opacity:0; }
.no-js [data-reveal]{ opacity:1; }

/* ══════════════════════════════════════════════════════════ RESPONSIVE ══ */
/* Portátiles de pantalla baja: el rail se compacta para que quepan los 7
   accesos, el correo y el botón sin scroll interno. */
@media (min-width:1025px) and (max-height:880px){
  .rail__bio{ display:none; }
  .rail__stats{ height:6.4vw; }
  .rail__card, .rail__marquee, .rail__mailwrap{ margin-bottom:.8vw; }
}

@media (max-width:1024px){
  :root{
    --fs-body:15px; --fs-small:13px;
    --r-s:8px; --r-m:12px; --r-l:20px;
    --gutter:20px; --content-x:20px;
  }
  body{ padding-top:66px; }
  .topbar{ display:flex; }
  .topbar__logo{ font-size:16px; padding:8px 12px; border-radius:8px; }

  .btn{ padding:12px 20px; font-size:15px; border-radius:12px; gap:8px; }
  .eyebrow{ border-width:2px; padding:5px 10px; font-size:12px; margin-bottom:14px; }
  .h2{ font-size:clamp(2rem, 9vw, 3.2rem); }

  /* Sidebar → cajón lateral */
  .rail, .rail.is-on{
    top:0; left:0; width:min(340px, 88vw); height:100vh;
    padding:78px 14px 18px;
    background:var(--bg); border-right:var(--border-dk);
    transform:translateX(-102%); opacity:1; overflow-y:auto;
    visibility:hidden;
    transition:transform .5s var(--ease), visibility 0s linear .5s;
  }
  body.is-menu .rail, body.is-menu .rail.is-on{
    transform:translateX(0); visibility:visible;
    transition:transform .5s var(--ease), visibility 0s linear 0s;
  }
  .rail__card, .rail__marquee, .rail__mailwrap{ margin-bottom:12px; border-radius:12px; }
  .rail__id{ padding:16px; }
  .logo{ font-size:16px; padding:8px 12px; border-radius:8px; }
  .rail__socials{ gap:6px; }
  .rail__socials a{ width:34px; height:34px; border-radius:8px; }
  .rail__socials svg{ width:16px; height:16px; }
  .rail__bio{ margin-top:14px; font-size:14px; display:block; }
  .rail__stats{ height:auto; padding:16px; gap:16px; font-size:13px; }
  .rstat{ width:auto; flex:1; gap:6px; }
  .rstat__big{ font-size:30px; }
  .rstat__sep{ height:44px; }
  .rail__nav{ padding:12px; gap:8px; overflow:visible; flex:0 0 auto; }
  .navlink{ height:40px; padding:0 12px; font-size:15px; border-radius:8px; gap:10px; }
  .navlink svg{ width:16px; height:16px; }
  .rail__marquee{ height:48px; }
  .marquee__track{ gap:22px; padding-left:16px; }
  .marquee__track span{ font-size:14px; }
  .rail__mailwrap{ height:50px; padding:8px; }
  .rail__mail{ font-size:13px; border-radius:6px; gap:8px; }
  .rail__cta{ height:50px; font-size:15px; }

  /* Hero apilado */
  .hero{ min-height:auto; padding:8px 20px 40px; }
  .hero__wordmark{ margin:6px 0 0; }
  .hero__photo{ position:relative; inset:auto; height:auto; margin:-10vw auto 0; z-index:2; }
  .hero__photo-inner{ width:min(78vw, 400px); height:auto; }
  .hero__photo img{ max-height:70vh; }
  .hero__nav{ display:none; }
  .hero__wordmark sup{ display:none; }
  .hero__cluster{ width:100%; grid-template-columns:1fr; gap:22px; margin-top:26px; }
  .hero__center{ order:1; gap:20px; padding:0; }
  .hero__title{ color:var(--ink); text-align:center; text-shadow:none; }
  .hero__actions{ gap:10px; flex-wrap:wrap; justify-content:center; }
  .hero__stats{ order:2; flex-direction:row; justify-content:center; gap:12px; justify-self:center; }
  .hstat, .hstat:nth-child(2){ margin:0; padding:16px 20px; border-radius:12px; color:var(--ink); background:var(--card); font-size:13px; flex-direction:column; text-align:center; }
  .hstat__big{ font-size:30px; justify-content:center; }
  .hero__wordmark-box{ padding:0; margin:0; }
  .logo{ padding:8px 12px; line-height:1; letter-spacing:-.02em; }
  .hero__title{ font-size:clamp(2.25rem, 10.9vw, 5.2rem); }
  .hero__traits{ order:3; justify-self:center; margin:0; padding:16px 22px; border-radius:12px; color:var(--ink); background:var(--card); font-size:15px; gap:10px; }
  .trait{ gap:10px; }
  .trait svg{ width:16px; height:16px; }
  .hero__kicker, .hero__intro{ position:static; }
  .hero__kicker{ width:auto; text-align:center; font-size:15px; margin-top:22px; }
  .hero__intro{ width:auto; max-width:46ch; text-align:center; font-size:14px; margin:12px auto 0; }

  .section{ padding:64px 20px; }
  .shead{ max-width:none; margin-bottom:32px; }
  .shead__lead{ margin-top:16px; max-width:none; }
  .shead--work{ grid-template-columns:1fr; gap:16px; margin-bottom:32px; }
  .shead--work .shead__lead{ grid-column:1; grid-row:auto; justify-self:start; margin-top:0; }
  .shead--row{ flex-direction:column; align-items:flex-start; }
  .refs__progress{ display:none; }

  /* Trayectoria */
  .about{ padding-bottom:64px; }
  .tl__path{ display:none; }
  .tl__items{ gap:20px; padding-left:16px; border-left:1px dashed var(--ink-30); }
  .tlcard, .tlcard:nth-child(n){ width:100%; margin:0; padding:20px; border-radius:16px; }
  .tlcard::before{ display:none; }
  .tlcard__year{ font-size:clamp(4rem, 21vw, 6rem); margin-bottom:8px; }
  .tlcard__title{ font-size:clamp(1.28rem, 6.4vw, 2rem); margin-bottom:8px; }
  .tlcard__foot{ margin-top:22px; gap:10px; flex-wrap:wrap; }
  .tlcard__co{ margin-top:6px; padding:6px 10px; font-size:12px; gap:6px; }
  .tlcard__co i{ width:6px; height:6px; }
  .tlcard__tags{ gap:6px; margin-top:12px; }
  .tlcard__tags span{ padding:6px 10px; font-size:12px; }
  .tlcard__who{ gap:10px; }
  .tlcard__av{ width:44px; height:44px; font-size:12px; }
  .tlcard__av + .tlcard__av{ margin-left:-14px; }
  .tlcard__more{ padding:10px 16px; font-size:13px; border-radius:10px; }

  /* Proyectos: carril deslizable con el dedo */
  .work{ padding:56px 0; }
  .work__inner{ padding:0 20px; }
  .hscroll{ margin:0 -20px; padding-left:20px; }
  .hscroll__track{ gap:16px; padding-right:20px; }
  .pcard{ width:clamp(16.5rem, 82vw, 24rem); padding:16px 16px 20px; border-radius:16px; }
  .pcard__n, .pcard__tags span{ padding:6px 10px; font-size:12px; }
  .pcard__name{ font-size:clamp(1.5rem, 7.4vw, 2.2rem); margin-bottom:6px; }
  .pcard__text{ font-size:14px; }
  .pcard__go{ right:16px; bottom:20px; width:40px; height:40px; }
  .pcard__bottom{ padding-right:48px; }
  .hscroll__progress{ display:none; }

  /* Qué recibes */
  .overview{ padding:72px 20px; }
  .h2big{ font-size:clamp(3.5rem, 17.8vw, 8.5rem); margin-bottom:28px; }
  .overview .eyebrow{ margin-bottom:24px; }
  .ov__text{ display:none; }
  .ov__text--mobile{ display:block; width:100%; font-size:clamp(1.65rem, 8.27vw, 3.96rem); line-height:1.15; text-align:center; }
  .ov__list{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:32px; text-align:left; }
  .ovi{ display:flex; gap:14px; align-items:flex-start; background:var(--chip); border-radius:12px; padding:16px; }
  .ovi svg{ width:28px; height:28px; color:var(--yellow); flex:none; background:var(--ink); border-radius:8px; padding:5px; }
  .ovi h3{ font-size:17px; font-weight:500; line-height:1.2; margin-bottom:4px; }
  .ovi p{ font-size:14px; line-height:1.5; color:var(--ink-70); }

  /* Formación */
  .edu{ padding:24px 20px 64px; }
  .panel{ grid-template-columns:1fr; gap:12px; margin-top:8px; }
  .ecard, .ecard--studies, .ecard--certs, .ecard--stack{ grid-column:1 / -1; padding:18px; border-radius:16px; gap:16px; box-shadow:0 30px 40px -30px rgba(0,0,0,.3); }
  .ecard__head{ gap:10px; flex-wrap:wrap; }
  .ecard__icon{ width:38px; height:38px; border-radius:10px; }
  .ecard__title{ font-size:clamp(1.1rem, 5.3vw, 1.45rem); }
  .ecard__count{ padding:6px 12px; font-size:13px; }
  .ecard__note{ gap:6px; font-size:13px; }
  .ecard__note svg{ width:15px; height:15px; }
  .deg__row{ grid-template-columns:1fr auto; column-gap:10px; row-gap:6px; padding:14px 0; }
  .deg__years{ grid-column:1 / -1; font-size:13px; padding-top:0; }
  .deg__name{ font-size:16px; }
  .deg__inst{ font-size:13px; }
  .deg__level{ font-size:12px; padding:4px 10px; align-self:start; }
  .certs{ grid-template-columns:1fr; gap:10px; }
  .cert{ gap:8px; padding:14px; border-radius:12px; }
  .cert__top{ gap:8px; padding-bottom:8px; }
  .cert__issuer{ font-size:11px; }
  .cert__date{ font-size:13px; }
  .cert__name{ font-size:16px; }
  .cert__program{ font-size:13px; }
  .stack{ grid-template-columns:1fr; gap:18px; }
  .skrow{ grid-template-columns:1fr; gap:8px; padding:12px 0; }
  .skrow__label{ font-size:13px; padding-top:0; }
  .skrow__chips{ gap:6px; }
  .skrow__chips span{ font-size:13px; padding:8px 12px; }
  .langs{ gap:14px; padding:16px; border-radius:12px; }
  .langs__title{ font-size:12px; }
  .lng{ gap:8px; }
  .lng__row{ font-size:13px; }
  .lng__row b{ font-size:15px; }
  .lng__bar{ height:6px; }

  /* Cierre */
  .cta{ padding:64px 20px; }
  .cta__title{ font-size:clamp(2.24rem, 11.2vw, 5.37rem); margin-bottom:24px; max-width:none; }
  .cta__text{ max-width:none; }
  .cta__wrap{ gap:12px; margin-top:32px; }
  .cta__avatar{ width:44px; height:44px; margin-top:0; }
  .cta__bubble{ padding:12px 18px; border-radius:12px; margin-bottom:10px; }
  .cta__actions{ gap:8px; }

  /* Referencias */
  .clients{ padding:64px 20px 40px; }
  .refs{ margin-top:24px; }
  .refs .swiper-slide{ width:86vw; }
  .rcard{ padding:20px; gap:26px; border-radius:16px; }
  .rcard__h{ font-size:clamp(1.15rem, 5.3vw, 1.6rem); }
  .rcard__q{ width:30px; height:30px; border-radius:7px; }
  .rcard__who{ gap:12px; }
  .rcard__av{ width:44px; height:44px; font-size:13px; }
  .refs__nav{ gap:10px; margin-top:22px; }

  /* FAQ */
  .faq{ padding:48px 20px 72px; }
  .faq__ghost{ margin-bottom:40px; }
  .faq__grid{ grid-template-columns:1fr; gap:10px; margin-top:28px; }
  .acci{ border-radius:10px; }
  .acci__btn{ padding:14px 18px; gap:16px; }
  .acci__q{ font-size:clamp(.95rem, 4.5vw, 1.2rem); width:auto; }
  .acci__ico{ width:20px; height:20px; }
  .acci__ico::before, .acci__ico::after{ width:14px; }
  .acci__a{ padding:4px 18px 16px; font-size:14px; }

  .foot{ padding:24px 20px; flex-direction:column; align-items:flex-start; gap:12px; }
  .foot__left, .foot__right{ gap:14px; }

  .modal__box{ width:100%; padding:24px; border-radius:20px; }
  .modal__x{ top:12px; right:16px; }
  .modal__title{ margin-top:12px; }
  .modal__meta{ margin-top:6px; }
  .modal__body{ margin-top:16px; }

  .loader__mark{ padding:0 16px; }
}

/* Solo móvil: barra inferior y puntos del carril (ocultos en escritorio) */
.mbar, .hfoot{ display:none; }

/* ══════════════════════════════════════════════════ MÓVIL · REDISEÑO ══
   Portada cinematográfica (titular sobre la foto con degradado), rasgos
   como chips deslizables, cifras en dos fichas, trayectoria compacta con
   puntos en la línea, puntos de posición en proyectos, menú tipográfico a
   pantalla completa y barra inferior fija con las dos acciones clave. */
@media (max-width:1024px){
  .section{ padding:56px 20px; }

  /* Portada */
  .hero{ padding:4px 20px 26px; }
  .hero__wordmark{ margin:0; }
  .hero__photo{ margin:-12vw auto 0; }
  .hero__spot{ bottom:6%; width:120vw; }
  .hero__floor{ width:70vw; height:26px; bottom:-6px; }
  .hero__photo-inner{ width:min(88vw, 430px); }
  .hero__photo img{ max-height:66vh; }
  .hero__cluster{ position:relative; z-index:3; margin-top:-22vw; gap:16px; }
  .hero__center{ position:relative; gap:16px; padding-top:8vw; }
  .hero__center::before{
    content:""; position:absolute; left:-20px; right:-20px; top:-14vw; bottom:-12px; z-index:-1; pointer-events:none;
    background:linear-gradient(to bottom, rgba(220,217,208,0) 0%, rgba(220,217,208,.85) 34%, var(--bg) 58%);
  }
  .hero__title{ font-size:clamp(2.5rem, 12.4vw, 5.6rem); line-height:.94; letter-spacing:-.045em; }
  .hero__actions{ width:100%; gap:10px; }
  .hero__actions .btn{ flex:1 1 42%; justify-content:center; padding:15px 16px; font-size:16px; border-radius:14px; }
  .hero__stats{ width:100%; gap:10px; }
  .hstat, .hstat:nth-child(2){ flex:1; padding:14px 10px; align-items:center; border:var(--border-dk); }
  .hstat__big{ font-size:34px; }
  .hero__traits{
    justify-self:stretch; width:calc(100% + 40px); margin:0 -20px; padding:2px 20px 6px;
    background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0;
    display:flex; flex-direction:row; flex-wrap:nowrap; gap:8px; overflow-x:auto; scroll-snap-type:x proximity;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .hero__traits::-webkit-scrollbar{ display:none; }
  .trait{
    flex:none; scroll-snap-align:start; gap:8px;
    background:var(--card); border:var(--border-dk); border-radius:999px; padding:10px 14px 10px 12px;
    font-size:14px; font-weight:500; white-space:nowrap; color:var(--ink);
  }
  .trait svg{ color:var(--yellow); }
  .hero__kicker{ margin-top:14px; font-size:16px; font-weight:600; line-height:1.3; }
  .hero__intro{ font-size:15px; line-height:1.55; color:var(--ink-70); }

  /* Trayectoria: tarjetas compactas colgadas de la línea */
  .about{ padding-bottom:56px; }
  .tl__items{ gap:14px; margin-left:6px; padding-left:22px; border-left:2px solid rgba(0,0,0,.12); }
  .tlcard, .tlcard:nth-child(n){ position:relative; padding:18px 18px 16px; border-radius:14px; }
  .tlcard::before{
    display:block; content:""; position:absolute; left:-30px; top:28px; width:12px; height:12px; border-radius:50%;
    background:var(--yellow); box-shadow:0 0 0 4px var(--bg), 0 0 0 5px rgba(0,0,0,.14); transform:none; opacity:1;
  }
  .tlcard__head{ align-items:center; margin-bottom:4px; }
  .tlcard__year{ font-size:clamp(2.6rem, 13vw, 3.6rem); line-height:.9; margin:0; }
  .tlcard__title{ font-size:clamp(1.2rem, 5.6vw, 1.55rem); margin-bottom:6px; }
  .tlcard__text{ font-size:14px; line-height:1.5; }
  .tlcard__tags{ margin-top:10px; }
  .tlcard__foot{ margin-top:14px; }
  .tlcard__av{ width:38px; height:38px; font-size:11px; }
  .tlcard__av + .tlcard__av{ margin-left:-12px; }
  .tlcard__more{ padding:9px 14px; }

  /* Proyectos: puntos de posición y pista de deslizar */
  .hfoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 20px 0; }
  .hdots{ display:flex; gap:6px; }
  .hdots i{ display:block; width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,.25); transition:width .35s var(--ease), background .35s; }
  .hdots i.is-on{ width:22px; background:var(--yellow); }
  .hswipe{ font-size:12px; color:rgba(255,255,255,.55); transition:opacity .4s; }
  .hswipe.is-hidden{ opacity:0; }
  .work{ padding:56px 0 48px; }

  /* Menú: sábana a pantalla completa con enlaces grandes numerados */
  .rail, .rail.is-on{ width:100vw; border-right:0; padding:84px 20px 24px; display:flex; flex-direction:column; }
  .rail__id{ padding:0; background:none; border:0; box-shadow:none; margin-bottom:0; }
  .rail__idtop, .rail__bio, .rail__marquee{ display:none; }
  .rail__nav{ order:1; background:none; border:0; box-shadow:none; padding:0; gap:0; counter-reset:nav; margin-bottom:22px; }
  .navlink{
    display:flex; width:100%; height:auto; padding:15px 0; border-radius:0; border-bottom:1px solid rgba(0,0,0,.12); gap:16px; background:none;
    font-size:clamp(1.7rem, 8vw, 2.3rem); font-weight:600; letter-spacing:-.03em; line-height:1; counter-increment:nav;
    transform:translateY(14px); opacity:0; transition:transform .55s var(--ease), opacity .45s, color .3s;
  }
  body.is-menu .navlink{ transform:none; opacity:1; }
  body.is-menu .navlink:nth-child(1){ transition-delay:.08s } body.is-menu .navlink:nth-child(2){ transition-delay:.13s } body.is-menu .navlink:nth-child(3){ transition-delay:.18s }
  body.is-menu .navlink:nth-child(4){ transition-delay:.23s } body.is-menu .navlink:nth-child(5){ transition-delay:.28s } body.is-menu .navlink:nth-child(6){ transition-delay:.33s } body.is-menu .navlink:nth-child(7){ transition-delay:.38s }
  .navlink svg{ display:none; }
  .navlink::before{ content:counter(nav, decimal-leading-zero); font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--ink-50); min-width:26px; }
  .navlink:hover{ transform:none; background:none; }
  .navlink.is-active, .navlink.is-active:hover{ background:none; color:var(--yellow); }
  .navlink.is-active::before{ color:var(--yellow); }
  .rail__stats{ order:2; }
  .rail__mailwrap{ order:3; }
  .rail__cta{ order:4; margin-top:auto; }

  /* Barra inferior fija */
  .mbar{
    position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:150;
    display:flex; gap:8px; padding:8px; border-radius:18px;
    background:rgba(18,18,18,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
    transform:translateY(130%); opacity:0; transition:transform .5s var(--ease), opacity .4s;
  }
  .mbar.is-on{ transform:none; opacity:1; }
  body.is-locked .mbar, body.is-menu .mbar{ transform:translateY(130%); opacity:0; }
  .mbar__btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; height:46px; border-radius:12px; font-size:15px; font-weight:600; letter-spacing:-.01em; }
  .mbar__btn--work{ background:rgba(255,255,255,.1); color:var(--white); }
  .mbar__btn--talk{ background:var(--yellow); color:var(--ink); }
  .foot{ padding-bottom:calc(100px + env(safe-area-inset-bottom)); }

  /* Cierre y referencias */
  .cta__actions{ width:100%; }
  .cta__actions .btn{ flex:1 1 40%; justify-content:center; }
  .refs .swiper-slide{ width:84vw; }
  .faq__ghost{ font-size:26vw; margin-bottom:24px; }
}

@media (max-width:640px){
  .hero__stats{ flex-wrap:wrap; }
  .pcard{ width:82vw; }
}

/* ────────────────────────────────────────────── PREFERENCIAS / PRINT ── */
@media (prefers-reduced-motion:reduce){
  .pcard__glow::before, .pcard__glow::after, .pcard__glow i, .laptop__glare, .sound.is-on i{ animation:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__photo{ position:absolute; }
}

@media print{
  .loader,.cursor,.rail,.topbar,.hscroll__progress,.refs__nav,.refs__progress,.modal,.faq__ghost{ display:none !important; }
  body{ background:#fff; }
  .hero__photo{ display:none; }
  .section,.cta,.foot{ padding:24px !important; break-inside:avoid; }
  .section--dark{ background:#fff !important; color:#000 !important; }
  .hscroll{ padding-left:0; }
  .hscroll__track{ flex-wrap:wrap; width:auto; }
  .h2 .ln > span{ -webkit-text-fill-color:#000; background:none; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* Selector de idioma en la barra móvil */
@media (max-width: 1024px){
  .topbar__lang{ display:inline-flex; margin-right:12px; }
  .topbar__sound{ display:inline-flex; width:36px; height:36px; border-radius:10px; margin-left:auto; margin-right:10px; }
  .lang__opt{ font-size:12px; padding:6px 10px; }
}