/* ═══════════════════════════════════════════════════════════════════════════
   NAC LITE — hoja común
   Identidad literal del manual de marca de Negative Archive Capsule
   (~/Proyectos/NAC/Mac/manual-de-marca.html). Nada de negro puro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografías autoalojadas (sin Google Fonts: ni dependencia ni RGPD) ────
   Bebas Neue es EL MISMO ARCHIVO que embarca la app de escritorio
   (~/Proyectos/NAC/Mac/fonts/BebasNeue-400.woff2, md5 1a662f8f…): el corte del
   manual, no el subconjunto de Google, que tiene otro dibujo. Sin unicode-range
   a propósito, para que no se salte glifos con acentos.
   El cuerpo es la pila del manual (Helvetica Neue → Helvetica → Arial), que no
   necesita archivo. IBM Plex Mono sí va autoalojada: el manual la pide y en la
   app cae a Menlo por no ir embarcada. */
@font-face{
  font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/BebasNeue-400.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Paleta del manual, literal */
  --vino:#722F37;          /* principal */
  --vino-claro:#8E3D46;
  --crema:#F8F6F1;         /* fondo */
  --tinta:#4A1F24;         /* vinotinto oscuro · texto */
  --sombra:#EFECE4;        /* crema sombra · superficies */
  --filete:#DCD5C9;
  --apunte:#8A7F76;
  /* Oscuros de la línea Lite: tinta cálida, NUNCA negro puro */
  --oscuro:#241417;
  --oscuro-2:#2E1A1E;
  --oscuro-3:#3A2226;
  --sobre-oscuro:#EFE9E2;
  --apunte-oscuro:#A99A93;

  --display:'Bebas Neue','Avenir Next Condensed','Haettenschweiler',sans-serif;
  --texto:'Helvetica Neue',Helvetica,Arial,-apple-system,BlinkMacSystemFont,sans-serif;
  --dato:'IBM Plex Mono',Menlo,ui-monospace,Consolas,monospace;
  --max:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
/* Los controles de formulario NO heredan la tipografía: sin esto, los botones
   del minilab y el menú de móvil caían a Arial. */
button,input,select,textarea{font-family:inherit}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--texto);background:var(--crema);color:var(--tinta);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.wrap.estrecho{max-width:780px}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:.95;text-transform:uppercase}
a{color:var(--vino)}
img,svg,canvas{max-width:100%}
::selection{background:var(--vino);color:var(--crema)}
:focus-visible{outline:2px solid var(--vino);outline-offset:2px}
.mono{font-family:var(--dato);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.saltar{position:absolute;left:-9999px;top:0;background:var(--vino);color:var(--crema);padding:10px 16px;z-index:200}
.saltar:focus{left:0}

/* ── Barra ────────────────────────────────────────────────────────────────── */
header.barra{position:sticky;top:0;z-index:100;background:var(--crema);border-bottom:1px solid var(--filete)}
.nav{display:flex;align-items:center;gap:26px;height:66px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;color:var(--vino)}
.logo svg{display:block;flex-shrink:0}
.logo-txt{font-family:var(--display);font-size:1.16rem;line-height:.82;letter-spacing:.02em;color:var(--tinta)}
.logo-txt small{display:block;font-family:var(--dato);font-size:.48rem;letter-spacing:.26em;color:var(--apunte);margin-top:4px;text-transform:uppercase}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-links a{font-family:var(--dato);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--tinta);opacity:.72;transition:.2s}
.nav-links a:hover{opacity:1;color:var(--vino)}
.nav-cta{background:var(--vino);color:var(--crema)!important;padding:10px 16px;opacity:1!important;font-weight:500}
.nav-cta:hover{background:var(--vino-claro)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--filete);color:var(--tinta);font-size:1.1rem;cursor:pointer;padding:6px 11px;line-height:1}

/* ── Selector de idioma ───────────────────────────────────────────────────── */
.idioma{display:flex;align-items:center;border:1px solid var(--filete);flex-shrink:0}
.idioma button{
  font-family:var(--dato);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 10px;background:transparent;border:none;color:var(--apunte);cursor:pointer;transition:.15s;
}
.idioma button:hover{color:var(--vino)}
.idioma button.on{background:var(--vino);color:var(--crema)}
.idioma button+button{border-left:1px solid var(--filete)}

