/* ═══════════════════════════════════════════════════════════════════════════
   TFP MOTION — capa de motion design
   The Future Place CR · 2026
   ---------------------------------------------------------------------------
   1. Tokens de movimiento
   2. Hero VR (escenario sticky + canvas + copy)
   3. Visor CSS-3D (fallback)
   4. Sistema de reveals al scroll
   5. Micro-interacciones (magnético, tilt, brillo)
   6. Barra de progreso + secciones
   7. Accesibilidad y rendimiento
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. Tokens ─────────────────────────── */
:root{
  --mo-fast:.28s;
  --mo-base:.55s;
  --mo-slow:.9s;
  --mo-ease:cubic-bezier(.22,1,.36,1);
  --mo-ease-in:cubic-bezier(.55,0,.35,1);
  --mo-spring:cubic-bezier(.34,1.56,.64,1);
  --mo-cyan:#00f0ff;
  --mo-violet:#7c3aed;
  --mo-pink:#f0abfc;
  --hero-vh:100svh;
}

/* La barra del navegador móvil cambia de alto: svh evita el "salto". */
@supports not (height: 100svh){ :root{ --hero-vh:100vh; } }

/* ═══════════════════ 2. HERO VR ═══════════════════ */

.tfp-hero{
  position:relative;
  /* alto total del recorrido: cuanto más alto, más "cine" tiene el scroll */
  height:220vh;
  margin:0;
  padding:0;
  z-index:1;
  isolation:isolate;
}

.tfp-hero__sticky{
  position:sticky;
  top:0;
  height:var(--hero-vh);
  min-height:560px;
  width:100%;
  overflow:hidden;
  display:grid;
  place-items:center;
  align-content:start;
}

/* Lienzo WebGL del visor */
#tfp-vr-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
  pointer-events:none;
  /* aparece con un fundido suave cuando el shader arranca */
  animation:mo-canvas-in 1.4s var(--mo-ease) .15s both;
}
@keyframes mo-canvas-in{ from{opacity:0} to{opacity:1} }

/* Resplandor detrás del visor, sigue el progreso del scroll */
.tfp-hero__aura{
  position:absolute;
  left:50%; top:50%;
  width:min(150vmin,1400px); aspect-ratio:1;
  transform:translate3d(-50%,-50%,0) scale(calc(.62 + var(--hp,0) * .55));
  background:
    radial-gradient(circle at 50% 50%, rgba(0,240,255,.22) 0%, rgba(0,240,255,.07) 32%, transparent 62%),
    radial-gradient(circle at 62% 38%, rgba(124,58,237,.20) 0%, transparent 58%);
  filter:blur(48px);
  opacity:calc(.55 + var(--hp,0) * .45);
  z-index:0;
  pointer-events:none;
  will-change:transform,opacity;
}

/* Rejilla en perspectiva que se hunde con el scroll */
.tfp-hero__floor{
  position:absolute;
  left:-25%; right:-25%; bottom:-8%;
  height:62%;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(0,240,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.16) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(520px) rotateX(72deg) translateZ(calc(var(--hp,0) * -140px));
  transform-origin:50% 100%;
  mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 45%, transparent 85%);
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 45%, transparent 85%);
  opacity:calc(.75 - var(--hp,0) * .6);
  animation:mo-floor 14s linear infinite;
  will-change:transform,opacity;
}
@keyframes mo-floor{ to{ background-position:0 64px, 64px 0; } }

/* Bloque de texto: se aleja y desvanece a medida que entramos al visor */
.tfp-hero__copy{
  position:relative;
  z-index:3;
  width:min(1180px, 92vw);
  align-self:start;
  padding-top:calc(var(--nav-h, 72px) + 3.5vh);
  text-align:center;
  transform:translate3d(0, calc(var(--hp,0) * -70px), 0) scale(calc(1 - var(--hp,0) * .10));
  opacity:clamp(0, calc(1 - var(--hp,0) * 2.35), 1);
  will-change:transform,opacity;
  pointer-events:auto;
}
.tfp-hero__copy > *{ position:relative; z-index:1; pointer-events:auto; }
/* Velo superior: garantiza legibilidad del texto y deja el visor limpio abajo */
.tfp-hero__veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(6,6,18,.88) 0%,
    rgba(6,6,18,.70) 26%,
    rgba(6,6,18,.26) 44%,
    rgba(6,6,18,0) 60%);
  opacity:clamp(0, calc(1 - var(--hp,0) * 1.9), 1);
}

