/* mthd_405 — culture hacking_ · tokens from mthd_405 design system */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:root{
  --mthd-blanco:#f4f4f4;--mthd-negro:#111111;
  --acc-rojo:#ff2400;--acc-celeste:#76abff;
  --ff-display:"Approach Mono","JetBrains Mono",ui-monospace,monospace;
  --ff-body:"Approach Mono","JetBrains Mono",ui-monospace,monospace;
  --tracking-mono:-0.05em;
}
@font-face{font-family:"Approach Mono";src:local("Approach Mono"),url("assets/ApproachMono-Medium.otf") format("opentype");font-weight:400 500;font-display:swap}
@font-face{font-family:"Approach Mono";src:url("assets/ApproachMono-SemiBold.otf") format("opentype");font-weight:600 700;font-display:swap}
body{
  font-family:var(--ff-body);
  letter-spacing:var(--tracking-mono);
  background:var(--bg);color:var(--ink);
  overflow-x:hidden;
  --bg:#0a0a0a;--ink:#f4f4f4;
  --ink-dim:#9a9a9a;--ink-mute:#5a5a5a;
  --faint:rgba(244,244,244,.07);
  --rule:#2a2a2a;--rule-soft:#1a1a1a;
  -webkit-font-smoothing:antialiased;
}
body.light-mode{
  background:#f4f4f4;color:#111;
  --bg:#f4f4f4;--ink:#111111;
  --ink-dim:#5a5a5a;--ink-mute:#9a9a9a;
  --faint:rgba(17,17,17,.06);
  --rule:#d5d5d5;--rule-soft:#e5e5e5;
}
/* film grain (design system) */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
::selection{background:rgba(255,36,0,.3)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
body.atlas-fs-active #nav,body.atlas-fs-active #hotface,body.atlas-fs-active #footer{display:none!important}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:none;cursor:pointer}
img,video,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--ff-display);font-weight:700;letter-spacing:var(--tracking-mono)}
.nav-pill{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif}

@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.blink{animation:blink 1s step-end infinite}
.text-red-glow{color:var(--acc-rojo);text-shadow:0 0 10px var(--acc-rojo),0 0 20px var(--acc-rojo)}

/* ============ NAV ============ */
#nav{position:fixed;top:0;left:0;width:100%;z-index:50;mix-blend-mode:difference;color:#fff}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem}
.nav-pill{border:1px solid currentColor;border-radius:999px;padding:.375rem 1rem;transition:background .3s,color .3s}
.nav-pill span{font-family:var(--ff-body)}
.nav-pill:hover{background:#fff;color:#000}
.nav-pill b{font-weight:700}
.nav-links{display:none;align-items:center;gap:2rem}
.nav-link{font-size:.875rem;font-weight:400;text-transform:lowercase;opacity:.75;transition:opacity .3s}
.nav-link:hover,.nav-link.active{opacity:1}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-lang{font-size:.875rem;text-transform:lowercase;transition:opacity .3s}
.nav-lang:hover{opacity:.5}
.nav-theme{width:1.5rem;height:1.5rem;transition:transform .3s}
.nav-theme:hover{transform:scale(1.1)}
.nav-theme img{width:100%;height:100%;object-fit:contain;transition:filter .3s}
body.light-mode .nav-theme img{filter:none}
.nav-burger{padding:.5rem;display:flex;transition:opacity .3s}
.nav-burger:hover{opacity:.5}
.nav-mobile{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem 1.25rem;border-bottom:1px solid var(--rule);background:var(--bg);color:var(--ink)}
.nav-mobile .nav-link{text-align:left}
@media(min-width:768px){
  .nav-links{display:flex}
  .nav-burger{display:none}
  .nav-mobile{display:none!important}
}

/* ============ HOME ============ */
#blobCanvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:45;image-rendering:pixelated;
  filter:drop-shadow(0 0 5px rgba(244,244,244,.3))}
body.light-mode #blobCanvas{filter:drop-shadow(0 0 5px rgba(17,17,17,.2))}
#trackCanvas{position:fixed;inset:0;pointer-events:none;z-index:44}
#trailLayer{position:fixed;inset:0;pointer-events:none;z-index:9999}
.trail-tag{position:absolute;font-weight:700;font-size:1.125rem;color:var(--acc-rojo);
  text-shadow:0 0 10px var(--acc-rojo),0 0 20px var(--acc-rojo),0 0 30px var(--acc-rojo);
  transform:translate(-50%,-50%);transition:opacity .25s ease-out}
