/* Las landings por intención de búsqueda.
 *
 * Axel, 2026-09-27: "la página de icebath que tenga el formato de mind". Entonces esta hoja NO
 * inventa un lenguaje nuevo: carga después de `mind.css` y solo resuelve las tres piezas que
 * `/mind/` no tiene, porque no las necesitaba.
 *
 *   1. Un hero de una sola foto vertical, que es lo único que existe del ice bath.
 *   2. Una lista de "qué incluye" y un FAQ, que en una landing son contenido y no decoración:
 *      Google lee las dos, y el visitante decide con ellas.
 *   3. Un placeholder de TEXTO. `mind.css` tiene uno de foto (`.ritual__falta`); acá el hueco no
 *      es una imagen que falta, es un párrafo que falta, y el hueco es el motivo por el que la
 *      página no se indexa todavía.
 *
 * Todo lo demás -tipografía, botones, barra, humo, cierre- sale de las hojas de Mind sin tocarse.
 */

/* ------------------------------------------------------------------ el hero */

/* A diferencia del hero de /mind/, acá la foto NO va a sangre detrás del texto.
 *
 * La de Mind es un plano de una choza al que se le puede tirar el texto encima porque la mitad del
 * cuadro es noche. La única foto que hay del ice bath es vertical (900x1200) y tiene el sujeto en
 * el medio: a sangre en una pantalla apaisada se recorta a una banda, y con el texto encima tapa
 * justo lo que se quiere mostrar. Así que van lado a lado y cada uno se ve entero. */
.landing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: 100svh;
  padding: calc(var(--margen) + 4.5rem) var(--margen) var(--margen);
  isolation: isolate;
}

.landing-hero__texto { max-width: 34rem; }

/* El H1 NO usa el tamano de `--t-hero`, y no es un capricho.
 *
 * `--t-hero` (hasta 5.4rem) esta calibrado para el hero de /mind/, donde el titular es una frase
 * corta ocupando el ancho entero de la pantalla. Acá el H1 es una oración -tiene que traer el
 * término que la página pelea Y decir de qué se trata- y vive en media columna. A 5.4rem se salía
 * de la pantalla: medido a 1280x860, la última palabra quedaba cortada abajo del pliegue.
 *
 * El tope de 3.1rem es el punto donde la oración entera entra arriba del pliegue a 1280x860 y
 * sigue entrando a 1440. El `vh` en el clamp es el que lo cuida en pantallas bajas, que es donde
 * un titular grande se come la bajada y los botones. */
.landing-hero .hero {
  font-size: clamp(1.75rem, min(3.3vw, 5.6vh), 3.1rem);
  line-height: 1.02;
}

/* La bajada y los botones, apretados contra el titular: son parte del mismo bloque de decisión. */
.landing-hero__texto .parrafo { margin-top: 1.1rem; }
.landing-hero__texto .acciones { margin-top: 1.5rem; }

.landing-hero__foto {
  width: 100%;
  height: min(74svh, 46rem);
  object-fit: cover;
  object-position: center;
  border-radius: 2px;
  /* El mismo velo que usa el resto de Mind para que una foto no grite sobre la noche. */
  filter: saturate(0.92) brightness(0.86);
}

/* En teléfono el hero se apila, y **el texto va primero**.
 *
 * Esto se decidió midiendo, no a ojo. Con la foto arriba, a 375x812 el hero medía 932 px: 108 de
 * despeje de la barra + 341 de foto + 24 de aire + 439 de texto. Los dos botones -el de cotizar
 * incluido- quedaban **abajo del pliegue**, y en una página cuyo único trabajo es que alguien pida
 * una cotización, eso es el error caro.
 *
 * Achicar la foto no alcanzaba: hay que recortar 120 px a 375, y a 360x640 no entra ni con la foto
 * en la mitad. Invirtiendo el orden, el titular, la bajada y los dos botones cierran a los 547 px y
 * entran enteros en cualquier teléfono. La foto queda a un centímetro de scroll, que es lo que se
 * paga por tener el CTA a la vista.
 *
 * `height: auto` en la foto es deliberado: recortar una foto vertical dentro de un teléfono
 * vertical es recortarla dos veces. */
