@font-face{font-family:'Saira Semi Condensed';font-weight:500;font-display:swap;src:url(fonts/saira-500.woff2) format('woff2')}
@font-face{font-family:'Saira Semi Condensed';font-weight:600;font-display:swap;src:url(fonts/saira-600.woff2) format('woff2')}
@font-face{font-family:'Saira Semi Condensed';font-weight:700;font-display:swap;src:url(fonts/saira-700.woff2) format('woff2')}
@font-face{font-family:'Anton';font-weight:400;font-display:swap;src:url(fonts/anton-400.woff2) format('woff2')}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --negro:#0A0A0B; --carbon:#161617; --grafito:#312F30; --linea:#3d3b3c;
  --naranja:#FC6701; --fuego:#FF7A0F; --brasa:#E85500;
  --blanco:#FCFCFC; --gris:#A6A3A4;
  --g-fuego:linear-gradient(135deg,#FFB04D 0%,#FF7A0F 28%,#FC6701 52%,#D14500 100%);
  --g-soul:linear-gradient(180deg,#FF8420 0%,#FC6701 48%,#D54A00 100%);
  --g-brasa:radial-gradient(60% 70% at 50% 100%,rgba(252,103,1,.5),rgba(252,103,1,0) 70%);
  /* Acero inoxidable mate de veta fina: la misma receta de Veintidue, con dos reflejos suaves de luz */
  --acero-grano:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='b' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.0035 0.9' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .22  0 0 0 0 .25  0 0 0 .55 -.1'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
  --acero:linear-gradient(105deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.38) 30%,rgba(255,255,255,0) 42%,rgba(255,255,255,.26) 64%,rgba(255,255,255,0) 76%),var(--acero-grano),linear-gradient(180deg,#9ea4ab 0%,#80878f 50%,#9aa0a7 100%);
  --f-display:'Anton','Bebas Neue',Impact,sans-serif;
  --f-body:'Saira Semi Condensed','Arial Narrow',system-ui,sans-serif;
  --piedra:url(img/piedra.webp);
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{background:var(--negro);color:var(--blanco);font:500 17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--fuego);outline-offset:3px}
.disp{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.9}
.hl{background:linear-gradient(135deg,rgba(255,176,77,.9) 0%,rgba(255,122,15,.88) 28%,rgba(252,103,1,.88) 52%,rgba(209,69,0,.92) 100%) 0 0/100% 100%,var(--piedra) 0 0/1.5em auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(252,103,1,.35))}
.steel{background:var(--piedra) 0 0/1.5em auto;-webkit-background-clip:text;background-clip:text;color:transparent}
/* titulos: letras Anton con la misma textura de piedra de Ken Dojo */
.lg big,.sec h2,.sec .h,.dor .fx,.hor .num,.hor .fila b,.pil h3,dialog h3{background:var(--piedra) 0 0/1.5em auto;-webkit-background-clip:text;background-clip:text;color:transparent}
.lg big,.hor .num,.pil h3{filter:drop-shadow(0 3px 0 rgba(0,0,0,.9)) drop-shadow(0 16px 22px rgba(0,0,0,.7))}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gut)}

