/* =============================================================
   HOME HERO · híbrido cinematic+editorial
   Vídeo full-bleed + tipografía editorial overlay + masthead + ticker
   Convive con .home-hero original (style.css) gracias al modifier
   --cinematic. Si en el futuro otra plantilla reusa .home-hero
   sin el modifier, mantendrá su layout split antiguo.
   ============================================================= */

/* ----- MASTHEAD (top bar editorial sobre header) ----- */
.site-mast {
  position: relative;
  z-index: 2;
  background: rgba(20, 105, 131, 0.92);
  color: var(--paper);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(253, 250, 243, 0.08);
  backdrop-filter: blur(8px);
}
.site-header.is-over-hero .site-mast {
  background: rgba(0, 0, 0, 0.32);
  border-bottom-color: rgba(253, 250, 243, 0.16);
}
.site-mast__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  line-height: 1;
}
.site-mast__edition { white-space: nowrap; }
/* Acceso B2B "For agencies": link directo, sin wrapper. Subrayado sutil al
   hover para señalar que es clickable sin ruido visual permanente. */
.site-mast__meta {
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}
.site-mast__meta:hover { color: var(--ochre); border-bottom-color: var(--ochre); }
.site-mast__meta:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; border-radius: 1px; }

/* ----- HEADER: estado "sobre el hero" (texto blanco, fondo transparente) ----- */
.site-header.is-over-hero { background: transparent; border-bottom-color: transparent; }
.site-header.is-over-hero .nav-inner .brand .brand-mark,
.site-header.is-over-hero .nav-inner .brand .brand-name { color: var(--paper); }
.site-header.is-over-hero .nav-menu a,
.site-header.is-over-hero .nav-agencies,
.site-header.is-over-hero .lang-switch,
.site-header.is-over-hero .nav-toggle { color: var(--paper); }
.site-header.is-over-hero .nav-menu a:hover { color: var(--ochre); }
.site-header.is-over-hero .nav-agencies {
  color: rgba(253, 250, 243, 0.7);
  border-left-color: rgba(253, 250, 243, 0.22);
}
.site-header.is-over-hero .nav-agencies:hover { color: var(--paper); }
.site-header.is-over-hero .lang-switch a.is-active { color: var(--paper); }

/* Cuando ya scrolleamos, gana .is-scrolled (sólido). Vence a is-over-hero. */
.site-header.is-scrolled.is-over-hero { background: rgba(246, 241, 232, 0.92); }
.site-header.is-scrolled.is-over-hero .brand .brand-mark,
.site-header.is-scrolled.is-over-hero .brand .brand-name,
.site-header.is-scrolled.is-over-hero .nav-menu a,
.site-header.is-scrolled.is-over-hero .nav-toggle { color: var(--ink); }
.site-header.is-scrolled.is-over-hero .nav-agencies { color: var(--ink-muted); border-left-color: var(--line); }
.site-header.is-scrolled.is-over-hero .lang-switch { color: var(--ink-muted); }
.site-header.is-scrolled.is-over-hero .lang-switch a.is-active { color: var(--ink); }
.site-header.is-scrolled.is-over-hero .site-mast { background: rgba(20, 105, 131, 0.92); }

/* ----- HERO cinematic: contenedor full-bleed -----
   Flex column: media absoluto detrás → inner (flex:1, centra el copy) →
   ticker (in-flow, último elemento). Así el ticker SIEMPRE queda visible al
   fondo del viewport sin tener que scrollear: es lo que indica que hay más
   contenido abajo (además del señuelo lateral). */
.home-hero--cinematic {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* iOS dynamic viewport */
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Sobrescribe el align-items:center que hereda del .home-hero original
     (style.css). Con center los hijos NO se estiran al ancho — por eso el
     ticker quedaba con bordes a izquierda/derecha. Stretch los lleva al 100%. */
  align-items: stretch;
  overflow: hidden;
  background: #0c1418; /* fallback antes de que cargue el vídeo */
  color: var(--paper);
}
/* WordPress admin bar (sólo logged-in) consume 32px arriba (46px en pantallas
   estrechas). Le restamos esa altura al hero para que el ticker quede dentro
   del viewport. Usa la misma regla que ya aplica al .site-header en style.css */
