/* ============ NAV (wireframe persistente) ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:18px var(--sp-4);
  transition:background .4s, padding .4s, border-color .4s;border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(10,10,11,.7);backdrop-filter:blur(10px);border-color:var(--c-line);padding:12px var(--sp-4)}
.nav__logo{justify-self:start}
.nav__logo svg{display:block;height:22px;width:auto}
.nav > .btn--cta{justify-self:end}
.nav__links{justify-self:center;display:flex;gap:30px;font-family:var(--font);font-weight:500;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--c-muted)}
.nav__links a{position:relative;cursor:pointer;padding:4px 0;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--c-red);transition:width .26s var(--ease-out)}
.nav__links a:hover{color:var(--c-fg)}
.nav__links a:hover::after{width:100%}

/* ============ BOTONES ============ */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;border-radius:0;cursor:pointer;overflow:hidden;
  font-family:var(--font);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;
  padding:13px 22px;transition:color .25s var(--ease-out), border-color .25s, transform .2s}
.btn .arw{display:inline-block;transition:transform .25s var(--ease-out)}
.btn:hover .arw{transform:translateX(5px)}
.btn--cta{background:var(--c-red);color:#fff}
.btn--cta::before{content:"";position:absolute;inset:0;background:var(--c-fg);transform:scaleX(0);
  transform-origin:left center;transition:transform .32s var(--ease-out)}
.btn--cta:hover{color:#0A0A0B}
.btn--cta:hover::before{transform:scaleX(1)}
.btn--cta .btn__t,.btn--cta .arw{position:relative;z-index:1}
.btn--ghost{border:1px solid var(--c-line);color:var(--c-fg);background:transparent}
.btn--ghost:hover{border-color:var(--c-red);color:var(--c-fg)}
.btn--lg{font-size:13px;padding:16px 30px}

/* ============ ÍNDICE DE ESCENA ============ */
.frame-index{position:fixed;top:50%;right:22px;transform:translateY(-50%);z-index:var(--z-ui);
  font-size:11px;letter-spacing:2px;color:var(--c-muted);writing-mode:vertical-rl}

@media (max-width:720px){ .nav__links{display:none} .frame-index{display:none} }

/* ============ MODULE GRID (hero + casos) ============ */
.grid{display:grid;grid-template-columns:repeat(3,120px);grid-auto-rows:114px;gap:14px;grid-auto-flow:row dense}
.mod{border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-size:13px;font-weight:600;text-align:center;position:relative;will-change:transform,opacity;color:#aeb3b9;
  background:linear-gradient(160deg,#1d2127,#15181c);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  transition:box-shadow .35s, border-color .3s, background .35s, color .3s}
.mod .ic{width:18px;height:18px;border-radius:5px;background:#3a4047;transition:background .3s}
.mod.slot{background:transparent;border:1.5px dashed rgba(255,255,255,.16);color:#54585e;box-shadow:none;
  font-family:var(--font-mono);font-size:11px}
.mod.slot .ic{display:none}
.mod.weak{animation:flick 1.05s steps(2,end) infinite}
@keyframes flick{0%,100%{opacity:1}50%{opacity:.5;border-color:rgba(230,78,78,.45)}}
.mod.red{background:linear-gradient(160deg,#2a1517,#190e10);border-color:var(--c-red);color:#fff;
  box-shadow:0 0 24px -4px rgba(230,78,78,.45), inset 0 1px 0 rgba(255,255,255,.06)}
.mod.red .ic{background:var(--c-red)}
.mod.big{grid-column:span 2;grid-row:span 2;font-size:17px;z-index:4;
  box-shadow:0 0 48px -6px rgba(230,78,78,.6), 0 22px 50px -12px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07)}
.mod.big .ic{width:26px;height:26px}
.mod.big .tagm{display:block}
.tagm{display:none;font-size:11px;font-weight:500;color:#e9b9bb;margin-top:2px;font-family:var(--font-mono)}

/* ============ HERO ============ */
.hero{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4)}
.hero__stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px}
.hero__logo{position:absolute;left:50%;top:50%;opacity:0;pointer-events:none;width:420px;filter:drop-shadow(0 22px 36px rgba(0,0,0,.6))}
.redglow{position:absolute;left:50%;top:50%;width:760px;height:760px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(230,78,78,.16),transparent 60%);opacity:0;transition:opacity .9s;pointer-events:none}
.redglow.show{opacity:1}
.hero__copy{text-align:center;max-width:760px;padding:0 var(--sp-3)}
.hero__title{font-size:clamp(24px,4vw,40px);font-weight:800}
.hero__sub{margin:12px 0 26px;font-size:clamp(15px,2vw,18px)}
.sound-toggle{position:absolute;bottom:18px;right:18px}
.hero__hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--c-muted);
  font-size:11px;letter-spacing:3px;text-transform:uppercase;opacity:.85;transition:opacity .3s}
@media (max-width:720px){ .hero__logo{width:240px} .grid{grid-template-columns:repeat(3,84px);grid-auto-rows:80px;gap:10px} }
@media (max-width:480px){
  .hero{gap:var(--sp-2)}
  .hero__stage{min-height:220px}
  .hero__logo{width:190px}
  .hero__title{font-size:24px}
  .hero__sub{font-size:14px;margin:10px 0 18px}
  .hero .grid{grid-template-columns:repeat(3,76px);grid-auto-rows:72px;gap:9px}
  .sound-toggle{position:static;margin:6px auto 0;font-size:11px;padding:7px 11px}
  .nav__logo svg{height:18px}
}

/* ============ FONDO DE PARTÍCULAS ============ */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ============ CURSOR PERSONALIZADO ============ */
.has-cursor, .has-cursor *{cursor:none !important}
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;opacity:0;will-change:transform}
.has-cursor .cursor{opacity:1}
.cursor svg{display:block;transform-origin:2px 1px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));
  transition:transform .16s var(--ease-out), filter .2s}
