@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/michroma-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/poppins-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/poppins-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/poppins-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   MEMETIC TEES — HOME 2027
   Design tokens
   ============================================================ */
:root{
  --paper:#FAFAF8;          /* warm off-white  */
  --paper-2:#F2F2EE;        /* recessed surface */
  --ink:#202427;            /* graphite */
  --ink-60:rgba(32,36,39,.72);   /* AA on paper: 6.1:1 */
  --ink-40:rgba(32,36,39,.64);   /* AA on paper: 4.7:1 */
  --rule:rgba(32,36,39,.16);
  --rule-strong:rgba(32,36,39,.32);
  --rule-input:rgba(32,36,39,.52);  /* 3:1 non-text contrast */
  --carbon:#111315;         /* dark module */
  --carbon-2:#191C1F;
  --on-carbon:#EDEDE8;
  --on-carbon-60:rgba(237,237,232,.62);
  --rule-dark:rgba(237,237,232,.18);
  --signal:#BABA00;         /* accent — rules, marks, dark surfaces only */
  --signal-deep:#6E6E00;    /* accessible accent text on paper */
  --alert:#C93632;          /* control / system-error concepts only */
  --alert-light:#E4534E;    /* small alert text on carbon */

  --display:'Michroma','Poppins',system-ui,sans-serif;
  --text:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --wrap:1280px;
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(20px,2.6vw,32px);
  --sec:clamp(64px,9vw,128px);
}

*,*::before,*::after{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(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}

/* focus */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
.on-dark :focus-visible{outline-color:var(--signal)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
section{scroll-margin-top:96px}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-60);margin:0;
}
.on-dark .eyebrow{color:var(--on-carbon-60)}
.sys{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
.on-dark .sys{color:var(--on-carbon-60)}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.h-display{
  font-family:var(--display);font-weight:400;letter-spacing:-.01em;
  line-height:1.18;text-transform:none;
}
h2{font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.15rem,2.15vw,1.75rem);line-height:1.22}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}
p{margin:0}
.lede{font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.6;color:var(--ink-60);max-width:60ch}
.on-dark .lede{color:var(--on-carbon-60)}

/* section header block */
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px;
  padding-bottom:22px;border-bottom:1px solid var(--rule);margin-bottom:clamp(32px,4vw,56px)}
.sec-head .end{flex-basis:100%}
@media(min-width:760px){.sec-head .end{flex-basis:auto;margin-left:auto}}
.sec-head .num{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--ink-40)}
.on-dark .sec-head{border-color:var(--rule-dark)}
.on-dark .sec-head .num{color:var(--on-carbon-60)}

/* ---------- buttons ---------- */
:is(.btn:not(.wp-block-button), .wp-block-button.btn > .wp-block-button__link){
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-radius:0;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
:is(.btn:not(.wp-block-button), .wp-block-button.btn > .wp-block-button__link):hover{background:transparent;color:var(--ink)}
:is(.btn--ghost:not(.wp-block-button), .wp-block-button.btn--ghost > .wp-block-button__link){background:transparent;color:var(--ink)}
:is(.btn--ghost:not(.wp-block-button), .wp-block-button.btn--ghost > .wp-block-button__link):hover{background:var(--ink);color:var(--paper)}
.on-dark :is(.btn:not(.wp-block-button), .wp-block-button.btn > .wp-block-button__link){background:var(--on-carbon);border-color:var(--on-carbon);color:var(--carbon)}
.on-dark :is(.btn:not(.wp-block-button), .wp-block-button.btn > .wp-block-button__link):hover{background:transparent;color:var(--on-carbon)}
.on-dark :is(.btn--ghost:not(.wp-block-button), .wp-block-button.btn--ghost > .wp-block-button__link){background:transparent;color:var(--on-carbon);border-color:var(--rule-dark)}
.on-dark :is(.btn--ghost:not(.wp-block-button), .wp-block-button.btn--ghost > .wp-block-button__link):hover{background:var(--on-carbon);color:var(--carbon);border-color:var(--on-carbon)}
.btn .ar{transition:transform .18s ease}
.btn:hover .ar{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.btn,.btn .ar{transition:none}}

/* inline text link with signal underline */
:is(.tlink:not(.wp-block-button), .wp-block-button.tlink > .wp-block-button__link){
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid var(--rule-strong);
}
:is(.tlink:not(.wp-block-button), .wp-block-button.tlink > .wp-block-button__link):hover{border-bottom-color:var(--signal-deep);color:var(--signal-deep)}
.on-dark :is(.tlink:not(.wp-block-button), .wp-block-button.tlink > .wp-block-button__link){border-bottom-color:var(--rule-dark)}
.on-dark :is(.tlink:not(.wp-block-button), .wp-block-button.tlink > .wp-block-button__link):hover{border-bottom-color:var(--signal);color:var(--signal)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:var(--hdr-top);z-index:100;background:rgba(250,250,248,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--rule);
}
.hd{display:flex;align-items:center;gap:clamp(14px,2vw,28px);min-height:68px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto}
.brand img{width:132px;height:auto}
.brand-tag{
  display:none;padding-left:16px;border-left:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);
}
.nav{margin-left:auto;display:none;align-items:center;gap:clamp(14px,1.8vw,26px)}
.nav a{
  text-decoration:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-60);padding:6px 0;border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--signal)}
/* El botón de la cabecera es más pequeño que el de la página. Va con el mismo
   `:is()` que la regla base porque si no pierde por especificidad: `:is()` toma
   la del argumento más fuerte, y `.wp-block-button.btn > .wp-block-button__link`
   son tres clases. Medido: sin esto la cabecera salía con 14/22 y 12 px. */
.hd :is(.btn, .wp-block-button.btn > .wp-block-button__link){padding:11px 16px;font-size:11px}
.hd-cta{display:none}
.burger{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;background:none;
  border:1px solid var(--rule-strong);padding:10px 14px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.burger svg{width:14px;height:14px}
#mnav{display:none;border-top:1px solid var(--rule);background:var(--paper)}
#mnav[data-open="true"]{display:block}
#mnav ul{list-style:none;margin:0;padding:8px 0 20px}
#mnav ul a{display:block;padding:13px 0;text-decoration:none;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase}
#mnav .btn{margin-top:20px;width:100%;justify-content:center}
@media(min-width:900px){
  .nav{display:flex}.hd-cta{display:inline-flex}.burger{display:none}
  #mnav{display:none!important}
}
@media(min-width:1120px){.brand-tag{display:block}}

/* system bar */
.sysbar{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.sysbar .wrap{display:flex;flex-wrap:wrap;gap:6px 28px;padding-block:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}
.sysbar b{font-weight:400;color:var(--ink)}
.dot{display:inline-block;width:6px;height:6px;background:var(--signal);margin-right:8px;vertical-align:1px}


/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,7vw,96px) clamp(48px,7vw,104px)}
.hero-copy{grid-column:1/-1;display:flex;flex-direction:column;gap:26px}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,6.4vw,4.3rem);line-height:1.05;letter-spacing:-.03em;
  max-width:13ch;
}
.hero .rule{width:100%;height:1px;background:var(--rule)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 30px;padding-top:6px}
.hero-fig{grid-column:1/-1;margin-top:12px}
figure{margin:0}
figcaption{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-40)}
.plate{
  position:relative;border:1px solid var(--rule);background:var(--paper-2);
}
.plate::before,.plate::after{
  content:"";position:absolute;width:9px;height:9px;border:1px solid var(--rule-strong);
}
.plate::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.plate::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
@media(min-width:880px){
  .hero-copy{grid-column:1/7}
  .hero-fig{grid-column:8/-1;margin-top:0;align-self:center}
  .hero h1{font-size:clamp(2.5rem,4.7vw,3.9rem)}
}
@media(min-width:1180px){.hero-copy{grid-column:1/7}.hero-fig{grid-column:8/13}}

