/* ==========================================================================
   bb2026 — PORTADA / PERSIANA DIAGONAL.

   Se usa en UN SOLO sitio: el paso de una foto del hero a la siguiente
   (assets/js/home.js). Es lo que la clienta aprobo de la diagonal, y ahi
   se queda tal cual.

   El resto de la portada NO lleva diagonal:
     - entrada del hero al cargar -> persiana vertical DESCENDENTE, en
       CSS puro (home-hero.css);
     - imagenes al entrar en pantalla, incluidos los 6 paneles de
       servicio -> persiana vertical ASCENDENTE (home-reveals.js);
     - banner de la CTA final -> persiana vertical DESCENDENTE, sobre el
       bloque completo (home-reveals.js).

   Vive en hoja propia por el mismo motivo que el Ken Burns
   (home-kenburns.css): la aritmetica del triangulo es larga y no tiene
   por que estorbar en home-hero.css. Los valores de duracion y curva
   estan en tokens.css (--bb-dur-blind, --bb-dur-reveal,
   --bb-ease-blind); los recortes que usa el JS, en assets/js/blind.js.
   ========================================================================== */

/* ==========================================================================
   ARITMETICA DE LA PERSIANA DIAGONAL

   MECANISMO. Los slides van apilados y QUIETOS: en el efecto 'creative'
   de Swiper los dos translate estan a cero (ver assets/js/home.js), asi
   que el saliente sigue cubriendo el 100% del viewport y el entrante ya
   esta en su sitio. Lo unico que se anima es el RECORTE del entrante, que
   Swiper deja por encima (asigna zIndex = -|round(progress)| + numero de
   slides, luego el activo es siempre el mas alto).

   Por eso ya NO hace falta sobreancho: no hay desplazamiento, no hay
   rebote y no puede aparecer un punto de pantalla sin foto. Si el recorte
   dejara un borde de subpixel, debajo esta la foto ANTERIOR, nunca el
   fondo.

   EL TRIANGULO. Se interpola entre dos polygon() del MISMO numero de
   vertices (tres), condicion para que la interpolacion sea suave:

     cerrado  polygon(100% 100%, 100% 100%, 100% 100%)
     abierto  polygon(-120% 100%, 100% -120%, 100% 100%)

   El vertice recto se queda clavado en la esquina inferior derecha y los
   dos catetos se estiran, uno por el borde inferior hacia la izquierda y
   otro por el borde derecho hacia arriba: la hipotenusa barre en diagonal
   de abajo-derecha a arriba-izquierda.

   ¿CUBRE EL RECTANGULO COMPLETO? Los porcentajes de clip-path se miden
   sobre la caja del elemento en CADA eje, o sea que en el espacio de
   porcentajes el rectangulo es SIEMPRE el cuadrado unidad 0-100 en los
   dos ejes, sea el hero casi cuadrado (390px) o muy panoramico (1512px).
   La comprobacion es por tanto INDEPENDIENTE de la proporcion.

   Con vertices simetricos en -t, la hipotenusa pasa por (-t,100) y
   (100,-t): recta de pendiente -1, o sea  x + y = 100 - t. El vertice
   critico del rectangulo es la esquina opuesta (0,0), que queda dentro
   del triangulo si  0 + 0 > 100 - t,  es decir  t > 100.

     t = 100  ->  la hipotenusa pasa EXACTAMENTE por (0,0): degenerado.
     t = 120  ->  recta  x + y = -20;  (0,0) queda 20/raiz(2) = 14,14
                  unidades de porcentaje DENTRO. Margen real.

   Se elige 120 y no mas: durante la interpolacion los vertices valen
   100 - 220f, luego la recta es  x + y = 200 - 220f  y cubre (0,0) en
   f = 0,909. Solo el ultimo 9% del tiempo ocurre ya fuera de pantalla
   (y con una curva ease-in-out ese tramo final avanza poco). Con t mucho
   mayor se desperdiciaria mas recorrido visible.

   DURACION Y CURVA: --bb-dur-blind (1,6s) con --bb-ease-blind, que es un
   ease-in-out SIN overshoot. El rebote elastico anterior se ha retirado
   a proposito: era justo lo que se rechazo por brusco.

   COSTE EN PIXELES: la media pide ahora el 100% del viewport (antes el
   112%) y el Ken Burns escala 1,07 encima ->  1512 x 1,07 = 1618px, muy
   por debajo de los 1920px del original.
   ========================================================================== */

/* El slide recorta en su propio borde: ya no tiene que dejar salir ningun
   sobreancho, y asi el desborde del Ken Burns (3,5% por lado) se queda
   dentro de la caja del slide, que mide exactamente el viewport. */
.bb-hhero__slide {
  position: relative;
  overflow: hidden;
  /* Estado de REPOSO: triangulo abierto, o sea cubriendo todo. Los slides
     no activos tambien lo llevan, y eso es lo que garantiza que el
     saliente siga tapando la pantalla entera mientras el entrante se
     abre por encima. La apertura la anima el JS sobre el que entra. */
  clip-path: polygon(-120% 100%, 100% -120%, 100% 100%);
}