/* El portal: las dos mitades de Splat Entertainment.
 *
 * Una de dia y una de noche, las dos de frente, las dos con su entrada oscura en el centro. El
 * corte del medio es un choque a proposito, no una costura (brief v2, seccion 3).
 *
 * La mitad sobre la que esta el puntero se agranda y la otra se corre. Al hacer clic, la entrada
 * de esa mitad crece hasta tapar la pantalla y recien ahi se navega: el hueco oscuro no es un
 * dibujo, es la superficie de la transicion.
 *
 * Necesita tokens.css y tipografia.css antes. */

body.portal-pagina {
  margin: 0;
  background: var(--c-noche);
  color: var(--c-hueso);
}

/* El portal ya NO es la pagina entera: es el final de un recorrido de tres tramos (obertura,
   institucional, puertas). Por eso se fue el `overflow: hidden` del body, que impedia scrollear. */
.portal {
  display: flex;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

/* ------------------------------------------------------------------- 1. la obertura */

/* El plano a pantalla completa con la marca encima. La referencia que dio Axel es souki-lodges.com:
   el video ocupa todo y no hay nada mas. Acá el video es el de los talleres cortado de a dos
   segundos, asi que ademas de ocupar todo, cuenta. */
.obertura {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--margen);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-noche);
}

.obertura__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* El velo: dos gradientes en vez de un `backdrop-filter`. El segundo rasteriza la caja entera en
   cada cuadro y arriba hay un video corriendo. Oscurece de los bordes al centro para que el logo
   tenga fondo sin apagar la imagen del medio. */
.obertura__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 20%, color-mix(in oklch, var(--c-noche) 62%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in oklch, var(--c-noche) 55%, transparent), transparent 30%, transparent 62%, color-mix(in oklch, var(--c-noche) 85%, transparent));
}

.obertura__marca {
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 2.4vh, 2rem);
  text-align: center;
}

.obertura__isotipo {
  width: auto;
  height: clamp(4.5rem, 11vh, 9rem);
}

.obertura__nombre {
  margin: 0;
  font-family: var(--tipo-display);
  font-size: clamp(2.6rem, 9.5vw, 9rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--c-pared);
}

.obertura__bajada {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(0.9rem, 1.15vw, 1.15rem);
  color: color-mix(in oklch, var(--c-pared) 82%, transparent);
}

/* El indicador de bajar: una linea que late. Es lo unico que dice que la pagina sigue, ahora que no
   hay barra. */
.obertura__baja {
  position: absolute;
  inset: auto 0 calc(var(--margen) * 0.8);
  z-index: 1;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  font-size: var(--t-dato);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--c-pared) 62%, transparent);
  pointer-events: none;
}

.obertura__baja span {
  display: block;
  width: 1px;
  height: clamp(2rem, 5vh, 3.4rem);
  background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--c-pared) 70%, transparent));
  transform-origin: top;
  animation: obertura-baja 2.4s var(--salida) infinite;
}

@keyframes obertura-baja {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(100%); opacity: 0; }
}

/* ---------------------------------------------------------------- 2. el institucional */

/* Tres piezas: el encabezado a lo ancho, y debajo fotos + texto en dos columnas.
 *
 * Axel, 2026-09-24: "sobre nosotros mas grande, como el doble". El titular estaba metido en la
 * columna de texto, que mide 603 px, y ahi no podia pasar de 49 px sin partirse en cinco
 * renglones. Sacandolo a lo ancho de la seccion entra en DOS renglones y puede ir al tamano que le
 * corresponde a un titular de portada. El cambio no es tipografico, es de grilla: el tamano era
 * consecuencia del ancho, no una eleccion. */
.institucional {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
  align-items: center;
  width: min(100% - var(--margen) * 2, 78rem);
  margin-inline: auto;
  padding-block: clamp(5rem, 16vh, 12rem);
}

.institucional__encabezado { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .institucional { grid-template-columns: 0.9fr 1fr; }
}