.tfp-hero__pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 18px;
  border-radius:999px;
  font-size:clamp(11px,1.5vw,13px);
  font-weight:600; letter-spacing:.06em;
  color:#cfefff;
  background:rgba(0,240,255,.07);
  border:1px solid rgba(0,240,255,.26);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 30px rgba(0,240,255,.14);
}
.tfp-hero__pill .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--mo-cyan);
  box-shadow:0 0 12px var(--mo-cyan);
  animation:mo-pulse 2.2s ease-in-out infinite;
}
@keyframes mo-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }

.tfp-hero__title{
  margin:20px auto 0;
  max-width:20ch;
  font-size:clamp(1.95rem, 5.4vw, 4.15rem);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:800;
  text-wrap:balance;
}
.tfp-hero__title .grad{
  background:linear-gradient(100deg,var(--mo-cyan) 0%,#9be7ff 28%,var(--mo-pink) 58%,var(--mo-violet) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:mo-grad 9s ease-in-out infinite;
}
@keyframes mo-grad{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.tfp-hero__sub{
  margin:18px auto 0;
  max-width:62ch;
  font-size:clamp(.98rem,2.1vw,1.24rem);
  line-height:1.6;
  color:var(--tm,#8b93b8);
  text-wrap:pretty;
}

.tfp-hero__cta{
  margin-top:26px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}

.mo-btn{
  --mo-btn-bg:linear-gradient(100deg,var(--mo-cyan),#4ad9ff 45%,var(--mo-violet));
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  border:0; border-radius:999px;
  font:inherit; font-size:.98rem; font-weight:700;
  color:#04121a;
  background:var(--mo-btn-bg);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 10px 34px rgba(0,240,255,.26), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform var(--mo-fast) var(--mo-spring), box-shadow var(--mo-fast) var(--mo-ease);
}
.mo-btn::after{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.65) 48%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .75s var(--mo-ease);
}
.mo-btn:hover::after,.mo-btn:focus-visible::after{ transform:translateX(130%); }
.mo-btn:hover{ box-shadow:0 16px 46px rgba(0,240,255,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.mo-btn:active{ transform:scale(.96); }

.mo-btn--ghost{
  color:#eaf8ff;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(0,240,255,.30);
  box-shadow:none;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.mo-btn--ghost::after{ background:linear-gradient(115deg,transparent 25%,rgba(0,240,255,.22) 48%,transparent 68%); }
.mo-btn--ghost:hover{ border-color:rgba(0,240,255,.65); box-shadow:0 0 32px rgba(0,240,255,.22); }

.tfp-hero__trust{
  margin-top:22px;
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center;
  font-size:.83rem; color:var(--tm,#8b93b8);
}
.tfp-hero__trust span{ display:inline-flex; align-items:center; gap:7px; }
.tfp-hero__trust span::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--mo-cyan); box-shadow:0 0 8px var(--mo-cyan);
}

/* HUD lateral: telemetría del visor, aparece con el scroll */
.tfp-hero__hud{
  position:absolute; z-index:3;
  left:max(20px, 3vw); bottom:max(22px, 4vh);
  display:grid; gap:8px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(190,240,255,.62);
  opacity:clamp(0, calc(var(--hp,0) * 2.6 - .35), 1);
  transform:translate3d(calc((1 - var(--hp,0)) * -26px),0,0);
  transition:none;
  pointer-events:none;
}
.tfp-hero__hud b{
  display:block; font-size:19px; letter-spacing:-.01em;
  text-transform:none; color:#eafcff; font-weight:700;
}
.tfp-hero__hud i{
  display:block; width:76px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--mo-cyan),var(--mo-violet));
  box-shadow:0 0 10px rgba(0,240,255,.6);
}

/* Indicador de scroll: desaparece en cuanto empiezas a bajar */
.tfp-hero__scroll{
  position:absolute; z-index:3;
  left:50%; bottom:max(18px,3.2vh);
  transform:translateX(-50%);
  display:grid; gap:9px; justify-items:center;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(190,240,255,.55);
  opacity:clamp(0, calc(1 - var(--hp,0) * 6), 1);
  pointer-events:none;
}
.tfp-hero__mouse{
  width:24px; height:38px; border-radius:14px;
  border:1.5px solid rgba(0,240,255,.45);
  position:relative;
}
.tfp-hero__mouse::after{
  content:''; position:absolute; left:50%; top:7px;
  width:3px; height:7px; border-radius:2px; margin-left:-1.5px;
  background:var(--mo-cyan); box-shadow:0 0 8px var(--mo-cyan);
  animation:mo-wheel 1.8s var(--mo-ease) infinite;
}
@keyframes mo-wheel{ 0%{opacity:0;transform:translateY(0)} 25%{opacity:1} 75%{opacity:0;transform:translateY(13px)} 100%{opacity:0} }

/* Destello de "entrada por la lente" al final del recorrido */
.tfp-hero__enter{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(190,250,255,.95) 0%, rgba(0,240,255,.55) 22%, rgba(124,58,237,.28) 46%, transparent 72%);
  opacity:clamp(0, calc((var(--hp,0) - .84) * 6.2), 1);
  mix-blend-mode:screen;
}

/* Degradado inferior: funde el hero con la sección siguiente */
.tfp-hero__fade{
  position:absolute; left:0; right:0; bottom:0; height:16%;
  z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg,#060612) 92%);
}

/* ═══════════════════ 2b. Panel de diagnóstico (sale del hero) ═══════════════════ */
.tfp-diag{
  position:relative; z-index:2;
  padding:clamp(56px,8vw,110px) 0;
  background:linear-gradient(180deg, var(--bg,#060612) 0%, var(--bg2,#0a0a1f) 100%);
}
.tfp-diag__wrap{
  width:min(1180px,92vw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px);
  align-items:center;
}
.tfp-diag__intro .v2tag{ margin-bottom:14px; }
.tfp-diag__title{
  font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.08;
  letter-spacing:-.025em; font-weight:800; margin-bottom:16px;
}
.tfp-diag__intro p{
  color:var(--tm,#8b93b8); line-height:1.65; max-width:46ch; margin-bottom:26px;
}
.tfp-diag__panel{
  position:relative;
  padding:clamp(22px,3vw,32px);
  border-radius:22px;
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid rgba(0,240,255,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
}
.tfp-diag__head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.tfp-diag__ic{
  flex:0 0 auto; width:44px; height:44px; border-radius:13px;
  display:grid; place-items:center;
  background:linear-gradient(140deg, rgba(0,240,255,.20), rgba(124,58,237,.20));
  border:1px solid rgba(0,240,255,.28);
}
.tfp-diag__ic .vi{ width:22px; height:22px; }
.tfp-diag__head h3{ font-size:1.06rem; font-weight:700; margin-bottom:3px; }
.tfp-diag__head p{ font-size:.85rem; color:var(--tm,#8b93b8); line-height:1.45; }
.tfp-diag__row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.88rem; margin-bottom:7px;
}
.tfp-diag__row b{ font-size:.72rem; letter-spacing:.09em; color:var(--mo-cyan); }
.tfp-diag__bar{
  height:6px; border-radius:6px; margin-bottom:16px;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.tfp-diag__bar i{
  display:block; height:100%; width:var(--w,50%); border-radius:6px;
  background:linear-gradient(90deg,var(--mo-cyan),var(--mo-violet));
  box-shadow:0 0 12px rgba(0,240,255,.45);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.1s var(--mo-ease);
  transition-delay:var(--mo-bd,0s);
}
.is-in .tfp-diag__bar i,
.tfp-diag__panel.is-in .tfp-diag__bar i{ transform:scaleX(1); }
.tfp-diag__note{
  margin-top:6px; font-size:.74rem; line-height:1.5;
  color:rgba(139,147,184,.8); border-top:1px solid rgba(255,255,255,.07); padding-top:12px;
}
@media (max-width:860px){
  .tfp-diag__wrap{ grid-template-columns:1fr; }
  .tfp-diag__intro .mo-btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .tfp-diag__bar i{ transform:scaleX(1); transition:none; }
}

/* ═══════════════════ 3. Visor de respaldo (SVG) ═══════════════════ */
.tfp-vr-css{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:9vh;
  pointer-events:none;
}
.tfp-vr-css__scene{
  width:min(46vw,470px);
  transform:translate3d(var(--fx,0px), var(--fy,0px), 0) scale(var(--fs,1));
  transform-origin:50% 100%;
  filter:drop-shadow(0 26px 54px rgba(0,0,0,.6)) drop-shadow(0 0 46px rgba(0,240,255,.22));
  will-change:transform;
}
.tfp-vr-svg{ width:100%; height:auto; display:block; }
.tfp-vr-svg__lens{ animation:mo-lens-pulse 3.6s ease-in-out infinite alternate; }
@keyframes mo-lens-pulse{ from{opacity:.70} to{opacity:1} }

@media (max-width:900px){
  .tfp-vr-css{ padding-bottom:14vh; }
  .tfp-vr-css__scene{ width:min(72vw,420px); }
}
@media (max-width:600px){
  .tfp-vr-css{ padding-bottom:16vh; }
  .tfp-vr-css__scene{ width:82vw; }
}
@media (prefers-reduced-motion: reduce){
  .tfp-vr-svg__lens{ animation:none; }
  .tfp-vr-css{ position:relative; padding:26px 0 0; }
  .tfp-vr-css__scene{ transform:none; }
}

/* ═══════════════════ 4. Reveals al scroll ═══════════════════ */
/* Cada variante funciona por sí sola: no hace falta combinarla con .mo-rv */
.mo-rv,.mo-rv-l,.mo-rv-r,.mo-rv-zoom,.mo-rv-3d,.mo-rv-blur{
  opacity:0;
  transition:opacity var(--mo-base) var(--mo-ease),
             transform var(--mo-base) var(--mo-ease),
             filter var(--mo-base) var(--mo-ease);
  transition-delay:var(--mo-d,0s);
  will-change:opacity,transform;
}
.mo-rv     { transform:translate3d(0,34px,0); }
.mo-rv-l   { transform:translate3d(-42px,0,0); }
.mo-rv-r   { transform:translate3d(42px,0,0); }
.mo-rv-zoom{ transform:scale(.9); }
.mo-rv-3d  { transform:perspective(1000px) rotateX(11deg) translate3d(0,44px,0); transform-origin:50% 100%; }
.mo-rv-blur{ transform:translate3d(0,20px,0); filter:blur(9px); }

.mo-rv.is-in,
.mo-rv-l.is-in,
.mo-rv-r.is-in,
.mo-rv-zoom.is-in,
.mo-rv-3d.is-in,
.mo-rv-blur.is-in{
  opacity:1;
  transform:none;
  filter:none;
}

/* Texto que entra palabra por palabra */
.mo-split .mo-w{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,.55em,0) rotate(2.4deg);
  transition:opacity .62s var(--mo-ease), transform .62s var(--mo-ease);
  transition-delay:var(--mo-wd,0s);
  will-change:opacity,transform;
}
.mo-split.is-in .mo-w{ opacity:1; transform:none; }

/* Línea que se dibuja bajo los títulos */
.mo-underline{ position:relative; display:inline-block; }
.mo-underline::after{
  content:''; position:absolute; left:0; bottom:-.12em;
  height:3px; width:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--mo-cyan),var(--mo-violet));
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--mo-ease) .12s;
}
.mo-underline.is-in::after{ transform:scaleX(1); }

/* ═══════════════════ 5. Micro-interacciones ═══════════════════ */

/* Botón magnético: el JS escribe --mox/--moy */
.mo-magnetic{
  transform:translate3d(var(--mox,0px), var(--moy,0px), 0);
  transition:transform .35s var(--mo-ease);
}
.mo-magnetic.is-pulling{ transition:transform .08s linear; }

/* Tarjeta con inclinación 3D y brillo que sigue al cursor */
.mo-tilt{
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--mo-rx,0deg)) rotateY(var(--mo-ry,0deg)) translateZ(0);
  transition:transform .5s var(--mo-ease), box-shadow .5s var(--mo-ease);
  will-change:transform;
}
.mo-tilt.is-tilting{ transition:transform .12s linear; }
.mo-tilt::before{
  content:''; position:absolute; inset:0; z-index:2;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mo-gx,50%) var(--mo-gy,50%), rgba(0,240,255,.16), transparent 62%);
  opacity:0; transition:opacity .35s var(--mo-ease);
}
.mo-tilt:hover::before{ opacity:1; }

