/*
Theme Name: Automonos
Theme URI: https://automonos.com
Author: Automonos
Description: Tema editorial para Automonos, blog para autónomos en España. Identidad "El mono al mando": cómic/fanzine risograph, naranja sobre crema.
Version: 2.1.2
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: automonos
*/

/* ============================================================
   AUTOMONOS — "EL MONO AL MANDO"
   Cómic / fanzine risograph adulto.
   Naranja protagonista + negro estructural sobre crema/hueso.
   Display: Anton · Expresiva: Bricolage Grotesque · Lectura: DM Sans
   Las fuentes se encolan en functions.php (sin @import aquí).
   Orden: tokens → base → layout → componentes → plantillas WP
          → utilidades → dark → responsive → motion
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* Marca obligatoria */
  --orange:#FF6A00;
  --orange-2:#FF8C2A;
  --black:#0B0F14;
  --carbon:#1C1F26;
  --white:#FFFFFF;
  /* Apoyos cálidos (aire risograph) */
  --cream:#F4ECDD;
  --rust:#B23A0E;

  /* Semánticos (cambian en dark) */
  --bg:var(--cream);
  --fg:var(--black);
  --ink:var(--black);

  /* Tarjeta / superficie */
  --surface:var(--white);          /* fondo de tarjetas */
  --surface-alt:var(--cream);      /* superficie secundaria */
  --border:var(--black);           /* color de contorno cómic */
  --shadow:var(--black);           /* color de sombra dura */
  --shadow-accent:var(--orange);   /* sombra dura en hover */
  --muted:rgba(11,15,20,.7);       /* texto atenuado */
  --dots:rgba(11,15,20,.05);       /* puntos risograph del fondo */
  --code-bg:#fff7ea;               /* fondo de código */

  /* Tipografías */
  --display:'Anton',Impact,system-ui,sans-serif;
  --expr:'Bricolage Grotesque',system-ui,sans-serif;
  --read:'DM Sans',system-ui,sans-serif;

  /* Carácter cómic */
  --bw:3px;                 /* grosor de contorno */
  --r:14px;                 /* radio sticker */

  /* Offset del header fijo */
  --header-h:84px;
}

/* ============================================================
   2. BASE
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--read);
  font-weight:400;
  line-height:1.55;
  overflow-x:hidden;
  /* papel risograph: textura sutil de puntos */
  background-image:radial-gradient(var(--dots) 1px,transparent 1.4px);
  background-size:7px 7px;
}

a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block;height:auto}

/* cursor personalizado (lo activa el JS añadiendo .lenis al body) */
body.lenis,body.lenis *{cursor:none}
@media (hover:none){body.lenis,body.lenis *{cursor:auto}}

/* Contenedor base */
.container,.wrap{
  width:min(1240px,calc(100% - 44px));
  margin-inline:auto;
}

/* Foco visible global (accesibilidad de teclado) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.chip:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible{
  outline:var(--bw) solid var(--orange);
  outline-offset:3px;
}

/* Etiqueta utilitaria */
.tag{font-family:var(--expr);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}

/* ============================================================
   3. CURSOR + LOADER (decorativos, JS los maneja)
   ============================================================ */
#cur{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--orange);border:2px solid var(--black);
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:width .25s cubic-bezier(.2,.8,.2,1),height .25s cubic-bezier(.2,.8,.2,1);
}
#cur.big{width:64px;height:64px;background:rgba(255,106,0,.18)}
@media (hover:none){#cur{display:none}}

#load{position:fixed;inset:0;background:var(--orange);z-index:10000;display:grid;place-items:center;color:var(--black)}
#load .lw{font-family:var(--display);font-size:clamp(3rem,16vw,9rem);letter-spacing:.04em;line-height:.9;text-transform:uppercase}
#load .lw small{display:block;font-family:var(--expr);font-size:.8rem;font-weight:700;letter-spacing:.3em;text-align:center;margin-top:10px}

/* ============================================================
   4. HEADER + NAVEGACIÓN
   ============================================================ */
header.site-header{position:fixed;top:0;left:0;right:0;z-index:200}
.site-header .container,
.hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px}

/* Marca (brandbar) */
.site-branding{display:flex;align-items:center}
.brandbar,
.site-branding > a{
  display:flex;align-items:center;gap:0;
  background:var(--black);color:var(--white);
  padding:9px 16px;border-radius:999px;
  border:var(--bw) solid var(--black);
  box-shadow:4px 4px 0 var(--orange);
}
.wm{
  font-family:var(--display);font-size:1.25rem;letter-spacing:.01em;
  text-transform:lowercase;line-height:1;display:flex;align-items:center;gap:10px;
}
.wm .bar{width:3px;height:1.1em;background:var(--orange);display:inline-block;border-radius:2px}
.wm .o{color:var(--orange)}
.site-title{margin:0;font-size:1.25rem}
.site-description{display:none}

/* Salvaguarda: si WordPress pintara el custom-logo (imagotipo horizontal 1439x464),
   lo contenemos a altura de barra y le quitamos el estilo de pastilla, para que nunca
   desborde ni tape el hero. El header usa por defecto el wordmark de texto. */
.site-branding > a.custom-logo-link{
  background:transparent;border:0;box-shadow:none;padding:0;border-radius:0;
}
.custom-logo-link,
.custom-logo-link img,
img.custom-logo{
  display:block;max-height:44px;width:auto;height:auto;
}