@media (max-width: 860px) {
  .landing-hero {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 1.5rem;
    padding-top: calc(var(--margen) + 5.5rem);
  }
  .landing-hero__texto { order: 1; }
  /* El `order` va en el elemento de grilla, que es el `<picture>`, no el `<img>` de adentro: con
     el `order` en la foto el texto seguía quedando segundo en teléfono. */
  .landing-hero picture { order: 2; }
  .landing-hero__foto { height: auto; max-height: 52svh; }
}

/* --------------------------------------------------- la lista de qué incluye */

.lista-incluye {
  list-style: none;
  margin: clamp(1.2rem, 3vh, 2rem) 0 clamp(1.2rem, 3vh, 2rem);
  padding: 0;
  display: grid;
  gap: 0.6rem;
  max-width: 44rem;
}

.lista-incluye li {
  position: relative;
  padding-left: 1.6rem;
  font: 400 var(--t-dato, 1rem)/1.5 var(--tipo-texto, 'Work Sans'), sans-serif;
  color: color-mix(in oklch, var(--c-hueso) 86%, transparent);
}

/* El rombo es el mismo separador que usa la marquesina y el cierre de ciudades. Una viñeta redonda
 * sería un elemento nuevo en un sistema que ya tiene el suyo. */
.lista-incluye li::before {
  content: '\25C6';
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 0.62em;
  color: var(--c-brasa);
}

/* --------------------------------------------------------------------- FAQ */

/* `<details>` nativo y no un acordeón por JavaScript.
 *
 * Dos razones, y la segunda es la que manda en una página cuyo trabajo es rankear: sin JavaScript
 * sigue abriendo, y el texto de la respuesta está en el HTML aunque el bloque esté cerrado, así
 * que Google lo lee igual. Un acordeón que inyecta el contenido al hacer clic no se indexa. */
.faq {
  margin-top: clamp(1.2rem, 3vh, 2rem);
  max-width: 48rem;
  border-top: 1px solid color-mix(in oklch, var(--c-hueso) 16%, transparent);
}

.faq__item { border-bottom: 1px solid color-mix(in oklch, var(--c-hueso) 16%, transparent); }

.faq__item > summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2.2rem 1rem 0;
  position: relative;
  font: 500 clamp(1rem, 1.6vw, 1.15rem)/1.4 var(--tipo-texto, 'Work Sans'), sans-serif;
  color: var(--c-hueso);
}

.faq__item > summary::-webkit-details-marker { display: none; }

/* La cruz que gira a la apertura. Es el único gesto de motion del bloque: un FAQ que se mueve de
 * más se vuelve difícil de leer, que es exactamente lo contrario de para qué está. */
.faq__item > summary::after {
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.425rem;
  background:
    linear-gradient(var(--c-brasa), var(--c-brasa)) center/100% 1px no-repeat,
    linear-gradient(var(--c-brasa), var(--c-brasa)) center/1px 100% no-repeat;
  transition: transform 0.25s ease;
}

.faq__item[open] > summary::after { transform: rotate(45deg); }

.faq__item > summary:focus-visible {
  outline: 2px solid var(--c-brasa);
  outline-offset: 3px;
}

.faq__item > .parrafo,
.faq__item > .placeholder { margin: 0 0 1.1rem; max-width: 44rem; }

@media (prefers-reduced-motion: reduce) {
  .faq__item > summary::after { transition: none; }
}

/* ------------------------------------------------- el placeholder de texto */

/* Dice lo que es, qué falta y por qué importa. Mismo criterio que el placeholder de foto de
 * `mind.css`: el hueco se resuelve a la vista en vez de disimularse. Acá además no es cosmético —
 * mientras este bloque exista, la página lleva `noindex` y está fuera del sitemap. */
.placeholder--texto {
  margin: clamp(1rem, 2.5vh, 1.6rem) 0 0;
  padding: 1rem 1.15rem;
  max-width: 44rem;
  border: 1px dashed color-mix(in oklch, var(--c-oro) 46%, transparent);
  background: color-mix(in oklch, var(--c-noche) 76%, #000);
  font: 400 0.9rem/1.55 var(--tipo-texto, 'Work Sans'), sans-serif;
  color: color-mix(in oklch, var(--c-hueso) 74%, transparent);
}

.placeholder--texto b {
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-oro);
}

/* ------------------------------------------- la barra en telefono */

