/* ═══════════════════════════════════════════════════════════════════════
   RECREO v2 — tema WooCommerce a medida
   Transplante del prototipo aprobado (design-src/v2/prototipo/css/recreo.css).
   Las clases y los números vienen medidos de allí: no se retocan «a ojo».

   Display: Baloo 2 800 (OFL) · Texto: Hanken Grotesk 500/800 (OFL)
   Paleta medida: tinta #1A1036 · lima #C6F24A · mandarina #FF5A1F
   blanco/tinta 17.93:1 · tinta/lima 13.83:1 · tinta/mandarina 5.75:1
   NUNCA blanco sobre mandarina (3.12:1)

   Orden de bloques (contrato §4.1):
   00-tokens · 01-base · 02-pantalla · 03-gigante · 04-tipografia · 05-piezas
   06-cabecera-pie · 07-tienda · 08-banda · 09-comercio · 11-movil · 10-reduce
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 00-TOKENS ═══════════════════════════════════════════════════════ */

/* Las 3 fuentes se sirven locales desde assets/fonts (el preload lo pone
   inc/10-assets.php). Baloo va en font-display:block porque la palabra
   gigante se dimensiona con su métrica: con el fallback el ancho cambia. */
@font-face{font-family:'Baloo';src:url('../fonts/baloo2-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Hanken';src:url('../fonts/hanken-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken';src:url('../fonts/hanken-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  /* color */
  --tinta:#1A1036; --tinta-90:rgba(26,16,54,.90); --tinta-72:rgba(26,16,54,.72);
  --lima:#C6F24A; --mandarina:#FF5A1F; --gris:#ECECEA; --blanco:#fff;
  /* lima y mandarina un paso más oscuras, para texturas y hover */
  --lima-honda:#A9D92E; --mand-honda:#D8410C;

  /* tipografía */
  --display:'Baloo',system-ui,sans-serif;
  --texto:'Hanken',system-ui,-apple-system,sans-serif;

  /* escala: sale del ancho del CONTENEDOR (cqw), nunca del viewport */
  --marco:clamp(18px,3.2cqw,64px);
  --dato:clamp(12px,1.05cqw,15px);
  --cuerpo:clamp(15px,1.25cqw,18px);
  --entrada:clamp(20px,2.1cqw,30px);
  --rotulo:clamp(38px,5.6cqw,86px);

  /* movimiento (1.17): el tema v1 no tenía ninguno; los lee el reveal,
     el hover de los botones y la cortina. Un solo lugar donde tocarlos. */
  --d-1:.18s;   /* micro-interacción: hover, foco */
  --d-2:.30s;   /* cambio de estado: cabecera fijada, cortina saliendo */
  --d-3:.62s;   /* entrada de contenido: reveal */
  --ease-entrada:cubic-bezier(.2,.7,.3,1);
  --ease-salida:cubic-bezier(.7,0,.3,1);
  --stagger:.07s;
}


/* ═══ 01-BASE ═════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
/* clip, no hidden: hidden en <body> lo convierte en contenedor de scroll y
   mata position:sticky en toda la página. clip sólo recorta. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--tinta);color:var(--blanco);font-family:var(--texto);
  font-weight:500;font-size:var(--cuerpo);line-height:1.45;overflow-x:clip}
img,video{display:block;max-width:100%}
/* img,video{display:block} le gana al [hidden]{display:none} del navegador
   (misma especificidad, y la del tema va después): el <video> del clip,
   que nace con hidden hasta que puedeReproducir() lo habilite, quedaba
   pintado como una caja de 100%x100% encima del póster. */
[hidden]{display:none}
a{color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--lima);outline-offset:3px}
/* los hijos de flex/grid traen min-width:auto y se niegan a encoger */
.capa>*,.impreso>li,.riel>*,.especs>div,.producto,.pie__red>div,
.resultado>*,.precio>*,.selector>*{min-width:0}
/* texto del CMS: títulos de producto y URLs sin límite de caracteres */
.producto__nombre,.tarjeta__nombre,.rotulo,.entrada,.prosa,.prosa *,
.especs dd,.pie li,.miga{overflow-wrap:anywhere}
/* el navegador trae márgenes propios que ningún reseteo del tema cubría */
blockquote,figure,dl,fieldset{margin:0;padding:0;border:0}
button,input,select,textarea{font:inherit;color:inherit}
.solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--lima);
  color:var(--tinta);font-family:var(--display);font-weight:800;padding:12px 18px;
  text-transform:uppercase;text-decoration:none}
.skip-link:focus{left:0}


/* ═══ 02-PANTALLA ═════════════════════════════════════════════════════ */

/* Toda sección es media a sangre o banda de color. container-type la vuelve
   el contenedor del que salen --marco, --rotulo y el tamaño del gigante:
   por eso los tamaños no dependen del viewport sino de la caja real. */
.pantalla{position:relative;container-type:inline-size;min-height:100svh;
  display:grid;isolation:isolate;overflow:clip;scroll-margin-top:0}
.pantalla--auto{min-height:0}
.fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.fondo img,.fondo video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* el sujeto de la foto del hero está en la franja media: se sube para que
   quede en la mitad limpia y el velo caiga sobre el asfalto, no sobre él */
#hero .fondo img{object-position:50% 34%}
.fondo--zoom img{transform:scale(1.12);will-change:transform}
/* La pantalla del clip tiene DOS hijos en el fondo (el póster y el <video>) y
   .fondo los apilaba en vertical: el vídeo caía 1072 px más abajo, fuera del
   overflow del fondo, y el observer nunca lo veía intersecar — medido top=1072
   en una sección de 1072 de alto, con 0 peticiones al mp4. Se superponen. */
#compra .fondo>img,#compra .fondo>video{position:absolute;inset:0}
/* Control de pausa del clip: WCAG 2.2.2 pide poder parar lo que arranca solo
   y dura más de 5 s. Va sobre el velo (z 5 > .capa z 2) y por debajo de la
   cabecera fija (.cab z 40).
   Estaba arriba a la derecha, es decir dentro de la banda de la cabecera
   fija: barriendo el scroll de la sección de 50 en 50 px a 1440, el clip
   reproducía en 21 de 28 posiciones y el control era inalcanzable en 15 de
   esas 21 — a 100 px del borde de la sección `elementFromPoint` devolvía
   `div.recreo-cart-badge`, y de ahí en adelante el botón quedaba sobre el
   borde superior del viewport (y negativo) con el vídeo aún al 84%…25% de
   visibilidad y reproduciendo. Abajo a la derecha entra en pantalla antes de
   que el observer arranque el clip y sigue dentro hasta que lo pausa. */
.uso__pausa{position:absolute;z-index:5;bottom:var(--marco);right:var(--marco);
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--tinta);color:var(--lima);border:0;cursor:pointer;font-size:14px;line-height:1;
  box-shadow:inset 0 0 0 2px var(--lima);
  transition:background-color var(--d-1) ease,color var(--d-1) ease}
.uso__pausa:hover{background:var(--lima);color:var(--tinta)}
/* velo por pieza: la luma de los archivos va de 42 a 219; un velo único
   mentiría. La clase la elige recreo_velo() desde la luma del adjunto. */
.velo{position:absolute;inset:0;z-index:1}
.velo--bajo{background:linear-gradient(180deg,rgba(26,16,54,.36) 0%,rgba(26,16,54,.12) 26%,rgba(26,16,54,.88) 54%,rgba(26,16,54,.94) 100%)}
.velo--medio{background:linear-gradient(180deg,rgba(26,16,54,.52) 0%,rgba(26,16,54,.30) 28%,rgba(26,16,54,.88) 54%,rgba(26,16,54,.95) 100%)}
.velo--alto{background:linear-gradient(180deg,rgba(26,16,54,.70) 0%,rgba(26,16,54,.54) 28%,rgba(26,16,54,.92) 52%,rgba(26,16,54,.97) 100%)}
.velo--claro{background:linear-gradient(180deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.40) 26%,rgba(244,244,242,.92) 54%,rgba(236,236,234,.97) 100%)}
.capa{position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;
  justify-content:flex-end;gap:clamp(14px,1.6cqw,26px);padding:var(--marco);
  padding-top:calc(var(--marco) + 56px);   /* deja pasar la cabecera fija */
  min-height:100svh}
.pantalla--auto .capa{min-height:0;padding-top:clamp(56px,6cqw,110px)}
/* crédito de licencia de la foto: se imprime sólo si el dato existe */
.credito{font-size:clamp(10px,.8cqw,12px);letter-spacing:.06em;opacity:.7}


