/* Hero «hilos de vídeo» de la home (solo la primera pantalla). Todo va bajo .hh para no tocar el resto. */
.hh {
  --hh-cream: #F3EBCB; --hh-olive: #535F34; --hh-green: #62934C;
  position: sticky; top: var(--hh-header, 72px); height: calc(100svh - var(--hh-header, 72px)); min-height: 520px; overflow: hidden; background: var(--hh-cream);
}
/* recorrido del scroll: la escena se queda fija mientras se hace el zoom dentro de la palabra */
.hh-scroller { position: relative; height: 230svh; }
.hh-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; font-size: 17px; font-weight: 600; letter-spacing: .04em; color: var(--hh-olive); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hh-hint i { width: 3px; height: 38px; background: var(--hh-olive); display: block; border-radius: 2px; animation: hh-drip 1.4s ease-in-out infinite; transform-origin: top; }
@keyframes hh-drip { 0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(0);transform-origin:bottom} }
.hh.is-live .hh-hint { opacity: 0; }
/* pantalla final sobre el vídeo */
.hh-final { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px; padding: 0 16px; text-align: center; opacity: 0; pointer-events: none; }
.hh-final.live { pointer-events: auto; }
.hh-small-logo { width: min(46vw, 300px); }
.hh-small-logo svg { width: 100%; height: auto; display: block; }
.hh-final .hh-rotator { color: var(--hh-cream); }
.hh-final .hh-rotator .hh-word { color: #A9C98A; }
@media (prefers-reduced-motion: reduce) { .hh-scroller { height: auto; } .hh { position: relative; top: 0; } }
.hh-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hh-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,12,.30) 0%, rgba(20,24,12,.15) 40%, rgba(20,24,12,.65) 100%); pointer-events: none; }
.hh-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hh-fallback { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(84vw, 760px); }
.hh.is-live .hh-fallback { display: none; }
.hh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hh-content { position: absolute; left: 0; right: 0; top: 64%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 16px; }
.hh.is-live .hh-content { opacity: 0; transform: translateY(20px); }

/* «Descubre [planes|alojamientos|escapadas|rutas]» */
.hh-rotator { font-family: 'Fredoka', 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: clamp(26px, 4.4vw, 46px); line-height: 1.25; display: flex; gap: .28em; align-items: center; justify-content: center; color: var(--hh-olive); margin: 0; }
.hh-rotator > span { display: block; height: 1.25em; }
.hh-rotator .hh-slot { position: relative; overflow: hidden; text-align: left; transition: width .45s cubic-bezier(.65,0,.35,1); }
.hh-rotator .hh-word { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1.25; color: var(--hh-green); }

.hh-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hh-btn { display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .2s; }
.hh-btn:hover { transform: translateY(-2px); }
.hh-btn:focus-visible { outline: 3px solid var(--hh-green); outline-offset: 3px; }
.hh-btn-primary { background: var(--hh-olive); color: var(--hh-cream); }
.hh-btn-ghost { background: var(--hh-cream); color: var(--hh-olive); border: 1.5px solid var(--hh-olive); }

@media (max-width: 640px) {
  .hh-content { top: 60%; }
  .hh-ctas { flex-direction: column; align-items: center; }
}