/* Borde que se ilumina al pasar el cursor */
.mo-glowborder{ position:relative; }
.mo-glowborder::after{
  content:''; position:absolute; inset:-1px; z-index:-1;
  border-radius:inherit;
  background:conic-gradient(from var(--mo-a,0deg), transparent 0deg, var(--mo-cyan) 60deg, var(--mo-violet) 130deg, transparent 200deg);
  opacity:0; transition:opacity .4s var(--mo-ease);
  animation:mo-spin 4s linear infinite;
}
.mo-glowborder:hover::after{ opacity:.65; }
@property --mo-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes mo-spin{ to{ --mo-a:360deg; } }

/* Enlaces con subrayado que crece */
.mo-link{ position:relative; }
.mo-link::after{
  content:''; position:absolute; left:0; bottom:-3px; height:1.5px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--mo-ease);
}
.mo-link:hover::after{ transform:scaleX(1); transform-origin:left; }

/* Contador animado */
.mo-count{ font-variant-numeric:tabular-nums; }

/* ═══════════════════ 6. Progreso y secciones ═══════════════════ */

.mo-progress{
  position:fixed; left:0; top:0; z-index:9999;
  height:3px; width:100%;
  transform:scaleX(var(--mo-sp,0)); transform-origin:left;
  background:linear-gradient(90deg,var(--mo-cyan),var(--mo-pink) 50%,var(--mo-violet));
  box-shadow:0 0 14px rgba(0,240,255,.6);
  pointer-events:none;
}