/* En un telefono la barra de la landing lleva SEIS elementos -cuatro anclas, el idioma y el CTA- y
 * no entran: medido a 375, "Pedir cotización" salia cortado por el borde derecho. Dejar ilegible
 * el CTA en la pagina cuyo unico trabajo es que alguien cotice es el peor lugar para ahorrar.
 *
 * Se van las anclas, no el CTA. Un menu de saltos sirve en /paint/ y /mind/, que son paginas
 * largas con secciones que se buscan; esta es una sola lectura de arriba a abajo y el dedo ya sabe
 * hacer scroll. Quedan el cambio de idioma y el boton, que son las dos cosas que no se resuelven
 * scrolleando. Esta hoja solo la cargan las landings, asi que /paint/ y /mind/ no se enteran. */
@media (max-width: 860px) {
  .barra nav a[href^="#"]:not(.barra__cta) { display: none; }
}

/* El cambio de idioma se mudó a `paint.css` cuando el sitio entero pasó a tener versión en inglés:
 * ahora lo llevan las ocho páginas, no solo las landings, y `paint.css` es la única hoja que
 * cargan todas. Dejarlo acá habría hecho que el enlace apareciera sin estilo en el portal. */

/* ------------------------------------------ la galería de material propio */

/* Fotos y loops mudos en una sola grilla.
 *
 * Una grilla y no un carrusel. Un carrusel esconde ocho de nueve piezas detrás de un gesto que la
 * mitad de la gente no hace, y acá el material ES el argumento: esta página tiene que convencer de
 * que el montaje existe y de que hay alguien acompañando, y eso se ve de un vistazo o no se ve.
 *
 * Las nueve celdas van a 3:4 aunque los loops sean 9:16. `object-fit: cover` les recorta arriba y
 * abajo, que en estos tres clips es cielo y pasto: el sujeto está en el tercio central de los tres
 * -se eligió el tramo mirándolo- y sobrevive al recorte. Mezclar 3:4 con 9:16 en la misma grilla
 * deja escalones entre las filas y la pieza se lee como un accidente. */
.galeria-landing {
  list-style: none;
  margin: clamp(1.4rem, 3.5vh, 2.4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
}

.galeria-landing__pieza {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in oklch, var(--c-noche) 80%, #000);
}

.galeria-landing__pieza > img,
.galeria-landing__pieza > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* El mismo velo del hero: sobre la noche de Mind, una foto de mediodía a pleno sol grita. */
  filter: saturate(0.92) brightness(0.88);
}

/* El loop no se marca de ninguna manera, y eso es lo correcto.
 *
 * Primero llevaba una regla de oro abajo, para distinguirlo de una foto. Axel, 2026-09-29: *"hay
 * una línea amarilla en la base [de] 2 [de] los 3 videos, no sé de dónde viene pero sácala"*. Tenía
 * razón por un motivo que no es solo de gusto: en una grilla donde los loops YA se mueven, el
 * marcador no informa nada -se ve que es video porque se mueve- y en cambio sí rompe la grilla, que
 * es lo único que la hacía leerse como una pieza sola.
 *
 * Un triángulo de "play" tampoco va: sobre un video que ya se está reproduciendo es una mentira, y
 * el visitante lo toca esperando que arranque. */
.galeria-landing__pieza--clip { position: relative; }