#crosshair{position:fixed;pointer-events:none;z-index:40;transform:translate(-50%,-50%);display:none;
  animation:cursor-float 2s ease-in-out infinite}
#crosshair span{position:absolute;background:var(--acc-rojo);box-shadow:0 0 10px var(--acc-rojo),0 0 20px var(--acc-rojo)}
#crosshair .h{width:24px;height:2px;left:-12px;top:-1px}
#crosshair .v{width:2px;height:24px;left:-1px;top:-12px}
@keyframes cursor-float{0%,100%{margin-top:0}50%{margin-top:-3px}}

.home-scroll{position:relative;height:520vh}
.hero{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1}
.home-logo{position:relative;z-index:10;width:clamp(121px,16.9vw,202px);height:clamp(121px,16.9vw,202px);color:var(--ink)}
.lsvg{position:absolute;inset:0;width:100%;height:100%}
.lsvg path{fill:currentColor}
@keyframes logo-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(244,244,244,0))}50%{filter:drop-shadow(0 0 20px rgba(244,244,244,.45))}}
body:not(.light-mode) .lsvg.main{animation:logo-glow 3s ease-in-out infinite}
.lsvg.ghost{opacity:0;color:var(--acc-rojo);transition:opacity .35s ease}
@keyframes soft-drift-a{0%,100%{transform:translate(0,0)}25%{transform:translate(2.5px,-1.5px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1.5px,2px)}}
@keyframes soft-drift-b{0%,100%{transform:translate(0,0)}30%{transform:translate(-2.5px,1.5px)}60%{transform:translate(2px,-2px)}80%{transform:translate(-1.5px,-1px)}}
@keyframes soft-slices{0%,100%{clip-path:inset(0 0 0 0)}20%{clip-path:inset(8% 0 64% 0)}40%{clip-path:inset(52% 0 18% 0)}60%{clip-path:inset(30% 0 42% 0)}80%{clip-path:inset(70% 0 6% 0)}}
.home-logo.hacked .lsvg.main{animation:soft-drift-a 1.1s ease-in-out infinite}
.home-logo.hacked .ghost{opacity:.55}
.home-logo.hacked .g1{animation:soft-drift-b 1.3s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,36,0,.9))}
.home-logo.hacked .g2{animation:soft-drift-a 1.7s ease-in-out infinite reverse,soft-slices 2.4s steps(1) infinite;
  filter:drop-shadow(0 0 10px rgba(255,36,0,.6));opacity:.35}
/* click burst */
@keyframes burst-glitch{0%{transform:translate(0,0);clip-path:inset(0 0 0 0)}10%{transform:translate(-16px,7px) skewX(-14deg);clip-path:inset(12% 0 55% 0)}22%{transform:translate(14px,-11px) skewX(11deg);clip-path:inset(60% 0 8% 0)}34%{transform:translate(-12px,-6px) scaleX(1.15);clip-path:inset(30% 0 34% 0)}46%{transform:translate(13px,9px) skewX(-9deg);clip-path:inset(4% 0 72% 0)}58%{transform:translate(-9px,4px) scaleY(.85);clip-path:inset(48% 0 22% 0)}72%{transform:translate(10px,-7px) skewX(7deg);clip-path:inset(70% 0 5% 0)}86%{transform:translate(-6px,3px);clip-path:inset(18% 0 48% 0)}100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}}
@keyframes burst-ghost-a{0%{transform:translate(0,0)}15%{transform:translate(-28px,14px) skewX(-10deg)}35%{transform:translate(24px,-18px)}55%{transform:translate(-18px,-12px) skewX(8deg)}75%{transform:translate(14px,10px)}100%{transform:translate(0,0)}}
@keyframes burst-ghost-b{0%{transform:translate(0,0)}20%{transform:translate(26px,-13px)}40%{transform:translate(-22px,19px) skewX(-12deg)}60%{transform:translate(16px,11px)}80%{transform:translate(-10px,-8px)}100%{transform:translate(0,0)}}
.home-logo.burst .lsvg.main{animation:burst-glitch 1.05s steps(5) both}
.home-logo.burst .ghost{opacity:1}
.home-logo.burst .g1{animation:burst-ghost-a 1.05s steps(6) both;filter:drop-shadow(0 0 14px rgba(255,36,0,1))}
.home-logo.burst .g2{animation:burst-ghost-b 1.05s steps(6) both,soft-slices 1.05s steps(4) both;filter:drop-shadow(0 0 20px rgba(255,36,0,.9));opacity:.7}
@keyframes hero-shake{0%,100%{transform:translate(0,0)}12%{transform:translate(-11px,7px)}28%{transform:translate(9px,-9px)}44%{transform:translate(-8px,-6px)}60%{transform:translate(7px,8px)}76%{transform:translate(-5px,3px)}90%{transform:translate(4px,-3px)}}
.hero.shake{animation:hero-shake 1s ease-out both}
.hero::after{content:"";position:absolute;inset:0;z-index:35;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(255,36,0,.18) 0 2px,transparent 2px 7px)}
@keyframes scan-flicker{0%,100%{opacity:0}15%{opacity:1}30%{opacity:.2}45%{opacity:.9}60%{opacity:.15}80%{opacity:.6}}
.hero.shake::after{animation:scan-flicker 1s steps(3) both}
.home-logo .lsvg.main path{transition:stroke-width .35s ease}
.home-logo.outline .lsvg.main path{fill:none;stroke:currentColor;stroke-width:.56}
.tagline-wrap{position:absolute;bottom:25%;left:50%;transform:translateX(-50%);z-index:10}
.tagline{font-size:.8rem;letter-spacing:var(--tracking-mono);text-transform:lowercase;color:var(--ink-dim);white-space:nowrap}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:10;
  font-size:.7rem;letter-spacing:.2em;color:var(--ink-mute);display:flex;flex-direction:column;align-items:center;gap:.4rem;will-change:opacity}
