/* ═══════════════════════════════════════════════════════════════════════════
   SWEET LITTLE TRAUMA — LA INTRO
   ───────────────────────────────────────────────────────────────────────────
   Una pantalla negra con un video adentro y dos botones. Poco CSS a propósito:
   esto es lo primero que carga alguien que no conoce el sitio, y cada kilobyte
   acá se paga antes del primer cuadro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA CAPA ────────────────────────────────────────────────────────────────
   Antes esto agarraba `html, body` y les ponía `overflow: hidden`. Servía
   cuando la intro era una página entera y sola.

   Desde el 14/09/2026 la intro vive ADENTRO de la portada del Studio: la
   misma página, una capa encima de la otra. Si siguiera tocando `body`, al
   esconderse dejaría el Studio sin scroll. Así que todo lo suyo pasa a estar
   contenido acá, y del scroll se encarga el JavaScript mientras la capa está
   a la vista. */
:root { color-scheme: dark; }

.intro-capa {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  font: 500 13px/1.4 ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: #f2f2f0;
}

.intro-capa[hidden] { display: none; }

/* ── El video ───────────────────────────────────────────────────────────────
   `contain` y no `cover`. El cartel del final es una línea de texto que ocupa
   casi todo el ancho: con `cover`, en un teléfono vertical se recortarían las
   puntas y se leería «ADE WITH MORE TRAUMA THAN COFFE». Las barras negras son
   preferibles a una frase cortada. */
.intro-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* ── Skip y el sonido ───────────────────────────────────────────────────────
   Arriba a la derecha, chicos y apagados. Mientras el video corre, el video es
   lo único que importa: dos pastillas con borde blanco compitiendo con la
   imagen es exactamente lo que no tiene que pasar.

   Se encienden al pasar el mouse. Quien los busca los encuentra; quien no,
   mira la película. */
