/* ============================================================================
   EL TIO EVENTOS
   Concepto: la cuenta regresiva a puertas. En una sala lo unico que se ve es lo
   que esta encendido.

   Hoja propia. No comparte NADA con vertical.css, ni con gastronomia.css, ni con
   real-estate.css. Las siete landings compartian 428 lineas con un solo radio y
   una escala de dos escalones, y por eso se leian como la misma pagina con otro
   color. Eventos comparte 149 de 162 clases con distribucion: era la mas
   plantilla de las siete.

   Oposiciones deliberadas contra las dos hermanas ya rehechas:

   - Material. Gastronomia es papel de estraza calido y real estate papel de tina
     frio: las dos son materia REFLECTANTE. Esta es la unica de las siete cuyo
     material no es papel. Es luz EMITIDA sobre carbon apagado, y por eso tiene
     una escalera de luminancia en vez de un solo fondo: la pagina se aclara
     tramo a tramo hasta PUERTAS y vuelve a oscurecerse en el settlement.
   - Letra. Alla la mono es el micro rotulo o el dato. Aca la mono es LA VOZ: los
     titulos van en Spline Sans Mono de caja mixta. El riesgo obvio del rubro era
     la gotica condensada en caja alta del flyer de fiesta, que es lo que la
     pagina tenia antes y lo que hace la categoria entera.
   - Dos familias, no tres.
   - Acento. Un gel frio de sala en hue 172. Los cuatro azules del sistema estan
     entre 205 y 220 y el ambar, el brasa, el lacre y el rosa estan del lado
     calido: este hue esta libre en las siete.
   - El segundo foco no es un segundo color. Es blanco abierto a plena intensidad,
     tres veces en toda la pagina, y es lo unico que lleva halo.
   ========================================================================= */

:root {
  /* La pagina es oscura y no tiene version clara. Declararlo evita que Chrome en
     Android aplique su oscurecido automatico encima y que el navegador dibuje sus
     propios controles con la preferencia del sistema. */
  color-scheme: dark;

  /* La escalera de luminancia. Un escalon por tramo de la cuenta regresiva: la
     sala se va encendiendo a medida que se acerca la hora. No son grises neutros
     sino carbon frio, que es el color de una sala apagada de verdad. */
  --n0: #0C0F10;
  --n1: #101618;
  --n2: #151E21;
  --n3: #1B272B;
  --n4: #223338;

  --cal: #EDF2F1;          /* el texto principal */
  --cal-2: #9FAEAC;        /* el secundario */
  /* El terciario. Estaba en #6E7D7B con el comentario "el minimo que pasa contraste", que
     era una suposicion y no una medicion: daba 4,47 contra el fondo mas oscuro y 3,94
     contra los tramos encendidos, y el minimo es 4,5. La escalera de luminancia agrava
     esto, porque el mismo color rinde distinto en cada tramo: el terciario tiene que pasar
     contra el tramo MAS CLARO donde se lo use, no contra el mas oscuro. Veintidos textos
     quedaban por debajo, casi todos de doce y trece pixeles, que es justo el tamano donde
     mas se nota. */
  --cal-3: #8A9795;
  --linea: rgba(237, 242, 241, 0.10);
  --linea-fuerte: rgba(237, 242, 241, 0.22);

  /* El gel. Uno solo, y siempre emitido: nunca relleno de area grande. */
  --gel: #23D6C0;
  --gel-tenue: rgba(35, 214, 192, 0.14);
  --gel-linea: rgba(35, 214, 192, 0.38);

  /* El foco. Blanco abierto, con halo, tres veces en toda la pagina. */
  --foco: #FFFFFF;

  --voz: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --cuerpo: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;

  /* Escala de espacio de base 6, distinta de la base 4 de gastronomia y de la
     base 8 de real estate. */
  --e1: 6px; --e2: 12px; --e3: 18px; --e4: 30px; --e5: 48px; --e6: 78px;

  --ancho: 1220px;
  --margen: clamp(18px, 4.5vw, 64px);
  /* La columna del eje, donde vive el desfase. No existe en ninguna hermana. */
  --eje: clamp(58px, 8vw, 108px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* EL DESBORDE Y EL PIN. Esta nota decia "jamas overflow-x en html, cualquier valor no
   visible en la raiz mata el position:sticky", y eso es falso y ademas peligroso, porque
   empuja a mover el overflow de html a body, que es justo lo que si lo rompe.

   Medido en Chromium 149 con un sticky dentro de un contenedor de 210vh.
   PINEA: html{overflow-x:hidden}, html{overflow-x:clip}, body{overflow-x:hidden} sola,
   contain:paint, contain:strict, transform y filter en el contenedor.
   NO PINEA: cualquier ancestro NO raiz con overflow-x hidden o auto, y html mas body no
   visibles A LA VEZ.

   La raiz propaga su overflow al viewport y ella misma queda visible, por eso html sola es
   inofensiva. Lo que hay que no hacer es ponerle overflow a un envoltorio intermedio, ni
   dejar html y body los dos no visibles. Para acotar el desborde de una seccion, lo seguro
   es contain:paint o overflow-x:clip sobre esa seccion. */

body {
  margin: 0;
  background: var(--n0);
  color: var(--cal);
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gel);
  color: var(--n0);
  padding: 10px 16px;
  font-family: var(--voz);
  font-size: 13px;
  z-index: 50;
}
.saltar:focus { left: 8px; top: 8px; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--gel);
  outline-offset: 3px;
}