.scroll-hint::after{content:"";width:1px;height:28px;background:linear-gradient(var(--ink-mute),transparent);
  animation:hint-drop 1.8s ease-in-out infinite}
@keyframes hint-drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.story-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
  will-change:transform;pointer-events:none;background:var(--bg);
  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;overflow:hidden}
.story-frame.f169{z-index:20;width:min(72vw,124vh)}
.story-frame.f169::after{content:"";display:block}
.f169{aspect-ratio:16/9}
.story-bg{position:absolute;inset:0;z-index:15;visibility:hidden;pointer-events:none;
  -webkit-mask-size:880px 880px;mask-size:880px 880px;-webkit-mask-repeat:repeat;mask-repeat:repeat}
.story-bg img{width:100%;height:100%;object-fit:cover}
.f34{z-index:22;height:min(68vh,84vw);aspect-ratio:3/4}
.f11{z-index:24;height:min(56vh,80vw);aspect-ratio:1/1}
.ph-label{font-size:.65rem;letter-spacing:.15em;color:var(--ink-dim);text-transform:lowercase;text-align:center;padding:0 1rem}
.ph-coords{position:absolute;top:.5rem;left:.75rem;font-size:.55rem;letter-spacing:.1em;color:var(--acc-rojo);opacity:.7}
.story-frame img,.story-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.story-hand{position:absolute;top:50%;z-index:25;width:min(96vw,1650px);pointer-events:none;will-change:transform;mix-blend-mode:screen}
.story-hand img{width:100%;height:auto;display:block}
.story-hand.hl{left:0;transform:translate(-102%,-50%)}
.story-hand.hr{right:0;transform:translate(102%,-50%)}
.bottom-nav{position:absolute;left:0;right:0;bottom:0;z-index:30;opacity:0;pointer-events:none;
  border-top:1px solid var(--rule);background:var(--bg);padding:1.25rem 1.5rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;will-change:opacity,transform}
.bottom-nav .nav-links{display:flex;flex-wrap:wrap;gap:1.25rem 2rem}
.bottom-nav .mail{font-size:.8rem;color:var(--ink-dim);transition:color .3s}
.bottom-nav .mail:hover{color:var(--acc-rojo)}

/* ============ SERVICES (terminal) ============ */
.terminal{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6rem 1.5rem 3rem;overflow:hidden;background:var(--bg);cursor:text}
.term-grid-bg{position:fixed;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,36,0,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,36,0,.3) 1px,transparent 1px);
  background-size:50px 50px;opacity:.08}
body.light-mode .term-grid-bg{opacity:.03}
.term-body{position:relative;z-index:10;width:100%;max-width:56rem;display:flex;flex-direction:column;gap:.25rem}
.term-line{font-size:.7rem;white-space:pre-wrap;color:var(--ink)}
.term-line.status{opacity:.7}
.term-line.echo{opacity:.55}
.term-line.red-bold{color:var(--acc-rojo);font-weight:700;text-shadow:0 0 10px var(--acc-rojo),0 0 20px var(--acc-rojo),0 0 30px var(--acc-rojo)}
.term-cursor{display:inline-block;width:.5rem;height:1rem;margin-left:2px;vertical-align:text-bottom;
  background:var(--acc-rojo);box-shadow:0 0 8px var(--acc-rojo);animation:blink 1s step-end infinite}
