/* ==========================================================================
   Plugins AyudaWP — landing 1.0
   Sistema «De cabecera» · acento terracota · tema claro/oscuro
   Mismo esqueleto que servicios, campus y mantenimiento.
   ========================================================================== */

/* -------- Fuentes autoalojadas (sin Google Fonts) ------------------------ */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-sans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-sans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/bricolage-grotesque-var.woff2') format('woff2')}

/* -------- Tokens ---------------------------------------------------------
   El acento terracota sale de --accent y --accent-deep. Cambia esos dos
   valores en los tres bloques (root, dark y light) y se actualiza todo.
   Familia: servicios #4181a8 · mantenimiento #2d9484 · campus #7263cf
   -------------------------------------------------------------------------- */
:root{
  color-scheme:light dark;
  --bg:#fbf6ee; --surface:#fff; --panel:#fff;
  --ink:#262019; --ink-2:#5d5342; --ink-hi:#3d372c; --meta:#77694e; --meta-2:#7c6f54;
  --line:#e8ddc8; --line-2:#e0d5c0;
  --accent:#b8501e; --accent-deep:#9a3f12; --marker:#ffe45c; --ok:#1f9d7a;
  --shadow:rgba(38,32,25,.10); --shadow-hard:rgba(38,32,25,.16); --accent-shadow:rgba(184,80,30,.22);
  --btn-bg:#262019; --btn-ink:#fbf6ee; --outline-ink:#262019; --btn-hover:#9a3f12;
  --band:#9a3f12; --focus:#9a3f12;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#171310; --surface:#211b14; --panel:#1d1812;
    --ink:#f0e9db; --ink-2:#b3a68e; --ink-hi:#d8cfc0; --meta:#9a8b6f; --meta-2:#a0937c;
    --line:#3a3226; --line-2:#3a3226;
    --accent:#f0975c; --accent-deep:#f0975c; --marker:#ffe45c; --ok:#57e6a8;
    --shadow:rgba(0,0,0,.45); --shadow-hard:rgba(0,0,0,.45); --accent-shadow:rgba(184,80,30,.32);
    --btn-bg:#f0e9db; --btn-ink:#14100b; --outline-ink:#f0e9db; --btn-hover:#f0975c;
    --band:#8f3a12; --focus:#f0975c;
  }
}
html.light{
  --bg:#fbf6ee; --surface:#fff; --panel:#fff;
  --ink:#262019; --ink-2:#5d5342; --ink-hi:#3d372c; --meta:#77694e; --meta-2:#7c6f54;
  --line:#e8ddc8; --line-2:#e0d5c0;
  --accent:#b8501e; --accent-deep:#9a3f12; --marker:#ffe45c; --ok:#1f9d7a;
  --shadow:rgba(38,32,25,.10); --shadow-hard:rgba(38,32,25,.16); --accent-shadow:rgba(184,80,30,.22);
  --btn-bg:#262019; --btn-ink:#fbf6ee; --outline-ink:#262019; --btn-hover:#9a3f12; --band:#9a3f12; --focus:#9a3f12;
}
html.dark{
  --bg:#171310; --surface:#211b14; --panel:#1d1812;
  --ink:#f0e9db; --ink-2:#b3a68e; --ink-hi:#d8cfc0; --meta:#9a8b6f; --meta-2:#a0937c;
  --line:#3a3226; --line-2:#3a3226;
  --accent:#f0975c; --accent-deep:#f0975c; --marker:#ffe45c; --ok:#57e6a8;
  --shadow:rgba(0,0,0,.45); --shadow-hard:rgba(0,0,0,.45); --accent-shadow:rgba(184,80,30,.32);
  --btn-bg:#f0e9db; --btn-ink:#14100b; --outline-ink:#f0e9db; --btn-hover:#f0975c; --band:#8f3a12; --focus:#f0975c;
}

/* -------- Base ----------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
h1,h2,h3{font-family:'Bricolage Grotesque','IBM Plex Sans',sans-serif;margin:0}
p{margin:0}
figure,blockquote{margin:0}
.container{max-width:1200px;margin:0 auto;padding:0 48px}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:10px 16px;font:600 13px/1 'Bricolage Grotesque',sans-serif;z-index:200}
.skip-link:focus{left:8px;top:8px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:0}

/* Marcador amarillo, se «dibuja» al entrar en pantalla. Sin JS se ve entero.
   Mientras no está dibujado el texto conserva su color, que si no en tema
   oscuro quedaría tinta oscura sobre fondo oscuro y no se leería. */