::selection { background: rgba(35, 214, 192, 0.30); color: var(--cal); }


/* ------------------------------------------------------------------ la escala
   Un unico momento tipografico grande y despues un acantilado, nunca una rampa.
   Es como componen las referencias del rubro que no son SaaS: Berghain topea en
   26px, Coachella en 27, Primavera en 56, y DICE pone su H1 a 100 con el escalon
   siguiente cayendo de golpe a 44. */

h1 {
  font-family: var(--voz);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0;
}
h2 {
  font-family: var(--voz);
  font-weight: 500;
  font-size: clamp(23px, 2.7vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.028em;
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}
h3 {
  font-family: var(--voz);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0;
}
p { margin: 0 0 var(--e3); max-width: 62ch; }

.rotulo {
  font-family: var(--voz);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gel);
  margin: 0 0 var(--e3);
}
.bajada {
  font-size: 17px;
  line-height: 1.62;
  color: var(--cal-2);
  max-width: 54ch;
  margin-top: var(--e3);
}
.dato {
  font-family: var(--voz);
  font-size: 13px;
  line-height: 1.7;
  color: var(--cal-3);
}
.dato a { color: var(--gel); text-underline-offset: 3px; }

/* Lo que no se puede afirmar. Va en el gel y con filete al costado, porque en esta
   marca la frase que limita la promesa es tan importante como la promesa. */
.honesto {
  font-family: var(--voz);
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--cal-2);
  border-left: 1px solid var(--gel-linea);
  padding-left: var(--e3);
  max-width: 60ch;
  margin-top: var(--e4);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 26px;
  font-family: var(--voz);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--gel);
  color: var(--n0);
  /* Radio cero. Toda la categoria usa la pastilla de radio total rellena con el
     acento, repetida cuatro o cinco veces por pagina. Es el objeto mas repetido
     del rubro y por eso el que mas conviene no usar. */
  border: 1px solid var(--gel);
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover { background: transparent; color: var(--gel); }
.btn--linea { background: transparent; color: var(--cal); border-color: var(--linea-fuerte); }
.btn--linea:hover { background: transparent; color: var(--gel); border-color: var(--gel); }


/* ================================================================== (a) el vuelo de sala

   El hero es un empuje de camara continuo desde el aire sobre la ciudad hasta la cabina,
   nueve laminas encastradas por escala y dibujadas en WebGL. El modulo esta en eventos.js.

   LA GRAMATICA viene de hiibiza.com, que es la referencia que puso el founder, pero dada
   vuelta. Alla el marco es claro y tornasolado y lo que flota encima son tarjetas oscuras
   con fotografia adentro. Aca el marco es carbon y lo que flota son los instrumentos. Lo
   que se conserva es lo que hace que ese sitio se vea caro, y no es el color: tipografia
   enorme y muy ajustada, pastillas en vez de rectangulos, radios grandes, y mucho aire
   alrededor de pocos elementos. Lo que se descarta es su fondo tornasolado, porque el
   founder pidio oscuro y porque cuatro de las seis hermanas ya son claras.

   El h1 es el elemento LCP a proposito. Texto como LCP es gratis y es la unica forma
   honesta de entrar en presupuesto en un telefono: la primera lamina pesa 25 KB a 480px y
   llega despues, sin que eso demore lo que se mide. */

/* La pastilla. Flota separada del borde y no pegada a top:0 left:0 right:0, porque pegada
   lee como barra de aplicacion y separada lee como objeto. Es la firma mas barata y mas
   reconocible de la referencia. */
.pastilla {
  position: fixed;
  z-index: 30;
  top: var(--e2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding-block: var(--e1);
  padding-inline: var(--e3) var(--e1);
  border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  background: rgba(12, 15, 16, 0.66);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  max-width: calc(100vw - var(--margen));
}

.pastilla-marca {
  font-family: var(--voz);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--cal);
  text-decoration: none;
  white-space: nowrap;
}

.pastilla-marca span {
  color: var(--gel);
  margin-left: 0.55em;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.pastilla-btn {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--e3);
  border-radius: 999px;
  background: var(--gel);
  color: var(--n0);
  font-family: var(--voz);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease;
}

.pastilla-btn:hover { background: var(--foco); color: var(--n0); }

@media (max-width: 700px) {
  /* En telefono el boton de la pastilla se va: la misma llamada esta en el hero a dos
     dedos de distancia, y dos botones identicos a diez centimetros uno del otro no suman.
     Se queda la marca sola, que es lo que orienta. */
  .pastilla-btn { display: none; }
  .pastilla { padding-inline: var(--e3); }
}

/* El contenedor alto: es la pista de scroll del vuelo. Ocho tramos a unos 40vh cada uno,
   mas la pantalla que queda pinneada. `contain: paint` acota el desborde de las laminas
   SIN tocar el overflow de ningun ancestro, que es lo unico que romperia el pin. */
