/* Cocozi — sistema compartido por las páginas legales y el 404.
   Mismos tokens que index.html. La cara del logo (#080B2C) no cambia
   entre temas; todo lo demás invierte. */

:root{
  --cara:#080B2C; --sobre-cara:#E8E6E1; --vivo:#FF3B30;
  --display:'Bricolage Grotesque',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r:12px; --r-sm:8px; --ease:cubic-bezier(.4,0,.2,1);

  color-scheme:light;
  --pagina:#EDEAE4; --sup:#F8F6F2; --sup-2:#E3DFD7;
  --tinta:#080B2C; --tinta-70:#41465F; --tinta-45:#65697D;
  --linea:rgba(8,11,44,.12); --linea-2:rgba(8,11,44,.24);
  --sombra-1:0 1px 2px rgba(8,11,44,.05),0 6px 16px rgba(8,11,44,.055);
  --sombra-2:0 2px 4px rgba(8,11,44,.06),0 14px 34px rgba(8,11,44,.10);
  --anillo:rgba(217,138,11,.55); --acento:#D98A0B; --acento-txt:#8A5607;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    color-scheme:dark;
    --pagina:#131520; --sup:#202231; --sup-2:#0D0E17;
    --tinta:#E8E6E1; --tinta-70:rgba(232,230,225,.70); --tinta-45:rgba(232,230,225,.46);
    --linea:rgba(232,230,225,.13); --linea-2:rgba(232,230,225,.26);
    --sombra-1:0 1px 2px rgba(0,0,0,.30),0 6px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(232,230,225,.06);
    --sombra-2:0 2px 6px rgba(0,0,0,.36),0 16px 38px rgba(0,0,0,.42),inset 0 1px 0 rgba(232,230,225,.06);
    --anillo:rgba(255,180,61,.60); --acento:#FFB43D; --acento-txt:#FFB43D;
  }
}
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --pagina:#131520; --sup:#202231; --sup-2:#0D0E17;
  --tinta:#E8E6E1; --tinta-70:rgba(232,230,225,.70); --tinta-45:rgba(232,230,225,.46);
  --linea:rgba(232,230,225,.13); --linea-2:rgba(232,230,225,.26);
  --sombra-1:0 1px 2px rgba(0,0,0,.30),0 6px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(232,230,225,.06);
  --sombra-2:0 2px 6px rgba(0,0,0,.36),0 16px 38px rgba(0,0,0,.42),inset 0 1px 0 rgba(232,230,225,.06);
  --anillo:rgba(255,180,61,.60); --acento:#FFB43D; --acento-txt:#FFB43D;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--pagina);color:var(--tinta);
  font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease),color .3s var(--ease);
}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--tinta);color:var(--pagina)}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--pagina),0 0 0 4px var(--anillo)}

/* ── Nav ── */
.nav{
  position:sticky;top:0;z-index:50;background:var(--pagina);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.nav.scrolled{border-bottom-color:var(--linea);box-shadow:var(--sombra-1)}
.nav-in{max-width:820px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:30px;height:30px;transition:transform .3s var(--ease)}
.brand:hover img{transform:rotate(-6deg) scale(1.06)}
.brand span{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:11px}
.nav-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-45)}

/* ── Conmutador de tema ── */
.seg{
  position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);
  background:var(--sup-2);border:1px solid var(--linea);border-radius:var(--r-sm);padding:3px;width:112px;
}
.seg-pill{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/var(--n));
  border-radius:6px;background:var(--sup);box-shadow:var(--sombra-1);
  transform:translateX(calc(var(--i,0) * 100%));
  transition:transform .3s var(--ease);pointer-events:none;
}
.seg-btn{
  position:relative;z-index:1;background:none;border:none;cursor:pointer;padding:7px 10px;
  color:var(--tinta-45);border-radius:6px;display:flex;align-items:center;justify-content:center;
  transition:color .2s var(--ease);
}
.seg-btn:hover{color:var(--tinta-70)}
.seg-btn[aria-checked="true"]{color:var(--acento-txt)}
.seg-btn svg{width:14px;height:14px}

