/* Hero "viaje": Mar -> Sal -> Humo -> Mesa */
body{overflow-x:clip}
.hv{position:relative;isolation:isolate;touch-action:pan-y;min-height:100vh;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--noche);padding:120px 0 150px}
.hv-escenas,.hv-esc{position:absolute;inset:0}
.hv-escenas{z-index:-3}
.hv-esc{opacity:0;overflow:hidden}
.hv-esc.activa,.hv-esc.entra{opacity:1}
.hv-esc.entra{z-index:2}
.hv-esc img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 9s linear}
.hv-esc.activa img{transform:scale(1)}
/* velo marino comun para leer el texto */
.hv-esc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--noche-rgb),.65),transparent 22%),linear-gradient(95deg,rgba(var(--noche-rgb),.94) 0%,rgba(var(--noche-rgb),.72) 42%,rgba(var(--noche-rgb),.15) 75%),linear-gradient(0deg,rgba(var(--noche-rgb),.9),transparent 38%)}
/* mar en blanco y negro -> duotono azul */
.hv-mar img{filter:grayscale(1) contrast(1.2) brightness(.62)}
.hv-mar::before{content:"";position:absolute;inset:0;z-index:1;background:#0a6fa8;mix-blend-mode:color}
.hv-mesa::after{background:linear-gradient(95deg,rgba(var(--noche-rgb),.95) 0%,rgba(var(--noche-rgb),.8) 45%,rgba(var(--noche-rgb),.35))}

.hv-canvas{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none}

/* palabra gigante en contorno */
.hv-palabras{position:absolute;right:-1vw;bottom:90px;z-index:-1;pointer-events:none;line-height:.8}
.hv-palabras span{position:absolute;right:0;bottom:0;font-family:"Playfair Display",serif;font-weight:700;font-style:italic;font-size:clamp(7rem,24vw,24rem);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28);white-space:nowrap;opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1.4s cubic-bezier(.2,.7,.2,1);translate:var(--px,0) var(--py,0)}
.hv-palabras span.activa{opacity:1;transform:none}

/* plato que aparece en "Mesa" */
.hv-plato{position:absolute;right:4%;top:50%;width:min(46vw,640px);height:auto;z-index:-1;filter:drop-shadow(0 40px 50px rgba(0,0,0,.6));opacity:0;transform:translate(60px,-50%) rotate(8deg) scale(.9);transition:opacity 1s .3s,transform 1.6s .3s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.hv.en-mesa .hv-plato{opacity:1;transform:translate(0,-50%) rotate(0) scale(1)}

.hv-cont{position:relative}
.hv .pre{color:var(--azul-claro);display:flex;align-items:center;gap:.8rem}
.hv h1{font-size:clamp(2.5rem,5.6vw,4.8rem);font-weight:600;margin-bottom:1.6rem;max-width:720px}

/* texto de cada estacion */
.hv-textos{display:grid;max-width:540px;min-height:7.5rem}
.hv-txt{grid-area:1/1;display:flex;gap:1.1rem;align-items:flex-start;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.hv-txt.activa{opacity:1;transform:none;transition-delay:.35s;pointer-events:auto}
.hv-num{font-family:"Playfair Display",serif;font-style:italic;font-size:2.4rem;line-height:1;color:var(--salmon)}
.hv-t{font-weight:700;font-size:1.15rem;margin:0 0 .3rem;letter-spacing:.02em}
.hv-p{margin:0;color:rgba(255,255,255,.78);font-size:1.02rem;line-height:1.6}

/* linea de estaciones */
.hv-linea{position:absolute;left:0;right:0;bottom:28px;z-index:2}
.hv-linea ol{list-style:none;margin:0;padding:0;display:flex;flex:1;gap:1.2rem}
.hv-linea li{flex:1}
.hv-linea ol button{all:unset;cursor:pointer;display:block;width:100%;position:relative;padding:0 0 .9rem;color:rgba(255,255,255,.55);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;transition:color .3s}
.hv-linea ol button:hover,.hv-linea ol button.activa{color:#fff}
.hv-linea ol button:focus-visible{outline:2px solid var(--azul-claro);outline-offset:6px}
.hv-n{color:var(--salmon);margin-right:.6rem;font-weight:700}
.hv-linea ol button::before,.hv-linea ol button i{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.2)}
.hv-linea ol button i{background:var(--salmon);width:0}
.hv-linea ol button.hecha i{width:100%}
.hv-linea ol button.activa i{animation:hv-progreso var(--dur,6.5s) linear forwards}
.hv.pausado .hv-linea ol button.activa i{animation-play-state:paused}
@keyframes hv-progreso{to{width:100%}}
.hv-pausa{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;flex:none;transition:background .3s}
.hv-pausa:hover{background:rgba(255,255,255,.1)}
.hv-pausa:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px}

@media(max-width:991.98px){
  .hv{align-items:flex-end;padding:110px 0 120px}
  .hv-esc::after{background:linear-gradient(180deg,rgba(var(--noche-rgb),.65),transparent 22%),linear-gradient(0deg,rgba(var(--noche-rgb),.97) 30%,rgba(var(--noche-rgb),.55) 70%,rgba(var(--noche-rgb),.35))}
  .hv-palabras{bottom:auto;top:96px;right:-2vw}
  .hv-palabras span{bottom:auto;top:0;font-size:clamp(5rem,30vw,12rem)}
  .hv-plato{top:24%;right:-6%;width:78vw}
  .hv-textos{min-height:8.5rem}
  .hv-linea{bottom:18px}
  .hv-n{display:none}
  .hv-linea ol button{letter-spacing:.14em}
  .hv-linea ol{gap:.6rem}
}
@media(prefers-reduced-motion:reduce){
  .hv-esc img,.hv-txt,.hv-palabras span,.hv-plato{transition:opacity .4s !important;transform:none !important}
  .hv-canvas{display:none}
}