/* Parallax genérico: el JS escribe --mo-py */
[data-mo-plx]{ transform:translate3d(0,var(--mo-py,0px),0); will-change:transform; }

/* Marquee que acelera con el scroll (el JS escribe --mo-mv) */
.mo-marquee{ overflow:hidden; }
.mo-marquee__track{ will-change:transform; }

/* Separador animado entre secciones */
.mo-divider{
  position:relative; height:1px; width:100%;
  background:linear-gradient(90deg,transparent,rgba(0,240,255,.32),transparent);
  overflow:visible;
}
.mo-divider::after{
  content:''; position:absolute; top:-1px; left:0;
  width:22%; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--mo-cyan),transparent);
  filter:blur(1px);
  animation:mo-sweep 5.5s var(--mo-ease) infinite;
}
@keyframes mo-sweep{ 0%{left:-25%;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{left:103%;opacity:0} }

/* Cursor luminoso (solo escritorio con puntero fino) */
.mo-cursor{
  position:fixed; z-index:9998; top:0; left:0;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%;
  border:1px solid rgba(0,240,255,.55);
  background:radial-gradient(circle, rgba(0,240,255,.22), transparent 68%);
  pointer-events:none;
  opacity:0;
  transform:translate3d(var(--mo-cx,0px),var(--mo-cy,0px),0) scale(var(--mo-cs,1));
  transition:opacity .3s var(--mo-ease), width .25s var(--mo-ease), height .25s var(--mo-ease);
  mix-blend-mode:screen;
}
.mo-cursor.is-on{ opacity:1; }
.mo-cursor.is-hot{ width:52px; height:52px; margin:-26px 0 0 -26px; border-color:rgba(0,240,255,.85); }

/* ═══════════════════ 7. Responsive ═══════════════════ */

@media (max-width:900px){
  .tfp-hero{ height:190vh; }
  .tfp-hero__copy{ padding-top:calc(var(--nav-h,72px) * .35); }
  .tfp-hero__title{ max-width:14ch; }
  .tfp-hero__hud{ left:16px; bottom:96px; font-size:10px; }
  .tfp-hero__hud b{ font-size:16px; }
  .tfp-hero__hud i{ width:56px; }
  .tfp-hero__floor{ height:52%; background-size:44px 44px; }
  .mo-btn{ padding:14px 24px; font-size:.92rem; }
}

@media (max-width:600px){
  .tfp-hero{ height:170vh; }
  .tfp-hero__sticky{ min-height:520px; }
  .tfp-hero__title{ font-size:clamp(1.75rem,7.4vw,2.25rem); max-width:15ch; margin-top:14px; }
  .tfp-hero__sub{ margin-top:14px; line-height:1.5; max-width:34ch; }
  .tfp-hero__cta{ margin-top:20px; gap:10px; flex-direction:column; align-items:stretch; padding:0 4vw; }
  .mo-btn{ padding:13px 22px; }
  .tfp-hero__trust{ margin-top:16px; flex-direction:column; gap:6px; }
  .mo-btn{ justify-content:center; width:100%; }
  .tfp-hero__trust{ gap:8px 14px; font-size:.76rem; }
  .tfp-hero__hud{ display:none; }
  .tfp-hero__sub{ font-size:.95rem; }
  /* En pantallas pequeñas el texto sube para no tapar el visor */
  .tfp-hero__copy{ align-self:start; padding-top:calc(var(--nav-h,72px) + 12px); }
  .tfp-vr-css__scene{ width:86vw; }
}

/* Pantallas muy bajas (móvil apaisado) */
@media (max-height:520px) and (orientation:landscape){
  .tfp-hero{ height:150vh; }
  .tfp-hero__title{ font-size:clamp(1.6rem,5vw,2.4rem); }
  .tfp-hero__sub,.tfp-hero__trust,.tfp-hero__scroll{ display:none; }
}

/* ═══════════════════ 8. Accesibilidad / ahorro ═══════════════════ */

@media (prefers-reduced-motion: reduce){
  /* Todo el sitio pasa a estático: sin recorrido de scroll, sin bucles. */
  .tfp-hero{ height:auto; }
  .tfp-hero__sticky{ position:relative; height:auto; min-height:0; padding:calc(var(--nav-h,72px) + 40px) 0 70px; }
  .tfp-hero__copy{ transform:none; opacity:1; }
  .tfp-hero__floor,.tfp-hero__enter,.tfp-hero__scroll{ display:none; }
  #tfp-vr-canvas{ animation:none; }
  .mo-rv,.mo-rv-l,.mo-rv-r,.mo-rv-zoom,.mo-rv-3d,.mo-rv-blur,.mo-split .mo-w{
    opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;
  }
  .mo-underline::after{ transform:scaleX(1); transition:none; }
  .mo-progress,.mo-cursor{ display:none; }
  .tfp-vr-svg__lens,.mo-divider::after,
  .tfp-hero__pill .dot,.tfp-hero__title .grad,.tfp-hero__mouse::after{ animation:none !important; }
  .mo-marquee__track{ transform:none !important; }
  *,*::before,*::after{ scroll-behavior:auto !important; }
}

/* Modo ligero del sitio: se apagan los efectos más caros */
html.tfp-lite .tfp-hero__floor{ animation:none; opacity:.28; }
html.tfp-lite .mo-glowborder::after{ display:none; }
html.tfp-lite .mo-cursor{ display:none; }
html.tfp-lite .tfp-hero__aura{ filter:blur(30px); }

/* Sin JS: el hero se ve completo igual */
html.no-js .tfp-hero{ height:auto; }
html.no-js .tfp-hero__sticky{ position:relative; height:auto; padding:120px 0 80px; }
html.no-js .mo-rv,html.no-js .mo-rv-l,html.no-js .mo-rv-r,
html.no-js .mo-rv-zoom,html.no-js .mo-rv-3d,html.no-js .mo-rv-blur{ opacity:1; transform:none; filter:none; }

/* Foco visible en todos los controles nuevos */
.mo-btn:focus-visible,.mo-link:focus-visible,.mo-tilt:focus-visible{
  outline:2px solid var(--mo-cyan);
  outline-offset:3px;
  border-radius:inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. COMPATIBILIDAD con el CSS heredado del sitio
   ---------------------------------------------------------------------------
   · Las reglas #hero del diseño anterior (padding, overflow:hidden, flex)
     ganaban por especificidad. Aquí se neutralizan con #hero.tfp-hero.
   · position:sticky deja de funcionar si un ancestro tiene overflow distinto
     de visible. Se cambia hidden por clip: recorta igual pero NO crea un
     contenedor de scroll, así el hero se queda pegado como debe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El CSS heredado usa `overflow-x:hidden !important`, que convierte a <body>
   en contenedor de scroll y anula position:sticky. `clip` recorta igual pero
   no crea contenedor de scroll, así que el hero se queda pegado. */
html, body { overflow-x: clip !important; }
.page { overflow-x: clip !important; }

#hero.tfp-hero{
  display:block !important;
  align-items:initial;
  justify-content:initial;
  flex-direction:initial;
  padding:0 !important;
  margin:calc(-1 * var(--nav-h, 72px)) 0 0 !important;
  min-height:0 !important;
  height:220vh;
  max-width:100%;
  overflow:visible !important;
  background:none;
}
#hero.tfp-hero .tfp-hero__sticky{
  position:sticky;
  top:0;
  height:var(--hero-vh);
  min-height:560px;
  width:100%;
  padding:0;
  margin:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  align-content:start;
}
#hero.tfp-hero .tfp-hero__copy{
  align-self:start;
  padding-top:calc(var(--nav-h, 72px) + 3.5vh);
}