.vuelo {
  position: relative;
  height: 420vh;
  contain: paint;
  background: var(--n0);
}

.vuelo-marco {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--n0);
}

.vuelo-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* La tira de respaldo. Es el plan para cuando no hay JavaScript o no hay WebGL: las nueve
   laminas como galeria, con su pie, que es una pieza que se lee sola. Cuando el modulo se
   hace cargo, se va. */
.vuelo-respaldo {
  display: flex;
  gap: var(--e2);
  overflow-x: auto;
  height: 100%;
  align-items: center;
  padding: var(--e4) var(--margen);
  scroll-snap-type: x mandatory;
}

.vuelo-lamina {
  margin: 0;
  flex: 0 0 min(78vw, 620px);
  scroll-snap-align: center;
}

.vuelo-lamina img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid var(--linea);
}

.vuelo-lamina figcaption {
  display: flex;
  gap: var(--e2);
  margin-top: var(--e2);
  font-family: var(--voz);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-2);
}

.vuelo-num { color: var(--gel); }

.vuelo-vivo .vuelo-respaldo { display: none; }

/* El velo. Sin esto el titular cae encima de una fotografia que cambia todo el tiempo, y
   hay tramos del vuelo donde el fondo detras de la primera linea se vuelve casi blanco.
   Es un degradado y no un color plano porque un plano apaga la foto entera y la foto es
   la mitad del argumento. */
.vuelo-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(12, 15, 16, 0.88) 0%, rgba(12, 15, 16, 0.55) 38%, rgba(12, 15, 16, 0) 68%),
    linear-gradient(to top, rgba(12, 15, 16, 0.82) 0%, rgba(12, 15, 16, 0) 42%);
}

.vuelo-vivo .vuelo-velo { z-index: 1; }

/* El titular. Enorme y muy ajustado, que es la mitad de por que la referencia se ve cara.
   El peso 800 existe: la Schibsted es variable de 400 a 800. */
.vuelo-texto {
  position: absolute;
  z-index: 2;
  left: var(--margen);
  right: var(--margen);
  top: clamp(96px, 14vh, 150px);
  bottom: clamp(var(--e5), 12vh, 148px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* En `ch` no: esa unidad se mide contra el font-size de ESTE elemento, que es el del
     cuerpo, no el del titular. `max-width: 20ch` daban unos ciento setenta pixeles, y con
     eso el h1 de 112px desbordaba la pantalla por arriba y la bajada caia en una columna
     de catorce caracteres. Con `top` ademas el bloque no puede crecer hacia arriba. */
  max-width: min(46rem, 58vw);
  pointer-events: none;
}

.vuelo-texto > * { pointer-events: auto; }

.vuelo h1 {
  margin: 0;
  font-family: var(--cuerpo);
  font-weight: 800;
  font-size: clamp(2.6rem, 8.4vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--foco);
}

/* La linea liviana. El contraste de peso dentro del mismo titular es lo que evita que un
   bloque de ocho palabras en 800 se lea como un grito. */
.h1-fino {
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cal-2);
  text-transform: none;
}

.vuelo .bajada {
  margin-top: var(--e3);
  max-width: 46ch;
  color: var(--cal);
}

.vuelo-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e4);
}

.vuelo-precio {
  margin: var(--e2) 0 0;
  font-family: var(--voz);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--cal-3);
}

/* La lectura de aforo. Es la unica tarjeta de la pagina, y es tarjeta porque es un
   instrumento apoyado sobre la escena, no parte de ella: flota, tiene radio grande y
   tiene su propio vidrio. Es la traduccion directa de la tarjeta redondeada de la
   referencia, con un dato adentro en vez de una fotografia. */
.vuelo-lectura {
  position: absolute;
  z-index: 2;
  right: var(--margen);
  bottom: clamp(var(--e5), 12vh, 148px);
  width: min(300px, calc(100vw - var(--margen) * 2));
  padding: var(--e3);
  border-radius: 20px;
  border: 1px solid var(--linea-fuerte);
  background: rgba(12, 15, 16, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.lect-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); }

.lect-cifra {
  margin: 0;
  font-family: var(--voz);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--foco);
  font-variant-numeric: tabular-nums;
}

.lect-de { color: var(--cal-3); font-size: 0.4em; letter-spacing: 0.02em; margin-left: 0.4em; }

/* El riel. La barra se mueve con transform y no con width, para que el navegador no
   rehaga el layout en cada cuadro del vuelo. */
.lect-riel {
  position: relative;
  height: 4px;
  margin: var(--e2) 0;
  border-radius: 2px;
  background: rgba(237, 242, 241, 0.12);
  overflow: hidden;
}

.lect-barra {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--gel);
}

.lect-umbral {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--foco);
}

.lect-estado {
  margin: 0;
  font-family: var(--voz);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--cal-2);
}

/* Cuando la sala pasa el umbral, el instrumento cambia de estado. Es el unico momento de
   la pagina en que algo se pone en el foco blanco por si solo. */
