/*
============================================================================
🧭 BAQUEANO NICARAGUA — MÓDULO DE FONDOS DE VIDEO CINEMATOGRÁFICOS (VIDEOS.CSS)
============================================================================

🎯 1. POR QUÉ (WHY / PROPÓSITO):
- Crear un impacto visual de alta gama en todos los encabezados principales del portal,
  sumergiendo al usuario en la atmósfera viva de cada tema (Gastronomía, Historia,
  Ambiental, Música, Aliados, Negocios y Destinos).
- Garantizar contraste absoluto (WCAG AAA) sobre textos mediante gradientes radiales oscuros,
  efectos de scanlines sutiles y aceleración por GPU sin penalizar el rendimiento móvil.

⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
- Contenedor `.video-hero-wrapper` con posición relativa y overflow oculto.
- Elemento `<video>` con `object-fit: cover`, `will-change: transform` y `transform: translate3d(0,0,0)`.
- Doble capa de oscurecimiento:
  * `.video-hero-gradient`: Radial + lineal hacia el fondo `#0F172A`.
  * `.video-hero-scanlines`: Textura microscópica que añade textura cinematográfica.
- Respeto a accesibilidad: `@media (prefers-reduced-motion: reduce)` desactiva la reproducción.

📦 3. QUÉ (WHAT / COMPONENTES Y CLASES EXPUESTAS):
- Variables :root para control maestro: `--video-hero-min-height`, `--video-brightness`, `--video-contrast`, `--video-saturation`, `--video-overlay-opacity`.
- `.video-hero-wrapper`, `.video-hero-media`, `.video-hero-gradient`, `.video-hero-scanlines`,
  `.video-hero-content`, `.video-hero-title`, `.video-hero-subtitle`, `.video-hero-badge`,
  `.video-hero-ctrl-btn`.
============================================================================
*/

:root {
  /* ========================================================================
     VARIABLES DE CONTROL CENTRALIZADO DE VIDEOS
     ======================================================================== */
  --video-hero-min-height: clamp(520px, 66vh, 760px);
  --video-hero-mobile-height: clamp(430px, 68svh, 620px);
  --video-brightness: 0.88;
  --video-contrast: 1.04;
  --video-saturation: 1.16;
  --video-scale: 1.002;
  --video-overlay-opacity: 0.72;
  --video-scanlines-opacity: 0.08;
  --video-border-color: rgba(246, 94, 1, 0.35);
  --video-card-radius: 16px;
  --video-aspect-landscape: 16 / 9;
  --video-aspect-portrait: 9 / 16;
}

.video-hero-wrapper {
  position: relative;
  min-height: var(--video-hero-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--video-border-color);
  background: #080D1A;
  margin-top: 0;
  margin-bottom: 0 !important;
  padding-top: clamp(80px, 12vh, 120px);
  padding-bottom: clamp(32px, 5vh, 60px);
}

.video-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0) scale(var(--video-scale));
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  pointer-events: none;
  filter: brightness(var(--video-brightness)) saturate(var(--video-saturation)) contrast(var(--video-contrast));
  will-change: transform;
}

.video-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.18) 0%, rgba(15, 23, 42, 0.3) 48%, rgba(15, 23, 42, 0.72) 100%),
              linear-gradient(90deg, rgba(15, 23, 42, 0.42) 0%, transparent 34%, transparent 72%, rgba(15, 23, 42, 0.24) 100%);
  z-index: 2;
  pointer-events: none;
}

.video-hero-scanlines {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 4px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.08;
}

.video-hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  max-width: 860px;
  padding: 4rem 1.5rem;
  margin: 0 auto;
}

.video-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(246, 94, 1, 0.4);
  color: var(--arena-pinolera);
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  margin-bottom: 1.2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.video-hero-title {
  font-size: 2.8rem;
  font-family: var(--font-display);
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.18;
  margin-bottom: 1rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(22, 93, 111, 0.35);
}

.video-hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* BOTÓN DE PAUSA/PLAY ACCESIBILIDAD */
.video-hero-ctrl-btn {
  position: absolute;
  bottom: 1rem;
  right: 1.5rem;
  z-index: 5;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--arena-pinolera);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.video-hero-ctrl-btn:hover {
  background: var(--terracotta);
  color: #FFFFFF;
  border-color: rgba(244, 230, 193, 0.6);
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .video-hero-wrapper {
    min-height: clamp(430px, 68svh, 620px);
  }
  .video-hero-title {
    font-size: 2.1rem;
  }
  .video-hero-subtitle {
    font-size: 0.92rem;
  }
}

