/* =====================================================================
   MC SYSTEMS COMPANY · base.css — tokens, nav gauge-rail, loader, footer
   Familia D Swiss Industrial Blueprint · dualidad FRIO/CALOR (CONCEPT P4)
   ===================================================================== */

@font-face { font-family:'Chakra Petch'; src:url('/assets/fonts/chakra-petch-500-latin.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Chakra Petch'; src:url('/assets/fonts/chakra-petch-600-latin.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Chakra Petch'; src:url('/assets/fonts/chakra-petch-700-latin.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Public Sans'; src:url('/assets/fonts/public-sans-var-latin.woff2') format('woff2'); font-weight:100 900; font-display:swap; }

:root {
  --paper:#F5F7FB; --paper-2:#E9EEF6; --ink:#10141F; --ink-2:#0E1220;
  --cold:#2C3199; --cold-deep:#1F2373; --heat:#D6010A; --heat-deep:#A80008;
  --steel:#C7CDD6; --hairline:#DDE3EC; --wine:#921345; --purple:#64206A;
  --ice:#C3CCFF; /* tinte frio AA sobre ink (keyword en bandas oscuras) */
  --fd:'Chakra Petch', sans-serif;
  --fu:'Public Sans', sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --wstop:62%; /* parada dura del dos-tonos de la keyword (reposo = equilibrio) */
}

* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:clip; scroll-behavior:auto; }
body { overflow-x:clip; font-family:var(--fu); color:var(--ink); background:var(--paper);
       -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }

.visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- pre-siembra 0714-c p2: pintado bajo el loader, el reveal solo compone ---- */
.js [data-pre] { opacity:.001; }
.js.langswap [data-pre] { opacity:1; }

/* ---- reveals genericos (GSAP los lleva a reposo; restCss del kit los neutraliza) ---- */
.js .rv { opacity:.001; transform:translateY(26px); }
.js.langswap .rv { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-pre], .js .rv { opacity:1!important; transform:none!important; }
  .loader { display:none!important; }
}

/* =====================================================================
   BOTONES (pill 999; hover = GSAP, cero transition de transform)
   ===================================================================== */
.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--fu);
  font-weight:600; font-size:14px; padding:14px 26px; border-radius:999px;
  text-decoration:none; white-space:nowrap; }
.btn-heat { background:var(--heat); color:#fff; box-shadow:0 12px 28px rgba(214,1,10,.25); }
.btn-heat .arr { display:inline-grid; place-items:center; width:22px; height:22px;
  border-radius:50%; background:rgba(255,255,255,.18); font-size:12px; }
.btn-ghost { border:1.5px solid rgba(245,247,251,.85); color:var(--paper); }
.btn-ghost-ink { border:1.5px solid rgba(16,20,31,.35); color:var(--ink); }

/* =====================================================================
   NAV «GAUGE RAIL» (CONCEPT §4) — superpuesto, centro real p1, ticks
   ===================================================================== */
.site-nav { position:absolute; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2.4vh,22px) 3vw; pointer-events:none; }
.site-nav > * { pointer-events:auto; }
.nav-logo img { width:56px; height:61px; } /* 0720-a: dueno pidio logo+menu mas grandes */
.nav-links { position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:clamp(18px,2.4vw,34px); }
.nl { display:flex; flex-direction:column; align-items:center; gap:5px;
  font-weight:500; font-size:14.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper); text-decoration:none; }
.nl .ticks { display:flex; align-items:flex-end; gap:4px; height:8px; }
.nl .ticks b { width:2px; height:5px; background:var(--hairline); opacity:.65; }
.nl .ticks .mid { width:18px; height:2px; align-self:center; transform:scaleX(0); }
.nl[data-temp="heat"] .ticks .mid { background:var(--heat); }
.nl[data-temp="cold"] .ticks .mid { background:var(--cold); }
.nav-side { display:flex; align-items:center; gap:14px; margin-left:auto; }
.lang-pill { display:flex; border:1px solid rgba(245,247,251,.5); border-radius:999px;
  overflow:hidden; font-family:var(--fd); font-weight:600; font-size:11.5px; }
.lang-pill a { padding:7px 12px; text-decoration:none; color:var(--paper); letter-spacing:.08em; }
.lang-pill a.on { background:var(--paper); color:var(--cold-deep); }
.btn-nav { padding:11px 20px; font-size:13px; }
.nav-burger { display:none; }

/* nav sobre superficies claras (interiores lo usaran; el home vive sobre cielo) */
.nav-on-light .nl { color:var(--ink); }
.nav-on-light .lang-pill { border-color:rgba(16,20,31,.3); }
.nav-on-light .lang-pill a { color:var(--ink); }
.nav-on-light .lang-pill a.on { background:var(--ink); color:var(--paper); }

