/* ==========================================================================
   bb2026 — PORTADA / 1. HERO.

   Carrusel a pantalla completa. Los slides van APILADOS EN SU SITIO (sin
   desplazamiento ninguno) y el paso de una foto a la siguiente es una
   PERSIANA DIAGONAL: la entrante, que ya esta colocada y a tamaño
   completo, se revela con un clip-path triangular que se abre desde la
   esquina INFERIOR DERECHA hasta cubrir todo. Ese es el UNICO sitio de
   la portada con diagonal. La ENTRADA al cargar la pagina es distinta:
   persiana vertical DESCENDENTE (ver mas abajo, ENTRADA AL CARGAR).

   El Ken Burns de la foto NO esta aqui: es un recurso compartido con la
   tira lateral y vive en assets/css/home-kenburns.css.

   Namespace .bb-hhero. No toca header, footer ni nav.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — carrusel a pantalla completa.
   -------------------------------------------------------------------------- */
.bb-hhero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* BLANCO, no tinta: es lo que se ve mientras la persiana de entrada
     baja, justo despues de que se retire la cortina blanca del logotipo.
     Con el fondo oscuro anterior la secuencia daba un salto de blanco a
     negro y otra vez a foto. Ahora es continua. */
  background: var(--bb-load-bg);
}

.bb-hhero__swiper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* La ARITMETICA de la persiana diagonal (por que el triangulo final cubre
   el rectangulo completo en cualquier proporcion) y los estados de reposo
   del recorte NO estan aqui: son un recurso compartido y viven en
   assets/css/home-blind.css. */

/* Sin sobreancho: la media mide justo el marco. El margen que necesita el
   Ken Burns lo da su propia escala (ver home-kenburns.css). */
.bb-hhero__media {
  position: absolute;
  inset: 0;
}

/* Curva de la transicion de Swiper. Con los translate a cero no hay nada
   que desplazar, pero la dejamos coherente con la persiana. */
.bb-hhero__swiper .swiper-slide {
  transition-timing-function: var(--bb-ease-blind);
}

/* ENTRADA AL CARGAR — persiana vertical DESCENDENTE (arriba -> abajo).

   NO es la diagonal. La diagonal se usa SOLO para pasar de una foto del
   hero a la siguiente (assets/js/home.js). La entrada al cargar la
   pagina es la persiana vertical que baja: colapsada arriba, se abre
   hacia abajo. Es la que estaba antes y la que la clienta aprueba.

   Va en CSS y no en JS a proposito: la hoja se sirve en el <head>, asi
   que el estado inicial se aplica antes del primer pintado y no hay
   destello de contenido sin animar. Y si el JS fallara, el hero queda
   visible igualmente (una animacion CSS con fill 'both' termina en su
   estado final aunque no haya JS; con GSAP se quedaria colapsado).

   Direcciones de la portada, para no confundirlas: hero al cargar,
   ABAJO (esta); paso de foto a foto, DIAGONAL; imagenes al entrar en
   pantalla, ARRIBA; banner de la CTA, ABAJO. Los valores de las dos
   verticales que usa el JS estan en assets/js/blind.js (CLIP_DOWN_CLOSED
   y CLIP_UP_CLOSED); aqui van literales porque un @keyframes no puede
   depender de ese fichero.

   Todo el bloque va dentro de prefers-reduced-motion: no-preference, de
   modo que con movimiento reducido no hay animacion ninguna. */
@media (prefers-reduced-motion: no-preference) {
  /* El retardo deja pasar primero la cortina blanca con el logotipo
     (home-curtain.css): el orden que pide la clienta es logo centrado
     sobre blanco y DESPUES la foto entrando de arriba hacia abajo. */
  /* LOS VELOS BAJAN CON LA FOTO, no antes. Son hermanos del carrusel, o
     sea que no los recorta su clip-path: se pintaban enteros desde el
     primer fotograma y, al estar el fondo en blanco, lo que se veia era
     un LAVADO GRIS sobre toda la pantalla mientras la persiana bajaba.
     Con la misma animacion, el velo solo existe donde ya hay foto. */
  .bb-hhero__swiper,
  .bb-hhero__veil {
    animation: bb-hero-open var(--bb-dur-blind) var(--bb-ease-blind) var(--bb-delay-hero) both;
  }
  .bb-hhero__kw {
    animation: bb-hero-rise 0.9s var(--bb-ease) 0.55s both;
  }
  .bb-hhero__claim {
    animation: bb-hero-rise 1s var(--bb-ease) 0.68s both;
  }
  .bb-hhero__foot,
  .bb-hhero .bb-tag {
    animation: bb-hero-fade 0.8s var(--bb-ease) 0.95s both;
  }
}

