/*
Theme Name: WCDiscos B
Description: Segundo tema de Working Class Records. Catálogo a sangre, rejilla de filetes, tipografía de cartel. No toca el tema WCDiscos.
Author: TomaHost
Template: twentytwentyfive
Version: 1.0.0
Text Domain: wcdiscos-b
Domain Path: /languages
*/

/* ==================================================================
   0. IDEA
   La estampación es el producto. El tema no decora: se aparta.
   - Sin caja: ni borde, ni sombra, ni esquina redonda. Las celdas se
     separan con un filete de 1px y nada más.
   - Escala de cartel en los titulares; el resto, casi invisible.
   - Un solo color de acento, y agresivo. Se usa para el precio activo,
     el foco y poco más. Si se usa para todo deja de significar nada.
   - Los cambios de estado CORTAN EN SECO (sin transición). Un fundido
     de 200 ms es amable; esta tienda no quiere ser amable.
   ================================================================== */

:root{
  --t:#0B0B0B;            /* tinta */
  --h:#EDEAE3;            /* hueso: el papel. NO es blanco, y se nota */
  --a:#D7FF00;            /* ácido */
  /* ⚠️ AQUÍ VAN VALORES LITERALES, NUNCA `var()` DE SÍ MISMOS.
     Diez de estos llegaron a estar escritos como `--inv-g2:var(--inv-g2)`
     —un token definiéndose a sí mismo—. Eso es un ciclo: la propiedad
     queda INVÁLIDA, no existe, y todo lo que la usa se cae a `inherit`.
     El conmutador de vista salió tinta sobre tinta.
     Lo causó mi propia tokenización: el reemplazo masivo de color pasó
     también por este bloque y se comió los valores que acababa de
     escribir aquí. Si vuelve a hacerse un reemplazo así, ESTE BLOQUE SE
     EXCLUYE. */
  --g:#5C584F;

  /* ── LO QUE HACE POSIBLE EL MODO OSCURO ────────────────────────────
     Dos familias, y la diferencia importa:

     · Las que GIRAN: el color de la página y su texto. En oscuro se
       intercambian y con ellas gira el tema entero.
     · Las FIJAS (`-fijo`): las que no pueden girar sin romperse.
       El ácido solo funciona sobre tinta —sobre hueso da 1,1:1, ilegible—,
       así que su pareja se queda quieta. Y el titular del hero es hueso a
       propósito, porque va sobre un velo oscuro encima de una foto: si
       girara a tinta, desaparecería.

     Regla para lo que se añada mañana: si el color está sobre la PÁGINA,
     usa las que giran; si está sobre ÁCIDO, ROSA o una FOTO, usa las
     fijas. ────────────────────────────────────────────────────────── */
  --tinta-fija:#0B0B0B;
  --hueso-fijo:#EDEAE3;

  /* Tinta y hueso en componentes, para las transparencias: sin esto cada
     `rgba(var(--fg-rgb),.16)` es un valor literal que no gira. */
  --fg-rgb:11,11,11;
  --bg-rgb:237,234,227;

  /* Grises. Cada uno tiene su reflejo para cuando la superficie es la
     contraria; en oscuro, la pareja se intercambia. */
  /* NO #8C8880: 2,94:1 sobre hueso, por debajo del 3,0 que pide AA hasta
     para texto grande. Estuvo puesto y no se veía porque el token estaba
     roto y el texto heredaba tinta — más contraste del diseñado. Al
     arreglar el token salió el defecto que tapaba. */
  --g2:#6B6760;            /* más apagado aún: pestaña sin elegir */
  --g3:#3E3A34;            /* apagado pero legible: pies de puerta */
  --inv-txt:#D7D3CB;       /* texto sobre superficie invertida */
  --inv-g:#A8A399;         /* apagado sobre superficie invertida */
  --inv-g2:#B9B4AA;
  --inv-linea:#262626;     /* línea sobre superficie invertida */
  --inv-alza:#1A1A1A;      /* realce (hover) sobre superficie invertida */
  --inv-alza2:#161616;
  --inv-fuerte:#fff;       /* el máximo contraste sobre la invertida */
  --activo-suave:#F2D7D2;
  /* El acido marca SELECCIONADO y nada mas. Para el roce del raton,
     un lavado neutro: un color con dos significados no es un codigo. */
  --roce:rgba(var(--fg-rgb),.055);
  /* El SEGUNDO acento. Un solo trabajo, igual que el acido:
       acido -> lo que TU has elegido
       rosa  -> lo que ESTA rebajado
     Antes la marca «Rebajado» iba en acido y el color significaba las
     dos cosas a la vez. Amarillo + rosa sobre papel es ademas el canon
     punk, asi que no desentona: pertenece. */
  --rs:#FF2E88;
  /* El ritmo. El tema no tenia NI UNA transicion: los filtros saltaban,
     el recuento cambiaba de golpe y las piezas aparecian secas. */
  --paso:170ms cubic-bezier(.2,.7,.2,1);
  --paso-lento:320ms cubic-bezier(.2,.7,.2,1);            /* humo. Era var(--g2): 2,94:1 sobre hueso, FALLA AA */
  --borde:1px solid var(--t);
  --gut:clamp(14px, 2.6vw, 34px);

  --titular:"Bricolage Grotesque","Arial Narrow",Helvetica,sans-serif;
  --texto:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---- reserva mínima ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{
  overflow-x:clip;        /* clip y NO hidden: hidden rompe position:sticky */
  margin:0;
}
body{
  background:var(--h);color:var(--t);
  font-family:var(--texto);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;

  /* Twenty Twenty-Five (el tema padre) pone `padding: 0 50px` en el body a
     través de su relleno de raíz. Con eso NADA va a sangre: la cabecera, el
     menú y el slider quedaban metidos 50 px por lado y el diseño entero
     perdía su razón de ser. Medido con getBoundingClientRect, no supuesto. */
  padding:0!important;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

.wcb-oculto{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* el editor de bloques mete contenedores centrados; aquí todo va a sangre */
.wp-site-blocks,
.wp-block-post-content,
.entry-content{max-width:none!important;padding-left:0!important;padding-right:0!important}
.wp-site-blocks > *{margin-block-start:0}

::selection{background:var(--a);color:var(--tinta-fija)}
:focus-visible{outline:3px solid var(--a);outline-offset:2px}

/* ==================================================================
   1. TIPOGRAFÍA
   ================================================================== */
h1,h2,h3,h4{
  font-family:var(--titular);font-weight:800;
  line-height:.9;letter-spacing:-.03em;margin:0;
  text-transform:uppercase;
}

/* El titular a escala de cartel. Se sangra a la izquierda para que la
   letra toque el borde óptico: una mayúscula deja aire propio y sin este
   ajuste parece descolgada del filete. */
.wcb-cartel{
  font-size:clamp(3rem, 13vw, 11rem);
  line-height:.8;letter-spacing:-.045em;
  margin:0 0 .06em -.015em;
}

.wcb-mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}

/* ==================================================================
   2. CABECERA
   ================================================================== */
.wcb-cab{
  background:var(--h);border-bottom:var(--borde);
  padding:clamp(10px,1.4vw,18px) var(--gut);
  display:flex;align-items:center;gap:clamp(14px,3vw,42px);
  position:relative;z-index:60;
}
.wcb-logo{display:block;flex:0 0 auto;color:var(--t)}
.wcb-logo svg{display:block;width:100%;height:auto}
.wcb-logo-texto{font-family:var(--titular);font-weight:800;font-size:1.4rem;text-transform:uppercase}

/* Buscador: una LÍNEA, no una caja. Es el gesto que más separa esta
   tienda de una plantilla de comercio genérica. */
.wcb-buscador{
  flex:1 1 auto;display:flex;align-items:center;gap:8px;
  border-bottom:2px solid var(--t);
}
.wcb-buscador input[type=search]{
  flex:1;min-width:0;border:0;background:transparent;outline:0;
  font-family:var(--mono);font-size:.85rem;letter-spacing:.02em;
  padding:.5rem 0;color:var(--t);
}
.wcb-buscador input[type=search]::placeholder{color:var(--g);opacity:1}
.wcb-buscador input[type=search]::-webkit-search-cancel-button{filter:grayscale(1)}
.wcb-buscador button{
  border:0;background:transparent;cursor:pointer;padding:.35rem;display:flex;
}
.wcb-buscador:focus-within{border-bottom-color:var(--a);box-shadow:0 2px 0 var(--a)}

.wcb-acciones{display:flex;gap:clamp(10px,1.6vw,22px);flex:0 0 auto}
.wcb-accion-cab{
  display:flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
}
.wcb-accion-cab:hover{color:var(--t);box-shadow:inset 0 -2px 0 var(--a)}
.wcb-cuenta{
  font-style:normal;background:var(--t);color:var(--h);
  min-width:1.35em;text-align:center;padding:.1em .35em;font-size:.68rem;
}
.wcb-cuenta-cero{background:transparent;color:var(--g);box-shadow:inset 0 0 0 1px currentColor}

/* ==================================================================
   3. MENÚ  (marcado del plugin wcdiscos-menu; el JS conmuta
   .wcd-abierto en escritorio y .abierto/.desplegado en móvil)
   ================================================================== */
.wcd-nav{
  background:var(--t);color:var(--h);
  padding:0 var(--gut);position:relative;z-index:50;
}
.wcd-nav p{margin:0}
.wcd-menu{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:stretch;
}
.wcd-menu-item{position:static}
.wcd-menu-link{
  display:flex;align-items:center;gap:.4rem;
  padding:.85rem clamp(10px,1.1vw,16px);
  font-family:var(--mono);font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--h);white-space:nowrap;
}
.wcd-menu-item:hover > .wcd-menu-link,
.wcd-menu-item.wcd-abierto > .wcd-menu-link{background:var(--a);color:var(--tinta-fija)}

/* El plugin emite un <i class="wcd-flecha"> y un <button class="wcd-desplegar">
   para el móvil. En escritorio no pintan nada: sin ocultarlos, el botón se
   dibuja como un rectángulo suelto debajo de cada entrada. */
.wcd-flecha,
.wcd-desplegar{display:none}

/* La etiqueta es <em class="wcd-nuevo">, no .wcd-menu-nuevo */
.wcd-nuevo{
  background:var(--a);color:var(--tinta-fija);font-style:normal;
  font-size:.58rem;padding:.15em .35em;letter-spacing:.08em;margin-left:.15rem;
}
.wcd-menu-item:hover > .wcd-menu-link .wcd-nuevo,
.wcd-menu-item.wcd-abierto > .wcd-menu-link .wcd-nuevo{background:var(--t);color:var(--a)}

/* Panel: a sangre, negro, en columnas. Sin sombras ni bordes redondeados. */
.wcd-mega{
  display:none;position:absolute;left:0;right:0;top:100%;
  background:var(--t);color:var(--h);
  border-top:1px solid var(--inv-linea);
  padding:clamp(18px,2.4vw,32px) var(--gut) clamp(22px,3vw,38px);
  z-index:40;
}
.wcd-menu-item.wcd-abierto > .wcd-mega{display:grid;grid-template-columns:230px 1fr;gap:clamp(18px,3vw,40px)}
.wcd-mega-portada{margin:0}
.wcd-mega-portada img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;filter:grayscale(1) contrast(1.15)}
.wcd-mega-portada:hover img{filter:none}
.wcd-mega-portada figcaption{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.5rem 0 0;color:var(--g);
}
.wcd-mega-portada:hover figcaption{color:var(--a)}
.wcd-mega-raiz,.wcd-mega-todo{margin:0}
.wcd-mega-raiz a,
.wcd-mega-todo a{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--a);border-bottom:0;padding:.5rem 0;
}
.wcd-mega-raiz a:hover,
.wcd-mega-todo a:hover{background:var(--a);color:var(--tinta-fija);padding-left:.4rem;padding-right:.4rem}
.wcd-mega ul{
  list-style:none;margin:0;padding:0;
  columns:4;column-gap:clamp(16px,2.4vw,34px);
}
.wcd-mega ul li{break-inside:avoid;margin:0 0 .1rem}
.wcd-mega ul a{
  display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;
  padding:.3rem 0;font-size:.83rem;color:var(--inv-txt);
  border-bottom:1px solid var(--inv-linea);
}
.wcd-mega ul a:hover{color:var(--tinta-fija);background:var(--a);padding-left:.35rem;padding-right:.35rem}
.wcd-mega ul a span{font-family:var(--mono);font-size:.66rem;color:var(--g)}
.wcd-mega ul a:hover span{color:var(--t)}

.wcd-menu-abrir{display:none}

/* ==================================================================
   4. MARQUESINA
   Solo datos reales del catálogo: nombres de categoría y su recuento.
   ================================================================== */
.wcb-ticker{
  background:var(--a);color:var(--tinta-fija);border-bottom:var(--borde);
  overflow:hidden;position:relative;
}
.wcb-ticker-tira{
  display:flex;width:max-content;
  animation:wcb-corre 46s linear infinite;
}
.wcb-ticker a{
  display:flex;align-items:baseline;gap:.4rem;
  padding:.5rem 1.1rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;white-space:nowrap;
  border-right:1px solid rgba(var(--fg-rgb),.22);
}
.wcb-ticker a i{font-style:normal;opacity:.55;font-size:.62rem}
.wcb-ticker:hover .wcb-ticker-tira{animation-play-state:paused}
@keyframes wcb-corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==================================================================
   5. SLIDER  (el JS desplaza .wcd-slider-pista de anchura en anchura,
   así que cada diapositiva debe medir exactamente el 100%)
   ================================================================== */
.wcd-slider{position:relative;background:var(--t);border-bottom:var(--borde)}

/* La ALTURA se fija en la pista, no en cada diapositiva.
   Puesta en la diapositiva dependía de que su imagen hubiera cargado: las
   que van fuera de pantalla llevan loading="lazy", no cargaban, y el hueco
   se quedaba en 0-48 px mientras la primera medía 473. La pista con una
   proporción fija resuelve la altura una vez y las diapositivas la llenan. */
.wcd-slider-pista{
  display:flex;align-items:stretch;
  aspect-ratio:1920/620;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.wcd-slider-pista::-webkit-scrollbar{display:none}
.wcd-slide{
  flex:0 0 100%;scroll-snap-align:start;position:relative;display:block;
  height:100%;min-width:100%;
}
.wcd-slide img{width:100%;height:100%;object-fit:cover;display:block}

/* El plugin deja un <p> suelto alrededor de los controles (wpautop). Con
   las flechas ya posicionadas, ese párrafo solo aportaba 24 px de banda
   negra bajo el slider. Se anula sin ocultarlo: dentro viven los botones. */
.wcd-slider > p{margin:0;height:0;line-height:0;font-size:0}
/* El velo sube más y arranca más opaco: el titular cae sobre una foto de
   camisetas de colores y a media opacidad no se leía. */
.wcd-slide-texto{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:var(--gut);
  background:linear-gradient(to top,rgba(var(--fg-rgb),.94) 0%,rgba(var(--fg-rgb),.72) 34%,rgba(var(--fg-rgb),0) 78%);
  color:var(--h);
}
.wcd-slide-caja{max-width:44ch}
.wcd-slide-caja strong{
  display:block;font-family:var(--titular);font-weight:800;
  font-size:clamp(2rem,7vw,5.4rem);line-height:.84;letter-spacing:-.04em;
  text-transform:uppercase;margin:0 0 .3rem;
}
.wcd-slide-caja p{margin:0 0 1rem;font-size:.95rem;color:#CFCBC3;max-width:48ch}
.wcd-slide-cta{
  display:inline-block;background:var(--a);color:var(--tinta-fija);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.6rem 1.2rem;
}
.wcd-slide:hover .wcd-slide-cta{background:var(--h)}
.wcd-slider-puntos{
  position:absolute;left:var(--gut);bottom:calc(var(--gut) / 2);
  display:flex;gap:6px;z-index:3;
}
.wcd-slider-puntos button{
  width:34px;height:4px;border:0;padding:0;cursor:pointer;
  background:rgba(var(--bg-rgb),.4);
}
.wcd-slider-puntos button.activo{background:var(--a);color:var(--tinta-fija)}

/* Anterior y siguiente. Sin estilar salían como dos cajitas blancas
   apiladas sobre el propio slider. */
.wcd-ant,.wcd-sig{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:56px;border:0;padding:0;cursor:pointer;
  background:rgba(var(--fg-rgb),.62);color:var(--h);
  font-family:var(--mono);font-size:1.1rem;line-height:1;
}
.wcd-ant{left:0}
.wcd-sig{right:0}
.wcd-ant:hover,.wcd-sig:hover{background:var(--a);color:var(--tinta-fija)}

/* ==================================================================
   6. ÍNDICE
   ================================================================== */
.wcb-indice{
  padding:clamp(28px,5vw,70px) var(--gut) clamp(22px,3vw,44px);
  border-bottom:var(--borde);
}
.wcb-indice-datos{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(18px,4vw,60px);
  border-top:var(--borde);padding-top:.9rem;
}
.wcb-indice-datos p{margin:0;display:flex;align-items:baseline;gap:.5rem}
.wcb-indice-datos b{font-family:var(--mono);font-size:1.5rem;font-weight:700}
.wcb-indice-datos span{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g);
}
.wcb-indice-ir{margin-left:auto!important}
.wcb-indice-ir a{
  display:flex;align-items:center;gap:.5rem;background:var(--t);color:var(--h);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.7rem 1.1rem;
}
.wcb-indice-ir a:hover{background:var(--a);color:var(--tinta-fija)}

/* ==================================================================
   7. CABECERA DE SECCIÓN
   ================================================================== */
.wcb-titulo{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;
  padding:clamp(30px,5vw,66px) var(--gut) .7rem;
  border-bottom:var(--borde);
}
.wcb-titulo h2{
  font-size:clamp(2rem,7.5vw,6rem);line-height:.82;letter-spacing:-.042em;
  margin:0 0 -.06em -.012em;
}
.wcb-titulo a{
  display:flex;align-items:center;gap:.45rem;flex:0 0 auto;padding-bottom:.35rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
}
.wcb-titulo a:hover{box-shadow:inset 0 -2px 0 var(--a)}

/* ==================================================================
   8. LA PIEZA DE CATÁLOGO
   Rejilla de filetes: el contenedor va en negro y las celdas en hueso
   con 1px de hueco. El filete sale solo, sin un borde por celda que
   se duplicaría en cada junta.
   ================================================================== */
/* NÚMERO DE COLUMNAS FIJO, no auto-fill.
   Con auto-fill el navegador decide cuántas caben (6 en un portátil ancho) y
   una tanda de 10 o de 20 productos deja la última fila coja. Fijándolo a 5
   las dos cuentas que usa la tienda —10 en portada, 20 por página— salen
   exactas. Es una restricción de diseño, no un capricho del contenedor. */
.woocommerce ul.products,
ul.products{
  list-style:none;margin:0;padding:0;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;background:var(--h);
  border-top:var(--borde);border-bottom:var(--borde);
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none!important}

/* Los filetes los dibuja CADA celda (derecha y abajo), no el hueco del
   contenedor. Con `gap` sobre fondo negro, una última fila incompleta deja
   a la vista un boquete negro donde no hay productos. Así la línea existe
   solo donde hay algo que separar. */
.woocommerce ul.products li.product,
ul.products li.product{
  background:var(--h);margin:0!important;padding:0!important;width:auto!important;
  float:none!important;display:flex;flex-direction:column;position:relative;
  box-shadow:1px 0 0 var(--t), 0 1px 0 var(--t);
}
.woocommerce ul.products li.product a{text-decoration:none}

.wcb-enlace{display:flex;flex-direction:column;flex:1 1 auto}

/* `contain`, NUNCA `cover`: recortar la estampación para llenar la celda le
   come el titular al diseño, que es justo lo que el cliente mira.
   Pero `contain` sobre fondo BLANCO devolvía la caja que este tema dice
   eliminar: medido, era rgb(255,255,255) sobre un papel rgb(237,234,227).
   `mix-blend-mode:multiply` sobre el papel hace que el blanco de la foto
   SEA el papel: la estampación flota, sin recorte y sin caja. */
.wcb-lienzo{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:var(--h);
}
.wcb-lienzo img{
  width:100%;height:100%;object-fit:contain;display:block;
  mix-blend-mode:multiply;
  margin:0!important;border:0!important;border-radius:0!important;
}
/* Al invertir la pieza el papel es negro y `multiply` la borraría. */
ul.products li.product:hover .wcb-lienzo,
ul.products li.product:focus-within .wcb-lienzo{background:var(--h)}

/* El número de catálogo: lo que convierte una parrilla de artículos en
   un fondo de catálogo. Va encima de la imagen, en su esquina. */
/* El número va en ácido EN REPOSO, no al pasar por encima.
   Medido en un móvil, la pieza en reposo no tenía un solo punto de color:
   toda la personalidad del tema vivía en :hover, que en una pantalla táctil
   NO EXISTE. Un chip pequeño por celda le da su firma al catálogo en
   cualquier aparato, sin gritar. */
.wcb-num{
  position:absolute;top:0;left:0;z-index:2;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  background:var(--a);color:var(--tinta-fija);padding:.28rem .45rem;
}
.wcb-rebaja,.wcb-agotado{
  position:absolute;top:0;right:0;z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.28rem .45rem;
}
.wcb-rebaja{background:var(--a);color:var(--tinta-fija)}
.wcb-agotado{background:var(--t);color:var(--h)}

.wcb-nombre{
  display:block;padding:.6rem .7rem .1rem;
  font-family:var(--texto);font-weight:600;font-size:.78rem;line-height:1.25;
  text-transform:uppercase;letter-spacing:.005em;
  min-height:2.9em;
}
.wcb-precio{
  display:block;padding:0 .7rem .6rem;margin-top:auto;
  font-family:var(--mono);font-size:.86rem;font-weight:700;
}
.wcb-precio del{color:var(--g);font-weight:400;margin-right:.35rem}
.wcb-precio ins{text-decoration:none}

.wcb-accion{
  display:block;text-align:center;border-top:1px solid rgba(var(--fg-rgb),.22);
  padding:.62rem .5rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t);
}

