/*!
 * Despoblados · base compartida
 * Tokens + reset acotado + header + footer.
 * La cargan TODOS los templates de Despoblados (la encola includes/despoblados/header.php).
 * Todo va con prefijo dsp- y colgado de .dsp-body para no chocar con el tema / Elementor.
 */

/* ═════════════ Tokens (mismos valores que /libro-despoblados) ═════════════ */
.dsp-body{
  --ink:#0D0C11;
  --bone:#E7E1D5;
  --bone-dim:#C9C1B3;
  --blood:#C82424;
  --blood-soft:#E24B4B;          /* blood aclarado para texto chico: contraste AA sobre --ink */
  --panel-1:#1c1b23;
  --panel-2:#161520;
  --line:rgba(231,225,213,.11);

  /* Curvas de animación */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:24px;

  margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--ink);color:var(--bone);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
@media (min-width:768px){.dsp-body{--gutter:40px}}
@media (min-width:1024px){.dsp-body{--gutter:48px}}

/* ═════════════ Reset acotado (especificidad 0: nunca pisa a los componentes) ═════════════ */
:where(.dsp-body) *,:where(.dsp-body) *::before,:where(.dsp-body) *::after{box-sizing:border-box}
:where(.dsp-body) :is(h1,h2,h3){margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:-.015em}
:where(.dsp-body) p{margin:0}
:where(.dsp-body) :is(ol,ul){margin:0;padding:0;list-style:none}
:where(.dsp-body) figure{margin:0}
:where(.dsp-body) a{color:inherit}
:where(.dsp-body) img{max-width:100%}
:where(.dsp-body) button{font:inherit;color:inherit}
:where(.dsp-body) :focus-visible{outline:2px solid var(--blood-soft);outline-offset:3px}
.dsp-body ::selection{background:var(--blood);color:#fff}

.dsp-display{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em}
.dsp-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dsp-skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--bone);color:var(--ink);text-decoration:none;font-size:13px;transition:top 160ms var(--ease-out)}
.dsp-skip:focus{top:12px}

/* Grano (igual que el sitio) */
.dsp-noise{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.dsp-body>main{flex:1;overflow-x:clip}   /* empuja el footer al fondo en páginas cortas */
.dsp-wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}

/* ═════════════ Primitivas compartidas ═════════════ */
.dsp-eyebrow{display:flex;align-items:center;gap:10px;margin:0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--blood-soft)}

/* ═════════════ Header ═════════════ */
.dsp-header__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:68px;border-bottom:1px solid rgba(231,225,213,.105)}
@media (min-width:768px){.dsp-header__bar{height:78px}}
.dsp-brand{font-family:var(--font-display);font-weight:500;font-size:20px;letter-spacing:-.015em;text-decoration:none;color:var(--bone)}
@media (min-width:768px){.dsp-brand{font-size:22px}}
.dsp-header__actions{display:flex;align-items:center;gap:4px}
@media (min-width:768px){.dsp-header__actions{gap:24px}}

.dsp-social{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;
  color:var(--bone-dim);text-decoration:none;font-size:11px;letter-spacing:.06em;transition:color 160ms ease;
}
.dsp-social svg{width:20px;height:20px;flex:none}
.dsp-social__handle{display:none}
@media (min-width:768px){.dsp-social{min-width:0}.dsp-social__handle{display:inline}}
@media (hover:hover) and (pointer:fine){.dsp-social:hover{color:var(--bone)}}

