:root {
  --black:#070708;
  --cream:#fff6e0;
  --blue:#0011ff;
  --violet:#6a00ff;
  --pink:#ff2e8a;
  --orange:#ff5a00;
  --amber:#ffae00;
  --pad:clamp(22px,3.6vw,58px);
}
* { box-sizing:border-box; }
html { width:100%; margin:0; scroll-behavior:smooth; background:var(--black); }
body { width:100%; min-height:100%; margin:0; overflow-x:clip; background:var(--black); }
body { color:var(--cream); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position:fixed; z-index:100; left:16px; top:16px; padding:10px 14px; color:var(--black); background:var(--cream); transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.site-shell { position:relative; width:100%; height:100dvh; overflow:hidden; background:var(--black); --mouse-x:50%; --mouse-y:50%; }

.site-header { position:absolute; z-index:30; inset:0 0 auto; display:grid; grid-template-columns:max-content 1fr auto; align-items:center; min-height:108px; padding:18px var(--pad); gap:clamp(12px,1.7vw,24px); background:linear-gradient(180deg,rgba(4,4,6,.58),transparent); }
.brand { display:flex; align-items:center; gap:12px; width:max-content; }
.brand-symbol { position:relative; width:58px; height:58px; color:var(--cream); }
.brand-icon { display:block; flex:none; width:58px; height:58px; object-fit:contain; }
.brand-symbol::before,.brand-symbol::after,.brand-symbol i { content:""; position:absolute; border:2px solid currentColor; }
.brand-symbol::before { inset:5px 27px 5px 4px; border-right:0; }
.brand-symbol::after { inset:5px 4px 5px 27px; border-left:0; }
.brand-symbol i:first-child { left:9px; right:9px; top:17px; height:10px; border-left:0; border-right:0; }
.brand-symbol i:last-child { left:9px; right:9px; bottom:9px; height:10px; border-left:0; border-right:0; }
.brand-name { font-size:clamp(12px,1.12vw,15px); line-height:1; letter-spacing:.02em; font-weight:700; white-space:nowrap; }
.desktop-nav { display:flex; align-items:center; justify-content:center; gap:clamp(16px,1.65vw,30px); }
.desktop-nav a,.desktop-nav button,.project-link,.language { position:relative; font-size:10px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; white-space:nowrap; text-shadow:0 1px 18px rgba(0,0,0,.65); }
.desktop-nav button { padding:0; border:0; color:inherit; background:transparent; }
.desktop-nav a::after,.desktop-nav button::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:linear-gradient(90deg,var(--blue),var(--pink),var(--amber)); transition:right .25s ease; }
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after,.desktop-nav button:hover::after,.desktop-nav button:focus-visible::after { right:0; }
/* Dos disciplinas bajo Digital. Navegación sencilla, sin tratamiento glass. */
.nav-digital { position:relative; }
.nav-digital:not([open])>.nav-digital-panel { display:none; }
.desktop-nav .nav-digital>summary { display:flex; align-items:center; gap:7px; min-height:44px; list-style:none; cursor:pointer; font:700 10px/1.5 var(--font-body); letter-spacing:.19em; text-transform:uppercase; }
.nav-digital>summary::-webkit-details-marker { display:none; }
.nav-digital>summary::after { content:""; display:block; width:5px; height:5px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.nav-digital[open]>summary::after { transform:rotate(225deg) translate(-1px,-1px); }
.nav-digital>summary:focus-visible { outline:2px solid var(--amber); outline-offset:5px; }
.desktop-nav .nav-digital-panel { position:absolute; z-index:50; top:calc(100% + 5px); left:-22px; min-width:240px; padding:9px 20px; border:1px solid rgba(255,246,224,.24); background:#111017; box-shadow:0 15px 40px rgba(0,0,0,.4); }
.desktop-nav .nav-digital-panel>a { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:48px; font-size:9px; letter-spacing:.08em; }
.desktop-nav .nav-digital-panel>a+a { border-top:1px solid rgba(255,246,224,.14); }
.desktop-nav .nav-digital-panel>a::after { bottom:0; }
.nav-digital-panel>a>span { color:var(--amber); font-size:16px; }
.mobile-menu .nav-digital>summary { display:flex; align-items:center; gap:14px; width:fit-content; padding:6px 0; list-style:none; font-size:clamp(31px,9vw,55px); line-height:1; letter-spacing:-.04em; text-transform:uppercase; cursor:pointer; color:var(--pink); }
.mobile-menu .nav-digital-panel { display:grid; gap:3px; padding:7px 0 9px 16px; border-left:1px solid var(--pink); margin:6px 0; }
.mobile-menu .nav-digital-panel>a { display:flex; align-items:center; gap:15px; max-width:100%; min-height:40px; font:500 clamp(16px,4.7vw,23px)/1.35 var(--font-body); letter-spacing:0; text-transform:none; color:var(--cream); }
.mobile-menu { overflow-y:auto; }
.header-tools { display:flex; align-items:center; gap:22px; }
.language { opacity:.68; }
.project-link { padding-bottom:8px; border-bottom:1px solid rgba(255,246,224,.65); }
.menu-button { display:none; width:44px; height:44px; padding:0; border:0; color:var(--cream); background:transparent; }
.menu-button i { display:block; width:24px; height:1px; margin:7px auto; background:currentColor; transition:.25s ease; }

.project-stage,.project-slide { position:absolute; inset:0; }
.project-stage { z-index:1; background:var(--black); }
.project-slide { z-index:0; overflow:hidden; opacity:0; visibility:hidden; transform:scale(1.025); transition:opacity .8s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),visibility .8s; }
.project-slide.is-active { z-index:2; opacity:1; visibility:visible; transform:scale(1); }
.project-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.08) contrast(1.04); }
.video-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,5,7,.35) 0%,transparent 25%,transparent 61%,rgba(5,5,7,.62) 100%),linear-gradient(90deg,rgba(5,5,7,.18),transparent 28%,transparent 72%,rgba(5,5,7,.17)); }
.thermal-wash { position:absolute; inset:0; opacity:.17; mix-blend-mode:color; background:radial-gradient(circle at 70% 38%,var(--amber),var(--orange) 12%,var(--pink) 25%,var(--violet) 42%,var(--blue) 59%,transparent 75%); transition:opacity .3s; }
[data-heat="violet"] .thermal-wash { background:radial-gradient(circle at 48% 48%,var(--pink),var(--violet) 29%,var(--blue) 52%,transparent 74%); }
[data-heat="cold"] .thermal-wash { background:radial-gradient(circle at 37% 53%,var(--amber),var(--pink) 20%,var(--blue) 55%,transparent 78%); }
[data-heat="amber"] .thermal-wash { background:radial-gradient(circle at 60% 42%,var(--amber),var(--orange) 21%,var(--pink) 41%,transparent 70%); }
.project-slide::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.13; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.project-center { position:absolute; z-index:4; left:50%; top:50%; width:min(84vw,1120px); text-align:center; opacity:0; filter:blur(9px); transform:translate(-50%,-45%) scale(.985); transition:opacity .72s ease,filter .72s ease,transform .72s cubic-bezier(.2,.7,.2,1); }
.project-center.is-readable { opacity:1; filter:blur(0); transform:translate(-50%,-45%) scale(1); }
.project-type { display:block; margin-bottom:18px; font-size:10px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; opacity:0; transform:translateY(14px); transition:.55s .26s ease; }
.project-center h2 { margin:0; text-transform:uppercase; text-shadow:0 5px 35px rgba(0,0,0,.42); }
.project-center h2 strong { display:block; font-size:clamp(54px,8.9vw,150px); line-height:.78; letter-spacing:-.068em; font-weight:700; opacity:0; transform:translateY(32px); transition:.72s .15s cubic-bezier(.2,.75,.2,1); }
.project-center h2 span { display:block; margin-top:18px; font-size:clamp(20px,3.5vw,56px); line-height:.95; letter-spacing:-.03em; font-weight:400; opacity:0; transform:translateY(22px); transition:.62s .25s cubic-bezier(.2,.75,.2,1); }
.is-active .project-type,.is-active .project-center h2 strong,.is-active .project-center h2 span { opacity:1; transform:none; }
.project-meta { position:absolute; z-index:5; left:var(--pad); bottom:clamp(29px,5.5vh,62px); display:grid; gap:11px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.project-meta strong { font-weight:700; }
.project-meta span { opacity:.72; }

.slide-arrow { position:absolute; z-index:20; top:50%; width:66px; height:96px; padding:0; border:0; color:var(--cream); background:transparent; transform:translateY(-50%); opacity:.82; transition:opacity .2s,transform .2s; }
.slide-arrow:hover,.slide-arrow:focus-visible { opacity:1; }
.slide-arrow:hover { transform:translateY(-50%) scale(1.08); }
.slide-arrow span { display:block; font-size:82px; line-height:.5; font-weight:200; text-shadow:0 3px 20px rgba(0,0,0,.6); }
.arrow-prev { left:clamp(2px,1.3vw,20px); }
.arrow-next { right:clamp(2px,1.3vw,20px); }
.slide-status { position:absolute; z-index:20; right:var(--pad); bottom:clamp(29px,5.5vh,62px); display:flex; align-items:center; gap:11px; font-size:13px; letter-spacing:.1em; }
.slide-status i { width:38px; height:1px; background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--amber)); }
.scroll-cue { position:absolute; z-index:20; left:50%; bottom:clamp(29px,5.5vh,62px); display:flex; align-items:center; gap:13px; transform:translateX(-50%); padding:8px; font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.scroll-cue span:last-child { font-size:19px; font-weight:400; }
.thermal-legend { position:absolute; z-index:20; right:15px; top:50%; display:flex; align-items:center; gap:7px; transform:translateY(-50%) rotate(90deg) translateY(-64px); transform-origin:center; font-size:8px; letter-spacing:.22em; opacity:.62; }
.thermal-legend i { width:86px; height:3px; background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--orange),var(--amber)); }
.thermal-edge { position:absolute; z-index:25; left:0; right:0; bottom:0; height:4px; pointer-events:none; background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--orange),var(--amber)); }
.cursor-heat { position:absolute; z-index:3; left:var(--mouse-x); top:var(--mouse-y); width:260px; height:260px; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); opacity:.13; filter:blur(16px); mix-blend-mode:screen; background:radial-gradient(circle,var(--amber),var(--pink) 27%,var(--violet) 50%,transparent 70%); }

