/* ============================================================
   ToolTank · Brand Override "Digital Systems Studio"
   Se enlaza DESPUÉS de site.css en las páginas interiores para
   re-tematizarlas al sistema del homepage SIN tocar site.css.
   Requiere que la página cargue Space Grotesk + IBM Plex Mono.
   ============================================================ */

:root{
  --navy:#0D1B2A; --navy-panel:#12233A; --tt-ink-dark:#1C1F2A;
  --paper:#F0EDE8; --paper-deep:#E7E1D6;
  --brass:#C9A84C; --brass-soft:#D9BE78; --aqua:#5F9F9A; --aqua-ink:#3C7873;
  --cream:#F0EDE8; --cream-mute:rgba(240,237,232,.64); --cream-faint:rgba(240,237,232,.40);
  --line-dark:rgba(240,237,232,.16); --line-dark-soft:rgba(240,237,232,.09);
  --sans:"Space Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  /* remapeo de los tokens que consume site.css → paleta nueva */
  --charcoal:#0D1B2A; --gray:#47515C;
  --silver:#F0EDE8; --silver-2:#E7E1D6; --line:#E2DDD4;
  --champagne:#C9A84C; --champagne-hi:#D9BE78; --champagne-tx:#8a6d2f;
  --radius-card:4px; --radius-pill:2px;
}

body{font-family:var(--sans)}
h1,h2,h3{font-weight:500;letter-spacing:-.025em}
.h-display{font-weight:600;letter-spacing:-.03em}
.eyebrow,.pain .num,.step .kicker,.crumbs,.vs-col .tag,.work .tag,.proof .src,.legal-toc a{font-family:var(--mono)}
.eyebrow{color:var(--champagne);font-weight:500}
.on-dark .eyebrow{color:var(--brass-soft)}
.eyebrow::before{width:26px;background:var(--brass);opacity:.7}
.hero .eyebrow::after{background:var(--brass)}
.accent,.on-dark .accent{color:var(--brass)}
::selection{background:var(--brass);color:var(--navy)}

.btn{background:var(--brass);color:var(--navy);border-radius:999px;font-family:var(--mono);font-weight:500;letter-spacing:.05em;text-transform:uppercase;font-size:14px;box-shadow:0 6px 16px -10px rgba(201,168,76,.55)}
.btn:hover{background:var(--brass-soft);transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(201,168,76,.6)}
.on-dark .btn,.nav .btn{background:var(--brass);color:var(--navy)}
.on-dark .btn:hover,.nav .btn:hover{background:var(--brass-soft)}
.textlink{color:var(--champagne-tx);font-family:var(--mono);font-weight:500;letter-spacing:.04em;font-size:14px}
.on-dark .textlink{color:var(--brass-soft)}
.vs-col.us{background:rgba(201,168,76,.07);border-color:rgba(201,168,76,.35)}

/* nav oscuro (hero es dark) */
.nav-links a:not(.btn){color:var(--cream-mute)}
.nav-links a:not(.btn):hover{color:var(--cream)}
/* Nav como pill flotante navy (la forma vive en site.css) */
.nav-inner{background:var(--navy);border:1px solid rgba(201,168,76,.16);box-shadow:0 10px 30px -16px rgba(0,0,0,.55)}
.nav.scrolled{background:transparent}
.nav.scrolled .nav-inner{height:54px;background:var(--navy);box-shadow:0 18px 44px -18px rgba(0,0,0,.65);border-color:rgba(201,168,76,.28)}
.nav.scrolled .nav-links a:not(.btn){color:var(--cream-mute)}
.nav.menu-open{background:transparent}
.nav.menu-open .nav-inner{background:var(--navy);border-color:var(--line-dark-soft)}
.nav-burger{color:var(--cream)}
.nav.nav--solid .nav-inner{background:var(--navy)}

/* dropdown oscuro con títulos en gold */
.drop-menu{background:rgba(18,35,58,.97);border-color:var(--line-dark);box-shadow:0 26px 54px rgba(0,0,0,.5)}
.nav-links .drop-menu a{color:var(--brass-soft);font-weight:500}
.nav-links .drop-menu a:hover{background:rgba(201,168,76,.14);color:var(--brass)}
.nav-links .drop-menu a small{color:var(--cream-faint)}