@media (max-width: 720px) {
  .galeria-landing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------ los testimonios filmados */

/* Dos videos verticales, uno al lado del otro y nunca más anchos que una columna de lectura.
 *
 * `max-width` en la lista y no en el `<li>`: dos videos 9:16 estirados a media pantalla de
 * escritorio miden 700 px de alto cada uno y empujan el formulario -que es lo que esta página
 * viene a conseguir- fuera de dos pantallas más de scroll. A 300 px de ancho se ven enteros, se
 * leen los subtítulos, y el cierre queda a un scroll. */
.testimonios-landing {
  list-style: none;
  margin: clamp(1.4rem, 3.5vh, 2.4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
  max-width: 41rem;
}

.testimonios-landing__pieza { margin: 0; }

.testimonios-landing__pieza > video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  display: block;
  border-radius: 2px;
  background: color-mix(in oklch, var(--c-noche) 80%, #000);
  /* Sin el velo de la galería: acá la cara de quien habla es el contenido, y oscurecerla para que
   * combine con la página es exactamente lo que no hay que hacer. */
}

.testimonios-landing__quien {
  margin: 0.65rem 0 0;
  font: 400 0.82rem/1.4 var(--tipo-texto, 'Work Sans'), sans-serif;
  letter-spacing: 0.04em;
  color: color-mix(in oklch, var(--c-hueso) 66%, transparent);
}

@media (max-width: 560px) {
  .testimonios-landing { grid-template-columns: 1fr; max-width: 22rem; }
}

/* --------------------------------------------------------- el fondo de hielo */

/* Reemplaza al humo de copal en la landing de ice bath.
 *
 * Axel, 2026-09-29: "que el fondo sea como hielo en agua, no? No tiene sentido el humo ahí". El
 * humo es el aire de /mind/ —la ceremonia, el sahumador, la palapa de noche—; en una página que
 * vende una inmersión en agua helada a las 10:30 de la mañana está contando otro servicio.
 *
 * ## Va A SANGRE, y eso se decidió después de equivocarse
 *
 * La primera versión era una columna contra el margen, copiando la geometría del humo, a 34% de
 * opacidad. Axel: "sigo viendo negro y humo, no agua y hielo". Y: "es realista no? No quiero un
 * css, quiero agua y hielo realista". Las dos cosas eran ciertas:
 *
 *  - **Una columna no es un fondo.** Un fondo se ve detrás de todo; una columna al costado se lee
 *    como una textura decorativa, y una textura decorativa a 34% se lee como humo.
 *  - **34% con desenfoque 4 borra el material.** El clip ES agua con hielo filmada por el cliente,
 *    pero a esa opacidad y ese desenfoque no quedaba nada que identificar.
 *
 * Ahora va a pantalla completa, al 55%, con el clip a desenfoque 1: se distinguen los pedazos de
 * hielo, que es lo único que hace que la imagen diga "hielo".
 *
 * ## Y el texto sigue legible, medido
 *
 * El oscurecido serio va HORNEADO en el clip (ver scripts/hielo-video.mjs, que mide la luma del
 * archivo publicado y falla si se pasa). Encima va el velo de esta hoja. La composición se midió
 * en el navegador, no se estimó. */
.hielo-caja {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* El color de la página debajo del video: donde el clip es oscuro, se mezcla con esto. */
  background: var(--c-noche);
}

.hielo-video {
  position: absolute;
  /* Sobra 12% arriba y abajo: es el margen que necesita la deriva del scroll para no despegarse
     del borde. Ver assets/js/landing-hielo.js. */
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  opacity: 0.9;
  /* Se apaga contra el borde de arriba y el de abajo. Arriba porque ahí está la barra, que es
     texto chico sobre transparente y es lo primero que se vuelve ilegible; abajo porque el cierre
     de la página es el formulario y ahí no puede haber nada compitiendo. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
}

/* El velo que protege al cuerpo de texto.
 *
 * Un velo y no menos opacidad en el video: bajarle la opacidad al video apaga el hielo en TODA la
 * pantalla, incluido el lado donde no hay nada escrito, que es justamente donde queremos que se
 * vea. Este gradiente oscurece la banda donde viven los párrafos y deja el resto del cuadro
 * respirando.
 *
 * **Es parejo, no un degradé hacia un lado.** Empezó siendo un degradé que se abría a la derecha,
 * porque abajo del hero el texto va a la izquierda. Pero en el HERO el texto va a la DERECHA (la
 * foto ocupa la izquierda), así que el lado que se abría era justo el que tenía el titular encima.
 * Un velo parejo es peor en teoría y mejor en la práctica: no hay ninguna franja de la página
 * donde el texto quede sin proteger.
 *
 * El número sale de medir, no de probar a ojo. Con el clip al 90% y el velo al 55%, el píxel más
 * claro del hielo deja el cuerpo de texto en **5.1:1** y el promedio en **10.7:1**; AA pide 4.5.
 * Sin hielo la página mide 15.3:1, así que el fondo cuesta contraste: eso es lo que se está
 * comprando, y por eso el número está escrito acá y no en la cabeza de nadie.
 *
 * Y el que hace que ese número cierre no es este velo sino la curva de altas luces del clip (ver
 * `SPEC.curva` en scripts/hielo-video.mjs): bajarle la opacidad al video apagaba el hielo entero
 * para arreglar el 2% de los píxeles. */
 * La medición está hecha en el navegador componiendo el cuadro real del video contra los colores
 * reales de la página, no estimando. */
.hielo-caja::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--c-noche) 55%, transparent);
}