/* Navegación principal */
.main-navigation{display:flex;align-items:center;gap:10px}
.main-navigation ul#primary-menu,
.main-navigation .nav,
.nav{
  display:flex;gap:8px;align-items:center;
  list-style:none;margin:0;padding:0;
}
.main-navigation ul#primary-menu ul{display:none} /* submenús simples */
.main-navigation a,
.nav a,
#primary-menu > li > a{
  font-family:var(--expr);font-weight:700;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.04em;padding:8px 13px;
  border:var(--bw) solid var(--black);border-radius:999px;background:var(--cream);color:var(--black);
  transition:transform .2s,background .2s,color .2s;display:inline-block;
}
.main-navigation a:hover,
.nav a:hover,
#primary-menu > li > a:hover,
.current-menu-item > a{background:var(--orange);color:var(--black);transform:translateY(-2px)}

/* Botón hamburguesa (oculto en desktop) */
.menu-toggle{
  display:none;
  font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  font-size:.8rem;padding:10px 16px;cursor:pointer;
  background:var(--orange);color:var(--black);
  border:var(--bw) solid var(--black);border-radius:999px;
  box-shadow:4px 4px 0 var(--black);
}

/* ============================================================
   5. SECCIONES GENÉRICAS (front-page reutiliza el proto)
   ============================================================ */
section{padding:70px 0}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.shead h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,6vw,4rem);line-height:.9;margin:0;letter-spacing:.01em;color:var(--fg)}
.shead p{font-family:var(--read);max-width:32ch;margin:0;color:var(--ink);opacity:.85}

/* ---------- HERO ---------- */
.hero{padding:118px 0 24px;position:relative}
.hgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;background:var(--black);color:var(--white);
  font-family:var(--expr);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;transform:rotate(-2deg);margin-bottom:18px;
}
.eyebrow .pip{width:8px;height:8px;border-radius:50%;background:var(--orange)}

h1.big{font-family:var(--display);font-size:clamp(3.2rem,11vw,8.4rem);line-height:.86;letter-spacing:.005em;margin:0;text-transform:uppercase;color:var(--fg)}
h1.big .ln{display:block;overflow:hidden}
h1.big .ln i{display:block;font-style:normal}
/* El titular solo arranca oculto cuando hay JS para animarlo (defensa: si el JS
   no carga, el titular queda visible en lugar de desaparecer bajo overflow:hidden). */
.js h1.big .ln i{transform:translateY(110%)}
h1.big .hl{position:relative;display:inline-block;color:var(--white);padding:0 .12em}
h1.big .hl em{font-style:normal;position:relative;z-index:1}
h1.big .hl::before{content:"";position:absolute;left:0;right:0;top:6%;bottom:8%;background:var(--orange);z-index:0;transform:scaleX(0);transform-origin:left;border-radius:6px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
h1.big .hl.lit::before{transform:scaleX(1)}

.lead{font-family:var(--read);font-size:1.1rem;line-height:1.55;max-width:34ch;margin:24px 0 22px;color:var(--ink)}
.lead b{font-weight:700}
.heroctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.86rem;
  padding:13px 20px;border:var(--bw) solid var(--black);border-radius:999px;cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn.primary{background:var(--orange);color:var(--black);box-shadow:5px 5px 0 var(--black)}
.btn.primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--black)}
.btn.ghost{background:var(--cream);color:var(--black)}
.btn.ghost:hover{background:var(--black);color:var(--white)}

/* ---------- MASCOTA ---------- */
.mascot-stage{position:relative;display:grid;place-items:center;min-height:380px}

/* Medallón del gorila real: su fondo oscuro + aro naranja, recortado en círculo.
   Funciona en claro y oscuro porque el isotipo ya trae su propio fondo. */
.mascot-medallion{position:relative;display:inline-grid;place-items:center;z-index:2;
  border-radius:50%;background:#040813;overflow:hidden;
  border:6px solid var(--orange);
  box-shadow:8px 8px 0 var(--black), 0 0 0 var(--bw) var(--black);
}
.mascot-medallion .mascot-img{width:100%;height:100%;object-fit:cover;display:block}
/* Tamaños por variante */
.mascot-medallion.mascot-hero{width:min(380px,80%);aspect-ratio:1}
.mascot-medallion.mascot-cta{width:min(220px,68%);aspect-ratio:1;border-width:5px;box-shadow:6px 6px 0 var(--black), 0 0 0 var(--bw) var(--black)}
.mascot-medallion.mascot-404{width:min(200px,70%);aspect-ratio:1;border-width:5px}
.mascot-medallion.mascot-sig{width:56px;height:56px;border-width:4px;box-shadow:3px 3px 0 var(--black)}

/* bocadillos de humor + onomatopeya (sin cambios respecto al concepto) */
.bubble{position:absolute;z-index:5;background:var(--white);border:var(--bw) solid var(--black);border-radius:18px;padding:9px 14px;font-family:var(--expr);font-weight:800;font-size:.82rem;line-height:1.15;box-shadow:4px 4px 0 var(--black);color:var(--black)}
.bubble::after{content:"";position:absolute;width:16px;height:16px;background:var(--white);border-right:var(--bw) solid var(--black);border-bottom:var(--bw) solid var(--black)}
.bubble.b1{top:4%;right:-2%;transform:rotate(3deg)}
.bubble.b1::after{left:24px;bottom:-9px;transform:rotate(45deg)}
.bubble.b2{bottom:6%;left:-3%;transform:rotate(-3deg);background:var(--orange)}
.bubble.b2::after{right:26px;top:-9px;background:var(--orange);transform:rotate(225deg)}
.onoma{position:absolute;z-index:4;font-family:var(--display);text-transform:uppercase;color:var(--black);font-size:1.6rem;letter-spacing:.02em}
.onoma.o1{top:-2%;left:2%;transform:rotate(-12deg);color:var(--rust)}

