/* ============================================================
   DZINTARS — Sistema de diseño
   Manual de playa del Báltico · illanes00-ambar
   Lenguaje: lámina de campo / survey geológico.
   Papel cálido · tinta · ocre · azul mar · hairlines · versalitas.
   Sin dependencias externas (offline). Mobile-first.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* paleta */
  --paper:#efe7d6;      /* fondo papel */
  --paper-2:#f6f0e3;    /* papel claro */
  --panel:#fbf8f0;      /* superficie de lámina */
  --ink:#221e17;        /* tinta */
  --ink-2:#4c4437;      /* tinta suave */
  --stone:#8a8172;      /* gris piedra (secundario) */
  --ochre:#a9741f;      /* acento ocre/ámbar */
  --ochre-2:#7c5214;    /* ocre oscuro (títulos) */
  --ochre-tint:#ecdfc4; /* ocre lavado */
  --sea:#2f5d63;        /* azul mar báltico (enlaces) */
  --sea-2:#22464b;
  --rule:#d8ccb3;       /* hairline */
  --rule-2:#cabfa6;
  --danger:#8f2417;     /* rojo seguridad (reservado) */
  --danger-bg:#f7e4dd;
  --danger-line:#e0b2a7;
  --ok:#3a6b45;
  --ok-bg:#e8efe0;

  /* tipografía */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;

  /* escala tipográfica (~1.25) */
  --t--1:.82rem; --t-0:1.05rem; --t-1:1.2rem; --t-2:1.45rem;
  --t-3:1.85rem; --t-4:2.35rem; --t-5:3rem;

  /* espacio */
  --s1:.35rem; --s2:.6rem; --s3:1rem; --s4:1.5rem; --s5:2.4rem; --s6:3.6rem;

  --maxw:52rem; --measure:38rem; --rad:3px;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:var(--t-0);line-height:1.62;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--ochre-tint);color:var(--ink)}
img{max-width:100%;height:auto}
hr,.rule{border:0;border-top:1px solid var(--rule);margin:var(--s4) 0}
.rule--thick{border-top:2px solid var(--ink)}

a{color:var(--sea);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--sea) 35%,transparent)}
a:hover{border-bottom-color:var(--sea)}

h1,h2,h3,h4{font-family:var(--serif);line-height:1.16;font-weight:600;color:var(--ink)}
h1{font-size:var(--t-4);letter-spacing:-.01em;margin:.15em 0 .1em}
h2{font-size:var(--t-3);color:var(--ochre-2);margin:1.6em 0 .35em}
h3{font-size:var(--t-1);margin:1.4em 0 .3em}
h4{font-size:var(--t-0);margin:1.1em 0 .2em}
p{margin:.6em 0;max-width:var(--measure)}
ul,ol{max-width:var(--measure);padding-left:1.3em;margin:.6em 0}
li{margin:.3em 0}
strong,b{font-weight:600}
small{font-size:var(--t--1);color:var(--ink-2)}
code,kbd{font-family:var(--mono);font-size:.86em;background:var(--ochre-tint);
  padding:.05em .35em;border-radius:2px}

/* ---------- 3. ETIQUETAS / VERSALITAS ---------- */
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;
  font-size:.68rem;font-weight:700;color:var(--ochre)}
.plate-no{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--stone)}
.lede{font-size:var(--t-1);line-height:1.5;color:var(--ink-2);max-width:var(--measure)}
.label{font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;
  font-size:.66rem;font-weight:700;color:var(--stone)}

/* ---------- 4. LAYOUT ---------- */
.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}
main.shell{padding-top:var(--s4);padding-bottom:var(--s5)}
section{padding:var(--s3) 0}

/* dos columnas: cuerpo + marginalia (solo en ancho) */
.spread{display:block}
@media(min-width:60rem){
  .spread{display:grid;grid-template-columns:1fr 15rem;gap:var(--s5);align-items:start}
  .spread>.margin{position:sticky;top:5rem}
}
.margin{font-family:var(--sans);font-size:.82rem;line-height:1.5;color:var(--ink-2);
  border-top:2px solid var(--ochre);padding-top:var(--s2)}
.margin h4{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;
  font-size:.68rem;color:var(--ochre-2);margin:.2em 0 .4em}

/* ---------- 5. STRIP DE SEGURIDAD ---------- */
.strip{background:var(--danger);color:#fbeee9;font-family:var(--sans);
  font-size:.8rem;line-height:1.35}
.strip .shell{display:flex;gap:.5em;justify-content:center;align-items:center;
  text-align:center;padding:.5em var(--s4)}