/* ═══ 03-GIGANTE ══════════════════════════════════════════════════════ */

/* La palabra es tipografía decorativa: su caja (239px de alto con
   line-height .78, más el desplazamiento del parallax) tapaba el botón
   «Ver la ficha» y se comía el clic. Medido con elementFromPoint. */
.gigante,.pie__wordmark{pointer-events:none}
.gigante{min-width:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.78;letter-spacing:-.035em;margin:0;
  /* --k = ancho real de letra en em, MEDIDO por Range para cada palabra
     (va de .489 en «AL COLE» a .599 en «CAMPUS»): con un valor único las
     palabras llenaban entre 37% y 100% del ancho útil. Lo emite
     recreo_gigante() en style="--ch:…;--k:…"; la plantilla nunca escribe
     un font-size. El tope en svh evita que en 2560 se coma la pantalla. */
  font-size:clamp(40px, min((100cqw - 2 * var(--marco)) / (var(--ch)*var(--k,.60)), 46svh), 560px);
  white-space:nowrap}
.gigante--cruza{margin-bottom:calc(-.18em);position:relative}
/* Las tildes (BÚHO, LEÓN, GARANTÍA) sobresalen .23em por ENCIMA de la caja
   de línea (.78): medido con canvas.measureText + baseline real, la Ú de
   BÚHO tapaba 30 px del crédito CC BY a 390 y 70 px a 1440. La plantilla
   marca la palabra con tilde y la caja reserva ese espacio; sin tilde no
   cambia nada. Con .24em quedaban 2 px de aire a 390 (el parallax sube la
   palabra 15 px al cargar); .27em deja 6 px medidos. Es padding y no margin para que el parallax no lo mueva. */
.gigante--acento{padding-top:.27em}
.gigante--lima{color:var(--lima)}
.gigante--blanco{color:var(--blanco)}
.gigante--tinta{color:var(--tinta)}
.gigante--hueco{color:transparent;-webkit-text-stroke:clamp(2px,.34cqw,5px) var(--lima)}


/* ═══ 04-TIPOGRAFIA ═══════════════════════════════════════════════════ */

.rotulo{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:var(--rotulo);line-height:.9;letter-spacing:-.02em}
.entrada{font-size:var(--entrada);line-height:1.25;max-width:22ch;font-weight:500}
.dato{font-family:var(--texto);font-weight:800;text-transform:uppercase;
  font-size:var(--dato);letter-spacing:.14em}
.dato--lima{color:var(--lima)}
.dato--mandarina{color:var(--mandarina)}
.dato--tinta{color:var(--tinta)}
/* El renglón de apoyo (nivel, marca, stock) caía en la mitad limpia de la foto
   —la palabra gigante empuja el bloque hacia arriba— y medía 3,36:1. Sobre
   sello de tinta mide 13,83:1 (lima) y 17,93:1 (blanco), y además se lee como
   lo que es: un dato impreso, no una etiqueta flotando. */
.capa>.dato,.tarjeta__banda .dato,.resultado .dato{background:var(--tinta);
  padding:.34em .62em;display:inline-block;align-self:flex-start;width:auto}
.banda .capa>.dato,.banda--mand .capa>.dato,.banda--color .capa>.dato{background:var(--tinta);color:var(--lima)}
.pantalla--claro .capa>.dato{background:var(--tinta);color:var(--lima)}
.tarjeta__banda .dato{align-self:flex-start}

/* fila de datos duros: impresa, no decorativa */
/* align-items:flex-start, no baseline: a 390 un rótulo que envuelve a dos líneas
   dejaba a sus hermanos 17 px más abajo (medido por qa-recorrido). */
.impreso{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4cqw,28px);align-items:flex-start;
  border-top:2px solid currentColor;padding-top:clamp(10px,1.2cqw,18px);opacity:.96}
.impreso>li{display:flex;flex-direction:column;gap:2px}
.impreso b{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2cqw,34px);line-height:1}

.miga{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;opacity:.85}
.miga a{text-decoration:none;border-bottom:2px solid var(--lima)}
.pantalla--claro .miga a,.banda .miga a{border-bottom-color:var(--tinta)}

/* Nota de material faltante: honestidad visible, no un placeholder */
.pendiente{font-size:clamp(11px,.95cqw,13px);line-height:1.4;letter-spacing:.02em;
  max-width:42ch;padding:9px 12px;box-shadow:inset 0 0 0 2px currentColor;opacity:.9}

/* prosa del CMS (descripción larga, páginas de contenido) */
.prosa{max-width:68ch;display:flex;flex-direction:column;gap:1em}
.prosa h2,.prosa h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.95;letter-spacing:-.01em;font-size:clamp(24px,2.6cqw,40px)}
.prosa a{border-bottom:2px solid var(--lima);text-decoration:none}
.prosa ul{display:flex;flex-direction:column;gap:.4em}
.prosa ul li{padding-left:1.1em;position:relative}
.prosa ul li::before{content:"";position:absolute;left:0;top:.55em;width:.5em;height:.5em;
  background:var(--lima)}
.prosa img{height:auto}


/* ═══ 05-PIEZAS ═══════════════════════════════════════════════════════ */

/* — Botones: sólidos, radio 0, sin sombra — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.35cqw,20px);letter-spacing:.01em;text-decoration:none;
  padding:.62em 1.15em;border:0;border-radius:0;line-height:1.1;
  background:var(--lima);color:var(--tinta);cursor:pointer;
  transition:transform var(--d-1) var(--ease-entrada),background-color var(--d-1) ease}
.btn:hover{transform:translateY(-3px);background:#D7F56E}
.btn--mandarina{background:var(--mandarina);color:var(--tinta)}
.btn--mandarina:hover{background:#FF7A3D}
.btn--tinta{background:var(--tinta);color:var(--lima)}
.btn--tinta:hover{background:#2B1A57}
.btn--linea{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn--linea:hover{background:var(--lima);color:var(--tinta);box-shadow:none}
.btn--chico{font-size:clamp(13px,1.05cqw,15px);padding:.55em .9em}
.btn--ancho{width:100%}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.btn.loading{opacity:.7;pointer-events:none}

/* — Precio — */
.precio{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap}
.precio__hoy{font-family:var(--display);font-weight:800;
  font-size:clamp(34px,5cqw,76px);line-height:.95;color:var(--lima)}
.precio__hoy--tinta{color:var(--tinta)}
.precio__antes{font-size:var(--cuerpo);text-decoration:line-through;opacity:.72}
.precio__cuota{font-size:var(--cuerpo);font-weight:800;color:var(--mandarina);
  background:var(--tinta);padding:.18em .5em;display:inline-block}
.precio__cuota--tinta{color:var(--mandarina);background:var(--tinta)}
.precio--chico .precio__hoy{font-size:clamp(22px,2.4cqw,34px)}

/* — Riel de tarjetas — */
.riel{display:flex;gap:clamp(10px,1.2cqw,20px);overflow-x:auto;overflow-y:hidden;
  min-width:0;width:100%;scroll-snap-type:x mandatory;padding-bottom:10px;
  scrollbar-width:thin;scrollbar-color:var(--lima) transparent}
.riel::-webkit-scrollbar{height:6px}
.riel::-webkit-scrollbar-thumb{background:var(--lima)}
.tarjeta{flex:0 0 clamp(224px,26cqw,380px);scroll-snap-align:start;position:relative;
  aspect-ratio:3/4;overflow:hidden;text-decoration:none;color:var(--blanco);
  background:var(--tinta);display:block;min-width:0}
.tarjeta img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-entrada)}
.tarjeta:hover img{transform:scale(1.06)}
/* El primer tramo del velo de la tarjeta arrancaba en alpha 0: con una foto
   clara detrás, el nombre en blanco (27 px, umbral 3:1) medía 3,14:1 por
   píxel — pasa, pero por 0,14, y las fotos las carga el cliente. El arranque
   en .22 sube el peor caso a 3,9:1 y no cambia el aire de la tarjeta. */
.tarjeta__banda{position:absolute;inset:auto 0 0;padding:clamp(12px,1.3cqw,20px);
  background:linear-gradient(180deg,rgba(26,16,54,.22) 0%,rgba(26,16,54,.62) 26%,rgba(26,16,54,.95) 58%);
  display:flex;flex-direction:column;gap:4px}
.tarjeta__nombre{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(19px,1.9cqw,28px);line-height:.95}
.tarjeta--banda{background:var(--lima);color:var(--tinta);display:flex;
  flex-direction:column;justify-content:space-between;padding:clamp(14px,1.5cqw,24px)}
