/* El marco del sitio público: la barra de arriba (marca, navegación y «Quiero
   aplicar»), los botones y el pie. Lo comparten las hojas de alto fijo de
   public/sitio/ y las páginas de lectura de la app (notas, legales), que lo
   montan desde lib/marco-sitio.mjs: un solo marco, y ninguna página vuelve a
   enlazar al sitio anterior por llevar su propia copia.

   Las variables se declaran en la barra y el pie, no en :root: en las páginas
   de lectura convive con main.css, que tiene su propio --margen y su --mono. */
@font-face{font-family:Instrument;src:url('/upgrade/assets/instrument-sans.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:JetBrains;src:url('/upgrade/assets/jetbrains-mono.woff2') format('woff2');font-weight:400 500;font-display:swap}

.barra,.pie,.boton,.enlace{
  --fondo:#0b0b0c;--tinta:#f1f0ec;--texto:#bdbbb5;--tenue:#7c7a75;--linea:#232325;
  --barra:64px;--margen:clamp(20px,5vw,72px);--mono:JetBrains,ui-monospace,monospace;
  font-family:Instrument,system-ui,sans-serif;
}

/* ── Barra ─────────────────────────────────────────────────────────── */
.barra{
  position:sticky;top:0;z-index:10;min-height:var(--barra);box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-inline:var(--margen);border-bottom:1px solid var(--linea);
  color:var(--tinta);background:var(--fondo);
}
.marca{display:flex;align-items:center;gap:10px;color:var(--tinta)}
/* La marca: la botella de Klein a línea fina. El grosor va en
   unidades del dibujo (23 de 624 ≈ 1,5 px a 40 px) y no con non-scaling-stroke,
   que rompe el pathLength con el que se anima el trazo. Al señalarla, la
   botella se traza de nuevo. */
.marca svg{width:27px;height:auto;display:block;overflow:visible}
.marca svg path{stroke-width:34;stroke-dasharray:1;stroke-dashoffset:0}
.marca:hover svg path,.marca:focus-visible svg path{animation:trazar 1.1s cubic-bezier(.6,0,.2,1)}
.marca:hover svg path+path,.marca:focus-visible svg path+path{animation-delay:.12s;animation-fill-mode:backwards}
@keyframes trazar{from{stroke-dashoffset:1}}
.marca__nombre{font-size:17px;letter-spacing:.01em;font-weight:400;color:var(--tinta)}
.marca__nombre b{font-weight:500}
.nav{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
/* Las secciones: solo el texto, que se aclara en la actual y en la señalada, y
   un trazo corto pegado bajo la palabra que se desliza de una a otra (sitio.js
   lo crea y lo mueve; sin JS, la sección actual lleva el suyo fijo). */
.nav__enlaces{display:flex;gap:clamp(20px,3vw,40px);position:relative}
.nav__enlaces a{
  position:relative;font-size:14px;letter-spacing:.04em;color:var(--tinta);opacity:.55;
  transition:opacity .35s;
}
.nav__enlaces a:hover,.nav__enlaces a[aria-current],.nav__enlaces a.bajo{opacity:1}
.nav__enlaces.viva a[aria-current]:not(.bajo){opacity:.55}
.nav__enlaces:not(.viva) a[aria-current]::after{
  content:'';position:absolute;left:50%;bottom:-5px;width:14px;height:1px;margin-left:-7px;background:var(--tinta);
}
.nav__trazo{
  position:absolute;left:0;bottom:-5px;width:14px;height:1px;background:var(--tinta);pointer-events:none;
  opacity:0;transition:transform .45s cubic-bezier(.65,0,.35,1),opacity .3s;
}
.nav__trazo.puesto{opacity:1}
.nav__menu{display:none;width:44px;height:44px;position:relative}
.nav__menu span{position:absolute;left:12px;right:12px;height:1px;background:var(--tinta);transition:transform .25s}
.nav__menu span:first-child{top:18px}.nav__menu span:last-child{top:25px}
.nav__menu[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__menu[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ── Botones y enlaces ─────────────────────────────────────────────── */
.boton{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 22px;
  border:1px solid var(--tinta);color:var(--tinta);font-size:14px;letter-spacing:.04em;
  transition:background .2s,color .2s;white-space:nowrap;
}
.boton:hover,.boton[aria-current]{background:var(--tinta);color:var(--fondo)}
.boton--barra{min-height:38px;padding:0 18px}
.boton--lleno{background:var(--tinta);color:var(--fondo)}
.boton--lleno:hover{background:transparent;color:var(--tinta)}
.boton:disabled{opacity:.5;cursor:default}
.enlace{
  display:inline-flex;gap:8px;align-items:center;color:var(--tinta);font-size:14px;letter-spacing:.04em;
  border-bottom:1px solid var(--linea);padding-bottom:3px;transition:border-color .2s;
}
.enlace:hover{border-color:var(--tinta)}

/* ── Pie ───────────────────────────────────────────────────────────── */
.pie{
  min-height:var(--pie,44px);box-sizing:border-box;
  display:flex;align-items:center;gap:28px;padding-inline:var(--margen);border-top:1px solid var(--linea);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);
}
.pie a{margin-left:auto}
.pie a:hover{color:var(--tinta)}

/* Teléfono: el menú se abre a pantalla completa bajo la barra. */
@media (max-width:760px){
  .barra,.pie,.nav__enlaces{--barra:58px}
  .nav__enlaces{
    position:fixed;inset:var(--barra) 0 0 0;z-index:9;flex-direction:column;gap:0;
    padding:24px var(--margen);background:var(--fondo);
    visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s .2s;
  }
  .nav__enlaces a,.nav__enlaces.viva a[aria-current]:not(.bajo){font-size:clamp(28px,8vw,40px);letter-spacing:-.01em;padding:14px 0;border-bottom:1px solid var(--linea);opacity:.55}
  .nav__enlaces a::after{display:none}
  .nav__enlaces a[aria-current],.nav__enlaces.viva a[aria-current]:not(.bajo){opacity:1}
  .nav__trazo{display:none}
  .nav.abierta .nav__enlaces{visibility:visible;opacity:1;transition:opacity .2s}
  .nav__menu{display:block;margin-right:-10px}
  .nav{gap:8px}
  .boton--barra{min-height:36px;padding:0 14px;font-size:13px}
  .marca svg{width:25px}
  .marca__nombre{font-size:16px}
  .pie{gap:16px;font-size:10px}
  .pie span:nth-child(2){display:none}
}

/* Al irse a otra página (sitio.js), una línea de luz barre la pantalla. */
html.saliendo body::after{
  content:'';position:fixed;left:0;right:0;top:0;height:1px;z-index:30;pointer-events:none;
  background:linear-gradient(90deg,transparent,#f1f0ec 25%,#f1f0ec 75%,transparent);
  box-shadow:0 0 22px 3px rgba(241,240,236,.28);
  animation:barrer .34s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes barrer{from{transform:translateY(64px);opacity:0}15%{opacity:1}to{transform:translateY(100dvh);opacity:.6}}

@media (prefers-reduced-motion:reduce){
  .marca svg path{animation:none!important}
  .nav__trazo{transition:opacity .2s}
}

/* En las páginas de lectura de la app, main.css va debajo. Tres ajustes: ya no
   hay raíl lateral (main.css le reserva hueco con --rail), el suelo es el mismo
   casi negro del sitio y sin trama, y sus reglas de enlaces y botones no llegan
   a la barra ni al pie. */
:root:has(.barra){--rail:0px;--paper:#0b0b0c;--trama:none}
.barra a,.pie a{text-decoration:none}
.nav__menu{background:none;border:0;padding:0;border-radius:0;color:inherit;cursor:pointer}