/* ============================================================
   Smaland Companie — sistema de las propuestas de iosum
   (papel crema, Archivo + Newsreader + JetBrains Mono, acento
   violeta, hairlines). Sin JS: la CSP del sitio no lo permite.
   ============================================================ */
@font-face{font-family:'Archivo';src:url('/fuentes/archivo-latin-standard-normal.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:'Archivo';src:url('/fuentes/archivo-latin-ext-standard-normal.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB}
@font-face{font-family:'Newsreader';src:url('/fuentes/newsreader-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:'Newsreader';src:url('/fuentes/newsreader-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB}
@font-face{font-family:'JetBrains Mono';src:url('/fuentes/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'JetBrains Mono';src:url('/fuentes/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+20A0-20AB}

:root{
  color-scheme:light dark;
  --paper:#eeeae1; --sheet:#faf8f4; --sheet-2:#e6e1d6;
  --ink:#16130f; --muted:#5a544a; --faint:#8b8478;
  --rule:#d8d2c5; --rule-2:#bdb5a4;
  --acc:#6c25a4; --acc-ink:#5a1d8c; --acc-soft:#e9dcf5;
  --good:#2f6b40;
  --display:"Archivo",-apple-system,system-ui,sans-serif;
  --prose:"Newsreader",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --maxw:1120px; --pad:clamp(20px,5vw,72px);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0b0a08; --sheet:#141210; --sheet-2:#1c1916;
    --ink:#f2efe8; --muted:#9d968a; --faint:#6d675d;
    --rule:#262220; --rule-2:#3a3430;
    --acc:#d29fff; --acc-ink:#e0b8ff; --acc-soft:#2a1d38;
    --good:#7bbd8e;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--prose);font-size:18px;
  line-height:1.6;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.025em;margin:0;text-wrap:balance}
h2{font-size:clamp(30px,4.6vw,50px);font-variation-settings:"wdth" 92}
h3{font-size:clamp(19px,2.2vw,23px);letter-spacing:-.015em}
p{margin:0 0 1em;max-width:66ch;text-wrap:pretty}
a{color:var(--acc-ink)}
b,strong{font-weight:600}
img{display:block;max-width:100%}
.lead{font-size:clamp(19px,2.1vw,22px);color:var(--muted);max-width:60ch;font-weight:300}
.mono{font-family:var(--mono)}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* barra superior: fija, sin JS (ni progreso ni botón de tema) */
.topbar{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.topbar-in{max-width:var(--maxw);margin:0 auto;padding:11px var(--pad);display:flex;align-items:center;
  gap:24px;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.bm{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;letter-spacing:.16em;
  text-decoration:none;white-space:nowrap}
.bm i{width:7px;height:7px;background:var(--acc);display:block;transform:rotate(45deg)}
.topnav{margin-left:auto;display:flex;gap:22px}
.topnav a{color:var(--faint);text-decoration:none;white-space:nowrap}
.topnav a i{color:var(--acc-ink);font-style:normal;margin-right:8px}
.topnav a:hover{color:var(--ink)}
.idioma{margin-left:auto;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--acc);
  padding-bottom:1px;white-space:nowrap}
.topnav+.idioma{margin-left:0}
/* En móvil la barra deja solo marca e idioma: las cuatro secciones ocupaban dos filas enteras. */
@media(max-width:860px){.topnav.secciones{display:none}}

.hero{padding:clamp(30px,6vw,64px) 0 clamp(44px,7vw,84px);border-bottom:2px solid var(--ink)}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  padding-bottom:clamp(40px,8vw,84px)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc-ink);font-weight:600;display:block;margin-bottom:20px}
/* El titular de Smaland es más largo que el de la propuesta: a 76px y 15ch ocupaba cinco líneas y
   empujaba las cifras fuera de la primera pantalla. 60px y 20ch lo dejan en tres. */
.hero h1{font-size:clamp(34px,5.4vw,60px);letter-spacing:-.035em;font-variation-settings:"wdth" 88;max-width:20ch}
.hero h1 em{font-family:var(--prose);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--acc-ink);
  white-space:nowrap}
@media(max-width:700px){.hero h1 em{white-space:normal}}
.hero .lead{margin-top:26px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,7vw,64px);border-top:1px solid var(--rule)}
.stat{padding:20px 22px 18px;border-right:1px solid var(--rule)}
.stat:last-child{border-right:none}
.stat .v{display:block;font-family:var(--display);font-size:clamp(26px,4.2vw,40px);font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;font-variation-settings:"wdth" 88}
.stat .v.b{color:var(--acc-ink)}
.stat .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:12px;line-height:1.6;max-width:24ch}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat{border-bottom:1px solid var(--rule)}.stat:nth-child(2n){border-right:none}}