@media (min-width: 1920px) {
  .video-hero-wrapper {
    min-height: clamp(620px, 66vh, 820px);
  }

  .video-hero-media {
    filter: brightness(0.92) saturate(1.18) contrast(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-hero-media {
    display: none;
  }
  .video-hero-wrapper {
    background: radial-gradient(circle at center, #132438 0%, #080D1A 100%);
  }
}

/* ============================================================================
   🧭 HERO CONTINUO DE BORDE A BORDE (ESTILO INDEX.HTML)
   ============================================================================
   🎯 1. POR QUÉ (WHY / PROPÓSITO):
   - Eliminar el espacio muerto/hueco oscuro intermedio ("la parte de medio")
     entre la barra de navegación institucional y los encabezados cinematográficos
     en Destinos, Historia, Gastronomía y Música.
   - Homogeneizar la experiencia visual para que todas las páginas insignia de
     "Mi País" fluyan continuas desde la cima tal como index.html.

   ⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
   - Barra de navegación flotante transparente al inicio (.main-navbar:not(.scrolled)),
     adquiriendo fondo glassmorphic con desenfoque al desplazarse hacia abajo.
   - Eliminación del padding-top y margin-top del contenedor .page-wrapper cuando
     existe un encabezado hero superior.
   - Encabezado .destinations-video-hero y .video-hero-wrapper sin border-radius,
     de borde a borde, iniciando en y:0.
   - Acople armónico de las secciones subsiguientes (.history-section-pro,
     .destinations-section-pro, .environmental-section-pro) sin espacios vacíos.

   📦 3. QUÉ (WHAT / REGLAS EXPUESTAS):
   - .has-video-hero .main-navbar, .has-hero-header, .destinations-video-hero,
     espaciados de transición fluidos a 60fps.
   ============================================================================ */

/* 1. Navbar transparente en la cima para páginas con hero (Destinos, Historia, Gastronomía, Música) */
.page-index-definitive .main-navbar:not(.scrolled),
.has-video-hero .main-navbar:not(.scrolled),
body:has(.destinations-video-hero) .main-navbar:not(.scrolled),
body:has(.video-hero-wrapper) .main-navbar:not(.scrolled) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

/* 2. Navbar dinámico al hacer scroll */
.page-index-definitive .main-navbar.scrolled,
.has-video-hero .main-navbar.scrolled,
body:has(.destinations-video-hero) .main-navbar.scrolled,
body:has(.video-hero-wrapper) .main-navbar.scrolled {
  background: rgba(10, 15, 29, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(244, 230, 193, 0.2) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(246, 94, 1, 0.3) !important;
}

/* 3. Erradicación del espacio muerto intermedio ("la parte de medio") */
.has-video-hero .page-wrapper,
.page-wrapper.has-hero-header,
.video-hero-wrapper + .page-wrapper,
.destinations-video-hero + .page-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 4. Hero de Destinos continuo y de ancho completo */
.destinations-video-hero {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 72vh, 800px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(246, 94, 1, 0.35);
  box-shadow: none !important;
  background: #070B14;
  padding-top: clamp(90px, 13vh, 130px);
  padding-bottom: clamp(36px, 5vh, 60px);
}

@media (max-width: 768px) {
  .destinations-video-hero {
    min-height: clamp(480px, 70svh, 620px);
    border-radius: 0 !important;
    padding-top: clamp(80px, 12vh, 100px);
    padding-bottom: 1.75rem;
  }
}

/* 5. Transición fluida a las secciones de contenido sin huecos */
.has-video-hero .history-section-pro,
.page-historia .history-section-pro {
  padding: 2.5rem 0 5rem !important;
}

.has-video-hero .history-section-pro .timeline-periods-flow {
  margin: 1.5rem 0 4rem !important;
}

.has-video-hero .destinations-section-pro,
.page-destinos .destinations-section-pro,
.page-gastronomia .destinations-section-pro {
  padding: 2.25rem 0 5rem !important;
}

.has-video-hero .destinations-section-pro .gastro-section-header {
  margin: 0 auto 2.5rem auto !important;
}

.has-video-hero .environmental-section-pro,
.page-musica .environmental-section-pro {
  padding: 2.25rem 0 5rem !important;
}

/* ============================================================================
   ENCABEZADOS CINEMATOGRÁFICOS UNIFICADOS Y FUENTES DE ALTA DEFINICIÓN
   ============================================================================
   POR QUÉ:
   - Dar a cada página pública una entrada inmersiva equivalente a la portada,
     sin eliminar sus títulos, descripciones, buscadores, métricas o controles.
   - Evitar el desenfoque causado por ampliar medios pequeños por encima de su
     resolución natural y mantener una imagen nítida en monitores de alta densidad.

   CÓMO:
   - Los encabezados ocupan el viewport visible y centran el contenido sobre una
     composición de contraste controlado; la navegación permanece superpuesta.
   - Vídeos e imágenes conservan su relación con object-fit y usan renderizado GPU
     sin escalados artificiales, filtros de desenfoque ni texturas invasivas.
   - En móvil se respeta el área segura y se reduce la escala tipográfica sin
     sacrificar legibilidad ni ocultar acciones existentes.

   QUÉ:
   - Unifica video-hero-wrapper, destinations-video-hero, institucional-hero y
     host-hero-section; además normaliza títulos, subtítulos, overlays y controles.
   ============================================================================ */

.video-hero-wrapper,
.destinations-video-hero,
.institucional-hero,
.host-hero-section {
  min-height: 100svh !important;
  padding-top: clamp(104px, 15vh, 150px) !important;
  padding-bottom: clamp(52px, 8vh, 88px) !important;
  display: flex;
  align-items: center !important;
  justify-content: center;
  isolation: isolate;
  border-radius: 0 !important;
}

.video-hero-wrapper,
.destinations-video-hero,
.host-hero-section,
.institucional-hero {
  background-color: #0F172A !important;
}

.video-hero-media,
.hero-bg-video,
.institucional-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  filter: saturate(1.08) contrast(1.04) brightness(0.84) !important;
}

.hero-nicaragua-bg-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60% !important;
  transform: scale(1.12) translateZ(0) !important;
  transform-origin: center 60% !important;
  image-rendering: auto;
  backface-visibility: hidden;
  opacity: 1 !important;
  filter: brightness(1.04) saturate(1.08) contrast(1.02) !important;
}

.institucional-hero-bg {
  opacity: 0.88 !important;
}

.institucional-hero:hover .institucional-hero-bg {
  transform: translateZ(0) !important;
}

.video-hero-gradient,
.video-overlay-gradient,
.institucional-hero-gradient {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.24) 0%, rgba(15, 23, 42, 0.16) 42%, rgba(15, 23, 42, 0.82) 100%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.38), transparent 35%, transparent 65%, rgba(15, 23, 42, 0.38)) !important;
}