.mark{background-image:linear-gradient(var(--marker),var(--marker));background-repeat:no-repeat;background-position:0 center;background-size:100% 1.05em;color:#262019;padding:.04em .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.js .mark{background-size:0 1.05em;color:inherit}
html.js .mark.in{color:#262019;animation:draw .9s ease both}
@keyframes draw{from{background-size:0 1.05em}to{background-size:100% 1.05em}}
.cursor{display:inline-block;width:9px;height:15px;background:var(--accent);animation:blink 1.15s steps(1) infinite;vertical-align:middle}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}

/* -------- Botones -------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 'Bricolage Grotesque',sans-serif;text-decoration:none;cursor:pointer;border:1.5px solid transparent;border-radius:0;padding:16px 26px;transition:background-color .15s,border-color .15s,color .15s}
.btn--sm{font-size:13px;padding:10px 16px}
.btn--block{display:flex;width:100%;text-align:center}
.btn--primary{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.btn--primary:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:#fff}
html.dark .btn--primary:hover{color:#14100b}
@media (prefers-color-scheme:dark){:root:not(.light) .btn--primary:hover{color:#14100b}}
.btn--outline{background:transparent;color:var(--outline-ink);border-color:var(--outline-ink)}
html.light .btn--outline:hover,:root:not(.dark) .btn--outline:hover{background:rgba(38,32,25,.06)}
html.dark .btn--outline:hover{background:rgba(240,233,219,.10)}
/* Botón de acción: terracota profundo con texto blanco (contraste 6,8:1) */
.btn--accent{background:#9a3f12;color:#fff;border-color:#9a3f12}
.btn--accent:hover{background:#6f2c0b;border-color:#6f2c0b;color:#fff}
.btn--ink{background:#262019;color:#fbf6ee;border-color:#262019}
.btn--ink:hover{background:#0f0c08;border-color:#0f0c08}

/* -------- Cabecera ------------------------------------------------------- */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:relative}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:15px;padding-bottom:15px}
.brand{display:inline-flex;align-items:baseline;gap:2px;text-decoration:none;color:var(--ink)}
.brand b{font:800 19px/1 'Bricolage Grotesque',sans-serif}
.brand span{font:600 13px/1 'IBM Plex Mono',monospace;color:var(--accent)}
.nav{display:flex;align-items:center;gap:24px}
.nav a{font:500 13.5px/1 'IBM Plex Sans',sans-serif;color:var(--ink-2);text-decoration:none}
.nav a:hover{color:var(--ink)}
.nav a.is-active{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:3px}
/* En pantallas intermedias el menú no cabe entero, así que el blog se cae.
   Por debajo de 861px el menú pasa a desplegable y vuelve a salir. */
@media (min-width:861px) and (max-width:1220px){.nav a.nav-blog{display:none}}
.header-actions{display:flex;align-items:center;gap:14px}
.lang{font:500 11px/1 'IBM Plex Mono',monospace;color:var(--meta)}
.lang a{color:var(--meta);text-decoration:none}
.lang a:hover{color:var(--ink)}
.lang .on{color:var(--ink)}
.nav-only{display:none}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1.5px solid var(--ink);color:var(--ink);font-size:18px;cursor:pointer}

/* -------- Secciones ------------------------------------------------------ */
.section{padding:52px 0}
.section--panel{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.section__head--stack{display:block}
.section h2{font-size:clamp(24px,4vw,32px);line-height:1.1;font-weight:800;letter-spacing:-.015em}
.section__lead{font-size:15px;line-height:1.5;color:var(--ink-2);margin-top:6px;max-width:640px}
.section__note{font:400 12px/1.4 'IBM Plex Mono',monospace;color:var(--meta-2)}

/* -------- Hero ----------------------------------------------------------- */
.hero .container{padding-top:60px;padding-bottom:24px}
.hero__inner{max-width:780px}
.eyebrow{font:500 11px/1.4 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:18px}
.hero h1{font-size:clamp(32px,5.4vw,56px);line-height:1.04;font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
.hero__inner>p{font-size:clamp(15px,2.1vw,17px);line-height:1.6;color:var(--ink-2);max-width:600px}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;max-width:none;font:400 12px/1.4 'IBM Plex Mono',monospace;color:var(--meta)}
.hero__facts span{white-space:nowrap}

/* -------- Selector: problema → plugin ------------------------------------ */
.picker .container{padding-top:26px;padding-bottom:56px}
.picker__grid{display:flex;gap:28px;align-items:stretch}
.picker__opts{flex:1;display:flex;flex-direction:column;gap:9px}
.sel-label{font:500 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--meta);margin-bottom:4px}
.selopt{border:1.5px solid var(--line-2);background:var(--surface);padding:14px 18px;font:600 14.5px/1.2 'Bricolage Grotesque',sans-serif;color:var(--ink-2);cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:border-color .15s}
.selopt:hover{border-color:var(--ink)}
.selopt[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--btn-ink)}
.selopt__tag{font:600 10px/1 'IBM Plex Mono',monospace;background:var(--marker);color:#262019;padding:5px 8px;letter-spacing:.1em;flex:none}
.selector__hint{font:400 12px/1.6 'IBM Plex Mono',monospace;color:var(--meta);margin-top:6px}
.selector__hint a{color:var(--accent-deep)}
.picker__reco{flex:1.4;background:var(--surface);border:1.5px solid var(--ink);padding:28px 32px;position:relative;box-shadow:6px 6px 0 var(--accent-shadow);display:flex;flex-direction:column}
.reco__badge{position:absolute;top:-13px;left:26px;background:var(--marker);color:#262019;font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;padding:7px 10px;transform:rotate(-1.5deg)}
.reco__title{font:800 24px/1.15 'Bricolage Grotesque',sans-serif;margin:8px 0 18px}
.reco__cols{display:flex;gap:26px}
.reco__c{flex:1}
.reco__c+.reco__c{border-left:1px dashed var(--line-2);padding-left:26px;display:flex;flex-direction:column}
.reco__k{font:600 11px/1 'IBM Plex Mono',monospace;color:var(--accent-deep);letter-spacing:.08em;margin-bottom:8px}
.reco__c p{font-size:13.5px;line-height:1.55;color:var(--ink-hi);margin-bottom:16px}
.reco__feats{font:400 12.5px/2 'IBM Plex Mono',monospace;color:var(--ink-hi)}
.reco__cta{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:10px}
.reco__note{text-align:center;font:400 11.5px/1.4 'IBM Plex Mono',monospace;color:var(--meta)}
.reco__price{display:flex;align-items:baseline;gap:10px;font-family:'IBM Plex Mono',monospace}
.reco__price b{font:600 22px/1 'Bricolage Grotesque',sans-serif;color:var(--ink)}
.reco__price s{font-size:13px;color:var(--meta)}

/* -------- Catálogo de plugins -------------------------------------------- */
.plugs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.plug{background:var(--bg);border:1px solid var(--line-2);padding:24px;display:flex;flex-direction:column}
.plug__tag{font:600 10px/1.3 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--accent-deep);margin-bottom:12px}
.plug h3{font:700 18px/1.25 'Bricolage Grotesque',sans-serif;margin-bottom:8px}
.plug p{font-size:13px;line-height:1.55;color:var(--ink-2);margin-bottom:14px}
.plug__list{font:400 12px/1.9 'IBM Plex Mono',monospace;color:var(--ink-hi);margin-bottom:16px}
.plug__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px dashed var(--line-2);padding-top:14px}
.price{display:flex;align-items:baseline;gap:8px;font-family:'IBM Plex Mono',monospace}
.price b{font:600 18px/1 'Bricolage Grotesque',sans-serif;color:var(--ink)}
.price s{font-size:12px;color:var(--meta)}
.price--free b{color:var(--accent-deep)}
.plug__link{font:600 13px/1 'Bricolage Grotesque',sans-serif;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px;white-space:nowrap}
.plug__link:hover{border-bottom-color:var(--ink)}

/* -------- Qué incluye cada compra ---------------------------------------- */
.incl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1.5px solid var(--ink);background:var(--surface)}
.incl__i{padding:24px 26px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.incl__i:nth-child(3n){border-right:0}
.incl__i:nth-last-child(-n+3){border-bottom:0}
.incl__k{font:600 11px/1 'IBM Plex Mono',monospace;color:var(--accent-deep);letter-spacing:.08em;margin-bottom:10px}
.incl__i h3{font:700 16px/1.25 'Bricolage Grotesque',sans-serif;margin-bottom:6px}
.incl__i p{font-size:13px;line-height:1.55;color:var(--ink-2)}

/* -------- Comparativa ---------------------------------------------------- */
.vs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.vscard{border:1px solid var(--line-2);background:var(--bg);padding:24px}
.vscard--own{border:1.5px solid var(--ink);background:var(--surface);box-shadow:6px 6px 0 var(--accent-shadow)}
.vscard h3{font:700 17px/1.25 'Bricolage Grotesque',sans-serif;margin-bottom:12px}
.vslist{font:400 12.5px/2 'IBM Plex Mono',monospace;color:var(--ink-hi)}
.vslist .no{color:var(--meta)}

/* -------- Autor ---------------------------------------------------------- */
.author__grid{display:flex;gap:28px;align-items:flex-start}
.author__col{flex:1.25}
.author{flex:1;background:var(--surface);border:1.5px solid var(--ink);padding:26px 28px;box-shadow:6px 6px 0 var(--accent-shadow)}
.author__top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
/* object-fit para que la foto no se deforme: la original no es cuadrada. */
.author__top img{width:86px;height:86px;border-radius:50%;object-fit:cover;background:var(--line);box-shadow:4px 4px 0 var(--shadow);transform:rotate(-3deg);flex:none}
.author__title{font:800 17px/1.2 'Bricolage Grotesque',sans-serif}
.author__meta{font:400 11.5px/1.4 'IBM Plex Mono',monospace;color:var(--meta);margin-top:5px}
.author p{font-size:14px;line-height:1.6;color:var(--ink-2);margin-bottom:16px}
.trust{display:flex;flex-direction:column;gap:12px}
.trust__i{border-left:2px solid var(--accent);padding-left:16px}
.trust__i b{font:700 15px/1.3 'Bricolage Grotesque',sans-serif;display:block;margin-bottom:3px}
.trust__i span{font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* -------- FAQ (details/summary, funciona sin JS) ------------------------- */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;font:600 15.5px/1.35 'Bricolage Grotesque',sans-serif;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);font:400 22px/1 'IBM Plex Mono',monospace;color:var(--accent-deep)}
.faq details[open] summary::after{content:'−'}
.faq summary:hover{color:var(--accent-deep)}
.faq__a{padding:0 40px 20px 0;font-size:14px;line-height:1.65;color:var(--ink-2);max-width:800px}
.faq__a a{color:var(--accent-deep)}

