/* ═══════════════════════════════════════════════
   SOMBRAS — landing
   Paleta: negro absoluto + luz de vela + hueso
   ═══════════════════════════════════════════════ */

:root{
  --black:#000000;
  --ink:#000000;
  --ink-2:#0a0a0a;
  --line:rgba(255,255,255,.15);
  --bone:#ffffff;
  --bone-dim:#bdbdbd;
  --mute:#7c7c7c;
  --lux:#ffffff;
  --lux-soft:#e9e9e9;
  --ff-d:"DM Serif Display",Georgia,"Times New Roman",serif;
  --ff-u:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ff-m:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ff-x:"Poppins",Helvetica,Arial,sans-serif;
  --pad:clamp(1.25rem,5vw,6rem);
  --hdr-h:5.4rem;
  --sec:clamp(3.5rem,8vh,6.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:7.75rem}
body{
  margin:0; background:var(--black); color:var(--bone-dim);
  font-family:var(--ff-u); font-size:clamp(1rem,.95rem + .25vw,1.1rem);
  font-weight:300; line-height:1.75; letter-spacing:.005em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; height:auto; display:block}
a{color:inherit}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}

/* ── accesibilidad ───────────────────────────── */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:999; transform:translateY(-160%);
  background:var(--bone); color:#000; padding:.7rem 1.1rem; border-radius:2px;
  font-size:.85rem; font-weight:500; text-decoration:none; transition:transform .25s var(--ease);
}
.skip:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--lux-soft); outline-offset:4px; border-radius:2px}

/* ── atmósfera ───────────────────────────────── */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; clip-path:inset(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transform:scale(1.18);
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:scale(1.18) translate(0,0)}
  20%{transform:scale(1.18) translate(-3%,2%)}
  40%{transform:scale(1.18) translate(2%,-3%)}
  60%{transform:scale(1.18) translate(-2%,-2%)}
  80%{transform:scale(1.18) translate(3%,1%)}
  100%{transform:scale(1.18) translate(0,0)}
}

/* ── entrada · la lámpara ─────────────────────────
   Pantalla en negro con la lámpara apagada. Al tirar de
   la cuerda se enciende, baja el cono de luz y dentro de
   él aparece el logotipo. Todo se mide desde la lámpara. */
.gate{
  --lw:clamp(150px,26vmin,270px);      /* ancho de la lámpara */
  --lh:calc(var(--lw) / 1.209);        /* su alto, según la foto */
  --ltop:14%;                          /* dónde cuelga */
  --boca:calc(var(--ltop) + var(--lh));/* la boca, de donde sale la luz */
  position:fixed; inset:0; z-index:200; background:#000; overflow:hidden;
}

.gate__cable{
  position:absolute; left:50%; top:0; width:2px;
  height:calc(var(--ltop) + 2px); transform:translateX(-50%);
  background:linear-gradient(#1e1e1e,#4a4a4a);
}
.gate__lampara{
  position:absolute; left:50%; top:var(--ltop); width:var(--lw); height:auto;
  transform:translateX(-50%); filter:brightness(.5);
  transition:filter 1.1s var(--ease);
}
.gate.on .gate__lampara{filter:brightness(1)}

/* el cono de luz: un triángulo que cae desde la boca */
.gate__cono{
  position:absolute; left:50%; top:calc(var(--boca) - 8px);
  width:min(760px,104vw); height:min(620px,58vh);
  transform:translateX(-50%); clip-path:polygon(50% 0,0 100%,100% 100%);
  background:linear-gradient(180deg,
    rgba(255,255,255,.5) 0%, rgba(255,255,255,.15) 42%, rgba(255,255,255,0) 100%);
  filter:blur(7px); opacity:0; transition:opacity 1.5s var(--ease);
}
/* el resplandor alrededor de la bombilla */
.gate__halo{
  position:absolute; left:50%; top:calc(var(--boca) - var(--lh) * .34);
  width:calc(var(--lw) * 2.4); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle closest-side,
    rgba(255,255,255,.5), rgba(255,255,255,.14) 38%, transparent 72%);
  opacity:0; transition:opacity 1.4s var(--ease);
}
/* el punto encendido, justo en la boca */
.gate__bombilla{
  position:absolute; left:50%; top:calc(var(--boca) - 10px);
  width:22px; height:22px; border-radius:50%; transform:translate(-50%,-50%);
  background:#fff; opacity:0; transition:opacity .5s var(--ease);
}
.gate.on .gate__cono{opacity:1}
.gate.on .gate__halo{opacity:1; animation:parpadeo 2.4s ease-in-out .3s}
.gate.on .gate__bombilla{opacity:1; box-shadow:0 0 34px 10px rgba(255,255,255,.7)}
@keyframes parpadeo{
  0%{opacity:0} 8%{opacity:1} 12%{opacity:.4}
  18%{opacity:1} 24%{opacity:.7} 30%{opacity:1} 100%{opacity:1}
}