/* ── Contenido ── */
main{max-width:820px;margin:0 auto;padding:56px 24px 88px}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-45);display:flex;align-items:center;gap:10px;margin-bottom:16px;
}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--linea);max-width:72px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,5vw,46px);line-height:1.03;letter-spacing:-.03em;margin-bottom:12px}
.meta{font-family:var(--mono);font-size:12px;color:var(--tinta-45);line-height:1.9;padding-bottom:30px;border-bottom:1px solid var(--linea);margin-bottom:34px}
h2{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.015em;margin:42px 0 12px;scroll-margin-top:84px}
h3{font-family:var(--display);font-weight:700;font-size:16px;margin:24px 0 8px}
p{color:var(--tinta-70);margin-bottom:14px}
strong{color:var(--tinta);font-weight:600}
ul{list-style:none;margin:0 0 16px}
li{color:var(--tinta-70);padding:5px 0 5px 18px;position:relative}
li::before{content:'';position:absolute;left:0;top:1.05em;width:7px;height:1.5px;border-radius:2px;background:var(--tinta-45)}
main a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--linea-2)}
main a:hover{color:var(--acento-txt);text-decoration-color:var(--acento)}

.card{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra-1);padding:22px 24px;margin:26px 0}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card-cara{
  background:var(--cara);color:var(--sobre-cara);border-color:transparent;
  box-shadow:var(--sombra-2),inset 0 0 0 1px rgba(232,230,225,.13);
}
.card-cara p{color:rgba(232,230,225,.78)}
.card-cara strong{color:var(--sobre-cara)}
.card-cara a{color:var(--sobre-cara);text-decoration-color:rgba(232,230,225,.35)}
.card-cara a:hover{text-decoration-color:var(--sobre-cara)}

/* ── Índice ── */
.toc{background:var(--sup-2);border:1px solid var(--linea);border-radius:var(--r);padding:18px 22px;margin:0 0 40px}
.toc-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-45);margin-bottom:11px}
.toc ol{list-style:none;counter-reset:t;columns:2;column-gap:26px}
.toc li{counter-increment:t;padding:4px 0 4px 26px;break-inside:avoid}
.toc li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:4px;width:auto;height:auto;background:none;font-family:var(--mono);font-size:11px;color:var(--tinta-45)}
.toc a{text-decoration:none;font-size:14px;color:var(--tinta-70)}
.toc a:hover{color:var(--tinta)}

/* ── Tabla de terceros ── */
.tabla{width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:14px}
.tabla th,.tabla td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-45);font-weight:400}
.tabla td{color:var(--tinta-70)}
.tabla td:first-child{color:var(--tinta);font-weight:500;white-space:nowrap}
.tabla-wrap{overflow-x:auto}

/* ── Botones ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border-radius:var(--r);border:1px solid transparent;
  font-size:14.5px;font-weight:500;cursor:pointer;text-decoration:none;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease);
}
.btn:active{transform:scale(.975)}
.btn-fill{background:var(--acento);color:#131520;box-shadow:var(--sombra-1);text-decoration:none}
.btn-fill:hover{filter:brightness(1.08);box-shadow:var(--sombra-2)}
.btn-line{border-color:var(--linea-2);color:var(--tinta);text-decoration:none}
.btn-line:hover{background:var(--tinta);color:var(--pagina);border-color:var(--tinta)}
.flecha{width:15px;height:15px;flex-shrink:0;transition:transform .22s var(--ease)}
.btn:hover .flecha{transform:translateX(3px)}

/* ── Footer ── */
.foot{border-top:1px solid var(--linea);padding:26px 0}
.foot-in{max-width:820px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot-links{display:flex;align-items:center;gap:16px;list-style:none;flex-wrap:wrap}
.foot-div{width:1px;height:11px;background:var(--linea-2);flex-shrink:0;padding:0}
.foot-div::before{display:none}
.foot-links li{padding:0}
.foot-links li::before{display:none}
.foot-links a{font-family:var(--mono);font-size:11.5px;color:var(--tinta-45);text-decoration:none}
.foot-links a:hover{color:var(--tinta)}
.foot p{font-family:var(--mono);font-size:11px;color:var(--tinta-45);margin:0}

/* ── 404 ── */
.err{max-width:820px;margin:0 auto;padding:110px 24px 130px;text-align:center}
.err-code{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--tinta-45);margin-bottom:18px}
.err h1{font-size:clamp(34px,6vw,60px);margin-bottom:14px}
.err p{font-size:17px;max-width:44ch;margin:0 auto 30px}
.err-btns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

@media(max-width:640px){
  main{padding:40px 20px 64px}
  .nav-in,.foot-in{padding:0 20px}
  .toc ol{columns:1}
  .nav-tag{display:none}
  .foot-in{flex-direction:column;text-align:center}
  .err{padding:74px 20px 90px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}