.tarjeta--banda .tarjeta__nombre{font-size:clamp(26px,3cqw,46px)}
.tarjeta--mand{background:var(--mandarina)}

/* — Selector nivel × tipo (el filtro combinado real de la tienda) — */
.selector{display:flex;flex-wrap:wrap;gap:10px}
.ficha{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.5cqw,22px);padding:.45em .95em;cursor:pointer;border:0;
  border-radius:0;background:rgba(255,255,255,.14);color:var(--blanco);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
  transition:background-color var(--d-1) ease,color var(--d-1) ease,box-shadow var(--d-1) ease}
.ficha:hover{background:rgba(198,242,74,.24)}
.ficha[aria-pressed="true"]{background:var(--lima);color:var(--tinta);box-shadow:none}
.resultado{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 22px}
.resultado b{font-family:var(--display);font-weight:800;font-size:clamp(30px,4cqw,62px);
  line-height:1;color:var(--lima)}

/* — Especificaciones — */
.especs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(12px,1.6cqw,28px);border-top:2px solid currentColor;padding-top:16px}
.especs dt{font-size:var(--dato);text-transform:uppercase;letter-spacing:.14em;
  opacity:.8;font-weight:800}
.especs dd{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(18px,1.9cqw,28px);line-height:1.1}

/* — Forma geométrica que sangra (fragmento del glifo de marca) — */
.forma{position:absolute;z-index:1;pointer-events:none;opacity:1}
.forma svg{stroke:currentColor;display:block;width:100%;height:auto}
.banda .forma{color:var(--lima-honda)}   /* lima oscurecida sobre lima: 1,45:1, textura */
.banda--mand .forma{color:var(--mand-honda)}

/* — Movimiento de entrada —
   El estado oculto vive detrás de html.rev-on, que el JS agrega SÓLO si hay
   IntersectionObserver y no hay reduce. Sin JS, o si el observer nunca
   dispara, el contenido se ve: la animación es mejora progresiva. */
.rev{transition:opacity var(--d-3) var(--ease-entrada),transform var(--d-3) var(--ease-entrada)}
.rev-on .rev{opacity:0;transform:translate3d(0,26px,0)}
.rev-on .rev--visible{opacity:1;transform:none}
.rev:nth-child(2){transition-delay:var(--stagger)}
.rev:nth-child(3){transition-delay:calc(var(--stagger)*2)}
.rev:nth-child(4){transition-delay:calc(var(--stagger)*3)}

/* — Cortina de transición al clic (la «transición oscura» aprobada) — */
.cortina{position:fixed;inset:0;z-index:90;background:var(--tinta);
  transform:scaleY(0);transform-origin:100% 100%;pointer-events:none}
.cortina--entra{animation:cortinaEntra .46s var(--ease-salida) forwards}
.cortina--sale{transform:scaleY(1);transform-origin:100% 0;
  animation:cortinaSale .52s var(--ease-salida) forwards}
@keyframes cortinaEntra{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cortinaSale{from{transform:scaleY(1)}to{transform:scaleY(0)}}


/* ═══ 06-CABECERA-PIE ═════════════════════════════════════════════════ */

.cab{position:fixed;inset:0 0 auto;z-index:40;
  background:linear-gradient(180deg,rgba(26,16,54,.82) 0%,rgba(26,16,54,.42) 62%,rgba(26,16,54,0) 100%);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,3vw,44px);   /* vw a propósito: la cabecera abarca el VIEWPORT */
  transition:background-color var(--d-2) ease,backdrop-filter var(--d-2) ease}
.cab--fijada{background:var(--tinta-90);backdrop-filter:blur(6px)}
.marca{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(22px,2vw,30px);line-height:1;letter-spacing:-.02em;
  color:var(--lima);text-decoration:none;white-space:nowrap}
.cab nav{min-width:0}
.cab__menu{display:flex;gap:clamp(10px,1.5vw,26px);flex-wrap:wrap;min-width:0;
  margin:0;padding:0;list-style:none}
.cab__menu li{min-width:0}
.cab nav a{display:block;font-weight:800;font-size:13px;text-transform:uppercase;
  letter-spacing:.1em;text-decoration:none;color:var(--blanco);opacity:.88;padding:4px 0;
  border-bottom:2px solid transparent;
  transition:border-color var(--d-1) ease,opacity var(--d-1) ease}
.cab nav a:hover{opacity:1;border-color:var(--lima)}
.cab__acciones{display:flex;align-items:center;gap:10px}
/* el botón de la cabecera flotaba sobre foto: 4,31:1 a 390 */
/* Fondo opaco para que el botón se lea sobre el clip; el hover tiene que
   volver a declararse a esta especificidad o el texto queda tinta sobre tinta
   (pasó: .btn--linea:hover perdía contra .cab .btn--linea). */
.cab .btn--linea{background:var(--tinta)}
.cab .btn--linea:hover,.cab .btn--linea:focus-visible{background:var(--lima);color:var(--tinta)}

/* carrito de la cabecera */
.cab__carrito{position:relative;display:inline-flex;align-items:center;gap:.45em;
  background:var(--tinta);color:var(--blanco);border:0;cursor:pointer;padding:.5em .7em;
  font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:14px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
  transition:background-color var(--d-1) ease,color var(--d-1) ease}
.cab__carrito:hover{background:var(--lima);color:var(--tinta);box-shadow:none}
.cab__carrito svg{flex:none}
.recreo-cart-badge{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;
  padding:0 .3em;background:var(--mandarina);color:var(--tinta);font-size:12px;line-height:1}
/* Con 0 ítems: blanco sobre tinta sólido (antes blanco al 20 %: el 0 daba
   ~1,3:1). En hover el botón pasa a lima, así que el badge invierte. */
.recreo-cart-badge[data-count="0"]{background:var(--blanco);color:var(--tinta)}
.cab__carrito:hover .recreo-cart-badge[data-count="0"],.cab__carrito:focus-visible .recreo-cart-badge[data-count="0"]{background:var(--tinta);color:var(--lima)}
.cab__carrito:hover .recreo-cart-badge:not([data-count="0"]){box-shadow:inset 0 0 0 2px var(--tinta)}
.cart-bump{animation:bump .4s var(--ease-entrada)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* menú móvil: cerrado va con visibility:hidden, si no sus links siguen
   siendo focusables con Tab. El delay deja correr la animación al cerrar. */
.cab__hamb{display:none;background:var(--tinta);color:var(--blanco);border:0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);padding:.5em .6em;cursor:pointer}
.cab__hamb:hover{background:var(--lima);color:var(--tinta)}
.nav-scrim{position:fixed;inset:0;z-index:38;background:rgba(10,6,22,.6);
  opacity:0;visibility:hidden;transition:opacity var(--d-2) ease,visibility 0s linear var(--d-2)}
.nav-scrim.is-open{opacity:1;visibility:visible;transition-delay:0s}
@media (max-width:860px){
  .cab__hamb{display:inline-flex}
  .cab nav{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);z-index:39;
    background:var(--tinta);padding:84px 24px 24px;overflow-y:auto;
    transform:translateX(100%);visibility:hidden;
    transition:transform var(--d-2) var(--ease-entrada),visibility 0s linear var(--d-2)}
  .cab nav.is-open{transform:none;visibility:visible;transition-delay:0s}
  .cab__menu{flex-direction:column;flex-wrap:nowrap;gap:0}
  .cab nav a{font-size:16px;padding:14px 0;border-bottom:2px solid rgba(255,255,255,.14)}
  .cab nav a:hover{border-color:var(--lima)}
}

/* — Pestaña fija de acento — */
.pestania{position:fixed;right:0;top:52%;z-index:45;transform-origin:100% 0;
  transform:rotate(-90deg) translate(50%,-100%);background:var(--mandarina);
  color:var(--tinta);font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:14px;letter-spacing:.06em;padding:9px 18px;text-decoration:none;white-space:nowrap;
  transition:padding-bottom .2s ease}
.pestania:hover{padding-bottom:15px}
.pestania[hidden],.pestania[hidden]:hover{display:none !important}
@media (max-width:600px){
  .pestania{top:auto;bottom:0;right:0;left:0;transform:none;text-align:center;
    font-size:13px;padding:11px}
  /* el listón mide 40px: la capa le deja el sitio para que no rebane la palabra */
  .capa{padding-bottom:calc(var(--marco) + 44px)}
  .gigante--cruza{margin-bottom:-.08em}
}

