/* Home · vídeo de fondo del primer bloque (2026-11-08, pedido por el cliente): sustituye a la foto del barco por el vídeo
   «100 Años Contigo» del canal oficial (sin sonido, en bucle). Lo arranca src/home-hero-video/player.ts; mientras carga,
   con «reducir movimiento» o con «ahorro de datos» se ve su primer fotograma (el fondo de .hv-media). Encima, el mismo
   degradado azul que llevaba la foto. El bloque ya es position: relative y sus filas van con z-index 10 (igual que la
   tarjeta de ediciones que se monta sobre su borde), así que el vídeo, en el nivel 0, queda siempre por detrás. */
.ecb-hv > .hv-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #093a5d url("/media/home-video/hero-h-poster.webp") center / cover no-repeat;
}

@media (max-width: 599px) {
  .ecb-hv > .hv-media { background-image: url("/media/home-video/hero-v-poster.webp"); }
}

.hv-media > .hv-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hv-media > .hv-video[data-state="playing"] { opacity: 1; }

.hv-media > .hv-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ecb-v-0f6e3dd01afc, #093a5d) 0%, rgba(6, 115, 143, 0.18) 100%);
}

/* Lema y onda con sombra suave (opción B elegida por el cliente entre tres): muchos bailarines visten de blanco y, sin
   ella, el lema blanco perdía contraste en algunos momentos del vídeo. */
.ecb-hv > :not(.hv-media) :is(h1, h1 *) {
  text-shadow: 0 2px 16px rgba(4, 28, 48, 0.75), 0 1px 3px rgba(4, 28, 48, 0.55);
}

.ecb-hv > :not(.hv-media) svg {
  filter: drop-shadow(0 2px 6px rgba(4, 28, 48, 0.6));
}

/* Menú sobre el vídeo (2026-11-08, opción A elegida por el cliente entre tres). El bloque ocupa la primera pantalla (nunca
   menos que antes: 700 px bajo el menú) y sube por detrás del menú fijo, que mientras está encima va sin fondo, con logo,
   enlaces e icono de la cuenta en blanco. src/home-hero-video/header.ts marca el menú con data-ecb-past-hero en cuanto
   pisa la tarjeta de ediciones (se monta 100 px sobre el vídeo) y entonces vuelve a ser el de siempre. Desplegables, panel
   del menú móvil y el menú móvil abierto (azul noche) no cambian. --ecb-hv-header es el alto del menú de cada versión del
   clon (1440, 390 y 320); header.ts lo ajusta a la medida real. */
:root { --ecb-hv-header: 125.625px; }
@media (max-width: 1024px) { :root { --ecb-hv-header: 81.375px; } }
@media (max-width: 355px) { :root { --ecb-hv-header: 68.34375px; } }

.ecb-hv {
  box-sizing: border-box !important;
  min-height: max(100vh, calc(700px + var(--ecb-hv-header))) !important;
  min-height: max(100svh, calc(700px + var(--ecb-hv-header))) !important;
  margin-top: calc(-1 * var(--ecb-hv-header)) !important;
  padding-top: var(--ecb-hv-header) !important;
}

html [data-ecb-ui="site-header"]:not([data-ecb-past-hero]) > :not([data-ecb-mobile-header]),
html [data-ecb-ui="site-header"]:not([data-ecb-past-hero]) [data-ecb-mobile-header]:not(:has(> [data-ecb-mobile-panel][data-ecb-open="true"])) {
  background-color: transparent !important;
  box-shadow: none !important;
}

html [data-ecb-ui="site-header"]:not([data-ecb-past-hero]) :is(a, a *, i, button):not(ul ul *, [data-ecb-mobile-header] [data-ecb-mobile-panel] *, [data-ecb-mobile-toggle], [data-ecb-mobile-toggle] *) {
  color: #fff !important;
}

html [data-ecb-ui="site-header"]:not([data-ecb-past-hero]) img[alt="El crucero del baile"] {
  filter: brightness(0) invert(1);
}

html [data-ecb-ui="site-header"]:not([data-ecb-past-hero]) .ecb-account-icon:not(:hover) {
  border-color: rgb(255 255 255 / 85%) !important;
  background-color: transparent !important;
  color: #fff !important;
}

html [data-ecb-ui="site-header"]:not([data-ecb-past-hero]) .ecb-nav-lang-top > ul > li > a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

/* Al dejar el vídeo, el fondo blanco entra fundido; se conserva la transición de esconderse al bajar (src/clone/app.css). */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  html [data-ecb-ui="site-header"] > :not([data-ecb-mobile-header]) {
    transition: transform 220ms cubic-bezier(0.77, 0, 0.175, 1), background-color 300ms ease !important;
  }
}