/* ---------- dark module base ---------- */
.on-dark{background:var(--carbon);color:var(--on-carbon)}
.on-dark h2,.on-dark h3{color:var(--on-carbon)}

/* ---------- featured concept ---------- */
.concept{padding-block:var(--sec)}
.concept-inner{align-items:start}
.concept-file{grid-column:1/-1;display:flex;flex-direction:column;gap:22px}
.filecard{border:1px solid var(--rule-dark);padding:18px 20px;display:grid;gap:12px}
.filerow{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.filerow+.filerow{padding-top:12px;border-top:1px solid var(--rule-dark)}
.filerow :is(dt, .fk){color:var(--on-carbon-60);margin:0}
.filerow :is(dd, .fv){margin:0;text-align:right;color:var(--on-carbon)}
.status-bad{color:var(--alert-light)}
.status-bad::before{content:"";display:inline-block;width:7px;height:7px;background:var(--alert);margin-right:9px;vertical-align:1px}
.concept .concept-title{font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.1vw,2.3rem);line-height:1.14}
.entity{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal)}
.disclaim{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--on-carbon-60);line-height:1.9;
  padding-top:16px;border-top:1px solid var(--rule-dark)}
.artplate{
  grid-column:1/-1;position:relative;background:var(--carbon-2);
  border:1px solid var(--rule-dark);padding:clamp(22px,4vw,44px);
  display:flex;flex-direction:column;justify-content:center;
}
.artplate img{width:100%;height:auto}
.artplate .ticks{position:absolute;inset:10px;pointer-events:none;
  border:1px solid rgba(237,237,232,.07)}
.artplate .tag{position:absolute;left:0;bottom:-1px;transform:translateY(100%);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-carbon-60);padding-top:12px}
@media(min-width:880px){
  .concept-file{grid-column:1/6}
  .artplate{grid-column:7/-1;align-self:stretch}
}

/* ---------- territories ---------- */
.terr{padding-block:var(--sec)}
.terr-list{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--rule)}
.terr-item{
  display:flex;flex-direction:column;gap:16px;padding:34px 0;
  border-bottom:1px solid var(--rule);
}
.terr-item .idx{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--ink-40)}
.terr-item h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.terr-icon{width:52px;height:52px;color:var(--ink);margin-top:4px}
.terr-item .def{color:var(--ink-60);max-width:44ch}
.keys{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0;padding:0}
.keys li{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-60);border:1px solid var(--rule);padding:5px 9px}
.terr-item .tlink{margin-top:auto;padding-top:14px;align-self:start}
@media(min-width:640px){
  .terr-list{grid-template-columns:repeat(2,1fr);column-gap:var(--gap);border-top:0}
  .terr-item{border-top:1px solid var(--rule);border-bottom:0;padding:30px 0 0;
    padding-right:clamp(0px,2vw,24px)}
}
@media(min-width:1040px){
  .terr-list{grid-template-columns:repeat(4,1fr)}
  .terr-item .def{font-size:.95rem}
  .terr-item .keys li{font-size:10px;padding:5px 8px}
}

/* ---------- selection ---------- */
.sel{padding-block:var(--sec);background:var(--paper-2);border-block:1px solid var(--rule)}
.sel-grid{grid-template-columns:1fr;display:grid;gap:clamp(34px,4vw,44px)}
.card{display:flex;flex-direction:column;gap:18px;height:100%}
.card .tlink{margin-top:auto}
.card-art{
  position:relative;background:var(--carbon);border:1px solid var(--rule);
  aspect-ratio:4/5;display:grid;place-items:center;padding:clamp(16px,3vw,26px);overflow:hidden;
}
.card-art img{width:100%;height:auto;object-fit:contain;max-height:100%}
.card-art .frame{position:absolute;inset:9px;border:1px solid rgba(237,237,232,.08);pointer-events:none}
.card-art .badge{
  position:absolute;top:0;left:0;background:var(--carbon);color:var(--on-carbon-60);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  padding:7px 11px;border-right:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);
}
.card-meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding-bottom:12px;border-bottom:1px solid var(--rule)}
.card-meta h3{flex:1 1 auto;min-width:0}
.card-meta .pill{flex:0 0 auto}
.card h3{font-size:clamp(1.02rem,1.4vw,1.18rem);letter-spacing:-.01em}
.card .sub{color:var(--ink-60);font-size:.95rem}
.card .tlink{align-self:start}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60);white-space:nowrap}
.pill--prep{color:var(--signal-deep)}
.sel-note{margin-top:clamp(30px,4vw,44px);padding-top:18px;border-top:1px solid var(--rule)}
@media(min-width:760px){.sel-grid{grid-template-columns:repeat(3,1fr)}}

/* La portada pasó de un bloque HTML monolítico a grupos reales, para poder
   convertir secciones de una en una. WordPress mete margen entre los hijos de
   un wp:group; aquí el ritmo vertical lo llevan las secciones, así que se anula. */
.mt-home > *,
.mt-home main > *,
.mt-home .wp-block-group > *{margin-block-start:0;margin-block-end:0}

/* ---------- blog bridge ---------- */
.bridge{padding-block:var(--sec)}
.bridge-lead{grid-column:1/-1;display:flex;flex-direction:column;gap:20px}
/* La última entrada la sirve un Query Loop. El que ocupa la celda de la rejilla
   es el contenedor de la consulta; el <article> vive dentro y conserva su flex. */
.bridge-query{grid-column:1/-1}
.bridge-query .wp-block-post-template{margin:0;padding:0;list-style:none}
.bridge-query .wp-block-post-template > li{margin:0}
.bridge-post{display:flex;flex-direction:column;gap:16px;
  border-top:1px solid var(--rule);padding-top:26px}
.bridge-post .wp-block-post-title{font-size:clamp(1.3rem,2.3vw,1.85rem);
  letter-spacing:-.02em;line-height:1.25;margin:0}