/* la cuerda, colgando del borde de la pantalla */
.gate__tirador{
  position:absolute; top:calc(var(--boca) - var(--lh) * .12);
  left:calc(50% + var(--lw) * .34);
  background:none; border:0; padding:12px 18px; cursor:grab;
  display:flex; flex-direction:column; align-items:center;
  min-height:44px; touch-action:none;
}
.gate__tirador:active{cursor:grabbing}
.gate__cuerda{display:block; width:2px; height:var(--tira,76px); background:linear-gradient(#3f3f3f,#6a6a6a)}
.gate__pomo{
  display:block; width:13px; height:13px; border-radius:50%;
  background:#8a8a8a; box-shadow:0 0 0 1px rgba(0,0,0,.6);
  transition:background .3s,box-shadow .3s;
}
.gate__tirador{outline:none}
.gate__tirador:hover .gate__pomo,
.gate__tirador:focus-visible .gate__pomo{
  background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.28), 0 0 20px rgba(255,255,255,.75);
}
.gate.on .gate__tirador{opacity:0; transition:opacity .6s var(--ease); pointer-events:none}

.gate__pista{
  position:absolute; left:50%; top:calc(var(--boca) + 8vh);
  transform:translateX(-50%);
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:#6a6a6a;
  white-space:nowrap; animation:respiraPista 3.4s ease-in-out infinite;
}
@keyframes respiraPista{0%,100%{opacity:.45}50%{opacity:1}}
.gate.on .gate__pista{animation:none; opacity:0; transition:opacity .4s}

/* el logotipo, dentro del cono */
.gate__logo{
  position:absolute; left:50%; top:calc(var(--boca) + 13vh);
  width:min(520px,64vw); height:auto; transform:translateX(-50%) scale(.97);
  opacity:0; filter:blur(14px);
  transition:opacity 1.4s var(--ease) .45s, transform 1.6s var(--ease) .45s,
             filter 1.4s var(--ease) .45s;
}
.gate.on .gate__logo{opacity:1; transform:translateX(-50%); filter:none}

/* Al salir, primero se apagan lámpara y logotipo y solo después el fondo
   negro: si se desvanece todo a la vez se ven dos logotipos superpuestos. */
.gate.fuera .gate__lampara,.gate.fuera .gate__logo,
.gate.fuera .gate__cono,.gate.fuera .gate__halo,
.gate.fuera .gate__bombilla,.gate.fuera .gate__cable{
  opacity:0; transition:opacity .38s ease;
}
.gate.fuera{
  opacity:0; visibility:hidden;
  transition:opacity .55s ease .34s, visibility .55s .34s;
}

@media (max-width:820px){
  .gate{--lw:clamp(140px,34vmin,230px); --ltop:16%}
  .gate__logo{width:min(400px,76vw); top:calc(var(--boca) + 11vh)}
  .gate__pista{top:calc(var(--boca) + 7vh); font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){
  .gate__pista{animation:none}
  .gate.on .gate__halo{animation:none}
  .gate__logo{transition:opacity .3s; filter:none}
}

/* ── tipografía ──────────────────────────────── */
.h1{
  font-family:var(--ff-d); font-weight:400; color:#e4e4e4;
  font-size:clamp(2.3rem,6.8vw,5.6rem); line-height:1.06; letter-spacing:-.02em;
}
.h1 em{
  font-style:italic; color:#fff; text-shadow:0 0 30px rgba(255,255,255,.32);
}
.eyebrow{
  font-size:.7rem; font-weight:500; letter-spacing:.42em; text-transform:uppercase;
  color:var(--mute); margin-bottom:1.6rem;
}
/* ── botones ─────────────────────────────────── */
.btn{
  --bg:var(--bone); --fg:#000;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--bg); color:var(--fg); text-decoration:none;
  padding:1.05rem 2.4rem; border:1px solid var(--bg); border-radius:999px;
  font-size:.76rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  position:relative; overflow:hidden; transition:color .45s var(--ease),border-color .45s;
}
.btn::after{
  content:""; position:absolute; inset:0; background:#000; z-index:-1;
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn{isolation:isolate}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:#fff; border-color:#fff}
.btn--ghost{--bg:transparent; --fg:var(--bone); border-color:var(--line)}
.btn--ghost:hover{color:#000; border-color:#fff}
.btn--ghost::after{background:#fff}
.btn--sm{padding:.72rem 1.5rem; font-size:.66rem}
.btn--lg{padding:1.25rem 3.4rem}
/* ── header ──────────────────────────────────── */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:3.4rem var(--pad) 1.1rem; transition:background .5s var(--ease),padding .5s var(--ease),
    backdrop-filter .5s, border-color .5s; border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(0,0,0,.82); backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line); padding-top:.85rem; padding-bottom:.85rem;
}
/* el logotipo de la marca */
.hdr__brand{display:flex; align-items:center; min-height:44px}
.hdr__brand img{width:clamp(104px,11vw,148px)}
.hdr__nav{display:flex; align-items:center; gap:clamp(1.2rem,2.6vw,2.6rem)}
.hdr__nav a{
  text-decoration:none; color:var(--bone-dim); font-size:.72rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; transition:color .3s;
  display:inline-flex; align-items:center; min-height:40px;   /* zona de toque */
}
.hdr__nav a:not(.btn):hover{color:#fff}
.hdr__nav a.btn{color:var(--fg)}
.hdr__nav a.btn:hover{color:#fff}
.hdr__toggle{
  display:none; background:none; border:0; padding:.6rem; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
  width:44px; min-height:44px;   /* zona de toque cómoda */
}
.hdr__toggle span:not(.sr){display:block; height:1px; width:22px; background:var(--bone)}
@media (max-width:820px){
  .hdr__nav{display:none}
  .hdr__toggle{display:flex}
  .hdr__brand{opacity:1; transform:none}
}
.navm{
  position:fixed; inset:0; z-index:99; background:rgba(0,0,0,.97); backdrop-filter:blur(10px);
  display:grid; place-content:center; gap:1.6rem; text-align:center;
}
.navm[hidden]{display:none}
@media (min-width:821px){.navm{display:none}}
.navm a{
  font-family:var(--ff-d); font-size:2rem; color:var(--bone); text-decoration:none; font-weight:300;
}
.navm a:hover{color:var(--lux-soft)}

/* ── hero · índice bento ─────────────────────── */
.hero{
  position:relative; height:100svh; min-height:620px; padding:0; overflow:hidden;
  display:grid; grid-template-rows:1fr; isolation:isolate;
}
.bento{
  position:relative; z-index:1; display:grid; gap:8px; padding:calc(var(--hdr-h) + 8px) 8px 8px;
  grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(4,1fr); height:100%;
}
.bento__c{
  position:relative; overflow:hidden; border-radius:10px; text-decoration:none;
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.032);
  display:flex; align-items:flex-end; padding:1.1rem 1.2rem; isolation:isolate;
  transition:background .55s var(--ease),border-color .55s var(--ease);
}
.bento__c::before{
  content:""; position:absolute; inset:0; z-index:-1; background-image:var(--bg);
  background-size:cover; background-position:center; opacity:.62;
  transform:scale(1.04); filter:grayscale(1) brightness(.78);
  transition:opacity .7s var(--ease),transform 1.2s var(--ease);
}
.bento__c:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.32)}
.bento__c:hover::before{opacity:.72; transform:scale(1)}
/* cada panel con su propio encuadre: la misma foto no debe verse igual dos veces */
.bento__c--b::before{background-position:52% 24%}
.bento__c--e::before{background-position:46% 44%}
/* encuadre propio de cada panel: la misma foto no debe verse igual dos veces */
.bento__c--c::before{background-position:50% 42%}
.bento__c--d::before{background-position:50% 30%}
.bento__c--f::before{background-position:34% 40%}
.bento__lbl{
  font-family:var(--ff-m); font-size:.72rem; font-weight:400; letter-spacing:.02em;
  color:#b4b4b4; transition:color .4s,text-shadow .4s;
}
.bento__c:hover .bento__lbl{color:#fff; text-shadow:0 0 18px rgba(255,255,255,.45)}
.bento__c--a{grid-column:1/4;  grid-row:1/3; align-items:flex-start}
.bento__c--b{grid-column:4/13; grid-row:1/3; align-items:flex-start}
.bento__c--c{grid-column:1/4;  grid-row:3/5}
.bento__c--d{grid-column:4/10; grid-row:3/5}
.bento__c--e{grid-column:10/13;grid-row:3/4}
.bento__c--f{grid-column:10/13;grid-row:4/5}


/* ── el velo de luz ──────────────────────────────
   La sala está a oscuras y desenfocada. La luz
   —el cursor— abre un claro nítido allí donde toca. */
.lightveil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  --mx:50%; --my:46%; --r:245px;
  backdrop-filter:blur(9px) brightness(.5) saturate(.65);
  -webkit-backdrop-filter:blur(9px) brightness(.5) saturate(.65);
  background:rgba(0,0,0,.26);
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
    transparent 0%, transparent 38%, rgba(0,0,0,.78) 72%, #000 100%);
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
    transparent 0%, transparent 38%, rgba(0,0,0,.78) 72%, #000 100%);
  transition:opacity .8s var(--ease);
}
/* un halo cálido acompaña al claro */
.lightveil::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle calc(var(--r) * 1.25) at var(--mx) var(--my),
    rgba(255,255,255,.17), transparent 72%);
}
/* sin cursor (táctil) o con movimiento reducido, la sala se ve entera */
/* En táctil no hay cursor que mover, así que la luz se queda fija en el centro.
   Sin desenfoque: cada panel crea su propio contexto de apilado y las etiquetas
   no pueden subir por encima del velo, así que se mantienen legibles quitándolo. */
