/* ============================================================================
   base.css — Metal Zero
   Nace el 2026-09-21 (diseño Arquitectura/2026-09-20-web-metal-zero-multilinea.md,
   §3.4) con exactamente lo que ya estaba duplicado entre index.html y
   diagnostico.html y que ya había empezado a divergir sin que nadie lo
   decidiera (§2.3 del diseño). Lo usan las páginas NUEVAS (agilidad.html,
   paginas-web.html) — index.html, diagnostico.html, privacidad.html y 404.html
   NO se tocan y siguen con su <style> inline propio (Escalón 2, D7, es
   posterior y opcional).
   ============================================================================ */

:root{
  --carbon:#0B0F19; --carbon-2:#0E131D; --carbon-3:#090C14; --panel:#141A26; --panel-2:#10151F;
  --gold:#E8B84B; --gold-2:#C99A33; --gold-deep:#A9791F; --gold-soft:rgba(232,184,75,.10);
  /* --muted-2 aclarado de #6B7585 a #7C8695: el anterior daba 4,11:1 sobre --carbon,
     bajo el mínimo AA de 4,5:1 para texto chico. Ahora da 5,20:1. */
  --text:#EEF2F8; --muted:#98A1B1; --muted-2:#7C8695; --line:#212938; --line-2:#2C3645;
  --wa:#25D366;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* la nav es fixed (~69px): sin esto toda ancla cae tapada debajo */
section[id]{scroll-margin-top:88px}
body{font-family:'Inter',system-ui,sans-serif;background:var(--carbon);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif}
a{text-decoration:none;color:inherit}
img{display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
/* variante angosta como modificador, no como override: las páginas que la
   necesiten agregan la clase, no pisan .wrap por encima en su <style> propio */
.wrap.wrap-angosto{max-width:760px}

/* ===== botones ===== */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans';font-weight:700;font-size:15px;
  color:#1a1206;background:linear-gradient(180deg,var(--gold),var(--gold-2));border-radius:999px;padding:14px 28px;
  transition:.2s;box-shadow:0 10px 30px rgba(232,184,75,.25);cursor:pointer;border:none}
.btn:hover{filter:brightness(1.07);transform:translateY(-2px)}
.btn svg{width:18px;height:18px}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold-2);box-shadow:none}
.btn.ghost:hover{background:var(--gold-soft)}

/* ===== nav ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(11,15,25,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(232,184,75,.12)}
/* Historia del ancho del nav: "Cómo trabajamos" (+70px) lo hizo desbordar y
   primero se compactaron los espacios (gap 16/18, fuente 13px); el 31/08 DS
   decidió recortar a 5 links y los espacios cómodos volvieron. */
.nav-in{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:26px}
.nav-brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.nav-brand img{height:40px;width:auto;border-radius:8px;border:1px solid rgba(232,184,75,.4)}
.nav-brand span{font-family:'Plus Jakarta Sans';font-weight:800;font-size:15px;letter-spacing:.22em;color:var(--gold)}
/* Nav minimalista (marca + "Volver al inicio" + CTA), patrón de diagnostico.html:
   páginas que no llevan nav-links/burger/social lo usan tal cual. NO lleva
   margin-right:auto propio: el de .nav-brand ya empuja todo lo que sigue hacia
   la derecha, y sumarle uno acá partiría el espacio libre en dos y correría
   este link hacia el centro en vez de dejarlo pegado al logo. */
.nav-back{font-size:13px;color:var(--muted);font-weight:500;transition:.15s;white-space:nowrap}
.nav-back:hover{color:var(--gold)}
.nav-links{display:flex;gap:26px;font-size:13.5px;color:var(--muted);font-weight:500}
.nav-links a{position:relative;transition:.15s;white-space:nowrap;padding-bottom:2px}
.nav-links a:hover{color:var(--gold)}
/* subrayado dorado: entra deslizándose en hover y queda fijo en la sección
   activa (clase .act que pone el scrollspy del JS) */
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.act{color:var(--gold)}
.nav-links a.act::after{transform:scaleX(1)}
@media (max-width:1180px){.nav-links{gap:17px;font-size:13px}.nav-in{gap:20px}}
/* Caja de 28x28: el minimo de WCAG 2.5.8 es 24 y antes eran 19x23. El icono
   sigue siendo de 19px centrado. gap:0 a proposito: 3 cajas de 28 miden 84px,
   un pixel MENOS que los 19px+gap de antes, asi la nav no gana ancho — a 1440px
   ya venia justo al limite de su contenedor de 1120 y cualquier pixel de mas
   desalinea el CTA con el contenido de la pagina. */