.bridge-post .wp-block-post-title a{text-decoration:none}
.bridge-post .wp-block-post-title a:hover{color:var(--signal-deep)}
.bridge-post .lede p,
.bridge-post .lede{margin:0}
.bridge-post .kicker a{color:inherit;text-decoration:none}
.bridge-post .kicker a:hover{color:var(--signal-deep)}
.bridge-post .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-40)}
.bridge-post h3{font-size:clamp(1.3rem,2.3vw,1.85rem);letter-spacing:-.02em;line-height:1.25}
@media(min-width:880px){
  .bridge-lead{grid-column:1/5}
  .bridge-query{grid-column:6/-1}
  .bridge-post{border-top:0;padding-top:0}
}


/* blog bridge figure (the diagram lives here now, where a diagram earns its keep) */
.bridge-fig{margin:6px 0 4px}
.bridge-fig .plate{background:var(--paper-2);padding:6px}
.bridge-fig figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40)}

/* ---------- newsletter ---------- */
.news{padding-block:var(--sec);border-top:1px solid var(--rule)}
.news-copy{grid-column:1/-1;display:flex;flex-direction:column;gap:16px}
.news-form{grid-column:1/-1;margin-top:8px}
.field{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60)}
.field input[type=email]{
  width:100%;padding:15px 16px;border:1px solid var(--rule-input);background:var(--paper);
  border-radius:0;font-size:16px;
}
.field input[type=email]:focus-visible{border-color:var(--ink)}
.consent{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px}
.consent input{width:19px;height:19px;margin:3px 0 0;accent-color:var(--ink);flex:0 0 auto}
.consent label{font-size:.9rem;line-height:1.6;color:var(--ink-60)}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--signal-deep)}
.formnote{margin-top:16px;font-size:.82rem;color:var(--ink-40);max-width:52ch}
.formmsg,
.mc4wp-alert{margin-top:16px;padding:13px 15px;border:1px solid var(--rule-input);
  border-left:3px solid var(--signal);font-size:.9rem;display:none}
.formmsg[data-show="true"],
.mc4wp-alert{display:block}
.mc4wp-alert.mc4wp-error{border-left-color:var(--alert)}
.mc4wp-alert p{margin:0}
@media(min-width:880px){
  .news-copy{grid-column:1/6}
  .news-form{grid-column:7/12;margin-top:0}
}

/* ---------- footer ---------- */
.site-footer{background:var(--carbon);color:var(--on-carbon);padding-block:clamp(52px,7vw,86px) 30px}
.f-top{padding-bottom:clamp(36px,5vw,54px);border-bottom:1px solid var(--rule-dark)}
.f-brand{grid-column:1/-1;display:flex;flex-direction:column;gap:16px}
.f-brand img{width:150px;height:auto}
.f-brand p{max-width:34ch;color:var(--on-carbon-60);font-size:.95rem}
.f-cols{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:32px var(--gap);margin-top:38px}
.f-col .f-h{margin:0;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-carbon-60);margin-bottom:14px}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.f-col a{text-decoration:none;font-size:.93rem;color:var(--on-carbon);
  border-bottom:1px solid transparent;padding-bottom:2px}
.f-col a:hover{border-bottom-color:var(--signal);color:var(--signal)}
.f-bot{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;padding-top:26px}
.f-bot p{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--on-carbon-60)}
@media(min-width:880px){
  .f-brand{grid-column:1/4}
  .f-cols{grid-column:5/-1;grid-template-columns:repeat(4,1fr);margin-top:0}
}

@media(max-width:599px){.sysbar .opt{display:none}}


/* ============================================================
   IMAGE SYSTEM — house grade + asset slots
   One knob (--grade) unifies photography from different sources.
   ============================================================ */
:root{ --grade:.25; }   /* los prompts ya entregan tomas desaturadas; el grado solo unifica */
.shot{position:relative;background:var(--carbon);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(var(--grade)) contrast(1.05) saturate(.94) brightness(.98)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:#202427;opacity:.10;mix-blend-mode:color}
.shot .edge{position:absolute;inset:10px;border:1px solid rgba(237,237,232,.10);pointer-events:none;z-index:2}
.shot .stamp{position:absolute;left:0;top:0;z-index:3;background:var(--carbon);color:var(--on-carbon-60);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;padding:7px 11px;
  border-right:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark)}
.shot--portrait{aspect-ratio:3/4}
.shot--band{aspect-ratio:21/9}
.shot--sq{aspect-ratio:4/5}
@media(max-width:640px){.shot--band{aspect-ratio:3/2}}

/* ============================================================
   CONCEPT ARCHIVE RAIL — selects which file is open above
   ============================================================ */
/* Antes se llamaba .archive. WordPress pone `archive` como clase del <body> en
   cualquier archivo de categoría, así que el body de /blog/category/... heredaba
   el margen, el filete y el padding de este módulo de la portada. Renombrado
   para que la colisión no pueda repetirse. */
.concept-archive{margin-top:clamp(34px,4.5vw,52px);border-top:1px solid var(--rule-dark);padding-top:20px}
.concept-archive-head{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin-bottom:16px}
.arch-list{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:rgba(237,237,232,.28) transparent}
.arch-list::-webkit-scrollbar{height:5px}
.arch-list::-webkit-scrollbar-thumb{background:rgba(237,237,232,.28)}
.arch{flex:0 0 clamp(212px,25vw,258px);scroll-snap-align:start;text-align:left;cursor:pointer;
  background:transparent;border:1px solid var(--rule-dark);padding:14px 15px;display:grid;gap:9px;
  color:var(--on-carbon);transition:border-color .18s ease,background .18s ease}
.arch:hover{border-color:rgba(237,237,232,.42)}
.arch[aria-selected="true"]{border-color:var(--signal);background:rgba(186,186,0,.07)}
.arch .aid{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-carbon-60)}
.arch .aname{font-size:.95rem;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.arch .ast{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-carbon-60)}
.arch[aria-selected="true"] .ast{color:var(--signal)}
@media (prefers-reduced-motion:reduce){.arch{transition:none}}

/* ============================================================
   DESIGN RAIL — horizontal index, manual only, nothing hidden
   ============================================================ */
.railwrap{position:relative}
.rail{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:var(--rule-strong)}
.rail>*{flex:0 0 clamp(238px,30vw,318px);scroll-snap-align:start}
.rail:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.railnav{display:flex;gap:10px;margin-top:18px}
.rbtn{width:44px;height:44px;display:grid;place-items:center;background:transparent;
  border:1px solid var(--rule-strong);cursor:pointer;color:var(--ink);border-radius:0;
  transition:background .18s ease,color .18s ease}
.rbtn:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.rbtn:disabled{opacity:.32;cursor:default}
.rbtn svg{width:15px;height:15px}
.railend{display:flex;flex-direction:column;justify-content:center;gap:14px;
  border:1px solid var(--rule-strong);padding:26px 22px;background:transparent}
