/* ============================================================
   HERO SCENE — Atacama al atardecer (inmersivo, con presencia)
   Escena oscura cinematográfica con texto claro y título monumental.
   ============================================================ */
.hero-scene {
    position: relative;
    overflow: hidden;
    color: var(--on-dark);
    background:
        linear-gradient(180deg,
            #14172E 0%,
            #1E1B38 18%,
            #3A2746 38%,
            #6E3F4E 56%,
            #A85C45 70%,
            #CE824A 82%,
            #E0A659 92%,
            #C98447 100%);
}
/* fade the scene base into the page body at the very bottom */
.hero-scene::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
    z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cream) 92%, transparent));
}

.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene > * { position: absolute; }

/* ── Stars ── */
.scene-stars { inset: 0; }
.scene-stars i {
    position: absolute; width: 2px; height: 2px; border-radius: 50%;
    background: #fff; opacity: 0.6;
    animation: starTwinkle 4s var(--ease) infinite;
}
@keyframes starTwinkle { 0%,100% { opacity: 0.18; } 50% { opacity: 0.85; } }

/* ── Sun disc + glow near horizon ── */
.scene-sun {
    width: 360px; height: 360px; right: 14%; bottom: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, #FFE6B0 0%, #FBC56A 32%, rgba(240,166,89,0.5) 52%, transparent 72%);
    filter: blur(2px);
}
.scene-sun-core {
    width: 150px; height: 150px; right: calc(14% + 105px); bottom: calc(30% + 105px);
    border-radius: 50%;
    background: radial-gradient(circle, #FFF2D6, #FFD98A 60%, #F7B85E);
    box-shadow: 0 0 80px 30px rgba(255,210,130,0.35);
}

/* ── Cordillera + dunes (layered silhouettes) ── */
.scene-range { left: 0; right: 0; bottom: 26%; width: 100%; height: auto; z-index: 1; opacity: 0.92; }
.scene-dunes { left: -4%; right: -4%; bottom: 0; width: 108%; height: auto; z-index: 2; will-change: transform; }
.scene-dunes.d-far  { bottom: 16%; z-index: 1; }
.scene-dunes.d-mid  { bottom: 7%;  z-index: 2; }
.scene-dunes.d-near { bottom: -1%; z-index: 3; }
.scene-range path  { fill: #2A2342; }
.dune-far  { fill: #6E4038; }
.dune-mid  { fill: #4A2A26; }
.dune-near { fill: #281612; }

/* ── Topographic contour lines over the sand (ocultas a pedido) ── */
.scene-topo2 { display: none; }

/* ── Giant watermark word behind the title ── */
.scene-watermark {
    z-index: 1;
    left: 50%; top: 46%;
    transform: translate(-50%, -50%);
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(7rem, 22vw, 20rem);
    letter-spacing: 0.02em;
    line-height: 1;
    color: rgba(255,236,205,0.05);
    white-space: nowrap;
    user-select: none;
}

/* ── Grain over scene ── */
.scene-grain {
    inset: 0; z-index: 3; opacity: 0.06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================
   HERO CONTENT over the scene — light-on-dark + monumental title
   ============================================================ */
.hero-scene .wrap { position: relative; z-index: 4; }

.hero-scene .hero-index { border-top-color: rgba(255,224,180,0.35); color: var(--accent-lt); }
.hero-scene .hero-index b { color: #fff; }
.hero-scene .hero-meta { border-top-color: rgba(255,224,180,0.35); }
.hero-scene .hero-meta dt { color: var(--accent-lt); }
.hero-scene .hero-meta dd { color: rgba(255,247,238,0.96); }

.hero-scene .hero-eyebrow { color: var(--accent-lt); }
.hero-scene .hero-eyebrow .pulse-dot { color: var(--accent-lt); }

.hero-scene .hero-title {
    color: #FBF4EA;
    font-size: clamp(3.4rem, 13vw, 11rem);
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-shadow: 0 10px 60px rgba(0,0,0,0.35);
    margin-bottom: 1.4rem;
}
.hero-scene .hero-title em { color: var(--accent-lt); }

/* role line — credibility kicker for IT-consultant positioning */
.hero-role {
    font-family: var(--f-mono);
    font-size: clamp(0.72rem, 1.1vw, 0.86rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,247,238,0.72);
    margin: 0 0 1.6rem;
    display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center;
}
.hero-role .sep { color: var(--accent-lt); }

.hero-scene .hero-sub { color: rgba(255,247,238,0.82); max-width: 46ch; }
.hero-scene .hero-sub em { color: var(--accent-lt); }

.hero-scene .hero-social a { color: rgba(255,247,238,0.6); }
.hero-scene .hero-social a:hover { color: var(--accent-lt); background: rgba(255,247,238,0.08); }
.hero-scene .btn-ghost { color: #FBF4EA; border-color: rgba(255,247,238,0.34); }
.hero-scene .btn-ghost:hover { border-color: var(--accent-lt); color: var(--accent-lt); }

.hero-scene .scroll-cue { color: rgba(255,247,238,0.5); }
.hero-scene .scroll-cue .rail { background: rgba(255,247,238,0.25); }
.hero-scene .scroll-cue .rail::after { background: var(--accent-lt); }

/* Hero proof microbar — credibilidad above-the-fold (psicología: dar razón para quedarse) */
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1rem; margin-top: 2rem; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: rgba(255,247,238,0.6); }
.hero-proof .hp-item { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.hero-proof .hp-item b { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: var(--accent-lt); }
.hero-proof .hp-item i { color: var(--accent-lt); font-size: 0.85em; }
.hero-proof .hp-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,247,238,0.3); }
@media (max-width: 600px) { .hero-proof { font-size: 0.66rem; gap: 0.4rem 0.7rem; } }
.hero-scene .scroll-cue .rail::after { background: var(--accent-lt); }

/* kinetic title: keep mask room so descenders / italics don't clip */
.hero-scene .hero-title .t-line { display: block; }
.hero-scene .hero-title .mask-line { padding: 0.06em 0.14em 0.2em; margin: 0 -0.14em -0.16em; }

@media (max-width: 900px) {
    .scene-watermark { font-size: 40vw; top: 40%; }
    .scene-sun { right: 8%; }
}
[data-motion="reduced"] .scene-stars i,
[data-motion="reduced"] .scene-dunes { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .scene-stars i { animation: none; }
}