@keyframes breathe{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(.6deg)}}
.mascot-medallion.has-breath{transform-origin:center;animation:breathe 4.5s ease-in-out infinite}
.still .mascot-medallion.has-breath{animation:none}
@media(hover:none){.mascot-medallion.has-breath{animation:none}}

/* ---------- TICKER ---------- */
.ticker{background:var(--black);color:var(--cream);border-top:var(--bw) solid var(--black);border-bottom:var(--bw) solid var(--black);overflow:hidden;margin-top:18px}
.tk{display:flex;white-space:nowrap;width:max-content;will-change:transform}
.tk span{font-family:var(--display);text-transform:uppercase;font-size:1.5rem;letter-spacing:.03em;padding:14px 26px;display:inline-flex;align-items:center;gap:26px}
.tk span .star{color:var(--orange)}

/* ---------- CATEGORÍAS (stickers) ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat{position:relative;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r);padding:22px 20px 20px;box-shadow:6px 6px 0 var(--shadow);transition:transform .25s,box-shadow .25s;color:var(--fg)}
.cat:nth-child(2n){background:var(--orange);color:var(--black)}
.cat:nth-child(3n){transform:rotate(-1.4deg)}
.cat:hover{transform:translate(-3px,-3px) rotate(0deg);box-shadow:10px 10px 0 var(--shadow)}
.cat .num{font-family:var(--display);font-size:2.4rem;line-height:.9;color:var(--rust)}
.cat:nth-child(2n) .num{color:var(--black)}
.cat h3{font-family:var(--expr);font-weight:800;text-transform:uppercase;font-size:1.04rem;line-height:1.05;margin:8px 0 6px}
.cat p{font-family:var(--read);font-size:.9rem;margin:0;opacity:.85}
.cat .stk{position:absolute;top:-12px;right:-8px;background:var(--black);color:var(--cream);font-family:var(--expr);font-weight:800;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;transform:rotate(8deg)}

/* ---------- FILTROS + GRID DE ARTÍCULOS ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip{font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;padding:9px 16px;border:var(--bw) solid var(--border);border-radius:999px;background:var(--surface-alt);color:var(--fg);cursor:pointer;transition:transform .2s,background .2s,color .2s}
.chip:hover{transform:translateY(-2px)}
.chip.is-active{background:var(--black);color:var(--cream)}

.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

/* Tarjeta de post (también .post-card como alias) */
.post,
.post-card{position:relative;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:6px 6px 0 var(--shadow);transition:transform .25s,box-shadow .25s;color:var(--fg)}
.post:hover,
.post-card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--shadow-accent)}
.post .pthumb,
.post-card .pthumb{height:140px;border-bottom:var(--bw) solid var(--border);display:grid;place-items:center;position:relative;overflow:hidden}
.post:nth-child(odd) .pthumb{background:var(--orange)}
.post:nth-child(even) .pthumb{background:var(--surface-alt)}
.post .pthumb .glyph,
.post-card .pthumb .glyph{font-family:var(--display);font-size:3.4rem;text-transform:uppercase;color:var(--black);opacity:.92;letter-spacing:.04em}
/* Imagen destacada real dentro de la tarjeta */
.post .pthumb img,
.post-card .pthumb img{width:100%;height:140px;object-fit:cover;display:block}
.post .pbody,
.post-card .pbody,
.post-card .entry-content{padding:18px 20px 22px}
.post .pcat,
.post-card .pcat{font-family:var(--expr);font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;background:var(--black);color:var(--cream);display:inline-block;padding:4px 10px;border-radius:999px;text-decoration:none}
.post h3,
.post-card h3{font-family:var(--expr);font-weight:800;font-size:1.16rem;line-height:1.12;margin:13px 0 10px}
.post h3 a:hover,
.post-card h3 a:hover{color:var(--rust)}
.post .meta,
.post-card .meta{font-family:var(--read);font-size:.82rem;opacity:.7;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.post .meta .dot,
.post-card .meta .dot{width:5px;height:5px;border-radius:50%;background:var(--orange);display:inline-block}

/* ---------- CTA / SUSCRIPCIÓN ---------- */
.cta{background:var(--black);color:var(--cream);border-top:var(--bw) solid var(--black);border-bottom:var(--bw) solid var(--black)}
.ctainner{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center}
.cta .mascot-cta{width:min(240px,70%);justify-self:center}
.cta h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.2rem,7vw,4.6rem);line-height:.88;margin:0 0 10px;letter-spacing:.01em}
.cta h2 em{font-style:normal;color:var(--orange)}
.cta p{font-family:var(--read);max-width:40ch;margin:0 0 22px;opacity:.86}
.subform{display:flex;flex-wrap:wrap;gap:10px;max-width:480px}
.subform input{flex:1 1 200px;font-family:var(--read);font-size:1rem;padding:13px 16px;border:var(--bw) solid var(--orange);border-radius:999px;background:transparent;color:var(--cream)}
.subform input::placeholder{color:rgba(244,236,221,.6)}
.subform .btn.primary{box-shadow:5px 5px 0 var(--orange)}
.subform .btn.primary:hover{box-shadow:7px 7px 0 var(--orange)}