/* — WhatsApp flotante — */
.wa{position:fixed;left:14px;bottom:64px;z-index:44;display:grid;place-items:center;
  width:52px;height:52px;background:var(--lima);color:var(--tinta);text-decoration:none;
  transition:transform var(--d-1) var(--ease-entrada)}
.wa:hover{transform:translateY(-3px)}
/* `[hidden]` del navegador es `display:none` con especificidad de atributo,
   y una hoja de autor le gana a la del UA sea cual sea el orden: `.wa` se
   quedaba en `display:grid` con el atributo puesto y seguía capturando el
   clic sobre la palabra gigante (medido con elementFromPoint: devolvía el
   <svg> del flotante). El apagado tiene que declararlo el autor. */
.wa[hidden]{display:none}
@media (min-width:601px){.wa{bottom:22px}}
/* Re-QA v2, M-1: a <600px el flotante (bottom:64px) queda cerca de
   «Aplicar cupón» en /carrito/. En esas 3 pantallas (carrito, checkout,
   contacto) se sube por encima de esa zona en vez de recortarle el toque.
   Medido con Playwright (elementFromPoint, 390×844): el botón
   «Aplicar cupón» ya caía arriba del flotante (y≈507 vs .wa top≈780) y
   NO estaba tapado incluso antes de este cambio — se sube igual como
   margen de seguridad para variantes con más ítems en el carrito, donde
   la fila sí queda más abajo. La esquina del textarea de /contacto/
   (bottom del campo ≈839px) la tapaba en realidad `.pestania` —el listón
   fijo de abajo, no `.wa`—: se le da margen aparte al formulario. */
@media (max-width:600px){
  body.woocommerce-cart .wa,
  body.woocommerce-checkout .wa{bottom:132px}
  body.page-contacto .contact-form{margin-bottom:56px}
}

/* — Pie claro con wordmark gigante — */
.pie{background:var(--gris);color:var(--tinta);container-type:inline-size;
  padding:0 var(--marco) clamp(0px,1cqw,18px);overflow:clip}
.pie__red{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:clamp(18px,2.6cqw,54px);margin-bottom:clamp(22px,2.6cqw,48px)}
.pie h4{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,2.4cqw,38px);line-height:1;margin:0 0 12px;
  border-bottom:2px solid var(--tinta);padding-bottom:7px}
.pie__banda{background:var(--lima);color:var(--tinta);
  margin:0 calc(-1*var(--marco)) clamp(22px,2.6cqw,46px);
  padding:clamp(20px,2.4cqw,42px) var(--marco)}
.pie__grito{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,4.4cqw,68px);line-height:.95;letter-spacing:-.02em;
  max-width:18ch;margin:0}
.pie__grito a{border-bottom:4px solid var(--mandarina);text-decoration:none}
.pie a{text-decoration:none;border-bottom:1px solid rgba(26,16,54,.25)}
.pie a:hover{border-color:var(--mandarina);color:#8A2703}
.pie li{margin-bottom:6px;font-size:clamp(13px,1.05cqw,15px)}
.pie__legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:clamp(11px,.95cqw,13px);border-top:2px solid var(--tinta);padding-top:12px}
/* el font-size sale del mismo helper que el resto de los gigantes: el
   (6*.551) cableado que vivía acá se borró (ch y k los emite el PHP).
   Acá NO se resta el marco: el contenedor de consulta es el propio .pie,
   que ya lleva el padding, y 100cqw es su caja de CONTENIDO (284 px a 320).
   Restarlo otra vez dejaba la palabra en 87,3 % del ancho útil (medido). */
.pie__wordmark{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(56px,min(100cqw/(var(--ch)*var(--k,.60)),44svh),560px);
  line-height:.74;letter-spacing:-.045em;color:var(--tinta);
  margin:clamp(14px,2cqw,34px) 0 -.2em;white-space:nowrap}


/* ═══ 07-TIENDA ═══════════════════════════════════════════════════════ */

/* — Grilla de productos (ul.products de Woo) — */
.products{display:grid;gap:clamp(12px,1.6cqw,26px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,236px),1fr));
  margin:0;padding:0;list-style:none}
.producto{display:flex;flex-direction:column;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);
  transition:box-shadow var(--d-1) ease,background-color var(--d-1) ease}
.producto:hover{box-shadow:inset 0 0 0 2px var(--lima);background:rgba(198,242,74,.07)}
/* la media recorta; el cuerpo NO: un overflow:hidden en la tarjeta entera
   clippea el botón cuando la altura del grid la estira */
.producto__media{position:relative;display:block;aspect-ratio:3/4;overflow:clip;
  background:var(--tinta);text-decoration:none}
.producto__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-entrada)}
.producto:hover .producto__media img{transform:scale(1.05)}
.producto__off,.onsale{position:absolute;left:0;top:0;z-index:2;background:var(--mandarina);
  color:var(--tinta);font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(12px,1.1cqw,15px);padding:.3em .6em;letter-spacing:.03em}
.producto__cuerpo{display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding:clamp(12px,1.3cqw,18px);flex:1 1 auto}
.producto__nombre{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(17px,1.6cqw,23px);line-height:.98;letter-spacing:-.01em}
.producto__nombre a{text-decoration:none}
.producto__cuerpo .btn{margin-top:auto}
.producto__sin{font-size:var(--dato);text-transform:uppercase;letter-spacing:.14em;
  font-weight:800;opacity:.7}
/* la banda de color reemplaza la foto que falta, dentro de la tarjeta */
.producto__media--banda{display:grid;place-items:center;background:var(--banda,var(--lima))}
.producto__media--banda svg{width:62%;height:auto;stroke:var(--banda-honda,#A9D92E);
  fill:none;stroke-width:9}

/* — Chips de filtro (links GET: filtran sin JS) — */
.filtros{display:flex;flex-direction:column;gap:clamp(10px,1.2cqw,18px)}
.filtros__grupo{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filtros__rotulo{font-size:var(--dato);text-transform:uppercase;letter-spacing:.14em;
  font-weight:800;opacity:.75;flex:0 0 auto}
.chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.chip{display:inline-flex;align-items:center;gap:.4em;text-decoration:none;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(13px,1.15cqw,16px);padding:.4em .8em;
  background:rgba(255,255,255,.12);color:var(--blanco);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
  transition:background-color var(--d-1) ease,color var(--d-1) ease,box-shadow var(--d-1) ease}
.chip:hover{background:rgba(198,242,74,.24)}
.chip.is-active{background:var(--lima);color:var(--tinta);box-shadow:none}
.chip__n{font-size:.8em;opacity:.8}
.filtros__limpiar{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:13px;letter-spacing:.06em;color:var(--lima);text-decoration:none;
  border-bottom:2px solid currentColor;align-self:flex-start}

/* — Barra de herramientas y paginación — */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 20px;border-top:2px solid rgba(255,255,255,.3);padding-top:12px}
.toolbar__n{font-size:var(--dato);text-transform:uppercase;letter-spacing:.14em;font-weight:800}
.woocommerce-ordering{margin:0}
.woocommerce-ordering select,.recreo-select{background:var(--tinta);color:var(--blanco);
  border:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);padding:.5em 2em .5em .7em;
  font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:14px;
  border-radius:0;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--lima) 50%),linear-gradient(135deg,var(--lima) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 9px) 52%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.woocommerce-pagination ul,.pagination ul{display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;margin:clamp(20px,2.4cqw,40px) 0 0;padding:0;list-style:none}
.woocommerce-pagination a,.woocommerce-pagination span,
.page-numbers{display:inline-grid;place-items:center;min-width:2.4em;height:2.4em;
  padding:0 .5em;text-decoration:none;font-family:var(--display);font-weight:800;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);
  transition:background-color var(--d-1) ease,color var(--d-1) ease}
.woocommerce-pagination a:hover,.page-numbers:hover{background:rgba(198,242,74,.26)}
.woocommerce-pagination .current,.page-numbers.current{background:var(--lima);
  color:var(--tinta);box-shadow:none}

/* — Estado vacío diseñado — */
.vacio{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:clamp(24px,3cqw,52px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.26)}
.vacio h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,3cqw,44px);line-height:.95}

/* — Formularios propios (contacto) y páginas de contenido — */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label{font-size:var(--dato);text-transform:uppercase;letter-spacing:.14em;font-weight:800}
.campo input,.campo textarea,.campo select{background:rgba(255,255,255,.08);color:var(--blanco);
  border:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);padding:.7em .8em;border-radius:0;
  transition:box-shadow var(--d-1) ease}