/* -------- Banda CTA ------------------------------------------------------ */
/* La banda usa --band y no --accent, porque en oscuro el acento se aclara y
   el texto blanco encima dejaría de cumplir contraste. */
.cta{background:var(--band);color:#fff;padding:42px 0}
.cta .container{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta h2{font-size:clamp(22px,3.4vw,28px);line-height:1.15;font-weight:800;margin-bottom:8px}
.cta p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.88);max-width:620px}
.cta__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cta .btn--ink{background:#fbf6ee;color:#262019;border-color:#fbf6ee}
.cta .btn--ink:hover{background:#fff;border-color:#fff}
.cta__note{font:400 12px/1.4 'IBM Plex Mono',monospace;color:rgba(255,255,255,.8)}

/* -------- Footer terminal ------------------------------------------------ */
.site-footer{background:var(--bg);border-top:1px solid var(--line);padding:34px 0 26px}
.footer__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--line)}
.termline{font:400 13px/1 'IBM Plex Mono',monospace;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--ink-2)}
.termline .u{color:var(--accent)}
.termline .c,.termline .d{color:var(--meta)}
.termline .t{color:var(--ink-2)}
.termline .cmd{color:var(--ink)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{font:500 11.5px/1 'IBM Plex Mono',monospace;border:1px solid var(--line-2);padding:8px 12px;color:var(--ink-2);text-decoration:none}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding:26px 0}
.flogo{display:inline-flex;align-items:baseline;gap:2px;margin-bottom:10px}
.flogo b{font:800 17px/1 'Bricolage Grotesque',sans-serif;color:var(--ink)}
.flogo span{font:600 12px/1 'IBM Plex Mono',monospace;color:var(--accent)}
.footer__brand p{font-size:13px;line-height:1.6;color:var(--ink-2);max-width:420px}
.footer__label{font:600 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--meta);margin-bottom:12px}
.lines{font:400 13px/2 'IBM Plex Mono',monospace}
.lines a{color:var(--ink-2);text-decoration:none}
.lines a:hover{color:var(--ink)}
.footer__legal{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;font:400 12px/1.6 'IBM Plex Mono',monospace;color:var(--meta)}
.footer__legal a{color:var(--meta);text-decoration:none;margin-right:14px}
.footer__legal a:hover{color:var(--ink)}
.footer__legal nav{display:flex;flex-wrap:wrap}