/* ============================================================
   6. FOOTER
   ============================================================ */
footer.site-footer{background:var(--bg);padding:54px 0 40px;border-top:var(--bw) solid var(--border)}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px;align-items:start}
.fbrand .wm{font-size:1.6rem;color:var(--fg)}
.fsig{display:flex;align-items:center;gap:12px;margin-top:14px}
.fsig svg{width:54px;flex:0 0 auto}
.fsig small{font-family:var(--read);font-size:.82rem;opacity:.8;max-width:24ch}
footer.site-footer h4{font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;margin:0 0 14px;color:var(--fg)}
footer.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer.site-footer ul a{font-family:var(--read);font-size:.95rem}
footer.site-footer ul a:hover{color:var(--orange)}
.socials{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.socials a{font-family:var(--expr);font-weight:800;font-size:.78rem;text-transform:uppercase;padding:8px 13px;border:var(--bw) solid var(--border);border-radius:999px;transition:background .2s,color .2s}
.socials a:hover{background:var(--orange);color:var(--black)}
.fbase{margin-top:42px;border-top:var(--bw) solid var(--border);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--read);font-size:.8rem;opacity:.8}

/* ============================================================
   7. PLANTILLAS WP — LAYOUT INTERNO (single / page / archive / search)
   ============================================================ */
/* El header es fijo: empuja el contenido interno hacia abajo */
.site-main{padding-top:calc(var(--header-h) + 30px);padding-bottom:60px}
/* La home ya reserva el espacio del header en el padding-top del .hero del proto */
.site-main.front{padding-top:0}

/* Grid contenido + sidebar */
.layout{
  width:min(1240px,calc(100% - 44px));margin-inline:auto;
  display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;
}

/* Caja de contenido tipo "cartel" */
.content-box{
  background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r);
  box-shadow:8px 8px 0 var(--shadow);padding:34px 36px;color:var(--fg);
}

/* ---------- ENTRY HEADER (single y page comparten lenguaje) ---------- */
.entry-header,
.page-entry-header{margin-bottom:24px}
.entry-title,
.page-entry-title{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.6rem);line-height:.92;letter-spacing:.01em;margin:0 0 14px;color:var(--fg);
}
.entry-title a:hover{color:var(--rust)}
.entry-meta{
  font-family:var(--expr);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--ink);opacity:.85;
}
.entry-meta a:hover{color:var(--orange)}
.entry-meta .pcat,
.entry-meta .posted-on,
.entry-meta .byline{display:inline-flex;align-items:center;gap:6px}

/* Imagen destacada */
.featured-image,
.post-thumbnail{margin:0 0 26px}
.featured-image img,
.post-thumbnail img{
  width:100%;display:block;border:var(--bw) solid var(--border);border-radius:var(--r);
  box-shadow:6px 6px 0 var(--shadow);
}

/* ---------- TIPOGRAFÍA DE LECTURA (single + page) ---------- */
.single-content,
.page-content,
.entry-content{
  font-family:var(--read);font-size:1.08rem;line-height:1.7;color:var(--fg);max-width:70ch;
}
.single-content > *,
.page-content > *{margin-block:0 1.2em}

.single-content h2,
.page-content h2{font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:1.7rem;line-height:1.1;margin:1.8em 0 .6em}
.single-content h3,
.page-content h3{font-family:var(--expr);font-weight:800;font-size:1.32rem;line-height:1.15;margin:1.5em 0 .5em}
.single-content h4,
.page-content h4{font-family:var(--expr);font-weight:700;font-size:1.1rem;margin:1.4em 0 .5em;text-transform:uppercase;letter-spacing:.04em}

.single-content p,
.page-content p{margin:0 0 1.2em}

.single-content a,
.page-content a{
  color:var(--rust);text-decoration:underline;text-decoration-color:var(--orange);
  text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600;
}
.single-content a:hover,
.page-content a:hover{background:var(--orange);color:var(--black);text-decoration:none}

.single-content ul,
.single-content ol,
.page-content ul,
.page-content ol{margin:0 0 1.2em;padding-left:1.4em}
.single-content li,
.page-content li{margin:.35em 0}
.single-content ul li::marker{color:var(--orange)}
.single-content ol li::marker{color:var(--rust);font-family:var(--expr);font-weight:800}

.single-content blockquote,
.page-content blockquote,
.wp-block-quote{
  margin:1.6em 0;padding:18px 22px;background:var(--surface-alt);
  border-left:8px solid var(--orange);border-top:var(--bw) solid var(--border);
  border-right:var(--bw) solid var(--border);border-bottom:var(--bw) solid var(--border);
  border-radius:0 var(--r) var(--r) 0;box-shadow:5px 5px 0 var(--shadow);
  font-family:var(--expr);font-weight:600;font-size:1.12rem;font-style:normal;
}
.single-content blockquote p:last-child,
.page-content blockquote p:last-child{margin-bottom:0}
.wp-block-quote cite,
.single-content blockquote cite{display:block;margin-top:.6em;font-family:var(--read);font-style:normal;font-size:.85rem;opacity:.8}