/* En teléfono el copy ocupa el ancho entero y no hay lado libre: el velo se vuelve parejo y un
 * poco más cerrado. El hielo se sigue viendo —es el fondo de toda la pantalla— pero no hay ninguna
 * banda donde el texto caiga sobre un pedazo claro. */
@media (max-width: 760px) {
  .hielo-video { opacity: 0.85; }
  .hielo-caja::after {
    background: color-mix(in oklch, var(--c-noche) 56%, transparent);
  }
}

/* ----------------------------------------------------- los tramos y sus peines */

/* La página es cuatro tramos, y el peine es el BORDE entre dos, no una transición.
 *
 * Axel, 2026-09-29, después de tres versiones equivocadas mías: "no tiene movimiento, es solo un
 * peine que revela el hielo", "que quede estático como el otro", "es un efecto SIMPLE".
 *
 * Tenía razón las tres veces y mi error era de arquitectura: yo armaba una capa que tapaba la
 * pantalla, con timeline y observadores, cuando lo que se pide es un borde dibujado que aparece al
 * scrollear como cualquier otro elemento. Acá no hay una sola línea de JavaScript ni una sola
 * animación: el peine está ahí, quieto, y lo que lo mueve es el scroll de la página. */
.tramo {
  position: relative;
  /* Cada tramo pinta su propio fondo. Antes había UN fondo fijo para toda la página y por eso hacía
     falta tapar la pantalla para cambiarlo: no existía un estado donde media pantalla fuera hielo y
     la otra media hueso. Con un fondo por tramo, ese estado es justamente lo que se ve. */
  background: var(--c-noche);
}

.tramo--hueso { background: var(--c-pared); }

/* El tramo del hielo.
 *
 * El fondo se queda pegado a la pantalla mientras dura el tramo, y desaparece al salir, **sin una
 * línea de JavaScript**: es `position: sticky`, no `fixed`.
 *
 * El primer intento fue `clip-path: inset(0)` en el tramo, que convierte al envoltorio en bloque
 * contenedor de sus hijos `fixed`. Funciona para recortar, pero entonces `inset: 0` mide contra el
 * TRAMO y no contra la pantalla: el video salía estirado a los 8064 px de alto del tramo. Medido.
 *
 * Con `sticky` el video mide una pantalla, se pega arriba mientras el tramo pasa y se va solo
 * cuando el tramo termina. El `margin-bottom` negativo lo saca del flujo para que no empuje al
 * contenido una pantalla hacia abajo. */
.tramo--hielo { background: var(--c-noche); }

.tramo--hielo .hielo-caja {
  position: sticky;
  inset: auto;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
}

/* El contenido del tramo va por encima del fondo Y del fundido: el fundido tapa el fondo, nunca el
   texto. Regla 7 de `calidad.md`: el movimiento no tapa el mensaje ni el CTA, y esta página tiene
   un solo trabajo, que es el formulario. */
.tramo > section,
.tramo > .tramo-aire { position: relative; z-index: 2; }

/* El fundido entre tramos.
 *
 * Axel, 2026-09-29, después de tres intentos míos con un peine: "olvidémonos del peine, hagamos un
 * simple fade, como un difuminado que se extiende y ya. Hacelo como el de Escena Global pero 3 o
 * hasta 4 veces más largo."
 *
 * La capa la crea `assets/js/landing-fundido.js` con el color del tramo anterior, y su opacidad va
 * de 1 a 0 a lo largo de **2.1 pantallas** de scroll (el de Escena Global dura 0.6).
 *
 * `sticky` y no `absolute`: con 2.1 pantallas de recorrido, una capa de una pantalla se termina
 * antes que el fundido y el resto del tramo aparece de golpe con su color final. Pegada, cubre la
 * pantalla durante todo el recorrido; el `margin-bottom` negativo la saca del flujo. */
.tramo__fundido {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100svh;
  margin-bottom: -100svh;
  pointer-events: none;
}

/* ------------------------------------------------------- el registro claro */