body.admin-bar .home-hero--cinematic {
  min-height: calc(100vh - 32px);
  min-height: calc(100svh - 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .home-hero--cinematic {
    min-height: calc(100vh - 46px);
    min-height: calc(100svh - 46px);
  }
}

/* Sobrescribe la cuadrícula split del style.css original (sin tocarla). */
.home-hero--cinematic .home-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: transparent;
  overflow: hidden;
}
.home-hero--cinematic .home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ken Burns muy sutil: zoom 1.0 → 1.08 en 32s, loop infinito. */
  animation: tme-ken-burns 32s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .home-hero--cinematic .home-hero__video { animation: none; }
}
@keyframes tme-ken-burns {
  from { transform: scale(1.00) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}

/* Overlay de degradado: oscurece arriba-izquierda donde vive el copy y
   deja la zona inferior-derecha más limpia para que se vea Andalucía. */
.home-hero--cinematic .home-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
}

/* ----- HERO inner: contenido editorial -----
   Hereda max-width: 1400 + padding-lateral 48 del .container (style.css) para
   que el copy alinee perfecto con masthead y nav. Sobrescribimos sólo el
   padding vertical y usamos flex-column + justify-content:center para que el
   copy se centre verticalmente en el espacio entre header y ticker.
   Visual symmetry: PT = altura_header_fijo + PB → respiro arriba ≈ abajo. */
.home-hero--cinematic .home-hero__inner {
  position: relative;
  z-index: 2;
  flex: 1; /* ocupa el espacio entre header y ticker (eje MAIN = vertical) */
  /* `flex:1` no afecta al eje cross (horizontal). Los `margin: 0 auto` del
     .container hacen que en flex el item se colapse al ancho del contenido y
     se centre, en vez de estirarse a max-width:1400. Forzamos width:100%
     para que el inner ocupe hasta 1400 de ancho y los auto márgenes lo
     centren correctamente respecto al viewport. */
  width: 100%;
  padding-top: 160px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra el copy verticalmente en el sobrante */
}
/* Copy pegado al borde izquierdo del .container (alinea con masthead + nav).
   En flex-column con stretch implícito + max-width, algunos navegadores
   centran el item porque el max-content del título es menor que max-width.
   Forzamos: width:100%, align-self:flex-start y margin-right:auto. */
.home-hero--cinematic .home-hero__copy {
  max-width: 760px;
  width: 100%;
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}

.home-hero--cinematic .home-hero__eyebrow {
  color: rgba(253, 250, 243, 0.82);
  margin-bottom: 36px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.home-hero--cinematic .home-hero__eyebrow .rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--ochre);
}

/* Título grande con line-reveal. Cap a 104px para que en pantallas <900px de
   alto no se rompa en 3 líneas y desborde el viewport por debajo del ticker. */
.home-hero--cinematic .home-hero__title {
  font-size: clamp(48px, 6.6vw, 104px);
  line-height: 0.96;
  color: var(--paper);
  letter-spacing: -0.018em;
  margin-bottom: 28px;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.18);
}
/* Cada línea es un "mask" con overflow:hidden; dentro hay un span que sube
   desde abajo en su propia animación. Ambas líneas comparten el mismo patrón
   para que el efecto sea consistente y secuencial. */
.home-hero--cinematic .home-hero__line {
  display: block;
  overflow: hidden;
  /* Pad muy pequeño para que letras descendentes (g, y, j) no se recorten. */
  padding-bottom: 0.06em;
}
.home-hero--cinematic .home-hero__line > span {
  display: inline-block;
  will-change: transform, opacity;
  animation: tme-line-reveal 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.home-hero--cinematic .home-hero__line--1 > span { animation-delay: 220ms; }
.home-hero--cinematic .home-hero__line--2 > span { animation-delay: 420ms; }
@keyframes tme-line-reveal {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero--cinematic .home-hero__line > span { animation: none; transform: none; opacity: 1; }
}

.home-hero--cinematic .home-hero__lead {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: rgba(253, 250, 243, 0.86);
  max-width: 580px;
  margin-bottom: 44px;
  animation: tme-fade-in 700ms ease both;
  animation-delay: 720ms;
}
.home-hero--cinematic .home-hero__cta {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  animation: tme-fade-in 700ms ease both;
  animation-delay: 860ms;
}
.home-hero--cinematic .home-hero__alt {
  color: var(--paper);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(253, 250, 243, 0.36);
  transition: border-color 180ms ease, color 180ms ease;
}
.home-hero--cinematic .home-hero__alt:hover { color: var(--ochre); border-bottom-color: var(--ochre); }
@keyframes tme-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero--cinematic .home-hero__lead,
  .home-hero--cinematic .home-hero__cta { animation: none; opacity: 1; transform: none; }
}