.campo input:focus,.campo textarea:focus{box-shadow:inset 0 0 0 2px var(--lima);outline:none}
.rejilla{display:grid;gap:clamp(14px,1.8cqw,30px)}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.tarjeta-info{display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding:clamp(16px,1.8cqw,26px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.tarjeta-info h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(19px,2cqw,28px);line-height:1}
.aviso-ok{background:var(--lima);color:var(--tinta);padding:12px 14px;font-weight:800;margin:0}
.aviso-error{background:var(--mandarina);color:var(--tinta);padding:12px 14px;font-weight:800;margin:0}
/* honeypot del formulario de contacto (contrato inc/55-leads.php): fuera
   de pantalla, no display:none, para que un bot lo vea y una persona no. */
.campo--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.campo--error input,.campo--error textarea{box-shadow:inset 0 0 0 2px var(--mandarina)}
.campo--error label{color:var(--mandarina)}
.campo--check{flex-direction:row;align-items:flex-start;gap:10px}
.campo--check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--lima)}
.campo--check label{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;opacity:.9}
.campo__opcional{opacity:.6;letter-spacing:0;text-transform:none;font-weight:600}
.campo select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23C6F24A' stroke-width='2.5'%3E%3Cpath d='m1 1 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.campo select option{color:var(--tinta)}
.campo select:focus{box-shadow:inset 0 0 0 2px var(--lima);outline:none}
.contact-form{position:relative;display:grid;gap:clamp(14px,1.8cqw,26px);min-width:0}
.contact-form .rejilla--2{gap:clamp(14px,1.8cqw,26px)}
.contact-form__pie{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.contact-form[aria-busy="true"] .btn{opacity:.6;pointer-events:none}
.contacto__titulo{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,2.6cqw,38px);line-height:1;margin:0 0 clamp(16px,2cqw,28px)}
.rejilla--contacto{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
@media (max-width:820px){.rejilla--contacto{grid-template-columns:minmax(0,1fr)}}
.contacto__datos{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.contacto__datos li{display:grid;gap:4px;overflow-wrap:anywhere}
.contacto__datos .dato{color:var(--lima)}
.contacto__datos a{color:var(--blanco);text-decoration:none;border-bottom:2px solid var(--lima)}
.contacto__datos a:hover{color:var(--lima)}

/* — Ficha de producto: el formulario real de Woo con la piel nueva — */
.capa form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.capa form.cart .quantity{display:inline-flex}
.capa form.cart .quantity input{width:5.5em;background:var(--tinta);color:var(--blanco);
  border:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);padding:.62em .6em;
  font-family:var(--display);font-weight:800;font-size:clamp(15px,1.35cqw,20px);
  text-align:center;border-radius:0}
.capa form.cart button[type="submit"],.capa form.cart .single_add_to_cart_button{
  display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);
  font-weight:800;text-transform:uppercase;font-size:clamp(15px,1.35cqw,20px);
  letter-spacing:.01em;padding:.62em 1.15em;border:0;border-radius:0;
  background:var(--lima);color:var(--tinta);cursor:pointer;box-shadow:none;
  transition:transform var(--d-1) var(--ease-entrada),background-color var(--d-1) ease}
.capa form.cart button[type="submit"]:hover{transform:translateY(-3px);background:#D7F56E}
.capa form.cart .variations{width:100%;border-collapse:collapse}
.capa form.cart .variations th,.capa form.cart .variations td{text-align:left;padding:4px 8px 4px 0}
.capa form.cart select{background:var(--tinta);color:var(--blanco);border:0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);padding:.5em .7em;border-radius:0}
.pantalla--claro form.cart .quantity input,.pantalla--claro form.cart select{
  background:var(--tinta);color:var(--blanco)}
.cerca{display:grid;gap:clamp(10px,1.2cqw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.cerca figure{margin:0;overflow:clip;background:var(--tinta);aspect-ratio:4/3}
.cerca img{width:100%;height:100%;object-fit:cover}


/* — Páginas de contenido (Envíos, Contacto) y respaldo de los shortcodes —
   Conservan su copy y su markup; acá reciben la piel v2. .recreo-grid es el
   envoltorio que emiten los 3 shortcodes de inc/50-shortcodes.php. */
.page-hero,.page-body{container-type:inline-size;background:var(--tinta);color:var(--blanco)}
.page-hero{padding:calc(var(--marco) + 56px) 0 clamp(16px,2cqw,30px)}
.page-body{padding:0 0 clamp(48px,5cqw,96px)}
.container{padding:0 var(--marco);min-width:0}
.page-hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:var(--rotulo);line-height:.9;letter-spacing:-.02em}
.page-hero p{font-size:var(--entrada);line-height:1.25;max-width:44ch;margin-top:10px}
.recreo-grid{display:grid;gap:clamp(12px,1.6cqw,26px);list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,236px),1fr))}
.recreo-brands-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}


/* ═══ 08-BANDA (SIN-FOTO) ═════════════════════════════════════════════ */

/* Cuando recreo_foto() devuelve [] la pantalla no queda hueca ni con una
   imagen rota: es una banda de color con motivo. El color lo decide
   recreo_banda() y llega en --banda; la textura se calcula desde el mismo
   color (78% color + tinta) para que sirva con cualquier paleta futura. */
.banda{background:var(--lima);color:var(--tinta)}
.banda--mand{background:var(--mandarina);color:var(--tinta)}
.banda--gris{background:var(--gris);color:var(--tinta)}
.banda--tinta{background:var(--tinta);color:var(--blanco)}
/* --banda-ink / --banda-acento los emite la plantilla junto con --banda
   según la luminancia del color: tinta+lima sobre lima/mandarina/gris,
   blanco+tinta sobre una banda oscura. El CSS no elige colores por banda. */