@media (pointer:coarse){
  /* mismo efecto que en escritorio; sin cursor, la luz se mueve sola
     y salta al dedo cuando se toca la pantalla */
  .lightveil{
    backdrop-filter:blur(7px) brightness(.62) saturate(.72);
    -webkit-backdrop-filter:blur(7px) brightness(.62) saturate(.72);
    background:rgba(0,0,0,.16);
  }
  .bento__lbl{text-shadow:0 1px 14px rgba(0,0,0,.95)}
  .bento__c::before{opacity:.78}
}
@media (prefers-reduced-motion:reduce){.lightveil{display:none}}

.hero__mark{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  display:grid; place-content:center; justify-items:center; gap:1.4rem; text-align:center;
  transform:translateY(-4%);
}
.hero__mark::before{
  content:""; position:absolute; inset:-12% -8%; z-index:-1;
  background:radial-gradient(ellipse 46% 42% at 50% 46%,rgba(0,0,0,.92),transparent 70%);
}
.hero__mark img{
  width:min(700px,72vw);
  filter:drop-shadow(0 0 90px rgba(0,0,0,.95)) drop-shadow(0 0 26px rgba(0,0,0,.85));
  animation:emerge 2.8s var(--ease) .2s both;
}
@keyframes emerge{
  from{opacity:0; filter:blur(26px)}
  to{opacity:1; filter:blur(0) drop-shadow(0 0 90px rgba(0,0,0,.95)) drop-shadow(0 0 26px rgba(0,0,0,.85))}
}
/* tres botones bajo el logotipo, cada uno a su reserva */
.hero__ciudades{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
  pointer-events:auto; animation:fadein 1.6s var(--ease) 1.6s both;
}
.hero__ciudad{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:.6rem 1.4rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--bone); text-decoration:none;
  font-family:var(--ff-m); font-weight:300; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.hero__ciudad:hover,.hero__ciudad:focus-visible{
  background:#fff; border-color:#fff; color:#000;
}
@media (max-width:820px){
  .hero__ciudades{gap:.45rem}
  .hero__ciudad{padding:.55rem 1rem; font-size:.66rem; letter-spacing:.14em}
}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ── el velo de luz ──────────────────────────────
   La sala está a oscuras y desenfocada. La luz
   —el cursor— abre un claro nítido allí donde toca. */
.lightveil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  --mx:50%; --my:46%; --r:245px;
  backdrop-filter:blur(9px) brightness(.5) saturate(.65);
  -webkit-backdrop-filter:blur(9px) brightness(.5) saturate(.65);
  background:rgba(0,0,0,.26);
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
    transparent 0%, transparent 38%, rgba(0,0,0,.78) 72%, #000 100%);
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
    transparent 0%, transparent 38%, rgba(0,0,0,.78) 72%, #000 100%);
  transition:opacity .8s var(--ease);
}
/* un halo acompaña al claro */
.lightveil::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle calc(var(--r) * 1.25) at var(--mx) var(--my),
    rgba(255,255,255,.17), transparent 72%);
}
/* sin cursor (táctil) o con movimiento reducido, la sala se ve entera */
/* En táctil no hay cursor que mover, así que la luz se queda fija en el centro.
   Sin desenfoque: cada panel crea su propio contexto de apilado y las etiquetas
   no pueden subir por encima del velo, así que se mantienen legibles quitándolo. */
@media (pointer:coarse){
  /* mismo efecto que en escritorio; sin cursor, la luz se mueve sola
     y salta al dedo cuando se toca la pantalla */
  .lightveil{
    backdrop-filter:blur(7px) brightness(.62) saturate(.72);
    -webkit-backdrop-filter:blur(7px) brightness(.62) saturate(.72);
    background:rgba(0,0,0,.16);
  }
  .bento__lbl{text-shadow:0 1px 14px rgba(0,0,0,.95)}
  .bento__c::before{opacity:.78}
}
@media (prefers-reduced-motion:reduce){.lightveil{display:none}}

@media (max-width:820px){
  /* el inicio se comporta igual que en escritorio: mosaico a pantalla
     completa con el logotipo encima, solo que reordenado en vertical */
  .hero{height:88svh; min-height:470px; max-height:720px}
  .bento{
    grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr);
    gap:6px; padding:calc(var(--hdr-h) + 6px) 6px 6px;
  }
  .bento__c--a{grid-column:1/4;  grid-row:1/3}
  .bento__c--b{grid-column:4/7;  grid-row:1/3}
  .bento__c--c{grid-column:1/3;  grid-row:3/5}
  .bento__c--d{grid-column:3/7;  grid-row:3/5}
  .bento__c--e{grid-column:1/4;  grid-row:5/7}
  .bento__c--f{grid-column:4/7;  grid-row:5/7}
  .bento__c{padding:.8rem .85rem; border-radius:8px}
  .bento__c--a,.bento__c--b{align-items:flex-start}
  .bento__lbl{font-size:.66rem}
  .hero__mark{position:absolute; padding:0; transform:translateY(-3%)}
  .hero__mark img{width:min(420px,76vw)}
}

/* ── marquesinas ─────────────────────────────── */
.marquee{overflow:hidden; border-block:1px solid var(--line); background:rgba(0,0,0,.6)}
.marquee--top{
  position:absolute; top:0; left:0; right:0; z-index:2; border-top:0;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
}
.marquee__track{
  display:flex; gap:2.5rem; align-items:center; white-space:nowrap; width:max-content;
  padding:.8rem 0; animation:slide 42s linear infinite;
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--bone-dim);
}
.marquee .dot{color:var(--lux)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee--big{border-color:var(--line); background:var(--ink)}
.marquee--big .marquee__track{
  font-family:var(--ff-d); font-style:italic; font-size:clamp(2rem,6vw,4.6rem);
  letter-spacing:0; text-transform:none; color:var(--bone); padding:1.4rem 0; gap:3.5rem;
  animation-duration:34s;
}
.marquee__track--rev{animation-direction:reverse}

/* ── citas ─────────────────────────────────── */
.quote{max-width:34ch; margin-inline:auto; text-align:center; display:grid; gap:1.5rem}
.quote--wide{max-width:52ch}
.quote blockquote p{
  font-family:var(--ff-d); font-style:italic; font-weight:300; color:var(--bone);
  font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.32;
}
.quote figcaption{font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:var(--mute)}


/* ═══════════════════════════════════════════════
   SISTEMA TÉCNICO — dossier
   ═══════════════════════════════════════════════ */
.mono{font-family:var(--ff-m); font-weight:300; letter-spacing:.01em}

/* ── bloque "sobre nosotros" (cifras) ────────── */
.orv{
  padding:var(--sec) var(--pad); display:grid; gap:clamp(1.6rem,3.2vw,2.6rem);
  justify-items:center; text-align:center; position:relative;
}
.orv__eye{
  font-size:.7rem; letter-spacing:.3em; text-transform:lowercase; color:var(--mute);
}
.orv__h{
  font-family:var(--ff-x); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.6rem,4.2vw,3.4rem); line-height:1.04; letter-spacing:-.035em;
  color:var(--bone); max-width:33ch; text-wrap:balance;
}
.orv__cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem); width:min(760px,100%); text-align:left; justify-self:end;
}
.orv__cols p{font-size:.78rem; line-height:1.75; color:var(--mute)}
@media (max-width:700px){.orv__cols{grid-template-columns:1fr; margin:0}}