.vuelo-lectura.cubierto .lect-estado { color: var(--foco); }
.vuelo-lectura.cubierto .lect-barra { background: var(--foco); }

.lect-pie {
  margin: var(--e2) 0 0;
  padding-top: var(--e2);
  border-top: 1px solid var(--linea);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cal-3);
}

/* El riel de tramos: donde va la camara. Nueve marcas al costado, que se anotan al pasar. */
.vuelo-fichas {
  position: absolute;
  z-index: 2;
  /* A la derecha y arriba, no a la izquierda: en el borde izquierdo se encimaba con la
     bajada, que ocupa el mismo margen. Arriba y no centrado porque abajo a la derecha vive
     la lectura de aforo, y dos instrumentos en la misma esquina compiten. */
  right: var(--margen);
  top: clamp(96px, 14vh, 150px);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
  display: grid;
  gap: var(--e1);
}

.vuelo-ficha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e2);
  font-family: var(--voz);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cal-3);
  opacity: 0.35;
  transition: opacity 260ms ease, color 260ms ease;
}

.vuelo-ficha.anotada { opacity: 0.7; }
.vuelo-ficha.activa { opacity: 1; color: var(--gel); }

.vf-num { color: inherit; }
.vf-rot { color: inherit; }

.vuelo-nota {
  max-width: 60ch;
  color: var(--cal-2);
  padding: 0 var(--margen) var(--e5);
}

@media (max-width: 940px) {
  /* En telefono el riel de tramos se va y la lectura pasa debajo del titular. Nueve
     marcas al costado en una pantalla de 390 se comen el ancho del titular, que es lo
     unico que tiene que ser grande. */
  .vuelo-fichas { display: none; }
  .vuelo { height: 320vh; }
  .vuelo-texto {
    left: var(--margen);
    right: var(--margen);
    bottom: auto;
    top: clamp(88px, 14vh, 132px);
    max-width: none;
  }
  .vuelo-lectura {
    left: var(--margen);
    right: var(--margen);
    bottom: var(--e4);
    width: auto;
  }
  .vuelo-velo {
    background:
      linear-gradient(to bottom, rgba(12, 15, 16, 0.9) 0%, rgba(12, 15, 16, 0.35) 46%, rgba(12, 15, 16, 0.92) 100%);
  }
}

/* Con el movimiento reducido no hay vuelo: el modulo no monta el canvas y la tira de
   respaldo se queda, que es una galeria navegable con el pulgar y sin nada que se mueva
   solo. El contenedor deja de ser una pista de scroll de cuatro pantallas. */
@media (prefers-reduced-motion: reduce) {
  .vuelo { height: auto; }
  .vuelo-marco { position: relative; height: auto; }
  .vuelo-texto, .vuelo-lectura { position: static; width: auto; margin: var(--e4) var(--margen) 0; }
  .vuelo-velo { display: none; }
  .vuelo-fichas { display: none; }
}

/* ================================================================= (c) la hoja de ruta
   El eje de la pagina: cada tramo lleva su desfase a puertas en el margen y una
   linea vertical los enhebra. Gastronomia se ordena por el reloj del local y real
   estate por laminas de un legajo; este rubro solo piensa en cuanto falta. */

.tramo {
  display: grid;
  grid-template-columns: var(--eje) minmax(0, 1fr);
  gap: 0 var(--e4);
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--e6) var(--margen);
  background: var(--n0);
}
/* La escalera de luminancia: cada tramo un escalon mas encendido que el anterior. */
.tramo:nth-of-type(1) { background: var(--n0); }
.tramo:nth-of-type(2) { background: var(--n1); }
.tramo:nth-of-type(3) { background: var(--n1); }
.tramo:nth-of-type(4) { background: var(--n2); }
.tramo:nth-of-type(5) { background: var(--n2); }
.tramo:nth-of-type(6) { background: var(--n3); }
/* Y despues de PUERTAS vuelve a bajar. */
.tramo--cierra { background: var(--n1); }

/* El fondo tiene que llegar de borde a borde aunque el contenido este acotado. */
.tramo { max-width: none; }
.tramo > * { max-width: none; }
.tramo-cuerpo { max-width: calc(var(--ancho) - var(--eje)); }

.tramo-eje {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.eje-marca {
  font-family: var(--voz);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--gel);
  font-variant-numeric: tabular-nums;
}
.eje-linea {
  flex: 1;
  width: 1px;
  background: var(--linea);
  margin: var(--e2) 0 0 0.5ch;
}

@media (max-width: 760px) {
  .tramo { grid-template-columns: 1fr; gap: var(--e3); padding-block: var(--e5); }
  .tramo-eje { flex-direction: row; align-items: center; gap: var(--e2); }
  .eje-linea { flex: 1; width: auto; height: 1px; margin: 0; }
}


/* ------------------------------------------------------------------ D-90 la decision */

.decision {
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e4);
  counter-reset: dec;
}
.decision li {
  border-top: 1px solid var(--linea-fuerte);
  padding-top: var(--e3);
  counter-increment: dec;
}
.decision h3::before {
  content: counter(dec, decimal-leading-zero);
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gel);
  margin-bottom: var(--e1);
}
.decision p { font-size: 14.5px; color: var(--cal-2); margin: var(--e2) 0 0; }