.nav-social{display:flex;align-items:center;gap:0}
.nav-social a{color:var(--muted);transition:.15s;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center}
.nav-social a:hover{color:var(--gold)}
.nav-social svg{width:19px;height:19px}
.nav-cta{font-size:13px;padding:10px 20px;white-space:nowrap}
.nav-cta .cta-short{display:none}
.nav-burger{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;color:var(--gold);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;padding:0}
.nav-burger svg{width:22px;height:22px}
.nav-links .only-m{display:none}
/* Hasta 1099px va el menu compacto. Estaba en 840 y la nav completa no cabia:
   de 841 a 1039px el CTA quedaba fuera de pantalla (185px afuera a 841px, 26px
   a 1000px) y con overflow-x:hidden era inalcanzable — el mismo bug que A3, en
   la banda de arriba del breakpoint. 1024px (tablet horizontal y ventana de
   laptop comun) caia justo adentro. */
/* A 320-374px el CTA del nav quedaba cortado (borde derecho en 350px con
   overflow-x:hidden = inalcanzable). Hallazgo de la auditoría del 31/08,
   PREEXISTENTE en producción (ctaRight 351 a 320px). Ocultar el wordmark
   libera el ancho justo — mismo recurso que usa el nav de /diagnostico.
   ⚠️ El umbral es 560px, no 374: con el nav minimalista (marca + "Volver al
   inicio" + CTA de texto libre, ver .nav-back arriba) el wordmark solo hasta
   374 no alcanza — medido en vivo el 2026-09-21 en /agilidad y /paginas-web,
   quedaba una banda de 375 a ~490px (anchos de celular reales: 375, 390, 393,
   412, 414, 430) donde el wordmark volvía a aparecer y el CTA volvía a
   quedar fuera de pantalla (hasta 39px, inalcanzable). Un solo umbral de
   560px —igual al de diagnostico.html— cierra las dos bandas de una vez. */
@media (max-width:560px){
  .nav-brand span{display:none}
  .nav-cta span{display:none}
  .nav-cta{padding:10px 13px}
}
@media (max-width:1099px){
  .nav-social{display:none}
  .nav-burger{display:flex}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(9,12,20,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(232,184,75,.2);padding:6px 0 10px}
  nav.open .nav-links{display:flex}
  .nav-links a{padding:13px 26px;font-size:15px}
  /* en el menú desplegable los links son filas apiladas: ahí el subrayado no aplica */
  .nav-links a::after{display:none}
  .nav-links .only-m{display:block}
  .nav-cta{padding:10px 14px}
  .nav-cta .cta-full{display:none}
  .nav-cta .cta-short{display:inline}
}

/* ===== footer ===== */
footer{background:var(--carbon-3);border-top:1px solid var(--line);padding:44px 0}
.foot-in{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.foot-brand img{height:38px;width:auto;border-radius:8px;border:1px solid rgba(232,184,75,.35)}
.foot-brand div b{font-family:'Plus Jakarta Sans';font-weight:800;font-size:13px;letter-spacing:.2em;color:var(--gold);display:block}
.foot-brand div span{font-size:11.5px;color:var(--muted-2)}
.foot-social{display:flex;gap:16px}
.foot-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.2s}
.foot-social a:hover{color:var(--gold);border-color:var(--gold-2)}
.foot-social svg{width:18px;height:18px}
.foot-nap{width:100%;border-top:1px solid var(--line);margin-top:26px;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13.5px;color:var(--muted)}
.foot-nap a{color:var(--gold);transition:.15s}
.foot-nap a:hover{filter:brightness(1.15)}
.foot-copy{width:100%;margin-top:16px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot-copy a{color:var(--gold-2);transition:.15s}
.foot-copy a:hover{color:var(--gold)}

/* Accesibilidad: quien pidió menos movimiento ve todo quieto y visible. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .btn:hover{transform:none}
}