/* tarjetas de cifra · las cuatro en una sola línea */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; width:100%; text-align:left}
.stat{
  position:relative; border:1px solid rgba(255,255,255,.14); border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  padding:1.1rem 1.2rem 1.3rem;
  min-height:clamp(132px,15vh,168px); display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .5s var(--ease),background .5s var(--ease);
}
.stat:hover{border-color:rgba(255,255,255,.45)}
.stat__lbl{font-size:clamp(.7rem,.82vw,.76rem); color:var(--bone-dim); letter-spacing:.01em; line-height:1.55}
.stat__n{
  font-family:var(--ff-x); font-weight:300;
  font-size:clamp(1.9rem,3.4vw,3.2rem); line-height:.9; letter-spacing:-.02em; color:var(--bone);
  margin-top:1.2rem;
}

/* foto del equipo y cita, en horizontal */
.orv__cierre{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.6rem,3.5vw,3rem); align-items:center; width:100%; margin-top:.6rem;
}
.orv__aparte{display:grid; gap:clamp(1.4rem,3vw,2.2rem); justify-items:center}
/* en su columna la cita cabe más ancha: 34ch la partía en cuatro líneas cortas */
.orv__aparte .quote{max-width:26ch}
.orv__aparte .quote blockquote p{font-size:clamp(1.3rem,2.2vw,1.9rem)}
.orv__shot{position:relative; overflow:hidden; border-radius:12px}
.orv__shot img{
  width:100%; height:clamp(280px,34vh,380px); object-fit:cover; object-position:50% 22%;
  filter:grayscale(1) contrast(1.04);
}
@media (max-width:900px){.orv__cierre{grid-template-columns:1fr}}
.orv__shot figcaption{
  position:absolute; left:1.2rem; bottom:1rem; font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim);
}
/* las cuatro cifras aguantan en línea; por debajo, carril horizontal
   antes que partirse en dos filas descompensadas */
@media (max-width:1080px){.stat__lbl{font-size:.62rem}}
@media (max-width:720px){
  .stats{
    grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(190px,1fr);
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.8rem;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent;
  }
  .stat{scroll-snap-align:start}
  .stats::-webkit-scrollbar{height:3px}
  .stats::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35)}
}

.orv__cta{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center}

/* ── bloque técnico con diagonales ───────────── */
.tech{position:relative; padding:var(--sec) var(--pad); overflow:clip; contain:paint; display:grid; gap:clamp(1.8rem,3.6vw,3rem)}
.tech__diag{
  position:absolute; left:0; width:100%; height:1px; background:var(--line);
  transform-origin:center; pointer-events:none;
}
.tech__diag--3{top:26%; transform:rotate(-11deg)}
.tech__diag--4{top:74%; transform:rotate(7deg)}
.tech__tag{font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--lux)}
.tech__h{
  font-family:var(--ff-x); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.1rem,2.5vw,2rem); line-height:1.24; letter-spacing:-.02em;
  color:var(--bone); max-width:38ch;
}
.tech__h .dim{color:rgba(255,255,255,.32)}
.tech__l{display:block}
.tech__h--wide{max-width:none}
.tech__sub{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--bone);
  border-top:1px solid var(--line); padding-top:1.6rem;
}

/* imagen "objeto" + copia */
.orb{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.orb__img{
  width:100%; border-radius:12px; filter:grayscale(1) contrast(1.3) brightness(1.05);
}
.orb__side{display:grid; gap:1.8rem}
.orb__side p{font-size:.78rem; line-height:1.8; color:var(--mute); max-width:46ch}
.orb__cta{display:flex; flex-wrap:wrap; gap:.7rem}
@media (max-width:820px){.orb{grid-template-columns:1fr}}

/* botón técnico */
.btn-t{
  display:inline-flex; align-items:center; justify-content:space-between; gap:2rem;
  min-width:210px; padding:.8rem 1rem; text-decoration:none;
  border:1px solid var(--line); border-radius:6px; color:var(--bone-dim);
  font-family:var(--ff-m); font-size:.7rem; letter-spacing:.06em;
  transition:border-color .4s,color .4s,background .4s;
}
.btn-t:hover{border-color:var(--lux-soft); color:var(--lux-soft); background:rgba(255,255,255,.06)}

/* ── experiencia ─────────────────────────────── */
/* la experiencia: el texto se despliega a lo ancho y la película va
   de lado a lado, rompiendo el margen de la sección */
.exp{
  position:relative; padding:var(--sec) var(--pad);
  display:grid; gap:clamp(2rem,4vw,3.4rem);
  background:radial-gradient(ellipse 62% 58% at 50% 26%,rgba(255,255,255,.07),transparent 64%);
}
.exp__body{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(2rem,5vw,5rem); row-gap:.6rem; align-items:end; max-width:none;
}
.exp .eyebrow{grid-column:1; grid-row:1; margin-bottom:.6rem}
.exp .h1{grid-column:1; grid-row:2; max-width:none}
.exp__lead{grid-column:2; grid-row:2; max-width:52ch; margin:0 0 .5rem}
.exp .film{margin-inline:calc(-1 * var(--pad)); width:auto; border-radius:0; border-inline:0}
.exp .film__v{aspect-ratio:21/9}
@media (max-width:940px){
  .exp__body{grid-template-columns:1fr; text-align:left}
  .exp .eyebrow,.exp .h1,.exp__lead{grid-column:1; grid-row:auto}
  .exp__lead{max-width:60ch; margin-top:.8rem}
  .exp .film__v{aspect-ratio:16/9}
}

/* reproductor */
.film{
  position:relative; width:100%; margin:0; overflow:hidden; border-radius:12px;
  border:1px solid var(--line); background:#000; isolation:isolate;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
}
.film__v{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#000}
.film__play{
  position:absolute; inset:0; display:grid; place-content:center; gap:1.1rem; justify-items:center;
  background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(0,0,0,.35),rgba(0,0,0,.82));
  border:0; cursor:pointer; color:var(--bone); font-family:var(--ff-u);
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  transition:opacity .5s var(--ease),background .5s var(--ease);
}
.film__play:hover{background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(0,0,0,.2),rgba(0,0,0,.7))}
.film__play[hidden]{display:none}
.film__ico{
  width:78px; height:78px; border:1px solid rgba(255,255,255,.6); border-radius:50%;
  display:grid; place-content:center; transition:transform .5s var(--ease),background .5s;
}
.film__ico::after{
  content:""; border-left:15px solid var(--lux-soft);
  border-block:9px solid transparent; margin-left:5px;
}
.film__play:hover .film__ico{transform:scale(1.08); background:rgba(255,255,255,.1)}
.film__cap{
  position:absolute; left:0; right:0; bottom:0; padding:.8rem 1.2rem; pointer-events:none;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mute);
  background:linear-gradient(transparent,rgba(0,0,0,.85)); text-align:left;
  transition:opacity .4s;
}
.film.is-playing .film__cap{opacity:0}
.exp__lead{
  font-family:var(--ff-u); font-weight:300; font-size:clamp(1rem,1.5vw,1.22rem);
  line-height:1.85; margin:1.6rem 0 0; max-width:46ch; color:var(--bone-dim);
}
.pct{
  font-family:var(--ff-d); color:var(--lux-soft); font-weight:400; font-style:italic;
  font-size:1.5em; letter-spacing:-.01em;
}