.banda--color{background:var(--banda,var(--lima));color:var(--banda-ink,var(--tinta))}
.banda--color .forma{color:color-mix(in srgb,var(--banda,#C6F24A) 78%,var(--tinta))}
/* el par se cierra siempre con texto tinta: blanco sobre mandarina da 3,12:1 */
.banda--color .precio__hoy,.banda--color .rotulo,.banda--color .entrada{color:var(--banda-ink,var(--tinta))}
.banda--color .capa>.dato,.banda--color .stock,.banda--color .capa .dato--lima{
  background:var(--banda-ink,var(--tinta));color:var(--banda-acento,var(--lima))}
.banda--color .precio__cuota{color:var(--mandarina);background:var(--tinta)}
/* El precio tachado va con opacity .72, que sobre fondo OSCURO baja el blanco
   y sigue en 9:1. Sobre fondo CLARO hace lo contrario: aclara la tinta y la
   acerca al fondo — medido por píxel sobre la banda mandarina daba 3,86:1 a
   390 y 3,70:1 a 1440, por debajo de AA. En superficie clara va opaco (5,75:1
   medido) y lo que lo distingue del precio de hoy es el tachado. */
.pantalla--claro .precio__antes,.banda .precio__antes,
.banda--mand .precio__antes,.banda--color .precio__antes{opacity:1}


/* ═══ 09-COMERCIO (carrito · checkout · mi cuenta · avisos) ═══════════ */

/* Cero plantillas nuevas (1.18): todo lo que se ve acá lo dibuja Woo y se
   estila por clase, para que el flujo de compra siga funcionando igual. */
/* padding-top = cabecera fija (56 px) + aire: sin el sumando, «CARRITO» y
   «MI CUENTA» quedaban debajo de la cabecera a 390 (medido en captura). */
.comercio{container-type:inline-size;padding:calc(56px + clamp(28px,3.4cqw,72px)) var(--marco) clamp(40px,5cqw,96px)}
.comercio__cab{display:flex;flex-direction:column;gap:10px;
  margin-bottom:clamp(18px,2.2cqw,38px)}

/* avisos de Woo */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:14px 16px;margin:0 0 18px;font-weight:800;border:0;border-radius:0;
  background:var(--lima);color:var(--tinta)}
.woocommerce-info{background:var(--gris)}
.woocommerce-error{background:var(--mandarina)}
.woocommerce-error li{color:var(--tinta)}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a{color:var(--tinta);
  text-decoration:none;border-bottom:2px solid var(--tinta)}

/* botones genéricos de Woo (carrito, checkout, mi cuenta) */
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button,.woocommerce #place_order,.wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.2cqw,18px);letter-spacing:.01em;text-decoration:none;
  padding:.62em 1.15em;border:0;border-radius:0;background:var(--lima);
  color:var(--tinta);cursor:pointer;line-height:1.1;
  transition:transform var(--d-1) var(--ease-entrada),background-color var(--d-1) ease}
.woocommerce .button:hover,.woocommerce button.button:hover,
.woocommerce a.button:hover,.woocommerce #place_order:hover{
  transform:translateY(-3px);background:#D7F56E;color:var(--tinta)}
.woocommerce .button:disabled,.woocommerce .button.disabled{opacity:.5;transform:none}
.woocommerce .button.alt,.woocommerce #place_order{background:var(--mandarina)}
.woocommerce .button.alt:hover,.woocommerce #place_order:hover{background:#FF7A3D}
/* woocommerce.css pone color:#fff en button.button.alt:hover (y en :focus) con
   (0,3,1): a la misma especificidad, el CTA de la ficha quedaba blanco sobre
   lima (1,22:1). Se fija el color a esa especificidad en todos los estados. */
.woocommerce button.button.alt,.woocommerce button.button.alt:hover,.woocommerce button.button.alt:focus,
.woocommerce a.button.alt,.woocommerce a.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce .capa form.cart .single_add_to_cart_button:hover,.woocommerce .capa form.cart .single_add_to_cart_button:focus{color:var(--tinta)}
/* «Finalizar compra» salía en el violeta #7f54b3 de Woo: es el CTA principal
   del carrito y va en mandarina como el del checkout. */
.woocommerce .wc-proceed-to-checkout a.checkout-button{background:var(--mandarina);color:var(--tinta);
  display:flex;width:100%;margin:0;font-size:clamp(16px,1.4cqw,20px)}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover{background:#FF7A3D;color:var(--tinta)}
.woocommerce button.button:disabled,.woocommerce button.button:disabled:hover{
  background:rgba(255,255,255,.14);color:rgba(255,255,255,.7);opacity:1;transform:none;cursor:default}
/* mi-cuenta: el ojo de «mostrar contraseña» de Woo hereda color negro
   (medido rgb(0,0,0) sobre tinta: invisible) y el «Recuérdame» era el
   checkbox nativo de 13 px sin acento. Mismos tokens que el resto del tema. */
.woocommerce form .show-password-input{color:var(--blanco)}
.woocommerce form .show-password-input:hover,.woocommerce form .show-password-input:focus-visible{color:var(--lima)}
.woocommerce form .woocommerce-form__label-for-checkbox input[type="checkbox"]{
  width:18px;height:18px;accent-color:var(--lima);margin-right:8px;vertical-align:-3px}
/* los avisos son flex: cada .amount pasaba a ser un ítem con gap de 16 px y
   «Te faltan  $48.000  para…» quedaba con huecos. El texto vuelve a fluir. */
.woocommerce-info,.woocommerce-message{display:block}
.woocommerce-message .button,.woocommerce-info .button{margin:10px 0 0;display:inline-flex}

/* tablas: carrito y resumen de pedido */
.woocommerce table.shop_table,.woocommerce table.cart,
.woocommerce-checkout-review-order-table,.woocommerce table.woocommerce-table{
  width:100%;border-collapse:collapse;border:0;margin:0 0 24px;border-radius:0}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  padding:12px 10px;border:0;border-bottom:2px solid rgba(255,255,255,.16);
  text-align:left;vertical-align:middle}
.woocommerce table.shop_table th{font-family:var(--texto);font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;font-size:var(--dato);opacity:.8}
.woocommerce table.shop_table tfoot th,.woocommerce table.shop_table tfoot td{
  border-bottom:0;border-top:2px solid rgba(255,255,255,.3)}
.woocommerce table.shop_table .order-total .amount,
.woocommerce .cart-subtotal .amount{font-family:var(--display);font-weight:800;
  font-size:clamp(20px,2cqw,30px);color:var(--lima)}
.woocommerce table.cart img{width:64px;height:64px;object-fit:cover}
.woocommerce .product-name a{text-decoration:none;font-family:var(--display);
  font-weight:800;text-transform:uppercase}
a.remove,.woocommerce a.remove{display:inline-grid;place-items:center;width:1.7em;height:1.7em;
  background:rgba(255,255,255,.14);color:var(--blanco)!important;text-decoration:none;
  font-size:16px;line-height:1;transition:background-color var(--d-1) ease}
a.remove:hover,.woocommerce a.remove:hover{background:var(--mandarina);color:var(--tinta)!important}
.woocommerce .quantity input.qty{width:5em;background:rgba(255,255,255,.08);
  color:var(--blanco);border:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
  padding:.55em .4em;text-align:center;border-radius:0}
.woocommerce .cart_totals h2,.woocommerce-checkout h3,
.woocommerce-billing-fields h3,#order_review_heading,.woocommerce-column__title,
.woocommerce-order-details__title,.woocommerce-customer-details h2{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(22px,2.4cqw,34px);line-height:1;margin:0 0 14px;letter-spacing:-.01em}
.woocommerce .cart-collaterals,.woocommerce .cart_totals{max-width:520px}
/* Carrito ≤768: Woo apila cada celda con «PRODUCTO:» / «PRECIO:» delante
   (attr data-title) y esconde la miniatura. Acá cada renglón es una ficha
   corta: foto · nombre / precio / cantidad · quitar / subtotal. Va después
   de las reglas base y con más especificidad que la hoja de Woo
   (.woocommerce table.shop_table_responsive tr td::before) — verificado con
   getComputedStyle a 390. */
@media (max-width:768px){
  .woocommerce table.cart.shop_table_responsive thead{display:none}
  .woocommerce table.cart.shop_table_responsive tr.cart_item{display:grid;
    grid-template-columns:72px minmax(0,1fr) auto;gap:6px 12px;align-items:start;
    padding:14px 0;border-bottom:2px solid rgba(255,255,255,.16)}
  .woocommerce table.cart.shop_table_responsive tr.cart_item td{display:block;
    border:0;padding:0;text-align:left;min-width:0}
  .woocommerce table.cart.shop_table_responsive tr.cart_item td::before{display:none}
  .woocommerce table.cart.shop_table_responsive tr td.product-thumbnail{display:block;grid-column:1;grid-row:1/4}
  .woocommerce table.cart.shop_table_responsive tr td.product-thumbnail img{width:72px;height:72px}
  .woocommerce table.cart.shop_table_responsive tr td.product-name{grid-column:2;grid-row:1;overflow-wrap:anywhere}
  .woocommerce table.cart.shop_table_responsive tr td.product-remove{grid-column:3;grid-row:1;text-align:right}
  .woocommerce table.cart.shop_table_responsive tr td.product-price{grid-column:2;grid-row:2;opacity:.8}
  .woocommerce table.cart.shop_table_responsive tr td.product-quantity{grid-column:2;grid-row:3}
  .woocommerce table.cart.shop_table_responsive tr td.product-subtotal{grid-column:3;grid-row:3;
    text-align:right;align-self:end;font-family:var(--display);font-weight:800;font-size:18px;color:var(--lima)}
  .woocommerce table.cart.shop_table_responsive tr td.actions{display:block;padding:16px 0 0;border:0}
}
.woocommerce .coupon{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.woocommerce-cart-form__contents{min-width:0}

/* Checkout: dos columnas cuando entra, una cuando no.
   Woo trae `.woocommerce .col2-set .col-1{float:left;width:48%}` — tres
   clases, le gana a un selector de dos — y con auto-fit la columna terminaba
   midiendo 152 px de 1348: el <select> de provincia quedaba en 123 px para un
   rótulo de 144 y el texto se salía 21 px (medido con ipAudit a 1440). Se
   fijan las pistas y se desarma el flotado con la misma especificidad de Woo. */
.woocommerce-checkout .col2-set{display:grid;gap:clamp(16px,2cqw,34px);
  grid-template-columns:1fr}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{
  min-width:0;width:auto;max-width:none;float:none}
@media (min-width:860px){
  .woocommerce-checkout .col2-set{grid-template-columns:1fr 1fr}
}
.woocommerce form .form-row{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;
  padding:0;width:auto;float:none}
.woocommerce form .form-row label{font-size:var(--dato);text-transform:uppercase;
  letter-spacing:.12em;font-weight:800}
.woocommerce form .form-row .required{color:var(--mandarina);text-decoration:none}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce .select2-selection{
  background:rgba(255,255,255,.08);color:var(--blanco);border:0;border-radius:0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);padding:.7em .8em;width:100%;
  min-height:0;transition:box-shadow var(--d-1) ease}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{box-shadow:inset 0 0 0 2px var(--lima);outline:none}
/* Select2 mete su propio padding (8 izq + 20 der) DENTRO del <span> que ya
   tiene el padding de la caja: a 1024 el rótulo se salía 4 px y a 1440, 30
   (medido con ipAudit en el checkout). El padding va en la caja, no en los
   dos lados. */
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0;color:var(--blanco);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{display:none}
.woocommerce .select2-container--default .select2-selection--single{height:auto}
/* Select2 fija el ancho del contenedor midiendo el <select> al inicializarse
   y le quedaban 123 px para un rótulo de 144: el texto se salía 21 px a 1440
   (medido con ipAudit en el checkout). Que lo mande la columna, no la medida
   que select2 tomó. El !important es necesario: select2 escribe el ancho en
   el atributo style del contenedor. */
.woocommerce .select2-container{width:100%!important;max-width:100%;min-width:0}
.select2-dropdown{background:var(--tinta);color:var(--blanco);border:2px solid var(--lima);
  border-radius:0}
.select2-results__option--highlighted{background:var(--lima)!important;color:var(--tinta)!important}
.woocommerce #payment,.woocommerce-checkout #payment{background:rgba(255,255,255,.05);
  border-radius:0;padding:clamp(14px,1.6cqw,24px)}