.banda { margin: var(--e6) 0 0; }
.banda img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; filter: saturate(0.8) contrast(1.06); }
.banda figcaption,
.pantalla figcaption {
  font-family: var(--voz);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cal-3);
  margin-top: var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid var(--linea);
}


/* =========================================================== (b) el fader del riesgo
   D-60. La categoria dibuja el riesgo como barra de progreso rellena, que es
   vocabulario de software. En una sala el objeto que gradua algo es un fader de
   consola: recorrido, marcas de escala y cursor. Y ademas funciona. */

.tramo--luz { position: relative; }

.consola {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--e5);
  margin: var(--e5) 0 0;
  align-items: start;
}
.consola-faders { display: grid; gap: var(--e4); }

.fader { display: grid; grid-template-columns: 1fr auto; gap: var(--e1) var(--e3); align-items: center; }
.fader-rot {
  font-family: var(--voz);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cal-3);
}
.fader-val {
  font-family: var(--voz);
  font-size: 15px;
  color: var(--gel);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fader-ayuda {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cal-3);
  margin: 0;
  max-width: 46ch;
  order: 3;
}
.fader-pista {
  grid-column: 1 / -1;
  order: 2;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
/* El recorrido lleva las marcas de escala grabadas encima, que es lo que lo hace
   un fader y no una barra. */
.fader-pista::-webkit-slider-runnable-track {
  height: 3px;
  background:
    repeating-linear-gradient(to right, var(--linea-fuerte) 0 1px, transparent 1px 10%),
    var(--linea);
}
.fader-pista::-moz-range-track {
  height: 3px;
  background:
    repeating-linear-gradient(to right, var(--linea-fuerte) 0 1px, transparent 1px 10%),
    var(--linea);
}
.fader-pista::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 24px;
  margin-top: -10px;
  background: var(--gel);
  border: 0;
  box-shadow: 0 0 14px rgba(35, 214, 192, 0.5);
}
.fader-pista::-moz-range-thumb {
  width: 10px;
  height: 24px;
  border-radius: 0;
  background: var(--gel);
  border: 0;
  box-shadow: 0 0 14px rgba(35, 214, 192, 0.5);
}

.consola-salida {
  border-left: 1px solid var(--linea-fuerte);
  padding-left: var(--e4);
}
.salida-cifra {
  font-family: var(--voz);
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--foco);
  margin: 0;
  font-variant-numeric: tabular-nums;
  /* El segundo de los tres focos. */
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.16);
}
.salida-un {
  display: block;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--cal-3);
  margin-top: var(--e2);
  text-shadow: none;
}
/* Dos renglones y no una sola linea con un `b` adentro. En telefono y con el zoom al
   cuatrocientos por ciento la cifra y el juicio quedaban como dos cajas en linea que se
   solapan al envolver el renglon. Es el mismo defecto que ya habia corregido en la lectura
   de fitness, y aca no lo vi porque mi medicion de esta pagina no incluia `b` en el
   selector: el barrido de las ocho, que si lo incluye, lo encontro en dos anchos. */
.salida-pct {
  font-size: 15px;
  color: var(--cal-2);
  margin: var(--e3) 0 0;
  display: grid;
  gap: 4px;
  justify-items: start;
}
.salida-pct b { color: var(--gel); font-weight: 500; }

.salida-barra {
  position: relative;
  height: 8px;
  background: var(--linea);
  margin: var(--e4) 0 var(--e4);
}
.barra-lleno { position: absolute; inset: 0 auto 0 0; background: var(--gel-linea); }

.salida-detalle { display: grid; gap: var(--e2); margin: 0; }
.salida-detalle > div { display: flex; justify-content: space-between; gap: var(--e3); border-top: 1px solid var(--linea); padding-top: var(--e2); }
.salida-detalle dt { font-size: 13px; color: var(--cal-3); }
.salida-detalle dd {
  margin: 0;
  font-family: var(--voz);
  font-size: 13.5px;
  color: var(--cal);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .consola { grid-template-columns: 1fr; gap: var(--e5); }
  .consola-salida { border-left: 0; border-top: 1px solid var(--linea-fuerte); padding: var(--e4) 0 0; }
}


/* ------------------------------------------------------------ D-45 las herramientas */

.herramientas {
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e5) var(--e4);
  counter-reset: her;
}
.herramientas li {
  counter-increment: her;
  border-top: 1px solid var(--linea-fuerte);
  padding-top: var(--e3);
}
.herramientas h3::before {
  content: counter(her, decimal-leading-zero);
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gel);
  margin-bottom: var(--e2);
}
.herr-frase { color: var(--cal-2); font-size: 15px; margin: var(--e2) 0 var(--e2); }
.herr-cuerpo { font-size: 13.5px; line-height: 1.66; color: var(--cal-3); margin: 0; }




/* --------------------------------------------------------------------- D-75 la base
   El posicionamiento del founder: la base lidera. En la version anterior era una lista
   plana sin borde ni fondo, con cero inversion visual, mientras el diferencial se
   llevaba el unico diagrama de la pagina. */