.term-input-row{display:flex;align-items:center;margin-top:1.5rem;font-size:.875rem;color:var(--ink)}
.term-input-row .pfx{opacity:.6;white-space:pre}
.term-input-row input{background:transparent;border:none;outline:none;color:inherit;font:inherit;letter-spacing:inherit;
  width:1ch;min-width:1ch;caret-color:transparent;padding:0}
@media(min-width:768px){.term-line{font-size:.8rem}}
@media(min-width:1024px){.term-line{font-size:.875rem}}

/* ============ MANIFESTO ============ */
.manifesto{width:100%;min-height:100vh;background:var(--bg)}
.mani-video-wrap{position:relative;width:100%;height:100vh;overflow:hidden;background:#000}
.mani-video-wrap video{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:filter .5s}
@media(max-width:767px),(orientation:portrait){.mani-video-wrap video{object-fit:contain}}
.mani-paused-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);pointer-events:none}
.mani-paused-overlay div{width:6rem;height:6rem;border-radius:50%;border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;color:#fff}
.mani-controls{position:absolute;top:6rem;right:1.5rem;z-index:20;display:flex;gap:.75rem}
.mani-controls button{padding:.75rem;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);
  backdrop-filter:blur(4px);transition:background .3s;display:flex;color:#fff}
.mani-controls button:hover{background:rgba(255,255,255,.2)}
.mani-text{max-width:48rem;margin:0 auto;padding:6rem 1.5rem}
.mani-text p{font-size:.875rem;line-height:2.2;color:var(--ink);opacity:.85}
.mani-love{margin-top:5rem}
.mani-love button{font-size:.875rem;text-decoration:underline;text-underline-offset:8px;color:var(--ink-dim);transition:color .3s}
.mani-love button:hover{color:var(--ink)}

/* ============ PORTFOLIO (scroll-stack + indice) ============ */
.pfs-scroll{position:relative}
.pfs-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.pfs-head{position:absolute;top:5.5rem;left:1.5rem;z-index:5}
.pfs-head span{font-size:.8rem;color:var(--ink-dim);letter-spacing:var(--tracking-mono)}
.pfs-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);overflow:hidden;
  cursor:pointer;background:var(--bg);border:1px solid var(--rule);will-change:transform;
  display:flex;flex-direction:column;padding:0;text-align:left}
.pfs-card .bar{display:flex;align-items:center;gap:.5rem;padding:.3rem .6rem;border-bottom:1px solid var(--rule);
  font-size:.6rem;color:var(--ink-dim);background:var(--bg);flex:none}
.pfs-card .bar b{color:var(--acc-rojo);font-weight:400}
.pfs-card .bar i{font-style:normal;margin-left:auto;color:var(--ink-mute)}
.pfs-card img{width:100%;height:100%;object-fit:cover;display:block;flex:1;min-height:0}
.pfs-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:40;
  font-size:.68rem;color:var(--ink-dim);pointer-events:none}
.pfs-idx{position:fixed;right:1.5rem;top:50%;transform:translateY(-50%);z-index:48;
  display:flex;flex-direction:column;gap:.45rem;text-align:right}
.pfs-idx button{font-size:.66rem;letter-spacing:var(--tracking-mono);color:var(--ink-mute);
  text-align:right;transition:color .25s;padding:0;white-space:nowrap}
.pfs-idx button b{font-weight:400;color:var(--ink-mute);margin-right:.5rem;transition:color .25s}
.pfs-idx button:hover,.pfs-idx button.on{color:var(--ink)}
.pfs-idx button.on b{color:var(--acc-rojo)}
#pfTrack{position:fixed;z-index:60;pointer-events:none;opacity:0;transition:opacity .2s;
  background:var(--bg);border:1px solid var(--ink);padding:.7rem .85rem;max-width:280px;
  font-family:var(--ff-body)}