.woocommerce #payment ul.payment_methods{border-bottom:2px solid rgba(255,255,255,.2);
  padding:0 0 14px;margin:0 0 14px}
.woocommerce #payment ul.payment_methods li{margin:0 0 8px;list-style:none}
.woocommerce #payment ul.payment_methods label{font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(15px,1.4cqw,20px)}
.woocommerce #payment div.payment_box{background:var(--tinta);color:var(--blanco);
  box-shadow:inset 0 0 0 2px var(--lima);border-radius:0;margin:10px 0 0;padding:12px 14px;
  font-size:var(--cuerpo)}
.woocommerce #payment div.payment_box::before{display:none}
.woocommerce-privacy-policy-text,.woocommerce-terms-and-conditions-wrapper{font-size:.92em;opacity:.85}

/* mi cuenta */
.woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 22px;padding:0;list-style:none}
.woocommerce-MyAccount-navigation a{display:inline-block;text-decoration:none;
  font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:14px;
  padding:.45em .8em;background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
  transition:background-color var(--d-1) ease,color var(--d-1) ease}
.woocommerce-MyAccount-navigation a:hover{background:rgba(198,242,74,.24)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--lima);color:var(--tinta);
  box-shadow:none}
.woocommerce-MyAccount-content{min-width:0}
.woocommerce-form-login,.woocommerce-form-register,.woocommerce-form-coupon{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);padding:clamp(16px,2cqw,28px);
  border-radius:0;margin:0 0 20px}
.woocommerce ul.order_details{display:flex;flex-wrap:wrap;gap:14px 26px;margin:0 0 24px;padding:0}
.woocommerce ul.order_details li{list-style:none;border:0;font-size:var(--dato);
  text-transform:uppercase;letter-spacing:.12em;font-weight:800;opacity:.8;
  display:flex;flex-direction:column;gap:4px}
.woocommerce ul.order_details li strong{font-family:var(--display);font-size:clamp(17px,1.8cqw,24px);
  letter-spacing:0;opacity:1;text-transform:none;color:var(--lima)}
.woocommerce .amount{color:inherit}
.woocommerce del{opacity:.66}
.woocommerce ins{text-decoration:none;font-weight:800}

/* — Slide-cart — */
.recreo-cart-overlay{position:fixed;inset:0;z-index:60;background:rgba(10,6,22,.62);
  opacity:0;transition:opacity var(--d-2) ease}
.recreo-cart-overlay.is-open{opacity:1}
/* cerrado con visibility:hidden: si no, sus links siguen siendo focusables */
.recreo-cart{position:fixed;inset:0 0 0 auto;z-index:61;width:min(420px,92vw);
  display:flex;flex-direction:column;background:var(--tinta);color:var(--blanco);
  box-shadow:-2px 0 0 var(--lima);transform:translateX(100%);visibility:hidden;
  transition:transform var(--d-2) var(--ease-entrada),visibility 0s linear var(--d-2)}
.recreo-cart[aria-hidden="false"]{transform:none;visibility:visible;transition-delay:0s}
.recreo-cart__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:2px solid rgba(255,255,255,.2)}
.recreo-cart__head h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:22px;line-height:1;display:flex;align-items:center;gap:.4em}
.recreo-cart__close{background:rgba(255,255,255,.12);color:var(--blanco);border:0;
  cursor:pointer;padding:.45em;display:grid;place-items:center;
  transition:background-color var(--d-1) ease,color var(--d-1) ease}
.recreo-cart__close:hover{background:var(--mandarina);color:var(--tinta)}
.recreo-cart-body{flex:1 1 auto;overflow-y:auto;padding:16px 18px;min-height:0}
.carrito-items{display:flex;flex-direction:column;gap:14px}
.carrito-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;
  padding-bottom:14px;border-bottom:2px solid rgba(255,255,255,.14)}
.carrito-item>*{min-width:0}
.carrito-item img{width:64px;height:64px;object-fit:cover;background:rgba(255,255,255,.06)}
.carrito-item__info{display:flex;flex-direction:column;gap:3px}
.carrito-item__nombre{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:16px;line-height:1;overflow-wrap:anywhere}
.carrito-item__cant{font-size:var(--dato);letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;opacity:.75}
.carrito-item__precio{font-weight:800;color:var(--lima)}
.carrito-vacio{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:20px;line-height:1.1;opacity:.8}
.recreo-cart__foot{padding:16px 18px;border-top:2px solid rgba(255,255,255,.2);
  display:flex;flex-direction:column;gap:10px}
.recreo-cart__subtotal-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.recreo-cart__subtotal-label{font-size:var(--dato);text-transform:uppercase;
  letter-spacing:.14em;font-weight:800}
.recreo-cart-subtotal{font-family:var(--display);font-weight:800;font-size:26px;color:var(--lima)}
.recreo-cart__nota{font-size:12px;letter-spacing:.04em;opacity:.75}
body.cart-open,body.nav-open{overflow:hidden}


/* ═══ 09b-WOO-CASCADA ═════════════════════════════════════════════════
   Desarma la maqueta flotada del plugin. NO se desencolan las hojas de Woo:
   eso vive en inc/ y no es de este agente. Se neutraliza con la MISMA
   especificidad que trae el plugin, aprovechando que `recreo-theme` se
   encola DESPUÉS (orden verificado en el <head>: wc-blocks · layout ·
   smallscreen · general · theme). Cada regla anota lo que medía antes. */

/* 1 · Tarjetas de producto. `.woocommerce ul.products li.product{width:22.05%}`
   (0,3,2 — le ganaba a `.products li` del tema, que es (0,2,0)) dejaba la
   tarjeta en 55 px dentro de una pista de 251 a 1440 y el nombre en 19×423 px,
   leído en vertical. A ≤768 la que manda es woocommerce-smallscreen con
   `[class*=columns-]` (48% + float + clear). */
/* El clearfix de Woo (ul.products::before/::after con display:table) se vuelve
   un ítem del grid y deja la PRIMERA celda vacía en todas las grillas. */
.woocommerce ul.products::before,.woocommerce ul.products::after,
.woocommerce-page ul.products::before,.woocommerce-page ul.products::after{content:none;display:none}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product{
  width:auto;min-width:0;float:none;clear:none;margin:0;padding:0}
.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
.woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n){
  float:none;clear:none}

/* 2 · Checkout. El float ya estaba desarmado (ver 07-TIENDA), pero el
   clearfix de Woo son DOS pseudo-elementos —`.woocommerce .col2-set::before,
   ::after{content:" ";display:table}`— y en un contenedor `grid` un
   pseudo-elemento ES un grid item: `::before` ocupaba fila 1 / columna 1,
   empujaba `.col-1` a la columna 2 (medido x=733 a 1440) y `.col-2` a la
   fila 2, con una celda vacía de 660×1093 px en medio del formulario. */
.woocommerce .col2-set::before,.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,.woocommerce-page .col2-set::after{
  content:none;display:none}

