/* ============================================================
   SUPRA CASES — Tokens, reset, tipografia, botones, etiquetas
   Extraido de supra-cases-v3.html lineas 17-111
   ============================================================ */

/* ============================================================
   SUPRA CASES — SISTEMA DE DISEÑO v3
   Identidad: amarillo Supra + negro, tipografía itálica pesada
   tomada del logotipo. El color adicional entra por categoría,
   no como decoración.
   ============================================================ */
:root{
  /* Los tokens del prototipo son alias de los presets de theme.json.
     Una sola fuente de verdad: cambiar un color en theme.json lo cambia en
     el sitio y en el editor de bloques. El hex va como respaldo por si la
     hoja de presets no llega a cargar. */
  --negro:var(--wp--preset--color--negro,#0E0E0E);
  --negro-2:var(--wp--preset--color--negro-2,#1C1C1F);
  --blanco:var(--wp--preset--color--blanco,#FFFFFF);
  --humo:var(--wp--preset--color--humo,#F4F4F5);
  --humo-2:var(--wp--preset--color--humo-2,#E9E9EC);
  --linea:var(--wp--preset--color--linea,#E2E2E6);
  --texto:var(--wp--preset--color--negro,#0E0E0E);
  --texto-2:var(--wp--preset--color--texto-2,#57575E);
  --texto-3:var(--wp--preset--color--texto-3,#8A8A93);

  --amarillo:var(--wp--preset--color--amarillo,#FFC400);
  --amarillo-osc:var(--wp--preset--color--amarillo-osc,#E8AF00);
  --amarillo-sombra:rgba(255,196,0,.28);

  --azul:var(--wp--preset--color--azul,#2563EB);
  --morado:var(--wp--preset--color--morado,#7C3AED);
  --cian:var(--wp--preset--color--cian,#0891B2);
  --naranja:var(--wp--preset--color--naranja,#EA580C);
  --verde:var(--wp--preset--color--verde,#16A34A);
  --teal:var(--wp--preset--color--teal,#0D9488);
  --pizarra:var(--wp--preset--color--pizarra,#475569);

  --exito:var(--wp--preset--color--exito,#15803D);
  --alerta:var(--wp--preset--color--alerta,#B45309);

  --r:var(--wp--custom--radius--sm,4px);
  --r-g:var(--wp--custom--radius--lg,10px);
  --max:1280px;
  --h-header:var(--wp--custom--header--height,72px);
  --t:var(--wp--custom--transition,.18s cubic-bezier(.4,0,.2,1));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--blanco);color:var(--texto);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  font-feature-settings:'tnum' 1;display:flex;flex-direction:column;min-height:100vh;
  overflow-x:clip;
}
/* height:auto es obligatorio, no cosmetico: WordPress imprime width y height
   en cada <img>. Sin el, max-width encoge el ancho y la altura se queda en
   el atributo, asi que la foto sale aplastada en cuanto la columna mide
   menos que el recorte (300px en las tarjetas). */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px;width:100%}
.num{font-variant-numeric:tabular-nums}

/* Texto solo para lectores de pantalla. WordPress y WooCommerce lo emiten
   por todas partes (el "El precio original era..." de una oferta, las
   etiquetas de los campos de cantidad, el enlace de saltar al contenido).
   Sin esta regla ese texto sale impreso en pantalla. La receta es la del
   nucleo, con el :focus que hace visible el enlace de salto. */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--blanco);border-radius:var(--r);
  box-shadow:0 0 2px 2px rgba(14,14,16,.2);clip-path:none;color:var(--texto);display:block;
  font-size:14px;font-weight:700;height:auto;left:8px;line-height:normal;padding:14px 20px;
  text-decoration:none;top:8px;width:auto;z-index:100000}

/* --- Tipografía: itálica pesada para títulos, como el logotipo --- */
h1,h2,h3,h4{margin:0;line-height:1.04;letter-spacing:-.025em}
h1,h2{font-style:italic;font-weight:800;font-variation-settings:'wdth' 108;text-transform:uppercase}
h1{font-size:clamp(30px,5.4vw,54px)}
h2{font-size:clamp(23px,3.2vw,36px)}
h3{font-size:18px;font-weight:700;letter-spacing:-.015em}
p{margin:0 0 1em}
.lead{font-size:16px;color:var(--texto-2);max-width:64ch}

/* --- Botones --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:var(--r);font-weight:700;font-size:15px;
  transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t);white-space:nowrap}
.btn-p{background:var(--amarillo);color:var(--negro);box-shadow:0 2px 0 var(--amarillo-osc)}
.btn-p:hover{background:var(--amarillo-osc);box-shadow:0 2px 0 #C99900}
.btn-d{background:var(--negro);color:#fff}
.btn-d:hover{background:var(--negro-2)}
.btn-o{border:1.5px solid var(--linea);background:var(--blanco)}
.btn-o:hover{border-color:var(--negro);background:var(--humo)}
.btn-lite{border:1.5px solid rgba(255,255,255,.3);color:#fff}
.btn-lite:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-sm{height:38px;padding:0 15px;font-size:14px}
.btn-lg{height:54px;padding:0 28px;font-size:16.5px}
.btn-full{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none;box-shadow:none}

/* --- Etiquetas --- */
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.02em;
  padding:3px 8px;border-radius:3px;line-height:1.35;text-transform:uppercase;font-style:italic}
.tag-of{background:var(--amarillo);color:var(--negro)}
.tag-sub{background:var(--negro);color:var(--amarillo)}
.tag-nosub{background:var(--humo-2);color:var(--texto-2)}
.tag-pend{background:#FEF3C7;color:var(--alerta)}
.tag-cat{color:#fff}

/* ============ AVISO SUPERIOR ============ */
.aviso{position:relative;background:var(--negro);color:#B9B9C0;font-size:12.5px;padding:8px 0;text-align:center}
.aviso b{color:var(--amarillo);font-weight:700}
/* El hueco de la derecha es para que el texto no pase por debajo de la X. */
.aviso-in{margin:0;padding:0 40px}
.aviso-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:0;border-radius:50%;
  background:none;color:inherit;opacity:.65;cursor:pointer}
.aviso-x:hover{opacity:1}
/* Lo pone el script en linea de inc/aviso.php, antes del primer pintado. */
[data-aviso-cerrado] .aviso{display:none}