/* Cinta "European Property Awards" colgada del borde superior del hero.

   Hay dos ilustraciones: la vertical alta (escritorio) y la compacta con
   "AWARD WINNER" en una sola línea. Las elige <picture> con el corte en
   1400px, que es donde la propia cabecera cambia de diseño: por debajo
   de 1400 el menú se recoge en la hamburguesa y el centro queda libre.

   Dos colocaciones, y una franja sin cinta:

   1. >=1600px   hueco entre el último enlace del menú y el botón de
                 compartir, como en el maquetado del cliente (12.11.2026).
   2. 1400-1599  el menú sigue desplegado y ese hueco se queda en 32-100px
                 según el idioma: no cabe. No se muestra la cinta.
   3. <=1399px   menú recogido: la cinta vuelve al centro, con el borde
                 derecho en la mitad de la pantalla, como en el maquetado
                 móvil.

   La cinta se dimensiona por ALTURA, no por anchura, con cuatro topes a
   la vez. Los valores en vw son los de anchura multiplicados por la
   proporción del dibujo (2268/592 = 3,8311 y 1886,4/592 = 3,18649):

   - 23,01svh / 40svh: el hero mide 100svh y el titular está
     centrado en él, así que en una ventana baja el texto sube. Sin este
     tope la punta de la cinta caería sobre "Villas en venta ·
     Urbanización Coblanca" (en francés, que ocupa dos líneas, pasaba ya
     a 600px de ancho).
   - 43,83vw: la proporción del maquetado móvil (13,1vw de ancho) con el
     5% de aumento que pidió el cliente: 13,755vw x 3,18649.
   - 282px: el tamaño máximo de la versión compacta.
   - (100vw - 345px) x 3,18649: por debajo de unos 400px el hueco entre el
     logotipo y el botón de compartir se cierra a razón de 1px por cada
     1px de pantalla, y la cinta tiene que encogerse al mismo ritmo. Este
     tope es sitio disponible, no preferencia de tamaño, así que NO lleva
     el 5%: sólo cambia el coeficiente, por el dibujo nuevo. La fórmula
     empalma sola con 44,11vw en 400px, sin salto.

   Aumento del 5% (12.11.2026). Se aplica sobre la ANCHURA en pantalla,
   que es lo que se ve, y de ahí vuelve a altura con la proporción nueva.
   Topes de anchura: 6,876svh -> 7,220svh, 84,15px -> 88,36px,
   13,10vw -> 13,755vw. A 440x786 la cinta pasa de 54x165 a 57x181, que
   es justo lo que pedía el maquetado móvil (57,6 de ancho).

   Recorte del viewBox (12.11.2026). El dibujo del cliente traía 12
   unidades de nada por encima de la cinta (0,624% de la altura): con
   top:0 eso se veía en el movil como una franja de cielo de 2-3px
   fisicos por encima del lazo. El fichero movil lleva el viewBox
   recortado a "0 12 592 1886,4" -y el height del <svg> a juego, que si
   no preserveAspectRatio lo recentra y vuelve el hueco-, asi que ahora
   la tinta empieza en el pixel 0. Comprobado en canvas: borde superior
   de la tinta 0,624% -> 0,000%. La anchura en pantalla no cambia; los
   topes de altura se recalcularon con la proporcion nueva.
   El dibujo de ESCRITORIO no se toca (lo pidio asi el cliente): sigue
   con sus 12 unidades, 0,522% de su altura. */

.hero__award {
  position: absolute;
  top: 0;
  right: max(50%, 223px);
  /* Mismo nivel que .hero__overlay y detrás de .hero__content (z-index 2).
     Así, en una ventana muy baja -donde el titular sube casi hasta el
     borde superior-, el texto pasa por delante de la cinta en vez de
     quedar tapado. */
  z-index: 1;
  display: block;
  width: auto;
  height: min(23.01svh, 282px, 43.83vw, calc((100vw - 345px) * 3.18649));
  aspect-ratio: 592 / 1886.4;
  pointer-events: none;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .38));
}

.hero__award img {
  width: 100%;
  height: 100%;
  display: block;
}

/* El bloque derecho de la cabecera (compartir + hamburguesa + margen)
   mide 215px en ruso, el idioma más ancho; 223px deja 8px de aire. Por
   debajo de 375px ya no queda hueco entre el logotipo y ese bloque
   (31px en ruso a 360px de ancho) y la cinta sería ilegible. */
@media (max-width: 374px) {
  .hero__award {
    display: none;
  }
}

/* Franja sin cinta. Entre 1400 y 1599 el menú sigue desplegado y detrás
   de él sólo quedan 32-100px según el idioma (32 en ruso a 1400), menos
   de lo que pide la cinta. Las demás posiciones posibles -esquina
   derecha, o entre el logotipo y el menú- se descartaron, así que en
   esta franja no se muestra (decisión del cliente, 12.11.2026).

   Hueco libre detrás del menú a 1400px:
   de 72 | ru 32 | nl 57 | fr 76; la cinta pide 58 más aire. */
@media (min-width: 1400px) and (max-width: 1599px) {
  .hero__award {
    display: none;
  }
}

/* Colocación del maquetado. 23,88vw - 62px sigue el centro del hueco en
   todos los idiomas: los textos largos del menú lo empujan a la derecha
   y el bloque de la derecha, más ancho en ruso, lo devuelve a la
   izquierda, así que las ocho versiones caen dentro de 15px. */
@media (min-width: 1600px) {
  .hero__award {
    right: max(320px, calc(23.88vw - 62px));
    height: min(40svh, clamp(253px, 17.81vw, 398px));
    aspect-ratio: 592 / 2268;
  }
}

/* Navegadores sin svh (Safari < 15.4): se usa vh. */
@supports not (height: 1svh) {
  .hero__award {
    height: min(23.01vh, 282px, 43.83vw, calc((100vw - 345px) * 3.18649));
  }

  @media (min-width: 1600px) {
    .hero__award {
      height: min(40vh, clamp(253px, 17.81vw, 398px));
    }
  }
}