/* 3 · Totales del carrito. `.woocommerce .cart-collaterals .cart_totals
   {float:right;width:48%}` los dejaba en 250 px de los 520 del bloque. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals{width:auto;float:none}

/* 4 · Cupón del carrito. `.woocommerce table.cart td.actions .input-text
   {width:80px}` —y su variante con `#content`, que es (1,3,3)— dejaba el
   campo en 80 px. Se le gana sumando el id del propio campo: (1,5,3). El
   mínimo va con `min()` para que a 320 px no empuje la celda. */
.woocommerce table.cart td.actions .coupon input#coupon_code,
.woocommerce-page table.cart td.actions .coupon input#coupon_code{
  width:auto;float:none;flex:1 1 min(260px,100%);min-width:min(220px,100%)}
.woocommerce table.cart td.actions .coupon .button,
.woocommerce-page table.cart td.actions .coupon .button{width:auto;flex:0 0 auto}

/* 5 · El ícono de los avisos es un `::before` con posición absoluta que Woo
   coloca dentro de su propio padding de 3.5em; con el padding del tema
   (14px 16px) el glifo caía encima del texto. El aviso ya tiene color,
   tipografía y peso propios: el glifo del plugin no aporta nada. */
.woocommerce-info::before,.woocommerce-message::before,.woocommerce-error::before,
.woocommerce-info::after,.woocommerce-message::after,.woocommerce-error::after{
  content:none;display:none}

/* 6 · Los formularios sueltos de Woo (cupón del checkout, login, registro)
   venían con el borde y el radio del plugin: `border:1px solid #cfc8d8;
   border-radius:5px`. Esa sí era piel por defecto. */
.woocommerce form.checkout_coupon,.woocommerce form.login,
.woocommerce form.register{border:0;border-radius:0;margin:0 0 18px;
  padding:clamp(14px,1.6cqw,22px);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.woocommerce form.checkout_coupon .form-row{margin-bottom:0}
.woocommerce form.checkout_coupon #coupon_code{min-width:min(220px,100%)}


/* ═══ 09c-FICHA: TEXTO SOBRE FOTO ═════════════════════════════════════
   Medido por píxel bajo el trazo en las 13 fichas con foto a 1440 (peor
   píxel del trazo pleno): el H1 blanco daba 1,25:1 en
   `cartuchera-doble-compartimento-trazo` y 1,42 · 1,75 · 1,87 · 2,42 · 2,87
   en otras cinco; la miga bajaba a 1,00:1. Subir el velo pedía +0,35 de
   tinta sobre la mitad superior del héroe: apagaba el producto, que es lo
   que la ficha tiene que vender. El tema ya había resuelto este mismo caso
   con un sello impreso —`.capa>.dato`, ver 04-TIPOGRAFIA— y sobre sello el
   ratio deja de depender de la foto: 17,93:1 blanco sobre tinta y 15,44:1
   tinta sobre blanco, en las 13 fichas y en cualquier foto futura. */
#ficha .miga{background:var(--tinta);color:var(--blanco);opacity:1;
  align-self:flex-start;width:auto;padding:.42em .7em}
#ficha .miga a{color:var(--blanco);border-bottom-color:var(--lima)}
#ficha .miga a:hover{color:var(--lima)}
/* El sello es UN bloque detrás de todo el título, no uno por renglón. Con
   `box-decoration-break:clone` y el interlineado del rótulo (.9) la caja de
   fondo de cada fragmento mide más que el avance de línea, así que el sello
   del segundo renglón se pintaba encima de los remates del primero: medido a
   1440 en `mochila-poni-escolar`, «MOCHILA» aparecía cortado por la mitad y
   «PONI» —fuera del ancho del segundo renglón— entero. Un solo bloque con
   `align-self:flex-start` respeta el interlineado apretado, que es firma del
   diseño, y no puede tapar nada. */
/* M-5 (QA v2): el H1 de la home iba blanco suelto sobre la foto y el 8,4 %
   de su trazo medía < 3:1 (mín 1,45 en la zona clara @1440). Mismo remedio
   que la ficha: sello de tinta, 17,93:1 en cualquier foto futura. */
#hero .rotulo{background:var(--tinta);color:var(--blanco);
  align-self:flex-start;width:auto;padding:.1em .2em .16em}
#hero.pantalla--claro .rotulo{background:var(--blanco);color:var(--tinta)}
#ficha .rotulo{background:var(--tinta);color:var(--blanco);
  align-self:flex-start;width:auto;padding:.1em .2em .16em}
#ficha.pantalla--claro .miga,#ficha.pantalla--claro .rotulo{
  background:var(--blanco);color:var(--tinta)}
#ficha.pantalla--claro .miga a{color:var(--tinta);border-bottom-color:var(--tinta)}
#ficha.pantalla--claro .miga a:hover{color:var(--mand-honda)}
/* El resto del texto del héroe claro seguía en blanco sobre velo claro:
   `.pantalla--claro` sólo recoloreaba `.dato`, el borde de la miga y el
   precio. Medido en `mochila-campus-style` y en
   `cartuchera-doble-compartimento-trazo`: `.entrada` y `.credito` en
   rgb(255,255,255) sobre `velo--claro`. En los héroes `banda--color` el
   valor ya era tinta, así que ahí la regla no cambia nada. */
.pantalla--claro .capa .rotulo,.pantalla--claro .capa .entrada,
.pantalla--claro .capa .credito{color:var(--tinta)}
/* «5 disponibles» es el p.stock de Woo (verde #77a464 de su hoja): medía
   1,09:1 sobre la banda mandarina y 4,46–4,58 sobre foto. Y «Quedan 5 · 10%
   off» iba en lima suelta: 2,41:1 sobre mandarina y lima sobre lima en la
   banda lima. Los dos son datos de apoyo, así que van como el resto de los
   datos de la ficha: sello de tinta con texto lima (13,83:1), y sobre banda
   con las variables --banda-ink/--banda-acento (regla en 09-BANDA). */
#ficha .stock,#ficha .capa .dato--lima{background:var(--tinta);color:var(--lima);
  font-family:var(--texto);font-weight:800;text-transform:uppercase;font-size:var(--dato);
  letter-spacing:.14em;line-height:1.3;padding:.34em .62em;margin:0;display:inline-block;width:auto}
#ficha .stock.out-of-stock{color:var(--mandarina)}


/* ═══ 11-MOVIL ════════════════════════════════════════════════════════ */

@media (max-width:700px){
  :root{--marco:18px}
  .capa{gap:12px}
  .entrada{max-width:100%}
  .impreso{gap:12px 18px}
  .impreso>li{flex:1 1 44%}
  .pie{padding-bottom:58px}
  .comercio{padding-bottom:76px}
  /* La tabla del carrito tiene 5 columnas: a 320 px no entra y desbordaría.
     Woo ya pone data-title en cada td, así que cada celda pasa a ser un
     renglón «rótulo · valor» en vez de una columna. */
  .woocommerce table.cart thead,
  .woocommerce table.shop_table_responsive thead{display:none}
  .woocommerce table.cart tr{display:flex;flex-wrap:wrap;align-items:center;
    gap:6px 12px;padding:12px 0;border-bottom:2px solid rgba(255,255,255,.16)}
  .woocommerce table.cart td{display:flex;justify-content:space-between;
    align-items:center;gap:12px;width:100%;min-width:0;border:0;padding:0}
  .woocommerce table.cart td::before{content:attr(data-title);flex:0 0 auto;
    font-size:var(--dato);text-transform:uppercase;letter-spacing:.12em;
    font-weight:800;opacity:.7}
  .woocommerce table.cart td.product-remove,
  .woocommerce table.cart td.product-thumbnail{width:auto}
  .woocommerce table.cart td.product-remove::before,
  .woocommerce table.cart td.product-thumbnail::before,
  .woocommerce table.cart td.actions::before{content:none}
  .woocommerce table.cart td.actions{flex-wrap:wrap;justify-content:flex-start}
  .woocommerce-checkout-review-order-table td,
  .woocommerce-checkout-review-order-table th{padding:10px 6px}
}


/* ═══ 10-REDUCE (un solo bloque, el último: es lo que hace auditable
       el apagado del movimiento) ═══════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev,.rev-on .rev{opacity:1;transform:none;transition:none}
  .fondo--zoom img{transform:none}
  .cortina,.cortina--entra,.cortina--sale{animation:none!important;display:none}
  .btn:hover,.tarjeta:hover img,.producto:hover .producto__media img,
  .woocommerce .button:hover,.wa:hover{transform:none}
  .cart-bump{animation:none}
  .cab nav,.recreo-cart,.nav-scrim,.recreo-cart-overlay{transition:none}
  *{scroll-behavior:auto!important}
}