/* Persiana colapsada ARRIBA (el 100% esta en el lado de abajo, o sea que
   el recorte no deja ver nada) -> recorte nulo. Se abre hacia abajo.
   En inset(arriba derecha abajo izquierda) el lado que vale 100% es el
   lado por el que la persiana esta cerrada: cambiar ese 100% de sitio es
   todo lo que hace falta para invertir la direccion. */
/* LOS CUATRO COMPONENTES EN LOS DOS EXTREMOS Y LA MISMA UNIDAD. Estaban
   'inset(0 0 100% 0)' -> 'inset(0)', que el navegador serializa como tres
   componentes contra uno: estructuras distintas, no hay interpolacion
   posible y la persiana se quedaba clavada arriba hasta saltar al final.
   La trampa esta explicada en assets/js/blind.js. */
@keyframes bb-hero-open {
  from { clip-path: inset(0% 0% 100% 0%); }
  to   { clip-path: inset(0% 0% 0% 0%); }
}
@keyframes bb-hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bb-hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bb-hhero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo 1: plano, para bajar el tono general de la foto. */
.bb-hhero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(28, 27, 25, 0.28);
  pointer-events: none;
}

/* Velo 2: degradado hacia abajo. Combinado con el anterior deja el tercio
   inferior en un 0.86 de tinta efectiva, que es lo que garantiza >=4.5:1
   del texto papel incluso sobre las fotos más claras (cielo y mar). */
.bb-hhero__veil--foot {
  background: linear-gradient(
    to top,
    rgba(28, 27, 25, 0.8) 0%,
    rgba(28, 27, 25, 0.62) 26%,
    rgba(28, 27, 25, 0.16) 62%,
    rgba(28, 27, 25, 0.28) 100%
  );
}

.bb-hhero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--bb-s6) calc(var(--bb-s7) + var(--bb-s2));
}

/* El H1 lleva las dos cosas: palabra clave + eslogan, ambas visibles. */
.bb-hhero__h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bb-s3);
  max-width: 18ch;
}
.bb-hhero__kw {
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  text-transform: uppercase;
  letter-spacing: var(--bb-track-label);
  line-height: 1.4;
  color: var(--bb-paper);
}
.bb-hhero__claim {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: var(--bb-size-display-xl);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.06;
  color: var(--bb-paper);
}

/* Pie del hero: contador y señal de scroll. */
.bb-hhero__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--bb-s4);
  z-index: 2;
}
.bb-hhero__footrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bb-s3);
}
.bb-hhero__count {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  color: var(--bb-paper);
}
.bb-hhero__count-sep,
.bb-hhero__count-all { opacity: 0.55; }

/* SEÑAL DE BAJAR — carril VERTICAL con un trazo que lo recorre.
   Antes era una raya horizontal, que no sugeria ningun gesto. Ahora el
   rotulo va encima y debajo un carril fino de 48px por el que baja un
   trazo en bucle: la direccion del movimiento ES el mensaje. */
.bb-hhero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bb-s2);
  color: var(--bb-paper);
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  text-transform: uppercase;
  letter-spacing: var(--bb-track-label);
}
.bb-hhero__scroll:hover,
.bb-hhero__scroll:focus-visible { color: var(--bb-paper); }

/* El carril: 1px de ancho, atenuado, y recorta el trazo que lo recorre. */
.bb-hhero__scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: rgba(247, 245, 242, 0.3);
  transform-origin: top;
  transition: transform 0.5s var(--bb-ease);
}
/* El trazo. Sin motion se queda quieto arriba del carril: sobrio y
   legible, pero sin animacion (regla de prefers-reduced-motion). */
.bb-hhero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 40%;
  background: var(--bb-paper);
}
@media (prefers-reduced-motion: no-preference) {
  .bb-hhero__scroll-line::after {
    animation: bb-scroll-run 1.9s var(--bb-ease) infinite;
  }
}
/* De fuera del carril por arriba a fuera por abajo: el trazo entra, baja
   y sale, sin cortes visibles. */
@keyframes bb-scroll-run {
  from { transform: translateY(-100%); }
  to   { transform: translateY(250%); }
}
.bb-hhero__scroll:hover .bb-hhero__scroll-line { transform: scaleY(1.2); }

/* La caja-etiqueta firma se ancla dentro del margen: el hero recorta. */
.bb-hhero .bb-tag--br {
  right: var(--bb-gutter);
  bottom: 0;
  transform: none;
  z-index: 3;
}

@media (max-width: 767px) {
  /* En móvil el pie y la etiqueta compartirían sitio: subimos el pie. */
  .bb-hhero__foot { bottom: calc(var(--bb-tag-size) + var(--bb-s3)); }
  .bb-hhero__h1 { max-width: none; }
}