/* ══════════════════════════════════════════════════════════════════════════
   Kovr Labs · kovrlabs.ai · KOVR-ID-COL-001
   Hoja única de estilo. Dueño único de los tokens de marca: si un color, una
   familia tipográfica o un componente cambia, cambia AQUÍ y en ningún otro
   lugar. Las páginas solo añaden lo que es exclusivamente suyo.

   Paper base · Navy estructural · Gold único de marca.
   Regla de los tres golds (canon §2 y §7): Gold es GRÁFICO sobre claros — jamás
   texto; Gold Deep solo texto grande sobre claros; Gold Soft texto sobre Navy.
   El corte K-2 es intocable: el arte gobierna la forma; los tokens el color.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografía autoalojada ────────────────────────────────────────────────
   Subconjunto latino servido desde el propio origen. Sin Google Fonts:
   ninguna IP de visitante viaja a un tercero — coherente con el aviso de
   privacidad, que declara cero herramientas de terceros. */
@font-face{
  font-family:'Geist';src:url('/fonts/geist-var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Geist Mono';src:url('/fonts/geist-mono-var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';src:url('/fonts/instrument-serif.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --navy:#0F1B2D; --navy-2:#16263D; --paper:#F5F1E8; --gold:#B8942F; --gold-soft:#E4C877; --gold-deep:#8A6D22;
  --ink:#141B26; --t2:#4A4438; --t3:#8A8577; /* t3 solo gráfico: 3.3:1 sobre Paper, nunca texto */
  --line:rgba(15,27,45,.14); --line-strong:rgba(15,27,45,.28);
  --card:#FBF9F3; --sand:#EFEAE0;
  --dk-1:rgba(245,241,232,.86); --dk-2:rgba(245,241,232,.62); --dk-line:rgba(245,241,232,.13);
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --head-h:70px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,header :focus-visible,footer :focus-visible{outline-color:var(--gold-soft)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ── Movimiento de entrada ─────────────────────────────────────────────────
   El titular anima SOLO transform. Si arrancara en opacity:0, Chrome lo
   descarta como candidato a LCP y la métrica se va a un elemento secundario:
   medido, 840 ms sobre un dato de la banda contra 736 ms sobre el titular. */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .62s cubic-bezier(.22,.7,.3,1) both}
  .rise-solid{animation:riseSolid .62s cubic-bezier(.22,.7,.3,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes riseSolid{from{transform:translateY(14px)}to{transform:none}}
}

/* ── Rejilla ── */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}

/* ── Tipografía de sistema ── */
.eyebrow{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t2);
  display:flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow::before{content:"";display:inline-block;width:18px;height:2px;background:var(--gold);flex:0 0 auto}
.eyebrow.on-navy{color:var(--dk-1)}
.eyebrow.on-navy::before{background:var(--gold-soft)}
.lede{max-width:62ch;color:var(--t2);font-size:16.5px}
.lede.on-navy{color:var(--dk-1)}

/* ── Salto al contenido ── */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:var(--navy);
  font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:12px 20px;text-decoration:none}
.skip:focus{left:0}

/* ── Encabezado ───────────────────────────────────────────────────────────
   Adherido al borde superior: en un documento largo la navegación no debe
   perderse. Menú móvil 100% CSS mediante :target — sin una línea de
   JavaScript, y se cierra solo al elegir un destino. */
header{background:var(--navy);color:var(--paper);position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--dk-line)}
.topbar{display:flex;align-items:center;gap:14px;height:var(--head-h)}
.lockup{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.lockup img{display:block;height:36px;width:auto}

#menu{margin-left:auto;display:flex;gap:8px;align-items:center}
#menu a{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--dk-2);padding:9px 11px;border-radius:2px;border:1px solid transparent;
  transition:color .18s ease,background .18s ease,border-color .18s ease}
#menu a:hover,#menu a:focus-visible{color:var(--paper);background:rgba(245,241,232,.07)}
#menu a[aria-current="page"]{color:var(--paper);border-color:var(--dk-line)}
/* La acción principal también vive en la barra (patrón de Handle y Bdeo) */
#menu a.nav-cta{margin-left:8px;background:var(--gold);color:var(--navy);border-color:var(--gold);padding:10px 16px}
#menu a.nav-cta:hover,#menu a.nav-cta:focus-visible{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--navy)}

.burger{display:none;margin-left:auto;width:46px;height:46px;flex:0 0 auto;
  align-items:center;justify-content:center;border:1px solid rgba(245,241,232,.28);border-radius:3px;
  text-decoration:none;color:var(--paper)}
.burger:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.burger svg{display:block;width:20px;height:20px}

/* ── Botones ── */
.btn{display:inline-block;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:15px 26px;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.gold:hover{background:var(--gold-soft)}
.btn.line{border-color:rgba(245,241,232,.42);color:var(--paper)}
.btn.line:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.btn.navy{background:var(--navy);color:var(--paper)}
.btn.navy:hover{background:var(--navy-2)}
.btn.ink{border-color:var(--line-strong);color:var(--ink)}
.btn.ink:hover{border-color:var(--gold);background:var(--card)}
.cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}

/* ── Tarjetas ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:28px 26px}
.card h3{font:600 15px var(--sans);margin:12px 0 8px}
.card p{font-size:14.5px;color:var(--t2)}
.tag{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t2);
  display:inline-flex;align-items:center;gap:8px}
.tag::before{content:"";display:inline-block;width:12px;height:2px;background:var(--gold)}

/* ── Pie ── */
footer{background:var(--navy);color:var(--dk-2);padding:34px 0 42px;border-top:1px solid var(--dk-line)}
footer .row{display:flex;gap:12px 26px;flex-wrap:wrap;align-items:center;
  font:400 12.5px var(--mono);letter-spacing:.04em}
footer a{color:rgba(245,241,232,.78);text-decoration:none;border-bottom:1px solid rgba(245,241,232,.25);
  padding-bottom:1px}
footer a:hover{color:var(--paper);border-bottom-color:var(--gold-soft)}
footer img{display:block;height:22px;width:auto;opacity:.85}
footer .push{margin-left:auto}

/* ── Páginas de documento (nosotros · contacto · privacidad · 404) ── */
.doc{padding:60px 0 90px}
.doc h1{font:400 clamp(30px,4.4vw,44px)/1.12 var(--serif);margin:0 0 10px}
.doc .meta{font:500 12px var(--mono);letter-spacing:.06em;color:var(--t2);margin-bottom:38px}
.doc h2{font:400 24px var(--serif);margin:44px 0 12px;padding-top:24px;border-top:1px solid var(--line)}
.doc p{color:var(--t2);margin:10px 0}
.doc ul{margin:10px 0 10px 20px}
.doc li{color:var(--t2);margin:6px 0}
.doc b{color:var(--ink);font-weight:600}
.doc a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(184,148,47,.5)}
.doc a:hover{border-bottom-color:var(--gold)}
.box{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:3px;padding:18px 22px;margin:20px 0}
.mail{font-family:var(--mono);font-size:14.5px}

/* ── Adaptación móvil ─────────────────────────────────────────────────── */
@media (max-width:860px){
  :root{--head-h:62px}
  .wrap{padding:0 20px}
  .burger{display:inline-flex}
  /* El panel se despliega FIJO bajo la barra: el encabezado nunca crece, la
     página nunca salta y el menú se cierra solo al elegir un destino. */
  /* scroll-margin gigante: al activarse :target el navegador calcula un
     destino negativo, lo acota a la posición actual y NO desplaza la página. */
  #menu{display:none;position:fixed;left:0;right:0;top:calc(var(--head-h) + 1px);
    scroll-margin:100vh 0;
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:2px 0 8px;
    background:var(--navy);border-bottom:1px solid var(--gold);
    box-shadow:0 22px 38px rgba(6,12,22,.45);z-index:60;
    max-height:calc(100vh - var(--head-h) - 1px);
    max-height:calc(100dvh - var(--head-h) - 1px);overflow-y:auto;overscroll-behavior:contain}
  #menu:target{display:flex}
  /* Telón: un toque fuera del panel lo cierra. Empieza bajo la barra para no
     tapar el botón de cerrar. Fuera del orden de tabulación. */
  .scrim{display:none;position:fixed;left:0;right:0;bottom:0;top:calc(var(--head-h) + 1px);
    z-index:55;background:rgba(6,12,22,.55)}
  #menu:target ~ .scrim{display:block}
  #menu a{padding:16px 20px;font-size:12.5px;border-radius:0;
    border-bottom:1px solid rgba(245,241,232,.08)}
  #menu a:last-child{border-bottom:none}
  #menu a.nav-cta{margin:10px 20px 6px;padding:15px 20px;text-align:center;border-radius:2px}
  /* Los botones van ANTES del menú en el DOM para que «cerrar» sea lo primero
     que alcanza el teclado con el panel abierto; :has() resuelve el estado. */
  .burger.close{display:none}
  .topbar:has(#menu:target) .burger.open{display:none}
  .topbar:has(#menu:target) .burger.close{display:inline-flex;border-color:var(--gold-soft);color:var(--gold-soft)}
  .doc{padding:44px 0 72px}
}

/* ── Impresión ─────────────────────────────────────────────────────────────
   privacidad.html lleva folio (KVR-LEG-001) y un área de cumplimiento la va a
   imprimir o a guardar como PDF para su expediente de proveedor. Se imprime como
   documento: fondo blanco, sin cromo de navegación y con las URLs a la vista. */
@media print{
  :root{--paper:#fff;--card:#fff;--sand:#fff}
  html,body{background:#fff!important;color:#000;font-size:11pt}
  header,footer,.skip,.burger,.scrim,#menu,.cta,.btn{display:none!important}
  header{position:static!important}
  main,.wrap,.wrap.narrow{max-width:none;padding:0;margin:0}
  .doc{padding:0}
  .doc h1{font-size:22pt;margin-bottom:6pt}
  .doc h2{font-size:13pt;margin:16pt 0 6pt;padding-top:8pt;border-top:1px solid #999;
    break-after:avoid;page-break-after:avoid}
  .doc p,.doc li{color:#000;orphans:3;widows:3}
  .doc .meta{color:#333}
  .box{border:1px solid #999;border-left:2px solid #000;background:#fff;break-inside:avoid;page-break-inside:avoid}
  a{color:#000;border-bottom:none;text-decoration:underline}
  /* La URL viaja con el enlace: en papel, «consulta el aviso» no dice a dónde apunta */
  .doc a[href^="/"]::after{content:" (https://kovrlabs.ai" attr(href) ")";font-size:9pt;color:#444}
  .doc a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .doc a[href^="mailto"]::after{content:none}
}