.intro-mandos {
  position: fixed;
  top: max(22px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 2;
}

.intro-boton {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  padding: 6px 2px;
  background: none;
  color: rgba(242, 242, 240, .5);
  font: 400 10px/1 ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease;
  /* Un velo mínimo detrás, para que se lean sobre un cuadro claro sin tener
     que dibujarles una caja. */
  text-shadow: 0 1px 12px rgba(0, 0, 0, .9);
}

.intro-boton:hover { color: #f2f2f0; }

/* El foco se ve SIEMPRE. En esta pantalla «Skip» es lo primero que el teclado
   toma cuando arranca el video, y un foco invisible deja a quien navega así
   sin saber dónde está parado. */
/* Mismo criterio que «Sound on»: nada de anillos. `autofocus` y el foco que
   se mueve solo al abrirse la intro cuentan como foco visible en Chrome, así
   que un `outline` acá aparece sin que nadie haya tocado el teclado. Se marca
   con el color y, en «Enter», con el filete. */
.intro-boton:focus { outline: none; color: #f2f2f0; }
.intro-boton:focus-visible { outline: none; }
.intro-entrar:focus { border-bottom-color: #f2f2f0; border-bottom-width: 2px; padding-bottom: 8px; }

.intro-sonido { display: inline-flex; align-items: center; }

/* El altavoz, dibujado con bordes. Sin etiqueta: el icono alcanza y una
   palabra al lado duplicaba lo que ya dice la forma. */
.intro-sonido-icono {
  width: 11px; height: 11px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .9;
  position: relative;
}
.intro-sonido-icono::after {
  content: '';
  position: absolute;
  left: 2px; bottom: 0;
  width: 6px; height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
.intro-sonido[aria-pressed="true"] { color: rgba(242, 242, 240, .92); }

/* ── Enter ──────────────────────────────────────────────────────────────────
   Abajo y centrado: el cartel del final está en el medio de la pantalla y un
   botón encima lo taparía. Mismo filete que «Sound on», para que se lean como
   la misma familia — es la entrada y la salida de la misma pieza. */
.intro-entrada {
  position: fixed;
  left: 0; right: 0;
  bottom: max(9vh, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  z-index: 2;
}

.intro-entrada[hidden] { display: none; }

.intro-entrar {
  border-bottom: 1px solid rgba(242, 242, 240, .5);
  padding: 0 4px 9px;
  font-size: 13px;
  letter-spacing: .26em;
  text-indent: .26em;
  color: #f2f2f0;
  /* Aparece con una subida corta. Lo único que se mueve en toda la pantalla, y
     sólo una vez: en una imagen quieta, algo que aparece de golpe se lee como
     un error de dibujo. */
  animation: intro-sube .6s cubic-bezier(.2, .7, .2, 1) both;
}

.intro-entrar:hover { border-bottom-color: #f2f2f0; }

@keyframes intro-sube {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-entrar { animation: none; }
}

.intro-sinjs {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 3;
}
.intro-sinjs a { color: #f2f2f0; }

/* ── Quien pidió menos movimiento ───────────────────────────────────────────
   Un video a pantalla completa que arranca solo es exactamente lo que esta
   preferencia del sistema pide evitar. No se le esconde la intro: se le da
   quieta, con el primer cuadro y los dos botones, y que decida. */
@media (prefers-reduced-motion: reduce) {
  .intro-entrar { animation: none; }
}

@media (max-width: 640px) {
  .intro-boton { padding: 9px 15px; font-size: 12px; }
  .intro-sonido-texto { display: none; }
  .intro-entrar { padding: 14px 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL PORTÓN
   ───────────────────────────────────────────────────────────────────────────
   Chico. Lo primero que se ve no tiene por qué ser lo más grande.

   La primera versión era una pastilla enorme con halo y un latido, y debajo
   dos renglones explicando qué iba a pasar. Cada cosa se justificaba sola y
   juntas daban un cartel. Un cartel en el medio de una pantalla negra no se
   lee como una marca: se lee como una promoción.

   Lo que quedó: una sola línea de texto con un filete abajo, y debajo, mucho
   más apagada, la salida sin sonido. Nada más. El negro hace el trabajo; el
   botón solo tiene que estar.

   Sin halo, sin animación de entrada, sin latido. Una pieza quieta sobre negro
   se lee como intención; una que respira, como que pide atención.
   ═══════════════════════════════════════════════════════════════════════════ */

.intro-portada {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: #000;
  padding: 24px;
}

.intro-portada[hidden] { display: none; }

.intro-portada-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

/* ── «Sound on» ─────────────────────────────────────────────────────────────
   Texto y un filete. No es un botón dibujado como botón: es una palabra que se
   puede tocar, que es lo que hace falta acá. El área de toque la da el padding,
   que es generoso aunque no se vea. */
.intro-luz {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgba(242, 242, 240, .42);
  border-radius: 0;
  padding: 0 4px 9px;
  margin: 0;
  background: none;
  color: #f2f2f0;
  font: 400 15px/1 ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .26em;
  text-indent: .26em;            /* compensa el espaciado de la última letra */
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .35s ease, color .35s ease;
}

.intro-luz:hover { border-bottom-color: #f2f2f0; }

/* ── EL FOCO NO ES UNA CAJA ─────────────────────────────────────────────────
   Un `outline` alrededor dibuja el rectángulo que todo este rediseño saca. Y
   acá se ve siempre, porque el botón arranca enfocado: la pantalla abría con
   un recuadro puesto.

   El foco se marca en el filete, que ya es la pieza que define al botón: pasa
   a blanco pleno y se engrosa. Cambia el color y la forma, no sólo el color,
   así que sigue sirviendo para quien no distingue bien los grises.

   El `outline` de verdad queda sólo para `:focus-visible`, que es el que el
   navegador enciende cuando alguien navega con el teclado — ahí un anillo es
   lo esperado y no molesta a nadie. */
.intro-luz:focus {
  outline: none;
  border-bottom-color: #f2f2f0;
  border-bottom-width: 2px;
  padding-bottom: 8px;           /* compensa el píxel que engorda el filete */
}

/* Ni siquiera para `:focus-visible`. En Chrome, `autofocus` cuenta como foco
   visible, así que la pantalla abría igual con el recuadro puesto. El filete
   blanco y engrosado es indicador suficiente: cambia contraste Y grosor, que
   es lo que hace falta para que se note sin dibujar una caja. */
.intro-luz:focus-visible { outline: none; }

/* ── La salida sin sonido ───────────────────────────────────────────────────
   Muy apagada, pero ahí. Tiene que costar encontrarla sólo lo justo para que
   quede claro cuál es el camino principal. */
.intro-secundario {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 4px 6px;
  background: none;
  color: #55565c;
  font: 400 10px/1 ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .35s ease;
}

.intro-secundario:hover { color: #9a9b9f; }
.intro-secundario:focus { outline: none; color: #f2f2f0; }
.intro-secundario:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 5px; }

.intro-mandos[hidden] { display: none; }

@media (max-width: 640px) {
  .intro-luz { font-size: 13px; letter-spacing: .22em; text-indent: .22em; }
  .intro-portada-centro { gap: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA INTRO COMO FONDO (portada, decisión D3 del 01/10/2026)
   ───────────────────────────────────────────────────────────────────────────
   En la portada la intro no tapa la pantalla: se apoya DETRÁS de la caja
   «Contame qué querés hacer». Todo lo de abajo está atado a `.intro-capa-fondo`
   y a `.entrada-portada`, así que /intro/ —que no los usa— se ve igual que
   siempre.

   La capa llena la sección y adentro lleva un lienzo `sticky` del alto de la
   ventana: cuando la tarjeta del plan hace crecer la sección, la intro se
   queda donde está en vez de estirarse.
   ═══════════════════════════════════════════════════════════════════════════ */

.entrada-portada {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  min-height: 100svh;
  /* El menú de arriba es fijo y mide unos 76 px. */
  /* Abajo queda aire de sobra: el velo del final se come los últimos 90 px y la
     bajada tiene que verse entera arriba de él. */
  padding: clamp(92px, 12vh, 132px) 0 clamp(96px, 14vh, 150px);
  background: #000;
  overflow: clip;
}

/* El tramo final se funde con lo que sigue: el hero, que es claro. Es un
   velo de negro a transparente, no un degradé de color. */
.entrada-portada::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: clamp(60px, 10vh, 120px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  pointer-events: none;
  z-index: 1;
}

.entrada-montaje { position: relative; z-index: 2; width: 100%; pointer-events: none; }
/* El montaje ocupa todo el ancho, por encima de los mandos de la intro: solo
   la caja y lo suyo reciben el toque; lo demás lo deja pasar a «Con sonido» y
   «Saltar», que están debajo, arriba a la derecha. */
.entrada-montaje > * { pointer-events: auto; }

.intro-capa-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
  overflow: clip;
}

.intro-lienzo {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* El cartel está siempre debajo: es lo que se ve hasta el primer cuadro, lo que
   queda si se salta y lo único que se ve en el celular. */
.intro-cartel,
.intro-capa-fondo .intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.intro-capa-fondo .intro-video { background: transparent; }
.intro-video[hidden] { display: none; }

/* El velo protege el texto de la caja: oscurece la intro sin apagarla, y le
   deja el grano. Es negro con transparencia, nada de color. */
.entrada-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .62), rgba(0, 0, 0, .4) 38%, rgba(0, 0, 0, .66));
  pointer-events: none;
}
.entrada-velo::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><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(%23g)'/></svg>");
}

/* Los mandos de la intro como fondo: «Con sonido» y «Saltar», arriba a la
   derecha, debajo del menú. Chicos y apagados. */
.intro-capa-fondo .intro-mandos {
  position: absolute;
  top: clamp(88px, 11vh, 108px);
  right: max(20px, env(safe-area-inset-right));
  z-index: 3;
}
.intro-capa-fondo .intro-mandos[hidden] { display: none; }
.intro-capa-fondo .intro-boton[hidden] { display: none; }
.intro-capa-fondo .intro-sonido { gap: 9px; }
/* En el fondo el botón de sonido lleva su palabra (en /intro/ es solo el
   altavoz): sin la palabra, nadie sabría qué hace. */
.intro-capa-fondo .intro-sonido-texto { display: inline; }
.intro-capa-fondo .intro-boton { color: rgba(242, 242, 240, .72); }
.intro-capa-fondo .intro-boton:hover,
.intro-capa-fondo .intro-boton:focus-visible { color: #f2f2f0; }
.intro-capa-fondo .intro-boton:focus-visible { outline: 2px solid #f2f2f0; outline-offset: 4px; }

/* En el celular: el cartel llena la pantalla, fijo. Hay más pantalla de alto
   que de ancho, y el cartel es una línea ancha: se centra arriba y se deja
   respirar detrás del velo. */
@media (max-width: 900px) {
  /* Con el menú plegado el encabezado ocupa dos renglones y mide unos 120 px. */
  .entrada-portada { padding-top: 140px; }
}
@media (max-width: 600px) {
  /* En el celular la barra es una sola fila (portada-identidad.css). */
  .entrada-portada { padding-top: 92px; }
}
@media (max-width: 640px) {
  .intro-cartel { object-fit: cover; object-position: 50% 40%; }
  .intro-capa-fondo .intro-mandos { top: 72px; right: 12px; }
  .intro-capa-fondo .intro-boton { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-capa-fondo .intro-video { transition: none; }
}