.mobile-menu { position:absolute; z-index:24; inset:0; display:grid; align-content:center; align-content:safe center; padding:110px var(--pad) 40px; visibility:hidden; opacity:0; background:rgba(7,7,8,.96); backdrop-filter:blur(18px); transition:.3s ease; }
.mobile-menu.is-open { visibility:visible; opacity:1; }
.mobile-menu nav { display:grid; gap:8px; }
.mobile-menu nav a,.mobile-menu nav button { width:max-content; padding:6px 0; border:0; color:inherit; background:transparent; font-size:clamp(31px,9vw,55px); line-height:1; text-align:left; text-transform:uppercase; letter-spacing:-.04em; }
.mobile-menu nav a:nth-child(2){color:var(--amber)} .mobile-menu nav a:nth-child(3){color:var(--orange)} .mobile-menu nav a:nth-child(4){color:var(--pink)}
.mobile-menu small { align-self:end; margin-top:42px; font-size:9px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; }
.menu-button[aria-expanded="true"] i:first-child { transform:translateY(4px) rotate(45deg); }
.menu-button[aria-expanded="true"] i:last-child { transform:translateY(-4px) rotate(-45deg); }

.global-footer { position:relative; isolation:isolate; display:grid; grid-template-rows:auto 1fr auto auto; gap:clamp(32px,5vh,64px); min-height:100svh; padding:30px var(--pad) 24px; overflow:hidden; color:var(--cream); background:#08080a; }
.footer-glow { position:absolute; z-index:-1; left:37%; top:14%; width:58vw; height:58vw; border-radius:50%; opacity:.46; filter:blur(45px); background:radial-gradient(circle,var(--amber) 0 3%,var(--orange) 10%,var(--pink) 24%,var(--violet) 41%,var(--blue) 57%,transparent 70%); }
.footer-topline,.footer-bottomline { display:flex; align-items:center; justify-content:space-between; gap:28px; font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.footer-topline { padding-bottom:17px; border-bottom:1px solid rgba(255,246,224,.2); }
.footer-back-top { display:flex; align-items:center; gap:14px; padding:8px 0 8px 16px; font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.footer-back-top span { font-size:19px; font-weight:400; }
.footer-pitch { align-self:center; width:min(1040px,92%); }
.footer-pitch p { margin:0 0 15px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.footer-pitch h2 { margin:0; font-size:clamp(48px,7.1vw,112px); line-height:.8; letter-spacing:-.065em; text-transform:uppercase; font-weight:700; }
.footer-pitch h2 em { display:inline-block; color:transparent; font-style:normal; font-weight:700; -webkit-text-stroke:1px var(--cream); }
.footer-mail { display:inline-flex; align-items:center; gap:18px; margin-top:25px; padding-bottom:7px; border-bottom:1px solid var(--amber); font-size:clamp(13px,1.35vw,19px); letter-spacing:.07em; }
.footer-mail span { color:var(--amber); }
.footer-advice { display:inline-flex; align-items:center; gap:15px; margin:20px 0 0 24px; padding-bottom:9px; font-size:11px; letter-spacing:.08em; }
.footer-advice span { color:var(--amber); }
.footer-grid { display:grid; grid-template-columns:.75fr 1.15fr 1fr; gap:clamp(24px,5vw,90px); width:min(950px,80%); margin-left:auto; padding:18px 0; border-top:1px solid rgba(255,246,224,.18); }
.footer-column { display:grid; align-content:start; gap:8px; font-size:12px; line-height:1.5; letter-spacing:.03em; }
.footer-label { margin-bottom:6px; color:var(--amber); font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.footer-column a { width:max-content; max-width:100%; opacity:.74; transition:opacity .2s,color .2s; }
.footer-column a:hover,.footer-column a:focus-visible { color:var(--amber); opacity:1; }
.footer-wordmark { position:absolute; z-index:-1; left:var(--pad); bottom:36px; color:rgba(255,246,224,.026); font-size:clamp(90px,17vw,275px); line-height:.7; letter-spacing:-.085em; font-weight:700; pointer-events:none; }
.footer-bottomline { padding-top:14px; border-top:1px solid rgba(255,246,224,.2); }
.footer-bottomline div { display:flex; gap:18px; }
.footer-bottomline a { opacity:.55; }
.footer-bottomline div > span { opacity:.55; }
.footer-bottomline a:hover,.footer-bottomline a:focus-visible { opacity:1; }

@media (max-width:1220px) {
  .site-header { gap:14px; }
  .desktop-nav { gap:clamp(8px,1vw,13px); }
  .desktop-nav a,.desktop-nav button,.desktop-nav .nav-digital>summary { font-size:9px; }
}
@media (max-width:1050px) {
  .project-link { display:none; }
}
@media (max-width:860px) {
  .site-header { min-height:86px; grid-template-columns:1fr auto; padding:14px 20px; }
  .desktop-nav,.language { display:none; }
  .menu-button { display:block; }
  .brand-symbol,.brand-icon { width:45px; height:45px; }
}
@media (max-width:820px) {
  .project-center { width:86vw; }
  .project-center h2 strong { font-size:clamp(46px,14vw,88px); line-height:.82; }
  .project-center h2 span { margin-top:12px; font-size:clamp(20px,6vw,34px); }
  .project-type { margin-bottom:14px; font-size:8px; }
  .project-meta { left:20px; bottom:25px; max-width:68vw; font-size:8px; gap:7px; }
  .slide-status { right:20px; bottom:25px; font-size:10px; gap:6px; }
  .slide-status i { width:22px; }
  .thermal-legend { display:none; }
  .slide-arrow { width:46px; }
  .slide-arrow span { font-size:60px; }
  .cursor-heat { display:none; }
  .project-video { object-position:center; }
  .global-footer { grid-template-rows:auto 1fr auto auto; gap:40px; padding:24px 20px 22px; }
  .footer-topline > span:nth-child(2) { display:none; }
  .footer-pitch { width:100%; align-self:center; }
  .footer-pitch h2 { font-size:clamp(43px,12.5vw,72px); line-height:.84; }
  .footer-pitch h2 br { display:none; }
  .footer-grid { width:100%; grid-template-columns:1fr 1fr; gap:20px; margin:0; }
  .footer-column:last-child { grid-column:1/-1; }
  .footer-bottomline { flex-wrap:wrap; gap:8px 18px; }
  .footer-bottomline > span:nth-child(2) { display:none; }
  .footer-bottomline div { width:100%; flex-wrap:wrap; gap:8px 14px; }
  .footer-wordmark { bottom:80px; }
  .scroll-cue { bottom:75px; font-size:8px; }
  .footer-advice { display:flex; width:max-content; margin-left:0; }
}
@media (max-width:520px) {
  .project-center { transform:translate(-50%,-48%) scale(.985); }
  .project-center.is-readable { transform:translate(-50%,-48%) scale(1); }
  .project-center h2 strong { font-size:clamp(39px,13vw,68px); letter-spacing:-.05em; }
  .project-meta span { display:none; }
  .arrow-prev { left:-5px; } .arrow-next { right:-5px; }
  .thermal-wash { opacity:.23; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