/* ── los cinco sentidos ──────────────────────── */
.sen{padding:var(--sec) 0 0; display:grid; gap:clamp(2rem,4vw,3.2rem)}

.sen__top{
  --h:clamp(1.85rem,7.2vw,6rem);
  position:relative; padding-inline:var(--pad); text-align:center; display:grid; justify-items:center;
}
.sen__h{
  font-family:var(--ff-x); font-weight:700; text-transform:uppercase;
  font-size:var(--h); line-height:.92; letter-spacing:-.045em;
  color:var(--bone); display:grid; margin-bottom:.85em;
}
/* el hueco queda exactamente centrado: la nota puede caer dentro */
.sen__l2{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center}
.sen__l2 > span:first-child{justify-self:end; white-space:nowrap}
.sen__l2 > span:last-child{justify-self:start; white-space:nowrap}
.sen__gap{display:block; width:clamp(150px,20vw,262px); height:1px}
.sen__note{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(var(--h) * .95); width:clamp(112px,14.4vw,196px); z-index:2;
  font-family:var(--ff-m); font-weight:300; font-size:clamp(.58rem,.8vw,.64rem); line-height:1.55;
  text-align:justify; hyphens:auto; color:var(--bone-dim);
}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72rem 2.1rem; border-radius:999px; background:var(--bone); color:#000;
  text-decoration:none; font-family:var(--ff-x); font-weight:500;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  transition:background .4s var(--ease),color .4s;
}
.pill:hover{background:#000; color:#fff; box-shadow:inset 0 0 0 1px #fff}

/* carrusel arrastrable */
.rail{position:relative; overflow-x:auto; scrollbar-width:none; cursor:grab; -webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{cursor:grabbing; scroll-behavior:auto}
.rail.is-drag .scard{pointer-events:none}
.rail__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(230px,20vw,290px);
  gap:10px; padding:0 var(--pad) .5rem; width:max-content;
}
.scard{
  position:relative; overflow:hidden; border-radius:12px; isolation:isolate;
  border:1px solid rgba(255,255,255,.1);
  min-height:clamp(330px,46vh,450px); display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.4rem; transition:border-color .5s var(--ease),transform .6s var(--ease);
}
/* el sentido asoma en la penumbra; el quinto (umami) no lleva imagen a propósito */
.scard::after{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--img,none);
  background-size:auto 138%; background-repeat:no-repeat;
  background-position:var(--ipos,50% 100%);
  filter:grayscale(1) contrast(1.14) brightness(.9);
  opacity:.9; transform:scale(1.02);
  transition:transform 1.4s var(--ease),opacity .8s var(--ease),filter .8s var(--ease);
}
.scard:hover::after{transform:scale(1.07); opacity:1; filter:grayscale(1) contrast(1.2) brightness(1.02)}
.scard--1{--ipos:50% 100%}   /* la oreja  */
.scard--2{--ipos:44% 100%}   /* la nariz  */
.scard--3{--ipos:34% 54%}    /* la mano en el haz */
.scard--4{--ipos:52% 16%}    /* la boca   */
/* el que no se puede ver: solo oscuridad y un rastro de luz */
.scard--5::after{
  background:radial-gradient(circle 42% at 50% 34%,rgba(255,255,255,.1),transparent 70%);
  opacity:1;
}

.scard::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 90% 55% at var(--bx,50%) var(--by,22%),
    rgba(255,255,255,.14),rgba(255,255,255,.02) 42%,transparent 72%),
    linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.93) 78%,#000 100%);
  transition:opacity .6s var(--ease);
}
.scard:hover{border-color:rgba(255,255,255,.42); transform:translateY(-4px)}
.scard--1{--bx:26%; --by:16%}
.scard--2{--bx:74%; --by:24%}
.scard--3{--bx:50%; --by:12%}
.scard--4{--bx:18%; --by:34%}
.scard--5{--bx:62%; --by:20%}
.scard__n{
  position:absolute; top:1.1rem; left:1.4rem; font-family:var(--ff-x); font-weight:700;
  font-size:clamp(2.6rem,4vw,3.6rem); line-height:1; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.4);
}
.scard__c{display:grid; gap:.7rem}
.scard__sense{font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--lux)}
.scard__c h3{
  font-family:var(--ff-d); font-weight:400; color:var(--bone);
  font-size:clamp(1.45rem,2.2vw,1.9rem); line-height:1.14; letter-spacing:-.01em;
}
.scard__p{font-family:var(--ff-m); font-weight:300; font-size:.68rem; line-height:1.72; color:var(--mute)}


/* ── movimiento y sonido en las tarjetas ─────── */
.scard::before{
  animation:respira 7s ease-in-out infinite;
}
.scard--1::before{animation-delay:0s}
.scard--2::before{animation-delay:-1.4s}
.scard--3::before{animation-delay:-2.8s}
.scard--4::before{animation-delay:-4.2s}
.scard--5::before{animation-delay:-5.6s}
@keyframes respira{
  0%,100%{opacity:.72; transform:scale(1)}
  50%{opacity:1; transform:scale(1.06)}
}
.scard__n{transition:color .6s var(--ease),transform .6s var(--ease)}
.scard:hover .scard__n{color:rgba(255,255,255,.16); transform:translateY(-4px)}
.scard__c{transition:transform .6s var(--ease)}
.scard:hover .scard__c{transform:translateY(-3px)}

/* mientras suena */
.scard.is-sound{border-color:rgba(255,255,255,.6)}
.scard.is-sound::before{animation:pulso 1.1s ease-in-out infinite}
@keyframes pulso{
  0%,100%{opacity:.8; transform:scale(1.02)}
  50%{opacity:1; transform:scale(1.16)}
}

