@font-face{font-family:Jakarta;src:url('/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:Jakarta;src:url('/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Instrument;src:url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;--ink:var(--hn-texto);--muted:var(--hn-texto2);--link:var(--hn-enlace)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.7 Jakarta,system-ui,sans-serif;background:radial-gradient(700px 500px at 100% 0,rgba(var(--hn-lav-rgb),.35),transparent),var(--hn-champ)}
a{color:var(--link);text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--hn-violeta-boton);outline-offset:3px;border-radius:3px}
.cabecera{max-width:960px;margin:auto;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cabecera img{display:block;max-width:100%;height:auto}
.volver{font-size:.9rem;font-weight:700}
main{max-width:960px;margin:0 auto 60px;padding:36px clamp(20px,5vw,64px);background:var(--hn-panel-solido);border:1px solid var(--hn-neutro-linea);border-radius:24px;box-shadow:0 20px 60px rgba(var(--hn-sombra-rgb),.06)}
.ceja{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;color:var(--link);margin:0}
h1,h2{font-family:Instrument,Georgia,serif;font-weight:400;line-height:1.15}
h1{font-size:clamp(2.5rem,6vw,4.3rem);margin:.2em 0}
h2{font-size:2.2rem;margin:0 0 .6em}
h3{font-size:1.04rem;margin:1.4em 0 .3em}
p,li{max-width:74ch}
.intro{font-size:1.1rem;color:var(--muted)}
.aviso-afiliacion{padding:10px 14px;border-left:3px solid var(--link);background:var(--hn-superficie-suave);font-size:.88rem}
nav{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 12px}
nav a{padding:7px 12px;border:1px solid var(--hn-acento-borde-suave);border-radius:999px;text-decoration:none;font-weight:700;font-size:.84rem;background:var(--hn-superficie-suave)}
section{border-top:1px solid var(--hn-neutro-linea);padding-top:32px;margin-top:32px;scroll-margin-top:20px}
ul{padding-left:1.5em}
li+li{margin-top:.6em}
code{font-size:.95em;background:var(--hn-neutro-fondo);padding:.15em .35em;border-radius:4px}
.actualizacion{color:var(--muted);font-size:.85rem;margin-top:36px}
@media(max-width:640px){.cabecera{padding:16px}.cabecera img{width:125px}.volver{font-size:.78rem}main{border-radius:0;padding:28px 20px;margin-bottom:0}}

/* Guía de accesorios (accesorios.html, generada por ops/generar_accesorios.py): fichas con cabecera ilustrada.
   Los degradados son ilustraciones fijas, como en la app; no llevan fotos de tiendas */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.acc-pagina{max-width:1080px}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:4px}
.acc-card{display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:0 18px 18px;border-radius:18px;background:var(--hn-panel-solido);
  border:1px solid var(--hn-neutro-linea);box-shadow:var(--hn-sombra)}
.acc-ilu{position:relative;display:grid;place-items:center;height:92px;margin:0 -18px 6px;color:#fff;
  background-image:linear-gradient(120deg,#3b6cff,#7b6bff 55%,#b86bf2)}
.acc-icono{font-size:2.2rem;line-height:1;text-shadow:0 4px 12px rgba(0,0,0,.25)}
.acc-chispa{position:absolute;top:12px;right:20px;font-size:.95rem;opacity:.85}
.acc-ilu-cartas{background-image:linear-gradient(120deg,#ffb14a,#ff7a59 35%,#e0457b 70%,#7b6bff)}
.acc-ilu-binders{background-image:linear-gradient(120deg,#6b3bd1,#3b6cff 50%,#1fb7a6)}
.acc-ilu-fundas{background-image:linear-gradient(120deg,#1fb7a6,#3b6cff 50%,#7b6bff)}
.acc-ilu-conservacion{background-image:linear-gradient(120deg,#0b1b3d,#3b6cff 60%,#cbb9ff)}
.acc-card h3{margin:0;font-size:1.02rem;line-height:1.3}
.acc-afil{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--muted)}
.acc-porque{margin:0;font-size:.9rem;line-height:1.5}
.acc-porque b{color:var(--muted);font-weight:700}
.acc-nota-prod{margin:0;font-size:.84rem;font-weight:700;color:var(--hn-aviso-texto)}
.acc-pie{margin:auto 0 0;padding-top:6px}
.acc-pie a{display:inline-flex;gap:6px;padding:8px 16px;border-radius:999px;border:1px solid var(--hn-acento-borde);text-decoration:none;font-weight:700;font-size:.9rem}
.acc-pie a:hover{background:var(--hn-acento-fondo)}
.acc-mas{margin:14px 0 0;font-size:.9rem;color:var(--muted)}
.acc-mas a{font-weight:700}