:root{
    --bg:#160a10;
    --bg-2:#0f060b;
    --panel:#20111a;
    --panel-hi:#2a1622;
    --pink:#ff4fa3;
    --hot:#ff1f86;
    --pink-soft:#ffd0e4;
    --cream:#ffe2ef;
    --text:#fff7fb;
    --muted:#c3a9b6;
    --line:rgba(255,255,255,.09);
    --max:1100px;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:'Jost',system-ui,sans-serif;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;

    background:
    radial-gradient(circle at 12% 8%, rgba(255,31,134,.22), transparent 38%),
    radial-gradient(circle at 88% 14%, rgba(255,79,163,.14), transparent 34%),
    radial-gradient(circle at 70% 90%, rgba(255,31,134,.10), transparent 40%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

.container{
    width:min(92%, var(--max));
    margin:auto;
}

.lang-switch{
    position:fixed;
    top:24px;
    right:24px;
    z-index:50;
    font-family:'Jost',sans-serif;
    font-size:.8rem;
    font-weight:500;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--cream);
    text-decoration:none;
    padding:8px 13px;
    border:1px solid var(--line);
    background:rgba(22,10,16,.55);
    backdrop-filter:blur(6px);
    transition:color .3s ease, border-color .3s ease, background .3s ease;
}

.lang-switch:hover{
    color:var(--bg);
    background:var(--pink-soft);
    border-color:var(--pink-soft);
}

section{
    padding:140px 0;
}

/* ---------- Typography ---------- */

h1,h2{
    font-family:'Fraunces',Georgia,serif;
    font-optical-sizing:auto;
    line-height:1;
    font-weight:600;
    letter-spacing:-.015em;
}

em,.italic{
    font-family:'Fraunces',Georgia,serif;
    font-style:italic;
    font-weight:500;
}

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
}

.hero h1{
    font-size:clamp(3.6rem,10vw,8rem);
    font-weight:600;
    letter-spacing:-.03em;
    line-height:1.12;
    padding-bottom:.32em;
}

.hero h1 em{
    color:var(--pink);
}

.hero .role{
    display:inline-block;
    margin-top:14px;
    font-family:'Jost',sans-serif;
    font-size:.85rem;
    font-weight:500;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--pink);
}

.hero .intro{
    margin-top:48px;
    max-width:760px;
    font-size:clamp(1.3rem,2vw,1.9rem);
    font-weight:300;
    color:var(--cream);
    line-height:1.55;
}

.big{
    font-size:clamp(2rem,5vw,4rem);
    max-width:900px;
    line-height:1.05;
}

.big em{
    color:var(--pink);
}

.svg-defs{
    position:absolute;
    width:0;
    height:0;
}

.text{
    margin-top:40px;
    max-width:760px;
    color:var(--muted);
    font-size:1.2rem;
}

.text p{
    margin-bottom:25px;
}

.text em{
    color:var(--cream);
    font-size:1.25em;
}

.inline-link{
    color:inherit;
    text-decoration:underline;
    text-decoration-color:var(--pink);
    text-underline-offset:5px;
    text-decoration-thickness:2px;
    transition:color .3s ease, text-decoration-color .3s ease;
}

.inline-link:hover{
    color:var(--pink);
    text-decoration-color:var(--hot);
}

/* ---------- "Cosas que hice" — strikethrough stack ---------- */

.moves{
    counter-reset:moves;
    margin-top:56px;
    display:flex;
    flex-direction:column;
    max-width:920px;
}

.move{
    position:relative;
    padding:48px 0 0 78px;
    border-top:1px solid var(--line);
    font-family:'Fraunces',Georgia,serif;
    font-weight:500;
    font-size:clamp(1.45rem,3.4vw,2.4rem);
    line-height:1.3;
    letter-spacing:-.012em;
    color:var(--text);
}

.move::before{
    counter-increment:moves;
    content:counter(moves,decimal-leading-zero);
    position:absolute;
    left:0;
    top:52px;
    font-size:.95rem;
    font-style:italic;
    font-weight:500;
    color:var(--pink);
    opacity:.8;
}

.move s{
    display:inline-block;
    white-space:nowrap;
    text-decoration:line-through;
    text-decoration-color:var(--pink);
    text-decoration-thickness:2px;
    color:var(--muted);
    font-style:italic;
    opacity:.82;
}

