/* Jungla Digital — base: reset suave, tipografía, layout, transición de modo. */

*,*::before,*::after{box-sizing:border-box}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.screen-reader-text:focus{position:fixed!important;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:99999;background:var(--bg);color:var(--fg);padding:10px 16px;border:1px solid var(--primary);border-radius:8px}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease;
}
:root[data-mode="consola"] body{font-family:var(--font-mono);font-size:16px}

img,svg,video{max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none;transition:color .15s,opacity .15s}
a:hover{opacity:.82}
a:focus-visible,button:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-sans);font-weight:700;letter-spacing:-0.035em;line-height:1.06;color:var(--fg);margin:0 0 .4em}
:root[data-mode="consola"] h1,:root[data-mode="consola"] h2,:root[data-mode="consola"] h3,:root[data-mode="consola"] h4{font-family:var(--font-mono);letter-spacing:-0.02em}
h1{font-size:clamp(34px,6vw,64px)}
h2{font-size:clamp(26px,4vw,40px)}

.jd-container{max-width:var(--content);margin:0 auto;padding:0 clamp(20px,5vw,44px)}

/* kicker monoespaciado (antetítulo) */
.jd-kicker{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}

/* chip / pill */
.jd-chip{display:inline-block;font-size:13px;font-weight:500;color:var(--fg);border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 13px;white-space:nowrap}
:root[data-mode="consola"] .jd-chip{border-radius:4px}
.jd-chip--solid{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}

/* botón */
.jd-btn{display:inline-block;font-family:inherit;font-weight:600;font-size:15.5px;padding:13px 26px;border-radius:var(--radius-pill);border:1px solid var(--fg);background:var(--fg);color:var(--bg);cursor:pointer;transition:transform .15s,filter .15s}
:root[data-mode="consola"] .jd-btn{border-radius:4px}
.jd-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.jd-btn--ghost{background:transparent;color:var(--fg);border-color:var(--line)}

/* marca de resaltado */
.jd-mark{background:var(--acid);color:var(--on-acid);padding:0 .15em;border-radius:2px}

/* ── Campos de formulario — consistentes en TODO el sitio ── */
.jd-input,
.jd-news__form input[type=text],
.jd-news__form input[type=email],
.jd-searchform input[type=search]{
  width:100%;font:inherit;font-size:15.5px;color:var(--fg);
  background:var(--field);border:1px solid var(--field-border);border-radius:var(--radius-field);
  padding:13px 16px;transition:border-color .15s,box-shadow .15s}
.jd-input::placeholder,
.jd-news__form input::placeholder,
.jd-searchform input::placeholder{color:var(--dim);opacity:.85}
.jd-input:focus,
.jd-news__form input[type=text]:focus,
.jd-news__form input[type=email]:focus,
.jd-searchform input[type=search]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
:root[data-mode="consola"] .jd-input,
:root[data-mode="consola"] .jd-news__form input[type=text],
:root[data-mode="consola"] .jd-news__form input[type=email],
:root[data-mode="consola"] .jd-searchform input[type=search]{font-family:var(--font-mono)}

/* texto acento (editorial serif en selva) */
.jd-accent{color:var(--primary)}
:root[data-mode="selva"] .jd-accent{font-family:var(--font-serif);font-style:italic;font-weight:400}

/* ── Scanlines — solo Consola (ocultas en móvil por perf) ── */
.jd-scanlines{position:fixed;inset:0;pointer-events:none;z-index:1;display:none}
:root[data-mode="consola"] .jd-scanlines{display:block;background-image:repeating-linear-gradient(0deg,rgba(52,224,122,.04) 0,rgba(52,224,122,.04) 1px,transparent 1px,transparent 3px);opacity:.6}
@media (max-width:781px){:root[data-mode="consola"] .jd-scanlines{display:none}}

::selection{background:var(--acid);color:var(--on-acid)}

@keyframes jdFade{from{transform:translateY(7px);opacity:.6}to{transform:none;opacity:1}}
.jd-fade{animation:jdFade .42s ease}

/* respeta reduce-motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* (El chrome —header, nav, footer, switch, menú móvil— vive en chrome.css) */

/* demo Fase 2 */
.jd-demo__row{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.jd-demo__swatches{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.jd-sw{width:96px;height:64px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:flex-end;padding:6px}
.jd-sw code{font-family:var(--font-mono);font-size:11px;background:var(--bg);color:var(--fg);padding:1px 5px;border-radius:4px}
.jd-postlist{list-style:none;margin:0;padding:0}
.jd-postlist__item{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.jd-postlist__meta{color:var(--dim);font-size:14px;font-family:var(--font-mono)}
.jd-content>*{margin-top:1em}
.jd-content h2,.jd-content h3,.jd-content h4{margin-top:1.4em}