/* Las dos fotos del institucional, una por unidad de negocio.
 *
 * Apiladas y no lado a lado: la columna de la izquierda mide ~430 px en escritorio, y dos fotos
 * de 7:5 ahi adentro darian 210 px de ancho cada una, que es el tamano al que una foto de un
 * grupo de veinte personas deja de contar nada. Apiladas miden lo mismo que media UNA foto antes
 * y las dos se leen. Ademas el texto crecio a seis parrafos: la columna de fotos tiene que dar
 * esa altura o la seccion queda coja. */
.institucional__fotos { display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); }

.institucional__foto { margin: 0; }
.institucional__foto img { width: 100%; height: auto; display: block; }

/* El rotulo de marca. Es lo que convierte dos fotos sueltas en "estas son las dos lineas": sin el,
   la de la tina de hielo al lado de la de pintura se lee como dos momentos del mismo taller.
   Cada uno en el acento de SU marca, que ademas es la primera vez que el magenta de Paint y el
   naranja de Mind aparecen juntos en el portal y dicen que son dos cosas distintas. */
.institucional__marca {
  margin-top: 0.7rem;
  font-family: var(--tipo-texto);
  font-size: var(--t-dato);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.institucional__marca--paint { color: var(--c-f-magenta); }
.institucional__marca--mind { color: var(--c-brasa); }

.institucional__sobre {
  margin: 0 0 1.2rem;
  font-size: var(--t-dato);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-f-magenta);
}

.portal-pagina .h1 { color: var(--c-pared); }
.portal-pagina .punto { color: var(--c-f-magenta); }
.portal-pagina .parrafo { color: color-mix(in oklch, var(--c-hueso) 76%, transparent); }

/* Al doble del que habia: 49 px -> 95 px a 1366.
 *
 * Ahora puede, porque el titular ocupa los 1214 px de la seccion en vez de los 603 de la columna
 * de texto. El tope sale de medir, no de tantear: el renglon mas largo de los tres ("completa del
 * Caribe.") mide 12.3 em en esta tipografia y en versales, asi que el cuerpo maximo que entra en
 * 1214 px es 1214/12.3 = 98 px. Va 6.95vw, que a 1366 da 95 px y deja margen. Tres renglones y no
 * dos: en dos, el renglon mas largo obliga a bajar a 73 px, y 73 no es el doble de 49. */
.institucional__encabezado .h1 { font-size: clamp(2.2rem, 6.95vw, 5.9rem); }
.institucional__encabezado { margin-bottom: clamp(0.5rem, 2vh, 1.5rem); }

.institucional__cuerpo {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
  max-width: 54ch;
}

/* Los datos duros. Es lo que hace que una seccion institucional se lea institucional: numeros, no
   adjetivos. */
.institucional__datos {
  display: grid;
  gap: 0;
  margin: clamp(2rem, 5vh, 3.4rem) 0 0;
  border-top: 1px solid color-mix(in oklch, var(--c-hueso) 20%, transparent);
}

.institucional__datos > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid color-mix(in oklch, var(--c-hueso) 14%, transparent);
}

.institucional__datos dt {
  font-size: var(--t-dato);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--c-hueso) 55%, transparent);
}

.institucional__datos dd {
  margin: 0;
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  color: var(--c-pared);
}

