/* Entrada cinematográfica de la web personal. El resto del sitio conserva sus estilos históricos. */
html { overflow-x: clip; }
body { overflow-x: hidden; }
#cinematic-hero {
    --cs-ink: #0b100c;
    --cs-paper: #efeee7;
    --cs-lime: #c5ff49;
    --cs-muted: #a1a79d;
    --cs-line: rgba(239, 238, 231, .18);
    min-height: 100svh;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(28rem, 1.04fr);
    align-items: end;
    overflow: hidden;
    padding: 8rem clamp(1.25rem, 6vw, 8rem) 4rem;
    background: var(--cs-ink);
    color: var(--cs-paper);
    font-family: "Manrope", Arial, sans-serif;
}

#cinematic-hero * { box-sizing: border-box; }
.legacy-hero, .legacy-hero + .brutal-bridge { display: none !important; }
.cs-grid { position: absolute; z-index: -3; inset: 0; opacity: .18; background-image: linear-gradient(var(--cs-line) 1px, transparent 1px), linear-gradient(90deg, var(--cs-line) 1px, transparent 1px); background-size: 5vw 5vw; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.cs-orbit { position: absolute; z-index: -2; border: 1px solid rgba(197,255,73,.45); border-radius: 50%; pointer-events: none; }
.cs-orbit-one { width: min(72vw, 67rem); aspect-ratio: 1; top: -27rem; right: -17rem; animation: cs-orbit-drift 16s ease-in-out infinite alternate; }
.cs-orbit-two { width: min(51vw, 52rem); aspect-ratio: 1; top: -18rem; right: -5rem; border-color: rgba(239,238,231,.18); animation: cs-orbit-drift 13s ease-in-out infinite alternate-reverse; }
.cs-nav { position: absolute; z-index: 4; inset: 0 0 auto; height: 5.5rem; padding: 0 clamp(1.25rem, 4vw, 5rem); display: flex; align-items: center; justify-content: space-between; }
.cs-nav.header { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
.cs-nav a { color: var(--cs-paper); text-decoration: none; }
.cs-wordmark { font: 500 .76rem/1 "DM Mono", monospace; letter-spacing: .1em; }
.cs-wordmark span, .cs-nav-cta span { color: var(--cs-lime); }
.cs-nav-links { display: flex; gap: clamp(1rem, 2.2vw, 2.5rem); font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.cs-nav-links a, .cs-nav-cta { transition: color .25s ease; }
.cs-nav-links a:hover, .cs-nav-cta:hover { color: var(--cs-lime); }
.cs-nav-cta { font: 500 .68rem/1 "DM Mono", monospace; letter-spacing: .08em; border-bottom: 1px solid var(--cs-lime); padding-bottom: .45rem; }
.cs-copy { position: relative; z-index: 2; align-self: center; max-width: 40rem; padding-bottom: 3.75rem; animation: cs-rise .9s cubic-bezier(.2,.8,.2,1) both; }
.cs-eyebrow { margin: 0; font: 500 .66rem/1.4 "DM Mono", monospace; letter-spacing: .1em; color: var(--cs-muted); }
.cs-eyebrow span { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .5rem; vertical-align: .04rem; background: var(--cs-lime); box-shadow: 0 0 0 .25rem rgba(197,255,73,.14); animation: cs-pulse 2s ease-in-out infinite; }
.cs-copy h1 { max-width: 11ch; margin: clamp(1.7rem, 4vw, 3rem) 0 1.6rem; color: var(--cs-paper); font: 800 clamp(3.9rem, 8vw, 8.4rem)/.86 "Manrope", Arial, sans-serif; letter-spacing: -.075em; }
.cs-copy h1 em { font-family: "Playfair Display", Georgia, serif; font-weight: 600; letter-spacing: -.06em; }
.cs-intro { max-width: 32rem; margin: 0; color: #d2d7cd; font-size: clamp(.95rem, 1.25vw, 1.15rem); line-height: 1.7; }
.cs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2.3rem; }
.cs-primary { display: inline-flex; gap: 2.7rem; align-items: center; justify-content: space-between; padding: 1rem 1.1rem 1rem 1.35rem; background: var(--cs-lime); color: var(--cs-ink); text-decoration: none; font-size: .78rem; font-weight: 800; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease; }
.cs-primary:hover { transform: translate(3px, -3px); background: #e1ff9d; }
.cs-primary b { font-size: 1.35rem; line-height: .7; }
.cs-secondary { color: var(--cs-paper); text-decoration: none; font: 500 .68rem/1.4 "DM Mono", monospace; border-bottom: 1px solid rgba(239,238,231,.55); padding-bottom: .4rem; }
.cs-secondary:hover { color: var(--cs-lime); }
.cs-portrait { width: min(54vw, 55rem); margin: 0 0 -2rem auto; position: relative; aspect-ratio: 1.06; align-self: end; animation: cs-portrait-in 1.2s .15s cubic-bezier(.16,1,.3,1) both; }
.cs-portrait-glow { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; right: 10%; top: 8%; background: radial-gradient(circle, rgba(197,255,73,.25), transparent 67%); filter: blur(16px); }
.cs-portrait-disc { position: absolute; inset: 8% 6% 3% 15%; border-radius: 48% 52% 48% 52%; background: conic-gradient(from 210deg, rgba(197,255,73,.95), rgba(33,58,39,.55), rgba(239,238,231,.1), rgba(197,255,73,.95)); opacity: .9; transform: rotate(-13deg); animation: cs-disc-spin 24s linear infinite; }
.cs-portrait::before { content: ""; position: absolute; z-index: 1; inset: 12% 10% 12% 18%; border: 1px solid rgba(239,238,231,.36); border-radius: 49%; transform: rotate(-13deg); }
.cs-portrait img { width: 132%; height: 132%; max-width: none; object-fit: contain; object-position: 48% 54%; position: absolute; z-index: 2; bottom: -12%; left: -15%; filter: drop-shadow(0 2rem 1.5rem rgba(0,0,0,.42)); transform: translate3d(var(--cs-portrait-x,0), var(--cs-portrait-y,0), 0); transition: transform .35s ease-out; }
.cs-label { position: absolute; z-index: 3; color: var(--cs-ink); font: 500 clamp(.54rem,.75vw,.72rem)/1.3 "DM Mono", monospace; letter-spacing: .08em; }
.cs-label-top { top: 16%; right: 10%; transform: rotate(15deg); }
.cs-label-bottom { left: 6%; bottom: 17%; transform: rotate(-20deg); }
.cs-foot { position: absolute; z-index: 4; bottom: 1.65rem; left: clamp(1.25rem, 6vw, 8rem); right: clamp(1.25rem, 4vw, 5rem); display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; font: 500 .54rem/1.3 "DM Mono", monospace; letter-spacing: .1em; color: var(--cs-muted); }
.cs-foot i { width: 2.5rem; height: 1px; background: rgba(239,238,231,.32); }
@keyframes cs-rise { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes cs-portrait-in { from { opacity: 0; transform: translate3d(4rem,3rem,0) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes cs-disc-spin { to { transform: rotate(347deg); } }
@keyframes cs-orbit-drift { to { transform: translate3d(-3vw,5vh,0) rotate(14deg); } }
@keyframes cs-pulse { 50% { transform: scale(1.2); box-shadow: 0 0 0 .5rem rgba(197,255,73,0); } }
@media (max-width: 800px) {
    #cinematic-hero { min-height: 48rem; display: flex; flex-direction: column; align-items: stretch; padding: 7.3rem 1.25rem 5.5rem; }
    .cs-nav { height: 4.7rem; padding-inline: 1.25rem; }
    .cs-nav-links { display: none; }
    .cs-copy { max-width: 21rem; padding: 0; }
    .cs-copy h1 { font-size: clamp(3.75rem,18vw,6rem); }
    .cs-intro { max-width: 19rem; font-size: .9rem; }
    .cs-actions { margin-top: 1.6rem; }
    .cs-portrait { width: min(126vw,42rem); position: absolute; bottom: 3.2rem; right: -28vw; margin: 0; opacity: .92; }
    .cs-portrait img { width: 134%; height: 134%; }
    .cs-label { display: none; }
    .cs-foot { right: 1.25rem; bottom: 1.2rem; font-size: .48rem; }
    .cs-foot i { width: 1rem; }
}
@media (prefers-reduced-motion: reduce) { #cinematic-hero *, #cinematic-hero *::before, #cinematic-hero *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }