/* ============================================================
   ELLIMAN · HOME — FASE 2.1 (CONTROL TOTAL)
============================================================ */

/* ============================================================
   LOGO FIJO — visible siempre en Home (inicio y tras dockear)
============================================================ */
body.alv-home #alv-logo-fixed {
  display: flex !important;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: top 0.3s ease, height 0.3s ease;
}
body.alv-home:not(.alv-elliman-b) #alv-logo-fixed {
  top: 0;
  height: var(--alv-topbar-h);
}
body.alv-home.alv-elliman-b #alv-logo-fixed {
  top: 0;
  height: var(--alv-header-h);
}
body.alv-home #alv-logo-fixed a {
  pointer-events: auto;
  display: flex;
  align-items: center;
}
body.alv-home #alv-logo-fixed img {
  height: 54px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* El logo del header docker (#alv-logo-header) ya no hace falta en Home:
   el logo fijo de arriba cubre tanto el estado inicial como el dockeado. */
body.alv-home #alv-logo-header {
  display: none !important;
}

/* ============================================================
   TOPBAR — el color/tamaño de los iconos ya se define en
   header.css para todas las páginas; aquí solo mantenemos el
   layout específico de Home si hiciera falta en el futuro.
============================================================ */

/* ============================================================
   HAMBURGUESA — en Home el header SIEMPRE tiene fondo oscuro
   (rgba(0,0,0,.85), fijado por JS en cualquier estado de scroll),
   así que las líneas del icono tienen que ser blancas. Sin esto
   se quedan en el #0e0e0e por defecto de header.css → invisibles
   sobre el fondo casi negro (bug detectado en QA móvil).
============================================================ */
body.alv-home .alv-hamburger span {
  background: #fff;
}

/* El panel desplegable (.alv-mobile-menu) es hijo de .alv-header, así
   que hereda la regla de más abajo "TEXTO MENÚ — blanco en todo
   momento" (body.alv-home(...) .alv-header a { color:#fff !important }),
   pensada para el menú de escritorio sobre el hero transparente.
   Resultado: los enlaces del menú móvil y el de idioma quedaban en
   blanco sobre el fondo blanco del propio panel — invisibles.
   Esa regla tiene 3 clases de especificidad (alv-home + :not(.alv-elliman-b)
   o .alv-elliman-b + alv-header); para ganarle de forma fiable (sin
   depender del orden en el archivo) esta usa 4, añadiendo .alv-header
   Y .alv-mobile-menu a la vez. */
body.alv-home:not(.alv-elliman-b) .alv-header .alv-mobile-menu a,
body.alv-home.alv-elliman-b .alv-header .alv-mobile-menu a {
  color: #0e0e0e !important;
}

/* ============================================================
   CONTEXTO HOME
============================================================ */
body.alv-home {
  --alv-topbar-h: 36px;
  --alv-header-h: 72px;
}

/* ============================================================
   TOPBAR
============================================================ */
body.alv-home .alv-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--alv-topbar-h);
  z-index: 120;

  background: transparent !important;
  transition: background-color 0.25s ease;
}

body.alv-home:not(.alv-elliman-b) .alv-topbar,
body.alv-home:not(.alv-elliman-b) .alv-topbar * {
  color: #fff !important;
}

body.alv-home.alv-elliman-b .alv-topbar {
  height: 0;
  min-height: 0;
  overflow: visible;
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Lupa y bandera -- se separan de la barra para poder bajar
   y alinearse con el header al hacer scroll, igual que el logo */
body.alv-home .alv-topbar-inner {
  position: fixed;
  z-index: 130;
  transition: top 0.3s ease, height 0.3s ease;
  pointer-events: none;
}
body.alv-home .alv-topbar-inner > * {
  pointer-events: auto;
}
body.alv-home:not(.alv-elliman-b) .alv-topbar-inner {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--alv-topbar-h) !important;
  padding: 0 32px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
body.alv-home.alv-elliman-b .alv-topbar-inner {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--alv-header-h) !important;
  padding: 0 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* En móvil, el padding de 32px del estado inicial (arriba) es el
   mismo que en desktop — deja menos aire del necesario en pantallas
   estrechas y no coincide con el padding de 16px que ya usa el
   estado dockeado (.alv-elliman-b). Se iguala a 16px en ambos
   estados por debajo de 900px, mismo criterio que el resto del sitio. */
@media (max-width: 900px) {
  body.alv-home:not(.alv-elliman-b) .alv-topbar-inner {
    padding: 0 16px !important;
  }
}

/* Reserva de espacio para que la lupa y bandera (ancladas a right:16px)
   no se superpongan con el ultimo enlace del menu (ej. HABLEMOS) al fusionarse en la fila */
body.alv-home.alv-elliman-b .alv-header-inner {
  padding-right: 96px !important;
  padding-left: 96px !important;
}
/* ============================================================
   HEADER (FUERZA MÁXIMA)
============================================================ */
body.alv-home .alv-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--alv-header-h);
  z-index: 110;

  background: transparent !important;
  box-shadow: none !important;
  border: none !important;

  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}

/* SCROLL — más transparente, estilo Elliman, en vez de opaco */
body.alv-home.alv-elliman-b .alv-header {
  background: rgba(23, 37, 52, 0.55) !important;
  backdrop-filter: blur(6px) !important;
  box-shadow: none !important;
}