.strip a{color:#fff;border-bottom-color:rgba(255,255,255,.55)}

/* ---------- 6. HEADER / NAV ---------- */
.site-head{border-bottom:2px solid var(--ink);background:var(--paper)}
.site-head .shell{padding-top:var(--s3);padding-bottom:0}
.brand{display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;margin-bottom:.5em}
.brand .mark{font-family:var(--sans);font-weight:800;letter-spacing:.24em;
  font-size:1.05rem;color:var(--ink)}
.brand .mark a{color:inherit;border:0}
.brand .sub{font-family:var(--serif);font-style:italic;color:var(--stone);font-size:.95rem}
nav.site-nav{display:flex;flex-wrap:wrap;gap:0;margin:0 -.55em}
nav.site-nav a{font-family:var(--sans);font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;font-weight:600;color:var(--ink-2);
  padding:.55em .55em;border:0;border-bottom:2px solid transparent}
nav.site-nav a:hover{color:var(--ink)}
nav.site-nav a[aria-current="page"]{color:var(--ochre-2);border-bottom-color:var(--ochre)}

/* ---------- 7. TÍTULO DE LÁMINA ---------- */
.plate-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s3);border-bottom:1px solid var(--rule);padding-bottom:var(--s2);margin-bottom:var(--s3)}
.plate-head .eyebrow{display:block;margin-bottom:.2em}

/* ---------- 8. LÁMINA / TARJETA ---------- */
.plate{background:var(--panel);border:1px solid var(--rule);border-radius:var(--rad);
  margin:var(--s3) 0}
.plate>.plate__hd{font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;
  font-size:.68rem;font-weight:700;color:var(--stone);
  padding:.55em .95em;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.plate>.plate__bd{padding:.4em .95em .9em}
.plate>.plate__bd>*:first-child{margin-top:.5em}

/* ---------- 9. CALLOUTS ---------- */
.callout{border:1px solid var(--rule);border-left-width:4px;border-radius:var(--rad);
  padding:.7em .95em;margin:var(--s3) 0;max-width:var(--measure)}
.callout .callout__label{display:block;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.1em;font-size:.66rem;font-weight:700;margin-bottom:.25em}
.callout--warn{border-color:var(--danger-line);border-left-color:var(--danger);background:var(--danger-bg)}
.callout--warn,.callout--warn .callout__label,.callout--warn b{color:var(--danger)}
.callout--note{border-left-color:var(--ochre);background:var(--paper-2)}
.callout--note .callout__label{color:var(--ochre-2)}
.callout--safe{border-left-color:var(--ok);background:var(--ok-bg)}
.callout--safe .callout__label{color:var(--ok)}
.rulebox{background:var(--danger-bg);border:1px solid var(--danger-line);border-radius:var(--rad);
  padding:.6em .85em;margin:var(--s3) 0;font-weight:600;color:var(--danger);max-width:var(--measure)}

/* ---------- 10. TABLA ESPÉCIMEN ---------- */
table.spec{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:.9rem}
table.spec caption{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;
  font-size:.66rem;color:var(--stone);text-align:left;margin-bottom:.35em}
table.spec th,table.spec td{border-bottom:1px solid var(--rule);padding:.45em .55em;
  text-align:left;vertical-align:top}
table.spec thead th{font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;
  font-size:.68rem;color:var(--ink);border-bottom:2px solid var(--ink)}
table.spec tbody tr:last-child td{border-bottom:2px solid var(--ink)}
table.spec td.num,table.spec .mono{font-family:var(--mono);font-size:.85em}

/* ---------- 11. LISTA DE DEFINICIONES / PASOS ---------- */
dl.def{max-width:var(--measure);margin:var(--s3) 0}
dl.def dt{font-family:var(--sans);font-weight:700;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ochre-2);margin-top:.7em}
dl.def dd{margin:.1em 0 .1em}
ol.steps{counter-reset:st;list-style:none;padding-left:0;max-width:var(--measure)}
ol.steps>li{counter-increment:st;position:relative;padding-left:2.3em;margin:.55em 0}
ol.steps>li::before{content:counter(st,upper-roman);position:absolute;left:0;top:.05em;
  font-family:var(--mono);font-size:.8rem;color:var(--ochre);font-weight:700;
  border:1px solid var(--rule-2);border-radius:2px;min-width:1.7em;text-align:center;padding:.05em}

/* ---------- 12. TAGS ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.3em;margin:.4em 0}
.tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;
  border:1px solid var(--rule-2);border-radius:12px;padding:.1em .6em;color:var(--ink-2);background:var(--paper-2)}
.tag--v{border-color:#bcd0b6;color:#2c5c34;background:#e9f0e3}
.tag--f{border-color:#e0cfa6;color:var(--ochre-2)}

/* ---------- 13. BOTONES ---------- */
.btn{font-family:var(--sans);font-weight:600;font-size:.9rem;letter-spacing:.02em;
  cursor:pointer;background:var(--ochre);color:#fff;border:0;border-radius:var(--rad);
  padding:.55em 1em;display:inline-block}
.btn:hover{background:var(--ochre-2)}
.btn--ghost{background:transparent;color:var(--ochre-2);border:1px solid var(--rule-2)}
.btn--ghost:hover{border-color:var(--ochre);background:var(--paper-2)}
.btn--sea{background:var(--sea)}.btn--sea:hover{background:var(--sea-2)}
a.btn{border-bottom:0}

/* ---------- 14. FIGURA ---------- */
figure{margin:var(--s3) 0}
figure figcaption{font-family:var(--sans);font-size:.78rem;color:var(--stone);
  border-top:1px solid var(--rule);padding-top:.35em;margin-top:.4em}