/* -------- Conmutador de tema --------------------------------------------- */
.tema{position:fixed;right:14px;bottom:14px;display:flex;gap:0;border:1.5px solid var(--ink);background:var(--surface);z-index:90}
.tema button{background:transparent;border:0;border-right:1px solid var(--line-2);color:var(--ink-2);font:500 11px/1 'IBM Plex Mono',monospace;padding:9px 11px;cursor:pointer}
.tema button:last-child{border-right:0}
.tema button[aria-pressed="true"]{background:var(--ink);color:var(--btn-ink)}

/* -------- Consola del footer --------------------------------------------- */
.term-overlay{position:fixed;inset:0;background:rgba(20,16,11,.62);display:flex;align-items:center;justify-content:center;padding:20px;z-index:150}
.term-overlay[hidden]{display:none}
.term-win{width:min(680px,100%);background:#14100b;border:1.5px solid #3a3226;box-shadow:8px 8px 0 rgba(184,80,30,.35);font-family:'IBM Plex Mono',monospace;color:#f0e9db}
.term-winbar{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid #3a3226}
.term-winbar .b{width:11px;height:11px;border-radius:50%}
.term-winbar .r{background:#e05a47}.term-winbar .y{background:#e8c05a}.term-winbar .g{background:#5ac07a}
.term-winbar .tt{flex:1;text-align:center;font-size:11.5px;color:#9a8b6f}
.term-winbar .x{background:transparent;border:0;color:#9a8b6f;font-size:16px;cursor:pointer;line-height:1}
.term-out{padding:16px 18px;font-size:13px;line-height:1.9;max-height:52vh;overflow:auto}
.term-out .pr{color:#f0975c}
.term-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.term-chip{background:transparent;border:1px solid #3a3226;color:#f0e9db;font:400 12px/1 'IBM Plex Mono',monospace;padding:7px 10px;cursor:pointer}
.term-chip:hover{border-color:#f0975c;color:#f0975c}
.t-hint{color:#9a8b6f;font-size:11.5px;margin-top:6px}
.term-inrow{display:flex;align-items:center;gap:8px;border-top:1px solid #3a3226;padding:11px 18px}
.term-inrow .pr{color:#f0975c;font-size:13px}
.term-in{flex:1;background:transparent;border:0;color:#f0e9db;font:400 13px/1 'IBM Plex Mono',monospace;outline:none}

/* -------- Responsive ----------------------------------------------------- */
@media (max-width:1000px){
  .plugs,.incl,.vs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .incl__i:nth-child(3n){border-right:1px solid var(--line-2)}
  .incl__i:nth-child(2n){border-right:0}
  .incl__i:nth-last-child(-n+3){border-bottom:1px solid var(--line-2)}
  .incl__i:nth-last-child(-n+2){border-bottom:0}
  .picker__grid,.author__grid{flex-direction:column}
  .footer__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .container{padding:0 24px}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 18px;display:none;z-index:100}
  .site-header.nav-open .nav{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-only{display:block}
  .nav .lang.nav-only{padding:14px 0}
  .header-actions>.btn,.header-actions>.lang{display:none}
  .nav-toggle{display:inline-flex}
  .reco__cols{flex-direction:column;gap:0}
  .reco__c+.reco__c{border-left:0;border-top:1px dashed var(--line-2);padding-left:0;padding-top:16px}
}
@media (max-width:640px){
  .plugs,.incl,.vs{grid-template-columns:1fr}
  .incl__i{border-right:0!important;border-bottom:1px solid var(--line-2)!important}
  .incl__i:last-child{border-bottom:0!important}
  .footer__cols{grid-template-columns:1fr}
  .hero .container{padding-top:40px}
  .section{padding:40px 0}
  .tema{right:10px;bottom:10px}
}