@media (max-width: 640px) {
  .institucional__datos > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ---------------------------------------------------------------- 2b. las reacciones */

/* Mas chico y al costado del texto, no a todo el ancho. A 78rem el testimonio competia con el hero
   y con las dos puertas, y las tres cosas no pueden ser lo mas grande de la pagina. Esta es la
   prueba, no el argumento: va del tamano de una prueba. */
.reacciones {
  display: grid;
  gap: clamp(1.6rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
  width: min(100% - var(--margen) * 2, 68rem);
  margin-inline: auto;
  padding-bottom: clamp(5rem, 16vh, 12rem);
}

/* La columna del video es `auto`: la fija el propio video, que ahora es vertical y no apaisado. Con
   `0.72fr 1fr` la caja se estiraba a 600 px de ancho y un 9:16 de 600 px mide mas de mil de alto. */
@media (min-width: 900px) {
  .reacciones { grid-template-columns: 1fr auto; }
}

/* Sin `max-width` en ch: "HUESPEDES" en la display a este tamano no entra en 22ch y desbordaba la
   caja. Lo que limita el ancho es la columna del grid, y el titular se parte donde le toca. */
.reacciones__texto { min-width: 0; }

/* El titular de las reacciones es largo: baja un escalon respecto del resto de la pagina para que
   quepa en su columna sin partirse en seis renglones. */
.reacciones__texto .h1 { font-size: clamp(1.7rem, 3.4vw, 3.2rem); }

/* La caja tiene la forma del material: los cinco testimonios se filmaron con el telefono parado y
   el video sale 9:16 (ver scripts/reacciones-video.mjs). Antes la caja era apaisada y el video se
   recortaba al torso del huesped.
 *
 * El tamano se fija por ALTO y no por ancho, que es lo que evita que un vertical se desmadre: el
 * ancho sale del alto y del 9:16. `min(100%, ...)` es el unico freno en telefono, donde manda la
 * columna.
 *
 * Los dos topes -54rem y 84vh- salen de medir, no de tantear:
 *
 * **54rem (864 px de alto, 486 de ancho)** es el techo del material. El video se sirve a 540x960 y
 * esos 540 no son una decision de compresion: los clips originales son 576 de ancho reales (vienen
 * rotados por metadata), asi que arriba de ~540 px de caja se empieza a agrandar una imagen que no
 * tiene mas detalle. 486 deja el margen justo para una pantalla densa.
 *
 * **84vh** es el freno de la pantalla baja, para que la caja entre sin scrollear en una laptop.
 *
 * Y el ancho de la columna no se movio: la pista `auto` del grid ya media 540 px -la sacaba del
 * ancho intrinseco del video- mientras la caja media 360 y se centraba adentro. Habia 180 px
 * reservados y vacios. Agrandar la caja se los come a ellos, no a la columna del texto. */
.reacciones__caja {
  position: relative;
  margin-inline: auto;
  overflow: hidden;
  background: #000;
  aspect-ratio: 9 / 16;
  width: min(100%, calc(min(84vh, 54rem) * 9 / 16));
}

/* `contain` y no `cover`: si algun dia entra un clip apaisado se ve entero con banda negra, que
   sobre el fondo negro de la caja no se nota, en vez de recortado. */
.reacciones__caja video { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Los subtitulos: el navegador los dibuja con su propio estilo, que es blanco sobre una caja negra
   opaca y no se parece a nada del sitio. `::cue` es lo unico que se puede tocar. */
.reacciones__caja video::cue {
  font-family: var(--tipo-texto);
  font-size: 0.9em;
  line-height: 1.4;
  color: var(--c-pared);
  background: color-mix(in oklch, var(--c-noche) 78%, transparent);
}

/* El boton de sonido. Va ENCIMA del video y no debajo: la accion es sobre el video.
 *
 * Arriba y no abajo, y con un margen propio en vez de `--margen`: la caja pasó a ser vertical y
 * angosta (~330 px), donde los 5rem de `--margen` son un sexto del ancho y el boton aterrizaba
 * justo sobre el renglon del subtitulo. Los subtitulos siempre se dibujan abajo; el boton se va
 * arriba y las dos cosas se leen. */
.reacciones__sonido {
  position: absolute;
  inset: 0.9rem 0.9rem auto auto;
  padding: 0.7em 1.2em;
  font-family: var(--tipo-texto);
  font-size: var(--t-dato);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-pared);
  background: color-mix(in oklch, var(--c-noche) 62%, transparent);
  border: 1px solid color-mix(in oklch, var(--c-pared) 34%, transparent);
  cursor: pointer;
  transition: background 260ms var(--salida), border-color 260ms var(--salida);
}

.reacciones__sonido:hover { background: var(--c-f-magenta); border-color: var(--c-f-magenta); }
.reacciones__sonido[aria-pressed="true"] { background: var(--c-f-magenta); border-color: var(--c-f-magenta); }

@media (max-width: 640px) {
  .reacciones__sonido { inset: 0.7rem 0.7rem auto auto; padding: 0.6em 0.9em; }
}

/* --------------------------------------------------------------- 2c. con quienes trabajamos */

/* Nueve logos quietos, en grilla, entre la prueba y la decision.
 *
 * Quietos y no en cinta como en Paint. Una cinta que loopea dice "tenemos tantos que no entran",
 * y son nueve: entran. Lo que este bloque tiene que decir es "mira QUIENES son", y para eso hay
 * que poder leerlos, no verlos pasar.
 *
 * `auto-fit` con minimo de 9rem: cinco por fila en escritorio, tres en tablet, dos en telefono.
 * Ninguno de esos repartos deja una fila con un solo logo colgado. */
.confianza {
  width: min(100% - var(--margen) * 2, 78rem);
  margin-inline: auto;
  padding-bottom: clamp(4rem, 12vh, 8rem);
}

/* Flex y no grid, que fue el primer intento y quedaba mal.
 *
 * Con `grid-template-columns: repeat(auto-fit, ...)` salian seis columnas y nueve logos: la ultima
 * fila quedaba con tres pegados a la izquierda y un hueco de media pantalla al lado. Nueve no es
 * divisible por seis y ninguna cuenta de columnas arregla eso para todos los anchos.
 *
 * Flex con `wrap` y `center` reparte lo que entra y CENTRA el sobrante, asi que la ultima fila
 * queda equilibrada sea cual sea el ancho. Y como los logos tienen anchos muy distintos, dejarlos
 * fluir a su ancho natural se ve mejor que meterlos en celdas iguales: en celdas iguales, el que
 * es casi cuadrado queda nadando y el que es una tira larga queda apretado. */
.confianza__grilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.8rem, 4vw, 3.6rem);
  /* Mas angosto que la seccion a proposito. A todo el ancho entraban siete en el primer renglon y
     dos en el segundo: leible, pero desparejo. Acotado a 54rem parte en cinco y cuatro, que es el
     reparto que mas se parece a una placa de clientes y no a una lista que se corto donde llego. */
  max-width: 54rem;
  margin: clamp(1.6rem, 4vh, 2.6rem) auto 0;
  padding: 0;
  list-style: none;
}

.confianza__item { display: grid; place-items: center; }

/* Alto fijo y ancho libre: los nueve archivos tienen proporciones muy distintas (uno es 1548x320 y
   otro 240x320) y lo unico que los hace ver de la misma familia es que midan lo mismo de ALTO.
   Igualar el ancho, que es el reflejo facil, deja a uno enorme y a otro diminuto. */
.confianza__item img {
  height: clamp(2.1rem, 3.4vw, 3.2rem);
  width: auto;
  max-width: 100%;
  opacity: 0.72;
  transition: opacity 360ms var(--salida);
}

.confianza__item:hover img { opacity: 1; }

/* ------------------------------------------------------------------ 3. las dos puertas */

/* Cada mitad. `flex` animado en vez de `width`: una sola propiedad y el navegador reparte. */
.mitad {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  display: grid;
  place-items: end start;
  padding: var(--margen);
  /* Si, esto anima una propiedad de layout, que normalmente no se hace. Aca se hace a proposito:
     son dos cajas y el efecto ES que una empuje a la otra, cosa que transform no puede (escalar
     deformaria las dos fotos). El costo es un relayout de dos elementos, solo mientras el puntero
     se mueve entre mitades. Medido con medir-scroll; si alguna vez aparece jank, la alternativa es
     grid-template-columns en el padre, que cuesta lo mismo. */
  transition: flex-basis 900ms var(--salida);
  will-change: flex-basis;
}

