/* ============================================================
   STAAD HOME — Home: banners + Universo + manifiesto
   ============================================================ */

/* ---------- Lenis (scroll suave): estilos recomendados ---------- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Banner de coleccion (pantalla completa) ---------- */
.collection {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--c-white);
}
/* Capa de enlace: todo el banner es clickeable hacia su coleccion */
.collection__link {
  position: absolute;
  inset: 0;
  z-index: 4;
}

/* La foto es un poco mas alta que la seccion: deja juego al parallax */
.collection__media {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  height: 120%;
  display: block;
  will-change: transform;
}
/* Cada banner trae una version PC y una version movil (foto o video);
   solo se muestra/carga la que corresponde al ancho de pantalla actual.
   Con solo fotos se usa <picture> (descarga una sola); con video, dos capas. */
.collection__media picture {
  position: absolute;
  inset: 0;
  display: block;
}
/* El encuadre se sube un poco (38% en vez del 50% centrado): en
   ventanas anchas y bajas el banner recorta por arriba y por abajo, y
   asi deja de comerse la base de la foto — la tarima del sofa de New
   York, por ejemplo. En ventanas altas no tiene ningun efecto. */
.collection__media picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}
.collection__media-pc,
.collection__media-mobile {
  position: absolute;
  inset: 0;
}
.collection__media-pc   { display: block; }
.collection__media-mobile { display: none; }
@media (max-width: 860px) {
  .collection__media-pc   { display: none; }
  .collection__media-mobile { display: block; }
}
.collection__media-pc img,
.collection__media-pc video,
.collection__media-mobile img,
.collection__media-mobile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- Encuadre en celular ----
   La pantalla del celular es vertical: una foto apaisada solo cabe por una
   franja de un tercio de su ancho, y el mueble se quedaba fuera. Cuando el
   banner no tiene foto vertical propia (se repite la de computador), en
   WP Admin se elige que parte se conserva y llega aqui como --enc-mo.
   Sin elegir nada sigue siendo el centro de siempre. */
@media (max-width: 860px) {
  .collection__media picture img { object-position: var(--enc-mo, 50%) 38%; }
  .collection__media-mobile img  { object-position: var(--enc-mo, 50%) center; }
}

/* Velo oscuro para que el texto blanco se lea sobre la foto */
.collection__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0, 0, 0, .45) 0%,
              rgba(0, 0, 0, .22) 32%,
              rgba(0, 0, 0, .25) 60%,
              rgba(0, 0, 0, .48) 100%);
}

.collection__inner {
  position: relative;
  z-index: 1;
  width: var(--container-wide);
  margin-inline: auto;
  padding-block: var(--space-xl);
}

/* Peso 300: hoy el kit de Adobe solo trae el cuerpo regular, asi que se ve
   igual; el dia que anadas "Kudryashev D Contrast Light" al kit, entra solo.
   La sombra va muy sutil: una sombra ancha engorda visualmente los trazos. */
.collection__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 0.95rem + 2.4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .22);
}

/* El lema pasa a ser lo unico que se lee en el banner: lleva la
   tipografia de titulo de la marca, algo mas pequena que el nombre de
   coleccion que habia antes. */
.collection__sub {
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(0.95rem, 0.70rem + 1.05vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-white);
  text-shadow: 0 1px 24px rgba(0, 0, 0, .35);
}

/* Llamada minimalista: SOLO el texto sobre la foto, sin caja. Al pasar por
   el banner se dibuja una linea fina justo debajo de las letras, que nace
   en el centro y se abre. Es un <span>, no un enlace: el banner entero ya lo es. */
.collection__cta {
  position: relative;
  display: inline-block;
  margin-top: clamp(14px, 2.2vh, 24px);
  /* Aire para la linea, y a la izquierda el sobrante que compensa el hueco
     que letter-spacing deja DETRAS de la ultima letra: sin el, el texto
     queda descentrado respecto al lema. */
  padding: 0 0 7px var(--ls-wide);
  line-height: 1;
  color: var(--c-white);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .28);
}