.railend p{font-size:.95rem;color:var(--ink-60)}
@media (prefers-reduced-motion:reduce){.rbtn{transition:none}}

/* ============================================================
   DETAIL BAND — full-width material shot, page rhythm
   ============================================================ */
.band{background:var(--carbon);color:var(--on-carbon)}
.band-inner{display:grid;gap:clamp(24px,3vw,40px);align-items:center}
.band-copy{display:flex;flex-direction:column;gap:14px}
.band-copy h2{font-size:clamp(1.15rem,2vw,1.6rem)}
@media(min-width:880px){
  .band-inner{grid-template-columns:1fr 1.35fr}
}

/* ---------- reveal ---------- */
/* El estado oculto lo pone el JS en línea, no esta hoja. Motivo: los
   optimizadores de "CSS no usado" (UCSS de LiteSpeed y equivalentes) analizan
   el HTML inicial, donde `.in` todavía no existe. Si conservan la regla que
   oculta y eliminan la que revela, el contenido se queda invisible. Haciéndolo
   así, si esta hoja se recorta el contenido sigue visible: solo se pierde la
   animación. */
.rv{transition:opacity .5s ease,transform .5s ease}
@media (prefers-reduced-motion:reduce){
  .rv{transition:none}
}
@media print{.site-header,.sysbar{position:static}}

/* ============================================================
   WORDPRESS BRIDGE — neutraliza el andamiaje de Twenty Twenty-Five
   ============================================================ */
/* `position: sticky` queda confinado a la caja del PADRE. Twenty Twenty-Five
   envuelve la parte de cabecera en <header class="wp-block-template-part">,
   cuya altura es cabecera + barra de sistema: al salir ese contenedor de
   pantalla se llevaba la cabecera con él. Con display:contents el contenedor
   no genera caja, .site-header pasa a colgar de .wp-site-blocks y se pega toda
   la página, mientras la barra de sistema sigue haciendo scroll como antes.
   Verificado: el landmark de banner se conserva (axe, 0 violaciones). */
header.wp-block-template-part{display:contents}

/* Twenty Twenty-Five aplica padding de raíz a los hijos directos de
   .wp-site-blocks. Cabecera y pie van a sangre, así que se lo quitamos.
   Se aplica en todo el sitio, no solo en la portada. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part{
  padding-left:0;padding-right:0;margin-block:0}
.wp-block-template-part{margin-block:0}
.mt-home .wp-site-blocks > *,
body.home .wp-site-blocks{padding-left:0;padding-right:0;margin-block-start:0}
.mt-home :where(.is-layout-constrained) > *{max-width:none;margin-inline:0}
.mt-home figure{margin:0}
.wp-site-blocks > .mt-home{margin-block:0}
/* Alto de la cabecera fija y cuánto la baja la barra de administración.
   Una sola fuente de verdad: la usan el sticky y el menú de la tienda. */
:root{--hdr-h:69px;--hdr-top:0px}
.admin-bar{--hdr-top:32px}
@media(max-width:782px){.admin-bar{--hdr-top:46px}}

/* ============================================================
   PÁGINAS CON EMBED DE TERCEROS (/shop/, /shop/eu/)
   Plantilla "Wide — embedded shop".
   ============================================================ */

/* Un solo contenedor para el título y el embed, el mismo que usa la cabecera.
   Sin esto conviven tres anchos distintos en la misma página: la cabecera a
   --wrap, el título al contentSize de lectura y el embed a lo que él decida. */
.mt-wide{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
  padding-block:clamp(28px,4vw,56px);
}
.mt-wide > *{max-width:none;margin-inline:0}
.mt-wide__title{
  font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.15rem,2.15vw,1.75rem);line-height:1.22;
  margin:0 0 clamp(20px,3vw,32px);
  padding-bottom:22px;border-bottom:1px solid var(--rule);
}

/* La tienda pinta TODO dentro de `div.SprdMain`, que lleva `z-index: 1` y crea
   contexto de apilamiento. Eso encierra ahí dentro a su menú móvil: por alto que
   le pongas el z-index, no puede salir. Nuestra cabecera va a 100, así que le
   tapaba la franja superior — justo donde está el botón de cerrar — y el menú
   quedaba atrapado abierto.
   Así que la que se aparta es la nuestra, y solo mientras su menú está abierto,
   para no perder la cabecera fija el resto del tiempo. Verificado en el staging:
   100 con el menú cerrado, 0 al abrirlo, por debajo del 1 de SprdMain. */
/* El menú móvil de la tienda es `position: fixed; top: 0`, así que nacía
   debajo de nuestra cabecera fija y su botón de cerrar quedaba inalcanzable.
   Intentar ganarle por z-index no sirve: Spreadshirt pinta todo dentro de
   `.SprdMain`, que crea contexto de apilamiento y lo encierra.
   La solución no es pelear por capas sino por geometría — que el panel empiece
   donde acaba la cabecera. Y se le resta ese alto para que no se salga por
   abajo, porque lleva `height: 100%` y `overflow: scroll`.
   Selector más específico que el suyo (0,2,1 frente a 0,2,0) porque su hoja se
   inyecta después de la nuestra. Si algún día le ponen !important, esto también
   lo necesitará. */
body .SprdMain .sprd-burgermenu{
  top:calc(var(--hdr-top) + var(--hdr-h));
  height:calc(100% - var(--hdr-top) - var(--hdr-h));
}

/* Spreadshirt inyecta su sprite de iconos —un <svg display="none"> con 41
   <symbol> dentro— envuelto en un <div> sin clase al principio del <body>.
   El svg está oculto, pero el div sí ocupa: 150 px de hueco sobre la cabecera.
   Ocultarlo no rompe nada: <use> resuelve referencias a símbolos que están
   dentro de contenedores con display:none. Verificado en el staging real,
   iconos visibles idénticos con la regla y sin ella. */
body > div:not([class]):not([id]):has(svg){display:none !important}

/* El script de la tienda inyecta su hoja de estilos en tiempo de ejecución,
   es decir DESPUÉS de la nuestra. Estas tres reglas evitan que se lleve por
   delante la cabecera y el pie. El !important es deliberado: contra CSS
   inyectada más tarde, la especificidad no basta. */
.wp-site-blocks{padding-top:0 !important;margin-top:0 !important}
.wp-site-blocks > header.wp-block-template-part{margin-top:0 !important}
.site-header,.site-header *,.sysbar,.sysbar *,
.site-footer,.site-footer *{box-sizing:border-box}
.site-header img,.site-footer img{max-width:100%;height:auto}
.site-header,.sysbar,.site-footer{font-family:var(--text)}

/* ==========================================================================
   BLOG — índice, archivo de territorio y entrada
   Añadido 2026-08-21. Todo bajo el prefijo .mt- para no chocar con la portada.
   ========================================================================== */

