:root{--paper:#F0F2F5;--ink:#000;--fire:#FF4D1A;--sea:#3F63A0;--pad:clamp(1.1rem,3.2vw,3.2rem);
--disp:"Archivo","Arial Narrow",Impact,sans-serif;--text:"Newsreader",Georgia,serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{background:var(--paper);color:var(--ink);font:400 clamp(1.05rem,1.2vw,1.2rem)/1.55 var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--fire);outline-offset:3px}
h1,h2,h3{font-family:var(--disp);font-weight:900;font-stretch:62%;text-transform:uppercase;line-height:.85;letter-spacing:-.01em}
h2{font-size:clamp(3.2rem,11vw,10rem)}
.dates{font:600 .95rem/1.3 var(--disp);font-stretch:100%;color:var(--sea)}

.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem var(--pad);mix-blend-mode:difference;color:#fff;font:600 .9rem var(--disp);font-stretch:100%}
.nav nav{display:flex;gap:1.4rem}.nav a{text-decoration:none}.nav a:hover{text-decoration:underline;text-underline-offset:4px}
.logo{font-size:1.6rem;font-weight:900;font-stretch:62%}
.langs{display:flex;gap:.25rem}
.langs button{font:inherit;color:inherit;background:none;border:1px solid transparent;padding:.2rem .5rem;cursor:pointer}
.langs button[aria-pressed=true]{border-color:#fff}

.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;padding:5.5rem var(--pad) 2.5rem;overflow:hidden;gap:0 1rem}
.name{grid-column:1/-1;grid-row:1/3;position:relative;z-index:3;color:#fff;mix-blend-mode:difference;font-size:clamp(5rem,23vw,26rem);line-height:.76;align-self:start}
.name .l{display:block;overflow:hidden;padding-top:.06em}
.name .l:nth-child(2){text-align:right}
.name .l span{display:inline-block;animation:up 1s cubic-bezier(.2,.8,.1,1) both}
.name .l:nth-child(2) span{animation-delay:.15s}
.portrait{grid-column:7/13;grid-row:1/4;position:relative;z-index:2;align-self:end;background:var(--fire);transform:rotate(2.5deg);animation:reveal 1.1s .3s cubic-bezier(.7,0,.2,1) both;max-height:78svh}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply}
.role{grid-column:1/6;grid-row:3;position:relative;z-index:3;font:900 clamp(1.6rem,3.4vw,3.2rem)/.95 var(--disp);font-stretch:62%;text-transform:uppercase;align-self:end;margin-bottom:.8rem}
.lede{grid-column:1/6;grid-row:3;position:relative;z-index:3;align-self:end;display:none}
.cta{grid-column:1/5;grid-row:4;position:relative;z-index:3;justify-self:start;margin-top:1rem;background:var(--ink);color:var(--paper);padding:.9rem 1.6rem;font:700 1rem var(--disp);font-stretch:100%;text-decoration:none;transition:background .2s,transform .2s}
.cta:hover{background:var(--fire);transform:translateX(6px)}
@keyframes up{from{transform:translateY(105%)}}
@keyframes reveal{from{clip-path:inset(100% 0 0 0);transform:rotate(8deg) translateY(4rem)}}

.ticker{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;padding:.9rem 0;transform:rotate(-1.2deg) scale(1.03);margin:1.5rem 0}
.ticker div{display:inline-flex;gap:2.5rem;animation:slide 40s linear infinite}
.ticker span{font:900 1.8rem var(--disp);font-stretch:62%;text-transform:uppercase;display:inline-flex;align-items:center;gap:2.5rem}
.ticker span::after{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--fire)}
@keyframes slide{to{transform:translateX(-50%)}}

.g{display:grid;grid-template-columns:repeat(12,1fr);gap:2.5rem 1rem;padding:6rem var(--pad)}
.sub2{font:400 italic clamp(1.6rem,3.5vw,3rem)/1 var(--text)}
.ph{position:relative}
.ph img{display:block;width:100%;height:auto;box-shadow:14px 14px 0 var(--ink)}
.ph figcaption{font:700 .95rem/1.2 var(--disp);font-stretch:100%;margin-top:1.4rem}
.dates{margin-bottom:.4rem}