.move .real{
    color:var(--pink);
    font-style:normal;
    font-weight:600;
    transition:color .35s ease;
}

.move:hover .real{
    color:var(--hot);
}

/* the strike "correction" animates as each line scrolls in */
@media (prefers-reduced-motion:no-preference){

    .move s{
        position:relative;
        text-decoration:none;
    }

    /* marker swipe: thick, translucent, tilted, rough-edged */
    .move s::after{
        content:"";
        position:absolute;
        left:-4px;
        right:-4px;
        top:50%;
        height:.46em;
        transform:translateY(-50%) rotate(-1.4deg) scaleX(0);
        transform-origin:left center;
        background:var(--hot);
        opacity:.6;
        border-radius:6px;
        filter:url(#marker-rough);
        transition:transform .65s cubic-bezier(.8,0,.2,1) .3s;
    }

    .move.in s::after{
        transform:translateY(-50%) rotate(-1.4deg) scaleX(1);
    }

    .move .real{
        opacity:0;
        transform:translateY(4px);
        transition:opacity .55s ease .95s, transform .55s ease .95s, color .3s ease;
    }

    .move.in .real{
        opacity:1;
        transform:none;
    }
}

/* ---------- Section heads ---------- */

.section-head{
    max-width:760px;
}

.section-sub{
    margin-top:18px;
    font-size:1.05rem;
    color:var(--muted);
}

.section-sub em{
    color:var(--cream);
}

/* hover hint: only meaningful on devices that can actually hover */
.hover-hint{
    display:none;
    margin-top:10px;
    font-size:.9rem;
    font-style:italic;
    color:var(--pink);
    opacity:.85;
}

@media (hover:hover) and (pointer:fine){
    .hover-hint{
        display:block;
    }
}

/* ---------- Corporate Bullshit Translator ---------- */

.translator{
    counter-reset:bs;
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:22px;
}

.bs{
    counter-increment:bs;
    position:relative;
    padding:32px 30px 30px;
    background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
    border:1px solid var(--line);
    overflow:hidden;
    cursor:default;
    transition:border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}

.bs::before{
    content:counter(bs,decimal-leading-zero);
    position:absolute;
    top:22px;
    right:26px;
    font-family:'Fraunces',serif;
    font-size:1rem;
    font-weight:500;
    color:var(--muted);
    opacity:.75;
}

.bs:hover,
.bs:focus-visible{
    transform:translateY(-5px);
    border-color:rgba(255,95,166,.5);
    box-shadow:0 18px 40px -22px rgba(255,95,166,.55);
    outline:none;
}

.bs-label{
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--muted);
}

.bs-label.alt{
    color:var(--pink);
}

.bullshit{
    font-family:'Fraunces',Georgia,serif;
    font-style:italic;
    font-weight:500;
    font-size:1.55rem;
    line-height:1.2;
    margin-top:12px;
    color:var(--cream);
}

.bs-reveal{
    margin-top:24px;
    padding-top:22px;
    border-top:1px dashed rgba(255,255,255,.14);
    filter:blur(8px);
    opacity:.85;
    transform:translateY(4px);
    transition:filter .45s ease, opacity .45s ease, transform .45s ease;
}

.bs:hover .bs-reveal,
.bs:focus-visible .bs-reveal{
    filter:blur(0);
    opacity:1;
    transform:none;
}

.translation{
    font-family:'Fraunces',Georgia,serif;
    font-weight:600;
    font-size:1.4rem;
    line-height:1.25;
    margin-top:8px;
    color:var(--text);
}

/* touch / no-hover devices: nothing to hover, so just show it */
@media (hover:none){
    .bs-reveal{
        filter:none;
        opacity:1;
        transform:none;
    }
}

@media (prefers-reduced-motion:reduce){
    *{transition:none !important;}
    .bs-reveal{filter:none;opacity:1;transform:none;}
}

/* ---------- Big quotes ---------- */

.quote{
    font-family:'Fraunces',Georgia,serif;
    font-weight:500;
    font-size:clamp(2rem,5vw,4.6rem);
    line-height:1.08;
    letter-spacing:-.02em;
    max-width:1000px;
}

.quote em{
    color:var(--pink);
}

/* ---------- Footer ---------- */

footer{
    padding:160px 0 48px;
    border-top:1px solid var(--line);
}