/* ---- header PEGADO (feedback dueno 0720: menu siempre visible al scrollear) ----
   Toggle en boot.js (compartido por las 10 paginas): pega a y>120, despega a y<40
   (histeresis anti-parpadeo). absolute<->fixed: jamas ocupa flujo -> cero CLS.
   Entrada por @keyframes compositor-only; la clase NO declara transform en reposo,
   asi GSAP (intros home/projects, clearProps) nunca pelea el canal. */
.site-nav.is-stuck { position:fixed; z-index:50;
  background:var(--ink-2); border-bottom:1px solid #1C2233;
  padding-top:10px; padding-bottom:10px;
  animation:nav-stick-in .35s ease; }
@keyframes nav-stick-in {
  from { transform:translateY(-100%); }
  to   { transform:translateY(0); }
}
/* legibilidad garantizada sobre tinta: anula .nav-on-light a mitad de scroll.
   El crest azul se hunde en la tinta -> chip paper (mismo patron del footer) */
.site-nav.is-stuck .nav-logo { display:inline-grid; place-items:center;
  background:var(--paper); border-radius:10px; padding:4px 6px; }
.site-nav.is-stuck .nav-logo img { width:44px; height:48px; }
.site-nav.is-stuck .nl { color:var(--paper); }
.site-nav.is-stuck .lang-pill { border-color:rgba(245,247,251,.5); }
.site-nav.is-stuck .lang-pill a { color:var(--paper); }
.site-nav.is-stuck .lang-pill a.on { background:var(--paper); color:var(--cold-deep); }
@media (max-width:1080px) {
  /* el burger (fixed z-70) vive DENTRO del header: un transform animado en el nav
     lo re-anclaria a la caja del header (containing block transformado, mismo
     hallazgo de la intro) -> en mobile la entrada es fade compositor-only */
  .site-nav.is-stuck { animation:nav-stick-fade .35s ease; }
}
@keyframes nav-stick-fade {
  from { opacity:0.001; }
  to   { opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav.is-stuck { animation:none; }
}
/* anclas bajo header PEGADO (verificador adversarial sticky): al aterrizar en
   /services/#repair o /contact/#form el header fixed (~77px) tapaba el arranque
   del destino -> margen de scroll para todo destino de ancla dentro de main */
main [id] { scroll-margin-top: 96px; }

/* ---- menu mobile (ley l3: mismo boton, scroll preservado, 300/200ms) ---- */
.mobile-menu { position:fixed; inset:0; z-index:60; background:rgba(14,18,32,.97);
  display:none; flex-direction:column; justify-content:center; padding:12vh 8vw; }
.mobile-menu.is-open { display:flex; }
.mm-link { font-family:var(--fd); font-weight:700; font-size:clamp(1.9rem,8vw,2.6rem);
  color:var(--paper); text-decoration:none; text-transform:uppercase; letter-spacing:.02em;
  padding:12px 0; display:flex; align-items:baseline; gap:14px; }
.mm-link i { width:16px; height:2px; background:var(--hairline); opacity:.5; }
.mm-link.is-active[data-temp="heat"] i { background:var(--heat); opacity:1; width:28px; }
.mm-link.is-active[data-temp="cold"] i { background:var(--ice); opacity:1; width:28px; }
.mm-lang { margin-top:6vh; display:flex; gap:10px; }
.mm-lang a { font-family:var(--fd); font-weight:600; font-size:14px; letter-spacing:.1em;
  color:var(--paper); text-decoration:none; border:1px solid rgba(245,247,251,.4);
  border-radius:999px; padding:9px 18px; }
.mm-lang a.on { background:var(--paper); color:var(--cold-deep); }
/* lock SOLO en html: en body clava el scroll a 0 (probado sonda l3) */
html.menu-locked { overflow:hidden; }
.nav-burger { width:46px; height:46px; border:1px solid rgba(245,247,251,.5);
  background:rgba(16,20,31,.45); border-radius:999px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav-burger span { display:block; width:18px; height:2px; background:var(--paper); }
.nav-burger.is-x span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger.is-x span:nth-child(2) { opacity:0; }
.nav-burger.is-x span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1080px) {
  .nav-links { display:none; }
  /* burger FIJO (ley l3): alcanzable a cualquier profundidad de scroll,
     misma posicion hamburguesa <-> X */
  .nav-burger { display:flex; position:fixed; top:clamp(14px,2.4vh,22px); right:3vw; z-index:70; }
  .btn-nav { display:none; }
  /* consolidacion F5 (PENDING-GLOBAL-projects #1): el burger fijo (46px @ right:3vw)
     tapaba el "ES" de la lang-pill en las 10 paginas -> se aparta la nav-side */
  .nav-side { margin-right:calc(46px + 12px); }
}

/* =====================================================================
   LOADER «TERMOSTATO» (CONCEPT §6) — rendija 2px 0714-c p1
   ===================================================================== */
.loader { position:fixed; inset:0 0 2px 0; z-index:90; contain:strict; }
.loader-slats { position:absolute; inset:0; display:flex; flex-direction:column; }
.loader-slats i { flex:1 1 0; background:var(--paper); }
.loader-slats i:nth-child(even) { background:var(--paper-2); }
.loader-core { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; }
.ld-logo { width:96px; height:auto; }
.ld-ro { font-family:var(--fd); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:min(18vw,220px); line-height:1; color:var(--ink); letter-spacing:.01em; }
.ld-ro .deg { font-size:.42em; vertical-align:.62em; color:var(--cold-deep); }
.ld-mercury { width:180px; height:2px; background:var(--hairline); overflow:hidden; }
.ld-mercury i { display:block; height:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--heat) 0,var(--wine) 38%,var(--purple) 62%,var(--cold) 100%); }
.ld-line { font-weight:600; font-size:11px; letter-spacing:.22em; color:var(--cold-deep);
  text-transform:uppercase; }