/* ---- la cabecera va a sangre, igual que en la portada ---------------------
   En las plantillas de bloques WordPress mete padding-top al <body> y un margen
   de bloque al <main>. La portada no lo sufre porque su patrón lo neutraliza.
   Aquí se quita para que la banda arranque pegada a la barra de sistema. */
body.blog,
body.archive,
body.single{padding-top:0}
/* global-styles-inline-css declara :where(.wp-site-blocks) > * {margin-block-start:1.2rem}.
   :where() tiene especificidad cero, así que basta con nombrar el elemento. */
body.blog .wp-site-blocks > main.wp-block-group,
body.archive .wp-site-blocks > main.wp-block-group,
body.single .wp-site-blocks > main.wp-block-group{margin-block-start:0}

/* Aire antes del footer. Va como padding del <main> y no como margen de la
   rejilla: los márgenes se colapsan y se escapan del contenedor, el padding no. */
body.blog .wp-site-blocks > main.wp-block-group,
body.archive .wp-site-blocks > main.wp-block-group,
body.single .wp-site-blocks > main.wp-block-group{padding-bottom:clamp(56px,7vw,96px)}

/* ---- una sola retícula ----------------------------------------------------
   El sitio se alinea con .wrap: max-width var(--wrap) menos var(--pad) a cada
   lado. Los bloques de WordPress no lo saben — `alignwide` usa wideSize a pelo,
   sin ese padding, así que la imagen destacada y la rejilla salían 64px por
   delante del logo. Aquí se les da la misma caja que a todo lo demás.
   La columna de lectura de 740px sigue centrada: mismo eje, dos anchos. */
:root{--mt-wrap:min(100%, calc(var(--wrap) - var(--pad) * 2))}

.mt-band > *,
.mt-grid.alignwide,
.mt-single__media.alignwide{max-width:var(--mt-wrap);margin-inline:auto}

/* ---- banda carbón: cabecera del archivo ---------------------------------- */
.mt-band{padding-block:clamp(38px,5.5vw,60px) clamp(34px,4.5vw,52px)}
.mt-band__eyebrow{font-family:var(--wp--preset--font-family--text);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin:0 0 14px}
.mt-band__eyebrow a{color:inherit;text-decoration:none;opacity:.7}
.mt-band__eyebrow a:hover{opacity:1;color:var(--signal)}
/* El layout `constrained` de WordPress emite esto para los hijos de la banda:

     .wp-container-core-group-is-layout-… > :where(:not(.alignleft):not(.alignright):not(.alignfull))
     { max-width:1280px; margin-left:auto !important; margin-right:auto !important }

   Con un `max-width` más estrecho que la caja, unos márgenes automáticos **centran**
   en vez de alinear. Medido en `/blog/` y en `/blog/category/dystopia/` a 1684 px:
   eyebrow en 259, `h1` en 416, lede en 536. Una escalera de tres peldaños donde
   debería haber un solo borde.

   **Dos correcciones anteriores fallaron, y por motivos distintos:**

   1. `margin:0 auto 0 0` no puede ganar: enfrente hay un `!important`. Por eso el
      `max-width` sí se respetaba —ese no lleva `!important`— y el margen no.
   2. Poner el `!important` de nuestro lado tampoco: `margin-inline:0 auto!important`
      manda el título al borde de la caja de la banda (x=50), no al de la retícula.
      Y constreñir la banda por `padding` —la idea que quedó escrita en el tablero—
      tampoco sirve: los márgenes automáticos centran dentro del bloque contenedor,
      sea cual sea, así que un hijo con `max-width` propio se sigue centrando.

   **Lo que sí funciona es no pelear con el margen.** La caja se queda en los 1152 de
   la retícula —donde centrar y alinear son lo mismo, porque no sobra nada— y el largo
   de línea lo pone un `padding-right`. Con `box-sizing:border-box`, el texto mide
   exactamente las 22ch y las 56ch de siempre. Comprobado en el sitio publicado,
   inyectando la regla y midiendo antes y después: los tres pasan a 259 y los anchos
   de texto no se mueven —837 y 598—.

   El `max(0px, …)` es para las pantallas más estrechas que la línea: ahí no sobra
   nada que recortar y el padding se queda en cero. Medido bajando `--wrap` a 900 y a
   500 px: el texto llena la caja y no hay desbordamiento. */
.mt-band__title{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.16;margin:0;
  max-width:var(--mt-wrap);padding-right:max(0px, calc(var(--mt-wrap) - 22ch))}
.mt-band__lede{font-size:clamp(.95rem,1.2vw,1.0625rem);line-height:1.7;
  color:rgba(250,250,248,.72);margin:16px 0 0;
  max-width:var(--mt-wrap);padding-right:max(0px, calc(var(--mt-wrap) - 56ch))}