/* Estado activo: INVIERTE, y corta en seco. Sin transition a propósito. */
.woocommerce ul.products li.product:hover,
ul.products li.product:hover,
ul.products li.product:focus-within{background:var(--t);color:var(--h)}
ul.products li.product:hover .wcb-precio,
ul.products li.product:focus-within .wcb-precio{color:var(--a)}
ul.products li.product:hover .wcb-num{background:var(--h);color:var(--t)}
ul.products li.product:hover .wcb-accion,
ul.products li.product:focus-within .wcb-accion{
  background:var(--a);color:var(--tinta-fija);border-top-color:var(--a);
}
ul.products li.product:hover .wcb-lienzo img{filter:contrast(1.06)}

/* WooCommerce añade sus propias clases al añadir al carrito */
.wcb-accion.added{background:var(--t);color:var(--a)}
.wcb-accion.loading{opacity:.6}
.woocommerce ul.products li.product .added_to_cart{
  display:block;text-align:center;padding:.4rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--t);color:var(--a);
}

/* En pantallas tactiles no hay :hover NUNCA. La acción deja de ser una
   insinuación y pasa a ser un botón; el estado activo se da al tocar. */
@media (hover:none){
  /* La barra se mete DENTRO de la celda. A todo lo ancho, dos botones
     contiguos se fundian en una sola franja negra y no se veia cual era
     de cada producto. */
  .wcb-accion{
    background:var(--t);color:var(--h);border-top:0;
    margin:.15rem .7rem .8rem;padding:.7rem .5rem;
  }
  ul.products li.product:active{background:var(--t);color:var(--h)}
  ul.products li.product:active .wcb-precio{color:var(--a)}
  ul.products li.product:active .wcb-accion{background:var(--a);color:var(--tinta-fija)}
}

/* JERARQUÍA. Sección tras sección de celdas idénticas es un almacén, no
   una portada. La primera pieza ocupa 2x2: con 12 productos y 5 columnas
   la cuenta sale exacta (4 celdas + 11 = 15 = 3 filas). Por debajo de
   1280 px se desactiva y 12 vuelve a dividir limpio entre 4, 3 y 2. */
.wcb-destacada ul.products li.product:first-child{grid-column:span 2;grid-row:span 2}
.wcb-destacada ul.products li.product:first-child .wcb-nombre{font-size:1.05rem;min-height:0;padding:.9rem 1rem .2rem}
.wcb-destacada ul.products li.product:first-child .wcb-precio{font-size:1.3rem;padding:0 1rem .9rem}
.wcb-destacada ul.products li.product:first-child .wcb-num{font-size:.72rem;padding:.4rem .6rem}
@media (max-width:1280px){
  .wcb-destacada ul.products li.product:first-child{grid-column:auto;grid-row:auto}
  .wcb-destacada ul.products li.product:first-child .wcb-nombre{font-size:.78rem;min-height:2.9em;padding:.6rem .7rem .1rem}
  .wcb-destacada ul.products li.product:first-child .wcb-precio{font-size:.86rem;padding:0 .7rem .6rem}
}

/* ==================================================================
   9. SECCIONES
   ================================================================== */
.wcb-secciones{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;background:var(--h);border-top:var(--borde);border-bottom:var(--borde);
}
.wcb-seccion{
  background:var(--h);display:block;position:relative;
  box-shadow:1px 0 0 var(--t), 0 1px 0 var(--t);
}
.wcb-seccion .wcb-lienzo{aspect-ratio:4/3;background:var(--h)}
.wcb-seccion .wcb-lienzo img{object-fit:cover}
.wcb-seccion .wcb-lienzo img{filter:grayscale(1) contrast(1.15)}
.wcb-seccion:hover .wcb-lienzo img{filter:none}
.wcb-seccion-pie{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.6rem .7rem .75rem;
}
.wcb-seccion-pie b{font-family:var(--texto);font-weight:700;font-size:.8rem;letter-spacing:.01em}
.wcb-seccion-pie i{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--g)}
.wcb-seccion:hover{background:var(--t);color:var(--h)}
.wcb-seccion:hover i{color:var(--a)}