/* botón escuchar */
.listen{
  margin-top:1.1rem; justify-self:start; display:inline-flex; align-items:center; gap:.7rem;
  min-height:42px; padding:.6rem 1.05rem .6rem .9rem; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04);
  color:var(--bone-dim); font-family:var(--ff-m); font-weight:300;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .4s,color .4s,background .4s;
}
.listen:hover{border-color:var(--lux-soft); color:var(--lux-soft); background:rgba(255,255,255,.08)}
.listen__t{white-space:nowrap}
.listen__eq{display:flex; align-items:center; gap:2px; height:14px}
.listen__eq i{
  display:block; width:2px; height:3px; border-radius:1px; background:currentColor;
  transform-origin:center; transition:height .3s var(--ease);
}
.scard.is-sound .listen{border-color:var(--lux-soft); color:var(--lux-soft)}
.scard.is-sound .listen__eq i{animation:eq .85s ease-in-out infinite}
.scard.is-sound .listen__eq i:nth-child(1){animation-delay:0s}
.scard.is-sound .listen__eq i:nth-child(2){animation-delay:.12s}
.scard.is-sound .listen__eq i:nth-child(3){animation-delay:.24s}
.scard.is-sound .listen__eq i:nth-child(4){animation-delay:.36s}
.scard.is-sound .listen__eq i:nth-child(5){animation-delay:.48s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}

@media (prefers-reduced-motion:reduce){
  .scard::before,.scard.is-sound::before,.scard.is-sound .listen__eq i{animation:none!important}
}

/* badge "drag" que sigue al cursor */
.drag{
  position:fixed; top:0; left:0; z-index:40; width:76px; height:76px; border-radius:50%;
  display:grid; place-content:center; pointer-events:none; opacity:0;
  margin:-38px 0 0 -38px; background:var(--bone); color:#000;
  font-family:var(--ff-m); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  transition:opacity .35s var(--ease),transform .35s var(--ease); transform:scale(.6);
}
.drag.on{opacity:1; transform:scale(1)}

/* ficha del menú */
@media (max-width:820px){
  /* sin hueco central: el titular fluye y la nota va debajo */
  .sen__h{display:block}
  .sen__l1,.sen__l2{display:block}
  .sen__l2{grid-template-columns:none}
  .sen__l2 > span{white-space:normal!important; justify-self:auto}
  .sen__gap{display:none}
  .sen__note{
    position:static; transform:none; width:min(340px,88vw);
    margin:1.4rem auto 1.8rem; font-size:.62rem; text-align:left;
  }
  .drag{display:none}
}

/* ── reservas ────────────────────────────────── */
.res{padding:var(--sec) var(--pad)}
.res__head{margin-bottom:clamp(1.6rem,3.2vw,2.6rem)}
/* de tres columnas se pasa directo a una: dos y una huérfana quedaba descompensado */
/* ── una sola tarjeta de reserva, con selector de ciudad ── */
.ticket{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,3.5rem);
  border:1px solid rgba(255,255,255,.14); border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  padding:clamp(1.5rem,3.5vw,2.6rem);
}
.ticket__info{display:grid; gap:1.1rem; align-content:start}
.ticket__tag{font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--lux)}
.ticket__desc{font-size:.76rem; line-height:1.8; color:var(--mute); max-width:44ch}
.ticket__meta{display:grid; gap:.9rem; margin-top:.4rem}
.ticket__meta div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem;
  border-bottom:1px solid var(--line); padding-bottom:.6rem;
}
.ticket__meta dt{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
.ticket__meta dd{font-family:var(--ff-d); font-size:1.1rem; color:var(--bone); text-align:right}

.ticket__sel{display:grid; gap:.7rem; align-content:start}
.ticket__ask{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--bone-dim);
  margin-bottom:.2rem;
}
.ciudades{display:grid; gap:.6rem}
.ciudad{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 1.15rem; border-radius:999px; text-decoration:none;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.03);
  color:var(--bone); transition:background .4s var(--ease),border-color .4s var(--ease),color .4s;
}
.ciudad__n{font-family:var(--ff-d); font-size:1.15rem; line-height:1}
.ciudad__x{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim)}
a.ciudad:hover{background:#fff; border-color:#fff; color:#000}
a.ciudad:hover .ciudad__x{color:#000}
.ticket__nota{font-size:.66rem; line-height:1.6; color:var(--mute); margin-top:.4rem}

@media (max-width:820px){
  .ticket{grid-template-columns:1fr; gap:1.4rem; padding:1.3rem}
  .ticket__desc{font-size:.7rem; max-width:none}
  .ticket__meta dd{font-size:1rem}
  .ciudad{padding:.85rem 1.05rem}
  .ciudad__n{font-size:1.05rem}
}

/* ── blinkedin ───────────────────────────────── */
.ben{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px}
@media (max-width:1150px){
  .ben{
    grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(216px,1fr);
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.8rem;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent;
  }
  .ben__i{scroll-snap-align:start}
  .ben::-webkit-scrollbar{height:3px}
  .ben::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35)}
}
.ben__i{
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:1.15rem 1.1rem 1.3rem;
  display:grid; gap:.8rem; align-content:start;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.008));
  transition:border-color .5s var(--ease);
}
.ben__i:hover{border-color:rgba(255,255,255,.4)}
.ben__n{font-size:.68rem; color:var(--lux); letter-spacing:.14em}
.ben__i h4{
  font-family:var(--ff-x); font-weight:600; text-transform:uppercase;
  color:var(--bone); font-size:.82rem; line-height:1.3; letter-spacing:.005em;
}
.ben__i p{font-size:.68rem; color:var(--mute); line-height:1.7}

/* ── cierre · una sola luz ───────────────────── */
.cierre{
  position:relative; isolation:isolate; overflow:clip; contain:paint;
  padding:clamp(4.5rem,11vh,7.5rem) var(--pad); text-align:center;
  display:grid; gap:1.8rem; justify-items:center;
  border-top:1px solid var(--line); background:#000;
}
.cierre__luz{
  position:absolute; left:50%; top:50%; z-index:-1;
  width:min(760px,110%); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle closest-side,
    rgba(255,255,255,.5) 0%, rgba(255,255,255,.3) 9%, rgba(255,255,255,.14) 26%,
    rgba(255,255,255,.045) 48%, transparent 72%);
  animation:latido 7s ease-in-out infinite;
}
@keyframes latido{
  0%,100%{opacity:.72; transform:translate(-50%,-50%) scale(.9)}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.06)}
}
.cierre__eye{font-size:.66rem; letter-spacing:.4em; text-transform:uppercase; color:var(--lux)}
.cierre__p{
  font-family:var(--ff-u); font-weight:300; font-size:clamp(.95rem,1.4vw,1.1rem);
  line-height:1.85; color:var(--bone-dim); max-width:40ch; margin-bottom:.8rem;
}
.cierre .btn{margin-top:.4rem}
@media (prefers-reduced-motion:reduce){.cierre__luz{animation:none}}

