/* ==================================================================
LA PORTADA — puertas, no almacén
Su único trabajo es repartir. Enseñar 8.621 cosas de golpe es el
problema que hay que resolver, no la forma de resolverlo.
================================================================== */
.wcb-portal{background:var(--h)}
/* ---- el buscador, primero y grande ----
Con 342 productos llamados «Antifascista siempre», buscar por nombre
es flojo; pero para quien YA sabe lo que quiere sigue siendo el
camino más corto, así que va delante de todo. */
.wcb-portal-cab{
padding:clamp(34px,6vw,92px) var(--gut) clamp(24px,3.5vw,48px);
border-bottom:var(--borde);
}
.wcb-portal-cab h1{
font-size:clamp(2.2rem,7vw,5.6rem);line-height:.9;letter-spacing:-.04em;
margin:0 0 clamp(18px,2.6vw,34px) -.012em;text-transform:none;
}
.wcb-portal-cab h1 em{font-style:normal;color:var(--g)}
.wcb-buscador-grande{border-bottom-width:3px}
.wcb-buscador-grande input[type=search]{
font-family:var(--titular);font-weight:600;
font-size:clamp(1.1rem,2.4vw,1.9rem);letter-spacing:-.01em;padding:.5rem 0;
}
.wcb-buscador-grande button svg{width:26px;height:26px}
.wcb-portal-cifra{
margin:.9rem 0 0;font-family:var(--mono);font-size:.72rem;
letter-spacing:.12em;text-transform:uppercase;color:var(--g);
}
.wcb-portal-cifra b{color:var(--t);font-size:.9rem}
/* ---- las puertas ----
Cuatro. Con su cifra real, calculada con la misma maquinaria que los
filtros: no puede mentir sobre lo que hay detrás. */
/* wpautop mete un
entre puerta y puerta, y en una rejilla ESO TAMBIEN
OCUPA CELDA: las cuatro puertas se colocaban en las columnas 1 y 3 con dos
huecos en medio. Medido, no deducido. */
.wcb-puertas br,
.wcb-portal br:not(h1 br){display:none}
.wcb-portal-cab h1 br{display:inline}
/* Y los saltos que SÍ son míos. La regla de arriba nació para barrer los
que colaba wpautop entre las puertas, y es de brocha gorda: mata
todos los del portal. Al añadir los reclamos se llevó por delante sus
saltos de línea y salían pegados —«PIDE DESDEDONDE QUIERAS»—.
Una defensa con radio de acción amplio se cobra piezas nuevas mucho
después de que nadie recuerde por qué se puso. */
.wcb-portal .wcb-reclamo br{display:inline}
.wcb-puertas{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;background:var(--h);border-bottom:var(--borde);
}
.wcb-puerta{
position:relative;display:flex;flex-direction:column;justify-content:flex-end;
min-height:clamp(200px,22vw,320px);overflow:hidden;
padding:clamp(16px,2vw,26px);
box-shadow:1px 0 0 var(--t);
background:var(--h);
}
.wcb-puerta:last-child{box-shadow:none}
/* El fondo de la puerta son productos de verdad, en mosaico y EN COLOR.
Estuvieron en gris y se veían apagados: en una tienda de un sello, la
mercancía es el color. Lo que hace que el rótulo se siga leyendo no es
quitarle color a la foto — es el velo de aquí abajo, que solo tapa el
tercio de abajo, justo donde vive el texto. Arriba la foto va libre. */
.wcb-puerta-fondo{
position:absolute;inset:0;z-index:0;
display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
opacity:.82;transition:opacity var(--paso-lento);
}
.wcb-puerta-fondo img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform var(--paso-lento);
}
/* El velo del rótulo. Va en el ::after de la puerta —no en el del mosaico,
que es una rejilla y se lo tragaría como una celda más—, así que pinta
por encima de las fotos y por debajo del texto (que es z-index 1).
La puerta de música lo reemplaza por sus rayas más abajo: no tiene
fotos que velar. */
.wcb-puerta::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(to top,
var(--h) 0%, rgba(var(--bg-rgb),.94) 30%,
rgba(var(--bg-rgb),.34) 64%, rgba(var(--bg-rgb),0) 100%);
}
/* Al posarse ya no «vuelve el color» —el color ya estaba—: la foto se
acerca. El velo NO se mueve: si se retirase, el rótulo dejaría de
leerse justo en el momento en que alguien lo está mirando. */
.wcb-puerta:hover .wcb-puerta-fondo{opacity:1}
.wcb-puerta:hover .wcb-puerta-fondo img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
.wcb-puerta-fondo,
.wcb-puerta-fondo img{transition:none}
.wcb-puerta:hover .wcb-puerta-fondo img{transform:none}
}
.wcb-puerta-txt{position:relative;z-index:1;display:block}
.wcb-puerta-txt b{
display:block;font-family:var(--titular);font-weight:800;
font-size:clamp(1.2rem,2.1vw,1.9rem);line-height:.95;letter-spacing:-.03em;
text-transform:uppercase;
}
.wcb-puerta-pie{
display:block;margin-top:.4rem;font-size:.78rem;line-height:1.3;color:var(--g3);
max-width:26ch;
}
.wcb-puerta-n{
display:inline-block;margin-top:.7rem;font-style:normal;
font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
background:var(--t);color:var(--h);padding:.22rem .5rem;
}
.wcb-puerta:hover .wcb-puerta-n{background:var(--a);color:var(--tinta-fija)}
/* La puerta de música no tiene HOY fotos que enseñar (borradas el
28-abr-2026, §34), así que no puede jugar al mismo juego que las otras
tres. Estuvo en negro, y mientras todo era gris pasaba por sobria; en
cuanto las vecinas recuperaron el color se convirtió en un agujero en
mitad de la fila.
Si no hay fotografía, va el color del sello. Es el segundo acento que
ya vive en el tema, no un color nuevo inventado para tapar un hueco.
El día que se recuperen las portadas, esta regla se borra y la puerta
se comporta como las demás. */
.wcb-puerta-musica{background:var(--rs);color:var(--tinta-fija)}
.wcb-puerta-musica .wcb-puerta-txt b{color:var(--tinta-fija)}
/* Tinta FIJA: el rosa no gira, así que su texto tampoco puede. Medido a
2,91:1 en oscuro cuando giraba con la página. */
/* Tinta ENTERA, no al 82 %. Con .82 daba 3,51:1 sobre el rosa y fallaba
AA; a plena tinta son 4,98:1. El rosa es un color fuerte y no deja
margen para suavizar el texto que va encima. */
.wcb-puerta-musica .wcb-puerta-pie{color:var(--tinta-fija)}
.wcb-puerta-musica .wcb-puerta-n{background:var(--tinta-fija);color:var(--hueso-fijo)}
.wcb-puerta-musica:hover .wcb-puerta-n{background:var(--hueso-fijo);color:var(--tinta-fija)}
.wcb-puerta-musica::after{
content:"";position:absolute;inset:0;z-index:0;opacity:.11;
/* Sustituye al velo: aquí no hay foto que velar. Las rayas en tinta
—antes en hueso, sobre negro— dan la misma textura sin aclarar el
campo, que es lo que sostiene el rótulo. */
background:repeating-linear-gradient(90deg,transparent 0 5px,var(--tinta-fija) 5px 6px);
}
/* ---- lo último ---- */
.wcb-portal-ultimo{padding:0 0 clamp(30px,4vw,60px)}
.wcb-portal-titulo{
display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
padding:clamp(28px,4vw,56px) var(--gut) .6rem;
}
.wcb-portal-titulo h2{
font-size:clamp(1.6rem,4vw,3rem);line-height:.9;letter-spacing:-.035em;margin:0;
}
.wcb-portal-titulo a{
font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
padding-bottom:.3rem;
}
.wcb-portal-titulo a:hover{box-shadow:inset 0 -2px 0 var(--a)}
.wcb-muro-tira{padding-top:0}
@media (max-width:1000px){
.wcb-puertas{grid-template-columns:repeat(2,minmax(0,1fr))}
.wcb-puerta{box-shadow:1px 0 0 var(--t),0 1px 0 var(--t)}
}
@media (max-width:560px){
.wcb-puertas{grid-template-columns:1fr}
.wcb-puerta{min-height:150px}
}
/* ==================================================================
VISTA DE LISTA
La música son 1.927 referencias y hoy no se sirve NI UNA portada: se
borraron del disco el 28-abr-2026 y son recuperables de una copia
anterior (§34 del runbook). Mientras tanto, en rejilla son 1.927 celdas
rayadas; su nombre, en cambio, lo dice todo:
«SUBVERSION-X recuerdos para vomitar LP + POSTER + CD».
Por eso la lista no es una preferencia: para esa mitad del catálogo
es la única forma de que se pueda leer.
================================================================== */
.wcb-muro.wcb-lista{
display:block;padding:0 var(--gut) clamp(24px,3vw,44px);
border-top:var(--borde);
}
/* La fila entera: nombre a la izquierda, accion y marcador a la derecha,
TODO en la misma linea. Antes .wcb-fila era `display:block`, asi que el
boton de anadir caia debajo a todo el ancho y desplazaba la fila. */
.wcb-fila{
display:flex;align-items:stretch;
border-bottom:1px solid rgba(var(--fg-rgb),.14);
}
/* Roce, no seleccion: el acido queda reservado para lo elegido. */
.wcb-fila:hover{background:var(--roce);box-shadow:0 0 0 6px var(--roce)}
.wcb-f{
flex:1 1 auto;min-width:0;
display:flex;align-items:baseline;gap:clamp(10px,1.6vw,22px);
/* Holgura a la derecha: sin ella el precio terminaba a 0 px de la linea
divisoria de la columna de accion, montado encima. Medido, no visto. */
padding:.62rem clamp(14px,1.4vw,26px) .62rem 0;
}
.wcb-f-num{
flex:0 0 auto;font-style:normal;font-family:var(--mono);
font-size:.64rem;color:var(--g);width:3.2em;
}
.wcb-fila:hover .wcb-f-num{color:var(--t)}
.wcb-f-nombre{
flex:1 1 auto;font-family:var(--texto);font-weight:600;font-size:.92rem;
line-height:1.3;min-width:0;
}
.wcb-f-precio{
flex:0 0 auto;font-family:var(--mono);font-size:.88rem;font-weight:700;
white-space:nowrap;
}
.wcb-f .wcb-p-marca{
position:static;flex:0 0 auto;font-size:.56rem;padding:.16rem .34rem;
}
/* conmutador rejilla / lista */
.wcb-vista{display:flex;flex:0 0 auto;gap:1px;background:var(--inv-alza)}
.wcb-vista-b{
border:0;cursor:pointer;background:var(--t);color:var(--inv-g2);padding:.5rem .75rem;
font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
}
.wcb-vista-b:hover{background:var(--inv-alza2);color:var(--h)}
.wcb-vista-b.activo{background:var(--a);color:var(--tinta-fija)}
@media (max-width:560px){
.wcb-f{flex-wrap:wrap;gap:.2rem .6rem}
.wcb-f-num{width:auto}
.wcb-f-nombre{flex:1 1 100%;order:3;font-size:.85rem}
.wcb-f-precio{margin-left:auto}
.wcb-vista-b{padding:.45rem .55rem;font-size:.6rem}
}
/* ------------------------------------------------------------------ *
* La columna de accion de la lista
*
* Ancho fijo: es una COLUMNA, y una columna que cambia de ancho fila a
* fila no es una columna. El ojo baja por ella sin tener que buscarla.
* ------------------------------------------------------------------ */
.wcb-fila .wcb-accion{
flex:0 0 auto;align-self:stretch;
width:6.4rem;margin:0;
display:flex;align-items:center;justify-content:center;
border:0;border-left:1px solid rgba(var(--fg-rgb),.14);
text-decoration:none;
}
/* `relative`, NO `static`. El icono del marcador es un ::before absoluto:
si el boton deja de estar posicionado, el pseudo-elemento se ancla al
siguiente ancestro con posicion y el simbolo se va a pintar al centro
de la pagina. Se vio en una captura y NO en el DOM, porque un
pseudo-elemento no sale en querySelectorAll: medir los elementos daba
la banda central limpia mientras el icono estaba alli. */
.wcb-fila .wcb-guardar{
position:relative;flex:0 0 auto;align-self:center;
margin-left:.45rem;margin-right:.1rem;background:transparent;
/* A .55 de opacidad y 1px de trazo el marcador desaparecia sobre el
hueso. En la rejilla flota sobre una foto y ahi si se recorta solo;
en una fila no tiene fondo que lo separe, asi que necesita cuerpo. */
opacity:.8;
}
.wcb-fila:hover .wcb-guardar{opacity:1}
@media (max-width:560px){
.wcb-fila .wcb-accion{width:4.6rem;font-size:.6rem}
.wcb-fila .wcb-guardar{margin-left:.2rem}
}
/* El cuerpo lo da ahora el propio SVG (15 px, trazo 1,75). */
.wcb-fila .wcb-guardar:hover,
.wcb-fila .wcb-guardar.activo{opacity:1}
/* En la fila el botón NO va sobre la foto: va sobre la propia fila, que sí
gira con el tema. Así que aquí la pareja es la que gira, no la fija.
Sin esto, en modo oscuro se invertía a hueso sobre hueso. */
.wcb-fila .wcb-guardar{background:transparent;color:var(--t)}
.wcb-fila .wcb-guardar:hover,
.wcb-fila .wcb-guardar:focus-visible{background:var(--t);color:var(--h)}
/* ------------------------------------------------------------------ *
* MINIATURAS: la lista, con la foto
*
* El termino medio que faltaba. La rejilla da la imagen y pierde el
* nombre; la lista da el nombre y pierde la imagen. Aqui caben las dos,
* y la foto va a 44 px: lo justo para reconocer un diseno sin volver a
* convertir el catalogo en un muro de imagenes.
*
* A las 1.927 de musica les toca hoy el hueco gris de .wcb-p-sinfoto,
* que a este tamano es una marca discreta y no una celda rayada a
* pantalla completa. Es provisional: esas portadas existieron y se
* borraron el 28-abr-2026 (§34).
* ------------------------------------------------------------------ */
.wcb-f-foto{
flex:0 0 auto;width:44px;height:44px;align-self:center;
display:block;overflow:hidden;background:rgba(var(--fg-rgb),.05);
}
/* `contain`, no `cover`: casi la mitad del catalogo no es cuadrado y con
`cover` a esta miniatura se le corta la cabeza al disco. A 44 px una
imagen encajada sigue identificando la pieza; una recortada, no. */
.wcb-f-foto img,
.wcb-f-foto picture,
.wcb-f-foto .wcb-p-sinfoto{
display:block;width:44px;height:44px;object-fit:contain;
}
.wcb-minis .wcb-f{align-items:center;padding-top:.42rem;padding-bottom:.42rem}
/* Con foto, el nombre puede permitirse algo mas de cuerpo. */
.wcb-minis .wcb-f-nombre{font-size:.95rem}
@media (max-width:560px){
.wcb-f-foto,
.wcb-f-foto img,
.wcb-f-foto picture,
.wcb-f-foto .wcb-p-sinfoto{width:38px;height:38px}
.wcb-minis .wcb-f{flex-wrap:nowrap;align-items:center}
.wcb-minis .wcb-f-nombre{flex:1 1 auto;order:0;font-size:.82rem}
.wcb-minis .wcb-f-num{display:none}
}
/* La puerta de saldos lleva el rosa, que es lo que significa aqui. */
.wcb-puerta-rebajas:hover .wcb-puerta-n{background:var(--rs);color:var(--tinta-fija)}
/* ==================================================================
EL HERO — LAS DIAPOSITIVAS SON EL FONDO
Una sola pieza: la foto del cliente ocupa el hero entero y encima va
EL TITULAR DEL TEMA, con su tipografia. Los rotulos que traia cada
diapositiva se han quitado en el PHP: dos titulares peleandose en el
mismo sitio no es una fusion, es un choque.
El velo no es un efecto: es lo que garantiza que el texto se lea sobre
CUALQUIER foto. Cae hacia la izquierda, que es donde vive el titular,
y afloja a la derecha para que la ropa se siga viendo.
================================================================== */
.wcb-hero{
position:relative;isolation:isolate;
display:flex;align-items:center;
min-height:clamp(380px,44vw,620px);
padding-top:clamp(30px,5vw,64px);padding-bottom:clamp(34px,5vw,72px);
background:var(--t);
}
.wcb-hero-fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.wcb-hero-fondo .wcd-slider{height:100%;border-bottom:0;background:var(--t)}
/* La pista deja de tener proporcion fija: aqui la altura la manda el hero. */
.wcb-hero-fondo .wcd-slider-pista{height:100%;aspect-ratio:auto}
.wcb-hero-fondo .wcd-slide{height:100%}
/* El es EN LÍNEA por defecto: sin esto, al envolver la foto en
uno la diapositiva perdía su altura y el hero se encogía. */
.wcb-hero-fondo .wcd-slide picture{display:block;width:100%;height:100%}
.wcb-hero-fondo .wcd-slide img{
width:100%;height:100%;object-fit:cover;
/* EN COLOR, como las puertas de aquí abajo. Estuvo en gris y el hero
entero se veía apagado. Lo que sostiene el titular no es el gris: es
el velo, y el velo sigue ahí. */
transition:transform var(--paso-lento);
}
/* Al posarse, la diapositiva se acerca. Y como el pase automático ya se
detiene con el ratón encima, el gesto queda entero: se para y crece. */
.wcb-hero:hover .wcd-slide img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
.wcb-hero-fondo .wcd-slide img{transition:none}
.wcb-hero:hover .wcd-slide img{transform:none}
}
/* El velo, DENTRO de la diapositiva: asi los puntos y las flechas —que
viven mas arriba en el mismo contexto— no quedan por debajo de el. */
.wcb-hero-fondo .wcd-slide::after{
content:"";position:absolute;inset:0;
/* MEDIDO, no estimado. Primero lo dejé en .86/.60/.16 y una de las tres
diapositivas bajaba el titular a 2,88:1 — por debajo del 3,0 que pide
AA para texto grande—. El .70 del centro es lo que hace falta para que
la PEOR de las fotos aguante, con margen para las que vengan.
A la derecha se sigue abriendo de par en par (.42 → .18): ahí no hay
texto, solo foto que antes no se veía. */
background:linear-gradient(96deg,
rgba(11,11,11,.88) 0%, rgba(11,11,11,.70) 46%, rgba(11,11,11,.18) 100%);
}
.wcb-hero-txt{
position:relative;z-index:2;
padding:0 var(--gut);
/* No intercepta el raton: el hero entero sigue siendo el enlace de la
diapositiva, como en el tema anterior. */
pointer-events:none;
}
/* Sobre foto, el titular va en hueso. El gris de siempre se hundiria. */
.wcb-hero-txt h1{color:var(--h);font-size:clamp(2.4rem,7vw,6rem);max-width:16ch}
.wcb-hero-txt h1 em{color:rgba(237,234,227,.74)}
/* La cifra iba a .72 y sobre foto se hundia. Es un dato, no un adorno. */
.wcb-hero .wcb-portal-cifra{color:rgba(237,234,227,.88)}
.wcb-hero .wcb-portal-cifra b{color:var(--h)}
/* Puntos y flechas juntos, abajo a la DERECHA: a la izquierda chocaban
con el titular. */
.wcb-hero-nav{
position:absolute;right:var(--gut);bottom:clamp(16px,2.2vw,26px);z-index:3;
display:flex;align-items:center;gap:.6rem;
}
.wcb-hero-nav .wcd-slider-nav{
position:static;transform:none;width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
}
.wcb-hero-nav .wcd-slider-puntos{position:static;display:flex;gap:6px}
@media (max-width:900px){
.wcb-hero{min-height:clamp(320px,64vw,460px)}
.wcb-hero-txt h1{max-width:none}
/* En vertical la foto se ve poco y el texto lo es todo: el velo aprieta. */
.wcb-hero-fondo .wcd-slide::after{
background:linear-gradient(180deg,
rgba(var(--fg-rgb),.78) 0%, rgba(var(--fg-rgb),.88) 60%, rgba(var(--fg-rgb),.94) 100%);
}
}
/* ══════════════════════════════════════════════════════════════════════
PESTAÑAS, CARRUSEL, BANNERS Y RECLAMOS (rescate de PrestaShop)
El problema que resuelven no era de estilo, era de RITMO: tres rejillas
iguales apiladas. Cada uno de estos bloques tiene una forma distinta a
propósito, para que la página tenga cadencia en vez de repetición.
══════════════════════════════════════════════════════════════════════ */
/* ---- bandas de banner ---- */
.wcb-banda{
display:grid;gap:clamp(10px,1.2vw,18px);
padding:clamp(18px,2.2vw,30px) var(--gut);
background:var(--h);
}
/* EL ANCHO DE LA BANDA LO MANDA EL TAMAÑO REAL DE LOS FICHEROS.
Son de 2020 y pequeños: 370x240 los de cabecera, 420x165 los dos, y
696x132 el ancho. Estirados a los 1.360 px de la rejilla se verían
blandos, así que la banda se estrecha y se centra hasta que cada imagen
sale a su tamaño o casi.
Antes esto se intentó con `max-height`, y JUNTO A `aspect-ratio` eso no
limita el alto: encoge el ANCHO. Cada banner salía más estrecho que su
hueco y pegado a la izquierda —el de camisas, 791 px de 1.360— con un
vacío a la derecha. Eso era lo que se veía raro, y no tenía nada que ver
con los banners: era la regla. */
.wcb-banda-3{grid-template-columns:repeat(3,1fr);max-width:1180px;margin-inline:auto}
.wcb-banda-2{grid-template-columns:repeat(2,1fr);max-width:1010px;margin-inline:auto}
.wcb-banda-ancha{grid-template-columns:1fr;max-width:860px;margin-inline:auto}
.wcb-banner{
position:relative;display:block;overflow:hidden;
background:var(--t);text-decoration:none;
}
.wcb-banner img{
display:block;width:100%;height:100%;object-fit:cover;
transition:transform var(--paso-lento);
}
.wcb-banner:hover img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
.wcb-banner img{transition:none}
.wcb-banner:hover img{transform:none}
}
/* ALTURA CON TECHO, y el techo no es estético: es el tamaño real de los
ficheros. Son de 2020 y son pequeños —370x240 los de cabecera, 696x132
el ancho—. Sin tope, a 1440 px se estiraban a 285 px de alto y además de
verse blandos empujaban media pantalla hacia abajo. */
/* Solo la proporción. Nada de `max-height` aquí: ver arriba. */
.wcb-banner-3{aspect-ratio:370/240}
.wcb-banner-2{aspect-ratio:420/165}
.wcb-banner-ancho{aspect-ratio:696/132}
/* EL RÓTULO. Obligatorio, y con la misma gramática que el resto de la
portada: nombre en versal y, si va a una sección, su cifra — igual que
«LIBROS · 331» en las puertas.
Sin esto eran imágenes mudas: una franja de camisas encima de «Parches
bordados» que no decía qué era ni por qué estaba ahí. */
.wcb-banner-rot{
position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:.5rem;
font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
background:var(--t);color:var(--h);padding:.42rem .7rem;
}
.wcb-banner-rot i{
font-style:normal;background:var(--h);color:var(--t);
padding:0 .32rem;font-size:.66rem;
}
.wcb-banner:hover .wcb-banner-rot{background:var(--a);color:var(--tinta-fija)}
.wcb-banner:hover .wcb-banner-rot i{background:var(--t);color:var(--a)}
.wcb-banner:focus-visible{outline:2px solid var(--t);outline-offset:2px}
/* ---- pestañas ---- */
.wcb-pestanas{padding:clamp(22px,2.6vw,38px) 0 clamp(8px,1vw,16px);background:var(--h)}
.wcb-pest-nav{
display:flex;gap:0;padding:0 var(--gut);
border-bottom:var(--borde);
}
.wcb-pest-b{
appearance:none;background:none;border:0;cursor:pointer;
font-family:var(--titular);font-weight:800;
font-size:clamp(1.05rem,2vw,1.6rem);letter-spacing:-.02em;
text-transform:uppercase;color:var(--g2);
padding:.35rem 0 .55rem;margin-right:clamp(18px,2.4vw,34px);
border-bottom:3px solid transparent;margin-bottom:-1px;
transition:color var(--paso),border-color var(--paso);
}
.wcb-pest-b:hover{color:var(--t)}
.wcb-pest-b[aria-selected="true"]{color:var(--t);border-bottom-color:var(--a)}
.wcb-pest-b:focus-visible{outline:2px solid var(--t);outline-offset:3px}
.wcb-pest-pie{
margin:.7rem 0 0;padding:0 var(--gut);
font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
text-transform:uppercase;color:var(--g3);
}
/* ---- carrusel ---- */
.wcb-carrusel{position:relative}
.wcb-car-pista{
display:flex;gap:clamp(14px,1.6vw,24px);
padding:clamp(14px,1.8vw,24px) var(--gut);
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;scroll-behavior:smooth;
/* La barra se esconde pero el desplazamiento NO: sigue funcionando con
el dedo, con la rueda horizontal y con el teclado. */
scrollbar-width:none;
}
.wcb-car-pista::-webkit-scrollbar{display:none}
.wcb-car-pista:focus-visible{outline:2px solid var(--t);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.wcb-car-pista{scroll-behavior:auto}}
/* La celda del muro, dentro del carrusel, deja de ser de rejilla y pasa a
tener ancho propio. Es la MISMA pieza: no hay un segundo marcado de
producto que mantener. */
.wcb-car-pista > .wcb-p{
flex:0 0 clamp(158px,17vw,215px);
scroll-snap-align:start;
}
.wcb-car-b{
position:absolute;top:calc(50% - 22px);z-index:2;
width:42px;height:42px;display:grid;place-items:center;
background:var(--h);color:var(--t);border:var(--borde);cursor:pointer;
transition:background var(--paso),color var(--paso),opacity var(--paso);
}
.wcb-car-b:hover{background:var(--t);color:var(--h)}
.wcb-car-b:focus-visible{outline:2px solid var(--t);outline-offset:2px}
.wcb-car-ant{left:calc(var(--gut) - 21px)}
.wcb-car-sig{right:calc(var(--gut) - 21px)}
/* Cuando no hay a dónde ir, el botón se va. Un botón que no hace nada
miente sobre lo que hay. */
.wcb-car-b[hidden]{display:none}
/* Sin JavaScript no hay quien las gobierne, así que no aparecen: el
carrusel se sigue arrastrando igual. */
.wcb-carrusel:not(.wcb-car-viva) .wcb-car-b{display:none}
@media (max-width:760px){.wcb-car-b{display:none}}
/* ---- reclamos ---- */
.wcb-reclamos{
display:grid;grid-template-columns:repeat(4,1fr);
gap:1px;background:var(--t);
border-top:var(--borde);
}
.wcb-reclamo{
display:flex;align-items:center;gap:.7rem;
padding:clamp(18px,2.2vw,28px) clamp(14px,1.6vw,22px);
background:var(--h);color:var(--t);text-decoration:none;
font-family:var(--mono);font-size:.68rem;line-height:1.35;
letter-spacing:.07em;text-transform:uppercase;
}
.wcb-reclamo svg{flex:0 0 auto}
a.wcb-reclamo:hover{background:var(--a);color:var(--tinta-fija)}
a.wcb-reclamo:focus-visible{outline:2px solid var(--t);outline-offset:-4px}
@media (max-width:900px){
.wcb-banda-3{grid-template-columns:1fr 1fr}
.wcb-banda-3 .wcb-banner:first-child{grid-column:1/-1}
.wcb-reclamos{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.wcb-banda-3,.wcb-banda-2{grid-template-columns:1fr}
.wcb-banda-3 .wcb-banner:first-child{grid-column:auto}
.wcb-reclamos{grid-template-columns:1fr}
}