/* ==================================================================
   10. LISTADO
   ================================================================== */
.wcb-listado-cab{
  padding:clamp(26px,4.5vw,60px) var(--gut) .8rem;border-bottom:var(--borde);
}
.wcb-listado-cab h1{
  font-size:clamp(2.2rem,9vw,7rem);line-height:.8;letter-spacing:-.045em;
  margin:0 0 .1em -.014em;
}
.woocommerce-breadcrumb{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--g);margin:0 0 .7rem;
}
.woocommerce-breadcrumb a:hover{color:var(--t);box-shadow:inset 0 -1px 0 var(--a)}

.wcb-listado-barra{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem var(--gut);border-bottom:var(--borde);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
}
.woocommerce-result-count{margin:0!important;color:var(--g)}
.woocommerce-ordering{margin:0!important}
.woocommerce-ordering select,
.wcb-listado-barra select{
  border:var(--borde);background:var(--h);color:var(--t);border-radius:0;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.4rem 2rem .4rem .6rem;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--t) 50%),linear-gradient(135deg,var(--t) 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.woocommerce-ordering select:focus{outline:3px solid var(--a);outline-offset:1px}

.woocommerce nav.woocommerce-pagination{padding:clamp(20px,3vw,40px) var(--gut);text-align:left}
.woocommerce nav.woocommerce-pagination ul{border:0;margin:0;display:flex;gap:1px;background:var(--t);width:max-content}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0;overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  background:var(--h);color:var(--t);padding:.6rem .95rem;
  font-family:var(--mono);font-size:.72rem;line-height:1;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--a);color:var(--tinta-fija)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--t);color:var(--a)}

.woocommerce-no-products-found,
.woocommerce-info,.woocommerce-message,.woocommerce-error{
  margin:0;padding:1rem var(--gut);border:0;border-bottom:var(--borde);
  background:var(--h);font-family:var(--mono);font-size:.78rem;
}
.woocommerce-message{background:var(--a);color:var(--tinta-fija)}
.woocommerce-error{background:var(--t);color:var(--h)}
.woocommerce-info::before,.woocommerce-message::before,.woocommerce-error::before{content:none}

/* ==================================================================
   11. FICHA DE PRODUCTO
   ================================================================== */
.woocommerce div.product{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;
  border-bottom:var(--borde);
}
.woocommerce div.product div.images{
  grid-column:1;border-right:var(--borde);background:#fff;
}
.woocommerce div.product div.images img{border:0;border-radius:0;display:block}
.woocommerce div.product div.summary{
  grid-column:2;margin:0!important;padding:clamp(22px,3.4vw,52px) var(--gut);
}
.woocommerce div.product .product_title{
  font-size:clamp(1.7rem,3.6vw,3.2rem);line-height:.92;letter-spacing:-.03em;margin:0 0 .7rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--t);margin:0 0 1.1rem;
}
.woocommerce div.product p.price del{color:var(--g);font-weight:400}
.woocommerce div.product p.price ins{text-decoration:none;background:var(--a);padding:0 .2em;color:var(--tinta-fija)}
.woocommerce div.product form.cart{margin:0 0 1.4rem;border-top:var(--borde);padding-top:1.1rem}
.woocommerce div.product .variations{margin:0 0 1rem}
.woocommerce div.product .variations th,
.woocommerce div.product .variations td{padding:.3rem 0;border:0}
.woocommerce div.product .variations label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
}
.woocommerce div.product .variations select{
  border:var(--borde);border-radius:0;background:var(--h);padding:.55rem .7rem;
  font-family:var(--mono);font-size:.78rem;width:100%;
}
.woocommerce div.product .quantity input.qty{
  border:var(--borde);border-radius:0;background:var(--h);padding:.62rem .4rem;
  font-family:var(--mono);width:4.2rem;text-align:center;
}
.woocommerce div.product .product_meta{
  border-top:var(--borde);padding-top:.9rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--g);
}
.woocommerce div.product .woocommerce-tabs{grid-column:1 / -1;border-top:var(--borde);padding:0 var(--gut) clamp(24px,3vw,48px)}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 1.2rem;border-bottom:var(--borde)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border:0;border-radius:0;background:transparent;margin:0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  padding:.8rem 1rem .8rem 0;margin-right:1.2rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--g);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--t);box-shadow:inset 0 -3px 0 var(--a)}
.woocommerce div.product .related{grid-column:1 / -1;border-top:var(--borde)}
.woocommerce div.product .related > h2{padding:clamp(24px,3.4vw,48px) var(--gut) .7rem;font-size:clamp(1.6rem,4vw,3rem)}

/* botones generales */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt{
  background:var(--t);color:var(--h);border:0;border-radius:0;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.85rem 1.4rem;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce button.button.alt:hover{background:var(--a);color:var(--tinta-fija)}
.woocommerce button.button:disabled,.woocommerce button.button.disabled{background:var(--g);color:var(--h);opacity:1}
.woocommerce .single_add_to_cart_button{width:100%}

/* ==================================================================
   12. CESTA, CAJA Y CUENTA
   ================================================================== */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content,
.woocommerce-page:not(.woocommerce-shop) .entry-content{padding:0 var(--gut) clamp(30px,4vw,60px)}
.woocommerce table.shop_table{border:var(--borde);border-radius:0;border-collapse:collapse}
.woocommerce table.shop_table th{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  border-bottom:var(--borde);
}
.woocommerce table.shop_table td{border-top:1px solid rgba(var(--fg-rgb),.14)}
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3{font-size:1.3rem;margin:0 0 .8rem}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  border:var(--borde)!important;border-radius:0!important;background:var(--h);
  padding:.7rem .8rem;font-family:var(--texto);height:auto!important;
}
.woocommerce form .form-row label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
}
.woocommerce-form-coupon-toggle,.woocommerce-form-login-toggle{margin-top:1rem}

/* ==================================================================
   13. PIE
   ================================================================== */
.wcb-pie{background:var(--t);color:var(--h);padding:clamp(34px,5vw,72px) var(--gut) 0}
.wcb-pie-arriba{
  display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:clamp(20px,4vw,60px);
  padding-bottom:clamp(24px,3.4vw,48px);border-bottom:1px solid var(--inv-linea);
}
.wcb-pie .wcb-logo{color:var(--h);width:min(320px,70vw)}
.wcb-pie-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(16px,2.6vw,36px);
}
.wcb-pie-cols h3{
  font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.14em;
  /* --inv-g, NO --g: el pie es una superficie invertida y su apagado tiene
     que ser el claro. Con --g (#5C584F) sobre este negro daba 2,78:1 y
     fallaba AA — y fallaba YA en modo claro. Lo destapó la auditoría del
     modo oscuro; el defecto llevaba aquí desde antes. */
  color:var(--inv-g);margin:0 0 .7rem;
}
.wcb-pie-cols ul{list-style:none;margin:0;padding:0}
.wcb-pie-cols li{margin:0 0 .35rem}
.wcb-pie-cols a{font-size:.85rem;color:var(--inv-txt)}
.wcb-pie-cols a:hover{color:var(--a)}
.wcb-pie-abajo{
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  padding:1rem 0 1.2rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--inv-g);
}