.single-content img,
.page-content img{border:var(--bw) solid var(--border);border-radius:var(--r);box-shadow:5px 5px 0 var(--shadow)}
.single-content figure,
.page-content figure{margin:1.6em 0}
.single-content figcaption,
.page-content figcaption{font-family:var(--read);font-size:.8rem;opacity:.75;margin-top:8px;text-align:center}

.single-content code,
.page-content code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--code-bg);border:1px solid var(--border);border-radius:6px;padding:.1em .4em}
.single-content pre,
.page-content pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.5;background:var(--black);color:var(--cream);border:var(--bw) solid var(--border);border-radius:var(--r);box-shadow:5px 5px 0 var(--shadow);padding:18px 20px;overflow:auto}
.single-content pre code,
.page-content pre code{background:none;border:none;padding:0;color:inherit}

.single-content table,
.page-content table{width:100%;border-collapse:collapse;margin:1.6em 0;border:var(--bw) solid var(--border);box-shadow:5px 5px 0 var(--shadow);font-size:.95rem}
.single-content th,
.page-content th{background:var(--black);color:var(--cream);font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;padding:10px 14px;text-align:left}
.single-content td,
.page-content td{padding:10px 14px;border-top:2px solid var(--border)}
.single-content tr:nth-child(even) td,
.page-content tr:nth-child(even) td{background:var(--surface-alt)}

/* ---------- ENTRY FOOTER ---------- */
.entry-footer{
  margin-top:30px;padding-top:18px;border-top:var(--bw) solid var(--border);
  font-family:var(--expr);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;
  display:flex;flex-wrap:wrap;gap:10px 18px;color:var(--ink);
}
.entry-footer a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px}
.entry-footer a:hover{color:var(--orange)}
.cat-links a,.tags-links a{display:inline-block}

/* ---------- ARTÍCULO DE PÁGINA ---------- */
.page-entry-header{margin-bottom:24px}

/* ---------- ARCHIVE / CABECERAS DE LISTADO ---------- */
.archive-header,
.search-header{margin-bottom:40px}
.archive-title,
.search-title{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.2rem,7vw,4.6rem);line-height:.9;letter-spacing:.01em;margin:0 0 12px;color:var(--fg);
}
.archive-title span,
.archive-title .archive-prefix{color:var(--rust)}
.archive-description{font-family:var(--read);max-width:50ch;font-size:1.05rem;color:var(--ink);opacity:.9}

/* ============================================================
   8. BÚSQUEDA
   ============================================================ */
.search-form{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;max-width:520px}
.search-field,
input[type="search"]{
  flex:1 1 220px;font-family:var(--read);font-size:1rem;padding:12px 16px;
  background:var(--surface);color:var(--fg);
  border:var(--bw) solid var(--border);border-radius:999px;
}
.search-field::placeholder{color:var(--muted)}
.search-submit{
  font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.86rem;
  padding:12px 22px;cursor:pointer;
  background:var(--orange);color:var(--black);
  border:var(--bw) solid var(--border);border-radius:999px;box-shadow:4px 4px 0 var(--shadow);
  transition:transform .2s,box-shadow .2s;
}
.search-submit:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow)}

/* ============================================================
   9. ERROR 404
   ============================================================ */
.error-404{text-align:center;padding:30px 0 40px}
.error-404 .error-number{
  font-family:var(--display);font-size:clamp(6rem,28vw,18rem);line-height:.82;
  color:var(--orange);-webkit-text-stroke:var(--bw) var(--black);text-stroke:var(--bw) var(--black);
  text-transform:uppercase;letter-spacing:.02em;margin:0;
}
.error-title{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(1.8rem,5vw,3.2rem);
  line-height:.95;margin:8px 0 16px;color:var(--fg);
}
.error-404 p{font-family:var(--read);font-size:1.1rem;max-width:46ch;margin:0 auto 24px;color:var(--ink)}
.mascot-404{width:min(220px,60%);margin:10px auto 24px}

/* ============================================================
   10. COMENTARIOS
   ============================================================ */
.comments-area{
  margin-top:40px;padding:30px 32px;
  background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r);
  box-shadow:6px 6px 0 var(--shadow);
}
.comments-title,
.comment-reply-title{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,4vw,2.4rem);
  line-height:.95;margin:0 0 24px;color:var(--fg);
}
.comment-list{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:18px}
.comment-list .children{list-style:none;margin:14px 0 0;padding-left:24px;display:grid;gap:14px;border-left:var(--bw) solid var(--orange)}
.comment{
  background:var(--surface-alt);border:var(--bw) solid var(--border);border-radius:var(--r);
  padding:18px 20px;box-shadow:4px 4px 0 var(--shadow);
}
.comment .comment-body{padding:0}
.comment-author{font-family:var(--expr);font-weight:800;font-size:1rem;display:flex;align-items:center;gap:10px}
.comment-author .avatar{border-radius:50%;border:2px solid var(--border)}
.comment-author .fn{font-style:normal}
.comment-author .says{display:none}
.comment-meta{font-family:var(--read);font-size:.78rem;opacity:.7;margin:4px 0 10px}
.comment-meta a:hover{color:var(--orange)}
.comment-content{font-family:var(--read);line-height:1.6}
.comment-content p{margin:0 0 .8em}
.bypostauthor > .comment-body,
.bypostauthor{box-shadow:4px 4px 0 var(--orange)}
.reply{margin-top:8px}
.reply a{
  font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;
  padding:5px 12px;border:var(--bw) solid var(--border);border-radius:999px;background:var(--surface);color:var(--fg);display:inline-block;
  transition:background .2s,color .2s;
}
.reply a:hover{background:var(--orange);color:var(--black)}