/* La linea empieza y termina donde las letras (de ahi los dos retranqueos
   de --ls-wide), asi que no sobresale por ningun lado. */
.collection__cta::after {
  content: "";
  position: absolute;
  left: var(--ls-wide);
  right: var(--ls-wide);
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .65;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease-out),
              opacity var(--dur) var(--ease-out);
}
.collection:hover .collection__cta::after { transform: scaleX(1); }

/* En tactil no hay hover: la linea se deja puesta, muy tenue */
@media (hover: none) {
  .collection__cta::after { transform: scaleX(1); opacity: .4; }
}

/* Quien pide menos movimiento ve la linea aparecer sin barrido */
@media (prefers-reduced-motion: reduce) {
  .collection__cta::after { transform: scaleX(1); opacity: 0; }
  .collection:hover .collection__cta::after { opacity: .65; }
}

/* ============================================================
   El Universo STAAD (compacto, sobre pared de microcemento)
   ============================================================ */
.universo {
  background-color: var(--c-taupe);
  background-image: url('../img/overlay-pared-staan-home.webp');
  background-size: cover;
  background-position: center;
  color: var(--c-white);
  padding-block: var(--space-lg);
}

.universo__head {
  width: var(--container);
  margin: 0 auto var(--space-md);
  text-align: center;
}

.universo__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-section-title);
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--c-white);
  text-shadow: 0 1px 16px rgba(0, 0, 0, .16);
}

.universo__intro {
  margin: var(--space-xs) auto 0;
  max-width: 54ch;
  font-size: var(--fs-small);
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .22);
}

.universo__grid {
  width: min(92vw, 1120px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 32px);
}

.uni-card { display: block; color: var(--c-white); }

.uni-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 25px 55px rgba(0, 0, 0, .22);
}

.uni-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.uni-card:hover .uni-card__media img { transform: scale(1.05); }

.uni-card__label {
  display: block;
  margin-top: var(--space-sm);
  text-align: center;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.92rem);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 1px 16px rgba(0, 0, 0, .22);
}

@media (max-width: 767px) {
  .universo__grid {
    grid-template-columns: 1fr;
    gap: clamp(22px, 7vw, 38px);
    max-width: 380px;
  }
}

/* ============================================================
   Manifiesto — "Bajo la mirada de Fernanda Stadler"
   ============================================================ */
.manifiesto {
  background-color: var(--c-bg);
  background-image: var(--noise);
  color: var(--c-ink);
  padding-block: var(--space-lg);
}

.manifiesto__inner {
  width: var(--container-wide);
  margin-inline: auto;
  display: grid;
  /* Medido: con columnas en "fr" la del texto salia de 751px pero los
     parrafos se cortaban a 468px (58ch), dejando 283px muertos a la derecha
     y el bloque escorado. Ahora cada columna mide lo que mide su contenido
     y el conjunto se centra: margenes iguales a los dos lados. */
  /* La foto pesa MAS que el texto, y por bastante: es el retrato de quien
     firma la marca, no una ilustracion al margen. Las dos medidas se mueven
     con la pantalla pero la del retrato va siempre por delante —48vw contra
     26vw, y sus topes tambien— asi que en ningun ancho puede quedar mas
     estrecha que la del texto. */
  grid-template-columns: clamp(340px, 48vw, 760px) clamp(280px, 26vw, 420px);
  justify-content: center;
  gap: clamp(28px, 5vw, 80px);
  /* Centrado: lo que sobra de alto se reparte arriba y abajo del texto,
     asi se lee como una composicion y no como un hueco al final. */
  align-items: center;
}

/* El retrato manda la seccion: llena su columna a lo ancho y la proporcion
   3/4 le da el alto. Nada mas lo limita.
   Medido en un portatil de 1360x720: el tope de "una pantalla de alto" que
   habia aqui lo dejaba en 571x570 —casi cuadrado, perdida la proporcion, y
   a un palmo de quedar mas bajo que el texto de al lado (431px)—. Un
   retrato que se pasa de la ventana no es un problema: la pagina se
   desplaza. Uno aplastado, si.
   El recorte sale de abajo, nunca de la cabeza (object-position). */