@media (max-width:900px){
  #hero.tfp-hero{ height:190vh; }
}
@media (max-width:600px){
  #hero.tfp-hero{ height:170vh; }
  #hero.tfp-hero .tfp-hero__sticky{ min-height:520px; }
}
@media (max-height:520px) and (orientation:landscape){
  #hero.tfp-hero{ height:150vh; }
}

@media (prefers-reduced-motion: reduce){
  #hero.tfp-hero{ height:auto; }
  #hero.tfp-hero .tfp-hero__sticky{
    position:relative; height:auto; min-height:0;
    padding:calc(var(--nav-h,72px) + 40px) 0 70px;
  }
}

/* Navegadores sin overflow:clip (Safari < 16): el hero pasa a modo estático
   para no quedar atrapado dentro de un contenedor de scroll. */
@supports not (overflow: clip){
  html, body, .page{ overflow-x:hidden !important; }
  #hero.tfp-hero{ height:auto; }
  #hero.tfp-hero .tfp-hero__sticky{
    position:relative; height:auto; min-height:0;
    padding:calc(var(--nav-h,72px) + 40px) 0 70px;
  }
  #hero.tfp-hero .tfp-hero__copy{ transform:none; opacity:1; }
  .tfp-hero__enter, .tfp-hero__scroll{ display:none; }
  #tfp-vr-canvas{ position:relative; height:56vh; margin-top:24px; }
}