/* Formulario de comentarios */
.comment-respond{margin-top:24px}
.logged-in-as,
.comment-notes{font-family:var(--read);font-size:.85rem;opacity:.8;margin-bottom:14px}
.logged-in-as a,.comment-notes a{color:var(--rust);text-decoration:underline;text-decoration-color:var(--orange)}
.comment-form{display:grid;gap:14px}
.comment-form label{font-family:var(--expr);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:4px}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;font-family:var(--read);font-size:1rem;padding:12px 14px;
  background:var(--surface);color:var(--fg);
  border:var(--bw) solid var(--border);border-radius:var(--r);
}
.comment-form textarea{min-height:140px;resize:vertical}
.comment-form .submit,
.comment-form input[type="submit"]{
  font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.86rem;
  padding:13px 22px;cursor:pointer;justify-self:start;
  background:var(--orange);color:var(--black);
  border:var(--bw) solid var(--border);border-radius:999px;box-shadow:5px 5px 0 var(--shadow);
  transition:transform .2s,box-shadow .2s;
}
.comment-form .submit:hover,
.comment-form input[type="submit"]:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--shadow)}

/* ============================================================
   10bis. FORMULARIO DE CONTACTO (Contact Form 7)
   Mismo lenguaje C3 que el formulario de comentarios. Hereda claro/oscuro
   porque usa los tokens del tema.
   ============================================================ */
.wpcf7-form{display:grid;gap:16px;max-width:620px}
.wpcf7-form > p{margin:0}
.wpcf7-form label{font-family:var(--expr);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;display:block;color:var(--fg)}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea{
  width:100%;margin-top:6px;font-family:var(--read);font-size:1rem;padding:12px 14px;
  background:var(--surface);color:var(--fg);
  border:var(--bw) solid var(--border);border-radius:var(--r);
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus{outline:none;border-color:var(--orange)}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{color:var(--muted)}
.wpcf7-form textarea{min-height:150px;resize:vertical}
.wpcf7-form .wpcf7-submit{
  font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.86rem;
  padding:13px 24px;cursor:pointer;justify-self:start;
  background:var(--orange);color:var(--black);
  border:var(--bw) solid var(--border);border-radius:999px;box-shadow:5px 5px 0 var(--shadow);
  transition:transform .2s,box-shadow .2s;
}
.wpcf7-form .wpcf7-submit:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--shadow)}
.wpcf7-form .wpcf7-submit:disabled{opacity:.6;cursor:default;transform:none;box-shadow:5px 5px 0 var(--shadow)}
/* Validación */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid{border-color:var(--rust)}
.wpcf7-not-valid-tip{font-family:var(--read);font-weight:600;font-size:.78rem;color:var(--rust);margin-top:6px}
.wpcf7-spinner{margin:0 0 0 14px}
/* Mensaje de respuesta (enviado / error) */
.wpcf7-response-output{
  font-family:var(--read);font-size:.92rem;line-height:1.4;margin:4px 0 0!important;
  padding:12px 16px;border:var(--bw) solid var(--border);border-radius:var(--r);
  background:var(--surface-alt);color:var(--fg);
}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--orange)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:var(--rust)}

/* ============================================================
   11. PAGINACIÓN + NAVEGACIÓN ENTRE POSTS
   ============================================================ */
.pagination,
.posts-navigation,
.paging-navigation{margin:46px 0 0}
.pagination .nav-links,
.nav-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.page-numbers{
  font-family:var(--expr);font-weight:800;font-size:.9rem;
  min-width:44px;height:44px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--fg);
  border:var(--bw) solid var(--border);border-radius:12px;
  box-shadow:4px 4px 0 var(--shadow);transition:transform .2s,box-shadow .2s,background .2s;
}
a.page-numbers:hover{background:var(--orange);color:var(--black);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow)}
.page-numbers.current{background:var(--orange);color:var(--black);box-shadow:4px 4px 0 var(--shadow)}
.page-numbers.dots{border:none;box-shadow:none;background:none}

/* Navegación single (anterior / siguiente) */
.post-navigation{margin:46px 0 0}
.post-navigation .nav-links{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.post-navigation .nav-previous,
.post-navigation .nav-next{
  flex:1 1 240px;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r);
  padding:16px 20px;box-shadow:5px 5px 0 var(--shadow);transition:transform .2s,box-shadow .2s;
}
.post-navigation .nav-next{text-align:right}
.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--shadow-accent)}
.post-navigation a{display:block}
.post-navigation .nav-subtitle{font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;color:var(--rust);display:block;margin-bottom:6px}
.post-navigation .nav-title{font-family:var(--expr);font-weight:700;font-size:1rem;line-height:1.2}

/* ============================================================
   12. SIDEBAR + WIDGETS
   ============================================================ */