/* El tramo de hueso: seguridad, preguntas y testimonios.
 *
 * Es el "después" de la inmersión —el té caliente, la toalla, el grupo hablando— y por eso está en
 * el color de Paint y no en la noche de Mind. Los colores no se inventan: son los mismos tokens que
 * usa `/paint/`.
 *
 * Va por `.tramo--hueso` y no por una clase en cada sección porque el tramo ya es un envoltorio: el
 * color del texto cuelga del mismo elemento que pinta el fondo, y no pueden desincronizarse. */
.tramo--hueso .h2,
.tramo--hueso .h3,
.tramo--hueso .hero { color: var(--c-tinta); }

.tramo--hueso .parrafo { color: var(--c-tinta-suave); }
.tramo--hueso .lista-incluye li { color: var(--c-tinta-suave); }

.tramo--hueso .faq__item {
  border-bottom-color: color-mix(in oklch, var(--c-tinta) 18%, transparent);
}
.tramo--hueso .faq__item > summary { color: var(--c-tinta); }

/* El placeholder de seguridad sigue siendo un placeholder: sobre claro se lee peor en oro, así que
   la tinta del borde y del texto se invierten. Lo que NO cambia es que se vea que es un hueco. */
.tramo--hueso .placeholder--texto {
  border-color: color-mix(in oklch, var(--c-tinta) 38%, transparent);
  background: color-mix(in oklch, var(--c-pared) 70%, #fff);
  color: var(--c-tinta-suave);
}
.tramo--hueso .placeholder--texto b { color: var(--c-tinta); }
.tramo--hueso .testimonios-landing__quien { color: var(--c-tinta-suave); }

/* -------------------------------------------------- el aire antes de cada peine */

/* Una franja vacía delante de cada cambio de tramo.
 *
 * Axel, 2026-09-29, señalando el hueco entre "la sesión" y la galería: "donde está el cursor hay
 * que dejar más espacio en blanco para que la transición suceda mejor, así en cada transición".
 *
 * No es margen: es una sección propia y lleva el `data-tramo` del tramo que ENTRA, así el cambio
 * se dispara mientras el hueco ocupa el centro de la pantalla y la cortina corre sobre nada. Sin
 * esto, la cortina tapaba un párrafo a mitad de frase.
 *
 * 52svh y no un valor fijo: tiene que ser más de medio viewport para que exista un momento en que
 * el hueco es lo único que se ve; menos que eso y siempre hay texto en pantalla. En teléfono baja
 * a 38svh, donde media pantalla ya es mucho scroll vacío. */
.tramo-aire {
  display: block;
  height: 52svh;
  pointer-events: none;
}

@media (max-width: 760px) {
  .tramo-aire { height: 38svh; }
}

/* El aire es del diseño, no del movimiento: se queda igual con `prefers-reduced-motion`. */


/* ------------------------------------------ la placa del cierre sobre el hielo */

/* El bloque de cierre —el texto, el WhatsApp y el formulario— va sobre una placa oscura.
 *
 * Hacen falta las dos cosas que resuelve, y las dos se vieron en una captura de `medir-scroll`, no
 * razonando:
 *
 *  1. **Durante el fundido.** El cierre entra desde el tramo de hueso, así que por dos pantallas de
 *     scroll hay una capa clara encima del hielo. El texto de Mind es hueso: hueso sobre hueso no
 *     se lee. Es el fallo que la receta de `fundido-de-luz` anota primero.
 *  2. **Después del fundido.** El hielo tiene cubos casi blancos, y un formulario es texto chico y
 *     líneas de 1 px. Sobre un fondo con ese rango, la placa es lo que hace que se lea siempre.
 *
 * Es un color, no un `backdrop-filter`: el segundo rasteriza la caja entera en cada cuadro y esta
 * caja ocupa media pantalla. */
.tramo--hielo .mind-cierre .bloque {
  background: color-mix(in oklch, var(--c-noche) 72%, transparent);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.2rem, 4vw, 2.6rem);
  border-radius: 3px;
}

/* --------------------------------------------------------------- <picture> */