/* El logo del pie a escala de cartel, recortado por abajo: cierra la
   página con la marca en grande sin necesidad de un "gracias por su visita". */
.wcb-firma{
  overflow:hidden;line-height:0;border-top:1px solid var(--inv-linea);
}
.wcb-firma svg,.wcb-firma .wcb-logo{width:100%;margin-bottom:-2.5%}
.wcb-firma .wcb-logo{color:var(--inv-alza)}

/* ==================================================================
   14. BARRA INFERIOR FIJA
   El carrito y la búsqueda siempre al alcance, como la mesa de merchan.
   ================================================================== */
.wcb-barra{
  position:sticky;bottom:0;z-index:70;
  display:none;align-items:center;gap:10px;
  background:var(--t);color:var(--h);
  border-top:1px solid var(--inv-linea);padding:8px var(--gut);
}
.wcb-barra .wcb-buscador{border-bottom-color:var(--h)}
.wcb-barra .wcb-buscador input[type=search]{color:var(--h)}
.wcb-barra .wcb-buscador input[type=search]::placeholder{color:var(--g)}
.wcb-barra .wcb-buscador button svg{color:var(--h)}
.wcb-barra-b{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.55rem .8rem;background:var(--inv-alza);white-space:nowrap;
}
.wcb-barra-b:hover{background:var(--a);color:var(--tinta-fija)}
.wcb-barra-cesta em{font-style:normal;color:var(--a);margin-left:.35rem}
.wcb-barra-cesta:hover em{color:var(--t)}

/* ==================================================================
   15. PANTALLAS PEQUEÑAS
   ================================================================== */
/* El número de columnas baja por escalones que siguen dividiendo bien las
   tandas de 10 y 20: 5 → 4 → 3 → 2. Nunca queda una fila coja. */
/* OJO CON LA ESPECIFICIDAD: la regla base es `.woocommerce ul.products`
   (0,2,1). Escribir aqui solo `ul.products` (0,1,1) PIERDE aunque vaya
   despues, y la rejilla se quedaba en 5 columnas hasta en un movil. Todas
   las reglas de columnas repiten el selector compuesto. */