/* ---------- 15. PAGER (prev/next) ---------- */
.pager{display:flex;justify-content:space-between;gap:var(--s3);
  border-top:2px solid var(--ink);margin-top:var(--s5);padding-top:var(--s3)}
.pager a{font-family:var(--sans);border:0;max-width:47%}
.pager .dir{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--stone)}
.pager .ttl{font-family:var(--serif);font-size:1.05rem;color:var(--ochre-2)}
.pager .next{text-align:right}

/* ---------- 16. FOOTER / COLOFÓN ---------- */
.colophon{border-top:2px solid var(--ink);margin-top:var(--s6);
  padding:var(--s4) 0 var(--s6);color:var(--ink-2)}
.colophon .shell{font-family:var(--sans);font-size:.8rem;line-height:1.5}
.colophon .mark{font-weight:800;letter-spacing:.2em;color:var(--ink)}

/* ---------- 17. UTILIDADES ---------- */
.index-list{list-style:none;padding:0;max-width:var(--measure)}
.index-list li{border-bottom:1px solid var(--rule);padding:.6em 0;margin:0}
.index-list a{font-family:var(--serif);font-size:var(--t-1);color:var(--ochre-2);border:0}
.index-list .d{display:block;font-family:var(--sans);font-size:.82rem;color:var(--ink-2);margin-top:.15em}
.index-list .n{font-family:var(--mono);font-size:.7rem;color:var(--stone);margin-right:.6em}
.muted{color:var(--stone)}
.center{text-align:center}

/* ---------- 18. STYLE GUIDE (swatches / escala) ---------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:var(--s2);margin:var(--s3) 0}
.sw{border:1px solid var(--rule);border-radius:var(--rad);overflow:hidden;background:var(--panel)}
.sw .chip{height:3.4rem}
.sw .meta{padding:.35em .5em;font-family:var(--mono);font-size:.7rem;line-height:1.3;color:var(--ink-2)}
.sw .meta b{display:block;font-family:var(--sans);font-size:.72rem;color:var(--ink)}
.scale-row{display:flex;align-items:baseline;gap:.8em;border-bottom:1px solid var(--rule);padding:.4em 0}
.scale-row .tk{font-family:var(--mono);font-size:.72rem;color:var(--stone);min-width:5.5rem}

/* ============================================================
   19. WIZARD (asistente de identificación)
   ============================================================ */
.wiz .opt{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--rule);
  border-radius:var(--rad);padding:.6em .85em;margin:.35em 0;color:var(--ink);
  font-family:var(--serif);font-size:1rem}
.wiz .opt:hover{border-color:var(--ochre)}
.wiz .opt b{font-weight:600}
.wiz .opt small{display:block;color:var(--stone);font-family:var(--sans);font-size:.8rem;margin-top:.1em}
.wiz .q{font-family:var(--serif);font-size:var(--t-1);margin:.15em 0 .5em}
.wiz .qtag{font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;
  font-weight:700;color:var(--ochre)}
.wiz .rank .row{display:flex;align-items:center;gap:.5em;margin:.28em 0;font-size:.9rem}
.wiz .row .nm{flex:0 0 46%}
.wiz .track{flex:1;height:9px;background:var(--ochre-tint);border-radius:6px;overflow:hidden}
.wiz .fill{height:100%;background:var(--ochre)}
.wiz .row.top .nm{font-weight:700}
.wiz .row.dead{opacity:.36;text-decoration:line-through}
.wiz .row.danger .nm{color:var(--danger);font-weight:700}
.wiz .pct{flex:0 0 2.7em;text-align:right;color:var(--stone);font-family:var(--mono);font-size:.8rem}
.wiz .verdict{font-family:var(--serif);font-size:var(--t-1);color:var(--ochre-2)}
.wiz .chip-a{display:inline-block;background:var(--paper-2);border:1px solid var(--rule);border-radius:12px;
  padding:.1em .55em;margin:.12em .18em;font-family:var(--sans);font-size:.76rem;cursor:pointer}
.wiz .chip-a b{color:var(--ochre-2)}
.wiz .meta{font-family:var(--sans);font-size:.8rem;color:var(--ink-2)}
.wiz canvas{border:1px solid var(--rule);border-radius:var(--rad);max-width:100%;touch-action:none;margin-top:.5em}
.wiz .swatch{width:24px;height:24px;border-radius:4px;border:1px solid var(--rule);display:inline-block;vertical-align:middle}

/* ---------- 20. RESPONSIVE ---------- */
@media(max-width:34rem){
  :root{--t-4:2rem;--t-3:1.6rem;--t-5:2.3rem}
  body{font-size:1rem}
  nav.site-nav a{padding:.5em .45em;font-size:.74rem}
}

/* ---------- 21. IMPRESIÓN (el manual se imprime) ---------- */
@media print{
  :root{--paper:#fff;--panel:#fff}
  .strip,nav.site-nav,.pager,.btn,.wiz{display:none!important}
  body{font-size:11pt}
  a{color:inherit;border:0}
  .plate,.callout{break-inside:avoid}
}