#pfTrack.on{opacity:1}
#pfTrack::before,#pfTrack::after{content:"";position:absolute;width:7px;height:7px;border:1px solid var(--ink)}
#pfTrack::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
#pfTrack::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
#pfTrack .tt{font-size:.8rem;font-weight:700;letter-spacing:var(--tracking-mono)}
#pfTrack .ss{font-size:.64rem;color:var(--ink-dim);margin-top:.15rem}
#pfTrack .mm{font-size:.58rem;color:var(--ink-mute);margin-top:.45rem;display:flex;justify-content:space-between;gap:1rem}
#pfTrack .mm b{color:var(--acc-rojo);font-weight:400}
.pfm-list{display:none}
@media(pointer:coarse),(max-width:767px){
  #pfTrack{display:none}
  .pfs-idx{right:.75rem;gap:.55rem}
  .pfs-idx button{font-size:0}
  .pfs-idx button b{font-size:.62rem;margin-right:0}
}

/* modal (shared) */
@keyframes modal-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.95);overflow:auto;animation:fade-in .25s ease}
.modal-close{position:fixed;top:1rem;right:1rem;z-index:110;padding:.5rem;color:#fff;transition:opacity .3s}
.modal-close:hover{opacity:.8}
.modal-center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-box{width:100%;max-width:72rem;animation:modal-pop .4s cubic-bezier(.16,1,.3,1)}
.modal-box.vert{display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:768px){.modal-box.vert{flex-direction:row;align-items:center;gap:2rem}
  .modal-box.vert .modal-media,.modal-box.vert .modal-info{width:50%}}
.modal-media{position:relative}
.modal-stage{width:100%;aspect-ratio:16/9;overflow:hidden;background:rgba(0,0,0,.5) center/contain no-repeat}
.modal-box.vert .modal-stage{aspect-ratio:9/16}
.modal-stage img,.modal-stage video{width:100%;height:100%;object-fit:contain}
.modal-arrow{position:absolute;top:50%;transform:translateY(-50%);padding:.5rem;background:rgba(0,0,0,.5);
  border-radius:50%;color:#fff;transition:background .3s;display:flex}
.modal-arrow:hover{background:rgba(0,0,0,.8)}
.modal-arrow.l{left:.5rem}.modal-arrow.r{right:.5rem}
.modal-dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem}
.modal-dots button{width:.5rem;height:.5rem;border-radius:50%;background:rgba(255,255,255,.3);transition:background .3s}
.modal-dots button.on{background:#fff}
.modal-info{margin-top:1.25rem;text-align:center}
.modal-box.vert .modal-info{margin-top:0;text-align:left}
.modal-info h3{font-size:1.5rem;color:#fff;margin-bottom:.5rem}
.modal-info .sub{font-size:.8rem;color:rgba(255,255,255,.6);margin-bottom:1rem}
.modal-info .desc{font-size:.75rem;color:rgba(255,255,255,.4);line-height:1.7;max-width:36rem;margin:0 auto}
.modal-box.vert .modal-info .desc{margin:0;max-width:none}
.modal-info .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem;justify-content:center}
.modal-box.vert .modal-info .tags{justify-content:flex-start}
.modal-info .tags span{font-size:.62rem;padding:.25rem .75rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:rgba(255,255,255,.5)}
/* ============ CONTACT (editorial grid) ============ */
.contact2{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:8rem 1.5rem 5rem;background:var(--bg)}
.c3{max-width:80rem;margin:0 auto;width:100%}
.c3-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1px solid var(--rule);padding-bottom:1rem}
.c3-top h1{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:var(--tracking-mono);line-height:1;text-transform:lowercase}
.c3-top span{font-size:.62rem;color:var(--ink-mute)}
.c3-grid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:900px){.c3-grid{grid-template-columns:1.25fr 1fr}}
.c3-mailblock{padding:3rem 0;border-bottom:1px solid var(--rule-soft)}
@media(min-width:900px){.c3-mailblock{border-right:1px solid var(--rule-soft);border-bottom:none;padding-right:3rem}}
.c3-lbl{font-size:.66rem;color:var(--ink-mute);margin-bottom:1.1rem;display:flex;justify-content:space-between;gap:1rem}
.c3-lbl b{font-weight:400;color:var(--acc-rojo)}
.c3-mail{display:inline-block;font-weight:700;font-size:clamp(1.3rem,3.4vw,2.7rem);
  letter-spacing:var(--tracking-mono);line-height:1.1;color:var(--ink);word-break:break-all;
  border-bottom:1px solid transparent;transition:border-color .3s}
.c3-mail:hover{color:var(--ink);border-color:var(--ink)}
.c3-note{margin-top:2.2rem;font-size:.66rem;line-height:1.8;color:var(--ink-mute);max-width:26rem}
.c3-socials{padding:3rem 0}
@media(min-width:900px){.c3-socials{padding-left:3rem}}
.c3-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1.1rem;
  padding:1.15rem .15rem;border-bottom:1px solid var(--rule-soft);transition:background .3s,padding .3s}