.sidebar{display:grid;gap:24px;align-content:start}
.widget{
  background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r);
  box-shadow:6px 6px 0 var(--shadow);padding:22px 22px 24px;color:var(--fg);
}
.widget-title{
  font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.92rem;
  display:inline-block;background:var(--black);color:var(--cream);
  padding:6px 12px;border-radius:999px;margin:0 0 16px;transform:rotate(-1.5deg);
}
.widget ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.widget ul li{font-family:var(--read);font-size:.95rem;border-bottom:2px dotted rgba(11,15,20,.18);padding-bottom:9px}
.widget ul li:last-child{border-bottom:none;padding-bottom:0}
.widget ul a{display:inline-flex;gap:6px}
.widget ul a:hover{color:var(--orange)}
.widget ul .children{margin-top:9px;padding-left:14px}

/* Lista de categorías / archivo con contador */
.widget_categories li,
.widget_archive li{display:flex;justify-content:space-between;gap:10px}

/* Widgets de imagen / gif */
.widget-gif img,
.widget-imagen img,
.widget img{border:var(--bw) solid var(--border);border-radius:var(--r);box-shadow:5px 5px 0 var(--shadow)}
.widget-gif,
.widget-imagen{padding:0;border:none;box-shadow:none;background:none}

/* Widget de búsqueda */
.widget-search .search-form,
.widget_search .search-form{flex-direction:column;max-width:none}
.widget-search .search-field,
.widget_search .search-field{flex:1 1 auto}

/* ============================================================
   13. WORDPRESS CORE / ALINEACIONES / UTILIDADES
   ============================================================ */
.alignleft{float:left;margin:.4em 1.5em 1em 0}
.alignright{float:right;margin:.4em 0 1em 1.5em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignwide{width:min(100%,1100px);margin-left:auto;margin-right:auto}
.alignfull{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.alignfull img{border-radius:0}

.wp-caption{max-width:100%}
.wp-caption img{margin-bottom:6px}
.wp-caption-text,
.gallery-caption{font-family:var(--read);font-size:.8rem;opacity:.75;text-align:center}

/* Sticky post */
.sticky{position:relative}
.sticky::after{
  content:"Destacado";position:absolute;top:-12px;left:-8px;z-index:6;
  background:var(--orange);color:var(--black);font-family:var(--expr);font-weight:800;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border:var(--bw) solid var(--border);
  border-radius:999px;transform:rotate(-6deg);box-shadow:3px 3px 0 var(--shadow);
}

/* Galería */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:1.6em 0}
.gallery-item img{border:var(--bw) solid var(--border);border-radius:10px;box-shadow:4px 4px 0 var(--shadow)}

/* Texto solo para lector de pantalla */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;padding:0;position:absolute !important;overflow:hidden;word-wrap:normal !important;
}
.screen-reader-text:focus,
.skip-link:focus{
  clip:auto !important;clip-path:none;
  display:block;top:8px;left:8px;width:auto;height:auto;z-index:100000;
  background:var(--orange);color:var(--black);
  font-family:var(--expr);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;
  padding:12px 18px;border:var(--bw) solid var(--black);border-radius:999px;box-shadow:4px 4px 0 var(--black);
}
.skip-link{position:absolute;left:-9999px;top:0}

/* Barra de admin de WP: el header fijo baja según su altura */
body.admin-bar header.site-header{top:32px}
body.admin-bar .site-main{padding-top:calc(var(--header-h) + 30px + 32px)}
body.admin-bar .hero{padding-top:calc(118px + 32px)}
@media screen and (max-width:782px){
  body.admin-bar header.site-header{top:46px}
  body.admin-bar .site-main{padding-top:calc(var(--header-h) + 30px + 46px)}
}

/* ---------- REVEAL (animación de entrada) ---------- */
.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.still .rv{opacity:1;transform:none}
.still h1.big .ln i{transform:none}
.still h1.big .hl::before{transform:scaleX(1)}

/* ============================================================
   14. DARK MODE — [data-theme="dark"]
   Mantiene el carácter fanzine: naranja protagonista,
   contornos crema, sombras duras más profundas en negro.
   ============================================================ */
:root[data-theme="dark"],
html[data-theme="dark"]{
  --bg:var(--black);
  --fg:var(--cream);
  --ink:var(--cream);

  --surface:var(--carbon);
  --surface-alt:#23272f;
  --border:var(--cream);
  --shadow:#000000;
  --shadow-accent:var(--orange);
  --muted:rgba(244,236,221,.7);
  --dots:rgba(244,236,221,.06);
  --code-bg:#13161c;
}