.base { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: 0; }
.base li { border-top: 1px solid var(--linea); padding: var(--e3) 0; }
.base li:last-child { border-bottom: 1px solid var(--linea); }
.base-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2) var(--e4);
}
.base-medida {
  font-family: var(--voz);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--gel);
  white-space: nowrap;
}
.base p { margin: var(--e2) 0 0; font-size: 14.5px; color: var(--cal-2); max-width: 68ch; }

.con-foto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: var(--e4);
  align-items: end;
  margin-top: var(--e5);
}
.con-foto .figura { margin: 0; }
.con-foto .figura img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.72) contrast(1.05); }
.con-foto .figura figcaption {
  font-family: var(--voz);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cal-3);
  margin-top: var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid var(--linea);
}
@media (max-width: 900px) { .con-foto { grid-template-columns: 1fr; } }


/* ------------------------------------------------------------------ D-21 el escenario
   El unico bloque que habla del negocio del lector con numeros concretos. Estaba escrito
   en los datos del vertical y la pagina anterior lo enterraba en la seccion nueve. */

.escenario { margin: var(--e5) 0 0; display: grid; gap: 0; }
.esc-fila {
  display: grid;
  grid-template-columns: minmax(120px, 176px) minmax(0, 1fr);
  gap: var(--e4);
  border-top: 1px solid var(--linea-fuerte);
  padding: var(--e3) 0;
}
.esc-fila dt {
  font-family: var(--voz);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--gel);
}
.esc-fila dd { margin: 0; font-size: 15px; color: var(--cal-2); max-width: 62ch; }
@media (max-width: 640px) { .esc-fila { grid-template-columns: 1fr; gap: var(--e1); } }


/* ==================================================================== la hoja de ruta
   El componente de firma (c) hecho explicito: los mismos desfases que enhebran la pagina,
   puestos como lo que son, un run of show. El orden rector de las mejores referencias del
   rubro es la grilla de horarios, no una secuencia de modulos de marketing. */

.ruta {
  background: var(--n3);
  padding: var(--e6) var(--margen);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.ruta-marco { max-width: var(--ancho); margin: 0 auto; }
.ruta-lista { list-style: none; margin: var(--e5) 0 0; padding: 0; }
.ruta-lista li {
  display: grid;
  grid-template-columns: 72px minmax(150px, 0.6fr) minmax(0, 1fr);
  gap: var(--e3) var(--e4);
  align-items: baseline;
  border-top: 1px solid var(--linea);
  padding: var(--e3) 0;
}
.ruta-lista li:last-child { border-bottom: 1px solid var(--linea); }
.ruta-d {
  font-family: var(--voz);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--cal-3);
  font-variant-numeric: tabular-nums;
}
.ruta-que { font-family: var(--voz); font-size: 15.5px; color: var(--cal); letter-spacing: -0.01em; }
.ruta-det { font-size: 14px; color: var(--cal-2); }

/* El cero es el unico quiebre de la lista, igual que PUERTAS es el unico quiebre de la
   pagina. Es el tercero y ultimo de los focos. */
.ruta-cero { border-top-color: var(--gel-linea); }
.ruta-cero .ruta-d { color: var(--gel); }
.ruta-cero .ruta-que { color: var(--foco); text-shadow: 0 0 26px rgba(255, 255, 255, 0.18); }

@media (max-width: 760px) {
  .ruta-lista li { grid-template-columns: 62px minmax(0, 1fr); }
  .ruta-det { grid-column: 2; }
}


/* ---------------------------------------------------- la fotografia de las herramientas
   Cada herramienta lleva la suya, y cada una tiene referencia directa con lo que dice su
   parrafo: el contrato sobre el case, los afiches uno al lado del otro, la boleteria, el
   case del advancing, las pulseras de los que ya fueron. */

.herramientas .herr-foto { margin: 0 0 var(--e3); }
.herramientas .herr-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.06);
}


/* ----------------------------------------------------------------- D-30 el producto
   Las capturas van a tamano real y apoyadas en la retícula, sin marco de
   dispositivo, sin perspectiva, sin sombra y sin esquinas redondeadas. Un
   documento apoyado plano se lee como evidencia; el mismo documento adentro de un
   telefono flotando se lee como aviso, que es lo que hace toda la categoria. */

.pantallas { display: grid; gap: var(--e5); margin: var(--e5) 0 0; }
.pantalla { margin: 0; }
.pantalla img {
  width: 100%;
  height: auto;
  border: 1px solid var(--linea-fuerte);
}
.pantalla figcaption b { color: var(--cal); font-weight: 500; }


/* ---------------------------------------------------------------- D-14 la auditoria */

.areas { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: 0; }
.areas li {
  display: grid;
  grid-template-columns: minmax(120px, 168px) minmax(0, 1fr);
  gap: var(--e4);
  border-top: 1px solid var(--linea);
  padding: var(--e3) 0;
}
.areas li:last-child { border-bottom: 1px solid var(--linea); }
.area {
  font-family: var(--voz);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--gel);
}
.areas p { margin: 0; font-size: 14.5px; color: var(--cal-2); }
@media (max-width: 640px) { .areas li { grid-template-columns: 1fr; gap: var(--e1); } }


