/*
 * 03-hero.css - Hero: fondo, overlays, contenido sticky, titulo, subtitulo, pill e indicador de scroll.
 * Origen: index.html, <style> #1 (lineas 29-46). Contenido identico al original.
 * Rutas url(assets/...) reescritas a url(../assets/...) por el cambio de carpeta.
 */
.hero{height:145vh;min-height:900px;position:relative}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.03) 45%,#030507 97%),url("../assets/img/2b98b34b60.webp");background-size:cover;background-repeat:no-repeat;background-position:center center;background-color:#030507;filter:saturate(.95) contrast(1.06)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 15%,rgba(0,0,0,.16) 60%,rgba(0,0,0,.7) 100%);pointer-events:none}
/* Fundido inferior del hero hacia el fondo de #experiencia: la foto terminaba en
   seco en el borde del hero y se veia un corte duro. z-index:2 lo deja sobre
   .hero-bg y sobre la vinueta .hero::after, y por debajo de .hero-content (z:3),
   .hero-title (z:4) y .scroll-indicator (z:4).
   El color final NO es #030507: el hero tapa el body con .hero-bg (opaco,
   background-color #030507), pero #experiencia arranca transparente y deja ver el
   radial del body, que a esa altura compone mas claro. Terminar en #030507 dejaba
   un escalon medido de 13,9 (1440) y 19,3 (390) en suma RGB entre las dos filas
   contiguas de la union; #0a0c0e lo baja a 7,1 y 8,3 (~1% por canal). */
.hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:20vh;z-index:2;
 background:linear-gradient(180deg,rgba(3,5,7,0) 0%,rgba(6,8,10,.45) 55%,#0a0c0e 100%);pointer-events:none}
.hero-content{position:sticky;top:0;height:100vh;display:grid;place-items:center;z-index:2}
.hero-copy{text-align:center;transform:translateY(-2vh);padding:0 18px}
/* Logo sobre el texto del hero: se encuadra el monograma (torre+SP) del lockup,
   x 202-297 / y 120-333 del PNG 500x500, igual que .brand-mark en 02-nav.css. */
.hero-logo{--mh:clamp(88px,10vw,140px);--s:calc(var(--mh)/214);position:relative;overflow:hidden;
 width:calc(96*var(--s));height:var(--mh);margin:0 auto clamp(22px,3.2vw,44px)}
.hero-logo img{position:absolute;max-width:none;width:calc(500*var(--s));height:calc(500*var(--s));
 left:calc(-202*var(--s));top:calc(-120*var(--s))}
.eyebrow{font-family:Cinzel,serif;letter-spacing:.42em;font-size:clamp(10px,1vw,13px);color:#eee8db;margin-bottom:16px;text-transform:uppercase}
.hero-title{
 margin:0;font-family:Cinzel,serif;font-size:clamp(58px,10.5vw,168px);font-weight:600;line-height:.82;letter-spacing:.045em;text-transform:uppercase;
 color:#e9c66c;mix-blend-mode:overlay;text-shadow:0 3px 24px rgba(0,0,0,.85),0 0 3px rgba(255,255,255,.8);
 filter:contrast(1.15) saturate(1.1)
}
.hero-title span{display:block}
.hero-sub{margin:28px auto 0;max-width:650px;font-family:Cinzel,serif;letter-spacing:.28em;font-size:clamp(11px,1.4vw,16px);color:#e5dfd2;text-transform:uppercase}
.hero-pill{display:inline-flex;margin-top:24px;padding:9px 17px;border:1px solid rgba(235,190,79,.6);border-radius:999px;background:rgba(0,0,0,.22);backdrop-filter:blur(10px);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2)}
.scroll-indicator{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:4;color:#aaa;font-size:9px;letter-spacing:.25em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-line{width:1px;height:48px;background:linear-gradient(#fff,transparent);animation:float 1.8s ease-in-out infinite}
@keyframes float{50%{transform:translateY(7px);opacity:.45}}