/* ── footer ──────────────────────────────────── */
.ft{
  padding:clamp(2.5rem,5vw,4rem) var(--pad) 2rem; background:var(--ink);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start;
}
.ft__brand img{width:168px; margin-bottom:1.4rem}
.ft__brand p{max-width:34ch; font-size:.9rem; color:var(--mute); line-height:1.7}
.ft__col h2{font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--bone); margin-bottom:1.4rem; font-weight:500}
.ft__col li{margin-bottom:.15rem}
.ft__col a{display:inline-block; padding-block:.5rem}
.ft__col a,.ft__col span{font-size:.92rem; color:var(--mute); text-decoration:none; transition:color .3s}
.ft__col a:hover{color:var(--lux-soft)}
.ft__col em{font-style:normal; opacity:.6}
.ft__legal{
  grid-column:1/-1; border-top:1px solid var(--line); padding-top:2rem; margin-top:1.5rem;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
}
@media (max-width:760px){.ft{grid-template-columns:1fr}}

/* ── reveal ──────────────────────────────────── */
.reveal{opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ── reduced motion ──────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
  .grain{display:none}
  .marquee__track{width:100%; overflow:hidden; text-overflow:ellipsis}
}

/* ── ajustes finos móvil ─────────────────────── */
@media (max-width:560px){
  .quote blockquote p{font-size:1.5rem}
  .marquee--big .marquee__track{padding:1.5rem 0; gap:2rem}
  .film__ico{width:62px; height:62px}
  .film__play{font-size:.62rem; letter-spacing:.2em; padding-inline:1.5rem; text-align:center}
}

/* ══════════════════════════════════════════════
   AJUSTES DE MÓVIL
   ══════════════════════════════════════════════ */
@media (max-width:820px){

  /* ── titulares y cuerpo, a escala de teléfono ── */
  .orv__h{font-size:clamp(1.35rem,6.4vw,2rem); line-height:1.12; max-width:100%}
  .orv__cols{gap:1.2rem}
  .orv__cols p{font-size:.7rem; line-height:1.65}
  .orv__eye{font-size:.6rem}
  .tech__h{font-size:clamp(.95rem,4.2vw,1.35rem); line-height:1.4}
  .tech__l{display:inline}
  .tech__l::after{content:" "}
  .h1{font-size:clamp(1.9rem,8.4vw,2.8rem)}
  .exp__lead{font-size:.95rem; line-height:1.7}
  .quote blockquote p{font-size:1.25rem; line-height:1.3}

  /* ── casillas de cifra: el rótulo chocaba con el número ── */
  .stat{min-height:auto; padding:1rem 1.1rem 1.2rem; gap:1.4rem}
  .stat__lbl{font-size:.6rem; line-height:1.5}
  .stat__n{font-size:2.2rem; margin-top:0}

  /* ── el equipo y la cita ── */
  .orv__cierre{gap:1.4rem}
  .orv__shot img{height:clamp(220px,32vh,280px)}
  .orv__aparte{gap:1.2rem}
  .orv__cta{width:100%; flex-direction:column; gap:.7rem}
  .orv__cta .btn{width:100%}

  /* ── la película: más grande y sin textos encimados ── */
  .exp{gap:1.6rem}
  .exp .film__v{aspect-ratio:4/5; object-fit:cover}
  .film__cap{font-size:.55rem; letter-spacing:.16em; padding:.6rem .9rem}
  .film__play{gap:.8rem}
  .film__ico{width:58px; height:58px}

  /* ── tarjetas de sentido: el número pisaba el rótulo ── */
  .scard{min-height:clamp(360px,52vh,440px); padding:1.2rem}
  .scard__n{position:static; font-size:2rem; margin-bottom:auto; display:block}
  .scard__c{gap:.55rem}
  .scard__sense{margin-bottom:0}
  .scard__c h3{font-size:1.35rem}
  .scard__p{font-size:.66rem; line-height:1.65}

  /* ── ciudades en carril horizontal ── */
  .res__head{margin-bottom:1.4rem}

  
/* ── una sola tarjeta de reserva, con selector de ciudad ── */
.ticket{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,3.5rem);
  border:1px solid rgba(255,255,255,.14); border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  padding:clamp(1.5rem,3.5vw,2.6rem);
}
.ticket__info{display:grid; gap:1.1rem; align-content:start}
.ticket__tag{font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--lux)}
.ticket__desc{font-size:.76rem; line-height:1.8; color:var(--mute); max-width:44ch}
.ticket__meta{display:grid; gap:.9rem; margin-top:.4rem}
.ticket__meta div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem;
  border-bottom:1px solid var(--line); padding-bottom:.6rem;
}
.ticket__meta dt{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
.ticket__meta dd{font-family:var(--ff-d); font-size:1.1rem; color:var(--bone); text-align:right}

.ticket__sel{display:grid; gap:.7rem; align-content:start}
.ticket__ask{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--bone-dim);
  margin-bottom:.2rem;
}
.ciudades{display:grid; gap:.6rem}
.ciudad{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 1.15rem; border-radius:999px; text-decoration:none;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.03);
  color:var(--bone); transition:background .4s var(--ease),border-color .4s var(--ease),color .4s;
}
.ciudad__n{font-family:var(--ff-d); font-size:1.15rem; line-height:1}
.ciudad__x{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim)}
a.ciudad:hover{background:#fff; border-color:#fff; color:#000}
a.ciudad:hover .ciudad__x{color:#000}
.ticket__nota{font-size:.66rem; line-height:1.6; color:var(--mute); margin-top:.4rem}

@media (max-width:820px){
  .ticket{grid-template-columns:1fr; gap:1.4rem; padding:1.3rem}
  .ticket__desc{font-size:.7rem; max-width:none}
  .ticket__meta dd{font-size:1rem}
  .ciudad{padding:.85rem 1.05rem}
  .ciudad__n{font-size:1.05rem}
}

/* ── blinkedin ── */
  .tech{gap:1.4rem}
  .orb{gap:1.4rem}
  .orb__img{width:min(230px,58vw); margin-inline:auto}
  .orb__side p{font-size:.72rem; line-height:1.7; max-width:none}
  .orb__cta{width:100%; gap:.6rem}
  .btn-t{width:100%; min-width:0}
  .tech__sub{font-size:.64rem; padding-top:1.2rem}
  .ben__i h4{font-size:.78rem}

  /* ── cierre y pie, más compactos ── */
  .cierre{padding-block:clamp(3rem,9vh,5rem); gap:1.2rem}
  .cierre__p{font-size:.88rem; line-height:1.7}
  /* pie compacto: la marca comparte fila con la navegación */
  .ft{
    padding:1.6rem var(--pad) 1.1rem; gap:1.2rem 1rem;
    grid-template-columns:1fr 1fr;
  }
  .ft__brand{grid-column:1/-1}
  .ft__brand img{width:112px; margin-bottom:0}
  .ft__brand p{display:none}
  .ft__col h2{font-size:.58rem; margin-bottom:.6rem}
  .ft__col li{margin-bottom:.35rem}
  .ft__col a,.ft__col span{font-size:.74rem}
  .ft__legal{padding-top:.9rem; margin-top:.2rem; font-size:.66rem}
  /* nada por debajo de ~10,5px: es una web sobre percepción, se lee todo */
  .ft__col a{padding-block:.7rem}
  .stat__lbl{font-size:.68rem}
  .sen__note{font-size:.68rem; line-height:1.7}
  .ciudad__x{font-size:.66rem}
  .ticket__ask{font-size:.66rem}
  .scard__sense{font-size:.66rem}
  .listen{font-size:.66rem}
  .pill{font-size:.66rem}
  .ft__col li{margin-bottom:.15rem}
  .ticket__nota{font-size:.66rem}
  .film__cap{font-size:.64rem}
  .film__play{font-size:.66rem}
  /* últimos rótulos por debajo del mínimo legible */
  .orv__shot figcaption{font-size:.66rem}
  .ticket__meta dt{font-size:.66rem}
  .tech__sub{font-size:.68rem}
  .ft__col h2{font-size:.66rem}
  .orv__eye{font-size:.66rem}
}

/* ═══════════════════════════════════════════════
   ATMÓSFERA — la luz nunca se queda quieta
   ═══════════════════════════════════════════════ */

/* el foco del hero respira, como una vela */
@property --r{syntax:"<length>"; inherits:false; initial-value:28vmin}
.lightveil{animation:respiraLuz 11s ease-in-out infinite}
@keyframes respiraLuz{
  0%,100%{--r:26vmin}
  50%{--r:31vmin}
}

/* haces que cruzan la sala de vez en cuando */
.haz{
  position:absolute; top:-40%; left:-30%; z-index:1; pointer-events:none;
  width:38%; height:190%; transform-origin:top center; opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 42%,rgba(255,255,255,.17) 50%,rgba(255,255,255,.09) 58%,transparent);
  filter:blur(10px);
}
.haz--1{animation:barrido 23s ease-in-out infinite}
.haz--2{animation:barrido 31s ease-in-out 11s infinite}
@keyframes barrido{
  0%     {opacity:0; transform:translateX(0) rotate(14deg)}
  8%     {opacity:.55}
  38%    {opacity:.4}
  50%    {opacity:0; transform:translateX(230%) rotate(14deg)}
  100%   {opacity:0; transform:translateX(230%) rotate(14deg)}
}