/* ---- filtro por territorio ----------------------------------------------- */
.mt-filter{margin-top:clamp(28px,3.4vw,44px);gap:8px;align-items:center}
.mt-filter__label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,250,248,.4);margin:0 6px 0 0}
.mt-filter__all{margin:0}
.mt-filter__all a,
.mt-filter .wp-block-categories li a{
  display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 18px;border:1px solid rgba(250,250,248,.28);color:var(--paper);
  text-decoration:none;transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.mt-filter__all a:hover,
.mt-filter .wp-block-categories li a:hover{background:var(--signal);border-color:var(--signal);color:var(--carbon)}
.mt-filter .wp-block-categories{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* WordPress pinta el contador como texto suelto detrás del enlace, sin etiqueta
   que lo envuelva: no se puede seleccionar. Convertimos el <li> en flex para que
   ese nodo de texto se comporte como un elemento más, pegado a su píldora. */
.mt-filter .wp-block-categories li{margin:0;display:flex;align-items:center;gap:6px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,250,248,.42)}
/* el término activo en un archivo de categoría lo marca WordPress */
.mt-filter .wp-block-categories li.current-cat > a{background:var(--signal);border-color:var(--signal);color:var(--carbon)}

/* ---- rejilla: el catálogo visual ----------------------------------------- */
.mt-grid{margin-block:clamp(40px,5vw,64px) 0}
.mt-grid__list{gap:clamp(34px,3.6vw,52px) clamp(22px,2.5vw,36px)}
.mt-grid__list > li{display:flex;flex-direction:column;gap:15px}
.mt-card__media{margin:0}
.mt-card__media img{width:100%;display:block;object-fit:cover}
.mt-card__meta{gap:12px;align-items:center;margin:0}
.mt-card__territory,
.mt-card__date{font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin:0}
.mt-card__territory a{color:var(--signal-deep);text-decoration:none}
.mt-card__territory a:hover{text-decoration:underline;text-underline-offset:3px}
.mt-card__date{color:var(--ink-40)}
.mt-card__title{font-size:1.25rem;line-height:1.3;margin:0}
.mt-card__title a{text-decoration:none}
.mt-card__title a:hover{color:var(--signal-deep)}
.mt-card__excerpt{font-size:.9rem;line-height:1.65;color:var(--ink-60);margin:0}
.mt-card__excerpt p{margin:0}
.mt-empty{padding-block:48px;color:var(--ink-60)}

/* ---- paginación ---------------------------------------------------------- */
.mt-pagination{margin-top:clamp(44px,5vw,64px);gap:24px;align-items:center;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.mt-pagination a{text-decoration:none}
.mt-pagination a:hover{color:var(--signal-deep)}
.mt-pagination .wp-block-query-pagination-numbers{display:flex;gap:14px;align-items:baseline}
.mt-pagination .page-numbers.current{border-bottom:2px solid var(--signal);padding-bottom:3px}

/* ---- entrada individual --------------------------------------------------- */
/* La cabecera de la entrada vive dentro de la banda carbón, igual que en el
   índice y en los archivos de territorio: el bloque oscuro dice «esto es el
   archivo» y el papel empieza donde empieza la lectura. */
.mt-band--post{padding-block:clamp(38px,5.5vw,60px) clamp(30px,3.6vw,46px)}
/* la cabecera comparte eje con el cuerpo: mismo ancho de lectura, centrado.
   La imagen destacada se queda en los 1152 y es la que da la anchura. */
.mt-band--post .mt-single__head{max-width:var(--wp--style--global--content-size);
  margin-inline:auto;padding-block:0}
.mt-band--post .mt-single__media{margin-top:clamp(30px,3.8vw,48px)}

.mt-single__meta{gap:14px;align-items:center;margin:0 0 22px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.mt-single__meta p{margin:0}
/* sobre carbón, --signal-deep se apaga: el acento legible ahí es --signal */
.mt-single__territory a{color:var(--signal);text-decoration:none}
.mt-single__territory a:hover{text-decoration:underline;text-underline-offset:3px}
.mt-single__date{color:rgba(250,250,248,.55)}
.mt-single__title{font-size:clamp(1.9rem,4.4vw,3.25rem);line-height:1.16;
  margin:0 auto 0 0;max-width:20ch}
.mt-single__media img{width:100%;display:block;object-fit:cover}

/* el cuerpo: medida de lectura, no ancho de pantalla */
.mt-single__body{margin-top:clamp(44px,5vw,72px)}
.mt-single__body > *{margin-block:0 1.45em}
.mt-single__body p{font-size:clamp(1.02rem,1.25vw,1.125rem);line-height:1.72}
.mt-single__body h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-block:2em .7em}
.mt-single__body h3{font-size:clamp(1.1rem,1.7vw,1.3rem);margin-block:1.8em .6em}
.mt-single__body img{height:auto}
.mt-single__body figcaption{font-size:.8rem;line-height:1.55;color:var(--ink-40);margin-top:10px}
.mt-single__body blockquote{margin:1.8em 0;padding:4px 0 4px 28px;
  border-left:3px solid var(--signal)}
.mt-single__body blockquote p{font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.05rem,1.8vw,1.375rem);line-height:1.42}

/* ---- pie del artículo ----------------------------------------------------- */
.mt-single__foot{margin-top:clamp(48px,5.5vw,72px)}
.mt-single__filed{gap:10px;align-items:center}
.mt-single__filed-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-40);margin:0 6px 0 0}
.mt-pills{margin:0;display:flex;flex-wrap:wrap;gap:10px}
.mt-pills a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 13px;border:1px solid var(--rule-input);text-decoration:none}
.mt-pills a:hover{border-color:var(--ink);color:var(--ink)}

.mt-single__nav{margin-top:clamp(32px,3.6vw,48px);padding-top:24px;
  border-top:1px solid var(--ink);gap:32px}
.mt-single__nav a{text-decoration:none;font-family:var(--wp--preset--font-family--display);
  font-size:.9rem;line-height:1.4}
.mt-single__nav a:hover{color:var(--signal-deep)}
.mt-nav-next{text-align:right}

.mt-single__signal{margin-top:clamp(40px,4.5vw,60px);padding-top:34px;
  border-top:1px solid var(--rule)}
.mt-single__signal .mt-band__eyebrow{color:var(--signal-deep)}
.mt-single__signal-title{font-size:clamp(1.15rem,2vw,1.45rem);margin:0 0 10px}

.mt-single__comments{margin-top:clamp(40px,4.5vw,60px);padding-top:34px;
  border-top:1px solid var(--rule)}
.mt-single__comments-title{font-size:1.05rem;margin:0 0 24px}
.mt-comment{margin-bottom:26px}
.mt-comment__author{font-size:.82rem;letter-spacing:.04em;font-weight:500;margin:0 0 6px}
.mt-comment__body{font-size:.95rem;line-height:1.68;color:var(--ink-80,var(--ink))}
.mt-comment__body p{margin:0 0 .8em}
.mt-comment__date{font-size:.75rem;color:var(--ink-40)}
.mt-comment__date a{text-decoration:none}

/* ---- móvil ---------------------------------------------------------------- */
@media(max-width:880px){
  .mt-grid__list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* En pantalla estrecha el titular usa todo el ancho. Hay que soltar las dos
     cosas: el `max-width` y el `padding-right` que le pone el largo de línea
     arriba. Soltar solo el primero dejaría el recorte de 22ch puesto por la otra
     vía, que es justo lo que esta línea quería evitar. */
  .mt-band__title{max-width:none;padding-right:0}
}
@media(max-width:600px){
  .mt-grid__list{grid-template-columns:1fr!important}
  .mt-filter{gap:6px}
  .mt-filter__all a,
  .mt-filter .wp-block-categories li a{padding:8px 13px;font-size:10px}
  .mt-single__nav{flex-direction:column;gap:20px}
  .mt-nav-next{text-align:left}
}


/* ============================================================
   PORTADA EN BLOQUES — 2026-08-23
   La portada dejó de ser un bloque HTML monolítico y pasó a ser el contenido
   de la página Home, en bloques reales. Todo lo de aquí abajo existe por eso:
   WordPress envuelve lo que antes era marcado plano (un <a>, un <img>, un
   <span> decorativo) y hay que devolverle su sitio. Nada de esto cambia el
   aspecto de la página; solo el marcado que lo produce.
   ============================================================ */

/* ---- decoración que antes eran <span> vacíos --------------------------------
   .edge, .frame y .ticks no llevaban contenido: eran tres divs para pintar un
   borde interior. Como no hay bloque para eso, pasan a pseudo-elementos. Las
   reglas antiguas siguen arriba por si algún marcado heredado las usa. */
.shot::before{content:"";position:absolute;inset:10px;border:1px solid rgba(237,237,232,.10);
  pointer-events:none;z-index:2}
.card-art::after{content:"";position:absolute;inset:9px;border:1px solid rgba(237,237,232,.08);
  pointer-events:none}