/* ----- TICKER inferior: prueba social inline (in-flow, último flex child) -----
   Edge-to-edge real: forzamos width:100% y align-self:stretch para evitar que
   en algunos navegadores el flex-column stretch quede ambiguo. Fondo más
   opaco para que el contraste con el vídeo sea claro en los laterales. */
.home-hero__ticker {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  margin: 0;
  background: rgba(8, 18, 24, 0.55);
  border-top: 1px solid rgba(253, 250, 243, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Ticker edge-to-edge: sin .container, sólo padding lateral propio.
   El scroll-cue se pega a la derecha vía margin-left: auto. */
.home-hero__ticker-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 48px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(253, 250, 243, 0.84);
  flex-wrap: nowrap;
  overflow: hidden;
}
.home-hero__stat { white-space: nowrap; color: rgba(253, 250, 243, 0.88); }
.home-hero__sep { color: rgba(253, 250, 243, 0.32); }
/* Link a TripAdvisor: subrayado sutil + hover ocre para señalar clickable. */
.home-hero__stat--link {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(253, 250, 243, 0.38);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}
.home-hero__stat--link:hover { color: var(--ochre); border-bottom-color: var(--ochre); }
.home-hero__stat--link:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 4px;
  border-radius: 1px;
}
/* Credencial oficial: marca con sutil énfasis (es el diferencial real). */
.home-hero__stat--credential { color: var(--paper); }

/* Scroll cue: empujado al extremo derecho del ticker con la flecha bobbing. */
.home-hero__scroll-cue {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(253, 250, 243, 0.78);
  white-space: nowrap;
}
.home-hero__scroll-cue span[aria-hidden] {
  display: inline-block;
  animation: tme-bob 1.6s ease-in-out infinite;
}
@keyframes tme-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__scroll-cue span[aria-hidden] { animation: none; }
}

/* ----- RESPONSIVE ----- */
@media (max-width: 1024px) {
  .home-hero--cinematic .home-hero__inner {
    /* En tablet header ≈ 112px → PT = 112 + PB para simetría visual. */
    padding-top: 144px;
    padding-bottom: 32px;
  }
  .home-hero__ticker-inner { padding: 12px 32px; gap: 14px; font-size: 10.5px; }
}
/* Pantallas BAJAS (laptops 13" con admin bar + browser chrome): comprimimos
   título y padding para que todo el hero entre sin overflow vertical.
   Mantenemos la fórmula PT = header_h + PB para simetría visual. */
@media (max-height: 860px) {
  .home-hero--cinematic .home-hero__inner { padding-top: 144px; padding-bottom: 32px; }
  .home-hero--cinematic .home-hero__title { font-size: clamp(40px, 5.6vw, 84px); margin-bottom: 24px; }
  .home-hero--cinematic .home-hero__lead { margin-bottom: 28px; }
  .home-hero--cinematic .home-hero__eyebrow { margin-bottom: 24px; }
}
@media (max-height: 720px) {
  .home-hero--cinematic .home-hero__inner { padding-top: 132px; padding-bottom: 24px; }
  .home-hero--cinematic .home-hero__title { font-size: clamp(36px, 5vw, 68px); margin-bottom: 18px; }
  .home-hero--cinematic .home-hero__lead { font-size: 15px; margin-bottom: 20px; }
  .home-hero__ticker-inner { padding: 9px 32px; font-size: 10.5px; }
}

@media (max-width: 720px) {
  .site-mast__inner { padding: 8px 24px; gap: 16px; font-size: 10px; letter-spacing: 0.14em; }
  .site-mast__meta { display: none; } /* en móvil sólo deja la edición */

  .home-hero--cinematic .home-hero__inner {
    padding-top: 140px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .home-hero--cinematic .home-hero__title { font-size: clamp(40px, 11vw, 72px); margin-bottom: 28px; }
  .home-hero--cinematic .home-hero__lead { font-size: 15px; margin-bottom: 32px; }
  .home-hero--cinematic .home-hero__cta { gap: 18px; }

  .home-hero__ticker-inner { padding: 10px 24px; gap: 10px; font-size: 9.5px; letter-spacing: 0.12em; }
  /* Móvil: oculta stats menos relevantes para que quepa el scroll-cue */
  .home-hero__stat:nth-child(n+5), .home-hero__sep:nth-child(n+5) { display: none; }
}