.mitad__fondo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* `cover` y a sangre. Se puede porque la foto ya viene extendida a 1:1 (scripts/portal-media.mjs):
     con las 2:3 originales este mismo `cover` se comia el grafiti de arriba en Paint y la arena de
     abajo en Mind, que es justo lo que cuenta cada mitad. */
  object-fit: cover;
  object-position: center;
  /* En reposo la imagen va a su tamano, sin zoom. El acercamiento es la recompensa de pasar el
     puntero, no el estado por defecto. */
  transform: none;
  transition: transform 1200ms var(--salida), filter 700ms var(--salida);
  filter: saturate(0.82) brightness(0.72);
}

/* El velo: cada mitad tira hacia su propia noche o su propio dia, y ademas asegura el contraste
   del texto encima. */
.mitad::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 700ms var(--salida);
}

.mitad--paint::after {
  background: linear-gradient(to top,
    color-mix(in oklch, var(--c-tinta) 88%, transparent),
    color-mix(in oklch, var(--c-tinta) 22%, transparent) 55%,
    transparent);
}

.mitad--mind::after {
  background: linear-gradient(to top,
    color-mix(in oklch, var(--c-noche) 92%, transparent),
    color-mix(in oklch, var(--c-noche) 30%, transparent) 55%,
    transparent);
}

.mitad__texto { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.9rem; max-width: 30ch; }

/* El isotipo arriba del wordmark: el lockup estandar. Va el isotipo solo y no el logo entero
   porque el wordmark del cliente viene en dos tipografias distintas entre si, ninguna de ellas
   Archivo, y en negro desaparece sobre la mitad de Mind (ver ESTADO.md, decision B).
   El alto manda, no el ancho: los dos isotipos tienen proporciones distintas (1.31 y 1.21) y lo
   que el ojo compara es cuanto ocupan de alto al lado del titulo. */
.mitad__isotipo {
  width: auto;
  height: clamp(2.6rem, 5vw, 4.4rem);
  margin-bottom: -0.25rem;
  align-self: start;
  /* Una sombra corta, no un contorno: el de Paint cae sobre un muro cargado y el de Mind sobre
     noche. Sin esto el de Mind, que es azul casi negro, se hunde en el fondo. */
  filter: drop-shadow(0 2px 16px color-mix(in oklch, var(--c-noche) 80%, transparent));
  transition: transform 700ms var(--salida);
}

.mitad h2 {
  margin: 0;
  font-family: var(--tipo-display);
  font-size: clamp(2rem, 5.2vw, 5.5rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--c-pared);
}

.mitad--paint h2 .punto { color: var(--c-f-magenta); }
.mitad--mind h2 .punto { color: var(--c-brasa); }

.mitad p {
  margin: 0;
  font-size: clamp(0.92rem, 1.1vw, 1.1rem);
  color: color-mix(in oklch, var(--c-pared) 76%, transparent);
  max-width: 28ch;
}

.mitad__entrar {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.4rem;
  font-size: var(--t-dato);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-pared);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--salida), transform 500ms var(--salida);
}

.mitad__entrar::after {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
  transition: width 400ms var(--salida);
}

/* ------------------------------------------------------------------ hover */