.cursor svg path{fill:var(--c-red);stroke:#0A0A0B;transition:fill .18s, stroke .18s}
.cursor.is-hover svg{transform:scale(1.4);filter:drop-shadow(0 0 8px rgba(230,78,78,.9))}
.cursor.is-hover svg path{fill:#F5F6F7;stroke:var(--c-red)}
.cursor.is-down svg{transform:scale(.82)}

/* ============ INTRO FULLSCREEN ============ */
.intro{position:fixed;inset:0;z-index:200;background:#0A0A0B;display:flex;flex-direction:column;
  align-items:center;justify-content:center;transition:opacity .8s ease, visibility .8s ease}
.intro.hidden{opacity:0;visibility:hidden;pointer-events:none}
.intro__stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px}
.intro__logo{width:clamp(280px,42vw,460px)}
.intro .sound-toggle{position:absolute;top:18px;right:18px}
.intro__hint{position:absolute;bottom:40px;color:var(--c-muted);font-size:11px;letter-spacing:3px;
  text-transform:uppercase;opacity:.85;min-height:14px}
@media (max-width:480px){ .intro__logo{width:200px} .intro .grid{grid-template-columns:repeat(3,76px);grid-auto-rows:72px;gap:9px} }

/* ============ ESCENAS DE CONTENIDO ============ */
.scene-pad{width:100%;max-height:100vh;overflow:auto;padding-top:90px;padding-bottom:30px}
.scene-title{font-size:clamp(30px,5vw,56px);margin:10px 0 18px}
.scene-lead{font-size:clamp(17px,2vw,21px);max-width:620px;line-height:1.6}
.enfoque-points{list-style:none;display:grid;gap:14px;margin-top:var(--sp-4);max-width:640px}
.enfoque-points li{padding-left:18px;border-left:2px solid var(--c-red);color:var(--c-muted)}
.enfoque-points b{color:var(--c-fg)}
/* Método */
.method-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
.method-steps li{border-top:1px solid var(--c-line);padding-top:var(--sp-2)}
.method-n{color:var(--c-red);font-size:13px}
.method-steps h3{font-size:22px;margin:8px 0 6px}
/* Casos */
.case{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-4);align-items:center;margin-top:var(--sp-4)}
.case__grid{display:flex;justify-content:center}
.case__info h3{font-size:26px;margin-bottom:10px}
.case__info p{line-height:1.6}
.case__tags{margin-top:14px;color:var(--c-red);font-size:12px}
.case__grid .grid{grid-template-columns:repeat(3,98px);grid-auto-rows:90px;gap:11px}
/* Equipo */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
.member__photo{aspect-ratio:1;border-radius:var(--radius);
  background:repeating-linear-gradient(135deg,#16181c 0 14px,#121317 14px 28px);border:1px solid var(--c-line);margin-bottom:14px}
.member h3{font-size:20px;margin-bottom:4px}
/* Contacto + footer */
.contacto{text-align:center}
.footer{margin-top:var(--sp-6);display:flex;flex-direction:column;align-items:center;gap:12px;
  border-top:1px solid var(--c-line);padding-top:var(--sp-4)}
.footer__social{display:flex;gap:var(--sp-3);color:var(--c-muted)}
.footer__social a:hover{color:var(--c-fg)}
@media (max-width:860px){ .case{grid-template-columns:1fr} }
@media (max-width:720px){
  .method-steps{grid-template-columns:1fr}
  .team{grid-template-columns:1fr;max-width:320px;margin-left:auto;margin-right:auto}
  .case__grid .grid{grid-template-columns:repeat(3,82px);grid-auto-rows:78px;gap:9px}
  .nav{padding:14px var(--sp-3)}
}