.artplate::after{content:"";position:absolute;inset:10px;border:1px solid rgba(237,237,232,.07);
  pointer-events:none}

/* ---- el bloque de imagen trae su propio <figure> ---------------------------- */
.mt-home .wp-block-image{margin:0}
.mt-home .wp-block-image img{display:block}
.shot > figure{position:absolute;inset:0;margin:0;width:100%;height:100%}
.card-art > figure{width:100%;height:100%;display:grid;place-items:center;margin:0}
.artplate > figure{width:100%;margin:0}

/* El pie de figura vive fuera del recorte, así que no puede ser el <figcaption>
   del bloque de imagen: es un párrafo con la misma pinta. */
.mt-cap{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-40)}

/* ---- botones de bloque ------------------------------------------------------
   La flecha era un <span class="ar"> escrito a mano en cada enlace. Ahora la
   pone el CSS, así que en el editor se escribe solo el texto del botón. */
.mt-home .wp-block-buttons.is-layout-flex{gap:14px}
.mt-home .wp-block-button{margin:0}
.mt-home .wp-block-buttons > .wp-block-button{width:max-content;max-width:100%}
.mt-home .wp-block-button > .wp-block-button__link{text-align:left}
.wp-block-button:is(.btn, .tlink) > .wp-block-button__link::after{content:"\2192";display:inline-block;
  transition:transform .18s ease}
.wp-block-button:is(.btn, .tlink) > .wp-block-button__link:hover::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .wp-block-button:is(.btn, .tlink) > .wp-block-button__link::after{transition:none}
}
/* los contenedores que empujaban el enlace al fondo de la tarjeta */
.card .mt-actions{margin-top:auto}
.terr-item .mt-actions{margin-top:auto;padding-top:14px}

/* ---- la regla del hero era un <div class="rule"> ---------------------------- */
.hero hr.rule.wp-block-separator{border:0;margin:0;width:100%;max-width:none;height:1px;
  background:var(--rule);opacity:1}

/* ---- iconos de territorio ---------------------------------------------------
   Eran cuatro <svg> en línea. Sin copy dentro, un SVG en el marcado solo sirve
   para ensuciar el editor, así que van como máscara sobre el color de tinta. */
.terr-item .idx::after{content:"";display:block;width:52px;height:52px;margin-top:12px;
  background:currentColor;color:var(--ink);
  -webkit-mask:var(--terr-icon) no-repeat center/contain;
          mask:var(--terr-icon) no-repeat center/contain}