.c3-row:first-of-type{border-top:1px solid var(--rule-soft)}
.c3-row .nn{font-size:.6rem;color:var(--ink-mute);transition:color .3s}
.c3-row .name{font-size:1rem;font-weight:700;letter-spacing:var(--tracking-mono)}
.c3-row .handle{font-size:.66rem;color:var(--ink-mute)}
.c3-row svg{width:14px;height:14px;opacity:0;transform:translate(-3px,3px);transition:opacity .3s,transform .3s}
.c3-row:hover{background:var(--faint);padding-left:.7rem}
.c3-row:hover .nn{color:var(--acc-rojo)}
.c3-row:hover svg{opacity:1;transform:none}
.c3-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:1rem;font-size:.6rem;color:var(--ink-mute)}

#footer.fixed-footer{position:fixed;left:0;right:0;bottom:0;z-index:47;pointer-events:none;overflow:hidden}
#footer.fixed-footer footer{transform:translateY(100%);pointer-events:auto;will-change:transform}
.atlas{position:relative;width:100%;height:100vh;background:var(--bg);overflow:hidden}
.atlas-stage{position:absolute;inset:12%;display:flex;align-items:center;justify-content:center}
.atlas-stage.is-fs{position:fixed!important;inset:9%!important;z-index:2147483647;display:flex;align-items:center;justify-content:center}
.atlas-stage.is-fs .atlas-fs,.atlas-stage.is-fs .atlas-hud,.atlas-stage.is-fs .atlas-msg{display:none}
.atlas-item{position:absolute;object-fit:contain;opacity:0;display:block;
  border-radius:1%;filter:blur(14px);transform:scale(1.06);transition:opacity .8s ease,filter .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.atlas-item.in{opacity:1;filter:blur(0);transform:scale(1)}
.atlas-item.out{opacity:0!important;filter:blur(16px)!important;transform:scale(1.04)!important}
.atlas-msg{color:var(--ink-mute);font-size:.75rem;text-align:center;padding:0 1.5rem}
.atlas-fs{position:absolute;top:5.5rem;right:1.5rem;z-index:8;padding:.55rem;color:var(--ink-dim);
  border:1px solid var(--rule);background:var(--bg);transition:color .3s,border-color .3s}
.atlas-fs:hover{color:var(--ink);border-color:var(--ink)}
.atlas-fs svg{width:16px;height:16px}
.atlas-hud{position:absolute;bottom:1.25rem;left:1.5rem;z-index:8;font-size:.62rem;letter-spacing:var(--tracking-mono)}
.atlas-hud a{color:var(--ink-dim);transition:color .3s}
.atlas-hud a:hover{color:var(--ink)}
/* ============ FOOTER ============ */
#footer footer{width:100%;padding:3rem 1.5rem;border-top:1px solid var(--rule-soft);background:var(--bg)}
.footer-inner{max-width:80rem;margin:0 auto}
.footer-privacy{font-size:.65rem;line-height:1.7;color:var(--ink-mute)}
.footer-copy{font-size:.7rem;margin-top:1.5rem;color:var(--ink-mute);opacity:.8}

/* ============ HOTFACE ============ */
#hotfaceBtn{position:fixed;bottom:1.5rem;right:1.5rem;z-index:40;transition:transform .3s;
  animation:hot-pulse 2.2s infinite ease-in-out}
#hotfaceBtn:hover{transform:scale(1.12)}
#hotfaceBtn img{width:48px;height:48px;object-fit:contain}
@keyframes hot-pulse{0%,100%{transform:scale(1);opacity:1}40%{transform:scale(1.1);opacity:.75}55%{transform:scale(1.04);opacity:1}70%{transform:scale(1.09);opacity:.85}}
.hot-overlay{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center}
.hot-overlay video{width:100%;height:100%;object-fit:cover}
.hot-overlay .hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.5);font-size:.7rem;letter-spacing:.1em;animation:hot-hint 2s ease-in-out infinite}
@keyframes hot-hint{0%,100%{opacity:1}50%{opacity:.4}}
.hot-overlay .close{position:absolute;top:1.5rem;right:1.5rem;z-index:10;padding:.75rem;color:rgba(255,255,255,.7)}
.hot-overlay .close:hover{color:#fff}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}