.toc{display:flex;flex-wrap:wrap;margin-top:clamp(30px,5vw,44px);border-top:1px solid var(--rule);padding-top:18px}
.toc a{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-decoration:none;color:var(--muted);
  padding:6px 16px 6px 0;margin-right:16px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.toc a i{color:var(--acc-ink);font-style:normal;margin-right:7px}
.toc a:hover{color:var(--ink);border-bottom-color:var(--acc)}

section{padding:clamp(60px,9vw,116px) 0;border-top:1px solid var(--rule)}
section[id]{scroll-margin-top:70px}
.sec-h{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;margin-bottom:14px}
.sec-n{font-family:var(--mono);font-size:12px;color:var(--acc-ink);letter-spacing:.1em;padding-top:6px}
.cols{display:grid;gap:26px}
.c2{grid-template-columns:repeat(2,1fr)} .c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.c2,.c3{grid-template-columns:1fr}}
.box{background:var(--sheet);border:1px solid var(--rule);border-radius:3px;padding:26px}
.box h3{margin-bottom:9px}
.box p{color:var(--muted);font-size:16.5px;margin-bottom:0}
.box .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acc-ink);display:block;margin-bottom:14px}
.box.mark{border-color:var(--acc);box-shadow:inset 0 2px 0 var(--acc)}
.box .pills{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.box .sitio{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.04em}

ul.rules{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--rule);counter-reset:r}
ul.rules li{position:relative;padding:16px 0 16px 34px;color:var(--muted);font-size:17px;border-bottom:1px solid var(--rule)}
ul.rules li::before{content:counter(r,decimal-leading-zero);counter-increment:r;position:absolute;left:0;top:18px;
  font-family:var(--mono);font-size:11px;color:var(--acc-ink);letter-spacing:.05em}
ul.rules li b{color:var(--ink)}

.note{margin:34px 0 0;padding:22px 0 0;border-top:2px solid var(--ink)}
.note .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--good);font-weight:600;display:block;margin-bottom:10px}
.note p{margin:0;font-size:18px;max-width:74ch}

.pill{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:2px 8px;border:1px solid var(--rule-2);border-radius:99px;color:var(--muted);margin-right:6px;margin-bottom:4px}
.pill.a{border-color:var(--acc);color:var(--acc-ink)}

.tw{overflow-x:auto;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);margin-top:26px}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{text-align:left;padding:14px 18px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:none}
td.dato{font-family:var(--display);font-weight:600;font-size:16px}

footer{padding:clamp(48px,7vw,80px) 0 90px;border-top:2px solid var(--ink);color:var(--muted);font-size:16px}
footer .big{font-family:var(--display);color:var(--ink);font-size:clamp(24px,3.8vw,38px);font-weight:700;
  letter-spacing:-.03em;max-width:24ch;margin-bottom:22px;line-height:1.06;font-variation-settings:"wdth" 90}
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:16px;padding:13px 22px;
  border-radius:3px;background:var(--acc);color:#fff;text-decoration:none;margin-right:10px;margin-bottom:10px}
@media (prefers-color-scheme:dark){.btn{color:#13111a}}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-2)}
.pie-cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-top:38px;
  padding-top:26px;border-top:1px solid var(--rule)}
.pie-cols h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:0 0 12px;font-weight:600}
.pie-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15.5px}
.pie-cols a{text-decoration:none;color:var(--muted)}
.pie-cols a:hover{color:var(--ink)}
.fine{font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.85;margin-top:30px;
  padding-top:22px;border-top:1px solid var(--rule)}

/* páginas legales */
.legal{padding:clamp(40px,6vw,72px) 0 clamp(60px,8vw,96px)}
.legal h1{font-size:clamp(30px,5vw,52px);font-variation-settings:"wdth" 90;max-width:20ch}
.legal .fecha{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:14px 0 40px;padding-bottom:22px;border-bottom:2px solid var(--ink)}
.legal h2{font-size:clamp(20px,2.4vw,25px);margin:44px 0 12px;font-variation-settings:"wdth" 95}
.legal p{max-width:74ch}
.legal ul{list-style:none;padding:0;margin:0 0 18px;border-top:1px solid var(--rule)}
.legal li{padding:13px 0 13px 22px;border-bottom:1px solid var(--rule);color:var(--muted);position:relative;max-width:74ch}
.legal li::before{content:'';position:absolute;left:2px;top:22px;width:6px;height:6px;background:var(--acc);transform:rotate(45deg)}
.legal li b{color:var(--ink)}
.legal .nota{font-family:var(--mono);font-size:11px;line-height:1.85;color:var(--faint);
  margin-top:40px;padding-top:22px;border-top:1px solid var(--rule)}