/* botones con vida */
.btn{--mx:50%;--my:50%;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;font:700 15px/1 var(--f-body);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;border-radius:999px;padding:8px 24px 8px 8px;color:#190800;transition:transform .25s var(--ease),box-shadow .25s}
.btn:active{transform:scale(.97)}
.btn .chip{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#120700;color:var(--fuego);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 4px 10px rgba(0,0,0,.4);transition:transform .35s var(--ease)}
.btn .chip svg{width:19px;height:19px}
.btn:hover .chip{transform:rotate(-12deg) scale(1.08)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120px circle at var(--mx) var(--my),rgba(255,255,255,.42),rgba(255,255,255,0) 62%);opacity:0;transition:opacity .25s}
.btn:hover::after{opacity:1}
.btn-1{background:var(--g-soul);box-shadow:inset 0 1px 0 rgba(255,235,210,.7),inset 0 -2px 0 rgba(120,35,0,.5),0 10px 34px -8px rgba(252,103,1,.75),0 0 0 1px rgba(255,170,90,.45);animation:pulso 2.8s ease-in-out infinite}
.btn-1::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);transform:translateX(-130%);animation:brillo 3.4s ease-in-out infinite}
.btn-1:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,235,210,.8),inset 0 -2px 0 rgba(120,35,0,.5),0 16px 48px -6px rgba(252,103,1,.95),0 0 0 1px rgba(255,190,120,.7)}
.btn-2{color:var(--blanco);border:1.5px solid transparent;background:linear-gradient(#0d0c0d,#0d0c0d) padding-box,conic-gradient(from var(--ang),#FC6701,#FFB04D,#3d3b3c 40%,#FC6701 70%,#FFB04D) border-box;animation:giro 4s linear infinite;box-shadow:0 0 30px -10px rgba(252,103,1,.55)}
.btn-2 .chip{background:var(--g-fuego);color:#190800}
.btn-2:hover{transform:translateY(-3px);box-shadow:0 0 44px -6px rgba(252,103,1,.85)}
.btn-3{background:var(--acero);background-size:100% 100%,400px 400px,100% 100%;color:#101012;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.35),0 8px 24px -10px rgba(0,0,0,.9);border-radius:12px;padding:8px 22px 8px 8px}
.btn-3 .chip{background:#1b1b1d;color:#EDEDEF;border-radius:8px}
.btn-3:hover{transform:translateY(-3px);filter:brightness(1.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(0,0,0,.35),0 12px 34px -8px rgba(252,103,1,.7)}
.btn.sm{font-size:12px;padding:6px 18px 6px 6px}.btn.sm .chip{width:32px;height:32px}.btn.sm .chip svg{width:15px;height:15px}
@keyframes brillo{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes pulso{0%,100%{box-shadow:inset 0 1px 0 rgba(255,235,210,.7),inset 0 -2px 0 rgba(120,35,0,.5),0 10px 34px -8px rgba(252,103,1,.7),0 0 0 1px rgba(255,170,90,.45)}50%{box-shadow:inset 0 1px 0 rgba(255,235,210,.7),inset 0 -2px 0 rgba(120,35,0,.5),0 12px 54px -4px rgba(252,103,1,1),0 0 0 1px rgba(255,170,90,.6)}}
@keyframes giro{to{--ang:360deg}}
@keyframes flecha{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(8px);opacity:1}}

/* barra superior */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px var(--gut);background:linear-gradient(#0A0A0BCC,#0A0A0B00);pointer-events:none}
.top>*{pointer-events:auto}
.top img{height:44px;width:auto}

/* hero pegado con scroll */
.story{position:relative;height:860vh}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--negro)}
#cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.pin::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,0) 22%,rgba(10,10,11,0) 55%,rgba(10,10,11,.88) 100%)}
.pin::after{content:"";position:absolute;inset:auto 0 0 0;height:16%;z-index:1;background:linear-gradient(rgba(10,10,11,0),var(--negro))}
.velo{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(115deg,rgba(255,150,40,.6),rgba(252,103,1,.16) 46%,rgba(209,69,0,.55))}
.velo::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;--sx:-20%;background:linear-gradient(105deg,transparent calc(var(--sx) - 16%),rgba(255,196,120,.20) var(--sx),transparent calc(var(--sx) + 16%))}
.lg{position:absolute;z-index:2;opacity:0;will-change:transform,opacity,filter;pointer-events:none}
.lg big{display:block;font:400 clamp(40px,6.4vw,104px)/.88 var(--f-display);text-transform:uppercase}
.lg small{display:block;margin-top:12px;font:600 clamp(16px,1.5vw,22px)/1.3 var(--f-body);color:#ece8e2}
.lg-a{left:var(--gut);right:var(--gut);bottom:14vh}
.lg-a big{font-size:clamp(52px,10.4vw,176px)}
.lg-a small{font-size:clamp(16px,1.7vw,24px)}
.lg-l,.lg-r{top:50%;margin-top:-1.2em;max-width:24vw}
.lg-l big,.lg-r big{font-size:clamp(40px,4.4vw,76px)}
.lg-l{left:var(--gut)}
.lg-r{right:var(--gut);text-align:right}
.lg-d{left:0;right:0;bottom:9vh;text-align:center}
.lg-d big{font-size:clamp(46px,8.2vw,136px)}
.cue{display:block;width:26px;height:26px;margin:18px auto 0;color:var(--fuego);animation:flecha 1.8s ease-in-out infinite}

/* secciones */
.sec{position:relative;padding:clamp(96px,16vh,200px) 0}
.sec h2,.sec .h{font:400 clamp(44px,8vw,132px)/.88 var(--f-display);text-transform:uppercase}
.lead{max-width:40ch;color:#e6e2dc;font:600 clamp(19px,1.9vw,27px)/1.35 var(--f-body);margin-top:22px}
.loop{display:flex;align-items:center;gap:16px;margin-top:clamp(48px,8vh,96px);font:400 clamp(32px,4.6vw,72px)/1 var(--f-display);text-transform:uppercase;color:var(--blanco);letter-spacing:.01em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.loop svg{width:clamp(34px,4vw,56px);height:clamp(34px,4vw,56px);color:var(--fuego);flex:none;animation:flecha 1.8s ease-in-out infinite}
.glow{position:absolute;inset:auto 0 0 0;height:60%;background:var(--g-brasa);pointer-events:none;opacity:.7}
.fx{will-change:filter,opacity}

/* dolor */
.dor .fx{font:400 clamp(40px,7.4vw,118px)/.9 var(--f-display);text-transform:uppercase;margin-bottom:clamp(120px,34vh,420px);max-width:16ch}
.dor .glow{display:none}

/* estructura */
.est{padding:0;position:relative}
.est .bloque{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.est .bloque>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.est .bloque::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--negro) 0%,rgba(10,10,11,0) 24%,rgba(10,10,11,0) 70%,var(--negro) 100%),linear-gradient(90deg,rgba(10,10,11,.85),rgba(10,10,11,0) 65%)}
.est .bloque>.wrap{position:relative;z-index:2;width:100%}
.est .num{font:400 clamp(120px,22vw,340px)/.8 var(--f-display);opacity:.9}
.est .bloque-2>img{opacity:.62;object-position:50% 58%}

/* horarios */
.hor{text-align:left}
.pinh>.wrap{width:100%}
.hor .grande{display:flex;flex-wrap:nowrap;gap:0 clamp(10px,3vw,48px);align-items:flex-end;max-width:100%}
.hor .num{font:400 clamp(64px,12.4vw,210px)/1.34 var(--f-display);text-transform:uppercase;padding:.1em .1em .1em 0;white-space:nowrap}
.hor .sep{font:400 clamp(40px,6vw,110px)/1 var(--f-display);color:var(--naranja);padding-bottom:.12em}
.hor .filas{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:clamp(28px,5vh,60px);max-width:760px}
.hor .fila b{display:block;font:400 clamp(28px,3.2vw,46px)/1 var(--f-display);text-transform:uppercase}
.hor .fila span{color:#e6e2dc;font-weight:600;font-size:clamp(18px,1.7vw,24px)}

.est .bloque-2 .wrap{margin-top:30vh}
/* app + iPhone: el video corre solo, flota, y el boton queda debajo */
.app{padding:0}
.pinapp{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--negro);padding:clamp(60px,9vh,110px) 0}
.approw{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,4vw,64px);align-items:center;width:100%}
.stage{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,22px);min-width:0}
.vwrap{position:relative;width:min(100%,calc(78svh*.82));aspect-ratio:.82;overflow:hidden}
.vwrap video{position:absolute;width:2px;height:2px;opacity:.01;pointer-events:none}
.vwrap canvas{position:absolute;left:50%;top:48%;height:158%;width:auto;aspect-ratio:9/16;transform:translate(-50%,-50%);max-width:none;animation:flota 7s ease-in-out infinite}
@keyframes flota{0%,100%{translate:0 0;rotate:-1.1deg}50%{translate:0 -2.2vh;rotate:1.1deg}}

/* galeria que pasa de derecha a izquierda, con una leve cámara naranja */
.gal{position:relative;background:var(--negro)}
.galpin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:flex-start;padding-top:clamp(72px,11svh,120px);background:linear-gradient(180deg,#0A0A0B 0%,rgba(10,10,11,.9) 7%,rgba(10,10,11,.76) 14%,rgba(10,10,11,.6) 32%,rgba(10,10,11,.58) 70%,rgba(10,10,11,.88) 90%,#0A0A0B 100%),url(assets/techo.webp) 50% 30%/cover}
.gal-pista{display:flex;width:max-content;will-change:transform}
.gal-fila{display:flex;gap:clamp(10px,1.4vw,20px);padding-right:clamp(10px,1.4vw,20px)}
.gal figure{position:relative;flex:none;height:clamp(260px,62svh,720px);overflow:hidden}
.gal figure img{height:100%;width:auto;max-width:none;filter:saturate(1.15) contrast(1.06)}
.gal figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,122,15,.34),rgba(209,69,0,.4));mix-blend-mode:overlay;pointer-events:none}
.galpin::before,.galpin::after{content:"";position:absolute;top:0;bottom:0;width:12vw;z-index:2;pointer-events:none}
.galpin::before{left:0;background:linear-gradient(90deg,var(--negro),rgba(10,10,11,0))}
.galpin::after{right:0;background:linear-gradient(270deg,var(--negro),rgba(10,10,11,0))}

/* pilares */
.pil{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:clamp(40px,7vh,90px)}
.pil div{border-top:2px solid transparent;border-image:var(--g-fuego) 1;padding-top:22px}
.pil h3{font:400 clamp(56px,7vw,110px)/.9 var(--f-display);text-transform:uppercase}
.pil p{color:#e6e2dc;font:600 clamp(18px,1.6vw,23px)/1.35 var(--f-body);margin-top:12px;max-width:30ch}

/* ubicación */
.loc{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr 1.25fr;align-items:center}
.mapa{position:relative;aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:#111}
.mapa #map{position:absolute;inset:0;background:#111;font-family:var(--f-body)}
.mapa::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 40px 14px var(--negro);pointer-events:none;z-index:500}
.leaflet-container{background:#111;outline:0}
.leaflet-control-attribution{background:rgba(10,10,11,.7)!important;color:#9a9697!important;font-size:10px!important}
.leaflet-control-attribution a{color:#cfcdcd!important}
.leaflet-bar a{background:#1b1b1d!important;color:#fff!important;border-color:#333!important}
.leaflet-bar a:hover{background:var(--naranja)!important;color:#190800!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#161617;color:#fff;border:1px solid #3d3b3c}
.leaflet-popup-content{font:600 15px/1.35 var(--f-body);margin:12px 16px}
.leaflet-popup-content b{font:400 20px/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;display:block;margin-bottom:4px;color:var(--fuego)}
.pin-sl{width:38px;height:38px;margin:-38px 0 0 -19px;display:block;background:var(--g-soul);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 0 3px rgba(255,170,90,.35),0 8px 22px rgba(252,103,1,.7)}
.pin-sl::after{content:"";position:absolute;inset:11px;border-radius:50%;background:#120700}
.loc address{font-style:normal;color:#e6e2dc;margin:22px 0 28px;font:600 clamp(18px,1.7vw,24px)/1.35 var(--f-body)}

/* cierre y pie */
.fin{text-align:center;overflow:hidden}
.fin .h{max-width:12ch;margin:0 auto}
.fin .btn{margin-top:clamp(28px,5vh,56px)}
.pie{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:28px var(--gut) 40px;color:var(--gris);font-size:13px;position:relative;z-index:2}
.pie button{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
dialog{max-width:min(520px,90vw);background:var(--carbon);color:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:28px}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog h3{font:400 34px/1 var(--f-display);text-transform:uppercase;margin-bottom:10px}
dialog p{color:#cfcdcd;margin-bottom:18px}

/* aparición suave */
.rv{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.rv.l{transform:translateX(-60px)}.rv.r{transform:translateX(60px)}
.rv.in{opacity:1;transform:none;filter:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}

@media (max-width:860px),(max-aspect-ratio:6/5){
  .lg-l,.lg-r{left:var(--gut);right:var(--gut);top:auto;margin-top:0;max-width:none;text-align:left}
  .lg-l{bottom:30vh}.lg-r{bottom:15vh}
  .lg-a{bottom:12vh}
  .story{height:620vh}
  .loc{grid-template-columns:1fr}
  .approw{grid-template-columns:1fr;gap:14px;align-content:start}
  .pinapp{align-items:flex-start;padding-top:12vh;padding-bottom:6vh}
  .vwrap{width:min(92vw,calc(54svh*.82))}
  .hor .grande{flex-direction:column;align-items:flex-start}
  .hor .sep{display:none}
  .hor .num{font-size:clamp(56px,17vw,120px);line-height:1.15}
  .app .apptxt .loop{margin-top:20px;font-size:clamp(26px,7vw,40px)}
  .app .apptxt .lead{margin-top:12px}
  .est .bloque::before{background:linear-gradient(180deg,var(--negro) 0%,rgba(10,10,11,.2) 30%,rgba(10,10,11,.7) 70%,var(--negro) 100%)}
}
@media (max-width:860px),(max-aspect-ratio:6/5){
  .lg big .cr{display:inline-block}
  .lg big em{display:inline-block;margin:0 .35em}
}
@media (hover:none) and (pointer:coarse){.btn::after{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .story{height:auto}.pin{position:relative;height:100svh}
  .lg-a{opacity:1}.rv{opacity:1;transform:none;filter:none}
}
/* que el recorte de la textura no corte las letras arriba ni abajo */
.lg big,.sec h2,.sec .h,.dor .fx,.pil h3{padding:.06em 0;margin-block:-.06em}

/* cronómetro: dígitos de ancho fijo para que no baile al contar */
.cr{display:inline-block;white-space:nowrap}
.cr b{display:inline-block;width:.52em;text-align:center;font-weight:400}
.cr i{display:inline-block;width:.3em;text-align:center;font-style:normal}
.lg big em{display:block;font:600 .26em/1.2 var(--f-body);font-style:normal;letter-spacing:.2em;color:#e6e2dc;-webkit-text-fill-color:#e6e2dc;text-transform:uppercase;margin:.1em 0}

@media (max-width:860px),(max-aspect-ratio:6/5){
  .lg big .cr{display:inline-block}
  .lg big em{display:inline-block;margin:0 .35em}
  .lg-l{bottom:34vh}.lg-r{bottom:18vh}
}

/* primer pantallazo: más oscuro, con humo naranja, grano y título metalizado (referencia: póster oscuro con luz de borde) */
.pin::before{background:radial-gradient(130% 95% at 50% 42%,rgba(0,0,0,0) 38%,rgba(0,0,0,.78) 100%),linear-gradient(180deg,rgba(10,10,11,.6) 0%,rgba(10,10,11,0) 24%,rgba(10,10,11,0) 52%,rgba(10,10,11,.9) 100%)}
.fumo{position:absolute;inset:-18%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;background:radial-gradient(38% 46% at 82% 26%,rgba(252,103,1,.42),rgba(252,103,1,0) 70%),radial-gradient(34% 42% at 14% 78%,rgba(209,69,0,.34),rgba(209,69,0,0) 70%),radial-gradient(30% 30% at 55% 100%,rgba(255,150,40,.22),rgba(255,150,40,0) 70%);animation:fumo 22s ease-in-out infinite alternate}
@keyframes fumo{0%{transform:translate3d(-2%,1%,0) scale(1) rotate(0deg)}100%{transform:translate3d(3%,-3%,0) scale(1.12) rotate(5deg)}}
.grao{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.lg-a .kick{display:block;font:700 clamp(13px,1.2vw,18px)/1 var(--f-body);letter-spacing:.4em;text-transform:uppercase;color:#f0ebe4;margin-top:clamp(14px,2.4vh,26px);padding-left:.1em;text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.9)}
.lg-a .kick::before{content:"";display:inline-block;width:clamp(28px,4vw,64px);height:2px;background:var(--g-fuego);vertical-align:middle;margin-right:14px}
.lg-a big{background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.85) 50%,transparent 64%) 0 0/260% 100%,var(--piedra) 0 0/1.5em auto;-webkit-background-clip:text;background-clip:text;animation:destello 5.5s ease-in-out infinite;text-shadow:none}
@keyframes destello{0%,35%{background-position:160% 0,0 0}75%,100%{background-position:-60% 0,0 0}}
.lg-a .cta{margin-top:clamp(16px,3vh,30px);pointer-events:auto}
@media (max-width:860px),(max-aspect-ratio:6/5){
  .lg-a .kick{font-size:11px;letter-spacing:.3em}
  .lg-a{bottom:9vh}
}

.est .bloque-1::before{background:linear-gradient(180deg,var(--negro) 0%,rgba(10,10,11,0) 38%,rgba(10,10,11,0) 70%,var(--negro) 100%),linear-gradient(90deg,rgba(10,10,11,.85),rgba(10,10,11,0) 65%)}
@media (max-width:860px),(max-aspect-ratio:6/5){
  .est .bloque-1::before{background:linear-gradient(180deg,var(--negro) 0%,rgba(10,10,11,.15) 36%,rgba(10,10,11,.6) 70%,var(--negro) 100%)}
}

.dor .fx:nth-of-type(3){margin-bottom:clamp(60px,14vh,160px)}

/* fondo de baja opacidad detrás del celular, con un deje naranja */
.pinapp::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--negro) 0%,rgba(10,10,11,0) 24%,rgba(10,10,11,0) 76%,var(--negro) 100%),linear-gradient(rgba(10,10,11,.8),rgba(10,10,11,.8)),url(assets/fondo-app.webp) 50% 50%/cover}

/* celulares y pantallas angostas: sin capas de mezcla ni animaciones pesadas (si no, Safari se queda sin memoria) */
@media (hover:none) and (pointer:coarse),(max-width:860px){
  .fumo,.grao{display:none}
  .velo{mix-blend-mode:normal;opacity:.22}
  .velo::after{display:none}
  .lg-a big{animation:none}
}

/* celular: sin filtros pesados sobre los textos del hero ni capas con will-change (memoria de Safari) */
@media (hover:none) and (pointer:coarse),(max-width:860px){
  .velo{display:none}
  .lg{will-change:auto}
  .lg big,.hl,.hor .num,.pil h3{filter:none}
}

/* primer pantallazo en vertical: franja oscura detrás del título y letras más claras para que no se pierdan */
@media (max-aspect-ratio:1/1),(max-width:860px){
  .lg-a::before{content:"";position:absolute;z-index:-1;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));top:-46px;bottom:-130px;background:linear-gradient(180deg,rgba(10,10,11,0) 0%,rgba(10,10,11,.66) 24%,rgba(10,10,11,.74) 58%,rgba(10,10,11,.5) 86%,rgba(10,10,11,0) 100%);pointer-events:none}
  .lg-a big{background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,.26)) 0 0/100% 100%,var(--piedra) 0 0/1.5em auto;-webkit-background-clip:text;background-clip:text}
}

.grao{display:none}
.fumo{will-change:transform}

/* el título del primer pantallazo se ve desde el primer pintado, sin esperar al JavaScript */
.lg-a{opacity:1}

/* mapa oscuro: el filtro va solo en las baldosas, no en el contenedor (así el mapa sigue siendo táctil) */
.mapa .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.55)}


/* logo plateado: más grande y con un halo suave para que se lea sobre el hero oscuro */
.top img{height:clamp(48px,6.4vw,64px);width:auto;filter:drop-shadow(0 0 10px rgba(255,255,255,.28)) drop-shadow(0 2px 6px rgba(0,0,0,.7))}

/* el celular entra de costado al empezar el video */
@keyframes entra{from{translate:70% 0;opacity:0}to{translate:0 0;opacity:1}}
.vwrap canvas.entra{animation:entra 1.2s cubic-bezier(.16,1,.3,1) both,flota 7s ease-in-out 1.2s infinite}

/* escritorio: efectos del hero sin mezcla de capas ni animaciones continuas (si no, el scroll se estanca en el hero) */
.velo{mix-blend-mode:normal;opacity:.2}
.velo::after{display:none}
.fumo{mix-blend-mode:normal;animation:none;will-change:auto;opacity:.34}
.lg-a big{animation:none}
@media (hover:hover) and (min-aspect-ratio:1001/1000){.lg{will-change:transform,opacity}}

/* escritorio: el video del hero se reproduce directo con el scroll (más fluido que los cuadros sueltos) */
#vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;background:var(--negro)}