/* polvo suspendido: solo se ve cuando la luz lo atraviesa */
.polvo{position:absolute; inset:0; z-index:1; pointer-events:none}
.polvo i{
  position:absolute; left:var(--x); top:var(--y);
  width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.9);
  box-shadow:0 0 7px rgba(255,255,255,.55); filter:blur(.4px); opacity:0;
  animation:flota var(--t) linear var(--d) infinite;
}
@keyframes flota{
  0%  {transform:translate3d(0,0,0) scale(.6); opacity:0}
  12% {opacity:.65}
  50% {transform:translate3d(26px,-52px,0) scale(1); opacity:.95}
  88% {opacity:.45}
  100%{transform:translate3d(58px,-118px,0) scale(.5); opacity:0}
}

/* un resplandor cálido y lento detrás de las secciones oscuras */
.orv,.sen,.tech,.res{position:relative; isolation:isolate; overflow:clip; contain:paint}
.orv::before,.sen::before,.tech::before,.res::before{
  content:""; position:absolute; inset:-10% -20%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 36% 42% at 50% 50%,rgba(255,255,255,.045),transparent 70%);
  animation:deriva 26s ease-in-out infinite alternate;
}
.sen::before{animation-duration:34s; animation-direction:alternate-reverse}
.tech::before{animation-duration:29s; animation-delay:-8s}
.res::before{animation-duration:38s; animation-delay:-15s}
@keyframes deriva{
  0%  {transform:translate3d(-16%,-8%,0) scale(.9)}
  50% {transform:translate3d(10%,6%,0) scale(1.12)}
  100%{transform:translate3d(18%,-4%,0) scale(.96)}
}

/* el resplandor que acompaña al cursor fuera del hero */
.resplandor{
  position:fixed; top:0; left:0; z-index:1; pointer-events:none;
  width:46vmin; height:46vmin; margin:-23vmin 0 0 -23vmin; opacity:0;
  background:radial-gradient(circle closest-side,rgba(255,255,255,.075),rgba(255,255,255,.02) 42%,transparent 70%);
  mix-blend-mode:screen; transition:opacity 1s var(--ease);
}
body.resplandor-on .resplandor{opacity:1}

/* los titulares emergen de la oscuridad con un destello */
.h1.reveal.in,.orv__h.reveal.in,.tech__h.reveal.in,.sen__h{
  animation:asoma 1.8s var(--ease) both;
}
@keyframes asoma{
  0%  {text-shadow:0 0 0 rgba(255,255,255,0)}
  40% {text-shadow:0 0 34px rgba(255,255,255,.42)}
  100%{text-shadow:0 0 0 rgba(255,255,255,0)}
}

@media (prefers-reduced-motion:reduce){
  .lightveil,.haz,.polvo,.resplandor{animation:none!important}
  .haz,.polvo,.resplandor{display:none}
  .orv::before,.sen::before,.tech::before,.res::before{animation:none}
  .h1.reveal.in,.orv__h.reveal.in,.tech__h.reveal.in,.sen__h{animation:none}
}
@media (pointer:coarse){
  .haz{display:none}          /* menos capas en móvil: batería y fluidez */
  .resplandor{display:none}
}

/* ── citas y cierre, en dos líneas ────────────────
   Medido: la cita entra en dos líneas a 1,9vw sobre el ancho útil,
   y el cierre necesita 6vw para que la segunda línea no se parta. */
.cierre .h1{font-size:clamp(1.5rem,6vw,5.2rem)}
@media (min-width:900px){
  .quote--wide{max-width:none}
  .quote--wide blockquote p{font-size:clamp(1rem,1.9vw,1.75rem); line-height:1.4}
}

/* ── iPhone: el logo salía como un rectángulo blanco (Jairo 15-sep) ──
   WebKit en iOS pierde la transparencia de una imagen grande cuando lleva
   filter animado (blur) o drop-shadow de radio grande, y pinta la imagen
   entera; el logo es blanco, así que se veía un cuadro blanco. En pantallas
   táctiles o angostas el logo va SIN filtros: el ::before de .hero__mark ya
   le pone el halo oscuro detrás, y la entrada se hace solo con opacidad y
   escala. */
@media (hover:none), (pointer:coarse), (max-width:820px){
  .hero__mark img{ filter:none !important; animation:emergeSinFiltro 2.2s var(--ease) .2s both !important; }
  .gate__logo{ filter:none !important; transition:opacity 1.4s var(--ease) .45s, transform 1.6s var(--ease) .45s !important; }
  .gate.on .gate__logo{ filter:none !important; }
}
@keyframes emergeSinFiltro{ from{ opacity:0; transform:scale(.96) } to{ opacity:1; transform:none } }