.manifiesto__portrait {
  margin: 0;
}
.manifiesto__portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  /* Alineada ARRIBA: el recorte de un retrato vertical dentro del marco 3/4
     se lleva siempre la parte de abajo, nunca la cabeza. Con el 30% que
     habia, en retratos con poco aire arriba se comia la coronilla. */
  object-position: center top;
  display: block;
  background: var(--c-bg);
}

.manifiesto__title {
  font-family: var(--font-display);
  font-weight: 300;
  /* Un punto por debajo del titulo de seccion: aqui compite con un retrato
     grande y en tres lineas se comia la mitad de la columna. */
  font-size: clamp(1.05rem, 0.82rem + 1vw, 1.65rem);
  line-height: 1.16;
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: var(--space-md);
}

/* Texto pequeno a proposito: el peso visual lo lleva el retrato, y con
   cuatro parrafos un cuerpo grande alargaba la seccion sin necesidad. */
.manifiesto__p {
  font-size: clamp(0.72rem, 0.69rem + 0.16vw, 0.82rem);
  line-height: 1.9;
  color: var(--c-ink-soft);
}

.manifiesto__p + .manifiesto__p { margin-top: var(--space-sm); }

@media (max-width: 860px) {
  .manifiesto__inner { grid-template-columns: 1fr; gap: var(--space-md); }
  .manifiesto__title { max-width: none; }
  /* En una sola columna no hay nada al lado que se quede pegado */
  .manifiesto__portrait { position: static; }
  .manifiesto__portrait img { aspect-ratio: 4 / 5; max-height: 70svh; }
}

/* ---------- Banda ambientada (parallax sutil) ---------- */
.band {
  position: relative;
  height: clamp(360px, 56vh, 700px);
  overflow: hidden;
}

.band__media {
  position: absolute;
  left: 0;
  right: 0;
  top: -14%;
  height: 128%;
  background-size: cover;
  background-position: center 35%;
  will-change: transform;
}

/* ============================================================
   Video (seccion antes del footer)
   ============================================================ */
.video-band {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--c-white);
}

.video-band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .34);
}

.video-band__overlay {
  position: relative;
  z-index: 1;
  padding-inline: var(--gutter);
}

.video-band__eyebrow {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.video-band__title {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 0.95rem + 2.4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .22);
}

.video-band__link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white);
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  padding-bottom: 4px;
  transition: opacity var(--dur) var(--ease);
}

.video-band__link:hover { opacity: .7; color: var(--c-white); }

/* ============================================================
   Banner de apertura con video (Lanzamientos STAAD)
   ============================================================ */
/* Un <video> es un elemento reemplazado: no se estira solo con left/right ni
   admite ::after, asi que le damos medidas propias y el velo va en la seccion. */
/* Un <video> es un elemento reemplazado: no se estira solo con left/right.
   El alto (120%) lo hereda de .collection__media, no lo pisamos: si lo dejamos
   en 100% queda una franja vacia abajo por el desplazamiento del parallax. */
.collection__video {
  width: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--c-ink);
}
.collection--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(0, 0, 0, .45) 0%,
              rgba(0, 0, 0, .22) 32%,
              rgba(0, 0, 0, .25) 60%,
              rgba(0, 0, 0, .48) 100%);
}
.collection--hero .collection__inner { z-index: 2; }

/* ---------- Banner de apertura (solo imagen, sin titulo) ----------
   No lleva texto encima, asi que no necesita el velo oscuro que los
   demas banners usan para que se lea el titulo: la foto va limpia. */
/* Velo CREMA arriba (no negro): la foto de apertura es luminosa y el texto
   de la cabecera va en tinta. Medido sobre la banda real que queda bajo la
   barra: sin velo el peor punto daba 0.83:1; con el 58% sube a ~5:1.
   Se desvanece antes del 26% de alto, asi que la foto se ve limpia. */