/* TEXTO MENÚ — blanco en todo momento */
body.alv-home:not(.alv-elliman-b) .alv-header a,
body.alv-home.alv-elliman-b .alv-header a {
  color: #fff !important;
}

/* SUBMENÚS DESPLEGABLES — el blanco de arriba no debe filtrarse aquí.
   En reposo, texto navy (legible sobre el fondo blanco del desplegable);
   en hover, blanco sobre el fondo navy que ya pinta header.css. */
body.alv-home .alv-header .alv-menu-left ul.sub-menu li a,
body.alv-home .alv-header .alv-menu-right ul.sub-menu li a {
  color: #172534 !important;
}
body.alv-home .alv-header .alv-menu-left ul.sub-menu li a:hover,
body.alv-home .alv-header .alv-menu-right ul.sub-menu li a:hover {
  color: #fff !important;
}

/* SUBMENÚS BLOQUEADOS HASTA DOCKEAR — mientras el header sigue "flotando"
   al final del hero (todavía no llegó arriba del todo), los desplegables
   no deben abrirse aunque se pase el ratón por encima. */
body.alv-home:not(.alv-elliman-b) .alv-menu-left li:hover > ul.sub-menu,
body.alv-home:not(.alv-elliman-b) .alv-menu-right li:hover > ul.sub-menu,
body.alv-home:not(.alv-elliman-b) .alv-menu-left ul.sub-menu li:hover > ul.sub-menu,
body.alv-home:not(.alv-elliman-b) .alv-menu-right ul.sub-menu li:hover > ul.sub-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   HERO FULLSCREEN REAL
============================================================ */
.alv-video-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* VIDEO */
.alv-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   HOME · HERO OVERLAY ALFA (GRADIENTE PREMIUM)
========================================= */

body.alv-home .alv-video-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.42) 22%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.42) 78%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

/* En móvil no hay menú de texto en el header (solo lupa y hamburguesa),
   así que el oscurecido fuerte de arriba/abajo que existe para dar
   contraste al menú de escritorio/tablet no aporta nada — solo apaga
   el video. Se desactiva por debajo de 900px, mismo criterio que el
   resto del sitio. */
@media (max-width: 900px) {
  body.alv-home .alv-video-hero::after {
    background: none !important;
  }
}

/* ============================================================
   CONTENIDO HERO
============================================================ */
.alv-hero-content {
  position: relative;
  z-index: 2;

  height: 100%;
  padding-top: calc(var(--alv-topbar-h) + var(--alv-header-h));

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: #fff;
}

.alv-hero-content h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(32px, 4vw, 56px);
  margin-bottom: 24px;
}

.alv-hero-content p {
  max-width: 720px;
  margin-bottom: 32px;
  opacity: 1;
}

/* ============================================================
   CTA
============================================================ */
.alv-btn-hero {
  padding: 14px 34px;
  border: 1px solid #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  background: transparent;
  color: #fff;
  text-decoration: none;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.alv-btn-hero:hover {
  background: #fff;
  color: #0b1d33;
}

/* ============================================================
   BOTÓN PLAY / PAUSE
============================================================ */
.alv-video-toggle {
  position: absolute;
  top: calc(var(--alv-topbar-h) + var(--alv-header-h) + 18px);
  right: 22px;

  width: 42px;
  height: 42px;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);

  z-index: 3;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.alv-video-toggle svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

/* ============================================================
   TÍTULO "EXCLUSIVAS" (Escena 5) — se sale de pantalla en móvil
   ------------------------------------------------------------
   .alv-exc__title trae white-space:nowrap fijo desde el HTML
   embebido en Elementor (no vive en el tema). A 32px de fuente,
   el texto completo mide ~611px y se desborda por ambos lados en
   un viewport de 430px. Además su contenedor (.alv-exc__titles)
   es un item flex con min-width:auto por defecto — el bug clásico
   de flexbox que impide que el texto se ajuste (wrap) aunque se
   permita, porque el item nunca se encoge por debajo de su ancho
   intrínseco. Se corrigen ambas cosas con !important, ya que la
   regla original de white-space no lleva !important y esta sí gana.
============================================================ */
@media (max-width: 900px) {
  .alv-exc__titles {
    min-width: 0 !important;
  }
  .alv-exc__title {
    white-space: normal !important;
  }
}

/* ============================================================
   CARRUSEL "OPERACIONES REALIZADAS" (Escena 6) — el cliente quiere
   que en móvil NO sea a pantalla completa como el resto de escenas,
   sino más horizontal, para que la marca de agua de las fotos se
   vea entera. .alv-exitos trae height:85vh fijo (sin media query)
   desde el HTML embebido en Elementor. Las fotos son 1920×1280
   (ratio 3:2) y con background-size:cover en una caja tan alta se
   recortaba la mayor parte de la imagen.
   OJO: se usa height:66.6667vw (equivalente a ratio 3:2 en un
   elemento a ancho completo) en vez de aspect-ratio — comprobado en
   vivo que aspect-ratio hace que el contenedor "e-con/e-flex" de
   Elementor que envuelve este widget HTML calcule su propia altura
   como 0px (no la contabiliza), y el Acto siguiente se monta
   encima en vez de ir debajo. Con height normal en vw no pasa.
============================================================ */
@media (max-width: 900px) {
  .alv-exitos {
    height: 66.6667vw !important;
    min-height: 0 !important;
  }
}