.about{padding-bottom:5rem}
.quote{grid-column:1/-1;font:900 clamp(3.5rem,14vw,14rem)/.8 var(--disp);font-stretch:62%;text-transform:uppercase;color:var(--fire)}
.a-text{grid-column:1/8}
.a-text h2{font-size:clamp(2.6rem,6vw,5.5rem);margin-bottom:1.5rem}
.a-text p{margin-bottom:1.1rem;max-width:52ch}
.a-ph{grid-column:9/13;grid-row:2/4;transform:rotate(2deg);align-self:start;margin-top:3rem}
dl{grid-column:1/9;display:grid;grid-template-columns:9rem 1fr;gap:1rem 1.5rem;border-top:3px solid var(--ink);padding-top:1.2rem}
dt{font:700 .95rem var(--disp);font-stretch:100%;color:var(--sea)}
#skills{display:flex;flex-wrap:wrap;gap:.4rem}
#skills span{border:1.5px solid var(--ink);padding:.05rem .7rem;border-radius:2rem;font-size:.95rem}

.inq{background:var(--fire);padding-block:6rem}
.inq h2{grid-column:1/-1}.inq .sub2{grid-column:1/-1;margin-top:-1rem}
.i1{grid-column:1/8;font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.35}
.i2{grid-column:8/13;margin-top:5rem;font-size:1.15em;border-left:4px solid var(--ink);padding-left:1.2rem}