html:not(.js) .loader, html.langswap .loader { display:none; }

/* backdrop-filter APAGADO en vuelo (0714-c p5) — el home no usa ninguno,
   la clase queda como contrato para interiores/menu */
body.is-booting .bf { backdrop-filter:none!important; }

/* =====================================================================
   FOOTER ⑥ — C1 4-col + wordmark bleed (CONCEPT §5)
   ===================================================================== */
.site-footer { position:relative; background:var(--ink-2); color:var(--steel);
  overflow:clip; }
.foot-grid { width:min(92vw,1360px); margin:0 auto;
  padding:clamp(4rem,7vw,6.5rem) 0 clamp(2rem,3vw,3rem);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:clamp(1.6rem,3vw,3rem); }
.foot-brand .f-logo { display:inline-grid; place-items:center; width:64px; height:68px;
  background:var(--paper); border-radius:14px; padding:8px; }
.foot-brand p { margin-top:16px; font-size:14px; line-height:1.65; max-width:30ch; color:var(--steel); }
.foot-h { font-family:var(--fd); font-weight:600; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:#8E96A8; margin-bottom:14px; }
.site-footer nav a { display:block; font-size:14px; color:var(--steel); text-decoration:none;
  padding:5px 0; transition:color .25s; }
.site-footer nav a:hover { color:#fff; }
.foot-nap { font-size:14px; line-height:2; }
.foot-nap a { text-decoration:none; color:var(--paper); font-weight:600; }
.foot-nap a:hover { color:#fff; }
.foot-doodle { position:absolute; right:4vw; top:clamp(3rem,6vw,5rem); width:min(20vw,260px);
  opacity:.06; pointer-events:none; }
.foot-word { position:relative; height:clamp(90px,12vw,190px); pointer-events:none; user-select:none; }
.foot-word span { position:absolute; left:50%; bottom:0; transform:translate(-50%,45%);
  font-family:var(--fd); font-weight:700; font-size:min(18vw,320px); line-height:1;
  letter-spacing:.02em; color:#161B2C; white-space:nowrap; }
.foot-legal { position:relative; z-index:2; border-top:1px solid #1C2233;
  padding:18px 0 22px; width:min(92vw,1360px); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:12.5px; color:#8E96A8; }
@media (max-width:900px) {
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .foot-grid { grid-template-columns:1fr; }
}

/* =====================================================================
   UTILIDADES COMPARTIDAS
   ===================================================================== */
.kicker { font-family:var(--fu); font-weight:600; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; }
.kicker .d { color:var(--heat); }
.chip { background:rgba(245,247,251,.82); border:1px solid var(--hairline);
  border-radius:999px; padding:9px 18px; font-size:12.5px; font-weight:500; color:var(--ink); }
.chip b { color:var(--heat-deep); }
.hl { display:block; overflow:hidden; }
.hl-in { display:block; }
/* pre-estado de line-masks bajo .js (GSAP las lleva a reposo; langswap compone) */
.js .hl .hl-in { transform:translateY(112%); }
.js.langswap .hl .hl-in { transform:none; }
@media (prefers-reduced-motion: reduce) {
  .js .hl .hl-in { transform:none!important; }
}
/* nav: tick central del link activo (estatico por CSS; GSAP solo anima los hover) */
.nl.is-active .ticks .mid { transform:scaleX(1); }
.mobile-menu[aria-hidden="true"] { display:none; }

/* 0720-a: footer logo ahora es enlace a Home */
.f-logo{display:inline-block;cursor:pointer;transition:opacity .2s}
.f-logo:hover{opacity:.75}