/* ══════════════════════════════════════════════════════════════════
   VINANTI LINE — sistema de iconos
   ══════════════════════════════════════════════════════════════════

   Iconos lineales en dos tintas: el cuerpo en el ciruela de la marca y
   UNA sola pieza en dorado, siempre la parte que hace el trabajo o que
   caracteriza el objeto — la llama de la vela, la piedra del anillo, la
   barra del labial, el asa de la bolsa, el mango de la lupa.

   El dibujo vive en js/iconos.js. Aqui solo esta el color, el tamano y
   los estados. Ver la guia de "como anadir un icono" al final de ese
   archivo.

   ── Sobre los colores, y el error que hubo aqui ──────────────────
   La primera version uso --dorado-oscuro (#A07848) como acento, elegido
   por dar 3,98:1 contra el blanco frente al 2,55:1 de --dorado. La
   medicion era correcta y la conclusion estaba mal: contra el borgona
   del cuerpo, ese dorado oscuro se queda en 1,83:1. Dos tintas
   separadas por 1,83:1 son UNA tinta. El acento estaba aplicado y no se
   veia.

   Lo que hay que medir en un icono de dos tintas es la separacion
   ENTRE las dos, no la de cada una contra el fondo. Este par da 6,31:1.

   Que el dorado solo de 2,55:1 sobre blanco no lo descalifica: WCAG
   1.4.11 exige 3:1 a lo que hace falta para ENTENDER el grafico, y aqui
   el objeto entero lo dibuja el cuerpo ciruela a 16,06:1. Tapa el
   acento y el icono se sigue entendiendo; eso es lo que lo convierte en
   acento y no en informacion.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --vinanti-icon-primary:  var(--texto-oscuro, #2D1B2E);  /* 16,06:1 sobre blanco */
  --vinanti-icon-accent:   var(--dorado, #C9996A);        /* 6,31:1 contra el cuerpo */
  --vinanti-icon-hover-bg: var(--borde-suave, #FAE8EE);
  --vinanti-icon-muted:    var(--texto-suave, #A07890);
}

/* ── Base ────────────────────────────────────────────────────────
   AQUI NO SE DECLARA width NI height, y no es un olvido: en CSS una
   regla de hoja de estilos le gana siempre al atributo width del <svg>,
   asi que un `width: 1em` de cortesia habria aplastado todos los
   tamanos pedidos desde el marcado. El tamano lo pone el atributo, que
   es lo que permite 18px en la navbar y 26px en una tarjeta sin
   inventar una clase por cada medida. */
.vi {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.14em;
  color: var(--vinanti-icon-primary);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 180ms ease, transform 180ms ease;
}

/* La pieza dorada. Dos formas segun se dibuje con trazo o con relleno. */
.vi .vi-oro          { stroke: var(--vinanti-icon-accent); }
.vi .vi-oro-relleno  { fill: var(--vinanti-icon-accent); stroke: none; }

/* ── Glifos de marca ajena ───────────────────────────────────────
   No son Vinanti Line y no deben heredar nada suyo: llevan su color
   dentro del propio SVG. Aqui solo se les da la caja y la alineacion,
   para que se sienten igual que los demas junto al texto. */
.vi-marca {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.14em;
}

/* ── Tono apagado, para iconos de apoyo (pie, textos secundarios) ── */
.vi-suave { color: var(--vinanti-icon-muted); }

/* ── Variante monocromatica ──────────────────────────────────────
   Sobre foto o fondo oscuro las dos tintas pierden contraste: el dorado
   sobre borgoña no se distingue. Ahi el icono renuncia al acento y va
   entero en blanco, que es preferible a conservar un sistema que ya no
   se lee. */
.vi-blanco,
.vi-blanco .vi-oro         { color: #fff; stroke: #fff; }
.vi-blanco .vi-oro-relleno { fill: #fff; }

/* ── Contenedor pulsable ─────────────────────────────────────────
   Para botones y enlaces cuyo unico contenido es un icono. */
.vi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 8px;
  transition: background-color 180ms ease;
}
.vi-btn:hover { background: var(--vinanti-icon-hover-bg); }
.vi-btn:hover .vi { transform: translateY(-1px); }

/* Activo: el acento se afirma en vez de crecer el icono. El cuerpo cede
   un paso al borgoña mas claro para que el dorado gane presencia sin
   subir de tamano ni parpadear. */
.vi-btn:active .vi,
.vi-activo .vi,
a.activo .vi {
  color: var(--rosa-profundo, #B85678);
}
.vi-btn:active .vi .vi-oro,
.vi-activo .vi .vi-oro,
a.activo .vi .vi-oro         { stroke: var(--dorado-claro, #E8C4A0); }
.vi-btn:active .vi .vi-oro-relleno,
.vi-activo .vi .vi-oro-relleno,
a.activo .vi .vi-oro-relleno { fill: var(--dorado-claro, #E8C4A0); }

/* Los botones de accion de la navbar cambiaban de color en :hover por
   herencia. Como .vi fija su propio color de marca, ese cambio hay que
   volver a declararlo aqui o el hover se pierde en silencio. */
.btn-carrito:hover .vi,
.btn-usuario:hover .vi,
#btn-buscar:hover .vi { color: var(--rosa-profundo, #B85678); }

/* ── Icono junto a texto ─────────────────────────────────────────
   El hueco entre icono y palabra se declara aqui una vez para que la
   navbar, el menu movil y el banner no lo resuelvan cada uno por su
   cuenta con un &nbsp; distinto. */
.vi-con-texto {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* ── Reserva de caja para los iconos que hidrata el JS ───────────
   El <span data-vi> tiene que ocupar EXACTAMENTE el tamano del SVG que
   lo va a sustituir, o la portada pega un salto al hidratarse. Por eso
   hay una regla por cada medida en uso en vez de un 1em generico: el
   hueco reservado y el icono final miden lo mismo al pixel.
   Si anades un tamano nuevo en el marcado, anadelo tambien aqui. */
[data-vi],
[data-vi-marca] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
[data-vi-tam="13"] { width: 13px; height: 13px; }
[data-vi-tam="14"] { width: 14px; height: 14px; }
[data-vi-tam="15"] { width: 15px; height: 15px; }
[data-vi-tam="16"] { width: 16px; height: 16px; }
[data-vi-tam="17"] { width: 17px; height: 17px; }
[data-vi-tam="18"] { width: 18px; height: 18px; }
[data-vi-tam="20"] { width: 20px; height: 20px; }
[data-vi-tam="22"] { width: 22px; height: 22px; }
[data-vi-tam="24"] { width: 24px; height: 24px; }
[data-vi-tam="26"] { width: 26px; height: 26px; }
[data-vi-tam="46"] { width: 46px; height: 46px; }

/* ── Medallon de las tarjetas de categoria ───────────────────────
   Las siete tarjetas de la portada pintan el icono sobre un degradado
   de color. Medido con el par definitivo, el acento dorado da entre
   1,22:1 y 1,80:1 sobre esos degradados — falla en LAS SIETE, y por
   mucho. El cuerpo ciruela aguanta de sobra (7,7 a 11,4), pero el
   detalle dorado se evaporaba.
   Renunciar al oro ahi habria roto la familia, y oscurecerlo obligaba a
   inventar un color que la marca no tiene. El disco blanco resuelve las
   dos cosas: devuelve el icono a fondo blanco, donde el cuerpo da 16,06:1
   y las dos tintas se separan 6,31:1 entre si, y de paso las tarjetas
   ganan un remate que antes no tenian — el emoji flotaba suelto sobre el
   degradado. */
.cat-medallon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--borde-suave, #FAE8EE);
  box-shadow: 0 4px 18px rgba(45, 27, 46, 0.08);
  transition: transform 180ms ease;
}
.cat-card:hover .cat-medallon { transform: translateY(-2px); }

@media (max-width: 768px) {
  .cat-medallon { width: 72px; height: 72px; }
  .cat-medallon .vi { width: 38px; height: 38px; }
}

/* ── Menos movimiento ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vi { transition: color 180ms ease; }
  .vi-btn:hover .vi,
  .cat-card:hover .cat-medallon { transform: none; }
}