/* ============================================================
   styles.css — estilos compartidos del sitio mastersolution
   Estética editorial blanco/negro. Sin border-radius.
   Se carga ANTES del <style> de cada página; lo específico de
   cada página queda en su propio <style> y puede sobreescribir.
   ============================================================ */

/* ============================================================
   FUENTES — Geist self-hosted (variable woff2, pesos 100–900)
   Reemplaza Google Fonts: sin round-trip externo, mejor LCP.
   ============================================================ */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/Geist-Variable.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/GeistMono-Variable.woff2') format('woff2')}
/* Fallbacks con métricas alineadas a Geist para evitar CLS durante el swap */
@font-face{font-family:'Geist Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:109.98%;ascent-override:91.38%;descent-override:26.82%;line-gap-override:0%}
@font-face{font-family:'Geist Mono Fallback';src:local('Consolas'),local('Menlo'),local('DejaVu Sans Mono');size-adjust:109.09%;ascent-override:92.13%;descent-override:27.04%;line-gap-override:0%}

/* FONDO DE PARTÍCULAS — canvas "polvo" inyectado por app.js, detrás del contenido */
#bg-particles{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block}

/* RESET / BASE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth;color-scheme:dark}
body{background:#000;color:#fff;font-family:'Geist','Geist Fallback',sans-serif;font-weight:300;overflow-x:hidden;line-height:1.55;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:2px}::-webkit-scrollbar-track{background:#000}::-webkit-scrollbar-thumb{background:#fff}
/* Tokens — gris muted unificado a ≥4.5:1 sobre negro (WCAG AA) */
:root{--border:rgba(255,255,255,.08);--fg:#fff;--mute:#8a8a8a;--faint:#909090}

/* SKIP LINK — bypass de bloques (WCAG 2.4.1) */
.skip{position:fixed;top:0;left:0;z-index:1000;padding:10px 18px;background:#fff;color:#000;font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transform:translateY(-120%);transition:transform .2s}
.skip:focus{transform:translateY(0)}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:56px;background:rgba(0,0,0,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:background .3s}
#nav.scrolled{background:rgba(0,0,0,.92)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:30px;height:30px;object-fit:contain;flex-shrink:0;display:block}
.nln{font-size:15px;font-weight:400;color:#fff;letter-spacing:-.01em}.nln b{font-weight:700}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{color:#8a8a8a;text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;transition:color .25s;position:relative;padding:6px 0}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
/* NAV dropdown (Productos) */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-btn{background:none;border:none;color:#8a8a8a;font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:6px;transition:color .25s}
.nav-dd-btn svg{width:9px;height:9px;transition:transform .25s}
.nav-dd:hover .nav-dd-btn,.nav-dd:focus-within .nav-dd-btn{color:#fff}
.nav-dd:hover .nav-dd-btn svg,.nav-dd:focus-within .nav-dd-btn svg,.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 12px);left:-16px;min-width:250px;list-style:none;background:rgba(0,0,0,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);padding:6px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s;z-index:950}
/* puente invisible: evita que el hueco rompa el :hover al bajar al menú */
.nav-dd-menu::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;transform:none;pointer-events:auto}
.nav-dd-menu a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;color:#8a8a8a;text-decoration:none;text-transform:none;letter-spacing:0;border-bottom:1px solid var(--border);transition:background .2s,color .2s}
.nav-dd-menu li:last-child a{border-bottom:none}
.nav-dd-menu a::after{content:none}
.nav-dd-menu a:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-dd-menu .ddt{font-size:13px;font-weight:500;color:#fff;letter-spacing:-.01em}
.nav-dd-menu .ddd{font-family:'Geist Mono','Geist Mono Fallback',ui-monospace,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a8a8a}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;background:#fff;color:#000;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:background .2s,transform .2s,color .2s;border:1px solid #fff}
.nav-cta:hover{background:#000;color:#fff;transform:translateY(-1px)}
#nav-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:6px;margin:-6px -6px -6px 4px}

/* SECTION HEADINGS (escritorio) */
.sec-head{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:end;margin-bottom:48px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.sec-num{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.18em;color:#8a8a8a;text-transform:uppercase}
.sec-title{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff}
.sec-title em{font-style:normal;font-weight:300;color:#8a8a8a}

/* REVEAL */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}.d5{transition-delay:.30s}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:48px 32px;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;align-items:end}
.f-brand{display:flex;align-items:center;gap:10px}
.f-brand .brand-mark{width:20px;height:16px}
.f-brand span{font-size:13px;font-weight:400;color:#fff}.f-brand b{font-weight:700}
.f-meta{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;color:#909090;text-transform:uppercase;text-align:center}
.f-contact{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;color:#8a8a8a;text-transform:uppercase;text-align:right}
.f-contact a{color:#fff;text-decoration:none}

/* WhatsApp flotante */
#waf{position:fixed;bottom:24px;right:24px;z-index:800;width:48px;height:48px;background:#fff;display:grid;place-items:center;text-decoration:none;border:1px solid #fff;transition:background .2s,transform .2s}
#waf:hover{background:#000;transform:translateY(-2px)}
#waf:hover svg{color:#fff}
#waf svg{color:#000;transition:color .2s}

/* CTA secundario por email */
.cta-alt{display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9a9a9a;text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:3px;transition:color .2s,border-color .2s}
.cta-alt:hover{color:#fff;border-color:#fff}

/* ACCESIBILIDAD / ROBUSTEZ */
:focus-visible{outline:2px solid #fff;outline-offset:3px}
html:not(.js) .reveal{opacity:1;transform:none}

/* RESPONSIVE — nav móvil + footer (compartido) */
@media(max-width:900px){
  #nav{padding:0 20px}
  #nav-toggle{display:grid;place-items:center}
  .nav-links{position:fixed;left:0;right:0;top:56px;flex-direction:column;gap:0;align-items:stretch;background:rgba(0,0,0,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:8px 20px 16px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
  .nav-links.open{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{padding:14px 0;font-size:13px;border-bottom:1px solid var(--border)}
  .nav-links li:last-child a{border-bottom:none}
  /* dropdown en móvil: submenú expandido inline */
  .nav-dd{display:block}
  .nav-dd-btn{width:100%;text-align:left;padding:14px 0;font-size:13px;border-bottom:1px solid var(--border);justify-content:space-between}
  .nav-dd-menu{position:static;opacity:1;transform:none;pointer-events:auto;background:none;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0 0 0 16px;min-width:0}
  .nav-dd-menu a{padding:12px 0}
  .nav-dd-menu .ddd{display:none}
  footer{grid-template-columns:1fr;text-align:left;gap:20px}
  .f-meta,.f-contact{text-align:left}
}

/* PREFERS-REDUCED-MOTION (base) */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
}