.video-hero-scanlines,
.video-scanlines {
  opacity: 0.025 !important;
}

.video-hero-content,
.hero-video-content,
.institucional-hero-content {
  width: min(100%, 1080px);
  max-width: 1080px !important;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px) !important;
  text-align: center;
}

.video-hero-title,
.hero-video-content .section-headline,
.institucional-hero-title {
  font-size: clamp(2.65rem, 6vw, 5.6rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
  text-shadow: 0 5px 8px rgba(0, 0, 0, 0.78), 0 18px 48px rgba(0, 0, 0, 0.46) !important;
}

.video-hero-subtitle,
.hero-video-content .section-subtext,
.institucional-hero-subtitle {
  max-width: 850px !important;
  margin-inline: auto !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
  text-wrap: balance;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9) !important;
}

.has-cinematic-header .main-navbar:not(.scrolled),
body:has(.institucional-hero) .main-navbar:not(.scrolled),
body:has(.host-hero-section) .main-navbar:not(.scrolled) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

.has-cinematic-header .main-navbar.scrolled,
body:has(.institucional-hero) .main-navbar.scrolled,
body:has(.host-hero-section) .main-navbar.scrolled {
  background: rgba(15, 23, 42, 0.94) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

@media (max-width: 768px) {
  .video-hero-wrapper,
  .destinations-video-hero,
  .institucional-hero,
  .host-hero-section {
    min-height: 100svh !important;
    padding-top: calc(84px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(42px + env(safe-area-inset-bottom)) !important;
  }

  .video-hero-title,
  .hero-video-content .section-headline,
  .institucional-hero-title {
    font-size: clamp(2.15rem, 10.5vw, 3.35rem) !important;
    line-height: 1.02 !important;
  }

  .video-hero-content,
  .hero-video-content,
  .institucional-hero-content {
    padding-inline: 18px !important;
  }

  .video-hero-ctrl-btn {
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
  }
}