.to-top{
    display:flex;
    width:fit-content;
    margin-left:auto;
    margin-top:40px;
    padding:10px;
    color:var(--pink);
    transition:color .3s ease, transform .3s ease;
}

.to-top svg{
    width:30px;
    height:30px;
    fill:currentColor;
}

.to-top:hover{
    color:var(--hot);
    transform:translateY(-4px);
}

.btn-cv{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
    padding:14px 26px;
    background:var(--pink);
    color:var(--bg);
    font-family:'Jost',sans-serif;
    font-size:.95rem;
    font-weight:600;
    letter-spacing:.01em;
    text-decoration:none;
    border:1px solid var(--pink);
    transition:background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.btn-cv svg{
    width:18px;
    height:18px;
    fill:currentColor;
}

.btn-cv:hover{
    background:var(--hot);
    border-color:var(--hot);
    transform:translateY(-2px);
    box-shadow:0 14px 30px -12px rgba(255,31,134,.6);
}

.footer-note{
    margin-top:56px;
    font-size:.85rem;
    font-weight:300;
    color:var(--muted);
    opacity:.85;
}

.links{
    margin-top:44px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.links a{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-family:'Jost',sans-serif;
    font-size:.95rem;
    font-weight:500;
    color:var(--cream);
    text-decoration:none;
    padding:12px 20px;
    border:1px solid var(--line);
    transition:color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}

.links a .ico{
    width:18px;
    height:18px;
    fill:currentColor;
    flex-shrink:0;
}

.links a:hover{
    color:var(--bg);
    background:var(--pink-soft);
    border-color:var(--pink-soft);
    transform:translateY(-2px);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion:no-preference){

    /* living background: slow drift of the pink glows */
    body::before{
        animation:drift 22s ease-in-out infinite alternate;
    }

    @keyframes drift{
        from{transform:translate3d(0,0,0) scale(1);}
        to{transform:translate3d(-3%,2%,0) scale(1.06);}
    }

    /* scroll reveal */
    .reveal{
        opacity:0;
        transform:translateY(30px);
        transition:opacity .8s cubic-bezier(.2,.7,.2,1),
                   transform .8s cubic-bezier(.2,.7,.2,1);
        will-change:opacity, transform;
    }

    .reveal.in{
        opacity:1;
        transform:none;
    }

    /* hero loads with a touch more drama */
    .hero h1.reveal{
        transform:translateY(40px) scale(.98);
    }

    .hero h1.reveal.in{
        transform:none;
    }

    .move:hover{
        transform:translateX(8px);
        transition:transform .35s ease;
    }
}

/* ---------- Mobile ---------- */

@media (max-width:680px){

    section{
        padding:88px 0;
    }

    .hero{
        min-height:auto;
        padding:120px 0 80px;
    }

    .hero h1{
        font-size:clamp(2.9rem,15vw,5rem);
    }

    .hero .intro{
        margin-top:32px;
        font-size:1.2rem;
    }

    .big{
        font-size:clamp(1.9rem,8vw,3rem);
    }

    .text{
        font-size:1.08rem;
    }

    .moves{
        margin-top:44px;
    }

    .move{
        padding:34px 0 0;
        font-size:clamp(1.3rem,6.4vw,1.9rem);
    }

    .move::before{
        position:static;
        display:block;
        margin-bottom:12px;
        font-size:.85rem;
    }

    .translator{
        grid-template-columns:1fr;
        margin-top:40px;
        gap:16px;
    }

    .quote{
        font-size:clamp(1.9rem,8vw,3rem);
    }

    footer{
        padding:90px 0 24px;
    }

    .links{
        gap:10px;
    }

    .lang-switch{
        top:14px;
        right:14px;
        padding:6px 10px;
    }
}

/* ---------- Cursor pixie dust ---------- */

.spark{
    position:fixed;
    pointer-events:none;
    z-index:9999;
    clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
    filter:drop-shadow(0 0 5px currentColor);
    animation:pixie .9s ease-out forwards;
}

@keyframes pixie{
    0%{ transform:translate(-50%,-50%) scale(.2) rotate(0deg); opacity:0; }
    25%{ opacity:1; }
    55%{ transform:translate(-50%,calc(-50% + 8px)) scale(1.1) rotate(45deg); opacity:1; }
    100%{ transform:translate(-50%,calc(-50% + 28px)) scale(.3) rotate(110deg); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
    .spark{ display:none; }
}