.radio h2,.rne h2{grid-column:1/-1;font-size:clamp(4rem,15vw,15rem)}
.rne h2{line-height:1.12;font-size:clamp(3.4rem,12vw,12rem)}
.r-text{grid-column:1/5;grid-row:2/4}.r-text p{margin-bottom:1.1rem}
.r1{grid-column:5/9;grid-row:2}.r2{grid-column:9/13;grid-row:2;margin-top:4rem}
.rueda{grid-column:3/12;grid-row:4;margin-top:3rem}
.ph video{display:block;width:100%;height:auto;background:#000;box-shadow:14px 14px 0 var(--ink)}
.vcf .ph video{box-shadow:14px 14px 0 var(--fire)}
.rne .r1 video{max-height:78vh;object-fit:contain;background:#F0F2F5}
.rne{background:#FF3B30}.rne .ph img{box-shadow:14px 14px 0 var(--ink)}.rne .dates{color:var(--ink)}
.rne .r1{grid-row:2}.rne .r2{grid-row:2}.rne .r-text{grid-row:2}

.vcf{position:relative;background:var(--ink);color:var(--paper);overflow:hidden}
.vcf-title{grid-column:1/6;position:relative}
.vcf .ghost{position:absolute;top:-.3em;left:-.05em;font:900 clamp(10rem,30vw,30rem)/1 var(--disp);font-stretch:62%;-webkit-text-stroke:2px var(--fire);color:transparent;opacity:.55;pointer-events:none}
.vcf h2{position:relative;font-size:clamp(3rem,8vw,8rem);padding-top:clamp(5rem,14vw,12rem)}
.vcf .dates{position:relative;color:var(--fire);margin-top:1.2rem}
.vp{position:relative;max-width:34ch;margin-top:1rem;opacity:.9}
.rows{grid-column:7/13;list-style:none;padding:0}
.rows li{border-top:1px solid #fff5;padding:1.2rem 0}
.rows h3{font-size:clamp(1.8rem,3vw,2.8rem);margin-bottom:.5rem}
.rows p{max-width:42ch;opacity:.85}
.vcf .ph img{box-shadow:14px 14px 0 var(--fire)}
.v-a{grid-column:2/6;transform:rotate(-2deg)}.v-b{grid-column:7/13;margin-top:2rem}

.col{padding-bottom:5rem}
.c-title{grid-column:1/-1;grid-row:1}.c-title h2{font-size:clamp(3.2rem,12vw,12rem)}
.c-text{grid-column:1/6;grid-row:2}.c-text p{margin-bottom:1.1rem}
.c1{grid-column:6/13;grid-row:2;margin-top:1rem}
.c2{grid-column:2/6;grid-row:3;margin-top:1rem;transform:rotate(-1.5deg)}
.c3{grid-column:7/12;grid-row:3;margin-top:3rem;transform:rotate(1.5deg)}
.events{align-items:center}
.e-ph{grid-column:1/7;transform:rotate(-1.5deg)}
.e-text{grid-column:8/13}.e-text h2{font-size:clamp(3rem,7vw,7rem);margin-bottom:1.5rem}.e-text p{margin-bottom:1rem}
.redes{background:var(--ink);color:var(--paper);align-items:start}
.redes h2{grid-column:1/-1;font-size:clamp(3.5rem,11vw,11rem)}
.redes .sub2{grid-column:1/-1;color:var(--fire);margin-top:-1rem}
.x-p{grid-column:1/8;font-size:1.3em;line-height:1.4}
.btns{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem}
.redes .cta{background:var(--fire);color:var(--ink);margin:0;grid-row:auto}
.redes .cta:hover{background:var(--paper)}
.redes .btns .cta+.cta{background:var(--paper)}.redes .btns .cta+.cta:hover{background:var(--fire)}
.cv{background:var(--sea);color:#fff;padding:6rem var(--pad)}
.cv p{max-width:40ch;margin:1.5rem 0 2.5rem;font-size:1.3em}
.cvbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cvbtns a{display:flex;flex-direction:column;gap:.5rem;background:var(--paper);color:var(--ink);text-decoration:none;padding:1.4rem;min-height:12rem;transition:background .2s,transform .2s}
.cvbtns a:hover{background:var(--fire);transform:translateY(-8px)}
.cvbtns b{font:900 clamp(4rem,9vw,8rem)/.8 var(--disp);font-stretch:62%}
.cvbtns span{font:700 1.1rem var(--disp);font-stretch:100%}
.cvbtns i{font:600 .85rem var(--disp);font-stretch:100%;font-style:normal;margin-top:auto}

.cinfo{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;font:700 1.2rem var(--disp);font-stretch:100%}
blockquote{margin-top:4rem;border-left:6px solid var(--fire);padding-left:1.5rem;max-width:34ch}
blockquote p{font:900 clamp(1.8rem,4vw,3.4rem)/.95 var(--disp);font-stretch:62%;text-transform:uppercase}
blockquote footer{font:600 .95rem var(--disp);font-stretch:100%;margin-top:.8rem}
.contact{padding:7rem var(--pad) 5rem}
.mail{display:block;font:900 clamp(2.6rem,9.2vw,10rem)/.9 var(--disp);font-stretch:62%;text-decoration:none;word-break:break-word;margin:2rem 0 1.5rem;transition:color .2s}
.mail:hover{color:var(--fire)}
.foot{padding:1.5rem var(--pad);border-top:3px solid var(--ink);font:600 .9rem var(--disp);font-stretch:100%}

@media(max-width:820px){
 .nav nav{display:none}
 .hero{grid-template-rows:auto auto auto auto}
 .name{grid-row:1;font-size:21vw}
 .portrait{grid-column:2/13;grid-row:2;margin-top:-1.5rem;max-height:60svh}
 .role{grid-column:1/-1;grid-row:3;margin-top:1.5rem}.cta{grid-row:4;grid-column:1/-1}
 .g>*{grid-column:1/-1!important;grid-row:auto!important;margin-top:0!important}
 .a-ph,.v-a,.e-ph,.c2,.c3{max-width:85%}
 .ph img{box-shadow:10px 10px 0 var(--ink)}
 .rows{align-self:start}
 dl{grid-template-columns:1fr;gap:.3rem}dd{margin-bottom:.8rem}
 .cvbtns{grid-template-columns:1fr}.cvbtns a{min-height:8rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ticker div{animation:none!important}}

.ph figcaption a{text-decoration:underline;text-underline-offset:4px}.ph figcaption a:hover{color:var(--fire)}