/* Ajustes específicos de carácter en dark */
[data-theme="dark"] .brandbar,
[data-theme="dark"] .site-branding > a{box-shadow:4px 4px 0 var(--orange)}
[data-theme="dark"] .main-navigation a,
[data-theme="dark"] .nav a,
[data-theme="dark"] #primary-menu > li > a,
[data-theme="dark"] .chip{background:var(--carbon);color:var(--cream)}
[data-theme="dark"] .main-navigation a:hover,
[data-theme="dark"] .nav a:hover,
[data-theme="dark"] #primary-menu > li > a:hover,
[data-theme="dark"] .current-menu-item > a{background:var(--orange);color:var(--black)}
[data-theme="dark"] .btn.ghost{background:var(--carbon);color:var(--cream)}
[data-theme="dark"] .btn.ghost:hover{background:var(--cream);color:var(--black)}
[data-theme="dark"] .btn.primary{box-shadow:5px 5px 0 #000}
[data-theme="dark"] .btn.primary:hover{box-shadow:7px 7px 0 #000}

/* Stickers de categoría en dark: alterna superficie/naranja sin perder el naranja */
[data-theme="dark"] .cat:nth-child(2n){background:var(--orange);color:var(--black)}
[data-theme="dark"] .cat:nth-child(2n) .num{color:var(--black)}
[data-theme="dark"] .cat .stk{background:var(--cream);color:var(--black)}

/* Posts en dark */
[data-theme="dark"] .post:nth-child(even) .pthumb{background:var(--carbon)}
[data-theme="dark"] .post .pthumb .glyph{color:var(--cream)}
[data-theme="dark"] .post .pcat,
[data-theme="dark"] .post-card .pcat{background:var(--orange);color:var(--black)}

/* Bloques que ya eran negros: fondo más profundo, contorno crema */
[data-theme="dark"] .ticker,
[data-theme="dark"] .cta{background:#06080b;border-color:var(--cream)}
[data-theme="dark"] .eyebrow{background:var(--carbon);border:2px solid var(--cream)}
[data-theme="dark"] h1.big .hl{color:var(--black)}

/* Widgets / comentarios / tablas en dark */
[data-theme="dark"] .widget-title{background:var(--orange);color:var(--black)}
[data-theme="dark"] .comment-author{color:var(--cream)}
[data-theme="dark"] .single-content pre,
[data-theme="dark"] .page-content pre{background:#000;border-color:var(--cream)}
[data-theme="dark"] .single-content th,
[data-theme="dark"] .page-content th{background:var(--orange);color:var(--black)}
[data-theme="dark"] .widget ul li{border-bottom-color:rgba(244,236,221,.2)}

/* 404 en dark */
[data-theme="dark"] .error-404 .error-number{-webkit-text-stroke-color:var(--cream);text-stroke:var(--bw) var(--cream)}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media(max-width:880px){
  .hgrid{grid-template-columns:1fr;gap:8px}
  .layout{grid-template-columns:1fr;gap:28px}
  .ctainner{grid-template-columns:1fr;text-align:left}
}

@media(max-width:780px){
  :root{--header-h:74px}
  /* Navegación móvil: hamburguesa + panel desplegable */
  .menu-toggle{display:inline-flex;align-items:center}
  .main-navigation{position:relative}
  .main-navigation ul#primary-menu,
  .main-navigation .nav{
    display:none;
    position:absolute;top:calc(100% + 12px);right:0;
    flex-direction:column;align-items:stretch;gap:8px;
    background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r);
    box-shadow:6px 6px 0 var(--shadow);padding:14px;min-width:220px;z-index:210;
  }
  .main-navigation.toggled ul#primary-menu,
  .main-navigation.toggled .nav,
  .main-navigation[aria-expanded="true"] ul#primary-menu{display:flex}
  .main-navigation ul#primary-menu a,
  .main-navigation .nav a{display:block;text-align:center}

  .cats{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .content-box{padding:26px 22px}
  .comments-area{padding:24px 20px}
}

@media(max-width:620px){
  .hero{padding-top:96px}
  section{padding:48px 0}
  .shead{margin-bottom:24px}
  .content-box{box-shadow:6px 6px 0 var(--shadow)}
  .post-navigation .nav-links{flex-direction:column}
  .post-navigation .nav-next{text-align:left}
}

@media(max-width:520px){
  .cats{grid-template-columns:1fr}
  .container,.wrap,.layout{width:min(1240px,calc(100% - 28px))}
  .site-header .container,.hd{padding:12px 14px}
  .entry-title,.page-entry-title{font-size:clamp(1.7rem,9vw,2.6rem)}
  .single-content,.page-content,.entry-content{font-size:1.02rem}
}

/* ============================================================
   15b. ICONO HAMBURGUESA + TOGGLE DE TEMA (header)
   ============================================================ */
/* Icono de hamburguesa dentro de .menu-toggle (3 barras) */
.menu-toggle .menu-icon{
  position:relative;display:inline-block;width:18px;height:2px;background:currentColor;
  transition:background .2s;
}
.menu-toggle .menu-icon::before,
.menu-toggle .menu-icon::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;
  transition:transform .25s ease;
}
.menu-toggle .menu-icon::before{top:-6px}
.menu-toggle .menu-icon::after{top:6px}
.main-navigation.toggled .menu-toggle .menu-icon{background:transparent}
.main-navigation.toggled .menu-toggle .menu-icon::before{transform:translateY(6px) rotate(45deg)}
.main-navigation.toggled .menu-toggle .menu-icon::after{transform:translateY(-6px) rotate(-45deg)}

/* Toggle de tema claro/oscuro */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;cursor:pointer;
  background:var(--cream);color:var(--black);
  border:var(--bw) solid var(--black);border-radius:999px;
  box-shadow:3px 3px 0 var(--black);
  transition:transform .2s,background .2s,color .2s,box-shadow .2s;
  font-size:1.1rem;line-height:1;
}
.theme-toggle:hover{background:var(--orange);transform:translateY(-2px);box-shadow:5px 5px 0 var(--black)}
[data-theme="dark"] .theme-toggle{background:var(--carbon);color:var(--cream);border-color:var(--cream);box-shadow:3px 3px 0 var(--orange)}
[data-theme="dark"] .theme-toggle:hover{background:var(--orange);color:var(--black)}

/* ============================================================
   16. MOTION / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none}
  h1.big .ln i{transform:none}
  h1.big .hl::before{transform:scaleX(1)}
  #load{display:none}
  .mascot-medallion.has-breath{animation:none}
}