/* Acampada Diario — sistema de diseño
   Paleta: pino (--pine) + ascua de fuego de campamento (--ember). Nada de crema+serif
   ni negro+verde ácido — esto es literalmente el color del bosque al anochecer y las
   brasas de la hoguera. */
:root{
  --bg:#F3F4EF; --surface:#FFFFFF; --surface-2:#E9EBE0;
  --ink:#1B2A1E; --ink-soft:#4A5B45; --ink-faint:#7C8B74;
  --pine:#1F4235; --pine-soft:#DCE6DA; --pine-soft-ink:#1F4235;
  --ember:#D9711F; --ember-ink:#3A1C08; --ember-soft:#F5DFCF;
  --line:#D7DACB; --warn:#B3401D; --warn-soft:#F5DFCF;
  --shadow: 0 1px 2px rgba(27,42,30,0.07), 0 10px 26px -14px rgba(27,42,30,0.22);
  --radius: 14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111A13; --surface:#17221A; --surface-2:#1E2C22;
    --ink:#EAF1E7; --ink-soft:#B0C1AA; --ink-faint:#7E9078;
    --pine:#8FCBAA; --pine-soft:#1F3A2C; --pine-soft-ink:#B7E3C9;
    --ember:#F0954C; --ember-ink:#2A1508; --ember-soft:#3A2412;
    --line:#2B3B2F; --warn:#F0824C; --warn-soft:#3A2214;
  }
}
:root[data-theme="dark"]{
  --bg:#111A13; --surface:#17221A; --surface-2:#1E2C22;
  --ink:#EAF1E7; --ink-soft:#B0C1AA; --ink-faint:#7E9078;
  --pine:#8FCBAA; --pine-soft:#1F3A2C; --pine-soft-ink:#B7E3C9;
  --ember:#F0954C; --ember-ink:#2A1508; --ember-soft:#3A2412;
  --line:#2B3B2F; --warn:#F0824C; --warn-soft:#3A2214;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Work Sans',system-ui,-apple-system,sans-serif;
  line-height:1.6; font-size:17px;
}
h1,h2,h3,h4{
  font-family:'Bebas Neue',system-ui,sans-serif;
  color:var(--pine); letter-spacing:.02em; line-height:1.05; margin:0 0 .5em;
  text-transform:uppercase;
}
h1{font-size:clamp(34px,5vw,54px);}
h2{font-size:clamp(24px,3.4vw,32px);}
h3{font-size:20px;}
h4{font-size:16px;}
p{margin:0 0 1em;}
a{color:var(--ember); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block; border-radius:10px;}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* Header */
header.site{background:var(--pine); color:#fff; position:sticky; top:0; z-index:40; box-shadow:var(--shadow);}
header.site .bar{max-width:1120px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
header.site .logo{display:flex; align-items:center; gap:10px; font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:.03em; color:#fff;}
header.site .logo .dot{width:12px; height:12px; border-radius:3px; background:var(--ember); display:inline-block; transform:rotate(45deg);}
header.site .logo:hover{text-decoration:none;}
nav.primary{display:flex; gap:4px; align-items:center;}
nav.primary a{color:#EAF1E7; padding:8px 12px; border-radius:8px; font-size:14.5px; font-weight:600;}
nav.primary a:hover{background:rgba(255,255,255,.12); text-decoration:none;}

.menu-toggle{display:none;appearance:none;border:none;background:transparent;width:40px;height:40px;padding:0;cursor:pointer;position:relative;border-radius:6px;color:#fff;}
.menu-toggle span{position:absolute;left:9px;right:9px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease, opacity .2s ease;}
.menu-toggle span:nth-child(1){top:14px;} .menu-toggle span:nth-child(2){top:19px;} .menu-toggle span:nth-child(3){top:24px;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
@media (max-width:860px){
  .menu-toggle{display:block;}
  header.site .bar{flex-wrap:wrap;}
  nav.primary{order:3;width:100%;flex-direction:column;align-items:stretch;gap:2px;max-height:0;overflow:hidden;transition:max-height .25s ease;}
  nav.primary.open{max-height:640px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15);}
  nav.primary a{padding:10px 12px;}
}

/* Hero */
.hero{background:linear-gradient(180deg,var(--pine) 0%, #16301F 100%); color:#fff; padding:56px 0 64px;}
.hero .wrap{display:flex; flex-direction:column; gap:14px; max-width:760px;}
.hero h1{color:#fff;}
.hero p.lead{color:#D8E6D5; font-size:18px; max-width:600px;}
.hero .chip{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; width:fit-content;}

/* Cards */
.grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){.grid-cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-cards{grid-template-columns:1fr;}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .15s ease;}
.card:hover{transform:translateY(-3px);}
.card .card-img{aspect-ratio:16/10; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:40px;}
.card .card-body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card .card-cat{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ember);}
.card h3{margin:0;}
.card h3 a{color:var(--ink); text-decoration:none;}
.card h3 a:hover{color:var(--pine);}
.card p{color:var(--ink-soft); font-size:14.5px; margin:0;}

/* Category grid on home */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:860px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.cat-grid{grid-template-columns:1fr;}}
.cat-tile{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; display:flex; align-items:center; gap:14px; color:var(--ink); box-shadow:var(--shadow);}
.cat-tile:hover{text-decoration:none; border-color:var(--pine);}
.cat-tile .ico{font-size:26px;}
.cat-tile b{display:block; color:var(--pine); font-family:'Bebas Neue',sans-serif; letter-spacing:.02em; font-size:17px;}
.cat-tile span{font-size:13px; color:var(--ink-faint);}

section{padding:48px 0;}
section.alt{background:var(--surface-2);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; gap:12px; flex-wrap:wrap;}
.section-head a.more{font-size:14px; font-weight:700; color:var(--pine);}

/* Article */
article.post{padding:44px 0 60px;}
article.post .kicker{color:var(--ember); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:13px; margin-bottom:6px;}
article.post .meta{color:var(--ink-faint); font-size:13.5px; margin-bottom:24px;}
article.post .content{max-width:760px;}
article.post .content h2{margin-top:1.3em;}
article.post .content h3{margin-top:1.1em; color:var(--ink);}
article.post .content ul, article.post .content ol{padding-left:22px;}
article.post .content li{margin-bottom:.4em;}
.callout{background:var(--pine-soft); border-left:4px solid var(--pine); border-radius:8px; padding:16px 18px; margin:20px 0; color:var(--pine-soft-ink);}
.callout.warn{background:var(--warn-soft); border-left-color:var(--warn); color:var(--ink);}
.related{margin-top:36px; padding-top:28px; border-top:1px solid var(--line);}
.related .grid-cards{grid-template-columns:repeat(2,1fr);}
@media (max-width:600px){.related .grid-cards{grid-template-columns:1fr;}}

/* Breadcrumb */
.crumbs{font-size:13px; color:var(--ink-faint); padding:16px 0 0;}
.crumbs a{color:var(--ink-faint);}

/* Hub intro */
.hub-hero{background:var(--surface-2); padding:40px 0 36px; border-bottom:1px solid var(--line);}
.hub-hero .kicker{color:var(--ember); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.05em;}
.hub-hero p{max-width:680px; color:var(--ink-soft); font-size:16px;}

/* Footer */
footer.site{background:var(--pine); color:#D8E6D5; margin-top:40px;}
footer.site .wrap{padding:44px 20px 30px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;}
@media (max-width:760px){footer.site .wrap{grid-template-columns:1fr; gap:24px;}}
footer.site h3{color:#fff; font-size:14px; margin-bottom:12px; text-transform:none; letter-spacing:normal; font-family:'Work Sans',system-ui,sans-serif; font-weight:700;}
footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
footer.site a{color:#C7D8C3; font-size:14px;}
footer.site a:hover{color:#fff;}
footer.site .logo{font-family:'Bebas Neue',sans-serif; font-size:22px; color:#fff; letter-spacing:.03em;}
footer.site .tag{color:#A9BFA4; font-size:14px; max-width:320px; margin-top:8px;}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.15); padding:16px 20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12.5px; color:#9FB69A; max-width:1120px; margin:0 auto;}
footer.site button.linklike{background:none;border:none;color:#C7D8C3;font-size:12.5px;cursor:pointer;padding:0;text-decoration:underline;}

/* Cookie banner */
.cookie-banner{position:fixed; left:16px; right:16px; bottom:16px; max-width:640px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); z-index:80; padding:18px 20px;}
.cookie-banner.hidden{display:none;}
.cookie-banner p{font-size:13.5px; color:var(--ink-soft); margin:0 0 12px;}
.cookie-banner .actions{display:flex; gap:10px; flex-wrap:wrap;}
.cookie-banner button{border-radius:8px; padding:9px 16px; font-size:13.5px; font-weight:700; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink);}
.cookie-banner button.primary{background:var(--pine); color:#fff; border-color:var(--pine);}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--ember); color:#fff; padding:11px 20px; border-radius:9px; font-weight:700; font-size:14.5px; border:none; cursor:pointer;}
.btn:hover{text-decoration:none; opacity:.92;}
.btn.ghost{background:transparent; border:1.5px solid #fff; color:#fff;}