.dsp-pill-solid{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:var(--bone);color:var(--ink);
  font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.dsp-pill-solid:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.dsp-pill-solid:hover{background:#fff}}
.dsp-pill-solid .dsp-full{display:none}
@media (min-width:640px){.dsp-pill-solid .dsp-full{display:inline}.dsp-pill-solid .dsp-short{display:none}}

/* ═════════════ Footer ═════════════ */
.dsp-footer{border-top:1px solid rgba(231,225,213,.09);padding:56px 0;font-size:12.5px;color:var(--bone-dim)}
.dsp-footer .dsp-wrap{display:flex;flex-direction:column;gap:24px}
.dsp-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.dsp-footer a{text-decoration:none;transition:color 160ms ease}
@media (hover:hover) and (pointer:fine){.dsp-footer a:hover{color:var(--bone)}}
.dsp-footer .dsp-footer__qk{display:inline-flex;align-items:center;gap:8px}
.dsp-footer .dsp-footer__qk img{height:16px;width:auto;opacity:.6;filter:brightness(0) invert(1);transition:opacity 200ms ease}
@media (min-width:768px){.dsp-footer .dsp-wrap{flex-direction:row;align-items:center;justify-content:space-between}}

/* ═════════════ Migas (compartidas) ═════════════ */
.dsp-crumbs ol{display:flex;flex-wrap:nowrap;gap:6px;margin:0;padding:14px 0 0;list-style:none;font-size:12px;color:var(--bone-dim)}
.dsp-crumbs li{flex:none}
.dsp-crumbs li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* el título largo se corta con … en vez de saltar de línea */
.dsp-crumbs li+li::before{content:"›";margin-right:6px;opacity:.5}
.dsp-crumbs a{text-decoration:none;transition:color 160ms ease}
@media (hover:hover) and (pointer:fine){.dsp-crumbs a:hover{color:var(--bone)}}


/* ═════════════ Botón "pill" con borde (compartido) ═════════════ */
.dsp-pill{text-decoration:none;line-height:1.2;  display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;cursor:pointer;  border:1px solid rgba(231,225,213,.25);background:transparent;color:var(--bone);font-size:13.5px;  transition:border-color 200ms ease,background-color 200ms ease,transform 160ms var(--ease-out);}
.dsp-pill svg{width:16px;height:16px;flex:none}
.dsp-pill:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.dsp-pill:hover{border-color:rgba(231,225,213,.55)}}

/* ═════════════ Entrada (skill emilkowalski: ease-out fuerte, transform+opacity, stagger 60ms) ═════════════ */
@keyframes dsp-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes dsp-fade-only{from{opacity:0}}
.dsp-anim .dsp-reveal{animation:dsp-rise 560ms var(--ease-out) backwards;animation-delay:calc(var(--i,0)*60ms + 120ms)}
@media (prefers-reduced-motion:reduce){
  .dsp-anim .dsp-reveal{animation:dsp-fade-only 240ms ease-out backwards;animation-delay:0ms}
}

/* ═════════════ Banner "Conseguí Despoblados" (includes/despoblados/banner-orsai.php) ═════════════ */
.dsp-banner{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:26px;
  padding:34px 26px;border-radius:22px;border:1px solid rgba(200,36,36,.3);
  background:linear-gradient(to bottom right,var(--panel-1),var(--panel-2));box-shadow:0 26px 50px -22px rgba(0,0,0,.7);
}
.dsp-banner::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 90% at 12% 50%,rgba(200,36,36,.2),rgba(200,36,36,0) 70%)}
.dsp-banner::after{   /* nombre del libro como "marca de agua" */
  content:"DESPOBLADOS";position:absolute;z-index:-1;right:4%;bottom:-.16em;pointer-events:none;white-space:nowrap;
  font-family:var(--font-display);font-weight:500;font-size:clamp(40px,11.4vw,128px);line-height:1;letter-spacing:-.03em;color:rgba(231,225,213,.04);
}
.dsp-banner__body{display:flex;flex-direction:column;gap:10px;min-width:0;max-width:56ch}
.dsp-banner__title{font-size:clamp(30px,7.4vw,46px);line-height:1.04;text-wrap:balance}
.dsp-banner__text{max-width:46ch;font-size:15.5px;line-height:1.6;color:var(--bone-dim);text-wrap:pretty}
.dsp-banner__cta{flex:none;padding:15px 26px;font-size:12px}
.dsp-banner__cta svg{width:15px;height:15px;flex:none;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.dsp-banner__cta:hover svg{transform:translate(2px,-2px)}}
@media (min-width:768px){
  .dsp-banner{flex-direction:row;align-items:center;justify-content:space-between;gap:40px;padding:48px 52px}
}
/* versión más baja para intercalar entre listas */
.dsp-banner--inline{padding-block:28px}
@media (min-width:768px){.dsp-banner--inline{padding:34px 44px}}
.dsp-banner--inline .dsp-banner__title{font-size:clamp(26px,5.6vw,36px)}
@media (prefers-reduced-motion:reduce){.dsp-banner__cta svg{transition:none}}