/* -------------------------------------------------------------------- D-3 el metodo */

.metodo {
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e4);
}
.metodo li { border-top: 1px solid var(--linea-fuerte); padding-top: var(--e3); }
.paso-num {
  display: block;
  font-family: var(--voz);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gel);
  margin-bottom: var(--e2);
}
.metodo p { font-size: 13.5px; line-height: 1.62; color: var(--cal-3); margin: var(--e2) 0 0; }


/* ========================================================================= D-0 puertas
   El unico quiebre grafico de la pagina y el tercero de los focos. La escalera de
   luminancia llega aca arriba y despues vuelve a bajar. */

.puertas {
  position: relative;
  background: var(--n4);
  padding: var(--e6) var(--margen) 0;
  text-align: center;
  contain: paint;
}
.puertas-marco { max-width: 46ch; margin: 0 auto; }
.puertas-hora {
  font-family: var(--voz);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--gel);
  margin: 0 0 var(--e3);
}
.puertas-titulo {
  font-family: var(--voz);
  font-weight: 500;
  font-size: clamp(48px, 11vw, 132px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--foco);
  margin: 0;
  max-width: none;
  text-shadow: 0 0 70px rgba(255, 255, 255, 0.22);
}
.puertas-texto {
  color: var(--cal-2);
  margin: var(--e4) auto var(--e6);
  max-width: 44ch;
}
.puertas-foto { margin: 0; }
.puertas-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.05);
}


/* ------------------------------------------------------------- D+1 el settlement */

.liquidacion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: var(--e5);
  margin-top: var(--e5);
  align-items: start;
}
.liq-lista { list-style: none; margin: 0; padding: 0; }
.liq-lista li {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  border-top: 1px solid var(--linea);
  padding: var(--e2) 0;
  font-size: 14.5px;
}
.liq-lista li:last-child { border-bottom: 1px solid var(--linea); }
.liq-lista b {
  font-family: var(--voz);
  font-weight: 400;
  font-size: 12.5px;
  color: var(--cal-3);
  letter-spacing: 0.04em;
  text-align: right;
}
.liq-total { border-left: 1px solid var(--linea-fuerte); padding-left: var(--e4); }
.liq-cifra {
  font-family: var(--voz);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gel);
  margin: 0 0 var(--e3);
  font-variant-numeric: tabular-nums;
}
.liq-nota { font-size: 13.5px; color: var(--cal-3); margin-bottom: var(--e4); }
.liq-entrega {
  font-family: var(--voz);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cal-3);
  margin: var(--e3) 0 0;
}
@media (max-width: 860px) {
  .liquidacion { grid-template-columns: 1fr; }
  .liq-total { border-left: 0; border-top: 1px solid var(--linea-fuerte); padding: var(--e4) 0 0; }
}

.preguntas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e4);
  margin-top: var(--e5);
}
.preg { border-top: 1px solid var(--linea-fuerte); padding-top: var(--e3); }
.preg p { font-size: 14px; color: var(--cal-2); margin: var(--e2) 0 0; }


/* ------------------------------------------------------------------------- el pie */

.pie { background: var(--n0); border-top: 1px solid var(--linea); padding: var(--e6) var(--margen); }
.pie-marco { max-width: var(--ancho); margin: 0 auto; }
.pie-marca {
  font-family: var(--voz);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--cal);
  margin: 0 0 var(--e3);
}
.pie-marca span { color: var(--gel); }
.pie-linea { color: var(--cal-3); font-size: 14px; max-width: 52ch; }
.pie-nav { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin: var(--e4) 0; }
.pie-nav a {
  font-family: var(--voz);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--cal-2);
  text-decoration: none;
  padding: 6px 0;
}
.pie-nav a:hover { color: var(--gel); }
.pie-contacto a { color: var(--gel); font-family: var(--voz); font-size: 13px; }


/* ------------------------------------------------------------------- las entradas */

[data-revela] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-revela].visible { opacity: 1; transform: none; }
html:not(.js) [data-revela] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-revela] { opacity: 1; transform: none; transition: none; }
  .fader-pista::-webkit-slider-thumb { box-shadow: none; }
  h1, .salida-cifra, .puertas-titulo { text-shadow: none; }
}


/* ------------------------------------------------------------------ alto contraste
   forced-colors fuerza los colores del HTML pero no los de un canvas ni los de un
   SVG, y ademas apaga las sombras. Lo que se pierde ahi es el gel entero, que es
   la unica jerarquia cromatica de la pagina: hay que devolverla con borde. */

@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .consola-salida, .sala-lectura, .liq-total { border-left-color: CanvasText; }
  .fader-pista::-webkit-slider-thumb { background: Highlight; }
  .pantalla img, .puertas-foto img, .banda img { border: 1px solid CanvasText; }
  .salida-barra { border: 1px solid CanvasText; }
  .barra-lleno { background: Highlight; }
}