/* El canvas del visor va detrás de las capas de la página antigua */
#hero.tfp-hero #tfp-vr-canvas{ z-index:1; }

/* ═══════════════════════════════════════════════════════════════════════════
   10. CORRECCIONES DE LA REVISIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Regresión propia: `overflow-x:clip` en .page recortaba y descentraba los
      modales de posición fija (aplicar a un puesto, cookies). El hero pegajoso
      sólo necesita que html y body no creen contenedor de scroll. ── */
.page{ overflow-x:visible !important; }
html, body{ overflow-x:clip !important; }
@supports not (overflow: clip){
  html, body{ overflow-x:hidden !important; }
}

/* Los modales se cuelgan del viewport, nunca de un ancestro recortado */
#tfp-apply-overlay,
#tfp-admin-login,
#tfp-admin-img-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000;
}
#tfp-apply-overlay.active{ display:flex !important; align-items:center; justify-content:center; }
#tfp-apply-modal{ margin:0 auto; }

/* ── Estado del formulario de cotización ── */
.v2status{
  display:none;
  margin-top:12px;
  padding:11px 14px;
  border-radius:10px;
  font-size:.9rem;
  line-height:1.45;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#dbe6f5;
}
.v2status.show{ display:block; }
.v2status.ok{
  border-color:rgba(79,214,168,.45);
  background:rgba(79,214,168,.10);
  color:#9df3d2;
}
.v2status.err{
  border-color:rgba(255,122,118,.45);
  background:rgba(255,122,118,.10);
  color:#ffc4c2;
}