/* El `<picture>` es el elemento de caja, NO `display: contents`.
 *
 * `display: contents` parecía lo correcto —hace desaparecer al `<picture>` y deja al `<img>` como
 * hijo directo de la grilla— y rompió el hero en producción: con el `<picture>` disuelto, su
 * `<source>` también pasa a ser hijo de la grilla y **se queda con la primera columna**. El
 * resultado era la foto corrida a la columna derecha y el texto empujado a una segunda fila, con
 * media pantalla en negro. Axel lo vio y preguntó por qué se veía así.
 *
 * Medido en el navegador: grilla `570px 515px`, la foto arrancando en x=685 (columna 2) y el texto
 * en y=720 (fila 2).
 *
 * Con el `<picture>` en bloque, él es el elemento de grilla y el `<img>` de adentro lo llena. */
.landing-hero picture {
  display: block;
  width: 100%;
  min-width: 0;
}

.galeria-landing__pieza picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------- la lista de quién no debería entrar */

/* Misma forma que "qué incluye", significado opuesto: ahí el punto invita, acá frena. El color lo
 * dice sin escribir una advertencia, que es lo que pidió Axel — "no le demos tanta vuelta". */
.lista-incluye--freno li::before { color: var(--c-oro); }

/* -------------------------------------------------- el video propio de un bloque */

/* Un bloque puede llevar SU video, distinto del de la galería. Hoy lo usa el static dance.
 *
 * Angosto y alineado a la izquierda, con la columna de texto: no es una pieza de galería
 * compitiendo por la pantalla, es la ilustración del párrafo que tiene arriba. */
.bloque-clip {
  margin-top: clamp(1.2rem, 3vh, 2rem);
  max-width: 22rem;
}

.bloque-clip video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  display: block;
  border-radius: 2px;
  object-fit: cover;
  background: color-mix(in oklch, var(--c-noche) 80%, #000);
  filter: saturate(0.92) brightness(0.88);
}

/* ------------------------------------- las cuatro piezas de la Experiencia Completa */

/* Una tarjeta por actividad, con su video o su foto arriba.
 *
 * Axel, 2026-09-29, sobre la primera versión —un título, una lista de cuatro renglones y dos
 * párrafos—: "le falta RESALTAR MÁS, hablar más extendido del yoga y del breathwork aunque repita
 * info de mind, usar algunas fotos-videos ahí también".
 *
 * Cuatro columnas en escritorio, dos en tablet, una en teléfono. Cuatro y no tres: las cuatro
 * actividades pesan lo mismo dentro de la experiencia y partirlas 3+1 haría que la cuarta parezca
 * un agregado. */
.experiencia-piezas {
  list-style: none;
  margin: clamp(1.6rem, 4vh, 2.6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.6rem);
}

.experiencia-piezas__item {
  margin: 0;
  padding-bottom: 1.2rem;
  /* La línea de arriba es lo que separa una tarjeta de la siguiente sin dibujar una caja: cuatro
     cajas seguidas se leen como un formulario. */
  border-top: 1px solid color-mix(in oklch, var(--c-hueso) 16%, transparent);
  padding-top: 1rem;
}

/* Las dos incluidas llevan la línea en brasa; las opcionales, en hueso. Es la única diferencia
   visual entre unas y otras, y alcanza porque cada una lo dice con todas las letras arriba. */
.experiencia-piezas__item--incluido { border-top-color: var(--c-brasa); }

.experiencia-piezas__medio {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 0.9rem;
  background: color-mix(in oklch, var(--c-noche) 80%, #000);
}

.experiencia-piezas__medio video,
.experiencia-piezas__medio img,
.experiencia-piezas__medio picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) brightness(0.88);
}

.experiencia-piezas__etiqueta {
  margin: 0 0 0.35rem;
  font: 400 0.7rem/1.4 var(--tipo-texto, 'Work Sans'), sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--c-hueso) 55%, transparent);
}

.experiencia-piezas__item--incluido .experiencia-piezas__etiqueta { color: var(--c-brasa); }

.experiencia-piezas__item .h3 { margin: 0 0 0.5rem; }
.experiencia-piezas__item .parrafo { font-size: 0.92rem; }

@media (max-width: 1080px) {
  .experiencia-piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .experiencia-piezas { grid-template-columns: 1fr; }
  /* En una sola columna el video a 4:5 ocupa media pantalla por tarjeta y son cuatro: se achata a
     una banda, que alcanza para decir de qué se trata sin volver la sección un scroll de videos. */
  .experiencia-piezas__medio { aspect-ratio: 16 / 9; }
}