/* ── Piezas ───────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--dato);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  padding:15px 24px;border:1px solid var(--vino);background:var(--vino);color:var(--crema);
  text-decoration:none;cursor:pointer;transition:.18s;
}
.btn:hover{background:var(--vino-claro);border-color:var(--vino-claro);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--vino)}
.btn.ghost:hover{background:var(--vino);color:var(--crema);transform:translateY(-1px)}
.btn.sobre-oscuro{border-color:#5A3B40;color:var(--sobre-oscuro);background:transparent}
.btn.sobre-oscuro:hover{background:var(--vino);border-color:var(--vino);color:var(--crema)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--vino);font-family:var(--dato);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--vino)}
section{padding:86px 0}
.sec-head{margin-bottom:44px;max-width:66ch}
.sec-num{font-family:var(--dato);font-size:.62rem;letter-spacing:.22em;color:var(--apunte);display:block;margin-bottom:14px;text-transform:uppercase}
.sec-head h2{font-size:clamp(2.1rem,4.4vw,3.4rem);margin-bottom:16px}
.sec-head p{font-size:1.02rem;line-height:1.65;color:#5E4348;max-width:58ch}

/* ── Pie ──────────────────────────────────────────────────────────────────── */
footer{background:var(--oscuro);color:var(--apunte-oscuro);padding:56px 0 28px}
.pie-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
.pie-grid h5{font-family:var(--dato);font-size:.58rem;letter-spacing:.18em;color:var(--sobre-oscuro);text-transform:uppercase;margin-bottom:16px;font-weight:500}
.pie-grid a,.pie-grid p{display:block;font-size:.82rem;color:var(--apunte-oscuro);text-decoration:none;margin-bottom:9px;line-height:1.55}
.pie-grid a:hover{color:var(--crema)}
/* `.pie-grid a` pisaba a `.logo` y lo dejaba en block: el símbolo se iba encima
   del texto en vez de a su lado. Se repite la regla con más peso. */
.pie-grid a.logo{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.pie-bajo{border-top:1px solid var(--oscuro-3);padding-top:20px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--dato);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase}
footer .logo-txt{color:var(--sobre-oscuro)}
footer .logo{color:var(--crema)}

/* ── Páginas de texto (legales) ───────────────────────────────────────────── */
.doc{padding:56px 0 76px}
.doc h1{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:10px}
.doc .fecha{font-family:var(--dato);font-size:.6rem;letter-spacing:.14em;color:var(--apunte);text-transform:uppercase;margin-bottom:38px;display:block}
.doc h2{font-size:1.35rem;margin:38px 0 12px;padding-top:20px;border-top:1px solid var(--filete)}
.doc h3{font-family:var(--texto);font-weight:700;text-transform:none;font-size:1rem;margin:22px 0 8px;letter-spacing:0}
.doc p,.doc li{font-size:.95rem;line-height:1.72;margin-bottom:12px;color:#4A2F33}
.doc ul,.doc ol{margin:0 0 16px 20px}
.doc li{margin-bottom:7px}
.doc table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:.88rem}
.doc th,.doc td{border:1px solid var(--filete);padding:10px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--sombra);font-family:var(--dato);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.doc .caja{background:var(--sombra);border-left:3px solid var(--vino);padding:18px 20px;margin:22px 0}
.doc .caja p:last-child{margin-bottom:0}
.doc .indice{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.doc .indice a{font-family:var(--dato);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid var(--filete);padding:7px 11px;color:var(--tinta)}
.doc .indice a:hover{border-color:var(--vino);color:var(--vino)}
.falta{background:#C0392B;color:#fff;padding:1px 7px;font-family:var(--dato);font-size:.72em;letter-spacing:.06em;white-space:nowrap}
/* Bloques que solo existen en la versión inglesa (los enseña i18n.js) */
.solo-en{display:none}

@media(max-width:900px){ .pie-grid{grid-template-columns:1fr 1fr} }
/* Con seis enlaces, el botón y el selector de idioma, la barra necesita ~800 px.
   Por debajo de eso el menú se pliega, o el selector se sale de la pantalla. */
@media(max-width:860px){
  .nav-links{position:absolute;top:66px;left:0;right:0;background:var(--crema);flex-direction:column;gap:0;padding:0;display:none;border-bottom:1px solid var(--filete)}
  .nav-links.abierto{display:flex}
  .nav-links a{padding:15px 28px;width:100%;border-top:1px solid var(--filete)}
  .nav-cta{text-align:center}
  .idioma{margin-left:auto}
  .burger{display:block;margin-left:10px}
  section{padding:58px 0}
  .wrap{padding:0 20px}
  .pie-grid{grid-template-columns:1fr}
}