/* Capa de movimiento v2: video, vidrio, revelado al scroll */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;color:#fff;background:#0b1226 center/cover no-repeat;overflow:hidden;padding:0}
.hero .hero-in{position:relative;z-index:2;padding-block:9rem 6.5rem}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-velo{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,18,38,.55) 0%,rgba(11,18,38,.25) 40%,rgba(11,18,38,.85) 100%)}
.hero-velo.suave{background:linear-gradient(90deg,rgba(11,18,38,.88),rgba(11,18,38,.45))}
.hero h1{font:300 clamp(2.6rem,7.5vw,6.2rem)/1.02 var(--display);letter-spacing:-.02em;max-width:14ch;margin:.4rem 0 1.4rem;color:#fff}
.hero .lede,.inmersivo .lede{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:46ch;color:rgba(255,255,255,.88)}
.eyebrow{font:600 .78rem/1 var(--cuerpo);letter-spacing:.22em;text-transform:uppercase;color:var(--vela);margin:0}
.ahora{margin-top:1.6rem;max-width:52ch;color:rgba(255,255,255,.8);font-size:.95rem}
.btn-vidrio{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-vidrio:hover{background:rgba(255,255,255,.22)}
.scroll-cue{position:absolute;z-index:2;left:50%;bottom:1.6rem;width:26px;height:42px;margin-left:-13px;border:1.5px solid rgba(255,255,255,.55);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s var(--ease-out) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* cabecera de vidrio */
.top{position:fixed;inset:0 0 auto 0;z-index:50;background:transparent;border:0;transition:background .4s,backdrop-filter .4s,box-shadow .4s}
.top,.top a,.top .marca small{color:#fff}
.top.solid{background:rgba(14,22,48,.72);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.top .carro-btn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}

/* cinta que corre */
.cinta{overflow:hidden;background:var(--noche);color:var(--oro);border-block:1px solid rgba(186,173,123,.25);padding:1rem 0;white-space:nowrap}
.cinta-t{display:inline-flex;animation:corre 38s linear infinite}
.cinta-t span{font:300 1.35rem var(--display);font-style:italic;padding-right:2rem;letter-spacing:.02em}
@keyframes corre{to{transform:translateX(-50%)}}

/* franja inmersiva */
.inmersivo,.prev{position:relative;color:#fff;overflow:hidden;background:#0b1226 center/cover no-repeat}
.inmersivo{min-height:88svh;display:grid;align-items:center}
.inm-in{position:relative;z-index:2;padding-block:6rem}
h2.big{font:300 clamp(2.2rem,5.6vw,4.6rem)/1.05 var(--display);letter-spacing:-.015em;max-width:18ch;margin:.6rem 0 1.4rem;color:#fff}
.prev{padding-block:7rem}.prev .wrap{position:relative;z-index:2}.prev h2,.prev p,.prev .cita p{color:#fff}
.prev .cita{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:18px;padding:2rem}
.prev .btn-noche{background:var(--oro);color:#0E1630}

/* galería asimétrica */
.galeria{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:clamp(.6rem,2vw,1.6rem);padding:clamp(2rem,6vw,5rem) clamp(1rem,4vw,3rem);align-items:center;max-width:1400px;margin:auto}
.galeria figure{margin:0;position:relative;overflow:hidden;border-radius:16px}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.galeria figure:hover img{transform:scale(1.05)}
.g1{aspect-ratio:4/5;transform:translateY(2.5rem)}.g3{aspect-ratio:4/5;transform:translateY(-2.5rem)}.g2{aspect-ratio:3/4}
.galeria figcaption{position:absolute;inset:auto 0 0;padding:2.5rem 1.2rem 1.1rem;color:#fff;font:italic 300 1.25rem var(--display);background:linear-gradient(transparent,rgba(11,18,38,.8))}
@media(max-width:760px){.galeria{grid-template-columns:1fr 1fr}.g2{grid-column:1/-1;order:-1;aspect-ratio:3/2}.g1,.g3{transform:none}}

/* tienda con foto */
.prod{overflow:hidden;padding:0;transition:transform .5s var(--ease-out),box-shadow .5s}
.prod:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(14,22,48,.45)}
.prod-img{aspect-ratio:4/3;overflow:hidden}.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.prod:hover .prod-img img{transform:scale(1.06)}
.prod-cuerpo{padding:1.2rem 1.3rem 1.4rem}
.servicio{transition:transform .5s var(--ease-out),border-color .4s}.servicio:hover{transform:translateY(-4px);border-color:var(--oro)}

/* revelado */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .g1.rv:not(.in){transform:translateY(5rem)}.js .g3.rv:not(.in){transform:translateY(0)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em}
.split .w>i{display:inline-block;font-style:inherit;transform:translateY(110%);transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--i)*70ms)}
.split.in .w>i,.no-js .split .w>i{transform:none}

@media(prefers-reduced-motion:reduce){
  .bg-video{display:none}.cinta-t,.scroll-cue span{animation:none}
  .js .rv,.split .w>i{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
@media(prefers-color-scheme:dark){.cinta{background:#0b1226}}
.hero{background-image:url(media/hero.jpg)}.inmersivo{background-image:url(media/vela.jpg)}.prev{background-image:url(media/mar.jpg)}
.aviso-pend{position:fixed;left:.8rem;bottom:.8rem;z-index:60;max-width:min(26rem,calc(100% - 1.6rem));border-radius:12px;font-size:.78rem;padding:.55rem .8rem;text-align:left;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.top::before{content:"";position:absolute;inset:0 0 -24px;background:linear-gradient(rgba(11,18,38,.65),transparent);z-index:-1;pointer-events:none;transition:opacity .4s}
.top.solid::before{opacity:0}
@media(max-width:760px){.nav a{color:#fff}}