.collection--intro .collection__media::after {
  display: block;
  background: linear-gradient(180deg,
              rgba(246, 244, 241, .58) 0%,
              rgba(246, 244, 241, .30) 12%,
              rgba(246, 244, 241, 0) 26%);
}
/* Sobre fondo claro, el aviso de scroll tambien va en tinta */
.collection--intro .collection__scroll { color: var(--c-ink); }
.collection--intro .collection__scroll-line { background: rgba(23, 23, 23, .22); }
.collection--intro .collection__scroll-line::after { background: var(--c-ink); }

/* ---------- Apertura: zoom lento y aviso de scroll ----------
   El zoom va en el <img>, no en .collection__media: ese lleva el
   translate3d del parallax y las dos transformaciones se pisarian.
   Es un movimiento largo (20s) y corto (4%): se siente vivo sin marear. */
@keyframes staad-intro-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}
.collection--intro .collection__media picture img {
  animation: staad-intro-zoom 20s linear both;
  transform-origin: center center;
  will-change: transform;
}

.collection__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vh, 48px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--c-white);
  pointer-events: none;
}
.collection__scroll-txt {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  opacity: .75;
}
/* Linea fina que baja en bucle: sugiere la direccion sin flechas */
.collection__scroll-line {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: rgba(255, 255, 255, .28);
}
.collection__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 16px;
  background: var(--c-white);
  animation: staad-scroll-baja 2.2s var(--ease-out) infinite;
}
@keyframes staad-scroll-baja {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(300%); }
  100% { transform: translateY(300%); }
}

/* Sin movimiento para quien lo pide desactivado */
@media (prefers-reduced-motion: reduce) {
  .collection--intro .collection__media picture img { animation: none; }
  .collection__scroll-line::after { animation: none; opacity: .6; }
}

/* ---------- Entrada de la portada ----------
   Primero aparece la foto, despues la barra y por ultimo el aviso de
   scroll. La entrada solo toca la OPACIDAD: el zoom usa transform y si
   ambas animaciones tocaran lo mismo se pisarian.
   Todo dentro de "no-preference": quien tenga el movimiento reducido ve
   la portada quieta y completa desde el primer fotograma. */
@keyframes staad-aparece { from { opacity: 0; } to { opacity: 1; } }

/* La entrada del heroe, en CSS y no en GSAP. La diferencia importa: el JS
   carga con defer, DESPUES del primer pintado, asi que animar ahi la entrada
   era esconder una portada que ya se estaba viendo y volverla a fundir (el
   Speed Index se iba a 5,9s por esto). Una animacion CSS corre desde el
   primer pintado: no borra nada, y termina sola aunque el JS no llegue.
   Solo el texto; la foto es el LCP y no se toca. */
@media (prefers-reduced-motion: no-preference) {
  .collection:first-of-type .collection__sub {
    animation: staad-hero-entra .9s var(--ease-out) both;
  }
  .collection:first-of-type .collection__cta {
    animation: staad-hero-entra .9s var(--ease-out) .15s both;
  }
}
@keyframes staad-hero-entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes staad-baja    { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  body.home .collection--intro .collection__media picture img {
    animation: staad-aparece 1.4s var(--ease-out) both,
               staad-intro-zoom 20s linear both;
  }
  body.home .site-header { animation: staad-baja 0.9s var(--ease-out) 0.85s both; }
  body.home .collection__scroll { animation: staad-aparece 0.9s var(--ease-out) 1.5s both; }
}

/* Movil y tablet: los banners van a PANTALLA COMPLETA, igual que en
   escritorio (pedido expreso). La regla base ya es 100svh, asi que aqui
   solo se refuerza para que ninguna hoja posterior la baje.
   Nota: las fotos son 16:9 y en vertical el recorte es fuerte; la unica
   forma de ganar encuadre seria tener versiones verticales de cada una. */
@media (max-width: 1024px) {
  .collection { min-height: 100vh; min-height: 100svh; }
}