@media (max-width:1280px){
  .woocommerce ul.products,ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wcb-secciones{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wcd-mega ul{columns:3}
}
@media (max-width:1000px){
  .woocommerce ul.products,ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wcb-secciones{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:900px){
  .wcb-cab{flex-wrap:wrap;gap:10px}
  .wcb-logo{width:170px!important;order:1}
  .wcb-acciones{order:2;margin-left:auto}
  .wcb-buscador{order:3;flex:1 1 100%}
}

/* LA CABECERA DEL MÓVIL, EN DOS FILAS.
   Eran tres —logo, acciones, buscador— y ocupaban 186 px de una pantalla
   de 844: casi una cuarta parte antes de ver un solo producto. Y la fila
   de acciones dejaba medio ancho vacío a su izquierda.
   Para que quepan al lado del logo hay que ganar unos 90 px, y se ganan
   donde sobran: logo más pequeño, hueco menor y el contador de guardados
   y cesta pegado al icono en vez de en su propia cajita. */
@media (max-width:620px){
  .wcb-cab{gap:8px}
  .wcb-logo{width:124px!important}
  .wcb-acciones{gap:7px}

  /* El contador deja de ser un bloque aparte y se pega al icono. Sigue
     siendo el mismo número y el mismo elemento: solo ocupa lo que mide. */
  .wcb-acciones .wcb-cuenta{
    padding:0 .22rem;font-size:.6rem;margin-left:-.15rem;
  }
  .wcb-accion-cab{gap:.2rem}

  /* --- menú en columna --- */
  .wcd-nav{padding:0}
  /* Las tres barras se colocan por posicion, no apilandolas con margenes
     negativos dentro de un flex: eso las superponia y salia un icono roto. */
  .wcd-menu-abrir{
    position:relative;display:block;width:100%;text-align:left;
    background:var(--t);color:var(--h);border:0;cursor:pointer;
    padding:.9rem var(--gut) .9rem calc(var(--gut) + 32px);
    font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  }
  .wcd-menu-abrir span{
    position:absolute;left:var(--gut);width:20px;height:2px;background:var(--h);
  }
  .wcd-menu-abrir span:nth-of-type(1){top:calc(50% - 7px)}
  .wcd-menu-abrir span:nth-of-type(2){top:calc(50% - 1px)}
  .wcd-menu-abrir span:nth-of-type(3){top:calc(50% + 5px)}
  .wcd-menu{display:none;flex-direction:column;background:var(--t);padding-bottom:.6rem}
  .wcd-menu.abierto{display:flex}
  .wcd-menu-item{border-top:1px solid var(--inv-linea)}
  .wcd-menu-item{display:flex;flex-wrap:wrap;align-items:center}
  .wcd-menu-link{padding:.8rem var(--gut);flex:1 1 auto}

  /* En móvil el título navega y el botón despliega: dos gestos distintos
     en dos zonas distintas, que es lo que evita abrir cuando querías entrar. */
  .wcd-desplegar{
    display:block;flex:0 0 auto;width:56px;align-self:stretch;
    background:transparent;border:0;border-left:1px solid var(--inv-linea);cursor:pointer;position:relative;
  }
  .wcd-desplegar::before,
  .wcd-desplegar::after{
    content:"";position:absolute;top:50%;left:50%;background:var(--h);
    transform:translate(-50%,-50%);
  }
  .wcd-desplegar::before{width:14px;height:2px}
  .wcd-desplegar::after{width:2px;height:14px}
  .wcd-menu-item.desplegado .wcd-desplegar{background:var(--a);color:var(--tinta-fija)}
  .wcd-menu-item.desplegado .wcd-desplegar::before,
  .wcd-menu-item.desplegado .wcd-desplegar::after{background:var(--t)}
  .wcd-menu-item.desplegado .wcd-desplegar::after{display:none}
  .wcd-mega{flex:1 1 100%}
  .wcd-mega{position:static;padding:0 var(--gut) 1rem;border:0}
  .wcd-menu-item.desplegado > .wcd-mega{display:block}
  .wcd-menu-item.wcd-abierto > .wcd-mega{display:none}
  .wcd-menu-item.desplegado.wcd-abierto > .wcd-mega{display:block}
  .wcd-mega-portada{display:none}
  .wcd-mega ul{columns:1}
  body.wcd-menu-bloqueado{overflow:hidden}

  /* --- ficha en una columna --- */
  .woocommerce div.product{grid-template-columns:1fr}
  .woocommerce div.product div.images{grid-column:1;border-right:0;border-bottom:var(--borde)}
  .woocommerce div.product div.summary{grid-column:1}

  /* --- pie --- */
  .wcb-pie-arriba{grid-template-columns:1fr}

  /* --- la barra inferior aparece justo donde más sirve --- */
  .wcb-barra{display:flex}
}

@media (max-width:560px){
  .woocommerce ul.products,ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wcb-secciones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wcb-nombre{font-size:.72rem;min-height:3.2em}
  .wcd-slider-pista{aspect-ratio:1/1}
  .wcd-slide-caja strong{font-size:2.1rem}
  .wcd-slide-caja p{font-size:.85rem;margin-bottom:.7rem}
  .wcd-slide-texto{padding:12px}
  .wcd-ant,.wcd-sig{width:34px;height:44px}
  .wcb-barra .wcb-barra-b:first-child{display:none}
}

/* ==================================================================
   15b. LO QUE PINTA LA PLANTILLA HEREDADA DE WOOCOMMERCE
   El listado no usa mis clases: usa las suyas. Se estilan por su
   nombre real, comprobado en el HTML servido, no por el que me
   gustaría que tuvieran.
   ================================================================== */
.woocommerce-products-header{
  padding:clamp(26px,4.5vw,60px) var(--gut) .8rem;border-bottom:var(--borde);
}
.woocommerce-products-header__title,
.wcb-pagina-titulo{
  font-family:var(--titular);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.2rem,8vw,6.5rem);line-height:.8;letter-spacing:-.045em;
  margin:0 0 .08em -.014em;
}
.woocommerce-products-header .term-description{
  max-width:70ch;font-size:.92rem;color:#3A3A38;margin:.8rem 0 0;
}
.woocommerce-products-header .woocommerce-breadcrumb{margin:0 0 .6rem}

/* El bloque heredado se envuelve en .woocommerce sin márgenes propios */
main > .woocommerce{display:block}

/* Páginas normales (avisos legales, contacto, cesta, cuenta…) */
.wcb-pagina{padding:0 0 clamp(30px,4vw,60px)}
.wcb-pagina > .wcb-pagina-titulo{padding:clamp(26px,4.5vw,60px) var(--gut) .5rem}
.wcb-pagina > .entry-content,
.wcb-pagina > .wp-block-post-content{
  padding:1.2rem var(--gut) 0!important;max-width:none;
}
.wcb-pagina .wp-block-post-content > *{max-width:80ch}
.wcb-pagina .wp-block-post-content > .woocommerce,
.wcb-pagina .wp-block-post-content > .wp-block-woocommerce-cart,
.wcb-pagina .wp-block-post-content > .wp-block-woocommerce-checkout{max-width:none}

/* 404 */
.wcb-404-caja{padding:clamp(40px,7vw,110px) var(--gut) clamp(40px,6vw,90px);max-width:52rem}
.wcb-404-caja p{font-size:1.05rem;margin:0 0 1.4rem}
.wcb-404-ir a{
  display:inline-block;background:var(--t);color:var(--h);margin-top:1.2rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.8rem 1.3rem;
}
.wcb-404-ir a:hover{background:var(--a);color:var(--tinta-fija)}

/* El buscador cambia de color según dónde viva */
.wcb-buscador-pie{border-bottom-color:var(--h)}
.wcb-buscador-pie input[type=search]{color:var(--h)}
.wcb-buscador-pie input[type=search]::placeholder{color:var(--g)}
.wcb-buscador-pie button svg{color:var(--h)}

/* La firma del pie: el ancho manda sobre el style en línea del atajo */
.wcb-firma .wcb-logo{width:100%!important}

/* ==================================================================
   16. MOVIMIENTO REDUCIDO
   ================================================================== */
@media (prefers-reduced-motion:reduce){
  .wcb-ticker-tira{animation:none;transform:none}
  *{scroll-behavior:auto!important}
}

/* ==================================================================
   17. IMPRESIÓN
   ================================================================== */
@media print{
  .wcd-nav,.wcb-ticker,.wcb-barra,.wcd-slider,.wcb-pie{display:none}
  body{background:#fff}
}

/* La cabecera, del mismo material que la barra: el catalogo pasa por
   debajo y se ve. Profundidad sin una sola sombra. */
.wp-site-blocks > header.wp-block-template-part{
  background:rgba(var(--bg-rgb),.82);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
}
@supports not (backdrop-filter:blur(1px)){
  .wp-site-blocks > header.wp-block-template-part{background:var(--h)}
}

/* ==================================================================
   SELECTOR DE IDIOMA
   Dos siglas en mono, como las demas etiquetas de la cabecera. La activa
   va en acido — que aqui significa «esto es lo elegido», exactamente lo
   que es. Sin banderas: una bandera no es un idioma, y con «ES/EN» nadie
   duda.
   ================================================================== */
.wcb-idiomas{
  /* `inline-flex` y `align-self:center`. Como bloque estirado, su fondo
     gris se salia por arriba y por abajo de las dos siglas y parecia una
     caja rota; y ademas rompia la fila (ver el comentario del PHP). */
  display:inline-flex;align-items:center;align-self:center;gap:2px;
  flex:0 0 auto;margin-right:.2rem;vertical-align:middle;
}
.wcb-idioma{
  display:block;padding:.3rem .45rem;text-decoration:none;
  /* Sin fondo: en esta cabecera ningun elemento lo lleva. La sigla que NO
     esta elegida es solo texto; la elegida, un bloque acido. */
  background:transparent;color:var(--g);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  transition:background-color var(--paso),color var(--paso);
}
.wcb-idioma:hover{background:var(--roce);color:var(--t)}
/* Un punto entre las dos, como en «A · Z»: separa sin dibujar una caja. */
.wcb-idioma + .wcb-idioma::before{
  content:"·";position:absolute;margin-left:-.72rem;color:var(--g);opacity:.5;
}
.wcb-idioma{position:relative}
.wcb-idioma.activo{background:var(--a);color:var(--tinta-fija)}
.wcb-idioma:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* Sobre la barra negra del movil el hueso no vale de fondo. */
.wcb-barra .wcb-idioma{background:transparent;color:var(--inv-g2)}
.wcb-barra .wcb-idioma.activo{background:var(--a);color:var(--tinta-fija)}

@media (max-width:760px){
  /* En un movil caben las siglas, no el resto: se aprieta el conjunto. */
  .wcb-idiomas{margin-right:0}
  .wcb-idioma{padding:.3rem .38rem;font-size:.62rem}
}


/* ══════════════════════════════════════════════════════════════════════
   MODO OSCURO
   ══════════════════════════════════════════════════════════════════════

   Gira la PÁGINA, no el tema entero: tinta y hueso se intercambian, y con
   ellos todo lo que se apoya en ese par. Los grises van por parejas —cada
   uno con su reflejo para cuando la superficie es la contraria—, así que
   basta con intercambiarlos: una superficie «invertida» en modo oscuro es
   una superficie CLARA, y su texto apagado tiene que ser oscuro.

   TRES COSAS NO GIRAN, y no por gusto:

     1. El ácido. Es un amarillo claro: sobre hueso da 1,1:1. Donde es
        fondo, su texto queda clavado en tinta (`--tinta-fija`); donde es
        texto, se queda sobre tinta.
     2. Las peanas de las fotos. Llevan `mix-blend-mode:multiply` y sobre
        oscuro multiply ennegrece la foto entera.
     3. El hero y el panel de filtros. El primero va sobre una foto con su
        velo; el segundo es una losa negra a propósito. Los dos se declaran
        como ISLAS más abajo: dentro de ellas los tokens vuelven a sus
        valores claros y todo lo suyo sigue funcionando sin tocar una regla.
   ────────────────────────────────────────────────────────────────────── */
:root[data-tema="oscuro"]{
  --t:#EDEAE3;                 /* el texto pasa a ser el hueso */
  --h:#12120F;                 /* y el papel, tinta. No #0B0B0B: sobre una
                                  pantalla grande el negro absoluto vibra */
  --fg-rgb:237,234,227;
  --bg-rgb:18,18,15;

  /* las parejas, intercambiadas */
  --g:#A8A399;      --inv-g:#5C584F;
  --g2:#B9B4AA;
  /* NO #8C8880: ese es el valor que el propio :root de arriba tiene
     documentado como «2,94:1 sobre hueso, FALLA AA», y en oscuro este
     token vive justo ahí — sobre las superficies claras. Salió a 2,94:1
     clavado en el conmutador de vista. */
  --inv-g2:#5C584F;
  --g3:#D7D3CB;     --inv-txt:#3E3A34;

  /* líneas y realces sobre superficie invertida: allí ahora es CLARA */
  --inv-linea:#D5D1C9;
  --inv-alza:#E3DFD7;
  --inv-alza2:#DCD8D0;
  --inv-fuerte:#0B0B0B;

  --roce:rgba(237,234,227,.07);
  --activo-suave:#4A2530;
  color-scheme:dark;
}

/* Las ISLAS. Dentro de ellas los tokens vuelven a sus valores claros, así
   que su contenido se pinta exactamente igual que en modo claro sin tocar
   ni una de sus reglas. Es una línea por isla en vez de cuarenta parches. */
/* `.wcb-mando` es la barra del catálogo: una losa de tinta, igual que el
   panel. Girándola se volvía gris clara con su texto gris encima —«6.363
   ARTÍCULOS» y «MINIATURAS / LISTA» a 1,5:1— porque todo lo suyo está
   pensado para fondo oscuro. Es isla. */
:root[data-tema="oscuro"] :is(.wcb-panel, .wcb-hero, .wcb-pie, .wcb-mando){
  --t:#0B0B0B;   --h:#EDEAE3;
  --fg-rgb:11,11,11;   --bg-rgb:237,234,227;
  --g:#5C584F;   --inv-g:#A8A399;
  --g2:#8C8880;  --inv-g2:#B9B4AA;
  --g3:#3E3A34;  --inv-txt:#D7D3CB;
  --inv-linea:#262626;  --inv-alza:#1A1A1A;  --inv-alza2:#161616;
  --inv-fuerte:#fff;
  --roce:rgba(11,11,11,.055);
}

/* El pie ya era negro en modo claro, así que en oscuro NO gira: es una
   isla más (arriba). Solo se le da un borde para que no se funda con la
   página, que ahora es casi del mismo negro.
   Se descubrió midiendo: sus enlaces salían a 1,74:1 —gris oscuro sobre
   negro—. El fondo se quedaba de tinta y los grises de dentro giraban, que
   es la mitad del cambio y la peor. */
:root[data-tema="oscuro"] .wcb-pie{
  background:#0B0B0B;
  border-top:1px solid #262626;
}

/* La foto de la ficha de producto: mismo motivo que la peana del muro. */
:root[data-tema="oscuro"] .woocommerce div.product div.images{background:var(--hueso-fijo)}

/* Las fotos de producto pierden brillo sobre oscuro; se les devuelve un
   punto de contraste para que no se apaguen contra el fondo. */
:root[data-tema="oscuro"] .wcb-p-img{filter:contrast(1.02)}

/* ---- el conmutador ---- */
.wcb-tema{
  display:inline-flex;align-items:center;align-self:center;
  flex:0 0 auto;margin-right:.15rem;
  appearance:none;background:transparent;border:0;cursor:pointer;
  color:var(--g);padding:.3rem .4rem;line-height:0;
  transition:background-color var(--paso),color var(--paso);
}
.wcb-tema:hover{background:var(--roce);color:var(--t)}
.wcb-tema:focus-visible{outline:2px solid var(--t);outline-offset:1px}
/* Se enseña el icono de LO QUE PASARÁ al pulsar, no el del estado actual:
   un botón dice lo que hace. */
.wcb-tema .wcb-tema-luna{display:block}
.wcb-tema .wcb-tema-sol{display:none}
:root[data-tema="oscuro"] .wcb-tema .wcb-tema-luna{display:none}
:root[data-tema="oscuro"] .wcb-tema .wcb-tema-sol{display:block}


/* Los dos conmutadores, para un DEDO —y AL FINAL DEL FICHERO a propósito.
   Puestos en su `@media` de más arriba no hacían absolutamente nada: las
   reglas base de `.wcb-tema` y `.wcb-idioma` viven más abajo en este mismo
   fichero y, a igualdad de especificidad, manda la última. Una media query
   no gana por ser media query.
   Medidos antes: 30x27 y 26x27 px, objetivos pequeños para un dedo. */
@media (max-width:620px){
  .wcb-tema{padding:.45rem .5rem}
  .wcb-idioma{padding:.45rem .62rem}
}


/* El segundo rótulo de una columna del pie necesita aire por arriba: sin
   él, «Legal» se pegaba al último enlace de «Tienda» y parecía uno más. */
.wcb-pie-cols .wcb-pie-h3-2{margin-top:1.6rem}