/* El puntero elige. Sin hover (telefono) las dos quedan al 50 y todo visible. */
@media (hover: hover) and (min-width: 761px) {
  .portal:has(.mitad--paint:hover) .mitad--paint,
  .portal:has(.mitad--mind:hover) .mitad--mind { flex-basis: 62%; }

  .portal:has(.mitad--paint:hover) .mitad--mind,
  .portal:has(.mitad--mind:hover) .mitad--paint { flex-basis: 38%; }

  .mitad:hover .mitad__fondo,
  .mitad:focus-visible .mitad__fondo { transform: scale(1.02); filter: saturate(1) brightness(0.95); }

  .mitad:hover::after, .mitad:focus-visible::after { opacity: 0.72; }

  .mitad:hover .mitad__entrar,
  .mitad:focus-visible .mitad__entrar { opacity: 1; transform: none; }

  .mitad:hover .mitad__isotipo,
  .mitad:focus-visible .mitad__isotipo { transform: translateY(-3px); }

  .mitad:hover .mitad__entrar::after { width: 3.2rem; }
}

/* -------------------------------------------------------------- la costura */

/* La linea del corte: 1 px de la pared clara. Es lo unico que une las dos mitades.
 *
 * Va como borde de la mitad de Paint y no como un elemento aparte puesto en `left: 50%`. Asi era
 * antes y quedaba clavada en el medio mientras las mitades se repartian 62/38 al pasar el puntero:
 * la linea se despegaba del corte. Como borde no hay nada que sincronizar, porque la linea ES el
 * borde de la caja que se mueve.
 *
 * Con `box-sizing: border-box` el pixel sale de adentro, asi que el reparto de flex no cambia, y
 * `.mitad__fondo` se posiciona contra la caja de padding: la foto llega hasta el borde y no lo
 * tapa. */
.mitad--paint { border-right: 1px solid color-mix(in oklch, var(--c-pared) 45%, transparent); }

/* --------------------------------------------------------------- la entrada */

/* La transicion filmada: el clip a pantalla completa que se ve al hacer clic en una mitad.
 *
 * Arranca invisible y se muestra recien cuando el video ESTA reproduciendo (la clase la pone
 * portal.js con el evento `playing`). Si se mostrara antes, se veria un rectangulo negro o el
 * poster quieto mientras carga, que es peor que no tener transicion.
 *
 * `object-fit: cover`: el clip es 16:9 y la pantalla puede ser cualquier cosa. Recortar esta bien
 * porque lo que importa del clip es que tape, y tapa por el centro. */
.portal__transicion {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--c-noche);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms linear;
}

.portal__transicion--visible { opacity: 1; }

/* El velo que crece al hacer clic. Empieza como un punto en el centro de la mitad elegida y
   termina tapando la pantalla: es el "atravesar". El color lo pone portal.js segun la mitad. */
.portal__paso {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  background: var(--c-noche);
  clip-path: circle(0% at 50% 50%);
}

/* --------------------------------------------------------------------- movil */

@media (max-width: 760px) {
  .portal { flex-direction: column; }
  .mitad { flex: 1 1 50%; padding: calc(var(--margen) * 0.9); }
  /* En vertical la marca se va abajo, y ahi choca con el "Entrar" de la segunda mitad: las dos
     cosas se apoyan en el mismo borde. La segunda mitad le deja el lugar. */
  .mitad:last-of-type { padding-bottom: calc(var(--margen) * 2.6); }
  .mitad__fondo { transform: none; filter: saturate(0.95) brightness(0.85); }
  .mitad__isotipo { height: clamp(2.2rem, 11vw, 3.4rem); }
  .mitad__entrar { opacity: 1; transform: none; }
  /* En vertical el corte es horizontal: el borde cambia de lado. */
  .mitad--paint { border-right: 0; border-bottom: 1px solid color-mix(in oklch, var(--c-pared) 45%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .mitad, .mitad__fondo, .mitad::after, .mitad__entrar, .mitad__isotipo { transition-duration: 1ms; }
  .mitad__entrar { opacity: 1; transform: none; }
  .obertura__baja span { animation: none; opacity: 0.7; transform: none; }
  /* Sin autoplay: quien pidio menos movimiento ve el poster del hero, no un video en loop. */
  .obertura__fondo { display: none; }
  .obertura { background: var(--c-noche) url('/assets/video/hero/hero.webp') center / cover no-repeat; }
}