.landing{--gut:clamp(20px,4.4vw,72px);--display:'Saira',sans-serif;--sans:'Saira',sans-serif;--bone:#F5F1EC;--cora:#E11A17;font-family:var(--sans)}
.landing{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(96px,12vh,132px) var(--gut) clamp(50px,6.6vh,86px);
  overflow:hidden;
}
.landing__media{position:absolute;inset:0;z-index:0}
.landing__video{width:100%;height:100%;object-fit:cover}
.landing__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(112% 78% at 50% 44%,rgba(10,9,8,.30) 0%,rgba(10,9,8,.60) 54%,rgba(10,9,8,.90) 100%),
    linear-gradient(to bottom,rgba(10,9,8,.78) 0%,rgba(10,9,8,.28) 26%,rgba(10,9,8,.34) 58%,rgba(10,9,8,.95) 100%);
}
/* Grano finisimo sobre el video. El material es de camara en poca luz: al
   comprimirlo los degradados oscuros se escalonan y a ojo eso se lee como
   pixelado. Una capa de ruido rompe esas bandas y ademas da textura de pelicula. */
.landing__grain{
  position:absolute;inset:0;pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='170' height='170' filter='url(%23n)'/></svg>");
  background-size:170px 170px;
}

.landing__body,.landing__meta{position:relative;z-index:1}

.landing__body{max-width:min(100%,1040px)}

/* Lockup oficial de la marca: manzana, VENUE, barra y las tres submarcas.
   La manzana es el mismo bloque .fire de antes, ahora dentro del lockup: asi el
   isotipo no sale dos veces en pantalla y conserva su animacion. */
.landing__lockup{
  display:flex;flex-direction:column;align-items:center;
  margin:0;line-height:1;
  width:min(100%,720px);
}
.landing__venue{
  font-family:var(--display);
  font-weight:800;font-stretch:expanded;
  font-size:clamp(3rem,12.5vw,8.6rem);
  line-height:.92;letter-spacing:.02em;
  color:var(--bone);
  text-shadow:0 4px 40px rgba(10,9,8,.55);
}
.landing__rule{
  display:block;width:100%;
  height:clamp(5px,.85vw,12px);
  margin-top:clamp(5px,.7vw,10px);
  background:var(--bone);
  box-shadow:0 4px 30px rgba(10,9,8,.5);
}
.landing__subs{
  display:flex;justify-content:center;
  gap:clamp(16px,4.4vw,70px);
  margin-top:clamp(9px,1.3vw,18px);
}
.landing__sub{
  display:flex;flex-direction:column;align-items:center;
  line-height:1;color:var(--bone);
  text-shadow:0 2px 18px rgba(10,9,8,.6);
}
.landing__sub b{
  font-weight:800;font-stretch:expanded;
  font-size:clamp(.85rem,2.1vw,1.4rem);letter-spacing:.01em;
}
.landing__sub em{
  font-style:normal;font-weight:700;
  font-size:clamp(.44rem,1.05vw,.7rem);
  letter-spacing:.07em;margin-top:2px;
}
.landing__tagline{
  font-family:var(--sans);font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1rem,2.05vw,1.5rem);
  line-height:1.24;letter-spacing:.004em;
  color:var(--bone);
  max-width:16ch;
  margin:clamp(18px,2.6vw,32px) auto 0;
  text-shadow:0 2px 22px rgba(10,9,8,.68);
}
.landing__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(20px,2.4vw,32px)}

.landing__meta{
  order:2;
  display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;
  gap:12px clamp(22px,3.6vw,54px);
  margin-top:clamp(12px,1.7vw,22px);
  text-align:center;
}
.landing__meta dt{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--cora)}
.landing__meta dd{margin:5px 0 0;font-size:13px;color:rgba(245,241,236,.82);white-space:nowrap}

/* Portatiles bajos: el lockup oficial es mas alto que el anterior (manzana +
   VENUE + barra + submarcas), asi que aqui cede altura por todos lados y la
   fila de datos se va: capacidad y m2 igual salen en la seccion de venue. */
@media (max-height:912px){
  .landing{
    padding-top:clamp(86px,11vh,114px);
    padding-bottom:clamp(44px,6vh,70px);
  }
  .landing__venue{font-size:clamp(2.4rem,8.5vw,5.4rem)}
  .landing__tagline{font-size:clamp(.9rem,1.6vw,1.1rem);margin-top:clamp(12px,1.8vw,20px)}
  .landing__cta{margin-top:clamp(14px,1.8vw,22px)}
  .landing__subs{margin-top:clamp(7px,1vw,12px)}
  .landing__meta{display:none}
  .fire{width:clamp(78px,8.5vw,120px)}
}


.landing .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.landing__lockup{margin:auto}.landing__meta{display:none}.landing .fire{opacity:1}.landing__cta .btn{min-width:180px}
@media(max-width:960px){.nav__links{display:flex!important;visibility:visible!important;position:static!important;flex-direction:row!important;overflow-x:auto;gap:18px!important;max-width:100%;padding:8px 0!important;background:none!important}.nav{flex-wrap:wrap}.nav__links{order:4;flex-basis:100%}.nav__links a{font-size:12px!important;white-space:nowrap}.nav__cta{display:none}.landing{padding-top:130px}}
@media(max-width:600px){.landing__cta{flex-direction:column;align-items:center}.landing__cta .btn{width:250px}.landing .fire{width:120px}.landing__venue{font-size:clamp(3rem,14vw,5rem)}}
.nav__links{scrollbar-width:none}.nav__links::-webkit-scrollbar{display:none}
@media(max-width:960px){.nav__links{transform:none!important;backdrop-filter:none;min-width:0}.nav{row-gap:0}}