/* EtiquetaClara — shared stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --paper:#F2F5F3;
  --surface:#FFFFFF;
  --surface-2:#E9EEEC;
  --ink:#12241F;
  --ink-soft:#3E524C;
  --muted:#647671;
  --border:#D7DFDB;
  --primary:#0B5D52;
  --primary-strong:#083F38;
  --primary-tint:#E3F0EC;
  --accent:#DD7A28;
  --accent-tint:#FCEADA;
  --link:#0B5D52;
  --focus:#1C8577;

  --lbl-cero:#0EA5A0;
  --lbl-eco:#4CAF50;
  --lbl-c:#EFA100;
  --lbl-b:#E8622C;
  --lbl-none:#B23A32;

  --ok:#2E7D4F;
  --warn:#B4740E;
  --bad:#B23A32;

  --shadow: 0 1px 2px rgba(18,36,31,.06), 0 8px 24px -12px rgba(18,36,31,.18);
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1C18;
    --surface:#162622;
    --surface-2:#1D2E29;
    --ink:#EAF2EF;
    --ink-soft:#B9C9C4;
    --muted:#8FA39D;
    --border:#2A3B36;
    --primary:#3FB39F;
    --primary-strong:#7FD3C3;
    --primary-tint:#1B3833;
    --accent:#F0995A;
    --accent-tint:#3A2A1C;
    --link:#5FCBB8;
    --focus:#5FCBB8;
    --ok:#6FCB94;
    --warn:#E3AE52;
    --bad:#E48A82;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1C18;
  --surface:#162622;
  --surface-2:#1D2E29;
  --ink:#EAF2EF;
  --ink-soft:#B9C9C4;
  --muted:#8FA39D;
  --border:#2A3B36;
  --primary:#3FB39F;
  --primary-strong:#7FD3C3;
  --primary-tint:#1B3833;
  --accent:#F0995A;
  --accent-tint:#3A2A1C;
  --link:#5FCBB8;
  --focus:#5FCBB8;
  --ok:#6FCB94;
  --warn:#E3AE52;
  --bad:#E48A82;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
.wrap-narrow{max-width:760px;margin:0 auto;padding-inline:20px}

h1,h2,h3{font-family:'Fraunces', Georgia, serif; font-weight:600; color:var(--ink); text-wrap:balance; letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.08; font-weight:700}
h2{font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.18; margin-top:0}
h3{font-size:1.15rem; margin-top:0}
p{color:var(--ink-soft)}
a{color:var(--link)}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums}

/* Nav */
.site-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink)}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-mark svg{width:17px;height:17px}
.brand-name{font-family:'Fraunces',serif; font-weight:700; font-size:1.15rem}
.nav-links{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.nav-links a{color:var(--ink-soft); text-decoration:none; font-size:.92rem; font-weight:500}
.nav-links a:hover{color:var(--primary)}
.nav-cta{background:var(--primary); color:#fff!important; padding:9px 16px; border-radius:99px; font-weight:600!important}
.nav-toggle{display:none; background:none;border:1px solid var(--border);border-radius:8px;padding:8px;color:var(--ink)}
@media (max-width:760px){
  .nav-links{display:none; position:absolute; inset:64px 0 auto 0; background:var(--surface); border-bottom:1px solid var(--border); flex-direction:column; align-items:flex-start; padding:16px 20px; gap:14px; box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:99px; padding:12px 22px; font-weight:600; font-size:.95rem; cursor:pointer; border:1px solid transparent; text-decoration:none}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-strong)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary)}
.btn-sm{padding:8px 14px; font-size:.85rem}
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* Cards / surfaces */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); box-shadow:var(--shadow)}
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:99px; font-size:.78rem; font-weight:600; background:var(--surface-2); color:var(--ink-soft)}

/* Ad placeholders */
.ad-slot{border:1.5px dashed var(--border); border-radius:var(--radius-m); background:var(--surface-2); color:var(--muted); display:flex; align-items:center; justify-content:center; text-align:center; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:14px}
.ad-banner{min-height:90px; margin-block:8px}
.ad-mid{min-height:120px; margin-block:32px}
.ad-corner{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:50; max-width:280px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); padding:14px; font-size:.82rem; color:var(--ink-soft); text-transform:none; letter-spacing:0; text-align:left; display:flex; gap:10px; align-items:flex-start}
.ad-corner button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;padding:0}
@media (max-width:520px){.ad-corner{left:16px; right:16px; max-width:none}}

/* Footer */
.site-footer{border-top:1px solid var(--border); margin-top:64px; padding-block:36px; color:var(--muted); font-size:.86rem}
.site-footer a{color:var(--muted)}
.footer-grid{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between}
.footer-cols{display:flex; gap:40px; flex-wrap:wrap}
.footer-cols h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 10px}
.footer-cols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.footer-cols a{text-decoration:none}
.footer-cols a:hover{color:var(--primary)}
.footer-bottom{margin-top:26px; padding-top:18px; border-top:1px solid var(--border); font-size:.78rem}
.footer-bottom a{text-decoration:underline}

/* Breadcrumb */
.breadcrumb{padding-block:14px 0; font-size:.82rem; color:var(--muted)}
.breadcrumb a{color:var(--muted); text-decoration:none}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb .sep{margin:0 6px; color:var(--border)}
.breadcrumb [aria-current]{color:var(--ink-soft)}

/* Cookie consent banner */
.cookie-banner{position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:60; max-width:640px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); padding:18px 20px}
.cookie-banner-inner p{font-size:.84rem; color:var(--ink-soft); margin:0 0 12px}
.cookie-banner-inner p a{color:var(--primary)}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap}
@media (max-width:520px){.cookie-banner{left:12px; right:12px; padding:16px}}

/* Legal pages */
.legal-body h2{margin-top:1.8em}
.legal-body ul{color:var(--ink-soft)}
.legal-meta{color:var(--muted); font-size:.85rem}
.fill-in{background:var(--accent-tint); color:var(--accent); padding:1px 6px; border-radius:5px; font-weight:600; font-size:.92em}

/* Article */
.article-hero{padding-block:44px 8px}
.article-body{padding-block:8px 40px}
.article-body h2{margin-top:2.2em}
.eyebrow{color:var(--primary); font-weight:700; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase}
.callout{background:var(--primary-tint); border-radius:var(--radius-m); padding:18px 20px; border:1px solid color-mix(in srgb, var(--primary) 25%, transparent)}
.callout p{color:var(--ink)}
ul.check{list-style:none; padding:0; display:flex; flex-direction:column; gap:8px}
ul.check li{padding-left:26px; position:relative}
ul.check li::before{content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700}
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:14px}
.related a{display:block; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius-m); text-decoration:none; color:var(--ink); background:var(--surface)}
.related a:hover{border-color:var(--primary)}
.related span{display:block; color:var(--muted); font-size:.82rem; margin-top:4px}

hr.rule{border:none; border-top:1px solid var(--border); margin-block:32px}