/* hero oscuro benefit-first */
.hero.on-dark{background:var(--navy);color:var(--cream);position:relative;overflow:hidden}
.hero.on-dark::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line-dark-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark-soft) 1px,transparent 1px);
  background-size:clamp(64px,7vw,96px) clamp(64px,7vw,96px);
  -webkit-mask-image:radial-gradient(130% 110% at 50% 0%,#000 20%,transparent 70%);mask-image:radial-gradient(130% 110% at 50% 0%,#000 20%,transparent 70%);opacity:.5}
.hero.on-dark .wrap{position:relative;z-index:1}
.hero.on-dark h1,.hero.on-dark h2{color:var(--cream)}
.hero.on-dark h1 .accent,.hero.on-dark .accent{color:var(--brass)}
.hero.on-dark .lead,.hero.on-dark p{color:var(--cream-mute)}
.hero.on-dark .lead strong,.hero.on-dark strong{color:var(--cream)}
.hero.on-dark .crumbs{color:var(--cream-faint)}
.hero.on-dark .crumbs a{color:var(--brass-soft)}
.hero.on-dark .crumbs [aria-current]{color:var(--cream-faint)}
/* TOC legal sobre hero oscuro */
.hero.on-dark .legal-toc a{color:var(--brass-soft);border-color:var(--line-dark)}
.hero.on-dark .legal-toc a:hover{border-color:var(--brass);color:var(--brass)}

/* footer viejo (.foot-*) re-tematizado on-brand (sin cambiar el markup) */
footer{background:var(--tt-ink-dark);border-top:0}
.foot-brand p{color:var(--cream-mute)}
.foot-col h4{font-family:var(--mono);color:var(--brass);letter-spacing:.18em;font-weight:500;text-transform:uppercase}
.foot-col a{color:var(--cream-mute)}
.foot-col a:hover{color:var(--cream)}
.foot-icons a{border-color:var(--line-dark);color:var(--cream-mute)}
.foot-icons a:hover{color:var(--brass-soft);border-color:var(--brass)}
.foot-base{color:var(--cream-faint);font-family:var(--mono)}

/* micro-animación sutil en cards comunes */
.card,.step,.pain,.proof{transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.card:hover,.step:hover,.proof:hover{transform:translateY(-4px);box-shadow:0 18px 38px -24px rgba(20,32,46,.45)}
@media(prefers-reduced-motion:reduce){.card,.step,.pain,.proof{transition:none}.card:hover,.step:hover,.proof:hover{transform:none}}

/* ===== De-franja: secciones oscuras interiores como PANELES flotantes =====
   Las secciones .sec-dark interiores dejan de ser franjas navy full-bleed y
   pasan a paneles redondeados con aire de papel alrededor. Heros (.hero) y
   cierres (.final) siguen full-bleed como bookends. */
section.sec-dark:not(.final){background:transparent;
  padding-left:var(--gutter);padding-right:var(--gutter);
  padding-top:clamp(22px,3.2vw,44px);padding-bottom:clamp(22px,3.2vw,44px)}
section.sec-dark:not(.final) > .wrap{position:relative;overflow:hidden;max-width:1180px;margin-inline:auto;
  padding:clamp(48px,6vw,92px) clamp(26px,5vw,66px);
  background:var(--navy);color:var(--cream);
  border:1px solid rgba(201,168,76,.18);border-radius:24px;
  box-shadow:0 50px 100px -60px rgba(13,27,42,.72)}
section.sec-dark:not(.final) > .wrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line-dark-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark-soft) 1px,transparent 1px);
  background-size:clamp(52px,5.5vw,84px) clamp(52px,5.5vw,84px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 8%,transparent 62%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 8%,transparent 62%);opacity:.42}
section.sec-dark:not(.final) > .wrap::after{content:"";position:absolute;top:20px;right:22px;width:15px;height:15px;
  border-top:1px solid rgba(201,168,76,.5);border-right:1px solid rgba(201,168,76,.5);z-index:1;pointer-events:none}
section.sec-dark:not(.final) > .wrap > *{position:relative;z-index:1}
@media(max-width:640px){
  section.sec-dark:not(.final) > .wrap{border-radius:18px;padding:clamp(32px,7vw,44px) clamp(20px,5vw,26px)}
}