/* WhatsApp queda como segunda opción, no como el único camino */
.v2wa-alt{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:14px; padding:11px;
  border-radius:10px;
  font-size:.88rem; font-weight:600;
  color:#6ee7a8;
  border:1px solid rgba(110,231,168,.28);
  background:rgba(110,231,168,.06);
  cursor:pointer;
  transition:background .25s var(--mo-ease), border-color .25s var(--mo-ease);
}
.v2wa-alt:hover{ background:rgba(110,231,168,.13); border-color:rgba(110,231,168,.5); }
.v2wa-alt .vi{ width:17px; height:17px; }

/* ── Tarjetas de empleo: mismo acomodo en todas ── */
.job-body{
  display:grid !important;
  grid-template-columns:1fr auto;
  gap:18px 26px;
  align-items:center;
}
.job-body > div{ min-width:0; }
.job-body .btn-primary{ white-space:nowrap; justify-self:end; }
@media (max-width:820px){
  .job-body{ grid-template-columns:1fr; }
  .job-body .btn-primary{ justify-self:stretch; width:100%; text-align:center; }
}

/* ── Selector de idioma más compacto y menos ruidoso ── */
.lang-toggle{ display:inline-flex; gap:0; padding:3px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); }
.lang-toggle .lang-btn{
  border:0 !important; background:transparent !important; box-shadow:none !important;
  padding:6px 13px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.03em;
  color:rgba(200,216,236,.72); cursor:pointer;
  transition:color .2s var(--mo-ease), background .2s var(--mo-ease);
}
.lang-toggle .lang-btn:hover{ color:#eaf4ff; }
.lang-toggle .lang-btn.active{
  background:linear-gradient(100deg, rgba(0,229,255,.20), rgba(139,92,246,.24)) !important;
  color:#eafcff !important;
  box-shadow:inset 0 0 0 1px rgba(0,229,255,.35) !important;
}

/* ── Sección de plataformas: los tres dominios de la marca ── */
.tfp-plat{
  position:relative; z-index:2;
  padding:clamp(52px,7vw,96px) 0;
  background:linear-gradient(180deg, var(--bg2,#0a0a1f), var(--bg,#060612));
}
.tfp-plat__wrap{ width:min(1180px,92vw); margin:0 auto; text-align:center; }
.tfp-plat__title{
  font-size:clamp(1.6rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-.025em;
  font-weight:800; margin:12px auto 34px; max-width:20ch;
}
.tfp-plat__title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--mo-cyan),var(--mo-violet));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.tfp-plat__grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  text-align:left;
}
.tfp-plat__card{
  position:relative; overflow:hidden;
  padding:26px 24px 24px;
  border-radius:20px;
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 54px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:9px;
}
.tfp-plat__card.is-here{ border-color:rgba(0,229,255,.34); }
.tfp-plat__ic{ font-size:30px; line-height:1; }
.tfp-plat__dom{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px; letter-spacing:.05em;
  color:var(--mo-cyan); overflow-wrap:anywhere;
}
.tfp-plat__card h3{ font-size:1.12rem; font-weight:700; letter-spacing:-.01em; }
.tfp-plat__card p{ font-size:.92rem; line-height:1.6; color:var(--tm,#8b93b8); flex:1; }
.tfp-plat__link{
  display:inline-block; margin-top:6px;
  font-size:.9rem; font-weight:700; color:var(--mo-cyan);
  transition:transform .25s var(--mo-ease);
}
.tfp-plat__link:hover{ transform:translateX(4px); }
.tfp-plat__here{
  display:inline-block; margin-top:6px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(190,215,240,.6);
}
.dd-ic{ display:inline-block; width:34px; text-align:center; font-size:17px; }