/* ============================================ (e) la gramatica de la referencia, fuera del hero

   El founder pidio que el resto de la pagina estuviera al nivel del hero, y que todo
   siguiera a hiibiza.com pero en oscuro. De esa referencia, lo que se puede traer abajo
   del hero sin romper lo que ya funciona son tres cosas medidas, y ninguna es color:

   1. RADIO GRANDE en todo lo que sea fotografia. Alla las fotos son tarjetas de veinte y
      pico de pixeles de radio flotando sobre el fondo, nunca rectangulos a sangre. Es lo
      que hace que una foto se lea como objeto apoyado y no como relleno.
   2. AIRE. La referencia deja mucho espacio alrededor de pocos elementos.
   3. ESCALA. El titular de seccion crece. La escala vieja topaba en 34px, que en una
      pantalla grande al lado de un hero de 112px se lee como una nota al pie.

   Lo que NO se trae: el fondo tornasolado claro, porque el pedido fue oscuro; y la
   tipografia de titulares, que sigue siendo la mono de este vertical. El hero habla en
   Schibsted 800 en caja alta porque es el momento de escala de la pagina; las secciones
   siguen hablando en Spline Sans Mono de caja mixta, que es la voz que separa a eventos de
   sus seis hermanas. Cambiar las dos habria dejado la pagina sin identidad propia. */

.banda img,
.figura img,
.herr-foto img,
.pantalla img,
.puertas-foto img {
  border-radius: 22px;
  border: 1px solid var(--linea);
}

/* La banda a sangre es la excepcion: una foto que cruza la pantalla entera con radio se
   lee como una tarjeta gigante y pierde la fuerza de la sangre. Se le deja el radio solo
   del lado donde no toca el borde. */
@media (min-width: 941px) {
  .banda img { border-radius: 22px; }
}
@media (max-width: 940px) {
  .banda img { border-radius: 16px; }
}

h2 {
  font-size: clamp(26px, 3.4vw, 44px);
  letter-spacing: -0.03em;
}

/* El aire. Los tramos respiran mas, y la diferencia se nota sobre todo en escritorio,
   donde la pagina venia con la densidad de un documento. */
@media (min-width: 941px) {
  .tramo { padding-block: var(--e6); }
}

/* ------------------------------------------------------------------- D-50 el mapa 3D
   Una fila por vista, con el texto al lado de la captura que lo explica. Se alterna el
   lado en las pares para que la columna de texto no arme un borde recto de tres bloques,
   que es lo que hace que una lista de features se lea como una lista de features. */

.mapas { display: grid; gap: var(--e6); margin-top: var(--e5); }

.mapa-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--e4);
  align-items: center;
}

.mapa-fila:nth-child(even) .mapa-texto { order: 2; }

.mapa-texto h3 { margin-bottom: var(--e2); }
.mapa-texto p { color: var(--cal-2); margin: 0; }

.mapa-vista { margin: 0; }

.mapa-vista img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid var(--linea-fuerte);
}

@media (max-width: 860px) {
  .mapa-fila { grid-template-columns: 1fr; gap: var(--e3); }
  .mapa-fila:nth-child(even) .mapa-texto { order: 0; }
  .mapas { gap: var(--e5); }
}

/* --------------------------------------------------------------- el texto por partes
   Mismo patron que las entradas de bloque: la ocultacion cuelga de `html.js`, asi que sin
   script no se esconde nada y la pagina se lee entera. La primera linea del titular no
   lleva `data-etapa` y por eso nunca se oculta: es el elemento LCP. */

[data-etapa] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-etapa].puesto { opacity: 1; transform: none; }
html:not(.js) [data-etapa] { opacity: 1; transform: none; }

.h1-l { display: block; }

/* La columna derecha: la linea de cue arriba y el instrumento abajo, como un solo objeto
   apoyado en esa esquina. */
.vuelo-derecha {
  position: absolute;
  z-index: 2;
  right: var(--margen);
  bottom: clamp(var(--e5), 12vh, 148px);
  width: min(320px, calc(100vw - var(--margen) * 2));
  display: grid;
  gap: var(--e3);
  justify-items: end;
}

.vuelo-derecha .vuelo-lectura {
  position: static;
  right: auto;
  bottom: auto;
  width: 100%;
}

/* La cue. Cambia sola con la toma, asi que va en la voz de la pagina y no en el cuerpo:
   es un rotulo de sala, no un parrafo. */
.vuelo-cue {
  margin: 0;
  max-width: 34ch;
  text-align: right;
  font-family: var(--voz);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--cal);
  text-shadow: 0 1px 14px rgba(12, 15, 16, 0.9);
}

/* El `display:block` del autor le gana al `[hidden]{display:none}` de la hoja del
   navegador, que es de agente de usuario. Sin esta linea se ven las NUEVE cues apiladas a
   la vez, que es exactamente lo que paso y se veia. */
.cue-linea { display: block; }
.cue-linea[hidden] { display: none; }

@media (max-width: 940px) {
  .vuelo-derecha {
    left: var(--margen);
    right: var(--margen);
    bottom: var(--e4);
    width: auto;
    justify-items: stretch;
  }
  .vuelo-cue { text-align: left; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-etapa] { opacity: 1; transform: none; transition: none; }
  .vuelo-derecha { position: static; width: auto; margin: var(--e4) var(--margen) 0; }
}