.terr-item--dystopia .idx::after{--terr-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2044%2044%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.25%22%3E%3Crect%20x=%226.5%22%20y=%226.5%22%20width=%2231%22%20height=%2231%22/%3E%3Cpath%20d=%22M17%206.5v31M27%206.5v31M6.5%2017h31M6.5%2027h31%22/%3E%3Crect%20x=%2217%22%20y=%2217%22%20width=%2210%22%20height=%2210%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Cpath%20d=%22M22%200v6M22%2038v6M0%2022h6M38%2022h6%22/%3E%3C/svg%3E")}
.terr-item--post-human .idx::after{--terr-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2044%2044%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.25%22%3E%3Crect%20x=%223.5%22%20y=%2216.5%22%20width=%2211%22%20height=%2211%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Crect%20x=%2229.5%22%20y=%2216.5%22%20width=%2211%22%20height=%2211%22%20stroke-dasharray=%222.8%202.8%22/%3E%3Cpath%20d=%22M14.5%2022h15%22/%3E%3Cpath%20d=%22M22%204.5v35%22%20stroke-dasharray=%222.8%202.8%22%20opacity=%22.55%22/%3E%3C/svg%3E")}
.terr-item--sci-fi .idx::after{--terr-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2044%2044%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.25%22%3E%3Crect%20x=%224.5%22%20y=%2229.5%22%20width=%2211%22%20height=%2211%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Cpath%20d=%22M10%2029C10%2018%2017.5%2010.5%2028.5%209.5%22/%3E%3Ccircle%20cx=%2234.5%22%20cy=%229.5%22%20r=%226%22%20stroke-dasharray=%222.8%202.8%22/%3E%3C/svg%3E")}
.terr-item--reality .idx::after{--terr-icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2044%2044%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.25%22%3E%3Ccircle%20cx=%2222%22%20cy=%2222%22%20r=%2215.5%22/%3E%3Crect%20x=%2211%22%20y=%2211%22%20width=%2222%22%20height=%2222%22/%3E%3Crect%20x=%2218.5%22%20y=%2218.5%22%20width=%227%22%20height=%227%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3C/svg%3E")}

/* ---- archivo de conceptos ---------------------------------------------------
   Las tres fichas están las tres en el marcado y son bloques editables. El
   panel visible lo elige el JS; sin JS se ven las tres, apiladas, y la lista de
   pestañas —que la genera el JS a partir de las fichas— no llega a existir. */
.concept-inner[hidden]{display:none}
html:not(.js) .concept-archive{display:none}
.arch-list:empty{display:none}

/* ---- carril ------------------------------------------------------------------
   `.rail > *` ya reparte el ancho; los grupos de bloque no cambian eso, pero sí
   traen su propio `display`, que aquí no queremos. */
.rail > .wp-block-group{display:flex;flex-direction:column}

/* ---- newsletter --------------------------------------------------------------
   El formulario entra por shortcode, así que el bloque no envuelve nada. */
.news-form .wp-block-shortcode{margin:0}

/* ---- remates de la conversión a bloques ------------------------------------ */
.band > .wrap{padding-block:var(--sec)}
.bridge-fig .mt-cap{margin-top:10px;font-size:10px;color:var(--ink-40)}
/* El cierre del carril apilaba sus dos enlaces a lo ancho de la tarjeta. */
.railend .wp-block-buttons.is-layout-flex{flex-direction:column;align-items:stretch}
.railend .wp-block-buttons > .wp-block-button{width:100%}
.railend .wp-block-button__link{justify-content:flex-start}

/* ---- el lienzo del editor ---------------------------------------------------
   En el editor no existe el envoltorio `.mt-home`: lo pone la plantilla, y el
   editor solo carga el contenido de la página. Sin esta copia, la portada se
   edita con los márgenes y el ancho por defecto de WordPress y no se parece a
   lo que se publica —que es justo lo que hace que nadie se fíe del editor. */
.editor-styles-wrapper .wp-block-group > *{margin-block-start:0;margin-block-end:0}
/* Medido en el lienzo, y la primera versión de esta regla falló por deducir:
   quien encoge las secciones a los 740 px del ancho de lectura no es el layout
   `constrained` —el contenedor raíz del editor es `flow`— sino
   `.block-editor-block-list__layout.is-root-container > :where(...)`, que son dos
   clases. Hay que ganarle con tres, y se nombran las siete secciones de la
   portada para no tocar el editor de las entradas, que sí quiere sus 740. */
.editor-styles-wrapper .is-root-container > :is(.hero, .concept, .terr, .band, .sel, .bridge, .news){
  max-width:none;margin-inline:0}
.editor-styles-wrapper > .is-root-container > *{margin-block:0}
.editor-styles-wrapper .wp-block-image{margin:0}
.editor-styles-wrapper .wp-block-image img{display:block}
.editor-styles-wrapper .wp-block-buttons.is-layout-flex{gap:14px}
.editor-styles-wrapper .wp-block-button{margin:0}
.editor-styles-wrapper .wp-block-buttons > .wp-block-button{width:max-content;max-width:100%}
.editor-styles-wrapper .wp-block-button > .wp-block-button__link{text-align:left}
.editor-styles-wrapper figure{margin:0}

/* ============================================================
   CONSENTIMIENTO — 2026-08-25
   Una barra, no un muro: no bloquea la lectura ni secuestra el foco. Lo que sí
   hace es que nada de terceros se cargue hasta que haya un sí. El marcado lo
   crea `memetic.js`; aquí solo vive su aspecto.
   ============================================================ */
.mt-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;
  padding:18px clamp(20px,5vw,64px);
  border-top:1px solid var(--rule-dark);
  background:var(--carbon);color:var(--on-carbon);
}
.mt-consent__text{
  flex:1 1 320px;margin:0;max-width:72ch;
  font-size:.9rem;line-height:1.6;color:var(--on-carbon-60);
}
.mt-consent__text a{color:var(--on-carbon);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--signal)}
.mt-consent__text a:hover{color:var(--signal)}
.mt-consent__actions{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}
.mt-consent .btn{padding:11px 18px;font-size:11px}
@media(max-width:600px){
  .mt-consent{padding:16px 20px}
  .mt-consent__actions{width:100%}
  .mt-consent .btn{flex:1 1 auto;justify-content:center}
}
/* el enlace del pie para cambiar de opinión */
.mt-consent-reset{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
}

/* ---- el aire bajo la línea de sección --------------------------------------
   `.sec-head` lleva `margin-bottom: clamp(32px,4vw,56px)` desde el prototipo,
   pero al pasar la portada a bloques cada cabecera quedó dentro de un
   `.wp-block-group`, y la regla que anula márgenes entre hijos de grupo —dos
   clases— se la comía. Medido el 2026-08-25: **las cuatro secciones numeradas
   tenían 0 px bajo la línea**. Solo se notaba en la 04 porque las otras tres
   traen su propio aire en lo que va debajo. */
.mt-home .wp-block-group > .sec-head,
.editor-styles-wrapper .wp-block-group > .sec-head{margin-bottom:clamp(32px,4vw,56px)}

/* ---- la destacada en el puente al blog -------------------------------------
   El puente daba a la entrada más espacio del que llenaba: la columna medía 502
   px de alto y el contenido ocupaba unos 170. La imagen es lo que faltaba, no
   más titulares — el brief pide «un post real, no una rejilla sin jerarquía».
   Recorte 16:9, que es la proporción en la que se entregan las destacadas, así
   que aquí no se pierde nada por los lados. */
.bridge-post .wp-block-post-featured-image{margin:0}
.bridge-post .wp-block-post-featured-image img{
  width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

/* ============================================================
   404 — 2026-08-26
   El tema hijo no tenía plantilla propia, así que salía la de Twenty
   Twenty-Five: foto de stock, buscador suelto y la tipografía del padre. Esta
   reutiliza la banda carbón del blog y, debajo, tres salidas con la misma
   retícula que los territorios de la portada. Sin marcado nuevo que aprender:
   todo son clases que ya existían o hermanas directas de las que había.
   ============================================================ */

/* Los mismos tres remates que el blog. La regla de arriba nombra
   body.blog/archive/single una por una —no hay comodín— y `error404` es otra
   clase, así que no entraba: sin esto la banda arranca despegada de la barra
   de sistema y el footer sube hasta el último párrafo. */
body.error404{padding-top:0}
body.error404 .wp-site-blocks > main.wp-block-group{margin-block-start:0}
body.error404 .wp-site-blocks > main.wp-block-group{padding-bottom:clamp(56px,7vw,96px)}

/* `alignwide` usa wideSize a pelo, sin el padding de .wrap, y se planta 64 px
   por delante del logo. Misma caja que la rejilla del blog. */
.mt-404__exits.alignwide,
.mt-404__note.alignwide{max-width:var(--mt-wrap);margin-inline:auto}

.mt-band--404{padding-block:clamp(48px,7vw,84px) clamp(44px,6vw,72px)}

/* La banda de la 404 no necesita nada propio: desde el 2026-08-26 el arreglo del
   borde izquierdo vive en `.mt-band__title` y `.mt-band__lede`, y vale para el
   índice, los archivos de territorio y esta página a la vez. */

/* ---- las tres salidas ------------------------------------------------------ */
.mt-404__exits{margin-top:clamp(40px,5vw,64px);
  display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--rule)}
.mt-404__exit{display:flex;flex-direction:column;gap:14px;
  padding:34px 0;border-bottom:1px solid var(--rule)}
.mt-404__idx{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--ink-40);margin:0}
.mt-404__head{font-family:var(--display);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.2;margin:0}
.mt-404__def{color:var(--ink-60);max-width:44ch;margin:0}

/* Los botones al pie de cada columna, alineados entre sí. `.mt-home` traía
   estas cuatro correcciones al bloque de botones; aquí hacen la misma falta. */
.mt-404__btns{margin-top:auto;padding-top:8px}
.mt-404__btns.is-layout-flex{gap:14px}
.mt-404__btns .wp-block-button{margin:0;width:max-content;max-width:100%}
.mt-404__btns .wp-block-button__link{text-align:left}

/* Los cuatro territorios, con la píldora de las palabras clave de la portada. */
.mt-404__terrs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.mt-404__terrs li{margin:0}
.mt-404__terrs a{display:inline-block;text-decoration:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-60);border:1px solid var(--rule);padding:9px 12px;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.mt-404__terrs a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (prefers-reduced-motion:reduce){.mt-404__terrs a{transition:none}}

.mt-404__note{margin-top:clamp(34px,4vw,52px)}
.mt-404__note p{font-size:.86rem;line-height:1.6;color:var(--ink-60);margin:0}
.mt-404__note a{color:var(--ink-60);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule-strong)}
.mt-404__note a:hover{color:var(--signal-deep);text-decoration-color:var(--signal-deep)}

@media(min-width:760px){
  .mt-404__exits{grid-template-columns:repeat(3,1fr);column-gap:var(--gap);border-top:0}
  .mt-404__exit{border-top:1px solid var(--rule);border-bottom:0;
    padding:30px 0 0;padding-right:clamp(0px,2vw,24px)}
}