/* ============================================================
   PASTILLAS CON CARA DE CHIP  (prueba del 2026-08-25, pedido de Antero)
   Las pastillas de categoría y de subcategoría dejan de ser un vidrio gris y
   pasan a ser el ENCAPSULADO de un integrado, con la foto que preparó Antero
   (datos-fuente/marca/micro3.png, ya recortada de patas y oscurecida).

   La foto va GIRADA 90° —el lado largo queda horizontal— y cortada en tres
   piezas (herramienta: herramientas/cortar-micro.py):
     · micro-cara.webp       el cuerpo de resina. Es grano puro, así que se
                             puede recortar/estirar sin que se note.
     · micro-patas-sup/inf   una tira con 12 patas EXACTAS (el paso real de la
                             foto son 17 px, medido por autocorrelación) que se
                             repite a lo largo del borde.
   Se corta en piezas y no se usa la foto entera de fondo porque las pastillas
   miden distinto entre sí (una categoría ~190 px, una subcategoría ~150, y en
   el celular cambian todas): estirada, cada pastilla tendría las patas de otro
   grosor. Así el paso es SIEMPRE de 6 px, salga del ancho que salga.

   Va aparte a propósito: es una prueba estética. Para sacarla basta con borrar
   la línea que la incluye en index.html; nada más depende de este archivo.
   ============================================================ */

:root {
  --micro-cuerpo: #2f3134;      /* el fondo bajo la foto, por si tarda en cargar */
  --pata-alto: 5px;             /* alto de la tira: igual al de la pieza, para que no se interpole */
  --pata-tira: 72px;            /* 12 patas × 6 px de paso */
}

/* ---- el cuerpo ---- */
.cat,
.sub {
  position: relative;
  background-color: var(--micro-cuerpo);
  background-image:
    url("../img/marca/micro-patas-sup.webp?v=2"),
    url("../img/marca/micro-patas-inf.webp?v=2"),
    linear-gradient(158deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.3) 100%),
    url("../img/marca/micro-cara.webp");
  background-position: top left, bottom left, center, center;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  background-size:
    var(--pata-tira) var(--pata-alto),
    var(--pata-tira) var(--pata-alto),
    auto,
    cover;
  /* NADA de filo: cualquier línea de 1 px en el borde le pasa por encima a las
     patas y las corta (lo vio Antero el 2026-08-25). El volumen lo da una
     viñeta hacia adentro, que no dibuja línea en ningún lado. */
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.45);
  transition: box-shadow 200ms, transform 200ms, filter 200ms;
}

/* ---- hover: el chip se levanta y se aclara, sin dibujar ningún borde ---- */
.cat:hover, .sub:hover {
  box-shadow: inset 0 0 26px rgba(252, 252, 0, 0.12), 0 0 14px rgba(252, 252, 0, 0.14);
  filter: brightness(1.14);
}

/* ---- elegida: el micro ALIMENTADO ----
   Se prende en amarillo pero la resina no se va: el tinte entra como una capa
   más del fondo, POR DEBAJO de las patas (así siguen doradas) y POR ENCIMA de
   la cara, que se sigue viendo con su grano. (Pedido de Antero: "que se prenda
   en amarillo, pero que no desaparezca el fondo".) */
.cat--on,
.sub--on {
  /* tienda.css pinta el elegido con el shorthand `background`, que deja el
     color en transparent: se vuelve a poner acá */
  background-color: var(--micro-cuerpo);
  background-image:
    url("../img/marca/micro-patas-sup.webp?v=2"),
    url("../img/marca/micro-patas-inf.webp?v=2"),
    linear-gradient(rgba(252, 252, 0, 0.26), rgba(252, 252, 0, 0.2)),
    linear-gradient(158deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.28) 100%),
    url("../img/marca/micro-cara.webp");
  background-position: top left, bottom left, center, center, center;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat, no-repeat;
  background-size:
    var(--pata-tira) var(--pata-alto),
    var(--pata-tira) var(--pata-alto),
    auto, auto, cover;
  box-shadow:
    inset 0 0 30px rgba(252, 252, 0, 0.22),
    0 0 24px rgba(252, 252, 0, 0.3);
  filter: brightness(1.06);
}

/* el chispazo de cuando le llega el impulso: sube el tinte un momento */
.sub--viva {
  box-shadow:
    inset 0 0 34px rgba(252, 252, 0, 0.4),
    0 0 30px rgba(252, 252, 0, 0.55);
  filter: brightness(1.16);
}

/* en el celular la pastilla es más chica: patas más finas para que no se
   coman la cara del chip */
@media (max-width: 520px) {
  :root { --pata-alto: 4px; --pata-tira: 60px; }
}