/* =========================================================================
   TAURA — Sistema de diseño
   Referencia visual: azul marino profundo sobre blanco hueso cálido, acento
   dorado. Elegancia sobria, como una etiqueta de cuero cosida con hilo
   dorado. El azul marino viene directo del logotipo TAURA (#091F3B).
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Color — paleta azul marino TAURA sobre blanco hueso. */
  --tinta: #233344;          /* azul marino del logo TAURA: marca, botones y titulares */
  --tinta-suave: #3B4F6B;    /* azul marino medio para hover y degradados */
  --papel: #EFE9DB;          /* blanco hueso cálido de recuadros */
  --papel-hueso: #F7F3E8;    /* blanco hueso (fondo del logo) */
  --crema: #F7F3E8;          /* texto claro sobre azul marino; no cambia con el tema */
  --etiqueta: #D7DEEA;       /* acento frío muy lavado (sombras, sellos) */
  --etiqueta-oscura: #4A638A;
  --hilo: #C9A24E;           /* dorado suave de los acentos */
  --salvia: #9B8C72;         /* caqui apagado */
  --aviso: #A87C2F;          /* ámbar suave */
  --urgente: #B55340;        /* teja apagada para descuentos y "últimas unidades" */
  --verde: #4F7D5A;          /* verde bosque sobrio para éxito y ahorros */

  /* Roles de superficie */
  --fondo: var(--papel-hueso);
  --superficie: #FDFBF5;     /* blanco hueso muy claro para tarjetas */
  --texto: #1A2437;          /* azul marino muy oscuro para texto principal */
  --texto-tenue: #4E5A72;    /* azul grisáceo para texto secundario */
  --borde: #E2D9C5;          /* beige con tono frío */
  --borde-fuerte: var(--tinta);

  /* Tipografía
     Display: Bricolage Grotesque — grotesca variable, ancho estrecho en
     titulares grandes, como rótulo pintado de almacén.
     Cuerpo: Sora — geométrica y legible en pantallas pequeñas.
     Dato: JetBrains Mono — precios y contadores tabulares. */
  --display: 'Bricolage Grotesque', 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --cuerpo: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato: 'JetBrains Mono', 'Consolas', ui-monospace, monospace;

  /* Escala tipográfica */
  --t-xs: 0.6875rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.4rem;
  --t-xl: clamp(1.85rem, 3.6vw, 2.5rem);
  --t-2xl: clamp(2.5rem, 7vw, 4.5rem);
  --t-3xl: clamp(3rem, 10.5vw, 7.25rem);

  /* Espaciado */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4.5rem;
  --e9: 7rem;

  --ancho: 1240px;
  --radio: 8px;
  /* Sombras en dos capas: un halo difuso más un borde de contacto sutil.
     Da profundidad de estudio fotográfico sin oscurecer el beige. */
  --sombra-suave: 0 1px 2px rgba(58, 42, 45, 0.04), 0 10px 30px rgba(140, 47, 67, 0.07);
  --sombra-flotante: 0 2px 6px rgba(58, 42, 45, 0.06), 0 18px 40px rgba(140, 47, 67, 0.15);
  --transicion: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-tema='oscuro'] {
  --fondo: #0C1420;             /* azul marino casi negro, muy oscuro */
  --superficie: #15213A;         /* azul marino profundo para tarjetas */
  --texto: #EDE7D5;              /* blanco hueso cálido para texto principal */
  --texto-tenue: #BFC8DA;        /* azul grisáceo claro para texto secundario */
  --borde: #26324C;              /* azul grisáceo oscuro */
  --borde-fuerte: #4A638A;
  --papel: #15213A;
  --papel-hueso: #0C1420;
  --tinta: #4A6FA3;              /* azul marino claro para acciones (más contraste sobre fondo oscuro) */
  --tinta-suave: #6587BA;
  --hilo: #D8B974;               /* dorado suave */
  --verde: #7FAE89;              /* verde bosque suave */
  --urgente: #D08771;            /* teja apagada */
  --aviso: #D4A354;
}

/* ---------- 2. BASE ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow-x: hidden;
  background-image: linear-gradient(rgba(140, 47, 67, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 47, 67, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

a { color: inherit; }

.vista { display: none; }
.vista[data-activa='si'] {
  display: block;
  animation: vista-entrada 260ms ease-out both;
}

@keyframes vista-entrada {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

:focus-visible {
  outline: 3px solid var(--hilo);
  outline-offset: 2px;
  border-radius: 3px;
}

[data-tema='oscuro'] :focus-visible {
  outline-color: var(--hilo);
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e5);
}

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 3. TIPOGRAFÍA ---------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 82%;      /* Eje de ancho: más estrecho, como rótulo pintado */
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;     /* reparte las líneas parejo: nada de huérfanas sueltas */
}

/* El titular principal aprovecha al máximo el eje estrecho */
.hero__titulo { font-stretch: 76%; letter-spacing: -0.045em; }

/* Los títulos de sección respiran un poco más */
.seccion__titulo { font-stretch: 86%; letter-spacing: -0.03em; }

.rotulo {
  font-family: var(--dato);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.dato { font-family: var(--dato); font-variant-numeric: tabular-nums; }

/* ---------- 4. CABECERA ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  border-bottom: 1px solid var(--borde);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px rgba(140, 47, 67, 0.05);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e5);
  height: 68px;
}

/* Color del logotipo — verde en claro, crema en el pie y en modo oscuro */
:root { --marca-color: var(--tinta); }
[data-tema='oscuro'] { --marca-color: #F3E9DC; }
[data-tema='oscuro'] .marca__palabra { filter: brightness(0) invert(1); }

.marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--marca-color);
}

.marca__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }

.marca__palabra {
  width: auto;
  height: 28px;
  aspect-ratio: 191 / 56;
  display: block;
  overflow: visible;
}

.marca__lema {
  font-family: var(--dato);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  line-height: 1;
}

/* En el pie el logo va sobre fondo oscuro */
.marca--pie { --marca-color: #F3E9DC; }
.marca--pie .marca__palabra { height: 38px; }
.marca--pie .marca__lema { color: rgba(243, 233, 220, 0.62); }

@media (max-width: 480px) {
  .marca__lema { display: none; }
  .marca__palabra { height: 24px; }
}

.nav {
  display: flex;
  gap: var(--e5);
  margin-left: auto;
  align-items: center;
}

/* Sólo aparecen dentro del menú desplegable en móvil */

.nav__link {
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transicion), color var(--transicion), font-weight var(--transicion);
  white-space: nowrap;
}

.nav__link:hover { border-bottom-color: var(--etiqueta); color: var(--tinta); font-weight: 600; }
.nav__link[aria-current='page'] {
  color: var(--tinta);
  border-bottom-color: var(--etiqueta-oscura);
  font-weight: 700;
}

[data-tema='oscuro'] .nav__link[aria-current='page'] { color: var(--etiqueta); }

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.icono-btn {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  position: relative;
  transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}

.icono-btn:hover {
  background: var(--papel);
  color: var(--tinta);
}

.icono-btn:active { transform: scale(0.94); }

.icono-svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.icono-btn:focus-visible {
  border-radius: 50%;
  outline: none;
  box-shadow: 0 0 0 3px var(--hilo);
}

.icono-svg--relleno {
  fill: currentColor;
  stroke: var(--fondo);
  stroke-width: 1;
}

/* Icono del botón de tema: luna en modo claro (invita a la noche),
   sol en modo oscuro (invita al día). Solo se ve uno a la vez. */
.icono-tema--sol { display: none; }
[data-tema='oscuro'] .icono-tema--luna { display: none; }
[data-tema='oscuro'] .icono-tema--sol { display: block; }


.contador-burbuja {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 19px; height: 19px;
  padding: 0 4px;
  background: var(--urgente);
  color: #fff;
  border-radius: 10px;
  font-family: var(--dato);
  font-size: 10px;
  font-weight: 700;
  display: none;
  place-items: center;
  box-shadow: 0 0 0 2px var(--superficie), 0 2px 5px rgba(184, 64, 43, 0.35);
}

.contador-burbuja[data-visible='si'] { display: grid; }

.menu-btn { display: none; }

/* ---------- 5. HERO ---------- */
.hero {
  position: relative;
  /* Ocupa la pantalla completa (svh: alto visible en móvil, sin saltos al mostrar la barra del navegador) */
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(1rem, 2.2vw, 1.6rem) 0 clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--borde);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(175, 194, 219, 0.18), transparent 72%),
    var(--fondo);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(240px, 0.88fr);
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  align-items: center;
  min-height: 520px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: 0.75rem;
}

.hero__pulso {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--verde);
  animation: pulso 3s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.75); }
}

.hero__titulo {
  font-size: clamp(2.2rem, 4vw, 4rem);
  max-width: none;
  margin-bottom: 0.85rem;
  line-height: 0.9;
}

.hero__titulo em {
  font-style: normal;
  display: inline-block;
  background: var(--etiqueta);
  color: var(--tinta);
  padding: 0.04em 0.14em 0.08em;
  margin-top: 0.08em;
  white-space: nowrap;
}

[data-tema='oscuro'] .hero__titulo em {
  background: var(--tinta);
  color: var(--etiqueta);
}

.hero__texto {
  font-size: 0.98rem;
  max-width: 32ch;
  color: var(--texto-tenue);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.hero__mini-indicadores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin-bottom: 1rem;
}

.hero__mini-indicadores span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem 0.3rem 0.3rem;
  border: 1px solid color-mix(in srgb, var(--tinta) 14%, var(--borde));
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: 0 1px 1px rgba(140, 47, 67, 0.04), 0 4px 12px -6px rgba(140, 47, 67, 0.22);
  font-family: var(--cuerpo);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--texto);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
/* Icono en una moneda vinotinto: da ritmo y se lee de un vistazo */
.indicador__icono {
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0.3rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--tinta-suave), var(--tinta));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px -2px rgba(140, 47, 67, 0.55);
  fill: none;
  stroke: var(--crema);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.indicador:first-child .indicador__icono { fill: var(--crema); stroke: none; }
.hero__mini-indicadores span:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tinta) 35%, var(--borde));
  box-shadow: 0 1px 1px rgba(140, 47, 67, 0.05), 0 10px 20px -10px rgba(140, 47, 67, 0.4);
}
[data-tema='oscuro'] .indicador__icono { background: linear-gradient(145deg, #c2566c, #8c2f43); }
@media (max-width: 520px) {
  .hero__mini-indicadores { gap: 0.4rem; }
  .hero__mini-indicadores span { gap: 0.35rem; padding: 0.22rem 0.65rem 0.22rem 0.22rem; font-size: 0.72rem; }
  .indicador__icono { width: 1.3rem; height: 1.3rem; padding: 0.25rem; }
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
}

/* Sin alto máximo: el carrusel (fotos + textos + controles) debe caber
   entero; si se recorta, se monta sobre "Las mejores rebajas de hoy". */
.hero__visual {
  position: relative;
  min-width: 0;
  margin-top: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.comerciante__datos {
  border-top: 2px solid var(--borde-fuerte);
  border-bottom: 1px solid var(--borde);
  padding: var(--e4) 0 var(--e5);
  margin-bottom: var(--e6);
}

.comerciante__cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e5);
  margin-top: var(--e5);
}

.cifra + .cifra {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.cifra__valor {
  font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.6rem);
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}

.cifra__etiqueta {
  font-family: var(--dato);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-tenue);
  margin-top: var(--e1);
  display: block;
}

/* ---------- 6. BOTONES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 0.75rem 1.4rem;
  min-height: 44px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion),
              background var(--transicion), color var(--transicion);
}

.btn--primario {
  background: var(--tinta);
  color: var(--crema);
  box-shadow: 0 5px 0 var(--etiqueta);
}

.btn--primario:hover {
  transform: translate(-2px, -2px);
  box-shadow: 0 7px 0 var(--etiqueta);
}

.btn--primario:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--etiqueta); }

[data-tema='oscuro'] .btn--primario {
  background: var(--etiqueta);
  color: #000;
  box-shadow: 4px 4px 0 var(--tinta-suave);
}

.btn--linea { background: transparent; color: var(--texto); }
.btn--linea:hover { background: var(--texto); color: var(--fondo); }

.btn--pleno { width: 100%; }

/* La etiqueta cuelga de un ojete en el borde inferior del chip de abajo a la
   izquierda. El nudo de la imagen está a 8.44% del ancho y 9.63% del alto
   (alto = 0.9 × ancho); la cuerda pasa por detrás del chip. */
.hero__intro { --ancho-etiqueta: clamp(220px, 26vw, 300px); }

.hero__intro .hero__mini-indicadores {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}


/* Ojete perforado en la burbuja "Nueva" y una argolla de metal que baja
   por él hasta el nudo del cordón. El ojete queda justo sobre el nudo
   (8.44% del ancho de la etiqueta); la argolla entra por el agujero, así
   que su extremo de arriba queda tapado por el metal del ojete. */
.hero__mini-indicadores .indicador:first-child {
  position: relative;
  padding-left: calc(var(--ancho-etiqueta) * 0.0844 + 11px);
}
.hero__mini-indicadores .indicador:first-child:hover { transform: none; }
.indicador:first-child::before,
.indicador:first-child::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
/* Argolla: óvalo de alambre con brillo a un lado y sombra al otro */
.indicador:first-child::before {
  left: calc(var(--ancho-etiqueta) * 0.0844 - 5.5px);
  top: 50%;
  width: 11px;
  height: calc(50% + 13px);
  border-radius: 50% / 38%;
  border: 2.4px solid transparent;
  background:
    linear-gradient(100deg, #6f757c, #f4f6f8 35%, #a9afb6 60%, #5d636a) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.35));
  z-index: 1;
}
/* Ojete: anillo metálico con relieve y el agujero oscuro al centro */
.indicador:first-child::after {
  left: calc(var(--ancho-etiqueta) * 0.0844 - 7.5px);
  top: calc(50% - 7.5px);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 55%, #2a1e21 0 2.6px, #5b4a4e 3.2px, transparent 3.6px),
    radial-gradient(circle at 35% 30%, #ffffff 0 1px, transparent 3px),
    conic-gradient(from 200deg, #eef1f4, #8c9299, #d9dde1, #6b7178, #f3f5f7, #9aa0a7, #eef1f4);
  box-shadow:
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.35),
    inset 0 -1px 1.5px rgba(0, 0, 0, 0.25),
    0 1px 1.5px rgba(0, 0, 0, 0.3),
    0 0 0 1.5px color-mix(in srgb, var(--tinta) 10%, transparent);
  z-index: 2;
}

/* 15 px más abajo que antes: deja sitio a la argolla entre ojete y nudo */
.hero__acciones { margin-top: calc(var(--ancho-etiqueta) * -0.0867 + 9px); }

.btn-etiqueta {
  display: inline-block;
  width: var(--ancho-etiqueta);
  line-height: 0;
  border-radius: 12px;
}

.btn-etiqueta__img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 8.44% 9.63%;
  animation: etiqueta-balanceo 4.5s ease-in-out infinite;
  transition: filter var(--transicion);
}

.btn-etiqueta:hover .btn-etiqueta__img,
.btn-etiqueta:focus-visible .btn-etiqueta__img {
  animation-duration: 1.6s;
  filter: brightness(1.06) saturate(1.1);
}

.btn-etiqueta:active .btn-etiqueta__img { filter: brightness(0.95); }

.btn-etiqueta:focus-visible { outline: 3px solid var(--hilo); outline-offset: 4px; }

@keyframes etiqueta-balanceo {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-etiqueta__img { animation: none; }
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--borde);
}

/* ---------- 7. SECCIONES ---------- */
.seccion { padding: var(--e8) 0; }
.seccion--borde { border-bottom: 1px solid var(--borde); }

.seccion__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e5);
  flex-wrap: wrap;
  margin-bottom: var(--e6);
}

.seccion__titulo {
  font-size: var(--t-xl);
  max-width: 20ch;
}

.seccion__texto {
  color: var(--texto-tenue);
  max-width: 52ch;
  margin-top: var(--e3);
}

/* ---------- 8. CÓMO FUNCIONA ---------- */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  background: var(--superficie);
}

.paso {
  padding: var(--e5);
  border-right: 1px dashed var(--borde);
}

.paso:last-child { border-right: none; }

.paso__num {
  font-family: var(--dato);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--etiqueta-oscura);
  display: block;
  margin-bottom: var(--e3);
}

[data-tema='oscuro'] .paso__num { color: var(--etiqueta); }

.paso__titulo {
  font-size: var(--t-md);
  font-weight: 700;
  margin-bottom: var(--e2);
}

.paso__texto {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

/* ---------- 9. FILTROS ---------- */
.filtros {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  background: var(--superficie);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e6);
  position: sticky;
  top: 68px;
  z-index: 20;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.filtros[data-oculto='si'] {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.filtros__fila {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  align-items: center;
}

.buscador {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: var(--e2);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  padding: 0 0.7rem;
  background: var(--fondo);
}

.buscador__icono {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--texto);
  stroke-width: 2;
  stroke-linecap: round;
}

.buscador:focus-within { border-color: var(--borde-fuerte); }

.buscador input {
  flex: 1;
  border: none;
  background: none;
  padding: 0.6rem 0;
  font-size: var(--t-sm);
  min-width: 0;
}

.buscador input:focus { outline: none; }

.select {
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: 0.52rem 0.7rem;
  font-size: var(--t-sm);
  cursor: pointer;
  max-width: 100%;
  min-height: 42px;
  color: var(--texto);
}

.filtros__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px dashed var(--borde);
}

.chips { display: flex; gap: var(--e2); flex-wrap: wrap; }

.chip {
  padding: 0.3rem 0.7rem;
  border: 1.5px solid var(--borde);
  border-radius: 100px;
  font-size: var(--t-xs);
  font-weight: 600;
  transition: all var(--transicion);
  white-space: nowrap;
  color: var(--texto);
}

.chip:hover { border-color: var(--borde-fuerte); background: var(--papel); }

.chip[aria-pressed='true'] {
  background: var(--tinta);
  color: var(--crema);
  border-color: var(--tinta);
}

[data-tema='oscuro'] .chip[aria-pressed='true'] {
  background: var(--etiqueta);
  color: var(--tinta);
  border-color: var(--etiqueta);
}

.resultado-cuenta {
  font-family: var(--dato);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  white-space: nowrap;
}

/* ---------- 10. REJILLA DE PRENDAS ---------- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}

.prenda {
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.prenda:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 28px rgba(140, 47, 67, 0.09);
  border-color: rgba(140, 47, 67, 0.2);
}

.prenda__figura {
  position: relative;
  aspect-ratio: 1 / 1.08;
  background:
    repeating-linear-gradient(
      45deg,
      var(--papel) 0 12px,
      transparent 12px 24px
    ),
    var(--fondo);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--borde);
  overflow: hidden;
}

.prenda__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 280ms cubic-bezier(0.2, 0, 0.2, 1), filter 280ms ease;
  will-change: transform, filter;
}

.prenda:hover .prenda__foto {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.02);
}

.prenda__fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.prenda__fallback .silueta {
  width: 86%;
  max-width: 240px;
}

/* Silueta ilustrada de la prenda.
   El viewBox tiene aire arriba y abajo, así que se escala un poco por encima
   del 100% y se recorta con el overflow del marco para llenarlo mejor. */
.silueta {
  width: 92%;
  max-width: 230px;
  height: auto;
  transform: scale(1.18);
  transition: transform var(--transicion);
}

.prenda:hover .silueta { transform: scale(1.24) rotate(-1.5deg); }

.silueta__forma path:not([data-linea]) {
  fill: var(--tinte);
  stroke: var(--tinta);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.silueta__forma [data-linea] {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.7;
}

.silueta__forma [data-punto] { fill: var(--tinta); opacity: 0.75; }

[data-tema='oscuro'] .silueta__forma path:not([data-linea]) { stroke: #140D0F; }
[data-tema='oscuro'] .silueta__forma [data-linea] { stroke: #140D0F; }

/* Silueta pequeña, para listas dentro de modales y tarjetas de tienda */
.silueta--mini { width: 46px; flex-shrink: 0; display: block; }
.silueta--mini .silueta { width: 100%; max-width: none; transform: none; }
.tienda__muestra .silueta { transform: none; }

/* Sello de descuento premium, discreto y elegante */
.prenda__sello {
  position: absolute;
  top: 12px;
  left: 12px;
  width: auto;
  min-width: 62px;
  max-width: 78px;
  transform: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--tinta);
  border: 1px solid rgba(40, 16, 20, 0.25);
  border-radius: 999px;
  text-align: center;
  font-family: var(--display);
  font-size: 0.48rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 7px 5px;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(40, 16, 20, 0.08);
  backdrop-filter: blur(3px);
}

.prenda__sello--alto { background: var(--urgente); color: #fff; border-color: var(--tinta); }

[data-tema='oscuro'] .prenda__sello {
  background: rgba(50, 30, 35, 0.95);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.prenda__stock {
  position: absolute;
  bottom: var(--e3);
  left: var(--e3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 100px;
  padding: 3px 9px;
  font-family: var(--dato);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.punto-stock { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.punto-stock--bajo { background: var(--urgente); }
.punto-stock--medio { background: var(--aviso); }
.punto-stock--alto { background: var(--verde); }

.favorito-btn {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.2, 0, 0.2, 1), background 200ms ease, box-shadow 200ms ease;
}

.favorito-btn__icono {
  width: 19px; height: 19px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  transition: fill 200ms ease, stroke 200ms ease, transform 200ms ease;
}

.favorito-btn:hover { transform: scale(1.08); background: #fff; }
.favorito-btn:hover .favorito-btn__icono { color: var(--urgente); }
.favorito-btn:active { transform: scale(0.94); }
.favorito-btn:focus-visible { outline: 3px solid var(--hilo); outline-offset: 2px; }

/* Guardada: corazón relleno en terracota */
.favorito-btn[aria-pressed='true'] { color: var(--urgente); background: #fff; }
.favorito-btn[aria-pressed='true'] .favorito-btn__icono { fill: currentColor; }

.favorito-btn--latido .favorito-btn__icono { animation: latido 420ms cubic-bezier(0.2, 0, 0.2, 1); }
.favorito-btn--destello { animation: favorito-destello 620ms ease-out; }
@keyframes latido {
  0% { transform: scale(1); }
  35% { transform: scale(1.3); }
  65% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@keyframes favorito-destello {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--urgente) 55%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
  45% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--urgente) 22%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.8); }
  100% { box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .favorito-btn--latido .favorito-btn__icono, .favorito-btn--destello { animation: none; }
}

.prenda__cuerpo {
  padding: 1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.55rem;
}

.prenda__tallas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}
.prenda__tallas-label {
  margin-right: 0.15rem;
  color: var(--texto-tenue);
  font-family: var(--dato);
  font-size: var(--t-xs);
}
.talla--mini {
  min-width: 2rem;
  height: 1.8rem;
  padding: 0 0.45rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-tenue);
  font-family: var(--dato);
  font-size: var(--t-xs);
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.talla--mini:hover { border-color: var(--tinta); color: var(--tinta); transform: translateY(-1px); }
.talla--mini[aria-checked='true'] { border-color: var(--tinta); background: var(--tinta); color: var(--crema); box-shadow: 0 3px 0 color-mix(in srgb, var(--tinta) 65%, transparent); }
[data-tema='oscuro'] .talla--mini[aria-checked='true'] { border-color: var(--etiqueta); background: var(--etiqueta); color: var(--tinta); box-shadow: 0 3px 0 color-mix(in srgb, var(--etiqueta) 65%, transparent); }
.prenda__tienda-icono { display: inline-flex; vertical-align: -0.18em; margin-right: 0.22rem; color: var(--tinta); }
.prenda__tienda-icono svg { width: 1rem; height: 1rem; fill: color-mix(in srgb, var(--etiqueta) 45%, transparent); stroke: currentColor; stroke-width: 1.8; }

.prenda__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: baseline;
}

.prenda__marca {
  font-family: var(--cuerpo);
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto);
}

.prenda__nombre {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prenda__temporada {
  display: inline-block;
  font-family: var(--dato);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 2px 6px;
  color: var(--texto-tenue);
  align-self: flex-start;
}

/* Etiqueta de precio colgante */
.etiqueta-precio {
  position: relative;
  margin-top: auto;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: var(--e3) var(--e3) var(--e3) 1.6rem;
}

[data-tema='oscuro'] .etiqueta-precio { background: #2B1F23; }

.etiqueta-precio::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 50%;
  background: var(--superficie);
}

.precio-viejo {
  font-family: var(--dato);
  font-size: var(--t-xs);
  color: var(--texto);
  font-weight: 500;
  text-decoration: line-through;
  display: block;
}

.precio-nuevo {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-stretch: 84%;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: block;
}

.ahorro {
  font-family: var(--dato);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--verde);
  display: block;
  margin-top: 1px;
}

[data-tema='oscuro'] .ahorro { color: var(--etiqueta); }

/* Contador de próxima rebaja */
.proxima-rebaja {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--dato);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-tenue);
  border-top: 1px dashed var(--borde);
  padding-top: var(--e2);
  margin-top: var(--e2);
  line-height: 1.4;
  /* El texto se mantiene en una unidad para que no parta entre "sube" y "a" */
  text-wrap: balance;
}

.proxima-rebaja > span { flex-shrink: 0; }

.proxima-rebaja strong { color: var(--etiqueta-oscura); }
[data-tema='oscuro'] .proxima-rebaja strong { color: var(--etiqueta); }

.prenda__detalle {
  margin: -0.15rem 0 0;
  font-family: var(--dato);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  color: var(--texto-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prenda__tienda {
  margin-top: -0.05rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nota de la tienda (prueba social) en la tarjeta: estrella dorada + promedio */
.prenda__nota {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  margin-left: 0.35rem;
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hilo) 16%, transparent);
  color: var(--texto);
  font-size: var(--t-xs);
  font-weight: 700;
  vertical-align: 0.05em;
}
.prenda__nota-estrella { color: var(--hilo); font-size: 0.85em; line-height: 1; }

/* Nombre de tienda clicable, dentro de la tarjeta de prenda */
.enlace-tienda {
  font: inherit;
  color: inherit;
  padding: 0;
  text-align: left;
  border-bottom: 1px solid var(--borde);
  transition: border-color var(--transicion), color var(--transicion);
}

.enlace-tienda:hover {
  border-bottom-color: var(--texto);
  color: var(--texto);
}

.prenda__acciones { display: flex; gap: var(--e3); margin-top: 0.5rem; }
.prenda__acciones .btn {
  flex: 1;
  min-height: 40px;
  padding: 0.62rem 0.7rem;
  font-size: var(--t-xs);
  border-radius: 9px;
}

.prenda__acciones .btn--linea {
  background: rgba(140, 47, 67, 0.04);
  border-color: rgba(140, 47, 67, 0.18);
}

#catalogo .seccion__cabeza {
  padding-bottom: var(--e4);
  margin-bottom: var(--e4);
  border-bottom: 1px solid var(--borde);
}

#catalogo .seccion__titulo {
  max-width: 20ch;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 0.96;
}

#catalogo .seccion__texto {
  max-width: 62ch;
  font-size: var(--t-sm);
  line-height: 1.5;
  margin-top: var(--e2);
}

#catalogo .filtros {
  background: color-mix(in srgb, var(--superficie) 92%, var(--papel));
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e5);
}

#catalogo .filtros__fila { gap: var(--e2); }
#catalogo .filtros__pie { margin-top: var(--e2); padding-top: var(--e2); }
.filtros__toggle { display: none; }
#catalogo .chip { padding: 0.28rem 0.6rem; }

.vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--e8) var(--e5);
  border: 2px dashed var(--borde);
}

.vacio__titulo { font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--e2); }
.vacio__texto { color: var(--texto-tenue); margin-bottom: var(--e5); }

/* ---------- 11. RUTAS ---------- */
.rutas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: var(--e4);
}

.ruta {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  text-align: left;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.ruta:hover { transform: translateY(-3px); box-shadow: var(--sombra-flotante); }

.ruta__nombre { font-family: var(--display); font-size: var(--t-lg); }

.ruta__desc { font-size: var(--t-sm); color: var(--texto-tenue); }

.ruta__datos {
  display: flex;
  gap: var(--e4);
  flex-wrap: wrap;
  border-top: 1px dashed var(--borde);
  padding-top: var(--e3);
  margin-top: auto;
}

.ruta__dato { display: flex; flex-direction: column; }

.ruta__dato-valor {
  font-family: var(--dato);
  font-size: var(--t-md);
  font-weight: 700;
}

.ruta__dato-etq {
  font-family: var(--dato);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
}

/* ---------- 11b. DIRECTORIO DE TIENDAS ---------- */
.tiendas {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--e4);
}

@media (max-width: 720px) {
  .tiendas { grid-template-columns: minmax(0, 1fr); }
}

.tienda {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  text-align: left;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.tienda:hover { transform: translateY(-3px); box-shadow: var(--sombra-flotante); }

.tienda__foto-wrap {
  position: relative;
  display: block;
  height: 150px;
  margin: calc(var(--e5) * -1) calc(var(--e5) * -1) var(--e2);
  overflow: hidden;
  background: var(--papel);
}

.tienda__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 420ms cubic-bezier(0.2, 0, 0.2, 1), filter 420ms ease;
}

.tienda:hover .tienda__foto {
  transform: scale(1.05);
  filter: saturate(1.08);
}

.tienda__foto-etiqueta {
  position: absolute;
  left: var(--e3);
  bottom: var(--e3);
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 100px;
  background: #e07b26cf;
  color: var(--crema);
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tienda__foto-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--tinta);
  font-family: var(--display);
  font-size: 3.5rem;
}

.tienda__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
}

.tienda__nombre {
  font-family: var(--display);
  font-size: var(--t-md);
  font-stretch: 88%;
  line-height: 1.25;
}

.tienda__insignia {
  font-family: var(--dato);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--etiqueta);
  color: var(--tinta);
  border: 1.5px solid var(--tinta);
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.tienda__dato {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  line-height: 1.5;
}

.tienda__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  border-top: 1px dashed var(--borde);
  padding-top: var(--e3);
  margin-top: auto;
}

.tienda__cifra { display: flex; flex-direction: column; min-width: 0; }

.tienda__cifra-valor {
  font-family: var(--dato);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.2;
}

.tienda__cifra-etq {
  font-family: var(--dato);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
}

/* Miniaturas de las prendas dentro de la tarjeta de tienda */
.tienda__muestra {
  display: flex;
  gap: var(--e1);
  align-items: center;
}

.tienda__muestra .silueta { width: 34px; max-width: 34px; }

.tienda__mas {
  font-family: var(--dato);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  margin-left: var(--e1);
}

/* Cabecera de la vitrina de una tienda, dentro del modal */
.vitrina__cabeza {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--papel);
  padding: var(--e4);
  margin-bottom: var(--e5);
}

[data-tema='oscuro'] .vitrina__cabeza { background: #2B1F23; }

/* ---------- 13. AFILIACIÓN ---------- */
.afiliacion__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e7);
  align-items: start;
}

.beneficios { list-style: none; padding: 0; display: grid; gap: var(--e4); }

.beneficio {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding-bottom: var(--e4);
  border-bottom: 1px dashed var(--borde);
}

.beneficio:last-child { border-bottom: none; padding-bottom: 0; }

.beneficio__marca {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  background: var(--etiqueta);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 50%;
  font-family: var(--dato);
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta);
}

.beneficio__titulo { font-weight: 700; margin-bottom: 2px; }
.beneficio__texto { font-size: var(--t-sm); color: var(--texto-tenue); }

.formulario {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: var(--e5);
  box-shadow: var(--sombra-suave);
}

.campo { margin-bottom: var(--e4); }

.campo__etiqueta {
  display: block;
  font-family: var(--dato);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: var(--e2);
  font-weight: 700;
}

.campo__control {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  padding: 0.65rem var(--e3);
  font-size: var(--t-sm);
}

.campo__control:focus {
  outline: none;
  border-color: var(--borde-fuerte);
  box-shadow: 0 0 0 3px rgba(175, 194, 219, 0.4);
}

/* Toggle "mostrar/ocultar contraseña": lo inyecta JS alrededor de cualquier
   <input type="password">. El ojito queda dentro del campo, a la derecha. */
.campo-clave {
  position: relative;
  display: block;
}
.campo-clave > .campo__control { padding-right: 3rem; }
.campo-clave__ojo {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.campo-clave__ojo:hover { background: var(--papel); color: var(--tinta); }
.campo-clave__ojo:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}
.campo-clave__ojo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Dos SVG dentro del botón:
   - "ojo tachado" (campo-clave__oculto): se ve cuando la contraseña está
     oculta (estado inicial). Al tocarlo, se MOSTRARÁ la contraseña.
   - "ojo abierto" (campo-clave__visible): se ve cuando la contraseña está
     visible. Al tocarlo, se OCULTARÁ. */
.campo-clave__ojo .campo-clave__visible { display: none; }
.campo-clave__ojo[aria-pressed='true'] .campo-clave__visible { display: block; }
.campo-clave__ojo[aria-pressed='true'] .campo-clave__oculto { display: none; }

.campo__ayuda {
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  margin-top: var(--e1);
}

textarea.campo__control { resize: vertical; min-height: 84px; }

.aviso {
  border: 2px solid var(--verde);
  background: rgba(74, 115, 64, 0.09);
  padding: var(--e4);
  margin-bottom: var(--e4);
  font-size: var(--t-sm);
}

/* ---------- 14. MODALES ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--e4);
  background: rgba(40, 16, 20, 0.72);
  backdrop-filter: blur(3px);
}

.modal[data-abierto='si'] { display: flex; }

.modal__caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  width: min(680px, 100%);
  max-height: calc(100dvh - 2rem);
  overscroll-behavior: contain;
  overflow-y: auto;
  box-shadow: var(--sombra-flotante);
  animation: entrada 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes entrada {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.modal__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e5);
  padding: var(--e5) var(--e6);
  border-bottom: 2px solid var(--borde-fuerte);
}

.modal__titulo { font-family: var(--display); font-size: var(--t-lg); }
.modal__cuerpo { padding: var(--e5) var(--e6); }

.cerrar-btn {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  font-size: 17px;
  flex-shrink: 0;
}

.cerrar-btn:hover { border-color: var(--borde-fuerte); }

/* Código de apartado */
.codigo {
  text-align: center;
  border: 2px dashed var(--borde-fuerte);
  padding: var(--e5);
  margin-bottom: var(--e4);
  background: var(--papel);
}

[data-tema='oscuro'] .codigo { background: #2B1F23; }

.codigo__valor {
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  letter-spacing: 0.09em;
  line-height: 1.2;
}

.codigo__nota {
  font-family: var(--dato);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--texto-tenue);
  margin-top: var(--e2);
}

.detalle-lista { display: grid; gap: var(--e3); margin-bottom: var(--e5); }

.detalle-fila {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  font-size: var(--t-sm);
  padding-bottom: var(--e2);
  border-bottom: 1px dashed var(--borde);
}

.detalle-fila dt { color: var(--texto-tenue); }
.detalle-fila dd { margin: 0; font-weight: 600; text-align: right; }

/* Lista de apartados y favoritos en modal */
.lista-modal { display: grid; gap: var(--e3); }

.item-lista {
  display: flex;
  gap: var(--e3);
  align-items: center;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e2);
  background: var(--superficie);
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}

.item-lista:hover {
  border-color: var(--etiqueta-oscura);
  box-shadow: var(--sombra-suave);
  transform: translateY(-1px);
}

.item-lista__visual {
  position: relative;
  width: 74px;
  height: 82px;
  flex: 0 0 74px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--papel);
}

.item-lista__foto { width: 100%; height: 100%; object-fit: cover; }
.item-lista__fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.item-lista__fallback .silueta { width: 100%; height: 100%; transform: none; }

.item-lista__emoji { font-size: 1.9rem; flex-shrink: 0; }
.item-lista__info { flex: 1; min-width: 0; }
.item-lista__nombre { font-weight: 700; font-size: var(--t-sm); }
.item-lista__meta { font-size: var(--t-xs); color: var(--texto-tenue); }

.guardados-intro { margin-bottom: var(--e4); color: var(--texto-tenue); font-size: var(--t-sm); }
.guardados-lista { display: grid; gap: var(--e4); }
.guardado-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--e3);
  padding: 0.55rem;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: linear-gradient(120deg, var(--papel), var(--superficie));
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.guardado-item:hover { border-color: var(--tinta); box-shadow: var(--sombra-suave); transform: translateY(-2px); }
.guardado-item__foto { width: 88px; height: 116px; overflow: hidden; border-radius: 8px; background: var(--papel); }
.guardado-item__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 360ms ease; }
.guardado-item__foto:hover img { transform: scale(1.06); }
.guardado-item__contenido { min-width: 0; display: grid; gap: 0.25rem; align-content: center; }
.guardado-item__encabezado { display: flex; align-items: flex-start; gap: 0.45rem; justify-content: space-between; }
.guardado-item__nombre { min-width: 0; padding: 0; color: var(--texto); font-size: var(--t-sm); font-weight: 800; line-height: 1.25; text-align: left; }
.guardado-item__nombre:hover { color: var(--tinta); text-decoration: underline; }
.guardado-item__descuento { flex: 0 0 auto; padding: 0.28rem 0.48rem; border-radius: 999px; background: var(--urgente); color: var(--crema); font-family: var(--dato); font-size: 0.75rem; font-weight: 700; }
.guardado-item__tienda, .guardado-item__talla { color: var(--texto-tenue); font-size: var(--t-xs); }
.guardado-item__precio { color: var(--texto-tenue); font-family: var(--dato); font-size: var(--t-xs); }
.guardado-item__precio strong { color: var(--urgente); font-size: var(--t-md); }
.guardado-item__acciones { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.guardado-item__acciones .btn { min-height: 36px; padding: 0.5rem 0.75rem; font-size: 0.75rem; }
.guardado-item__acciones .btn--primario { color: var(--crema); }

.item-lista__codigo {
  font-family: var(--dato);
  font-size: var(--t-xs);
  font-weight: 700;
  background: var(--etiqueta);
  color: var(--tinta);
  padding: 2px 7px;
  border-radius: var(--radio);
  white-space: nowrap;
}

/* Panel de tienda */
.panel-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }

.panel-tabla th,
.panel-tabla td {
  text-align: left;
  padding: var(--e3) var(--e2);
  border-bottom: 1px solid var(--borde);
}

.panel-tabla th {
  font-family: var(--dato);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
  border-bottom: 2px solid var(--borde-fuerte);
}

.panel-tabla td.num { font-family: var(--dato); text-align: right; }

.panel-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--e4);
  margin-bottom: var(--e5);
  padding-bottom: var(--e4);
  border-bottom: 2px solid var(--borde-fuerte);
}

/* Dentro de espacios estrechos las cifras se ajustan para no desbordarse */
.panel-resumen .cifra__valor {
  font-size: clamp(1.05rem, 4.4vw, 1.5rem);
  font-stretch: 74%;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.panel-resumen .cifra__etiqueta { line-height: 1.35; }

.tabla-envoltura { overflow-x: auto; }

/* ---------- 15. AVISO FLOTANTE ---------- */
/* Estilos del aviso: ver la sección "Avisos" al final. */

/* ---------- 16. PIE ---------- */
.pie {
  background: var(--tinta);
  color: var(--crema);
  padding: var(--e7) 0 var(--e5);
}

[data-tema='oscuro'] .pie { background: #140D0F; }

.pie__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--e6);
  padding-bottom: var(--e5);
  border-bottom: 1px solid rgba(243, 233, 220, 0.16);
}

.pie__titulo {
  font-family: var(--dato);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.62;
  margin-bottom: var(--e3);
}

.pie__lista { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.pie__lista a { font-size: var(--t-sm); text-decoration: none; opacity: 0.86; }
.pie__lista a:hover { opacity: 1; text-decoration: underline; }

.pie__texto { font-size: var(--t-sm); opacity: 0.72; max-width: 38ch; }

.pie__base {
  padding-top: var(--e4);
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  font-family: var(--dato);
  font-size: var(--t-xs);
  opacity: 0.6;
}

/* ---------- 17. ANIMACIÓN DE ENTRADA ---------- */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0, 0.2, 1);
}

.revelar[data-visible='si'] { opacity: 1; transform: none; }

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1fr); gap: var(--e6); }
  .comerciante__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afiliacion__grid { grid-template-columns: 1fr; gap: var(--e6); }
  .pie__grid { grid-template-columns: 1fr 1fr; }
  .paso { border-right: none; border-bottom: 1px dashed var(--borde); }
  .paso:last-child { border-bottom: none; }
}

@media (max-width: 860px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--fondo);
    border-bottom: 2px solid var(--borde-fuerte);
    padding: var(--e3) var(--e5) var(--e5);
  }

  .nav[data-abierto='si'] { display: flex; }

  .nav__link {
    padding: var(--e3) 0;
    border-bottom: 1px dashed var(--borde);
  }

  .nav__link:hover { border-bottom-color: var(--borde); }

  .menu-btn { display: grid; }

  /* En pantallas pequeñas la barra sólo conserva las acciones esenciales. */
  #btn-buscar { margin-left: auto; }
  .cabecera__fila { gap: var(--e3); }
  .icono-btn { width: 34px; height: 46px; }
  .icono-btn .icono-svg { width: 28px; height: 28px; }

  .seccion { padding: var(--e7) 0; }
  .hero { padding: var(--e7) 0 var(--e6); }
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.86fr);
    align-items: center;
    gap: var(--e4);
  }
  .hero__intro { order: 1; }
  .hero__visual { order: 2; }
  .hero__titulo { max-width: none; font-size: clamp(2.6rem, 7vw, 4.2rem); }
  .hero__texto { max-width: 40ch; }
  .comerciante__cifras { gap: var(--e4) var(--e3); }
  .filtros { position: static; margin-bottom: var(--e4); }
  #catalogo .seccion__cabeza { margin-bottom: var(--e3); }
  #catalogo .seccion__texto { font-size: 0.78rem; max-width: 48ch; }
  #catalogo .filtros__fila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #catalogo .buscador { grid-column: 1 / -1; }
  #catalogo .select { width: 100%; min-width: 0; padding: 0.55rem 0.65rem; }
  #catalogo .filtros__pie { align-items: flex-start; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: var(--e4); }
  .prenda__emoji { font-size: 3.2rem; }
  .prenda__cuerpo { padding: var(--e3); }
  .pie__grid { grid-template-columns: 1fr; }
  .contenedor { padding-inline: var(--e4); }
}

@media (max-width: 600px) {
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--e6); }
  .hero__visual { min-width: 0; }
  .hero__titulo { font-size: clamp(3.4rem, 16vw, 5.5rem); }
  #catalogo.seccion { padding-top: var(--e6); }
  #catalogo .seccion__titulo { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  #catalogo .filtros { padding: 0.7rem; }
  #catalogo .filtros__toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 42px;
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--borde-fuerte);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--texto);
    font-size: var(--t-sm);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: all var(--transicion);
  }
  #catalogo .filtros__toggle:hover {
    border-color: var(--texto);
    background: color-mix(in srgb, var(--superficie) 85%, var(--texto) 15%);
  }
  .filtros__toggle-icono { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; }
  .filtros__toggle-icono svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .filtros__toggle-flecha { margin-left: auto; font-size: 1.2rem; transition: transform var(--transicion); }
  .filtros__toggle[aria-expanded='true'] { border-color: var(--tinta); background: var(--papel); }
  .filtros__toggle[aria-expanded='true'] .filtros__toggle-flecha { transform: rotate(180deg); }
  #catalogo .filtros__fila[data-filtros-abiertos='no'] .select { display: none; }
  #catalogo .filtros__fila[data-filtros-abiertos='no'] { grid-template-rows: auto; }
  #catalogo .filtros__pie { display: block; }
  #catalogo .resultado-cuenta { margin-top: var(--e3); }
  .modal { padding: 0.6rem; }
  .modal__caja { max-height: 94vh; }
  .modal__cabeza { padding: var(--e4); }
  .modal__cuerpo { padding: var(--e4); }
  .item-lista__visual { width: 62px; height: 72px; flex-basis: 62px; }
  .item-lista__meta { line-height: 1.35; }
  .item-lista > .btn { padding-inline: 0.6rem !important; }
}

@media (min-width: 861px) and (max-width: 1080px) {
  .nav { gap: var(--e3); }
  .nav__link { font-size: var(--t-xs); }
  .cabecera__fila { gap: var(--e3); }
  .cabecera__acciones { gap: var(--e1); }
}

@media (max-width: 480px) {
  .cabecera__fila { height: 74px; padding-inline: 12px; }
  .cabecera__acciones { gap: 0.8rem; }
  .icono-btn { width: 32px; height: 44px; }
  .marca__palabra { height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
}

@media print {
  .cabecera, .filtros, .modal, .brindis, .prenda__acciones { display: none !important; }
}

/* ---------- 19. REFINAMIENTO ----------
   Etiquetas en tipo de lectura, no en mayúsculas espaciadas: se leen mejor
   y la página se siente menos de plantilla. El monoespaciado queda sólo
   para precios y códigos. */
.rotulo,
.cifra__etiqueta,
.ruta__dato-etq,
.tienda__cifra-etq,
.campo__etiqueta,
.pie__titulo,
.prenda__marca {
  font-family: var(--cuerpo);
  text-transform: none;
  letter-spacing: 0;
}

.rotulo { font-size: var(--t-sm); font-weight: 600; color: var(--etiqueta-oscura); margin-bottom: var(--e2); }
[data-tema='oscuro'] .rotulo { color: var(--etiqueta); }
.cifra__etiqueta, .ruta__dato-etq, .tienda__cifra-etq { font-size: var(--t-xs); }
.campo__etiqueta { font-size: var(--t-sm); font-weight: 600; }
.pie__titulo { font-size: var(--t-sm); font-weight: 700; color: var(--crema); opacity: 0.7; }
.prenda__marca { font-size: var(--t-xs); font-weight: 600; }

/* Títulos de sección con más aire respecto al texto que los acompaña */
.seccion__titulo { margin-bottom: var(--e3); }
.seccion__cabeza { margin-bottom: var(--e7); }

main {
  display: flex;
  flex-direction: column;
}
/* La portada llena la pantalla sin scroll en escritorio y puede bajar en
   celular: lo resuelve "Alto de las páginas" al final del archivo. */


/* ---------- 20. OFERTAS Y LLAMADOS A LA ACCIÓN ----------
   Patrón de tiendas de moda en línea: la oferta más fuerte se anuncia antes
   del menú, la portada muestra prendas reales y no sólo un mensaje, y en cada
   tarjeta el precio rebajado y el botón de apartar son lo que más pesa. */
.promo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  padding: 0.7rem var(--e5);
  background: linear-gradient(90deg, var(--urgente), #d87147);
  color: #fff;
  font-size: var(--t-sm);
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.promo strong { font-weight: 800; }
.promo__texto {
  font-weight: 600;
  opacity: 0.96;
}
.promo__accion {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
  transition: all var(--transicion);
  letter-spacing: 0.3px;
}
.promo:hover .promo__accion {
  text-underline-offset: 6px;
  transform: translateX(2px);
}

@media (max-width: 600px) { .promo__extra { display: none; } }

.btn--grande { padding: 0.95rem 1.8rem; font-size: var(--t-base); }

.ofertas { padding-top: clamp(1rem, 2vw, 1.5rem); }
.ofertas__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin-bottom: 0.9rem;
}
.ofertas__titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-lg);
  font-stretch: 88%;
  letter-spacing: -0.02em;
}
.ofertas__todas { font-weight: 700; color: var(--etiqueta-oscura); text-underline-offset: 3px; }
[data-tema='oscuro'] .ofertas__todas { color: var(--etiqueta); }
@media (max-width: 720px) {
  .ofertas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
  .ofertas__rejilla .prenda__temporada,
  .ofertas__rejilla .prenda__tienda,
  .ofertas__rejilla .proxima-rebaja { display: none; }
}

@media (max-width: 760px) {
  .rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .prenda {
    border-radius: 10px;
  }

  .prenda__cuerpo {
    padding: 0.9rem 0.85rem 1rem;
    gap: 0.6rem;
  }

  .prenda__nombre {
    font-size: 0.98rem;
    line-height: 1.3;
  }

  .precio-nuevo {
    font-size: 1.1rem;
  }

  .prenda__acciones {
    gap: 0.6rem;
  }
}

/* Tarjeta: el descuento debe ser un detalle de apoyo, no el foco visual principal. */
.precio-nuevo { color: var(--urgente); }
[data-tema='oscuro'] .precio-nuevo { color: #F08A68; }
.prenda__acciones [data-comprar] { flex: 2; font-size: var(--t-sm); }

/* ---------- 21. COMPRA EN LÍNEA Y PAGOS ---------- */
.prenda__nombre-btn {
  font: inherit;
  color: inherit;
  text-align: left;
  padding: 0;
}
.prenda__nombre-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

.compra__resumen {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding-bottom: var(--e4);
  margin-bottom: var(--e4);
  border-bottom: 1px solid var(--borde);
}
.compra__resumen > div { flex: 1; min-width: 0; }
.compra__precio { font-family: var(--display); font-size: var(--t-lg); color: var(--urgente); }

.opciones { border: 0; padding: 0; min-width: 0; }
.opciones__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--e2); }
.opciones > .opcion + .opcion { margin-top: var(--e2); }

.opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.opcion:hover { border-color: var(--borde-fuerte); }
.opcion:has(input:checked) { border-color: var(--tinta); background: var(--papel); box-shadow: inset 0 0 0 1px var(--tinta); }
.opcion input { margin-top: 3px; accent-color: var(--tinta); }
.opcion span { display: grid; gap: 2px; font-size: var(--t-sm); }
.opcion small { color: var(--texto-tenue); font-size: var(--t-xs); }
.opcion--compacta { align-items: center; padding: 0.6rem var(--e3); }
.opcion--compacta input { margin-top: 0; }
[data-tema='oscuro'] .opcion:has(input:checked) { border-color: var(--etiqueta); box-shadow: inset 0 0 0 1px var(--etiqueta); }

.compra__totales { margin: var(--e4) 0; }
.compra__total dt, .compra__total dd { font-weight: 800; font-size: var(--t-md); }
.campo__error { color: var(--urgente); font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--e3); }

.pago {
  border: 1px solid var(--borde);
  border-left: 4px solid var(--tinta);
  border-radius: 8px;
  padding: var(--e4);
  margin: var(--e4) 0 var(--e3);
  background: var(--papel);
}
[data-tema='oscuro'] .pago { border-left-color: var(--etiqueta); }
.pago__titulo { font-weight: 800; font-size: var(--t-md); margin-bottom: var(--e2); }
.pago__texto { font-size: var(--t-sm); color: var(--texto-tenue); }
.pago__dato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin: var(--e3) 0;
  padding: var(--e2) var(--e2) var(--e2) var(--e4);
  background: var(--superficie);
  border: 1px dashed var(--borde-fuerte);
  border-radius: 6px;
}
.pago__valor { font-family: var(--dato); font-size: var(--t-lg); font-weight: 700; letter-spacing: 0.02em; }
.pago__dato .btn { min-height: 36px; padding: 0.4rem 0.9rem; }

.lista-modal__titulo { font-size: var(--t-sm); font-weight: 800; margin: var(--e4) 0 var(--e2); }
.lista-modal__titulo:first-child { margin-top: 0; }

/* ---------- 22. QR DE PAGO ---------- */
.pago__qr {
  display: grid;
  justify-items: center;
  gap: var(--e2);
  margin: var(--e3) 0;
  text-align: center;
}
.pago__qr img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  background: #fff;
  padding: 8px;
  border: 1px solid var(--borde);
  border-radius: 8px;
}
.pago__qr figcaption { font-size: var(--t-xs); color: var(--texto-tenue); max-width: 32ch; }

.pago-datos { display: grid; gap: var(--e2); }
.pago-datos [hidden] { display: none; }
.campo__sub { font-size: var(--t-sm); font-weight: 600; margin-top: var(--e2); }
.campo__sub:first-child { margin-top: 0; }

.subir-qr {
  position: relative;
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: var(--e4);
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: 8px;
  background: var(--superficie);
  cursor: pointer;
  text-align: center;
  font-size: var(--t-sm);
  font-weight: 700;
}
.subir-qr small { font-weight: 400; color: var(--texto-tenue); font-size: var(--t-xs); }
.subir-qr:hover { background: var(--papel); }
.subir-qr:focus-within { outline: 3px solid var(--hilo); outline-offset: 2px; }
.subir-qr input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.subir-qr__vista img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  margin-top: var(--e2);
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 6px;
}

/* ---------- 23. CARRUSEL DE LA PORTADA ---------- */
.carrusel__foto { position: relative; display: block; aspect-ratio: 4 / 5; margin-bottom: 6px; background: var(--papel); }
.carrusel__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carrusel__sello {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--urgente);
  color: #fff;
  font-weight: 800;
  font-size: var(--t-sm);
}


.carrusel__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: var(--e3); }
.carrusel__nota { font-size: var(--t-sm); color: var(--texto-tenue); }
.carrusel__controles { display: flex; gap: var(--e2); }
.carrusel__btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto);
  transition: background var(--transicion), color var(--transicion);
}
.carrusel__btn:hover { background: var(--tinta); color: var(--crema); }
.carrusel__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* ---------- 24. ÍCONOS DE LA CABECERA ----------
   Todos dibujados en la misma cuadrícula de 24 y con el mismo trazo (formas
   basadas en Lucide, licencia ISC), para que pesen igual. Cada botón es un
   círculo de 40 px: fácil de tocar y con fondo suave al pasar el mouse. */
.cabecera__acciones { gap: 4px; }

.icono-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background var(--transicion), color var(--transicion);
}
.icono-btn:hover { background: var(--papel); color: var(--tinta); transform: none; }
[data-tema='oscuro'] .icono-btn { color: var(--texto); }
[data-tema='oscuro'] .icono-btn:hover { background: var(--superficie); }
.icono-btn:focus-visible { border-radius: 50%; }

.icono-btn .icono-svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

.contador-burbuja {
  top: 3px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  font-size: 9.5px;
  line-height: 16px;
  box-shadow: 0 0 0 2px var(--fondo);
}

@media (max-width: 480px) {
  .cabecera__acciones { gap: 0; }
  .icono-btn { width: 40px; height: 40px; }
}

/* ---------- 25. REGISTRO DE TIENDAS ---------- */
.formulario__titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-md);
  margin: var(--e5) 0 var(--e3);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
}
.formulario__titulo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.consentimientos { display: grid; gap: var(--e3); }
.consentimiento {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  font-size: var(--t-sm);
  line-height: 1.5;
  cursor: pointer;
}
.consentimiento input { margin-top: 4px; accent-color: var(--tinta); flex-shrink: 0; width: 18px; height: 18px; }
.consentimiento details { margin-top: var(--e1); }
.consentimiento summary { cursor: pointer; font-weight: 600; color: var(--etiqueta-oscura); }
.consentimiento details p { margin-top: var(--e2); color: var(--texto-tenue); font-size: var(--t-xs); }

.campo__control[aria-invalid='true'] { border-color: var(--urgente); box-shadow: 0 0 0 1px var(--urgente); }
.campo .campo__error, .consentimiento .campo__error, fieldset .campo__error { margin: var(--e1) 0 0; }
.formulario__error { text-align: center; margin: var(--e3) 0; }

/* ---------- 26. FOTOS DE PRENDAS ---------- */
.fotos-prenda { list-style: none; padding: 0; margin: 0 0 var(--e3); display: grid; gap: var(--e3); }
.foto-revision {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--borde-fuerte);
  border-radius: 8px;
  background: var(--superficie);
}
.foto-revision--buena { border-left-color: var(--verde); }
.foto-revision--mejorable { border-left-color: var(--aviso); }
.foto-revision--rechazada { border-left-color: var(--urgente); }
.foto-revision__img { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--papel); }
.foto-revision__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-revision--rechazada .foto-revision__img img { opacity: 0.7; }
.foto-revision__portada {
  position: absolute; left: 4px; bottom: 4px;
  font-size: 10px; font-weight: 700;
  background: var(--tinta); color: var(--crema);
  padding: 1px 6px; border-radius: 999px;
}
.foto-revision__cargando {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--papel), var(--superficie), var(--papel));
  background-size: 200% 100%;
  animation: cargando 1.2s linear infinite;
}
@keyframes cargando { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .foto-revision__cargando { animation: none; } }
.foto-revision__estado { font-weight: 800; font-size: var(--t-sm); margin-bottom: 4px; }
.foto-revision__lista { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 3px; }
.revision { display: flex; gap: 6px; font-size: var(--t-xs); line-height: 1.4; color: var(--texto-tenue); }
.revision span { flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; margin-top: 1px; }
.revision--ok span { background: var(--verde); }
.revision--aviso span { background: var(--aviso); }
.revision--error span { background: var(--urgente); }
.revision--error { color: var(--texto); }
.subir-foto { margin-bottom: var(--e2); }
.pp-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.prenda--vista { max-width: 300px; margin: 0 auto; }

.foto-revision .enlace-tienda { font-size: var(--t-xs); }

/* ---------- 27. MAPA DE TIENDAS ---------- */
.mapa-tiendas {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  height: 520px;
  margin-bottom: var(--e7);
  border: 1px solid var(--borde);
  border-radius: 14px;
  overflow: hidden;
  background: var(--superficie);
  box-shadow: 0 18px 40px -30px rgba(140, 47, 67, 0.5);
}
.mapa-tiendas__lista {
  list-style: none;
  margin: 0;
  padding: var(--e2);
  overflow-y: auto;
  border-right: 1px solid var(--borde);
}
.mapa-tienda {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: var(--e3);
  border-radius: 10px;
  transition: background var(--transicion);
}
.mapa-tienda:hover, .mapa-tienda[aria-current='true'] { background: var(--papel); }
.mapa-tienda[aria-current='true'] { box-shadow: inset 3px 0 0 var(--tinta); }
.mapa-tienda__nombre { font-weight: 800; font-size: var(--t-base); }
.mapa-tienda__meta { font-size: var(--t-xs); color: var(--texto-tenue); }
.mapa-tienda__datos { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: var(--t-xs); font-weight: 600; }
.mapa-tienda__rebaja { color: var(--urgente); }
.mapa-tiendas__lista li + li { border-top: 1px solid var(--borde); }

.mapa-tiendas__mapa { position: relative; min-height: 0; z-index: 0; background: var(--papel); }
.mapa-tiendas__aviso { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--e5); text-align: center; color: var(--texto-tenue); font-size: var(--t-sm); }
[data-tema='oscuro'] .mapa-tiendas__mapa .leaflet-tile-pane { filter: brightness(0.75) contrast(1.1) saturate(0.8); }

/* Marcador: bolsa blanca sobre globo verde, con el nombre al lado */
.pin-tienda { background: none; border: 0; }
.pin-tienda__globo {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--tinta);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.pin-tienda__globo svg { width: 17px; height: 17px; transform: rotate(45deg); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pin-tienda__nombre {
  display: none;
  position: absolute; left: 38px; top: 6px;
  white-space: nowrap;
  font: 700 12px/1.2 var(--cuerpo);
  color: #233344;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  pointer-events: none;
}
.leaflet-container { font-family: var(--cuerpo); }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.mapa-popup { display: grid; gap: 3px; font-size: 13px; }
.mapa-popup strong { font-size: 15px; color: #233344; }
.mapa-popup__acciones { display: flex; gap: 6px; margin-top: 6px; }
.mapa-popup__acciones .btn { min-height: 34px; padding: 0.35rem 0.8rem; font-size: 12px; box-shadow: none; }
.mapa-popup__acciones .btn--primario { color: #FBF4EA; }

@media (max-width: 720px) {
  .mapa-tiendas { grid-template-columns: 1fr; grid-template-rows: 320px auto; height: auto; }
  .mapa-tiendas__mapa { order: -1; }
  .mapa-tiendas__lista { border-right: 0; border-top: 1px solid var(--borde); max-height: 360px; }
}
.mapa--nombres .pin-tienda__nombre { display: block; }

/* ---------- Automatizaciones ---------- */


/* Abierta ahora / cerrada, calculado con la hora de Tunja */
.abierta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-xs);
  font-weight: 600;
  /* Puede partirse: "Cerrada · abre mañana a las 9:30" no cabe en una
     línea en pantallas angostas. */
  max-width: 100%;
}
.abierta::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.abierta--si { color: var(--verde); }
.abierta--no { color: var(--texto-tenue); }
[data-tema='oscuro'] .abierta--si { color: var(--etiqueta); }

/* Recordar los datos del comprador */
.recordar {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  margin: 0 0 var(--e4);
  cursor: pointer;
}
.recordar input { margin-top: 2px; accent-color: var(--tinta); }

/* ---------- Tarjeta de prenda minimalista ----------
   Sólo lo esencial: foto con descuento, nombre, precio y acciones. La tienda,
   las existencias y la próxima rebaja están en el detalle de la prenda. */
.prenda { border-color: transparent; background: transparent; }
.prenda:hover { transform: none; box-shadow: none; }

.prenda__figura {
  border: 0;
  border-radius: var(--radio);
  background: var(--papel);
}

.prenda__sello,
.prenda__sello--alto {
  top: 10px;
  left: 10px;
  min-width: 0;
  max-width: none;
  padding: 3px 8px;
  background: #fff;
  color: var(--urgente);
  border: 0;
  box-shadow: none;
  font-family: var(--cuerpo, inherit);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
}

.favorito-btn { top: 8px; right: 8px; width: 34px; height: 34px; box-shadow: none; }
.favorito-btn__icono { width: 17px; height: 17px; }

.prenda__cuerpo { padding: var(--e3) 2px 0; gap: 4px; }

.prenda__nombre { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.prenda__nombre-btn { color: var(--texto); }

.prenda__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-bottom: var(--e3);
}
.prenda__precio-nuevo { font-size: var(--t-md); font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.prenda__precio-viejo { font-size: var(--t-xs); color: var(--texto-tenue); }

.prenda__acciones { margin-top: auto; gap: 6px; }
.prenda__acciones .btn,
.prenda__acciones [data-comprar] {
  flex: 1;
  min-height: 38px;
  padding: 0.45rem 0.6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  border-radius: 999px;
  box-shadow: none;
  transform: none;
}
.prenda__acciones .btn--primario { border-color: var(--tinta); }
.prenda__acciones .btn--linea { border-color: var(--borde-fuerte); }
[data-tema='oscuro'] .prenda__acciones .btn--primario { border-color: var(--etiqueta); box-shadow: none; }

/* ---------- Página de una prenda ---------- */
.prenda__foto[data-detalle] { cursor: pointer; }

.ficha-vista { padding-top: var(--e5); }

.ficha__volver {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto-tenue);
  padding: 6px 0;
  margin-bottom: var(--e4);
}
.ficha__volver:hover { color: var(--texto); }

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.ficha__foto {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: 14px;
  overflow: hidden;
  background: var(--papel);
  display: grid;
  place-items: center;
}
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha__foto .prenda__sello { top: 14px; left: 14px; font-size: 0.8rem; padding: 4px 10px; }

.ficha__info { display: flex; flex-direction: column; gap: var(--e2); padding-top: var(--e2); }

.ficha__marca { font-size: var(--t-xs); color: var(--texto-tenue); font-weight: 600; letter-spacing: 0.02em; }
.ficha__nombre {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.ficha__nombre:focus { outline: none; }

.ficha__precio { display: flex; align-items: baseline; gap: 10px; margin-top: var(--e2); }
.ficha__precio-nuevo { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.ficha__precio-viejo { font-size: var(--t-sm); color: var(--texto-tenue); }
.ficha__ahorro { font-size: var(--t-xs); color: var(--verde); font-weight: 600; }
[data-tema='oscuro'] .ficha__ahorro { color: var(--etiqueta); }

.ficha__bloque { margin-top: var(--e4); }
.ficha__rotulo { font-size: var(--t-xs); font-weight: 600; color: var(--texto-tenue); margin-bottom: var(--e2); }
.ficha__tallas { display: flex; flex-wrap: wrap; gap: 8px; }
.talla {
  min-width: 46px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  background: transparent;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.talla:hover { background: var(--papel); }
.talla[aria-checked='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
[data-tema='oscuro'] .talla[aria-checked='true'] { background: var(--etiqueta); border-color: var(--etiqueta); color: var(--tinta); }
.talla:focus-visible { outline: 3px solid var(--hilo); outline-offset: 2px; }

.ficha__stock { font-size: var(--t-xs); font-weight: 600; margin-top: var(--e2); }
.ficha__stock--bajo { color: var(--urgente); }
.ficha__stock--medio { color: var(--texto-tenue); }

.ficha__acciones { display: flex; align-items: center; gap: 8px; margin-top: var(--e4); }
.ficha__acciones .btn {
  flex: 1;
  min-height: 48px;
  border-radius: 999px;
  box-shadow: none;
  transform: none;
  font-weight: 600;
}
.ficha__acciones .btn--primario { flex: 1.4; border-color: var(--tinta); }
[data-tema='oscuro'] .ficha__acciones .btn--primario { border-color: var(--etiqueta); box-shadow: none; }
.ficha__fav {
  position: static;
  flex: 0 0 48px;
  width: 48px; height: 48px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--borde-fuerte);
  color: var(--texto);
}
.ficha__fav:hover { background: var(--papel); }

/* Agregar al carrito como bolsa, junto al corazón */
.ficha__bolsa {
  position: relative;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--borde-fuerte);
  color: var(--texto);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}
.ficha__bolsa svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ficha__bolsa:hover:not(:disabled) { background: var(--papel); transform: translateY(-1px); }
.ficha__bolsa:disabled { opacity: 0.45; cursor: not-allowed; }
.ficha__bolsa:focus-visible { outline: 3px solid var(--hilo); outline-offset: 2px; }
.ficha__bolsa-marca {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--crema);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.ficha__bolsa--llena { background: var(--tinta); box-shadow: none; color: var(--crema); }
.ficha__bolsa--llena:hover { background: var(--tinta-suave); }
.ficha__bolsa--llena .ficha__bolsa-marca { background: var(--hilo); color: #2A0F17; }

.ficha__envio { font-size: var(--t-xs); color: var(--texto-tenue); margin-top: var(--e2); }

.ficha__tienda {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e5);
  padding: var(--e4) 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
/* El texto de la tienda debe poder encogerse; si no, una dirección larga
   empuja "Ver tienda" fuera de la pantalla. */
.ficha__tienda > div { min-width: 0; overflow-wrap: anywhere; }
.ficha__tienda-nombre { font-weight: 700; margin-bottom: 2px; }
.ficha__dato { font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.6; }
.ficha__tienda-btn { flex-shrink: 0; min-height: 38px; padding: 0.4rem 0.9rem; font-size: var(--t-xs); border-radius: 999px; }

/* Detalles técnicos plegables para mantener la ficha compacta. */
.ficha__detalles-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  margin-top: var(--e4);
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.ficha__detalles-toggle:hover { border-color: var(--borde-fuerte); }
.ficha__detalles-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transicion);
}
.ficha__detalles-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

/* Ficha técnica del producto, visible al desplegar "Ver detalles". */
.ficha__detalles-titulo {
  margin: var(--e4) 0 var(--e2);
  font-family: var(--display);
  font-stretch: 86%;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  color: var(--texto);
}
.ficha__detalles {
  display: grid;
  font-size: var(--t-sm);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie);
}
.ficha__detalles div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: 0.7rem 0.9rem;
}
.ficha__detalles dt { flex: 0 0 auto; }
.ficha__detalles div + div { border-top: 1px solid var(--borde); }
.ficha__detalles dt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--texto-tenue);
  font-weight: 500;
}
.ficha__detalle-icono {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--tinta);
  opacity: 0.85;
  flex: 0 0 auto;
}
.ficha__detalles dd { min-width: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

/* Valor del color: muestra circular + nombre, para que el cliente vea el
   color sin imaginarlo. */
.ficha__color { display: inline-flex; align-items: center; gap: 0.5rem; }
.ficha__color-muestra {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--muestra, var(--borde));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 22%, transparent), 0 1px 3px rgba(0, 0, 0, 0.18);
  flex: 0 0 auto;
}

.ficha__relacionadas { margin-top: var(--e8); }
.ficha__subtitulo { font-size: var(--t-md); font-weight: 700; margin-bottom: var(--e4); }

@media (max-width: 720px) {
  .ficha { grid-template-columns: 1fr; gap: var(--e4); }
  .ficha-vista { padding-top: var(--e3); }
  .ficha__volver { margin-bottom: var(--e2); }
  .ficha__foto { margin-inline: calc(var(--e5) * -1); border-radius: 0; aspect-ratio: 1 / 1.1; }
  .ficha__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Catálogo sin encabezado: los filtros quedan arriba, cerca de la cabecera */
#catalogo.seccion { padding-top: var(--e5); }

/* Ajustes de la página de prenda: foto más contenida y botón volver */
.ficha__volver {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 14px 0 8px;
  margin-bottom: var(--e4);
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.ficha__volver svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transicion);
}
.ficha__volver:hover { background: var(--papel); border-color: var(--borde-fuerte); }
.ficha__volver:hover svg { transform: translateX(-2px); }
.ficha__volver:focus-visible { outline: 3px solid var(--hilo); outline-offset: 2px; }

.ficha {
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  max-width: 1000px;
}
.ficha__fotos { display: flex; flex-direction: column; gap: var(--e3); }
.ficha__foto { aspect-ratio: 4 / 5; position: relative; }
/* Un pelín de contraste da definición a la ropa clara sobre fondos claros,
   para que las fotos no se vean "lavadas". */
.ficha__foto img { position: absolute; inset: 0; transition: opacity var(--transicion); filter: contrast(1.04) saturate(1.03); }
/* Línea interior sutil: encierra la foto y la separa del fondo aunque la ropa
   o el fondo de la imagen sean blancos. */
.ficha__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 12%, transparent);
  pointer-events: none;
}

.ficha__thumbnails { display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: var(--e2); }
.ficha__thumb { position: relative; flex: 0 0 auto; width: 80px; height: 100px; border: 1px solid var(--borde); border-radius: 8px; padding: 0; cursor: pointer; background: var(--papel); overflow: hidden; transition: border-color var(--transicion), transform var(--transicion); }
.ficha__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.04) saturate(1.03); }
/* Línea interior muy tenue: apenas separa la foto clara de su marco. */
.ficha__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 8%, transparent);
  pointer-events: none;
}
.ficha__thumb:hover { border-color: var(--borde-fuerte); transform: scale(1.05); }
/* Activa: borde vinotinto de 2px, visible pero sin recargar. */
.ficha__thumb--activo { border-width: 2px; border-color: var(--tinta); }

@media (max-width: 720px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha__volver { margin-bottom: var(--e3); }
  .ficha__foto {
    margin-inline: 0;
    border-radius: 12px;
    aspect-ratio: 1 / 1;
  }
}
/* El dibujo de respaldo sólo aparece si la foto falla */
.prenda__fallback[hidden] { display: none !important; }

/* ---------- Prendas agotadas ----------
   Siguen a la vista (la tienda muestra lo que tuvo) pero apagadas y sin
   poder comprarse ni apartarse. */
.prenda--agotada .prenda__foto,
.ficha--agotada .ficha__foto img { filter: grayscale(1) opacity(0.55); }
.prenda--agotada:hover .prenda__foto { transform: none; }
.prenda--agotada .prenda__sello,
.ficha--agotada .prenda__sello { color: var(--texto); background: rgba(255, 255, 255, 0.92); }
.prenda--agotada .prenda__nombre-btn,
.prenda--agotada .prenda__precio-nuevo { color: var(--texto-tenue); }
.prenda--agotada .prenda__acciones .btn { flex: 1; opacity: 1; color: var(--texto-tenue); border-style: dashed; }
.ficha--agotada .ficha__precio-nuevo { color: var(--texto-tenue); }
.ficha--agotada .talla { opacity: 0.65; pointer-events: none; cursor: not-allowed; }

/* ---------- Esqueletos de carga ----------
   Mientras llega el contenido, cada zona muestra bloques grises que
   pulsan con la forma de lo que va a aparecer. Las fotos hacen lo mismo
   hasta que terminan de bajar y luego aparecen con un fundido. */
@keyframes brillo {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* Un solo color de esqueleto para toda la app: sale del color del texto,
   así se nota sobre cualquier fondo y en los dos temas. */
:root {
  --esq-base: color-mix(in srgb, var(--texto) 11%, transparent);
  --esq-luz: color-mix(in srgb, var(--texto) 4%, transparent);
}
.esq__foto,
.esq__linea,
.esq--bloque {
  background: linear-gradient(90deg, var(--esq-base) 0%, var(--esq-luz) 50%, var(--esq-base) 100%);
  background-size: 200% 100%;
  animation: brillo 1.3s ease-in-out infinite;
}
.esq { display: grid; gap: 8px; align-content: start; list-style: none; pointer-events: none; }
.esq__foto { aspect-ratio: 1 / 1.08; border-radius: var(--radio); }
.esq--carrusel .esq__foto { aspect-ratio: 4 / 5; }
.esq__linea { height: 12px; border-radius: 6px; width: 80%; }
.esq__linea--corta { width: 45%; }
.esq__linea--boton { height: 36px; border-radius: 999px; width: 100%; margin-top: 4px; }
.esq--bloque { min-height: 190px; border-radius: 12px; }
.esq--fila { min-height: 64px; border-radius: 8px; margin-bottom: 6px; }

/* Fotos: fondo que pulsa mientras bajan */
.js .prenda__foto,
.js .carrusel__foto img,
.js .ficha__foto img,
.js .tienda__foto,
.js .pedido__foto img { opacity: 0; transition: opacity 320ms ease; }
.js img.cargada { opacity: 1; }
.js .prenda__foto { transition: opacity 320ms ease, transform 420ms cubic-bezier(0.2, 0, 0.2, 1), filter 420ms ease; }
.prenda__figura:has(> img:not(.cargada):not([hidden])),
.carrusel__foto:has(> img:not(.cargada)),
.ficha__foto:has(> img:not(.cargada):not([hidden])),
.ficha__thumb:has(> img:not(.cargada)),
.tienda__foto-wrap:has(> img:not(.cargada):not([hidden])),
.pedido__foto:has(> img:not(.cargada)) {
  background: linear-gradient(90deg, var(--papel) 0%, color-mix(in srgb, var(--papel) 40%, var(--superficie)) 50%, var(--papel) 100%);
  background-size: 200% 100%;
  animation: brillo 1.3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .esq__foto, .esq__linea, .esq--bloque,
  .prenda__figura, .carrusel__foto, .ficha__foto, .tienda__foto-wrap, .pedido__foto { animation: none !important; }
}

/* ---------- Mis pedidos ----------
   Resumen en cifras, pestañas y tarjetas tipo tiquete: la información a la
   izquierda y el talón con el código a la derecha, separado por un corte. */
.pedidos__cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--borde);
  border-radius: 12px;
  margin-bottom: var(--e5);
  overflow: hidden;
}
.pedidos__cifra { display: grid; gap: 2px; padding: 12px 16px; }
.pedidos__cifra + .pedidos__cifra { border-left: 1px solid var(--borde); }
.pedidos__cifra-valor { font-size: var(--t-md); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.pedidos__cifra-etq { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-tenue); }
.pedidos__cifra--ahorro .pedidos__cifra-valor { color: var(--verde); }
[data-tema='oscuro'] .pedidos__cifra--ahorro .pedidos__cifra-valor { color: var(--etiqueta); }

.pedidos__pestanas {
  display: flex;
  gap: var(--e5);
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--e4);
}
.pedidos__pestana {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto-tenue);
  background: none;
  cursor: pointer;
}
.pedidos__pestana span {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: var(--papel);
  color: var(--texto-tenue);
  text-align: center;
}
.pedidos__pestana[aria-selected='true'] { color: var(--texto); }
.pedidos__pestana[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--texto);
}
.pedidos__pestana[aria-selected='true'] span { background: var(--tinta); color: var(--crema); }
[data-tema='oscuro'] .pedidos__pestana[aria-selected='true'] span { background: var(--etiqueta); color: var(--tinta); }
.pedidos__pestana:focus-visible { outline: 2px solid var(--hilo); outline-offset: 2px; border-radius: 4px; }

.pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.pedidos__nota, .pedidos__vacio { font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.55; margin-top: var(--e3); }
.pedidos__vacio { padding: var(--e5) 0; text-align: center; }

.pedido {
  --talon: 118px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--talon);
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: 0 1px 2px rgba(40, 16, 20, 0.04);
}
.pedido > :not(.pedido__talon) { grid-column: 1; margin-inline: 18px; }
.pedido > :first-child { margin-top: 18px; }
.pedido > .pedido__acciones { margin-bottom: 18px; }

.pedido__cuerpo { display: flex; gap: 14px; }
.pedido__foto {
  flex: 0 0 76px;
  width: 76px; height: 92px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--papel);
  cursor: pointer;
}
.pedido__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pedido__info { display: grid; gap: 3px; align-content: start; min-width: 0; }
.pedido__insignia {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
}
.pedido__insignia::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pedido__insignia--urgente { color: var(--urgente); }
.pedido__insignia--pago { color: var(--aviso); }
[data-tema='oscuro'] .pedido__insignia { color: var(--etiqueta); }
[data-tema='oscuro'] .pedido__insignia--urgente { color: #F08A68; }
[data-tema='oscuro'] .pedido__insignia--pago { color: #E3B04B; }
[data-tema='oscuro'] .pedido__insignia--entregado { color: var(--verde) !important; }
[data-tema='oscuro'] .pedido__insignia--contraentrega { color: var(--aviso) !important; }

.pedido__nombre {
  font: inherit;
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.25;
  color: var(--texto);
  text-align: left;
  padding: 0;
}
.pedido__nombre:hover { text-decoration: underline; text-underline-offset: 3px; }
.pedido__precio { font-size: var(--t-xs); color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.pedido__precio strong { font-size: var(--t-sm); color: var(--texto); margin-right: 4px; }
.pedido__precio s { margin-right: 4px; }
.pedido__meta { font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.5; }

.pedido__reloj {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.pedido__reloj-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
}

.pedido__resta {
  font-size: 16px;
  font-weight: 800;
  color: var(--vinotinto, #233344);
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'Monaco', monospace;
  line-height: 1;
}

.pedido__hasta {
  font-size: 12px;
  color: var(--texto-tenue);
  font-weight: 500;
}

.pedido__barra {
  height: 4px;
  border-radius: 99px;
  background: var(--papel);
  overflow: hidden;
  margin-top: 2px;
}

.pedido__barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--vinotinto, #233344) 0%, var(--vinotinto-claro, #3B4F6B) 100%);
  transition: width 600ms ease;
}

.pedido__reloj--urgente {
  animation: pulse-urgente 1s infinite;
}

.pedido__reloj--urgente .pedido__resta {
  color: var(--urgente);
}

.pedido__reloj--urgente .pedido__barra span {
  background: linear-gradient(90deg, var(--urgente) 0%, #ef4444 100%);
}

[data-tema='oscuro'] .pedido__barra span {
  background: linear-gradient(90deg, var(--etiqueta) 0%, #fbbf24 100%);
}

@keyframes pulse-urgente {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Pasos del pedido */
.seguimiento {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.seguimiento__paso { position: relative; display: grid; justify-items: start; gap: 6px; }
.seguimiento__paso::before {
  content: '';
  position: absolute;
  top: 4px; left: 12px; right: 0;
  height: 1px;
  background: var(--borde-fuerte);
  opacity: 0.35;
}
.seguimiento__paso:last-child::before { display: none; }
.seguimiento__paso--hecho::before { background: var(--verde); opacity: 1; }
.seguimiento__punto {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--borde-fuerte);
  background: var(--superficie);
}
.seguimiento__paso--hecho .seguimiento__punto { background: var(--verde); border-color: var(--verde); }
.seguimiento__paso--actual .seguimiento__punto { border-color: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent); }
.seguimiento__texto { font-size: 11px; line-height: 1.3; color: var(--texto-tenue); padding-right: 8px; }
.seguimiento__paso--hecho .seguimiento__texto { color: var(--texto); }
.seguimiento__paso--actual .seguimiento__texto { color: var(--texto); font-weight: 700; }
[data-tema='oscuro'] .seguimiento__paso--hecho::before,
[data-tema='oscuro'] .seguimiento__paso--hecho .seguimiento__punto { background: var(--etiqueta); border-color: var(--etiqueta); }
[data-tema='oscuro'] .seguimiento__paso--actual .seguimiento__punto { border-color: var(--etiqueta); }

.pedido__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.pedido__accion {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  background: var(--superficie);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}
.pedido__accion:hover { background: var(--papel); border-color: var(--borde-fuerte); }
.pedido__accion--fuerte { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.pedido__accion--fuerte:hover { background: var(--tinta-suave); border-color: var(--tinta-suave); }
[data-tema='oscuro'] .pedido__accion--fuerte { background: var(--etiqueta); border-color: var(--etiqueta); color: var(--tinta); }
.pedido__accion--peligro { margin-left: auto; border-color: transparent; background: transparent; color: var(--texto-tenue); }
.pedido__accion--peligro:hover { color: var(--urgente); background: transparent; border-color: transparent; }
.pedido__accion--peligro[data-confirmar='si'] { color: var(--urgente); border-color: var(--urgente); }

/* Talón con el código, separado por un corte punteado con muescas */
.pedido__talon {
  grid-column: 2;
  grid-row: 1 / span 10;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  margin: 0;
  border-left: 2px dashed var(--borde-fuerte);
  border-radius: 0 12px 12px 0;
  background: var(--papel);
  font: inherit;
  color: var(--texto);
  cursor: copy;
  transition: all var(--transicion);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
}
.pedido__talon::before,
.pedido__talon::after {
  content: '';
  position: absolute;
  left: -9px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--superficie);
  border: 1px solid var(--borde);
}
.pedido__talon::before { top: -9px; clip-path: inset(50% 0 0 0); }
.pedido__talon::after { bottom: -9px; clip-path: inset(0 0 50% 0); }
.pedido__talon:hover {
  background: color-mix(in srgb, var(--papel) 80%, var(--superficie));
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
}
.pedido__talon-rotulo {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 4px;
}
.pedido__talon-codigo {
  font-family: var(--dato);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  display: inline-block;
  will-change: transform, opacity;
  color: var(--tinta);
}
.pedido__talon-accion {
  font-size: 10px;
  font-weight: 700;
  color: var(--verde);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[data-tema='oscuro'] .pedido__talon-accion { color: var(--etiqueta); }

.pedido__talon.copiar-animacion .pedido__talon-codigo {
  animation: rasguño 0.8s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

@media (max-width: 560px) {
  .pedidos__cifra { padding: 10px 12px; }
  .pedido { grid-template-columns: minmax(0, 1fr); }
  .pedido > :not(.pedido__talon) { margin-inline: 14px; }
  .pedido > :first-child { margin-top: 14px; }
  .pedido__foto { flex-basis: 64px; width: 64px; height: 78px; }
  .pedido__talon {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 14px;
    border-left: 0;
    border-top: 1.5px dashed var(--borde);
    border-radius: 0 0 14px 14px;
  }
  .pedido__talon::before { top: -9px; left: -9px; clip-path: inset(0 0 0 50%); }
  .pedido__talon::after { top: -9px; bottom: auto; left: auto; right: -9px; clip-path: inset(0 50% 0 0); }
  .seguimiento__texto { font-size: 10px; }
}

/* ---------- Carrito ---------- */
.carrito__resumen { font-size: var(--t-xs); color: var(--texto-tenue); margin-bottom: var(--e4); }

.carrito__grupo {
  border: 1px solid var(--borde);
  border-radius: 14px;
  margin-bottom: var(--e3);
  overflow: hidden;
  background: var(--superficie);
}
.carrito__tienda {
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
  background: color-mix(in srgb, var(--papel) 45%, var(--superficie));
}
.carrito__tienda-nombre { font-size: var(--t-sm); font-weight: 700; }
.carrito__tienda-nota { font-size: 11px; color: var(--texto-tenue); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }

.carrito__items { list-style: none; margin: 0; padding: 0; }
.carrito__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 16px;
}
.carrito__item + .carrito__item { border-top: 1px solid var(--borde); }
.carrito__item .pedido__foto { width: 64px; height: 78px; flex: none; }
.carrito__item-info { display: grid; gap: 6px; min-width: 0; }
.carrito__item-info .pedido__nombre { font-size: var(--t-sm); }

.carrito__talla,
.carrito__pago {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}
.carrito__talla select,
.carrito__pago select {
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
  padding: 5px 8px;
  min-height: 32px;
}

.carrito__item-precio { display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; }
.carrito__item-precio strong { font-size: var(--t-sm); }
.carrito__item-precio s { font-size: 11px; color: var(--texto-tenue); }
.carrito__quitar {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--urgente);
  background: color-mix(in srgb, var(--urgente) 12%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--urgente) 48%, var(--borde));
  border-radius: 999px;
  padding: 6px 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.carrito__quitar:hover {
  color: var(--crema);
  background: var(--urgente);
  border-color: var(--urgente);
  transform: translateY(-1px);
}

.carrito__grupo-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--borde);
}
.carrito__subtotal { font-size: var(--t-xs); color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.carrito__subtotal strong { color: var(--texto); font-size: var(--t-sm); }

.carrito__aviso {
  font-size: var(--t-xs);
  color: var(--urgente);
  padding: 10px 14px;
  border: 1px dashed var(--urgente);
  border-radius: 10px;
  margin-bottom: var(--e3);
}

.carrito .opciones { margin-top: var(--e4); }

.carrito__totales {
  display: grid;
  gap: 6px;
  padding: var(--e3) 0;
  margin: var(--e2) 0 var(--e4);
  border-top: 1px solid var(--borde);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.carrito__totales div { display: flex; justify-content: space-between; }
.carrito__totales dt { color: var(--texto-tenue); }
.carrito__total { padding-top: 8px; border-top: 1px solid var(--borde); font-size: var(--t-md); font-weight: 700; }
.carrito__total dt { color: var(--texto) !important; }
.carrito__pie { text-align: center; margin-top: var(--e2); }

/* Botón "En el carrito" */
.btn--en-carrito { background: var(--papel) !important; color: var(--tinta) !important; border-color: var(--papel) !important; }
[data-tema='oscuro'] .btn--en-carrito { background: var(--tinta-suave) !important; color: var(--crema) !important; border-color: var(--tinta-suave) !important; }

/* Segunda fila de acciones en la página de la prenda */
.ficha__acciones--segundas { margin-top: 8px; }
.ficha__acciones--segundas .btn { min-height: 42px; font-size: var(--t-xs); }
.ficha__acciones .btn--primario[data-comprar] { flex: 1; }

/* Resumen de pago por pedido */
.pago-pedido { border: 1px solid var(--borde); border-radius: 14px; padding: var(--e4); margin-bottom: var(--e3); }
.pago-pedido__paso { font-size: var(--t-xs); font-weight: 700; color: var(--vinotinto); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--e2); }
.pago-pedido__cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e3); margin-bottom: var(--e3); }
.pago-pedido__numero { font-family: var(--dato); font-size: var(--t-md); font-weight: 700; }
.pago-pedido__tienda { font-size: var(--t-xs); font-weight: 600; color: var(--texto-tenue); text-align: right; }

@media (max-width: 520px) {
  .carrito__item { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 12px; }
  .carrito__item .pedido__foto { width: 56px; height: 68px; }
  .carrito__tienda, .carrito__grupo-pie { padding-inline: 12px; }
}

/* El contenido del modal nunca debe desplazarse de lado */
.modal__caja { overflow-x: hidden; }
.modal__cuerpo { min-width: 0; }

/* ---------- Estados de la compra ---------- */
.pedido__insignia--cancelado { color: var(--texto-tenue) !important; }
.pedido__nota { margin-top: 12px; font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.5; }
.pedido--cancelado { background: color-mix(in srgb, var(--papel) 25%, var(--superficie)); }
.pedido--cancelado .pedido__foto img { filter: grayscale(1) opacity(0.6); }
.pedido--cancelado .pedido__nombre, .pedido--cancelado .pedido__precio strong { color: var(--texto-tenue); }
.pedido--cancelado .pedido__precio strong { text-decoration: line-through; }
.pedido--cancelado .pedido__talon { background: transparent; }
.pedido--cancelado .pedido__talon-codigo { color: var(--texto-tenue); text-decoration: line-through; }
.pedido__acciones:empty { display: none; }
.pago-pedido__plazo { margin: var(--e3) 0; padding: 10px 12px; border-radius: 10px; font-size: var(--t-xs); font-weight: 600; line-height: 1.5; color: var(--urgente); background: color-mix(in srgb, var(--urgente) 9%, var(--superficie)); }
.pago-pedido__plazo--ok { color: var(--verde); background: color-mix(in srgb, var(--verde) 10%, var(--superficie)); }
.pedido--cancelado .pedido__nota { margin-bottom: 18px; }

/* Entregado */
.pedido__insignia--entregado { color: var(--verde) !important; font-weight: 700; }
.pedido--entregado { opacity: .82; }
.pedido--entregado:hover { opacity: 1; }
.pedido--entregado .pedido__foto img { filter: saturate(.7); }

/* Contraentrega */
.pedido__insignia--contraentrega { color: var(--aviso) !important; }

/* Mini-barra de confianza en Mis pedidos */
.pedidos__confianza { margin-top: var(--e5); }
.confianza-mini {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
  padding: 14px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--verde) 6%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--verde) 18%, var(--borde));
}
.confianza-mini__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--verde);
}
.confianza-mini__icono { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Sección de confianza (index) ---------- */
.confianza {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
}
.confianza__titulo {
  text-align: center;
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--tinta);
  margin-bottom: var(--e4);
}
.confianza__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.confianza__item {
  text-align: center;
  padding: 20px 16px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
}
.confianza__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tinta) 8%, var(--superficie));
  color: var(--tinta);
}
.confianza__icono svg { width: 24px; height: 24px; }
.confianza__nombre { font-weight: 700; font-size: var(--t-sm); color: var(--tinta); margin-bottom: 4px; }
.confianza__texto { font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.5; }

@media (max-width: 600px) {
  .confianza__grid { grid-template-columns: 1fr; gap: 12px; }
  .confianza__item { padding: 16px 14px; }
}

/* ---------- Apartar gratis ---------- */
.apartar__prenda {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: var(--e4);
  margin-bottom: var(--e4);
  border-bottom: 1px solid var(--borde);
}
.apartar__prenda .pedido__foto { flex: 0 0 64px; width: 64px; height: 78px; cursor: default; }
.apartar__prenda .pedido__nombre { cursor: default; }
.apartar__prenda .pedido__nombre:hover { text-decoration: none; }



/* Aviso de riesgo al apartar */
.apartar__riesgo {
  margin: var(--e2) 0 var(--e4);
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--aviso) 45%, var(--borde));
  border-radius: 12px;
  background: color-mix(in srgb, var(--aviso) 8%, var(--superficie));
}
.apartar__riesgo-titulo { font-size: var(--t-sm); font-weight: 700; margin-bottom: 6px; }
.apartar__riesgo ul {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  line-height: 1.55;
  display: grid;
  gap: 3px;
}
.apartar__acepto { margin: 0; color: var(--texto); font-weight: 600; }
.apartar__comprar { margin-top: 8px; }

/* Riesgo en la tarjeta del apartado */
.pedido__riesgo {
  margin-top: 12px;
  font-size: 13px;
  color: var(--texto-tenue);
  line-height: 1.5;
  background: rgba(239, 68, 68, 0.05);
  border-left: 3px solid var(--urgente, #ef4444);
  padding: 10px 12px;
  border-radius: 4px;
}

.pedido__riesgo strong {
  color: var(--urgente, #ef4444);
  font-weight: 700;
}

.pedido__riesgo--alto {
  color: #991b1b;
  font-weight: 500;
  background: #fef2f2;
  border-left-color: var(--urgente, #ef4444);
}

/* Talón: rótulo extra y versión bloqueada (sin pago confirmado) */
.pedido__talon-nota { font-size: 10px; color: var(--texto-tenue); text-align: center; line-height: 1.35; max-width: 14ch; }
.pedido__talon--bloqueado { cursor: default; }
.pedido__talon--bloqueado:hover { background: color-mix(in srgb, var(--papel) 45%, var(--superficie)); }
.pedido__candado {
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--texto-tenue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pedido__talon-ref {
  font-family: var(--dato);
  font-size: 11px;
  font-weight: 700;
  color: var(--texto);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  cursor: copy;
}
.pedido__talon-ref:hover { border-color: var(--borde-fuerte); }

@media (max-width: 560px) {
  .pedido__talon--bloqueado { flex-wrap: wrap; gap: 6px 10px; }
  .pedido__talon-nota { max-width: none; text-align: left; }
}

/* Panel de tienda: pagos por confirmar y entregas */
.panel-pedidos { margin-bottom: var(--e5); }
.panel-pedidos .campo__ayuda { margin-bottom: var(--e2); }
.panel-pedidos__lista { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: 8px; }
.panel-pedido {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.panel-pedido__numero { font-family: var(--dato); font-weight: 700; font-size: var(--t-sm); }
.panel-pedido__entrega { display: flex; gap: 6px; align-items: center; }
.panel-pedido__entrega .campo__control { width: 10ch; min-height: 34px; padding: 4px 10px; font-family: var(--dato); text-transform: uppercase; }
.panel-pedido__entrega .campo__control[aria-invalid='true'] { border-color: var(--urgente); }

/* ---------- Páginas completas: carrito y pedidos ---------- */
.pagina-vista { padding-top: var(--e5); }
.pagina__cabeza { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e5); }
.pagina__cabeza .ficha__volver { margin-bottom: 0; }
.pagina__titulo {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.1;
}
.pagina__titulo:focus { outline: none; }
#pagina-pedidos { max-width: 820px; }

/* Carrito: productos a la izquierda, entrega y pago a la derecha */
.carrito { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: var(--e5); align-items: start; }
.carrito__caja {
  position: sticky;
  top: calc(var(--e8) + var(--e2));
  padding: var(--e4) var(--e5) var(--e5);
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: 0 1px 2px rgba(40, 16, 20, 0.04);
}
.carrito__caja-titulo { font-size: var(--t-md); font-weight: 700; margin-bottom: var(--e3); }
.carrito__caja .opciones { margin-top: 0; }

@media (max-width: 860px) {
  .carrito { grid-template-columns: 1fr; }
  .carrito__caja { position: static; }
}

/* ---------- Agregar al carrito: carrito que vuela y rebote ---------- */
.carrito-vuela {
  position: fixed;
  z-index: 300;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--crema);
  box-shadow: 0 10px 22px -8px rgba(40, 16, 20, 0.55);
  pointer-events: none;
  will-change: transform, opacity;
}
.carrito-vuela svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-tema='oscuro'] .carrito-vuela { background: var(--etiqueta); color: var(--tinta); }

@keyframes carrito-rebote {
  0% { transform: scale(1); }
  30% { transform: scale(1.28) rotate(-10deg); }
  55% { transform: scale(0.92) rotate(6deg); }
  75% { transform: scale(1.08) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
.carrito-rebote { animation: carrito-rebote 520ms cubic-bezier(0.3, 0, 0.2, 1); }
.carrito-rebote .contador-burbuja { animation: carrito-rebote 520ms cubic-bezier(0.3, 0, 0.2, 1) 80ms; }
@media (prefers-reduced-motion: reduce) {
  .carrito-rebote, .carrito-rebote .contador-burbuja { animation: none; }
}

/* ---------- Avisos ----------
   Tarjeta flotante: ícono o foto con sello según el tipo, título, mensaje,
   acción, botón de cerrar y barra de tiempo. Abajo al centro en celular;
   abajo a la derecha en pantallas grandes. */
.brindis {
  --aviso-color: var(--tinta);
  --aviso-suave: color-mix(in srgb, var(--tinta) 12%, var(--superficie));
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: 0 16px 40px -12px rgba(40, 16, 20, 0.3), 0 2px 8px -2px rgba(40, 16, 20, 0.15);
  overflow: hidden;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 18px) scale(0.97);
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s 320ms;
}
.brindis[data-visible='si'] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}
/* Línea de color a la izquierda, según el tipo */
.brindis::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--aviso-color);
}

.brindis[data-tipo='exito'] { --aviso-color: var(--verde); --aviso-suave: color-mix(in srgb, var(--verde) 14%, var(--superficie)); }
.brindis[data-tipo='aviso'] { --aviso-color: var(--aviso); --aviso-suave: color-mix(in srgb, var(--aviso) 16%, var(--superficie)); }
.brindis[data-tipo='error'] { --aviso-color: var(--urgente); --aviso-suave: color-mix(in srgb, var(--urgente) 14%, var(--superficie)); }
.brindis[data-tipo='actualizacion'] { --aviso-color: var(--tinta); --aviso-suave: color-mix(in srgb, var(--etiqueta) 45%, var(--superficie)); }
[data-tema='oscuro'] .brindis[data-tipo='exito'],
[data-tema='oscuro'] .brindis[data-tipo='actualizacion'] { --aviso-color: var(--etiqueta); }
[data-tema='oscuro'] .brindis[data-tipo='info'] { --aviso-color: var(--etiqueta); --aviso-suave: color-mix(in srgb, var(--etiqueta) 16%, var(--superficie)); }

.brindis__icono {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--aviso-suave);
  color: var(--aviso-color);
  flex-shrink: 0;
  font-weight: 700;
  font-size: 18px;
}
.brindis__icono svg,
.brindis__sello svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Foto de la prenda con un sello del tipo de aviso */
.brindis__imagen { position: relative; width: 48px; height: 58px; flex-shrink: 0; }
.brindis__imagen img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; background: var(--papel); opacity: 1 !important; }
.brindis__sello {
  position: absolute;
  right: -6px; bottom: -6px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--aviso-color);
  color: var(--superficie);
  box-shadow: 0 0 0 2px var(--superficie);
}
.brindis__sello svg { width: 13px; height: 13px; stroke-width: 3; }

.brindis__contenido { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 0; }
.brindis__titulo { font-size: var(--t-sm); font-weight: 700; line-height: 1.3; color: var(--texto); }
.brindis__texto { font-size: 13px; line-height: 1.5; color: var(--texto); }
.brindis__titulo + .brindis__texto { color: var(--texto-tenue); font-size: var(--t-xs); }
.brindis:not(:has(.brindis__titulo)) .brindis__texto { font-size: var(--t-sm); font-weight: 600; padding-top: 0; }
.brindis__pie { font-size: 11px; color: var(--texto-tenue); margin-top: 3px; }

.brindis__accion {
  align-self: center;
  margin-top: 0;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  background: var(--aviso-color);
  color: var(--crema);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transicion);
  box-shadow: 0 4px 12px -2px rgba(140, 47, 67, 0.25);
  white-space: nowrap;
}
.brindis__accion:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -2px rgba(140, 47, 67, 0.35);
}
.brindis__accion:active { transform: translateY(0); }
.brindis__accion:focus-visible { outline: 3px solid var(--hilo); outline-offset: 2px; }
.brindis[data-tipo='exito'] .brindis__accion,
.brindis[data-tipo='actualizacion'] .brindis__accion { background: var(--tinta); color: var(--crema); }
[data-tema='oscuro'] .brindis[data-tipo='exito'] .brindis__accion,
[data-tema='oscuro'] .brindis[data-tipo='actualizacion'] .brindis__accion { background: var(--etiqueta); color: var(--tinta); }

.brindis__cerrar {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  margin: -2px -2px 0 0;
  border-radius: 8px;
  color: var(--texto-tenue);
  background: transparent;
  cursor: pointer;
}
.brindis__cerrar:hover { background: var(--papel); color: var(--texto); }
.brindis__cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Barra de tiempo: se vacía mientras el aviso está visible */
@keyframes brindis-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.brindis__tiempo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--aviso-color);
  opacity: 0.35;
  transform-origin: left;
  animation-name: brindis-tiempo;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.brindis[data-pausa='si'] .brindis__tiempo { animation-play-state: paused; }

/* El aviso de versión nueva se destaca un poco más */
.brindis[data-tipo='actualizacion'] { background: linear-gradient(135deg, var(--aviso-suave), var(--superficie) 60%); }

@media (min-width: 720px) {
  .brindis {
    left: auto;
    right: 24px;
    bottom: 24px;
    transform: translateY(18px) scale(0.98);
  }
  .brindis[data-visible='si'] { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .brindis { transition: opacity 200ms ease, visibility 0s 200ms; transform: translate(-50%, 0); }
  .brindis__tiempo { display: none; }
  @media (min-width: 720px) { .brindis { transform: none; } }
}

/* ---------- Tarjeta con una sola acción ----------
   La tarjeta sólo ofrece "Agregar al carrito". Apartar está en el detalle;
   si la prenda ya está apartada, se indica con un enlace discreto. */
.prenda__acciones .btn { width: 100%; }
.prenda__apartada {
  align-self: flex-start;
  font: inherit;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.prenda__apartada:hover { color: var(--tinta); }

/* En pantallas muy altas, el espacio que sobra lo toma el bloque principal
   (que queda centrado) en vez de dejar un hueco en blanco al final. */
.hero.vista[data-activa='si'] { display: flex; flex-direction: column; justify-content: center; }
.hero.vista[data-activa='si'] > .hero__grid { flex: 1 0 auto; width: 100%; }

/* En escritorio con pantalla alta, lo que ya hay en la portada (título,
   texto, botones y carrusel) crece con la altura en vez de quedar pequeño
   en medio de un espacio vacío. */
@media (min-width: 861px) and (min-height: 760px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-block: clamp(0.5rem, 3vh, 2.5rem);
  }
  .hero__eyebrow { margin-bottom: clamp(0.5rem, 1.6vh, 1.1rem); }
  .hero__titulo { font-size: clamp(3rem, min(6.2vw, 8.5vh), 6.5rem); margin-bottom: clamp(0.85rem, 2.4vh, 1.6rem); }
  .hero__texto { font-size: clamp(0.98rem, 1.8vh, 1.2rem); max-width: 36ch; margin-bottom: clamp(1rem, 2.6vh, 1.8rem); }
  .hero__mini-indicadores { margin-bottom: clamp(1rem, 3vh, 2rem); }
  .hero__mini-indicadores span { font-size: 0.84rem; padding: 0.34rem 0.95rem 0.34rem 0.34rem; }
  .indicador__icono { width: 1.7rem; height: 1.7rem; }
}



/* ---------- COLLAGE DE LA PORTADA ----------
   Tres columnas de fotos de distintas proporciones, un poco giradas como
   recortes, que se deslizan en sentidos opuestos (arriba, abajo, arriba).
   En celular las columnas se vuelven filas que corren a lado y lado.
   Cada cinta lleva sus prendas dos veces: moverla la mitad de su largo
   (más medio espacio) deja todo igual, y así el ciclo no salta. */
.collage {
  --hueco: 0.75rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hueco);
  height: clamp(420px, calc(100vh - 260px), 880px);
  overflow: hidden;
  padding-inline: 0.35rem;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}
/* Sin prendas todavía (recién publicada): una invitación a las tiendas. */
.collage__vacio {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  display: grid;
  gap: var(--e3);
  justify-items: start;
  max-width: 30rem;
  padding: var(--e5);
  border: 1px dashed var(--borde-fuerte);
  border-radius: 18px;
  background: var(--superficie);
}
.collage__vacio p { margin: 0; color: var(--texto-tenue); }
.collage__vacio .collage__vacio-titulo { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.1; color: var(--texto); }

.collage__col { min-width: 0; }
.collage__col--2 { margin-top: -2.5rem; }

.collage__cinta {
  display: flex;
  flex-direction: column;
  gap: var(--hueco);
  padding-bottom: var(--hueco);
  animation: collage-subir var(--duracion, 40s) linear infinite;
  will-change: transform;
}
.collage__col--1 .collage__cinta { --duracion: 38s; }
.collage__col--2 .collage__cinta { --duracion: 46s; animation-direction: reverse; }
.collage__col--3 .collage__cinta { --duracion: 42s; }

@keyframes collage-subir {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
@keyframes collage-lado {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.collage:hover .collage__cinta,
.collage:focus-within .collage__cinta,
.collage[data-pausado='si'] .collage__cinta { animation-play-state: paused; }

.collage__pieza {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  border-radius: 14px;
  overflow: hidden;
  background: var(--superficie);
  border: 4px solid var(--superficie);
  box-shadow: 0 14px 28px -18px rgba(140, 47, 67, 0.55);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.collage__pieza--f0 { transform: rotate(-1.4deg); }
.collage__pieza--f1 { transform: rotate(1.2deg); }
.collage__pieza--f2 { transform: rotate(-0.5deg); }
.collage__pieza:hover,
.collage__pieza:focus-visible {
  transform: rotate(0) scale(1.03);
  box-shadow: var(--sombra-flotante);
  position: relative;
  z-index: 1;
}
.collage__pieza:focus-visible { outline: 3px solid var(--hilo); outline-offset: 2px; }

.collage__pieza .carrusel__foto { margin: 0; border-radius: 10px; overflow: hidden; }
.collage__pieza--f0 .carrusel__foto { aspect-ratio: 4 / 5; }
.collage__pieza--f1 .carrusel__foto { aspect-ratio: 1 / 1; }
.collage__pieza--f2 .carrusel__foto { aspect-ratio: 3 / 4.4; }
.collage__pieza .carrusel__sello { top: 8px; left: 8px; font-size: var(--t-xs); padding: 2px 8px; }

/* Nombre y precio sobre la foto, con una sombra para que se lean */
.collage__info {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 1px;
  padding: 1.6rem 0.65rem 0.55rem;
  background: linear-gradient(180deg, transparent, rgba(40, 16, 20, 0.78));
  color: #fff;
}
.collage__nombre {
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collage__precio strong { font-family: var(--display); font-size: var(--t-base); }
.collage__precio s { font-size: 0.625rem; opacity: 0.75; margin-left: 0.2rem; }

/* Esqueletos mientras carga: bloques del collage */
.collage > .esq { border-radius: 14px; }

/* Botón de pausa: muestra el ícono de la acción disponible */
.collage__icono-seguir { display: none; }
#collage-pausa[aria-pressed='true'] .collage__icono-pausa { display: none; }
#collage-pausa[aria-pressed='true'] .collage__icono-seguir { display: block; }
.carrusel__btn svg.collage__icono-seguir { fill: currentColor; }


/* Tablet y celular: tres filas que corren a lado y lado */
@media (max-width: 860px) {
  .collage {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    padding-inline: 0;
    margin-inline: calc(-1 * var(--e4));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .collage__col { overflow: hidden; padding-block: 4px; }
  .collage__col--2 { margin-top: 0; }
  .collage__cinta {
    flex-direction: row;
    align-items: center;
    width: max-content;
    padding-bottom: 0;
    padding-right: var(--hueco);
    animation-name: collage-lado;
  }
  .collage__pieza { width: auto; }
  .collage__pieza .carrusel__foto { height: clamp(130px, 22vw, 190px); }
  .collage__pieza--f0 .carrusel__foto,
  .collage__pieza--f1 .carrusel__foto,
  .collage__pieza--f2 .carrusel__foto { width: auto; }
  .collage__pieza--f0 .carrusel__foto { aspect-ratio: 4 / 5; }
  .collage__pieza--f1 .carrusel__foto { aspect-ratio: 1 / 1; }
  .collage__pieza--f2 .carrusel__foto { aspect-ratio: 5 / 4; }
  .collage > .esq { height: 150px; }
}

/* Menos movimiento: el collage queda quieto y se recorre deslizando */
@media (prefers-reduced-motion: reduce) {
  .collage__cinta { animation: none; }
  .collage__col { overflow: auto; scrollbar-width: none; }
  .collage__pieza, .collage__pieza:hover { transition: none; }
}


/* ---------- MENÚ "MI CUENTA" ----------
   Guardados, pedidos, alertas y tema en un desplegable: la barra sólo
   muestra buscar, carrito y este botón. */
.desplegable { position: relative; }

.desplegable__punto {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--urgente);
  box-shadow: 0 0 0 2px var(--fondo);
  display: none;
}
.desplegable__punto[data-visible='si'] { display: block; }
#btn-cuenta[aria-expanded='true'] { background: var(--papel); }

.desplegable__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 220px;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra-flotante);
  animation: desplegable-entrada 160ms ease-out both;
}
.desplegable__panel[hidden] { display: none; }

@keyframes desplegable-entrada {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.desplegable__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  text-align: left;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  transition: background var(--transicion);
}
.desplegable__item:hover,
.desplegable__item:focus-visible { background: var(--papel); outline: none; }
.desplegable__item .icono-svg { width: 20px; height: 20px; stroke-width: 1.75; }
.desplegable__item .contador-burbuja {
  position: static;
  margin-left: auto;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .desplegable__panel { animation: none; }
}


/* Único acceso para tiendas: un botón de contorno en la barra, separado de
   los enlaces de compra, para que no compita con lo que busca el comprador. */
.nav__link--tienda {
  padding: 0.45rem 0.95rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
}
.nav__link--tienda:hover { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
[data-tema='oscuro'] .nav__link--tienda:hover { background: var(--etiqueta); color: var(--tinta); border-color: var(--etiqueta); }
@media (max-width: 860px) {
  .nav__link--tienda { margin-top: var(--e3); text-align: center; border-bottom: 1.5px solid currentColor; }
}

/* Ayuda contextual de búsqueda: acompaña el filtro sin convertirse en otra sección. */
.buscador__ayuda {
  flex: 0 0 auto;
  padding: 0.3rem 0.55rem;
  color: var(--etiqueta-oscura);
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
}
.buscador__ayuda:hover { color: var(--tinta); text-decoration: underline; }
.ia-ayuda {
  position: relative;
  overflow: hidden;
  margin-top: 0.75rem;
  padding: 1.15rem 1.25rem 1rem;
  border: 1px solid color-mix(in srgb, var(--etiqueta-oscura) 38%, var(--borde));
  border-radius: 16px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--papel) 86%, var(--etiqueta)), var(--superficie) 72%);
  box-shadow: 0 14px 30px rgba(140, 47, 67, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  animation: ia-aparece 420ms cubic-bezier(.2, .9, .25, 1.2) both;
}
.ia-ayuda::before {
  position: absolute;
  content: '';
  width: 170px;
  height: 170px;
  top: -105px;
  right: 8%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--etiqueta) 65%, transparent);
  filter: blur(3px);
  opacity: .35;
  animation: ia-flota 5s ease-in-out infinite;
  pointer-events: none;
}
.ia-ayuda::after {
  position: absolute;
  content: '';
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .28) 42%, transparent 58%);
  transform: translateX(-110%);
  animation: ia-brillo 5.5s ease-in-out infinite;
  pointer-events: none;
}
.ia-ayuda > * { position: relative; z-index: 1; }
.ia-ayuda__halo { position: absolute; top: 1.2rem; left: 1.15rem; width: 2rem; height: 2rem; border: 1px solid color-mix(in srgb, var(--aviso) 48%, transparent); border-radius: 50%; animation: ia-halo 2.2s ease-out infinite; pointer-events: none; }
.ia-ayuda[hidden] { display: none !important; }
.ia-ayuda__cerrar {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  color: var(--texto-tenue);
  font-size: 1.25rem;
  line-height: 1;
  transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}
.ia-ayuda__cerrar:hover { background: var(--borde); color: var(--tinta); transform: rotate(90deg); }
.ia-ayuda__cerrar:focus-visible { outline-offset: 1px; }
@keyframes ia-aparece { from { opacity: 0; transform: translateY(-9px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ia-flota { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-18px, 11px, 0); } }
@keyframes ia-brillo { 0%, 55% { transform: translateX(-110%); } 75%, 100% { transform: translateX(110%); } }
@keyframes ia-halo { 0% { transform: scale(.6); opacity: .75; } 100% { transform: scale(1.8); opacity: 0; } }
.ia-ayuda__cabeza { display: flex; gap: 0.65rem; align-items: flex-start; }
.ia-ayuda__icono { color: var(--aviso); font-size: 1.2rem; animation: ia-destello 1.8s ease-in-out infinite; }
@keyframes ia-destello { 0%, 100% { transform: scale(1) rotate(0); opacity: .75; } 50% { transform: scale(1.18) rotate(12deg); opacity: 1; } }
.ia-ayuda__cabeza strong { display: block; font-size: var(--t-sm); }
.ia-ayuda__cabeza p, .ia-ayuda__entendido { color: var(--texto-tenue); font-size: var(--t-xs); }
.ia-ayuda__ejemplos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.ia-ayuda__ejemplos button { padding: 0.35rem 0.6rem; border: 1px solid var(--borde); border-radius: 999px; color: var(--texto); font-size: var(--t-xs); }
.ia-ayuda__ejemplos button { transition: transform var(--transicion), border-color var(--transicion), background var(--transicion); }
.ia-ayuda__ejemplos button:hover { border-color: var(--tinta); background: var(--superficie); transform: translateY(-1px); }
.ia-ayuda__respuesta { display: flex; gap: .5rem; align-items: center; margin-top: .85rem; padding-top: .65rem; border-top: 1px solid color-mix(in srgb, var(--borde) 75%, transparent); }
.ia-ayuda__pulso { flex: 0 0 auto; width: .45rem; height: .45rem; border-radius: 50%; background: var(--etiqueta-oscura); box-shadow: 0 0 0 4px color-mix(in srgb, var(--etiqueta) 55%, transparent); }
.ia-ayuda__entendido { margin: 0; }
.ia-ayuda__entendido--actualizado { animation: ia-responde 300ms ease-out both; }
@keyframes ia-responde { from { opacity: .25; transform: translateX(-5px); } to { opacity: 1; transform: none; } }

.ia-ayuda--publicar { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; align-items: center; margin-block: 1.1rem; }
.ia-ayuda__marca { display: flex; align-items: center; gap: 0.45rem; color: var(--tinta); font-size: var(--t-sm); font-weight: 800; }
.ia-ayuda__destello { color: var(--aviso); font-size: 1.2rem; animation: ia-destello 1.8s ease-in-out infinite; }
.ia-ayuda__marca small { padding: 0.15rem 0.4rem; border-radius: 999px; background: var(--etiqueta); color: var(--tinta); font-size: 0.6rem; text-transform: uppercase; letter-spacing: .06em; }
.ia-ayuda__accion { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; transition: transform var(--transicion), box-shadow var(--transicion); }
.ia-ayuda__accion:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(140, 47, 67, 0.25); }
.ia-ayuda__accion[disabled] { opacity: .75; transform: none; box-shadow: none; }
.ia-ayuda__estado { grid-column: 1; margin: 0; }
.ia-ayuda--publicar:has(.ia-ayuda__accion[disabled]) { border-color: var(--aviso); background: color-mix(in srgb, var(--aviso) 8%, var(--superficie)); }
.pp-sugerencias { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.pp-sugerencias button { padding: .22rem .45rem; border: 1px solid var(--borde); border-radius: 999px; color: var(--texto-tenue); font-size: .65rem; transition: background var(--transicion), color var(--transicion), transform var(--transicion); }
.pp-sugerencias button:hover { background: var(--papel); color: var(--tinta); transform: translateY(-1px); }

@media (max-width: 560px) {
  .buscador__ayuda { padding-right: 0; }
  .ia-ayuda__ejemplos { display: grid; }
  .ia-ayuda__ejemplos button { text-align: left; }
  .ia-ayuda--publicar { grid-template-columns: 1fr; }
  .ia-ayuda__accion { grid-column: 1; grid-row: auto; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .ia-ayuda, .ia-ayuda::before, .ia-ayuda::after, .ia-ayuda__icono, .ia-ayuda__destello, .ia-ayuda__halo { animation: none; }
  .ia-ayuda__ejemplos button, .ia-ayuda__accion, .ia-ayuda__cerrar { transition: none; }
}

@media (max-width: 560px) {
  .ia-consulta__fila { display: grid; }
  .ia-consulta__fila .btn { width: 100%; }
  .ia-resultado { grid-template-columns: auto 1fr auto; }
  .ia-resultado b { grid-column: 2; grid-row: 2; text-align: left; }
  .ia-resultado .btn { grid-column: 3; grid-row: 1 / span 2; }
  .ia-calidad { grid-template-columns: 82px 1fr; gap: 0.7rem; }
  .ia-calidad__score { border-width: 6px; font-size: 1.25rem; }
}

/* ---------- Panel de tienda (página) ---------- */
.panel-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e3) var(--e5);
  margin-bottom: var(--e4);
}
.panel-cabeza .panel-selector { margin: 0; min-width: min(320px, 100%); }
.panel-sesion {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}
.panel-sesion--demo { font-style: italic; }
.panel-cuerpo { margin-top: var(--e4); }
.panel-recargar { display: flex; justify-content: flex-end; margin-bottom: var(--e3); }
.panel-cerrados { margin-top: var(--e4); }
.panel-aviso {
  border: 1px solid var(--borde);
  border-left: 3px solid var(--etiqueta);
  border-radius: 12px;
  padding: var(--e4);
  margin-bottom: var(--e4);
  background: color-mix(in srgb, var(--papel) 40%, var(--superficie));
  font-size: var(--t-sm);
  line-height: 1.55;
}
.panel-aviso__titulo { font-weight: 700; margin-bottom: 4px; }
.panel-aviso code { font-family: var(--dato); font-size: 0.85em; background: var(--papel); padding: 1px 5px; border-radius: 4px; }

.login-tienda { max-width: 420px; }
.login-tienda__intro { font-size: var(--t-sm); color: var(--texto-tenue); margin-bottom: var(--e4); line-height: 1.55; }
.login-tienda__pie { margin-top: var(--e3); text-align: center; }

/* ---------- Herramientas de IA ---------- */
.ia-tarjeta {
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: var(--e5);
  margin-bottom: var(--e4);
  background: var(--superficie);
}
.ia-tarjeta__cabeza { display: flex; gap: var(--e3); align-items: flex-start; margin-bottom: var(--e4); }
.ia-tarjeta__icono {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta);
}
[data-tema='oscuro'] .ia-tarjeta__icono { background: var(--tinta-suave); color: var(--etiqueta); }
.ia-tarjeta__icono svg { width: 20px; height: 20px; fill: currentColor; }
.ia-tarjeta__titulo { font-size: var(--t-md); font-weight: 700; }
.ia-tarjeta__texto { font-size: var(--t-sm); color: var(--texto-tenue); line-height: 1.5; margin-top: 2px; }

.ia-form { display: flex; gap: var(--e2); flex-wrap: wrap; }
.ia-form > .campo__control { flex: 1 1 260px; }
.ia-form--columnas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e4); align-items: start; }
.ia-prendas { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.ia-prenda {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: var(--t-sm);
  cursor: pointer;
}
.ia-prenda:has(input:checked) { border-color: var(--tinta); background: color-mix(in srgb, var(--papel) 50%, var(--superficie)); }
.ia-prenda input { margin-top: 3px; accent-color: var(--tinta); }
.ia-prenda small { display: block; color: var(--texto-tenue); font-size: var(--t-xs); }
.ia-opciones { display: grid; gap: var(--e2); }
.ia-opciones .campo { margin: 0; }

.ia-resultado:not(:empty) { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px dashed var(--borde); }
.ia-resultado__resumen { font-size: var(--t-sm); line-height: 1.6; margin-bottom: var(--e3); }
.ia-pensando { font-size: var(--t-sm); color: var(--texto-tenue); display: flex; align-items: center; gap: 8px; }
.ia-pensando::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--borde-fuerte);
  border-top-color: transparent;
  animation: giro 0.8s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }
.ia-acciones { list-style: none; padding: 0; margin: 0 0 var(--e4); display: grid; gap: var(--e2); }
.ia-accion { display: flex; gap: var(--e3); align-items: flex-start; }
.ia-accion__titulo { font-weight: 700; font-size: var(--t-sm); }
.ia-accion__detalle { font-size: var(--t-sm); color: var(--texto-tenue); line-height: 1.5; }
.ia-prioridad {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 1px;
  background: var(--papel);
  color: var(--texto-tenue);
}
.ia-prioridad--alta { background: color-mix(in srgb, var(--urgente) 14%, var(--superficie)); color: var(--urgente); }
.ia-prioridad--media { background: color-mix(in srgb, var(--aviso) 16%, var(--superficie)); color: var(--aviso); }
.ia-subtitulo { font-size: var(--t-sm); font-weight: 700; margin: var(--e3) 0 var(--e2); }
.ia-publicaciones { display: grid; gap: var(--e3); }
.ia-publicacion { border: 1px solid var(--borde); border-radius: 12px; padding: var(--e4); }
.ia-publicacion__titulo { font-weight: 700; font-size: var(--t-sm); margin-bottom: 6px; }
.ia-publicacion__texto { font-size: var(--t-sm); line-height: 1.6; white-space: pre-wrap; }
.ia-publicacion__hashtags { font-size: var(--t-xs); color: var(--verde); margin-top: 6px; word-break: break-word; }
[data-tema='oscuro'] .ia-publicacion__hashtags { color: var(--etiqueta); }
.ia-publicacion__idea { font-size: var(--t-xs); color: var(--texto-tenue); margin-top: 6px; line-height: 1.5; }
.ia-nota { text-align: center; margin-top: var(--e2); }
.prenda__descripcion { font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.5; margin-top: 4px; }

@media (max-width: 720px) {
  .ia-form--columnas { grid-template-columns: 1fr; }
  .ia-tarjeta { padding: var(--e4); }
}

/* ---------- Asistente de compras ---------- */
/* Botón con silueta de camisa: la tela y el pespunte son un SVG detrás del
   destello, que queda estampado en el pecho. */
.asistente-btn {
  --camisa-a: #8b5cf6;
  --camisa-b: #6366f1;
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 62px;
  padding: 8px 0 0;
  border: 0;
  background: none;
  color: white;
  cursor: pointer;
  filter: drop-shadow(0 10px 14px rgba(99, 102, 241, 0.35));
  transform-origin: 50% 5%;
  transition: transform var(--transicion), filter var(--transicion), opacity var(--transicion);
}
.asistente-btn:hover {
  transform: translateY(-3px) rotate(-3deg);
  filter: drop-shadow(0 14px 18px rgba(99, 102, 241, 0.45));
}
.asistente-btn__camisa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: visible;
}
.asistente-btn__camisa stop:first-child { stop-color: var(--camisa-a); }
.asistente-btn__camisa stop:last-child { stop-color: var(--camisa-b); }
.asistente-btn__tela {
  fill: url(#camisa-tela);
  stroke: url(#camisa-tela);
  stroke-width: 4;
  stroke-linejoin: round;
}
.asistente-btn__puntada {
  fill: none;
  stroke: var(--hilo);
  stroke-width: 3;
  stroke-dasharray: 8 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.asistente-btn__icono { width: 22px; height: 22px; fill: currentColor; }
.asistente-btn[data-abierto='si'] { opacity: 0; pointer-events: none; }

/* Vida del botón: la camisa se mece como colgada de un gancho cada pocos
   segundos, el destello titila y un halo late detrás. Al pasar el mouse
   saluda y el destello gira. */
.asistente-btn { animation: asistente-mecer 6s ease-in-out 2s infinite; }
.asistente-btn::before {
  content: '';
  position: absolute;
  inset: 10px 8px 2px;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.55), transparent);
  animation: asistente-halo 2.4s ease-out infinite;
  pointer-events: none;
}
.asistente-btn__icono { animation: asistente-titilar 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
.asistente-btn:hover { animation: asistente-saludo 0.7s ease-in-out; }
.asistente-btn:hover .asistente-btn__icono { animation: asistente-girar 0.8s ease-in-out; }

@keyframes asistente-mecer {
  0%, 72%, 100% { transform: rotate(0); }
  76% { transform: rotate(-9deg); }
  81% { transform: rotate(7deg); }
  86% { transform: rotate(-4deg); }
  91% { transform: rotate(2deg); }
}
@keyframes asistente-saludo {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-6px) rotate(-8deg); }
  60% { transform: translateY(-4px) rotate(6deg); }
  100% { transform: translateY(-3px) rotate(-3deg); }
}
@keyframes asistente-halo {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes asistente-titilar {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  50% { transform: scale(1.25) rotate(15deg); opacity: 0.85; }
}
@keyframes asistente-girar {
  from { transform: rotate(0) scale(1.1); }
  to { transform: rotate(360deg) scale(1.1); }
}

/* Arrastre: el botón se puede llevar a cualquier sitio de la pantalla */
.asistente-btn { touch-action: none; user-select: none; -webkit-user-select: none; }
.asistente-btn--arrastrando {
  cursor: grabbing;
  animation: none;
  transform: scale(1.1) rotate(-4deg);
  filter: drop-shadow(0 18px 22px rgba(99, 102, 241, 0.5));
  transition: none;
}
.asistente-btn--arrastrando .asistente-btn__icono,
.asistente-btn--arrastrando::before { animation: none; }
.asistente-btn--pegando { transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1), top 0.28s cubic-bezier(0.22, 1, 0.36, 1); }

/* Globo de curiosidad al lado del botón: tarjeta limpia con la marca del
   asistente arriba y una frase corta que va rotando. */
.asistente-tip {
  position: fixed;
  right: 92px;
  bottom: 18px;
  z-index: 150;
  display: flex;
  align-items: flex-start;
  width: 244px;
  max-width: calc(100vw - 124px);
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
  box-shadow: 0 1px 2px rgba(58, 42, 45, 0.06), 0 12px 32px -8px rgba(58, 42, 45, 0.22);
  animation: asistente-tip-entrar 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.asistente-tip[hidden] { display: none; }
/* Colita apuntando al botón */
.asistente-tip::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: 18px;
  width: 11px;
  height: 11px;
  background: var(--superficie);
  border-top: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
  border-top-right-radius: 3px;
  transform: rotate(45deg);
}
.asistente-tip__texto {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 11px 4px 12px 14px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.asistente-tip__marca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d4fe0;
}
.asistente-tip__punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: asistente-tip-en-linea 2s ease-out infinite;
}
.asistente-tip__frase {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
}
.asistente-tip__frase--cambio { animation: asistente-tip-frase 0.35s ease-out; }
.asistente-tip__cerrar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin: 7px 7px 0 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--texto-tenue);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--transicion), background var(--transicion);
}
.asistente-tip__cerrar:hover { opacity: 1; background: color-mix(in srgb, var(--texto) 8%, transparent); }
.asistente-tip__cerrar svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
[data-tema='oscuro'] .asistente-tip__marca { color: #a78bfa; }
@keyframes asistente-tip-entrar {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes asistente-tip-frase {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes asistente-tip-en-linea {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  100% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
/* Globo a la derecha del botón (botón pegado al borde izquierdo) */
.asistente-tip--derecha::after {
  right: auto;
  left: -6px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
  border-radius: 0 0 0 3px;
}
/* Botón en la mitad de arriba: el globo cuelga hacia abajo */
.asistente-tip--arriba::after { bottom: auto; top: 18px; }
@media (prefers-reduced-motion: reduce) {
  .asistente-btn, .asistente-btn::before, .asistente-btn__icono,
  .asistente-tip, .asistente-tip__frase--cambio, .asistente-tip__punto { animation: none !important; }
}
[data-tema='oscuro'] .asistente-btn { --camisa-a: #a78bfa; --camisa-b: #818cf8; color: #1e1b4b; }

.asistente {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 160;
  width: min(400px, calc(100vw - 24px));
  height: min(620px, calc(100dvh - 36px));
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: entrada 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.asistente[hidden] { display: none; }
.asistente__cabeza {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 12px 12px 18px;
  background: var(--tinta);
  color: var(--crema);
}
.asistente__cabeza > div { flex: 1; min-width: 0; }
.asistente__titulo { font-weight: 700; font-size: var(--t-md); }
.asistente__sub { font-size: var(--t-xs); opacity: 0.8; }
.asistente__icono {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.asistente__icono:hover { background: rgba(255, 255, 255, 0.12); }
.asistente__icono svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.asistente__mensajes {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: color-mix(in srgb, var(--papel) 25%, var(--superficie));
}
.asistente__burbuja {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: var(--t-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.asistente__burbuja--yo { align-self: flex-end; background: var(--tinta); color: var(--crema); border-bottom-right-radius: 4px; }
[data-tema='oscuro'] .asistente__burbuja--yo { background: var(--etiqueta); color: var(--tinta); }
.asistente__burbuja--ia { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borde); border-bottom-left-radius: 4px; max-width: 100%; width: 100%; }
.asistente__burbuja--error { border-color: color-mix(in srgb, var(--aviso) 45%, var(--borde)); }
.asistente__nota { font-size: 11px; color: var(--texto-tenue); margin-top: 4px; }
.asistente__prendas { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.asistente-prenda {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.asistente-prenda__foto { width: 56px; height: 68px; padding: 0; border-radius: 8px; overflow: hidden; background: var(--papel); cursor: pointer; }
.asistente-prenda__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asistente-prenda__info { display: grid; gap: 2px; text-align: left; padding: 0; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.asistente-prenda__nombre { font-weight: 700; font-size: var(--t-sm); }
.asistente-prenda__meta { font-size: 11px; color: var(--texto-tenue); }
.asistente-prenda__agregar {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--crema);
  cursor: pointer;
}
.asistente-prenda__agregar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
[data-tema='oscuro'] .asistente-prenda__agregar { background: var(--etiqueta); color: var(--tinta); }
.asistente__sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.asistente__sugerencias .chip { font-size: var(--t-sm); }

.asistente__escribiendo { display: inline-flex; gap: 4px; width: auto; }
.asistente__escribiendo span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--texto-tenue);
  animation: escribiendo 1s ease-in-out infinite;
}
.asistente__escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.asistente__escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes escribiendo { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.asistente__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--borde); background: var(--superficie); }
.asistente__entrada {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-sm);
}
.asistente__entrada:focus-visible { outline: 2px solid var(--hilo); outline-offset: 1px; }
.asistente__enviar {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--crema);
  cursor: pointer;
}
.asistente__enviar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[data-tema='oscuro'] .asistente__enviar { background: var(--etiqueta); color: var(--tinta); }

@media (max-width: 520px) {
  .asistente-btn { right: 10px; bottom: 10px; }
  .asistente { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .asistente, .asistente__escribiendo span, .ia-pensando::before { animation: none; }
}
@media print { .asistente-btn, .asistente { display: none !important; } }

/* ---------- Pie y página legal ---------- */
/* Espacio abajo para que el botón flotante del asistente no tape el pie */
.pie { padding-bottom: calc(var(--e5) + 72px); }
.pie a { color: inherit; }
@media (max-width: 720px) { .pie__grid { grid-template-columns: 1fr; } }

.consentimiento-datos a { color: inherit; text-decoration: underline; }

.legal__volver { color: var(--tinta); font-weight: 600; text-decoration: none; padding: var(--e3) 0; }
[data-tema='oscuro'] .legal__volver { color: var(--texto); }
.legal { max-width: 760px; line-height: 1.65; }
.legal__fecha { color: var(--texto-tenue); font-size: var(--t-sm); margin-top: var(--e2); }
.legal__indice { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin: var(--e5) 0 var(--e6); font-size: var(--t-sm); }
.legal__indice a { color: var(--tinta); }
[data-tema='oscuro'] .legal__indice a, [data-tema='oscuro'] .legal a { color: var(--etiqueta); }
.legal section { padding-top: var(--e5); scroll-margin-top: var(--e4); }
.legal h2 { font-family: var(--display); font-size: var(--t-lg); margin-bottom: var(--e3); }
.legal h3 { font-size: var(--t-md); margin: var(--e4) 0 var(--e2); }
.legal p, .legal ul { margin-bottom: var(--e3); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: var(--e2); }

/* ---------- Esqueleto de toda la página ----------
   Mientras <html> tiene la clase `cargando` (se pone en el <head> y la
   quita quitarCargando() en app.js), cada pieza fija de la página se ve
   como un bloque que brilla, del mismo tamaño que el contenido real: al
   aparecer el contenido nada salta de lugar. Las zonas que llena app.js
   traen sus propios esqueletos (data-esqueleto) y las fotos también. */
.cargando :is(
  .promo__texto, .promo__accion,
  .marca, .nav__link, .icono-btn, .menu-btn,
  .hero__eyebrow, .hero__titulo, .hero__texto, .hero__mini-indicadores > span, .hero__acciones .btn,
  .carrusel__nota, .carrusel__btn,
  .rotulo, .seccion__titulo, .seccion__texto,
  .paso__num, .paso__titulo, .paso__texto,
  .beneficio__marca, .beneficio__titulo, .beneficio__texto,
  .formulario__titulo, .campo__etiqueta, .campo__sub, .campo__ayuda, .campo__control, .select, .buscador,
  .chip, .opcion, .consentimiento, .resultado-cuenta,
  main .btn
) {
  color: transparent !important;
  text-shadow: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--esq-base) 0%, var(--esq-luz) 50%, var(--esq-base) 100%) !important;
  background-size: 200% 100% !important;
  animation: brillo 1.3s ease-in-out infinite;
  pointer-events: none;
}
/* Lo de adentro (íconos, resaltados, casillas, contadores) no se ve,
   pero sigue ocupando su lugar. */
.cargando :is(
  .promo__texto, .promo__accion,
  .marca, .nav__link, .icono-btn, .menu-btn,
  .hero__eyebrow, .hero__titulo, .hero__texto, .hero__mini-indicadores > span, .hero__acciones .btn,
  .carrusel__nota, .carrusel__btn,
  .rotulo, .seccion__titulo, .seccion__texto,
  .paso__num, .paso__titulo, .paso__texto,
  .beneficio__marca, .beneficio__titulo, .beneficio__texto,
  .formulario__titulo, .campo__etiqueta, .campo__sub, .campo__ayuda, .campo__control, .select, .buscador,
  .chip, .opcion, .consentimiento, .resultado-cuenta,
  main .btn
) * { visibility: hidden; }
.cargando .campo__control::placeholder,
.cargando .buscador input::placeholder { color: transparent; }

/* Títulos y párrafos se ven como renglones, no como un bloque macizo:
   una máscara corta el fondo en franjas del alto de cada línea (1lh). */
.cargando :is(.hero__titulo, .hero__texto, .seccion__titulo, .seccion__texto,
  .paso__texto, .beneficio__texto, .campo__ayuda, .consentimiento) {
  border-radius: 0;
  -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 0.16lh, #000 0.16lh 0.84lh, transparent 0.84lh 1lh);
          mask-image: repeating-linear-gradient(180deg, transparent 0 0.16lh, #000 0.16lh 0.84lh, transparent 0.84lh 1lh);
}

/* El título grande siempre tiene 3 líneas (van con <br>), pero su resaltado
   hace que el alto no sea múltiplo del renglón: se parte en 3 franjas justas. */
.cargando .hero__titulo {
  width: fit-content;
  -webkit-mask-image: linear-gradient(180deg, transparent 0 10%, #000 10% 90%, transparent 90%);
          mask-image: linear-gradient(180deg, transparent 0 10%, #000 10% 90%, transparent 90%);
  -webkit-mask-size: 100% calc(100% / 3);
          mask-size: 100% calc(100% / 3);
}

/* Sobre la barra naranja, el esqueleto va en blanco translúcido. */
.cargando .promo {
  --esq-base: rgba(255, 255, 255, 0.34);
  --esq-luz: rgba(255, 255, 255, 0.16);
}
/* Al terminar, el contenido real entra con un fundido corto. */
@keyframes aparecer-contenido { from { opacity: 0.35; } to { opacity: 1; } }
.recien-cargada :is(.promo, .cabecera, .hero__intro, .seccion__cabeza, .formulario, .filtros, .asistente-btn) { animation: aparecer-contenido 360ms ease; }

@media (prefers-reduced-motion: reduce) {
  .cargando * { animation: none !important; }
  .recien-cargada * { animation: none !important; }
}

/* El botón flotante del asistente vive abajo a la derecha: los controles del
   collage pasan a la izquierda y la página deja espacio al final, para que el
   botón nunca tape algo que se pueda tocar. */
.hero__visual .carrusel__pie { flex-direction: row-reverse; justify-content: flex-end; }
main { padding-bottom: 0; }
main > .vista:not([data-vista='inicio']) {
  padding-bottom: 72px;
}

/* Con el asistente abierto, los avisos salen arriba para no tapar el chat */
body:has(#asistente:not([hidden])) .brindis { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); }
@media (min-width: 720px) { body:has(#asistente:not([hidden])) .brindis { top: 24px; } }

/* ---------- Tema: beige pastel, vinotinto y jean con bordados ----------
   Los colores viven en los tokens de arriba (sección 1). Aquí van los
   detalles de tela: el jean con su tejido en diagonal (sarga) y las
   costuras punteadas con hilo dorado, como las de un pantalón de mezclilla. */
:root {
  --puntada: color-mix(in srgb, var(--tinta) 30%, transparent);
  --sarga: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 5px);
}
[data-tema='oscuro'] { --puntada: color-mix(in srgb, var(--hilo) 35%, transparent); }

/* Barra de promoción: jean índigo con costura dorada arriba y abajo */
.promo {
  position: relative;
  background: var(--sarga), linear-gradient(90deg, var(--jean-oscuro), var(--jean) 55%, var(--jean-oscuro));
  color: var(--crema);
}
.promo::before,
.promo::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  border-top: 1.5px dashed var(--hilo);
  opacity: 0.8;
  pointer-events: none;
}
.promo::before { top: 4px; }
.promo::after { bottom: 4px; }

/* Cabecera y secciones separadas por costuras */
.cabecera { border-bottom: 1.5px dashed var(--puntada); }
.seccion--borde,
.hero { border-bottom: 1.5px dashed var(--puntada); }

/* Portada: fondo beige sutil */
.hero {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--etiqueta) 12%, transparent), transparent 72%),
    var(--fondo);
}
[data-tema='oscuro'] .hero {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--jean) 30%, transparent), transparent 72%),
    var(--fondo);
}

/* "El precio sí.": parche de jean cosido con hilo dorado */
.hero__titulo em {
  background: var(--sarga), var(--etiqueta);
  color: var(--tinta);
  border-radius: 6px;
  outline: 2px dashed var(--hilo);
  outline-offset: -7px;
}
[data-tema='oscuro'] .hero__titulo em { color: #4A1420; }

/* Botones principales: vinotinto con pespunte dorado */
.btn--primario {
  outline: 1.5px dashed color-mix(in srgb, var(--hilo) 85%, transparent);
  outline-offset: -5px;
}
.btn--primario:focus-visible { outline: 3px solid var(--hilo); outline-offset: 3px; }
[data-tema='oscuro'] .btn--primario { outline-color: color-mix(in srgb, #4A1420 55%, transparent); }
[data-tema='oscuro'] .btn--primario:focus-visible { outline: 3px solid var(--hilo); }

/* Tarjetas de trabajo: costura interior discreta */
.filtros,
.ia-tarjeta,
.carrito__grupo,
.pago-pedido,
.panel-aviso,
.ruta {
  outline: 1.5px dashed var(--puntada);
  outline-offset: -7px;
}

/* Etiquetas de descuento como etiqueta de tela cosida */
.prenda__sello { outline: 1px dashed color-mix(in srgb, var(--urgente) 45%, transparent); outline-offset: -3px; }

/* Asistente: botón flotante vinotinto con pespunte, cabecera de jean */
.asistente-btn:focus-visible { outline: 3px solid var(--hilo); outline-offset: 3px; }
.asistente__cabeza {
  background: var(--sarga), linear-gradient(90deg, var(--jean-oscuro), var(--jean));
  border-bottom: 1.5px dashed var(--hilo);
}

/* Pestañas activas y chips marcados con hilo */
.pedidos__pestana[aria-selected='true']::after { background: var(--tinta); }
[data-tema='oscuro'] .pedidos__pestana[aria-selected='true']::after { background: var(--hilo); }

@media print {
  .promo::before, .promo::after { display: none; }
}

/* ---------- Alto de las páginas ----------
   La página es una columna del alto exacto de la pantalla: barra de
   promoción, cabecera y el contenido ocupando el resto. Si el contenido cabe,
   no hay scroll; si no cabe, crece. (Antes el contenido medía "pantalla menos
   68 px", pero promoción y cabecera suman más, y toda página sobraba.) */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; min-height: 0; padding-bottom: 0; }
main > .vista[data-activa='si'] { flex: 1 0 auto; }
main > .vista[data-activa='si'][data-vista='inicio'] { min-height: 0; }
body > main > .vista[data-activa='si']:not([data-vista='inicio']) { padding-bottom: var(--e6); }
/* Sólo si la página hace scroll: espacio para el botón flotante (lo pone app.js) */
html.con-espacio-final body > main { padding-bottom: 56px; }
/* Portada en escritorio: el collage mide lo que queda bajo promoción y
   cabecera (~112 px) y los rellenos de la portada (~190 px), para que la
   portada llene la pantalla sin scroll. */
@media (min-width: 861px) { .collage { height: clamp(360px, calc(100dvh - 310px), 880px); } }
/* Catálogo: menos aire entre filtros y prendas, y al final de la sección */
#catalogo .filtros { margin-bottom: var(--e4); }
body > main > #catalogo.vista[data-activa='si'] { padding-bottom: var(--e5); }
/* Filtros del catálogo en una sola línea en escritorio: el buscador cede
   espacio y cada selector puede angostarse un poco (el texto se recorta).
   Así no queda "Mayor descuento" solo en una segunda fila. */
@media (min-width: 1100px) {
  #catalogo .filtros__fila { flex-wrap: nowrap; }
  #catalogo .buscador { flex: 1 1 300px; min-width: 300px; }
  #catalogo .buscador input { min-width: 0; width: 100%; }
  #catalogo .select { flex: 0 1 auto; min-width: 118px; text-overflow: ellipsis; }
}

/* ---------- Selector de tallas al publicar ----------
   Como en las tiendas de ropa en línea: cuadritos que se marcan, letras
   primero y números después. */
.tallas-selector { border: 0; padding: 0; margin: 0 0 var(--e4); min-width: 0; }
.tallas-selector__grupo { font-size: var(--t-xs); color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.08em; margin: var(--e2) 0 6px; }
.tallas-selector__opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.talla-chip {
  min-width: 46px;
  height: 40px;
  padding: 0 10px;
  border: 1.5px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.talla-chip:hover { border-color: var(--tinta); }
.talla-chip[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.talla-chip:focus-visible { outline: 3px solid var(--etiqueta-oscura); outline-offset: 2px; }
.tallas-selector__otra { display: block; margin-top: var(--e3); max-width: 320px; }
#pp-tallas-resumen { margin-top: var(--e2); }
.talla-quitar {
  font-size: var(--t-xs);
  padding: 2px 8px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--papel);
  color: var(--texto);
}

/* ---------- Apartar: gratis o separar con abono ---------- */
.apartar__modos { border: 0; padding: 0; margin: 0 0 var(--e4); display: grid; gap: var(--e2); min-width: 0; }
.apartar-modo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--e3);
  align-items: center;
  padding: var(--e3) var(--e4);
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.apartar-modo:hover { border-color: var(--tinta-suave); }
.apartar-modo:has(input:checked) { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 5%, var(--superficie)); }
.apartar-modo:has(input:focus-visible) { outline: 3px solid var(--etiqueta-oscura); outline-offset: 2px; }
.apartar-modo input { accent-color: var(--tinta); width: 18px; height: 18px; margin: 0; }
.apartar-modo__texto strong { display: block; font-size: var(--t-sm); }
.apartar-modo__texto small { display: block; color: var(--texto-tenue); font-size: var(--t-xs); line-height: 1.45; margin-top: 2px; }
.apartar-modo__precio { font-family: var(--dato); font-size: var(--t-xs); font-weight: 700; color: var(--tinta); white-space: nowrap; }
.apartar-modo--no { opacity: 0.6; cursor: not-allowed; }

.apartar__abono {
  padding: var(--e4);
  margin-bottom: var(--e4);
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: color-mix(in srgb, var(--papel) 55%, var(--superficie));
}
.apartar__abono[hidden], .apartar__riesgo[hidden] { display: none; }
.abono__fila { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: var(--e3); align-items: center; }
.abono__rango { width: 100%; accent-color: var(--tinta); }
.abono__valor { font-family: var(--dato); font-weight: 700; text-align: right; }
.abono__atajos { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--e2) 0; }
.abono__atajos .chip[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.abono__resumen { font-size: var(--t-sm); margin: var(--e2) 0 var(--e3); }
.abono__reglas { margin: var(--e3) 0 0; padding-left: 1.1rem; font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.55; display: grid; gap: 4px; }
@media (max-width: 480px) {
  .abono__fila { grid-template-columns: 1fr; }
  .apartar-modo { grid-template-columns: auto minmax(0, 1fr); }
  .apartar-modo__precio { grid-column: 2; }
}

/* Animación de rasguño del ticket */
@keyframes rasguño {
  0% {
    transform: translateX(0) translateY(0) rotateZ(0deg) scaleY(1);
    opacity: 1;
    filter: brightness(1);
  }
  20% {
    transform: translateX(2px) translateY(-2px) rotateZ(-0.5deg) scaleY(0.98);
    filter: brightness(1.05);
  }
  40% {
    transform: translateX(-3px) translateY(-8px) rotateZ(1deg) scaleY(0.96);
    filter: brightness(1.1);
  }
  60% {
    transform: translateX(4px) translateY(-15px) rotateZ(-1.5deg) scaleY(0.92);
    opacity: 0.8;
    filter: brightness(0.95);
  }
  80% {
    transform: translateX(-2px) translateY(-25px) rotateZ(2deg) scaleY(0.85);
    opacity: 0.4;
    filter: brightness(0.9);
  }
  100% {
    transform: translateX(8px) translateY(-40px) rotateZ(-3deg) scaleY(0.7);
    opacity: 0;
    filter: brightness(1);
  }
}

/* ---------- Validar el código del cliente (panel de tienda) ---------- */
.validar-codigo {
  padding: var(--e4);
  margin-bottom: var(--e5);
  border: 1.5px solid var(--tinta);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tinta) 4%, var(--superficie));
}
.validar-codigo__titulo { font-weight: 700; font-size: var(--t-md); }
.validar-codigo__fila { display: flex; gap: var(--e2); margin-top: var(--e3); }
.validar-codigo__fila .campo__control { flex: 1; min-width: 0; font-family: var(--dato); text-transform: uppercase; letter-spacing: 0.08em; }
.validacion { margin-top: var(--e3); padding: var(--e3) var(--e4); border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie); }
.validacion--ok { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 8%, var(--superficie)); }
.validacion--aviso { border-color: var(--aviso); background: color-mix(in srgb, var(--aviso) 8%, var(--superficie)); }
.validacion--error { border-color: var(--urgente); background: color-mix(in srgb, var(--urgente) 7%, var(--superficie)); }
.validacion__titulo { font-weight: 700; }
.validacion--ok .validacion__titulo { color: var(--verde); }
.validacion--aviso .validacion__titulo { color: var(--aviso); }
.validacion--error .validacion__titulo { color: var(--urgente); }
.validacion__texto { font-size: var(--t-sm); margin-top: 4px; line-height: 1.5; }
.validacion .btn { margin-top: var(--e3); }

/* ---------- Íconos de dirección y horario de las tiendas ----------
   Como un parche bordado: tela beige con tejido en diagonal, borde de
   puntadas en hilo dorado y el dibujo cosido con puntada corrida. */
.tienda__dato { align-items: center; }
.tienda__icono {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--tinta) 5%, transparent) 0 1.5px, transparent 1.5px 4px),
    var(--papel);
  color: var(--tinta);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 18%, transparent), 0 1px 2px rgba(40, 16, 20, 0.12);
}
/* Borde de puntadas del parche */
.tienda__icono::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1.5px dashed var(--hilo);
  pointer-events: none;
}
.tienda__icono svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2.6 1.7;
}
[data-tema='oscuro'] .tienda__icono { background: var(--papel); color: var(--crema); box-shadow: 0 0 0 1px var(--borde-fuerte); }

/* ---------- Menú "Mi cuenta": botón con nombre y opciones por grupos ----------
   El botón dice "Mi cuenta" para que se entienda que ahí están guardados,
   pedidos, alertas, panel y tema. Dentro, cada grupo tiene su título y cada
   opción una línea que explica para qué sirve. */
.cuenta-btn {
  width: auto;
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 10px;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: var(--sombra-suave);
}
.cuenta-btn:hover { transform: none; border-color: var(--tinta); color: var(--tinta); background: var(--papel-hueso); }
.cuenta-btn .icono-svg { width: 22px; height: 22px; }
.cuenta-btn__texto { font-size: var(--t-sm); font-weight: 700; color: var(--texto); white-space: nowrap; }
.cuenta-btn__flecha { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transicion); }
#btn-cuenta[aria-expanded='true'] { background: var(--papel); border-color: var(--tinta); }
#btn-cuenta[aria-expanded='true'] .cuenta-btn__flecha { transform: rotate(180deg); }
.cuenta-btn .desplegable__punto { top: 4px; right: auto; left: 26px; }

.desplegable__panel {
  min-width: 290px;
  width: min(320px, calc(100vw - 24px));
  padding: 12px;
  gap: 4px;
  border-radius: 16px;
}
.desplegable__cabeza {
  padding: 14px 12px 16px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 8px;
}
.desplegable__titulo {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--texto);
  letter-spacing: -0.5px;
}
.desplegable__sub {
  font-size: 12px;
  color: var(--texto-tenue);
  margin-top: 4px;
  line-height: 1.4;
}
.desplegable__grupo {
  padding: 12px 12px 6px;
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 700;
}
.desplegable__grupo:not(:first-of-type) {
  margin-top: 8px;
  border-top: 1px solid var(--borde);
  padding-top: 14px;
}
.desplegable__item {
  align-items: center;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  transition: all var(--transicion);
  cursor: pointer;
}
.desplegable__item:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(147, 51, 234, 0.08) 100%);
  transform: translateX(2px);
}
.desplegable__item .icono-svg {
  flex: 0 0 22px;
  color: var(--tinta);
  transition: transform var(--transicion);
}
.desplegable__item:hover .icono-svg {
  transform: scale(1.1);
}
.desplegable__texto {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
}
.desplegable__texto > span:first-child {
  font-weight: 600;
  font-size: var(--t-sm);
}
.desplegable__texto small {
  font-size: 11px;
  font-weight: 500;
  color: var(--texto-tenue);
}
[data-tema='oscuro'] .desplegable__item .icono-svg { color: var(--hilo); }

/* En celular el botón queda como ícono (con la flechita) para no apretar la cabecera */
@media (max-width: 720px) {
  .cuenta-btn { padding: 0 6px; height: 38px; gap: 2px; }
  .cuenta-btn__texto { display: none; }
  .cuenta-btn .desplegable__punto { left: 22px; }
  #menu-cuenta-lista {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 78px);
    right: max(12px, env(safe-area-inset-right, 0px));
    left: auto;
    width: min(320px, calc(100vw - 48px));
    min-width: 0;
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
[data-tema='oscuro'] #btn-cuenta[aria-expanded='true'] { color: var(--crema); border-color: var(--hilo); }
[data-tema='oscuro'] .cuenta-btn:hover { color: var(--crema); border-color: var(--hilo); }

/* ---------- Estrellas y calificación de las tiendas ----------
   Dos capas de ★: la gris de base y la dorada recortada al porcentaje,
   así 4,6 se ve como cuatro estrellas y media. */
.estrellas { position: relative; display: inline-block; line-height: 1; letter-spacing: 1px; font-size: 0.85em; white-space: nowrap; }
.estrellas__base { color: color-mix(in srgb, var(--texto) 18%, transparent); }
.estrellas__llenas { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #E0A526; }
.estrellas--grandes { font-size: 1.25rem; letter-spacing: 2px; }
.calificacion { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--t-xs); color: var(--texto-tenue); }
.calificacion strong { color: var(--texto); font-weight: 700; }
.calificacion--vacia { font-style: italic; }
.tienda__calificacion { display: flex; margin: -2px 0 4px; }
.vitrina__calificacion { margin-bottom: var(--e2); }

/* ---------- Reseñas (dentro de la vitrina de la tienda) ---------- */
.resenas { margin-top: var(--e6); padding-top: var(--e5); border-top: 1.5px dashed var(--borde); }
.resenas__titulo { font-family: var(--display); font-size: var(--t-md); margin-bottom: var(--e4); }
.resenas__resumen { display: grid; grid-template-columns: auto 1fr; gap: var(--e5); align-items: center; padding: var(--e4); border-radius: 14px; background: var(--papel); margin-bottom: var(--e4); }
.resenas__nota { display: grid; justify-items: center; gap: 4px; font-size: var(--t-xs); color: var(--texto-tenue); }
.resenas__nota strong { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--texto); }
.resenas__barras { display: grid; gap: 4px; }
.resenas__barra { display: grid; grid-template-columns: 2rem 1fr 1.2rem; align-items: center; gap: var(--e2); font-size: var(--t-xs); color: var(--texto-tenue); }
.resenas__pista { height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--texto) 10%, transparent); overflow: hidden; }
.resenas__pista > span { display: block; height: 100%; border-radius: inherit; background: #E0A526; }
.resenas__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.resena { padding: var(--e3) var(--e4); border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
.resena__cabeza { display: flex; gap: var(--e3); align-items: center; margin-bottom: var(--e2); }
.resena__avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(145deg, var(--tinta-suave), var(--tinta)); color: var(--crema); font-weight: 700; }
.resena__autor { font-weight: 700; font-size: var(--t-sm); }
.resena__verificada, .resena__tuya { margin-left: 4px; padding: 2px 7px; border-radius: 99px; font-size: 10px; font-weight: 600; vertical-align: 1px; }
.resena__verificada { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); }
.resena__tuya { background: color-mix(in srgb, var(--tinta) 12%, transparent); color: var(--tinta); }
[data-tema='oscuro'] .resena__tuya { color: var(--etiqueta); }
.resena__meta { font-size: var(--t-xs); color: var(--texto-tenue); }
.resena__texto { font-size: var(--t-sm); line-height: 1.5; }
.resenas__vacio { color: var(--texto-tenue); font-size: var(--t-sm); }
.resenas__nueva { margin-top: var(--e4); }
.resenas__nueva summary { display: inline-flex; cursor: pointer; font-weight: 600; font-size: var(--t-sm); color: var(--tinta); padding: var(--e2) 0; }
[data-tema='oscuro'] .resenas__nueva summary { color: var(--etiqueta); }
.resenas__form { display: grid; gap: var(--e2); margin-top: var(--e2); }
.resenas__form .btn { justify-self: start; margin-top: var(--e2); }
.resenas__error { color: var(--urgente); font-size: var(--t-xs); }
/* Puntaje: radios en orden invertido para que al pasar el mouse se
   iluminen las estrellas hasta la elegida (row-reverse + selector ~). */
.resenas__puntaje { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; padding: 0; margin: 0 0 var(--e2); }
.resenas__puntaje legend { font-size: var(--t-xs); font-weight: 600; color: var(--texto-tenue); margin-bottom: 4px; }
.resenas__puntaje input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.resenas__puntaje label { font-size: 1.9rem; line-height: 1; cursor: pointer; color: color-mix(in srgb, var(--texto) 18%, transparent); transition: color var(--transicion), transform var(--transicion); }
.resenas__puntaje label:hover,
.resenas__puntaje label:hover ~ label,
.resenas__puntaje input:checked ~ label { color: #E0A526; }
.resenas__puntaje label:hover { transform: scale(1.15); }
.resenas__puntaje input:focus-visible + label { outline: 2px solid var(--hilo); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 520px) {
  .resenas__resumen { grid-template-columns: 1fr; }
}

/* ---------- Botón de WhatsApp ---------- */
.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #1FAF57;
  border: 1px solid #1A9A4C;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(31, 175, 87, 0.7);
  transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.btn-wa:hover { background: #1A9A4C; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(31, 175, 87, 0.8); }
.btn-wa:focus-visible { outline: 3px solid color-mix(in srgb, #1FAF57 45%, transparent); outline-offset: 2px; }
.btn-wa__icono { width: 1.2rem; height: 1.2rem; fill: currentColor; flex: none; }
.ficha__wa { width: 100%; margin-top: var(--e2); }

/* ---------- Guía de tallas ---------- */
.ficha__rotulo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.ficha__guia { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
[data-tema='oscuro'] .ficha__guia { color: var(--etiqueta); }
.ficha__guia svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.guia { display: grid; gap: var(--e4); }
.guia__pestanas { display: inline-flex; padding: 4px; gap: 4px; border-radius: 99px; background: var(--papel); justify-self: start; }
.guia__pestana { padding: 6px 16px; border: 0; border-radius: 99px; background: none; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--texto-tenue); cursor: pointer; }
.guia__pestana[aria-selected='true'] { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.guia__sub { font-weight: 700; }
.guia__tabla { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; font-size: var(--t-sm); text-align: center; }
.guia__tabla[hidden] { display: none; }
.guia__tabla th, .guia__tabla td { padding: 10px 8px; border-bottom: 1px solid var(--borde); }
.guia__tabla tbody tr:last-child > * { border-bottom: 0; }
.guia__tabla thead th { background: var(--papel); font-size: var(--t-xs); font-weight: 700; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.04em; }
.guia__tabla tbody th { font-family: var(--dato); font-weight: 700; }
.guia__fila--disponible > * { background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.guia__fila--disponible th { color: var(--tinta); }
[data-tema='oscuro'] .guia__fila--disponible th { color: var(--etiqueta); }
.guia__nota { font-size: var(--t-xs); color: var(--texto-tenue); margin-top: calc(var(--e2) * -1); }
.guia__marca-dispo { padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--tinta) 10%, transparent); color: var(--texto); font-weight: 600; }
.guia__como { padding: var(--e4); border-radius: 12px; background: var(--papel); font-size: var(--t-sm); }
.guia__como-titulo { font-weight: 700; margin-bottom: var(--e2); }
.guia__como ol { margin: 0 0 var(--e2); padding-left: 1.2rem; display: grid; gap: 4px; }
.guia__como-tip { font-size: var(--t-xs); color: var(--texto-tenue); }

/* =========================================================================
   Rediseño del catálogo y ajustes de portada. Va al final para ganarle a
   las capas anteriores; sólo afecta las tarjetas de .rejilla, no la ficha.
   ========================================================================= */

/* Descuento como etiqueta de tela cosida */
.rejilla .prenda__sello {
  top: 10px;
  left: 10px;
  padding: 4px 9px 5px;
  border-radius: 4px;
  background: var(--tinta);
  color: var(--crema);
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  outline: 1px dashed var(--hilo);
  outline-offset: -3px;
  transform: rotate(-3deg);
  box-shadow: 0 3px 8px rgba(40, 16, 20, 0.25);
}
.rejilla .prenda--agotada .prenda__sello { background: var(--texto-tenue); transform: none; }

/* Aviso de urgencia sobre la foto */
.prenda__aviso {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(27, 20, 22, 0.78);
  color: var(--crema);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.rejilla .prenda__precio { margin-bottom: 0; }
.prenda__ahorro { margin-bottom: var(--e2); color: var(--verde); font-size: var(--t-xs); font-weight: 600; }

/* Tallas como texto: la elegida se subraya en vinotinto */
.rejilla .prenda__tallas { gap: 0.1rem; margin-top: 0; }
.rejilla .talla--mini {
  min-width: 0;
  height: auto;
  padding: 2px 6px;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: var(--texto-tenue);
  font-size: 0.75rem;
  transform: none;
}
.rejilla .talla--mini:hover { color: var(--tinta); background: var(--papel); transform: none; }
.rejilla .talla--mini[aria-checked='true'] {
  background: none;
  box-shadow: none;
  color: var(--tinta);
  font-weight: 700;
  text-decoration: underline 2px;
  text-underline-offset: 4px;
}
[data-tema='oscuro'] .rejilla .talla--mini[aria-checked='true'] { color: var(--etiqueta); background: none; box-shadow: none; }

/* En pantallas táctiles las tallas son botones de 40 px, fáciles de tocar;
   la palabra "Talla" se oculta para que quepan (el grupo ya tiene su nombre). */
@media (pointer: coarse), (max-width: 600px) {
  .rejilla .prenda__tallas { gap: 6px; margin: 2px 0 4px; }
  .rejilla .prenda__tallas-label { display: none; }
  .rejilla .talla--mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 1.5px solid var(--borde-fuerte);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  .rejilla .talla--mini:hover { background: var(--superficie); }
  .rejilla .talla--mini[aria-checked='true'] {
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--crema);
    text-decoration: none;
  }
  [data-tema='oscuro'] .rejilla .talla--mini { border-color: var(--borde-fuerte); }
  [data-tema='oscuro'] .rejilla .talla--mini[aria-checked='true'] { background: var(--etiqueta); border-color: var(--etiqueta); color: var(--tinta); }
}

/* "Agregar" de contorno; se llena al pasar el mouse */
.rejilla .prenda__acciones .btn--primario:not(.btn--en-carrito) {
  min-height: 36px;
  background: transparent;
  color: var(--tinta);
  border: 1.5px solid var(--tinta);
  outline: none;
}
.rejilla .prenda__acciones .btn--primario:not(.btn--en-carrito):hover { background: var(--tinta); color: var(--crema); }
[data-tema='oscuro'] .rejilla .prenda__acciones .btn--primario:not(.btn--en-carrito) { color: var(--etiqueta); border-color: var(--etiqueta); }
[data-tema='oscuro'] .rejilla .prenda__acciones .btn--primario:not(.btn--en-carrito):hover { background: var(--etiqueta); color: #2A0F17; }

/* Filtros: buscador, "Más filtros" y orden a la vista; el resto se despliega */
@media (min-width: 601px) {
  #catalogo .filtros__fila { flex-wrap: wrap; }
  #catalogo .filtros__fila .select:not(#orden) { order: 2; flex: 1 1 180px; }
  #catalogo .filtros__fila #orden { order: 1; }
  #catalogo .filtros__fila[data-filtros-abiertos='no'] .select:not(#orden) { display: none; }
  #catalogo .filtros__toggle {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    gap: 0.45rem;
    padding: 0 1rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }
  #catalogo .filtros__toggle:hover { background: var(--papel); }
  #catalogo .filtros__toggle[aria-expanded='true'] { border-color: var(--tinta); background: var(--papel); }
  .filtros__toggle-icono, .filtros__toggle-icono svg { width: 1.1rem; height: 1.1rem; }
  .filtros__toggle-icono svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .filtros__toggle-flecha { transition: transform var(--transicion); }
  .filtros__toggle[aria-expanded='true'] .filtros__toggle-flecha { transform: rotate(180deg); }
}
@media (min-width: 1100px) {
  #catalogo .filtros__fila { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  #catalogo .filtros__toggle { grid-column: 1 / -1; }
}

/* El pie ya deja espacio para el botón flotante; sin esto queda una franja
   vacía entre la última sección y el pie. */
html.con-espacio-final body > main { padding-bottom: 0; }

/* Título de la portada un poco más abierto y con más aire */
.hero__titulo { font-stretch: 84%; letter-spacing: -0.03em; line-height: 0.95; }

/* Celular: dos columnas de prendas */
@media (max-width: 600px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e3); }
  .rejilla .prenda__nombre { font-size: 0.8rem; }
  .rejilla .prenda__precio-nuevo { font-size: var(--t-base); }
  .prenda__aviso { font-size: 0.6rem; padding: 2px 7px; }
  .rejilla .prenda__sello { font-size: 0.7rem; }
}

/* ---------- Cabecera con identidad propia ----------
   Superficie blanca que se separa del fondo beige, con un borde fino y una
   sombra suave (sin franja de color abajo). En pantallas
   pequeñas los íconos van juntos en una bandeja y el menú es el botón
   vinotinto, la acción principal. */
.cabecera {
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 10px 24px -18px rgba(58, 42, 45, 0.45);
}
[data-tema='oscuro'] .cabecera { background: color-mix(in srgb, var(--superficie) 94%, transparent); }

@media (max-width: 860px) {
  .cabecera__fila { height: 70px; }
  .cabecera__acciones {
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--papel);
    box-shadow: inset 0 1px 2px rgba(58, 42, 45, 0.08);
  }
  .cabecera__acciones .icono-btn { width: 40px; height: 40px; border-radius: 50%; }
  .cabecera__acciones .icono-btn .icono-svg { width: 22px; height: 22px; }
  .cabecera__acciones .icono-btn:hover { background: var(--superficie); }
  .cabecera__acciones .cuenta-btn { width: auto; height: 40px; border-color: transparent; background: var(--superficie); box-shadow: 0 1px 3px rgba(58, 42, 45, 0.12); }
  .cabecera__acciones .menu-btn {
    background: linear-gradient(145deg, var(--tinta-suave), var(--tinta));
    color: var(--crema);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 8px -3px rgba(140, 47, 67, 0.6);
  }
  .cabecera__acciones .menu-btn:hover { background: var(--tinta); color: var(--crema); }
  .cabecera__acciones .menu-btn[aria-expanded='true'] { background: #1A2A42; }
  /* El menú desplegado sale justo debajo de la cabecera */
  .nav { top: 100%; background: var(--superficie); border-bottom: 1.5px dashed var(--puntada); box-shadow: 0 16px 24px -16px rgba(58, 42, 45, 0.4); }
  .contador-burbuja { box-shadow: 0 0 0 2px var(--papel); }
}
@media (max-width: 400px) {
  .marca__lema { display: none; }
}

/* ---------- Bordado al pasar sobre una prenda ----------
   La tarjeta aparece sobre un parche blanco y una costura vinotinto la
   rodea, con una segunda puntada dorada por dentro, como un bordado. El
   parche y la costura sobresalen 14 px (el espacio entre tarjetas es
   mayor), por eso la tarjeta deja de recortar lo que se sale. También se
   ve al llegar con el teclado. */
.rejilla .prenda { overflow: visible; isolation: isolate; }
.rejilla .prenda::before,
.rejilla .prenda::after {
  content: '';
  position: absolute;
  inset: -14px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Parche de tela */
.rejilla .prenda::before {
  z-index: -1;
  border-radius: 20px;
  background: var(--superficie);
  box-shadow: 0 18px 34px -18px rgba(140, 47, 67, 0.45);
}
/* Costura: puntada vinotinto por fuera y una dorada más fina por dentro */
.rejilla .prenda::after {
  inset: -10px;
  border-radius: 16px;
  border: 2px dashed var(--tinta);
  outline: 1.5px dashed color-mix(in srgb, var(--hilo) 85%, transparent);
  outline-offset: -7px;
}
[data-tema='oscuro'] .rejilla .prenda::after { border-color: var(--etiqueta); }
.rejilla .prenda:hover::before,
.rejilla .prenda:hover::after,
.rejilla .prenda:focus-within::before,
.rejilla .prenda:focus-within::after {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  /* En pantallas táctiles no hay "pasar encima": sin bordado al tocar */
  .rejilla .prenda:hover::before,
  .rejilla .prenda:hover::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rejilla .prenda::before, .rejilla .prenda::after { transition: opacity 120ms linear; transform: none; }
}
/* Ventanas angostas (≤600 px): hay sólo 12 px entre columnas, así que el
   parche y la costura se ciñen más para no pisar la tarjeta vecina. */
@media (max-width: 600px) {
  .rejilla .prenda::before { inset: -6px; border-radius: 14px; }
  .rejilla .prenda::after { inset: -4px; border-radius: 12px; outline-offset: -5px; }
}

/* ---------- Etiqueta "Ver más ofertas": que se note que es un botón ----------
   La etiqueta, su brillo y el sello con flecha se balancean juntos (la pieza
   gira desde el nudo del cordón). Un destello la recorre cada pocos segundos,
   recortado a la forma de la etiqueta con la misma imagen como máscara, y el
   sello late. Al pasar el mouse da un tirón. */
.btn-etiqueta { position: relative; }
.btn-etiqueta__pieza {
  position: relative;
  display: block;
  transform-origin: 8.44% 9.63%;
  animation: etiqueta-balanceo 4.5s ease-in-out infinite;
  filter: drop-shadow(0 14px 16px rgba(92, 24, 40, 0.28));
  transition: filter var(--transicion);
}
.btn-etiqueta__img { animation: none; transform: none; }

.btn-etiqueta__brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 253, 249, 0.42) 48%, rgba(255, 253, 249, 0.12) 54%, transparent 62%) no-repeat;
  background-size: 250% 100%;
  background-position: 130% 0;
  -webkit-mask: url(../img/ver_ofertas_vino_600.webp) center / 100% 100% no-repeat;
  mask: url(../img/ver_ofertas_vino_600.webp) center / 100% 100% no-repeat;
  animation: etiqueta-destello 5s ease-in-out 1.2s infinite;
}
@keyframes etiqueta-destello {
  0%, 55% { background-position: 130% 0; }
  85%, 100% { background-position: -30% 0; }
}

/* Al pasar el mouse o llegar con el teclado: tirón, más luz y flecha adelante */
.btn-etiqueta:hover .btn-etiqueta__pieza,
.btn-etiqueta:focus-visible .btn-etiqueta__pieza {
  animation: etiqueta-tiron 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(0 18px 20px rgba(92, 24, 40, 0.38)) brightness(1.05) saturate(1.08);
}
.btn-etiqueta:hover .btn-etiqueta__img,
.btn-etiqueta:focus-visible .btn-etiqueta__img { filter: none; }
.btn-etiqueta:active .btn-etiqueta__pieza { filter: drop-shadow(0 8px 10px rgba(92, 24, 40, 0.3)) brightness(0.96); }
@keyframes etiqueta-tiron {
  0% { transform: rotate(0); }
  35% { transform: rotate(-7deg); }
  65% { transform: rotate(3deg); }
  100% { transform: rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-etiqueta__pieza, .btn-etiqueta__brillo { animation: none !important; }
}

/* =========================================================================
   AJUSTE DE PALETA Y TIPOGRAFÍA
   Un sistema corto de acentos:
     vinotinto  → marca y acciones principales
     jean       → barra de ofertas, pretina, pie y detalles secundarios
     dorado hilo→ costuras y estrellas (un solo tono)
     ladrillo   → sólo sellos de descuento
     verde      → sólo "Ahorras" y "Abierta" (y WhatsApp, por reconocimiento)
   JetBrains Mono queda sólo para cifras y códigos; el resto usa Sora.
   ========================================================================= */

/* 1. Asistente: de morado a vinotinto con costura dorada */
.asistente-btn {
  --camisa-a: var(--tinta-suave);
  --camisa-b: var(--tinta);
  color: var(--crema);
  filter: drop-shadow(0 10px 14px rgba(140, 47, 67, 0.35));
}
.asistente-btn:hover { filter: drop-shadow(0 14px 18px rgba(140, 47, 67, 0.45)); }
.asistente-btn::before { background: radial-gradient(closest-side, rgba(210, 154, 60, 0.5), transparent); }
.asistente-btn--arrastrando { filter: drop-shadow(0 18px 22px rgba(140, 47, 67, 0.5)); }
[data-tema='oscuro'] .asistente-btn { --camisa-a: #4A6FA3; --camisa-b: #233344; color: var(--crema); }
.asistente-tip__marca { color: var(--tinta); }
[data-tema='oscuro'] .asistente-tip__marca { color: var(--etiqueta); }
.desplegable__item:hover { background: color-mix(in srgb, var(--tinta) 7%, transparent); }

/* 2. Estrellas y barras de reseñas con el mismo dorado del hilo */
.estrellas__llenas,
.resenas__puntaje label:hover,
.resenas__puntaje label:hover ~ label,
.resenas__puntaje input:checked ~ label { color: var(--hilo); }
.resenas__pista > span { background: var(--hilo); }

/* 3. "El precio sí.": parche vinotinto con letras crema y pespunte dorado,
   lo más fuerte de la página */
.hero__titulo em {
  background: var(--sarga), linear-gradient(145deg, var(--tinta-suave), var(--tinta));
  color: var(--crema);
  outline: 2px dashed var(--hilo);
  outline-offset: -7px;
  box-shadow: 0 10px 22px -12px rgba(140, 47, 67, 0.7);
}
[data-tema='oscuro'] .hero__titulo em {
  background: var(--sarga), linear-gradient(145deg, #3B4F6B, #233344);
  color: var(--crema);
}

/* 5. Menos letra de máquina: textos y etiquetas pasan a Sora. Se quedan en
   mono los precios de pago, los códigos de pedido, las tablas del panel y
   las tallas de la guía. */
:is(
  .marca__lema, .resultado-cuenta, .prenda__stock, .prenda__tallas-label,
  .talla--mini, .prenda__temporada, .precio-viejo, .ahorro, .proxima-rebaja,
  .prenda__detalle, .ruta__dato-valor, .ruta__dato-etq, .tienda__foto-etiqueta,
  .tienda__insignia, .tienda__cifra-valor, .tienda__cifra-etq, .tienda__mas,
  .beneficio__marca, .campo__etiqueta, .pie__titulo, .pie__base,
  .desplegable__grupo, .cifra__etiqueta, .rotulo
) {
  font-family: var(--cuerpo);
  font-variant-numeric: tabular-nums;
}
.marca__lema { letter-spacing: 0.12em; font-weight: 600; }
.tienda__foto-etiqueta, .tienda__insignia { letter-spacing: 0.04em; font-weight: 700; }
.tienda__cifra-valor { font-weight: 700; letter-spacing: -0.01em; }

/* Pie en azul marino TAURA, con una costura dorada arriba y espacio para el
   botón flotante del asistente. */
.pie {
  position: relative;
  color: var(--crema);
  padding-top: var(--e6);
}
.pie::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--hilo) 0 8px, transparent 8px 14px);
  opacity: 0.85;
}
.pie__grid { gap: var(--e5); padding-bottom: var(--e4); border-bottom-color: rgba(247, 243, 232, 0.18); }
.pie__titulo { margin-bottom: var(--e2); opacity: 0.75; }
.pie__lista { gap: 6px; }
.pie__base { padding-top: var(--e3); opacity: 0.7; }

/* ---------- Barra de avisos: vinotinto oscuro, delgada y rotativa ----------
   Forma una sola pieza con la marca (antes era un bloque de jean aparte).
   Sobre la parte más clara (#1A2A42) el crema da ~11:1 y el dorado de las
   cifras ~8:1 de contraste (AAA). Una costura
   dorada tenue abajo; la de arriba se quita. */
.promo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--e3);
  min-height: 34px;
  padding: 4px 44px;
  background: linear-gradient(90deg, #131E2E, #1A2A42 50%, #131E2E);
  color: var(--crema);
  text-shadow: none;
  font-size: 0.8rem;
  overflow: hidden;
}
.promo[hidden] { display: none; }
.promo::before { display: none; }
.promo::after { left: 0; right: 0; bottom: 2px; border-top: 1px dashed var(--hilo); opacity: 0.45; }
.promo__enlace {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: opacity 260ms ease, transform 260ms ease;
}
.promo__enlace--sale { opacity: 0; transform: translateY(-6px); }
.promo__enlace--entra { animation: promo-entra 320ms ease-out; }
@keyframes promo-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.promo__texto { font-weight: 500; opacity: 0.95; }
.promo__texto strong { font-weight: 700; color: #F5D9A8; }
.promo__accion { font-size: 0.78rem; font-weight: 700; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.promo__enlace:hover .promo__accion { text-underline-offset: 5px; }
.promo__enlace:focus-visible { outline: 2px solid var(--hilo); outline-offset: 3px; border-radius: 4px; }
/* Puntos: cuál aviso se está viendo */
.promo__puntos { position: absolute; left: 16px; top: 50%; translate: 0 -50%; display: flex; gap: 5px; }
.promo__puntos span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 253, 249, 0.35); transition: background var(--transicion), width var(--transicion); }
.promo__puntos .promo__punto--activo { width: 14px; border-radius: 3px; background: var(--hilo); }
.promo__cerrar {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--crema);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--transicion), background var(--transicion);
}
.promo__cerrar:hover { opacity: 1; background: rgba(255, 253, 249, 0.12); }
.promo__cerrar:focus-visible { outline: 2px solid var(--hilo); opacity: 1; }
.promo__cerrar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cargando .promo { --esq-base: rgba(255, 253, 249, 0.3); --esq-luz: rgba(255, 253, 249, 0.14); }
@media (max-width: 600px) {
  .promo { padding: 4px 38px 4px 34px; font-size: 0.74rem; }
  .promo__accion { display: none; }
  .promo__puntos { left: 10px; flex-direction: column; gap: 3px; }
  .promo__puntos span { width: 4px; height: 4px; }
  .promo__puntos .promo__punto--activo { width: 4px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo__enlace { transition: none; }
  .promo__enlace--entra { animation: none; }
}

/* El tema oscuro de TAURA está definido arriba (bloque principal de tokens).
   Aquí abajo solo quedan los ajustes finos (tallas, botones) que ese tema
   necesita para contrastes específicos. */

/* Sobre el rosa vino el texto va en vino muy oscuro (contraste ~8:1) */
[data-tema='oscuro'] :is(
  .talla:not(.talla--mini)[aria-checked='true'],
  .pedidos__pestana[aria-selected='true'] span, .pedido__accion--fuerte,
  .carrito-vuela, .brindis[data-tipo='actualizacion'] .brindis__accion,
  .nav__link--tienda:hover, .tienda__insignia, .beneficio__marca,
  .rejilla .prenda__acciones .btn--primario:not(.btn--en-carrito):hover
) { color: #2A0F17; }
/* Tallas pequeñas: fuera del catálogo llevan fondo rosa; en el catálogo de
   escritorio la elegida va subrayada sin fondo, y sólo en celular (≤600 px)
   vuelve el fondo. */
[data-tema='oscuro'] .talla--mini[aria-checked='true']:not(.rejilla *) { color: #2A0F17; }
@media (max-width: 600px) {
  [data-tema='oscuro'] .rejilla .talla--mini[aria-checked='true'] { color: #2A0F17; }
}

/* Botones principales: vinotinto luminoso con letras crema y pespunte
   dorado, igual que en el tema claro (antes eran celestes con letra negra) */
[data-tema='oscuro'] .btn--primario,
[data-tema='oscuro'] .asistente__enviar,
[data-tema='oscuro'] .asistente-prenda__agregar,
[data-tema='oscuro'] .asistente__burbuja--yo {
  background: linear-gradient(145deg, var(--tinta-suave), var(--tinta));
  color: var(--crema);
}
[data-tema='oscuro'] .btn--primario {
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.7);
  outline-color: color-mix(in srgb, var(--hilo) 70%, transparent);
}
[data-tema='oscuro'] .btn--primario:hover { background: var(--tinta-suave); color: var(--crema); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.8); }

/* Portada: sin el velo azulado; un resplandor vino muy tenue arriba */
[data-tema='oscuro'] .hero {
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(166, 58, 82, 0.16), transparent 70%),
    var(--fondo);
}

/* Tarjetas y paneles: se despegan del fondo con una sombra oscura */
[data-tema='oscuro'] :is(.tienda, .filtros, .ruta, .resena, .modal__caja, .asistente-tip) {
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.8);
}
[data-tema='oscuro'] .chip,
[data-tema='oscuro'] .hero__mini-indicadores span { border-color: var(--borde); }

/* Íconos de las burbujas de la portada y el ojete, con el vino nuevo */
[data-tema='oscuro'] .indicador__icono { background: linear-gradient(145deg, var(--tinta-suave), var(--tinta)); }

/* Cabecera: borde visible y fondo un escalón sobre el de la página */
[data-tema='oscuro'] .cabecera { background: color-mix(in srgb, var(--superficie) 94%, transparent); border-bottom-color: var(--borde); }

/* ---------- Muestras de color (prendas en varios colores) ----------
   El botón es el área de toque (28 px; 36 px en celular, 40 px en la
   ficha) y el círculo de color va dentro. La elegida lleva un anillo
   vinotinto; la agotada, una raya diagonal. */
.prenda__colores,
.ficha__colores { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.prenda__colores { margin: 2px 0 4px -5px; }
.muestra {
  --lado: 28px;
  --punto: 18px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--lado);
  height: var(--lado);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.muestra::before {
  content: '';
  width: var(--punto);
  height: var(--punto);
  border-radius: 50%;
  background: var(--muestra);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.muestra:hover::before { transform: scale(1.12); }
.muestra[aria-checked='true']::before {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--superficie), 0 0 0 3.5px var(--tinta);
}
[data-tema='oscuro'] .muestra[aria-checked='true']::before {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 0 2px var(--superficie), 0 0 0 3.5px var(--etiqueta);
}
.muestra--agotada::after {
  content: '';
  position: absolute;
  width: calc(var(--punto) + 2px);
  height: 1.5px;
  background: var(--texto-tenue);
  transform: rotate(-45deg);
}
.muestra:focus-visible { outline: 2px solid var(--hilo); outline-offset: 1px; }
.muestras__nombre { margin-left: 6px; font-size: var(--t-xs); color: var(--texto-tenue); }

/* En la ficha: más grandes y con el nombre del color en el rótulo */
.ficha__colores { gap: 6px; margin-left: -4px; }
.ficha__colores .muestra { --lado: 40px; --punto: 30px; }
.ficha__colores .muestras__nombre { display: none; }
.ficha__color-nombre { color: var(--texto); font-weight: 700; }

@media (max-width: 600px) {
  .prenda__colores .muestra { --lado: 36px; --punto: 20px; }
  .prenda__colores { margin-left: -8px; }
  .prenda__colores .muestras__nombre { display: none; }
}

/* =========================================================================
   Vitrina de una tienda (modal). Portada con la foto contenida, cifras,
   pestañas fijas, buscador y filtros, prendas en cuadrícula y una barra
   de contacto fija abajo.
   ========================================================================= */
.vitrina__hero {
  position: relative;
  height: 250px;
  margin: calc(var(--e5) * -1) calc(var(--e6) * -1) var(--e5);
  overflow: hidden;
  background: var(--tinta);
}
.vitrina__hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  animation: vitrina-zoom 9s ease-out both;
}
@keyframes vitrina-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.vitrina__hero-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 10%, rgba(210, 154, 60, 0.35), transparent 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 6px),
    var(--tinta);
}
.vitrina__hero-capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--e4) var(--e6) var(--e5);
  background: linear-gradient(180deg, rgba(30, 12, 16, 0.35) 0%, rgba(30, 12, 16, 0) 30%, rgba(30, 12, 16, 0.5) 60%, rgba(30, 12, 16, 0.9) 100%);
  color: var(--crema);
}
.vitrina__hero-arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); }
.vitrina__hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vitrina__chip {
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: #e07b26cf;
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crema);
  backdrop-filter: blur(4px);
}
.vitrina__chip--abierta { background: rgba(58, 110, 58, 0.9); }
.vitrina__chip--cerrada { background: rgba(30, 12, 16, 0.7); }
.vitrina__chip--abierta::before,
.vitrina__chip--cerrada::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: currentColor;
}
.vitrina__chip--abierta::before { background: #B9F0A8; animation: vitrina-pulso 1.8s ease-out infinite; }
@keyframes vitrina-pulso {
  0% { box-shadow: 0 0 0 0 rgba(185, 240, 168, 0.6); }
  100% { box-shadow: 0 0 0 7px rgba(185, 240, 168, 0); }
}
.vitrina__hero-botones { display: flex; gap: 8px; flex: none; }
.vitrina__redondo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(30, 12, 16, 0.45);
  color: var(--crema);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--transicion), transform var(--transicion);
}
.vitrina__redondo:hover { background: rgba(30, 12, 16, 0.7); transform: scale(1.06); }
.vitrina__redondo:focus-visible { outline: 3px solid var(--hilo); outline-offset: 2px; }
.vitrina__redondo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: fill var(--transicion); }
.vitrina__redondo[aria-pressed='true'] { background: var(--crema); color: var(--urgente); }
.vitrina__redondo[aria-pressed='true'] svg { fill: currentColor; }

.vitrina__hero-abajo { display: flex; align-items: flex-end; gap: var(--e3); }
.vitrina__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 8px 20px rgba(0, 0, 0, 0.3);
  position: relative;
}
.vitrina__avatar::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.5px dashed var(--hilo);
  border-radius: 12px;
}
.vitrina__hero-texto { min-width: 0; display: grid; gap: 4px; }
.vitrina__hero-nombre {
  font-family: var(--display);
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.vitrina__hero-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-xs); }
.vitrina__hero-sub .calificacion,
.vitrina__hero-sub .calificacion strong { color: var(--crema); }
.vitrina__hero-sub .estrellas__base { color: rgba(255, 255, 255, 0.3); }
.vitrina__hero-desde { opacity: 0.85; }

/* Cifras */
.vitrina__cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--e4);
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  overflow: hidden;
}
.vitrina__cifras > div { display: grid; gap: 2px; padding: var(--e3); text-align: center; }
.vitrina__cifras > div + div { border-left: 1px dashed var(--borde); }
.vitrina__cifra {
  font-family: var(--display);
  font-size: clamp(1rem, 3.6vw, 1.3rem);
  font-stretch: 85%;
  line-height: 1.1;
  color: var(--texto);
  white-space: nowrap;
}
.vitrina__cifra--rojo { color: var(--urgente); }
.vitrina__cifra--verde { color: var(--verde); }
.vitrina__cifra-etq {
  font-family: var(--dato);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* Pestañas fijas */
.vitrina__pestanas {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: 4px;
  margin: 0 calc(var(--e6) * -1) var(--e4);
  padding: 8px var(--e6);
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.vitrina__pestana {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 99px;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--texto-tenue);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.vitrina__pestana span { font-family: var(--dato); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 99px; background: var(--papel); color: var(--texto-tenue); }
.vitrina__pestana:hover { color: var(--texto); background: var(--papel); }
.vitrina__pestana[aria-current] { background: var(--tinta); color: var(--crema); }
.vitrina__pestana[aria-current] span { background: rgba(255, 255, 255, 0.2); color: var(--crema); }

.vitrina__seccion { scroll-margin-top: 64px; }
.vitrina__seccion + .vitrina__seccion { margin-top: var(--e6); padding-top: var(--e5); border-top: 1.5px dashed var(--borde); }
.vitrina__seccion .resenas { margin-top: 0; padding-top: 0; border-top: 0; }
.vitrina__titulo { font-family: var(--display); font-size: var(--t-md); margin-bottom: var(--e3); }

/* Oferta destacada */
.vitrina__destacada {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  margin-bottom: var(--e4);
  padding: 8px 14px 8px 8px;
  border: 1.5px dashed var(--hilo);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--hilo) 22%, transparent), transparent 55%),
    var(--papel);
  text-align: left;
  font: inherit;
  color: var(--texto);
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.vitrina__destacada:hover { transform: translateY(-2px); box-shadow: var(--sombra-suave); }
.vitrina__destacada img { width: 64px; height: 78px; object-fit: cover; border-radius: 9px; background: var(--superficie); }
.vitrina__destacada-texto { display: grid; gap: 2px; min-width: 0; }
.vitrina__destacada-etq { font-family: var(--dato); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aviso); font-weight: 700; }
.vitrina__destacada-nombre { font-weight: 700; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vitrina__destacada-precio strong { font-family: var(--display); color: var(--urgente); }
.vitrina__destacada-precio s { font-size: var(--t-xs); color: var(--texto-tenue); }
.vitrina__destacada-pct {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--urgente);
  color: #fff;
  font-family: var(--display);
  font-size: 1rem;
  transform: rotate(-8deg);
  box-shadow: 0 6px 14px -6px rgba(184, 64, 43, 0.8);
}

/* Buscador, orden y filtros */
.vitrina__herramientas { display: flex; gap: var(--e2); margin-bottom: var(--e3); }
.vitrina__buscar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1.5px solid var(--borde);
  border-radius: 99px;
  background: var(--superficie);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.vitrina__buscar:focus-within { border-color: var(--tinta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tinta) 14%, transparent); }
.vitrina__buscar svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--texto-tenue); stroke-width: 2; stroke-linecap: round; }
.vitrina__buscar input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--t-sm); color: var(--texto); }
.vitrina__orden {
  flex: none;
  padding: 0 30px 0 12px;
  border: 1.5px solid var(--borde);
  border-radius: 99px;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C2F43' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 13px;
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto);
  appearance: none;
  cursor: pointer;
}
.vitrina__filtros,
.vitrina__tallas {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 calc(var(--e6) * -1) var(--e3);
  padding: 2px var(--e6);
  overflow-x: auto;
  scrollbar-width: none;
}
.vitrina__filtros::-webkit-scrollbar,
.vitrina__tallas::-webkit-scrollbar { display: none; }
.vitrina__filtro {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--borde);
  border-radius: 99px;
  background: var(--superficie);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.vitrina__filtro span { font-family: var(--dato); opacity: 0.6; }
.vitrina__filtro:hover { border-color: var(--tinta); }
.vitrina__filtro[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.vitrina__tallas-etq { flex: none; font-family: var(--dato); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-tenue); margin-right: 2px; }
.vitrina__talla {
  flex: none;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border: 1.5px dashed var(--borde);
  border-radius: 8px;
  background: none;
  font-family: var(--dato);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.vitrina__talla:hover { border-color: var(--tinta); }
.vitrina__talla[aria-pressed='true'] { border-style: solid; border-color: var(--jean); background: var(--jean); color: #fff; }
.vitrina__resultado { font-size: var(--t-xs); color: var(--texto-tenue); margin-bottom: var(--e2); }

/* Tarjetas de prenda */
.vitrina__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3);
}
.vitrina-prenda {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  overflow: hidden;
  animation: vitrina-entra 360ms cubic-bezier(0.2, 0, 0.2, 1) both;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.vitrina-prenda:nth-child(2) { animation-delay: 40ms; }
.vitrina-prenda:nth-child(3) { animation-delay: 80ms; }
.vitrina-prenda:nth-child(4) { animation-delay: 120ms; }
.vitrina-prenda:nth-child(5) { animation-delay: 160ms; }
.vitrina-prenda:nth-child(n + 6) { animation-delay: 200ms; }
@keyframes vitrina-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vitrina-prenda[hidden] { display: none; }
.vitrina-prenda:hover { border-color: color-mix(in srgb, var(--tinta) 45%, var(--borde)); box-shadow: var(--sombra-suave); transform: translateY(-2px); }
.vitrina-prenda__visual { position: relative; aspect-ratio: 4 / 5; background: var(--papel); overflow: hidden; }
.vitrina-prenda__abrir { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.vitrina-prenda__foto { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(0.2, 0, 0.2, 1); }
.vitrina-prenda:hover .vitrina-prenda__foto { transform: scale(1.05); }
.vitrina-prenda__fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.vitrina-prenda__fallback .silueta { width: 70%; height: 70%; transform: none; }
.vitrina-prenda__sellos { position: absolute; top: 8px; left: 8px; display: grid; justify-items: start; gap: 4px; pointer-events: none; }
.vitrina-prenda__sello {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--urgente);
  color: #fff;
  font-family: var(--dato);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.vitrina-prenda__sello--nueva { background: var(--jean); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.vitrina-prenda .favorito-btn { top: 8px; right: 8px; width: 34px; height: 34px; }
.vitrina-prenda__stock {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255, 253, 249, 0.94);
  font-size: 10px;
  font-weight: 700;
  color: #9A6412;
  pointer-events: none;
}
.vitrina-prenda__stock--bajo { color: #B8402B; }
.vitrina-prenda__info { display: grid; gap: 3px; padding: var(--e3) var(--e3) var(--e2); flex: 1; align-content: start; }
.vitrina-prenda__cat {
  font-family: var(--dato);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vitrina-prenda__nombre { font-size: var(--t-sm); font-weight: 700; line-height: 1.3; }
.vitrina-prenda__nombre button { padding: 0; border: 0; background: none; font: inherit; color: var(--texto); text-align: left; cursor: pointer; }
.vitrina-prenda__nombre button:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.vitrina-prenda__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.vitrina-prenda__precio strong { font-family: var(--display); font-size: var(--t-md); color: var(--urgente); }
.vitrina-prenda__precio s { font-size: var(--t-xs); color: var(--texto-tenue); }
.vitrina-prenda__ahorro { font-size: 10.5px; font-weight: 700; color: var(--verde); }
.vitrina-prenda__tallas { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.vitrina-prenda__tallas span { padding: 1px 6px; border: 1px solid var(--borde); border-radius: 5px; font-family: var(--dato); font-size: 10px; color: var(--texto-tenue); }
.vitrina-prenda__acciones { display: grid; grid-template-columns: 36px 1fr; gap: 6px; padding: 0 var(--e3) var(--e3); }
.vitrina-prenda__acciones .btn { min-height: 36px; padding: 0.4rem 0.6rem; font-size: var(--t-xs); }
.vitrina-prenda__acciones .btn--primario { color: var(--crema); }
.vitrina-prenda__bolsa {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.vitrina-prenda__bolsa:hover { border-color: var(--tinta); }
.vitrina-prenda__bolsa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vitrina-prenda__bolsa--llena { background: color-mix(in srgb, var(--verde) 12%, var(--superficie)); border-color: var(--verde); color: var(--verde); }
.vitrina-prenda__bolsa .ficha__bolsa-marca {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 9px;
}

.vitrina__vacio { display: grid; justify-items: center; gap: 6px; padding: var(--e6) var(--e4); border: 1.5px dashed var(--borde); border-radius: 14px; text-align: center; font-size: var(--t-sm); color: var(--texto-tenue); }
.vitrina__vacio[hidden] { display: none; }
.vitrina__vacio strong { color: var(--texto); }
.vitrina__vacio .btn { margin-top: 6px; }

/* Información */
.vitrina__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.vitrina__dato { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e3); border-radius: 12px; background: var(--papel); min-width: 0; }
.vitrina__dato > div { flex: 1; min-width: 0; }
.vitrina__dato-titulo { font-size: var(--t-sm); font-weight: 700; line-height: 1.35; color: var(--texto); }
.vitrina__dato-sub { font-size: var(--t-xs); line-height: 1.45; color: var(--texto-tenue); margin-top: 2px; }
.vitrina__dato-sub .abierta { font-size: inherit; }
.vitrina__enlace {
  flex: none;
  align-self: center;
  padding: 5px 10px;
  border-radius: 99px;
  border: 1.5px solid var(--tinta);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.vitrina__enlace:hover { background: var(--tinta); color: var(--crema); }
.vitrina__pagos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.vitrina__pago { padding: 2px 8px; border-radius: 99px; background: var(--superficie); border: 1px solid var(--borde); font-size: 10.5px; font-weight: 600; color: var(--texto); }
.vitrina__pasos {
  counter-reset: paso;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3);
  margin: 0 0 var(--e4);
  padding: 0;
}
.vitrina__pasos li {
  counter-increment: paso;
  position: relative;
  padding: 34px var(--e3) var(--e3);
  border: 1px solid var(--borde);
  border-radius: 12px;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--texto-tenue);
}
.vitrina__pasos li::before {
  content: counter(paso);
  position: absolute;
  top: 10px;
  left: var(--e3);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--crema);
  font-family: var(--dato);
  font-size: 10px;
  font-weight: 700;
}
.vitrina__pasos strong { color: var(--texto); }
.vitrina__catalogo { width: 100%; }

/* Barra de contacto fija al fondo del modal */
.vitrina__barra {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
  margin: var(--e5) calc(var(--e6) * -1) calc(var(--e5) * -1);
  padding: var(--e3) var(--e6);
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -8px 20px -14px rgba(40, 16, 20, 0.35);
}
.vitrina__barra .btn { min-height: 44px; }
.vitrina__barra-mapa { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.vitrina__barra-mapa svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

[data-tema='oscuro'] .vitrina__enlace { color: var(--etiqueta); border-color: var(--etiqueta); }
[data-tema='oscuro'] .vitrina__enlace:hover { background: var(--etiqueta); color: var(--tinta); }
[data-tema='oscuro'] .vitrina-prenda__stock { background: rgba(27, 20, 22, 0.92); }
[data-tema='oscuro'] .vitrina__pestana[aria-current] { background: var(--tinta-suave); }
[data-tema='oscuro'] .vitrina-prenda__bolsa { color: var(--etiqueta); }
[data-tema='oscuro'] .vitrina__orden { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D3DFEE' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .vitrina__hero-foto, .vitrina-prenda, .vitrina__chip--abierta::before { animation: none; }
}

@media (max-width: 600px) {
  .vitrina__hero { height: 215px; margin: calc(var(--e4) * -1) calc(var(--e4) * -1) var(--e4); }
  .vitrina__hero-capa { padding: var(--e3) var(--e4) var(--e4); }
  .vitrina__avatar { width: 48px; height: 48px; font-size: 1.1rem; border-radius: 13px; }
  .vitrina__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitrina__cifras > div:nth-child(3) { border-left: 0; }
  .vitrina__cifras > div:nth-child(n + 3) { border-top: 1px dashed var(--borde); }
  .vitrina__pestanas { margin-inline: calc(var(--e4) * -1); padding-inline: var(--e4); }
  .vitrina__pestana { padding: 7px 6px; font-size: var(--t-xs); }
  .vitrina__filtros, .vitrina__tallas { margin-inline: calc(var(--e4) * -1); padding-inline: var(--e4); }
  .vitrina__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .vitrina-prenda__info { padding: var(--e2) var(--e2) 6px; }
  .vitrina-prenda__acciones { padding: 0 var(--e2) var(--e2); grid-template-columns: 34px 1fr; }
  .vitrina-prenda__bolsa { width: 34px; height: 34px; }
  .vitrina__info, .vitrina__pasos { grid-template-columns: 1fr; }
  .vitrina__pasos li { padding: var(--e3) var(--e3) var(--e3) 44px; }
  .vitrina__pasos li::before { top: 50%; transform: translateY(-50%); }
  .vitrina__barra { margin: var(--e4) calc(var(--e4) * -1) calc(var(--e4) * -1); padding: var(--e3) var(--e4); }
}

/* =========================================================================
   Paleta: vinotinto, beige y dorado.
   ========================================================================= */
:root,
[data-tema='oscuro'] {
  --jean: #233344;
  --jean-oscuro: #1A2A42;
}
:root:not([data-tema='oscuro']) {
  --etiqueta: #F2DCE0;
  --etiqueta-oscura: #233344;
}
:focus-visible { outline-color: var(--tinta); }
[data-tema='oscuro'] :focus-visible { outline-color: var(--etiqueta); }

/* Pie: fondo definido en el bloque base .pie (azul marino var(--tinta)). */

/* Mapa: créditos en vino y sin la banderita azul de Leaflet (el crédito a
   OpenStreetMap se mantiene) */
/* Leaflet carga su CSS después del nuestro: por eso el selector más largo */
.mapa-tiendas .leaflet-control-attribution a { color: var(--tinta); }
[data-tema='oscuro'] .mapa-tiendas .leaflet-control-attribution a { color: var(--etiqueta); }
.mapa-tiendas .leaflet-control-attribution .leaflet-attribution-flag { display: none !important; }

/* ---------- Portada a pantalla completa ----------
   La portada mide el alto de la pantalla menos la barra de avisos (34 px) y
   la cabecera (69 px): así el pie ya no asoma abajo en la primera vista.
   El contenido queda centrado en ese alto. Si la persona cierra los avisos,
   sobran 34 px abajo y el pie sigue oculto. */
main > .vista[data-activa='si'][data-vista='inicio'] {
  min-height: calc(100svh - 103px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* =========================================================================
   Tokens de acento (--etiqueta, --etiqueta-oscura) en la familia del vino.
   Sólo en el tema claro: el oscuro ya tiene sus propios valores. El motivo
   "costura" sigue con el hilo dorado.
   ========================================================================= */
:root:not([data-tema='oscuro']) {
  --etiqueta: #F2DCE0;          /* rosa vino lavado: fondos suaves, sellos */
  --etiqueta-oscura: #233344;   /* textos destacados y subrayados: vinotinto */
}

/* Foco visible con buen contraste (el rosa lavado no se vería) */
:focus-visible { outline-color: var(--tinta); }
[data-tema='oscuro'] :focus-visible { outline-color: var(--etiqueta); }

/* Cabecera del chat del asistente: vinotinto con textura */
.asistente__cabeza { background: var(--sarga), linear-gradient(90deg, #1A2A42, var(--tinta)); }

/* Menú abierto en celular: vino oscuro */
@media (max-width: 860px) {
  .cabecera__acciones .menu-btn[aria-expanded='true'] { background: #1A2A42; }
}

/* Pie: azul marino sólido (var(--tinta)); el fondo lo define el bloque
   principal .pie en los tokens. */

/* ---------- Pie mejorado: marca con logotipo, columnas con mejor ritmo ----------
   La columna izquierda lleva el logotipo real de TAURA (no un título de texto)
   con su lema, para que la marca ancle el pie. Los enlaces ganan área táctil y
   un subrayado dorado en hover (accesible para comerciantes mayores). */
.pie__marca { display: grid; gap: var(--e3); align-content: start; }
.pie__logo {
  width: clamp(110px, 15vw, 160px);
  height: auto;
  /* El PNG original es azul marino sobre crema; para sentarlo en el pie oscuro
     se invierte a crema sobre transparente. */
  filter: brightness(0) invert(1);
  opacity: 0.94;
}
.pie__lema {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-md);
  line-height: 1.2;
  color: var(--crema);
  margin: 0;
  max-width: 22ch;
}
.pie__texto {
  font-size: var(--t-sm);
  line-height: 1.6;
  opacity: 0.66;
  max-width: 38ch;
  margin: var(--e1) 0 0;
}

/* Enlaces del pie: más aire vertical (toque cómodo) y foco/hover visibles. */
.pie__lista { gap: var(--e1); }
.pie__lista a {
  display: inline-block;
  padding: 3px 0;
  opacity: 0.9;
  border-bottom: 1.5px solid transparent;
  text-decoration: none;
  transition: color var(--transicion), border-color var(--transicion), opacity var(--transicion);
}
.pie__lista a:hover,
.pie__lista a:focus-visible {
  opacity: 1;
  color: var(--crema);
  border-bottom-color: var(--hilo);
  text-decoration: none;
}

/* Título de cada columna: un punto dorado antes, como cabeza de costura. */
.pie__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.pie__titulo::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hilo);
  flex: none;
}

/* Base inferior: separada con una línea tenue y centrada en móvil. */
.pie__base { align-items: center; }

@media (max-width: 720px) {
  .pie__base { flex-direction: column; align-items: flex-start; gap: var(--e2); }
}

/* Dimensiones verticales del pie: más compacto, sin tanto vacío. El espacio
   inferior sigue reservando sitio para el botón flotante del asistente, pero
   más ajustado (56px en vez de 72px). */
.pie {
  padding-top: var(--e5);
  padding-bottom: calc(var(--e4) + 56px);
}
.pie__grid { gap: var(--e4) var(--e6); padding-bottom: var(--e3); }
.pie__marca { gap: var(--e2); }
.pie__texto { margin-top: 2px; }

@media (max-width: 720px) {
  .pie { padding-top: var(--e4); }
  .pie__grid { gap: var(--e5); }
}

/* En móvil el botón flotante de WhatsApp (abajo-izquierda, ~64px) también podría
   tapar la última fila del pie: se reserva espacio para él a ambos lados. */
@media (max-width: 640px) {
  .pie { padding-bottom: calc(var(--e5) + 64px); }
}

/* Footer en claro: fondo blanco hueso, texto oscuro, acentos en la marca.
   Decisión visual del usuario: el footer no acompaña la paleta azul marino,
   se queda limpio y luminoso para no cerrar la página con un bloque pesado. */
:root:not([data-tema='oscuro']) .pie {
  background: #FFFDF9;
  border-top: 1px solid var(--borde);
  color: var(--texto);
}
:root:not([data-tema='oscuro']) .pie__grid { border-bottom-color: var(--borde); }
:root:not([data-tema='oscuro']) .pie__logo { filter: none; opacity: 1; }
:root:not([data-tema='oscuro']) .pie__lema,
:root:not([data-tema='oscuro']) .pie__titulo { color: var(--tinta); opacity: 1; }
:root:not([data-tema='oscuro']) .pie__texto,
:root:not([data-tema='oscuro']) .pie__base { color: var(--texto-tenue); opacity: 1; }
:root:not([data-tema='oscuro']) .pie__lista a { color: var(--texto); }
:root:not([data-tema='oscuro']) .pie__lista a:hover,
:root:not([data-tema='oscuro']) .pie__lista a:focus-visible { color: var(--tinta); }
.pie__lema { font-size: 0.95rem; }
.pie__texto,
.pie__titulo,
.pie__lista a { font-size: 0.75rem; }
.pie__base { font-size: 0.625rem; }

/* Fondo de portada sin elementos decorativos */
.hero {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--etiqueta) 35%, transparent), transparent 72%),
    var(--fondo);
}
[data-tema='oscuro'] .hero {
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(166, 58, 82, 0.16), transparent 70%),
    var(--fondo);
}

/* ---------- Vitrina: cabecera del modal sobre la portada ---------- */
.modal--vitrina .modal__caja { position: relative; }
.modal--vitrina .modal__cabeza {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  padding: var(--e4) var(--e4) 0 0;
  border: 0;
  background: none;
}
.modal--vitrina .modal__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.modal--vitrina .cerrar-btn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(30, 12, 16, 0.45);
  color: var(--crema);
  backdrop-filter: blur(6px);
  transition: background var(--transicion), transform var(--transicion);
}
.modal--vitrina .cerrar-btn:hover { background: rgba(30, 12, 16, 0.75); transform: rotate(90deg); }
.modal--vitrina .vitrina__hero { margin-top: 0; }
.modal--vitrina .modal__cuerpo { padding-top: 0; }
.vitrina__hero-arriba { padding-right: 50px; }

/* Segunda foto al pasar el mouse (sólo con mouse). */
.vitrina-prenda__foto2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
/* Le gana a .js img.cargada, que muestra las fotos al terminar de cargar. */
.js .vitrina-prenda img.vitrina-prenda__foto2 { opacity: 0; }
@media (hover: hover) {
  .vitrina-prenda:hover .vitrina-prenda__foto2,
  .js .vitrina-prenda:hover img.vitrina-prenda__foto2 { opacity: 1; }
}
@media (hover: none) {
  .vitrina-prenda__foto2 { display: none; }
}

/* Próxima rebaja automática */
.vitrina-prenda__rebaja {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  margin-top: 1px;
  padding: 2px 7px 2px 5px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--hilo) 16%, transparent);
  color: var(--aviso);
  font-size: 10px;
  font-weight: 700;
}
.vitrina-prenda__rebaja svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Tu talla */
.vitrina__talla--mia { position: relative; border-style: solid; border-color: var(--jean); color: var(--jean); }
.vitrina__talla--mia::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jean);
  box-shadow: 0 0 0 2px var(--superficie);
}
.vitrina__talla--mia[aria-pressed='true'] { color: #fff; }
.vitrina__tallas { padding-top: 5px; }

/* Semana del horario */
.vitrina__semana { display: flex; gap: 3px; margin-top: 7px; }
.vitrina__dia {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-family: var(--dato);
  font-size: 10px;
  font-weight: 700;
  color: var(--texto);
}
.vitrina__dia--cerrado { color: var(--texto-tenue); opacity: 0.55; text-decoration: line-through; }
.vitrina__dia--hoy { background: var(--tinta); border-color: var(--tinta); color: var(--crema); opacity: 1; }

/* Mini mapa */
.vitrina__mapa {
  position: relative;
  margin-bottom: var(--e4);
  border: 1px solid var(--borde);
  border-radius: 14px;
  overflow: hidden;
  background: var(--papel);
}
.vitrina__mapa iframe { display: block; width: 100%; height: 190px; border: 0; filter: saturate(0.85); }
.vitrina__mapa-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--e3);
  border-top: 1px solid var(--borde);
  background: var(--superficie);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  text-decoration: none;
}
.vitrina__mapa-pie span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vitrina__mapa-pie strong { color: var(--tinta); white-space: nowrap; }
.vitrina__mapa-pie:hover strong { text-decoration: underline; }
.vitrina__mapa-pie svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-tema='oscuro'] .vitrina__mapa iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.6); }
[data-tema='oscuro'] .vitrina__mapa-pie strong { color: var(--etiqueta); }

/* Otras tiendas cerca */
.vitrina__cercanas { margin-top: var(--e6); padding-top: var(--e5); border-top: 1.5px dashed var(--borde); }
.vitrina__cercanas-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.vitrina__cercana {
  display: grid;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  overflow: hidden;
  font: inherit;
  text-align: left;
  color: var(--texto);
  cursor: pointer;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.vitrina__cercana:hover { border-color: var(--tinta); box-shadow: var(--sombra-suave); transform: translateY(-2px); }
.vitrina__cercana img { width: 100%; height: 84px; object-fit: cover; background: var(--tinta); }
.vitrina__cercana-info { display: grid; gap: 3px; padding: 8px 10px 10px; min-width: 0; }
.vitrina__cercana-nombre { font-weight: 700; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vitrina__cercana-meta { font-size: 10.5px; color: var(--texto-tenue); }
.vitrina__cercana-pie { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--texto-tenue); }
.vitrina__cercana-desc { font-family: var(--dato); font-weight: 700; color: var(--urgente); }

@media (max-width: 600px) {
  .modal--vitrina .modal__cabeza { padding: var(--e3) var(--e3) 0 0; }
  .vitrina__cercanas-lista {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--e4) * -1);
    padding: 2px var(--e4) 6px;
    scrollbar-width: none;
  }
  .vitrina__cercana { scroll-snap-align: start; }
  .vitrina__mapa iframe { height: 160px; }
}

/* ---------- Logo de la tienda ----------
   Junto al nombre de la tienda (tarjeta de prenda, tarjeta de tienda,
   ficha y vitrina) va su logo; si no ha subido uno, un monograma con sus
   iniciales. Reemplaza al ícono de ubicación. */
.logo-tienda {
  --lado: 22px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--lado);
  height: var(--lado);
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  background: var(--superficie);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--texto) 12%, transparent);
}
.logo-tienda--iniciales {
  background: var(--logo, var(--tinta));
  color: var(--crema);
  font-family: var(--cuerpo);
  font-size: calc(var(--lado) * 0.4);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: inset 0 0 0 1.5px rgba(255, 253, 249, 0.35);
}
.logo-tienda--mini { --lado: 22px; margin-right: 6px; }
.logo-tienda--ficha { --lado: 30px; margin-right: 8px; }
.logo-tienda--grande { --lado: 48px; }
/* La fila tienda + nota: el nombre se corta con "…" si es largo, y la nota
   (★ 4,7) y el logo nunca se encogen ni se salen de la tarjeta. */
.prenda__tienda { display: flex; align-items: center; gap: 0; min-width: 0; }
.prenda__tienda .logo-tienda--mini { flex: 0 0 auto; }
.prenda__tienda-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prenda__tienda .prenda__nota { flex: 0 0 auto; }
.tienda__nombre { display: inline-flex; align-items: center; }
.ficha__tienda-nombre { display: flex; align-items: center; }
.vitrina__avatar--logo { padding: 0; overflow: hidden; background: none; }
.vitrina__avatar--logo .logo-tienda { --lado: 100%; width: 100%; height: 100%; }

/* =========================================================================
   PANEL DEL COMERCIANTE
   Cabecera con la identidad de la tienda y "Agregar prenda" siempre a la
   mano; cifras, actividad, inventario, formulario de la tienda y la lista de
   administración.
   ========================================================================= */
.panel-cabeza--tienda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e4);
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
}
.panel-identidad { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.panel-identidad__nombre { font-family: var(--display); font-size: var(--t-lg); line-height: 1.1; }
.panel-identidad .panel-selector { max-width: 280px; font-weight: 700; }
.panel-identidad .panel-sesion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: var(--t-xs); color: var(--texto-tenue); }
.panel-cabeza__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.panel-agregar { display: inline-flex; align-items: center; gap: 6px; }
.panel-agregar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

.estado-cuenta { padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.estado-cuenta--activa { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); }
.estado-cuenta--pendiente_verificacion { background: color-mix(in srgb, var(--hilo) 22%, transparent); color: #7A5418; }
.estado-cuenta--suspendida { background: color-mix(in srgb, var(--urgente) 16%, transparent); color: var(--urgente); }
[data-tema='oscuro'] .estado-cuenta--pendiente_verificacion { color: var(--hilo); }
.panel-aviso--pendiente_verificacion { border-left: 4px solid var(--hilo); }
.panel-aviso--suspendida { border-left: 4px solid var(--urgente); }
.panel-pestanas { overflow-x: auto; scrollbar-width: none; }
.panel-cargando, .panel-vacio { padding: var(--e5) 0; color: var(--texto-tenue); }

.panel-seccion { margin-bottom: var(--e5); }
.panel-seccion__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); flex-wrap: wrap; }
.panel-seccion__titulo { font-family: var(--display); font-size: var(--t-md); margin-bottom: var(--e3); }
.panel-seccion__cabeza .panel-seccion__titulo { margin-bottom: 0; }
.panel-seccion__acciones { display: flex; gap: var(--e2); flex-wrap: wrap; }
.panel-pasos { padding: var(--e4); border-radius: 14px; background: var(--papel); }
.panel-pasos ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

.panel-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.panel-cifra { display: grid; gap: 2px; padding: var(--e3) var(--e4); border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
.panel-cifra__valor { font-family: var(--display); font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.panel-cifra__etiqueta { font-size: var(--t-xs); color: var(--texto-tenue); }
.panel-cifra--alerta { border-color: color-mix(in srgb, var(--urgente) 45%, var(--borde)); background: color-mix(in srgb, var(--urgente) 6%, var(--superficie)); }
.panel-cifra--alerta .panel-cifra__valor { color: var(--urgente); }

.actividad-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.actividad { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: var(--e3); padding: 10px 12px; border-radius: 10px; font-size: var(--t-sm); }
.actividad:nth-child(odd) { background: var(--papel); }
.actividad__icono { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--superficie); box-shadow: 0 0 0 1px var(--borde); }
.actividad__meta { font-size: var(--t-xs); color: var(--texto-tenue); }
.actividad--pedido .actividad__icono, .actividad--apartado .actividad__icono { box-shadow: 0 0 0 1.5px var(--tinta); }

.inventario { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.inventario__item { display: grid; grid-template-columns: 80px 1fr auto auto; align-items: center; gap: var(--e4); padding: var(--e3); border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); }
.inventario__item--oculta { opacity: 0.6; }
.inventario__item--agotada .inventario__unidades strong { color: var(--urgente); }
.inventario__foto { width: 80px; height: 96px; object-fit: cover; border-radius: 10px; background: var(--papel); }
.inventario__nombre { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.inventario__color { width: 14px; height: 14px; border-radius: 50%; background: var(--muestra); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.inventario__meta, .inventario__estado { font-size: var(--t-xs); color: var(--texto-tenue); }
.inventario__precio { font-size: var(--t-sm); }
.inventario__precio s { color: var(--texto-tenue); font-size: var(--t-xs); }
.inventario__stock { display: flex; align-items: center; gap: 6px; }
.inventario__paso { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--borde); border-radius: 50%; background: var(--superficie); color: var(--texto); font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.inventario__paso:hover:not(:disabled) { border-color: var(--tinta); color: var(--tinta); }
.inventario__paso:disabled { opacity: 0.4; cursor: default; }
.inventario__unidades { display: grid; justify-items: center; min-width: 42px; line-height: 1.1; }
.inventario__unidades strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.inventario__unidades small { font-size: 10px; color: var(--texto-tenue); }
.inventario__acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.enlace-tienda--peligro { color: var(--urgente); }
@media (max-width: 720px) {
  .inventario__item { grid-template-columns: 64px 1fr; }
  .inventario__foto { width: 64px; height: 78px; }
  .inventario__stock, .inventario__acciones { grid-column: 1 / -1; }
  .inventario__acciones { flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--e3); }
  .panel-cabeza--tienda { padding: var(--e3); }
  .panel-cabeza__acciones { width: 100%; }
  .panel-cabeza__acciones .panel-agregar { flex: 1; justify-content: center; }
}

/* ---------- Mi tienda: formulario por pasos + vista previa ---------- */
.mt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e5); align-items: start; margin-bottom: var(--e5); }
.mi-tienda { min-width: 0; }
.mi-tienda__mapa { height: 260px; border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); background: var(--papel); }
.mi-tienda .campo:last-child { margin-bottom: 0; }
.mi-tienda .campo__control:focus { border-color: var(--tinta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tinta) 16%, transparent); }
.mi-tienda .campo__etiqueta small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--texto-tenue); }

.mt-paso { margin-bottom: var(--e4); padding: var(--e5); border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); box-shadow: 0 1px 2px rgba(58, 42, 45, 0.04); }
.mt-paso__cabeza { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start; margin-bottom: var(--e5); padding-bottom: var(--e4); border-bottom: 1px dashed var(--borde); }
.mt-paso__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tinta); color: var(--crema); font-family: var(--display); font-size: var(--t-base); font-weight: 700; line-height: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tinta) 12%, transparent); }
.mt-paso__titulo { font-family: var(--display); font-size: var(--t-md); line-height: 1.2; margin: 3px 0 2px; }
.mt-paso__ayuda { font-size: var(--t-sm); color: var(--texto-tenue); line-height: 1.5; }
.mt-paso--info { background: var(--papel); border-style: dashed; }
.mt-paso--info .mt-paso__cabeza { margin: 0; padding: 0; border: 0; }
.mt-paso--info .mt-paso__num { background: var(--verde); }

.mt-logo { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e5); padding: var(--e3) var(--e4); border-radius: 12px; background: var(--papel); }
.mt-logo__vista .logo-tienda { --lado: 64px; }
.mt-logo__acciones { display: grid; gap: var(--e1); justify-items: start; }
.mt-logo__acciones label, .mt-qr__fila label { cursor: pointer; }
.mt-logo__acciones .campo__ayuda { margin: 0; }

.mt-etiqueta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e2); }
.mt-etiqueta .campo__etiqueta { margin-bottom: 0; }
.mt-contador { font-family: var(--dato); font-size: var(--t-xs); color: var(--texto-tenue); font-variant-numeric: tabular-nums; }

.mt-presets { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.mt-preset { min-height: 36px; padding: 0 var(--e4); border: 1px solid var(--borde); border-radius: 99px; background: var(--superficie); color: var(--texto); font-size: var(--t-sm); font-weight: 600; cursor: pointer; transition: border-color var(--transicion), color var(--transicion), background var(--transicion); }
.mt-preset:hover { border-color: var(--tinta); color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, var(--superficie)); }
.mt-preset:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.mt-horario { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); margin: 0 0 var(--e5); padding: var(--e3) var(--e4); border: 0; border-radius: 12px; background: var(--papel); }
.mt-horario label { display: grid; gap: var(--e1); min-width: 0; }
.mt-horario label > span { font-family: var(--dato); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-tenue); }
.mt-horario .campo__control { background: var(--superficie); }

.mt-prefijo { display: flex; }
.mt-prefijo > span { display: grid; place-items: center; padding: 0 var(--e3); border: 1px solid var(--borde); border-right: 0; border-radius: var(--radio) 0 0 var(--radio); background: var(--papel); font-family: var(--dato); font-size: var(--t-sm); font-weight: 700; color: var(--texto-tenue); }
.mt-prefijo .campo__control { border-radius: 0 var(--radio) var(--radio) 0; }

.mt-medios { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--e2); margin-bottom: var(--e5); }
.mt-medio { position: relative; display: block; cursor: pointer; }
.mt-medio input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mt-medio__caja { position: relative; display: grid; gap: 2px; height: 100%; padding: var(--e3) var(--e3) var(--e3) 46px; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie); transition: border-color var(--transicion), background var(--transicion); }
.mt-medio__caja::before { content: ''; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 1.5px solid var(--borde-fuerte); border-radius: 6px; background: var(--superficie); transition: background var(--transicion), border-color var(--transicion); }
.mt-medio__caja::after { content: ''; position: absolute; left: 21px; top: 50%; width: 6px; height: 11px; margin-top: -7px; border: solid var(--crema); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--transicion); }
.mt-medio__caja strong { font-size: var(--t-sm); line-height: 1.3; }
.mt-medio__caja small { font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.4; }
.mt-medio:hover .mt-medio__caja { border-color: color-mix(in srgb, var(--tinta) 45%, var(--borde)); }
.mt-medio input:checked + .mt-medio__caja { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, var(--superficie)); }
.mt-medio input:checked + .mt-medio__caja::before { background: var(--tinta); border-color: var(--tinta); }
.mt-medio input:checked + .mt-medio__caja::after { transform: rotate(45deg) scale(1); }
.mt-medio input:focus-visible + .mt-medio__caja { outline: 2px solid var(--tinta); outline-offset: 2px; }

.mt-datos-pago { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); padding-top: var(--e4); border-top: 1px dashed var(--borde); }
.mt-datos-pago [hidden] { display: none; }
.mt-datos-pago .campo { margin: 0; }
.mt-qr { grid-column: 1 / -1; }
.mt-qr__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.mt-qr__vista { display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border: 1.5px dashed var(--borde-fuerte); border-radius: 10px; background: var(--papel); font-size: var(--t-xs); color: var(--texto-tenue); text-align: center; }
.mt-qr__vista img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.mt-guardar { position: sticky; bottom: var(--e3); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: var(--e5); padding: var(--e3) var(--e4); border: 1px solid var(--borde); border-radius: 14px; background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(8px); box-shadow: var(--sombra-flotante); }
.mt-guardar__estado { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-sm); font-weight: 600; color: var(--texto-tenue); }
.mt-guardar__estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.mt-guardar[data-sucio='si'] { border-color: var(--tinta); }
.mt-guardar[data-sucio='si'] .mt-guardar__estado { color: var(--texto); }
.mt-guardar[data-sucio='si'] .mt-guardar__estado::before { background: var(--hilo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hilo) 25%, transparent); }
.mt-guardar .campo__error { width: 100%; margin: 0; order: 3; }
.mt-guardar__botones { display: flex; gap: var(--e2); }
.mt-guardar__botones .btn:disabled { opacity: 0.45; cursor: not-allowed; }

.mt-vista { position: sticky; top: 110px; }
.mt-vista__rotulo { margin-bottom: var(--e2); font-family: var(--dato); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-tenue); }
.mt-vista__tarjeta { padding: var(--e4); border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra-suave); }
.mt-vista__cabeza { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); padding-bottom: var(--e3); border-bottom: 1px dashed var(--borde); }
.mt-vista__cabeza > div { min-width: 0; }
.mt-vista__nombre { font-family: var(--display); font-size: var(--t-md); line-height: 1.2; overflow-wrap: anywhere; }
.mt-vista__desc { font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.45; }
.mt-vista__dato { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--e2); font-size: var(--t-sm); }
#mt-v-dir::before, #mt-v-horario::before { content: ''; flex: none; width: 16px; height: 16px; background: var(--tinta); -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
#mt-v-dir { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
#mt-v-horario { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.mt-chip { padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--tinta) 10%, var(--superficie)); color: var(--tinta); font-size: var(--t-xs); font-weight: 700; }
[data-tema='oscuro'] .mt-chip { color: var(--texto); }

#mt-pausa, #form-clave { padding: var(--e5); border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); }
.mi-tienda__pausa--activa { border-color: var(--hilo) !important; background: color-mix(in srgb, var(--hilo) 8%, var(--superficie)) !important; }
#mt-pausa .campo__ayuda { margin-bottom: var(--e4); }

@media (max-width: 960px) {
  .mt-layout { grid-template-columns: 1fr; }
  .mt-vista { position: static; order: -1; }
}
@media (max-width: 640px) {
  .mt-paso, #mt-pausa, #form-clave { padding: var(--e4); }
  .mt-horario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-datos-pago { grid-template-columns: 1fr; }
  .mt-medios { grid-template-columns: 1fr; }
  .mt-guardar { bottom: var(--e2); }
  .mt-guardar__botones { width: 100%; }
  .mt-guardar__botones .btn { flex: 1; justify-content: center; }
}

.admin-tiendas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.admin-tienda { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e4); align-items: center; padding: var(--e4); border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); }
.admin-tienda__nombre { font-weight: 700; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-tienda__meta { font-size: var(--t-xs); color: var(--texto-tenue); }
.admin-tienda__acciones { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 720px) {
  .admin-tienda { grid-template-columns: auto 1fr; }
  .admin-tienda__acciones { grid-column: 1 / -1; flex-direction: row; }
}

.pp-final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3); margin-top: var(--e4); }
.pp-final .btn--primario { flex: 1; }

.soporte { display: grid; gap: var(--e4); }
.soporte__canales { display: grid; gap: var(--e2); }

/* ---------- Pedidos de la tienda (con servidor) ---------- */
.estado-pedido { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; font-family: var(--cuerpo); font-size: 11px; font-weight: 700; vertical-align: 1px; background: var(--papel); color: var(--texto-tenue); }
.estado-pedido--pendiente, .estado-pedido--apartado { background: color-mix(in srgb, var(--hilo) 22%, transparent); color: #7A5418; }
.estado-pedido--pagado, .estado-pedido--separado, .estado-pedido--enviado { background: color-mix(in srgb, var(--tinta) 12%, transparent); color: var(--tinta); }
.estado-pedido--entregado { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); }
.estado-pedido--cancelado, .estado-pedido--vencido, .estado-pedido--devuelto { background: color-mix(in srgb, var(--urgente) 12%, transparent); color: var(--urgente); }
[data-tema='oscuro'] .estado-pedido--pendiente, [data-tema='oscuro'] .estado-pedido--apartado { color: var(--hilo); }
[data-tema='oscuro'] .estado-pedido--pagado, [data-tema='oscuro'] .estado-pedido--separado, [data-tema='oscuro'] .estado-pedido--enviado { color: var(--etiqueta); }
.panel-pedido__numero small { font-size: 11px; color: var(--texto-tenue); font-weight: 500; }
.panel-pedido__acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.panel-contador { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--tinta); color: var(--crema); font-size: 12px; vertical-align: 2px; }
.panel-recargar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.panel-recargar small { color: var(--texto-tenue); }
.panel-historial__filtros { display: grid; grid-template-columns: 1fr auto; gap: var(--e2); margin-bottom: var(--e3); }
.validar-resultado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: var(--e3); padding: var(--e3); border-radius: 10px; background: color-mix(in srgb, var(--verde) 10%, var(--superficie)); }
@media (max-width: 720px) {
  .panel-pedido__acciones { align-items: stretch; width: 100%; }
  .panel-historial__filtros { grid-template-columns: 1fr; }
}

/* Mapa de "Mi tienda": marcador vinotinto y créditos sin azul */
.pin-mi-tienda span { display: block; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: linear-gradient(145deg, var(--tinta-suave), var(--tinta)); box-shadow: inset 0 0 0 7px var(--tinta), inset 0 0 0 9px var(--crema), 0 3px 6px rgba(0, 0, 0, 0.35); }
.mi-tienda__mapa .leaflet-control-attribution a { color: var(--tinta); }
.mi-tienda__mapa .leaflet-attribution-flag { display: none !important; }

.soporte__pronto:disabled { opacity: 0.55; cursor: not-allowed; }

/* =========================================================================
   PANEL DE TIENDA (panel.html)
   Menú lateral, barra superior y contenido en tarjetas.
   ========================================================================= */
:root { --pa-acento: var(--tinta); --pa-lateral: 264px; }
[data-tema='oscuro'] { --pa-acento: #E6A2B0; }

a.desplegable__item { text-decoration: none; color: inherit; }

.cuerpo-panel { background-image: none; }
#pagina-panel:not(.pa-lienzo) { max-width: 760px; margin: 0 auto; padding: var(--e6) var(--e5); }
#pagina-panel.pa-lienzo { max-width: none; margin: 0; padding: 0; }

.pa {
  display: grid;
  grid-template-columns: var(--pa-lateral) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Menú lateral */
.pa-lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding: var(--e5) var(--e4);
  background: var(--superficie);
  border-right: 1px solid var(--borde);
}
.pa-marca { display: flex; align-items: center; gap: var(--e3); padding: 0 var(--e2) var(--e3); text-decoration: none; }
.pa-marca__icono { width: 40px; height: 40px; flex-shrink: 0; }
.pa-marca__icono rect { fill: var(--tinta); }
.pa-marca__icono g { fill: var(--crema); }
.pa-marca__icono .pa-marca__giro { fill: none; stroke: var(--crema); stroke-width: 12; }
.pa-marca__texto { display: flex; flex-direction: column; gap: 5px; color: var(--pa-acento); }
.pa-marca__palabra { height: 22px; width: auto; }
.pa-marca__texto small { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-tenue); }
.pa-marca--ingreso { justify-content: center; margin-bottom: var(--e5); padding: 0; }

.pa-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pa-nav__grupo { padding: var(--e4) var(--e3) var(--e2); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-tenue); }
.pa-nav__grupo:first-child { padding-top: 0; }
.pa-nav__item {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; padding: 0.65rem var(--e3);
  border-radius: var(--radio);
  color: var(--texto); font-size: var(--t-sm); font-weight: 600;
  text-align: left; text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
}
.pa-nav__item svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pa-nav__item:hover { background: var(--papel); color: var(--pa-acento); }
.pa-nav__item[aria-current='page'] { background: var(--tinta); color: var(--crema); }
.pa-nav__cuenta {
  margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--hilo); color: #2A1A0C;
  font-family: var(--dato); font-size: var(--t-xs); font-weight: 700; text-align: center;
}
.pa-lateral__pie { display: flex; flex-direction: column; gap: 2px; padding-top: var(--e3); border-top: 1px solid var(--borde); }

/* Barra superior */
.pa-principal { min-width: 0; display: flex; flex-direction: column; }
.pa-barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e4) var(--e6);
  background: var(--superficie);
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.pa-titulo { margin: 0; font-family: var(--display); font-size: var(--t-lg); line-height: 1.15; color: var(--texto); }
.pa-subtitulo { margin-top: 2px; font-size: var(--t-sm); color: var(--texto-tenue); }
.pa-barra__acciones { display: flex; align-items: center; gap: var(--e3); }
.pa-agregar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pa-icono {
  width: 40px; height: 40px; border-radius: var(--radio);
  display: grid; place-items: center;
  border: 1px solid var(--borde); color: var(--texto);
}
.pa-icono svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pa-icono:hover { border-color: var(--pa-acento); color: var(--pa-acento); }
.pa-usuario { display: flex; align-items: center; gap: var(--e3); padding-left: var(--e4); border-left: 1px solid var(--borde); min-width: 0; }
.pa-usuario__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--crema); font-weight: 700; font-size: var(--t-sm);
}
.pa-usuario__datos { min-width: 0; }
.pa-usuario__nombre { font-weight: 700; font-size: var(--t-sm); line-height: 1.2; }
.pa-usuario__selector { max-width: 200px; padding: 2px 6px; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); font-weight: 700; font-size: var(--t-sm); }
.pa-usuario__correo { display: flex; align-items: center; gap: var(--e2); min-width: 0; font-size: var(--t-xs); color: var(--texto-tenue); }
.pa-usuario__correo span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-salir { padding: 0.4rem 0.6rem; border-radius: 6px; font-size: var(--t-xs); font-weight: 700; color: var(--pa-acento); }
.pa-salir:hover { background: var(--papel); }

.pa-contenido { width: 100%; max-width: 1180px; padding: var(--e6); display: flex; flex-direction: column; gap: var(--e5); }
.pa-demo { padding: 0.5rem 0.75rem; border-left: 3px solid var(--hilo); border-radius: 4px; background: var(--papel); font-size: var(--t-xs); color: var(--texto-tenue); }

/* Recoger prendas */
.recoger { display: grid; gap: var(--e5); }
.recoger-form { padding: var(--e5); border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra-suave); }
.recoger-form__rotulo { display: block; font-family: var(--display); font-weight: 800; font-size: var(--t-md); }
.recoger-form__fila { display: flex; gap: var(--e3); margin-top: var(--e4); }
.recoger-form__campo { flex: 1; padding: 0.7rem 1rem; font-family: var(--dato); font-size: 1.35rem; letter-spacing: 0.18em; text-transform: uppercase; }
.recoger-form__campo::placeholder { opacity: 0.4; }
.recoger-vacio { display: flex; align-items: center; gap: var(--e4); padding: var(--e5); border: 2px dashed var(--borde); border-radius: 12px; font-size: var(--t-sm); color: var(--texto-tenue); }
.recoger-vacio svg { width: 40px; height: 40px; flex-shrink: 0; fill: none; stroke: var(--pa-acento); stroke-width: 1.6; }
.recoger-vacio strong { color: var(--texto); }
.recoger-pasos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); counter-reset: paso; }
.recoger-pasos li { counter-increment: paso; display: grid; gap: 2px; padding: var(--e4); border-radius: 10px; background: var(--papel); font-size: var(--t-sm); }
.recoger-pasos li::before {
  content: counter(paso);
  width: 26px; height: 26px; margin-bottom: var(--e2); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--crema); font-weight: 700; font-size: var(--t-xs);
}
.recoger-pasos span { color: var(--texto-tenue); }

.recoger-ficha { overflow: hidden; border: 1px solid var(--borde); border-left: 5px solid var(--verde); border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra-suave); }
.recoger-ficha--aviso { border-left-color: var(--aviso); }
.recoger-ficha__cabeza { padding: var(--e5) var(--e5) var(--e4); border-bottom: 1px solid var(--borde); }
.recoger-sello { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.recoger-sello--compra { background: var(--tinta); color: var(--crema); }
.recoger-sello--apartado { background: rgba(74, 115, 64, 0.14); color: var(--verde); }
.recoger-sello--abono { background: rgba(210, 154, 60, 0.22); color: #7A4E0B; }
.recoger-sello--pendiente { background: rgba(210, 154, 60, 0.22); color: #7A4E0B; }
[data-tema='oscuro'] .recoger-sello--abono,
[data-tema='oscuro'] .recoger-sello--pendiente { color: var(--aviso); }
.recoger-sello--otro { background: var(--papel); color: var(--texto-tenue); }
.recoger-ficha__titulo { margin-top: var(--e2); font-family: var(--display); font-weight: 800; font-size: var(--t-lg); line-height: 1.2; }
.recoger-ficha__nota { margin-top: var(--e1); font-size: var(--t-sm); color: var(--texto-tenue); }
.recoger-ficha__cuerpo { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--e5); padding: var(--e5); }
.recoger-prendas { list-style: none; padding: 0; display: grid; gap: var(--e3); align-content: start; }
.recoger-prendas li { display: flex; align-items: center; gap: var(--e3); }
.recoger-prendas img,
.recoger-prendas__sinfoto { width: 72px; height: 86px; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: var(--papel); }
.recoger-prendas__nombre { font-weight: 700; line-height: 1.3; }
.recoger-prendas__meta { font-size: var(--t-sm); color: var(--texto-tenue); }
.recoger-datos { display: grid; gap: var(--e3); align-content: start; }
.recoger-dato dt { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-tenue); }
.recoger-dato dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.recoger-datos--dinero { padding: var(--e4); border-radius: 10px; background: var(--papel); }
.recoger-dato--fuerte dd { font-family: var(--dato); font-size: 1.3rem; color: var(--pa-acento); }
.recoger-codigo { font-family: var(--dato); letter-spacing: 0.12em; }
.recoger-ficha__accion { display: flex; justify-content: flex-end; padding: var(--e4) var(--e5); border-top: 1px solid var(--borde); background: var(--fondo); }

.recoger-atajo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e4); margin-bottom: var(--e4); padding: var(--e4) var(--e5); border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); font-size: var(--t-sm); }

@media (max-width: 960px) {
  .pa { grid-template-columns: minmax(0, 1fr); }
  .pa-lateral, .pa-nav, .pa-principal { min-width: 0; max-width: 100vw; }
  .pa-lateral {
    position: sticky; top: 0; z-index: 30;
    height: auto; overflow: visible;
    gap: var(--e2);
    padding: var(--e3) var(--e4) 0;
    border-right: 0; border-bottom: 1px solid var(--borde);
  }
  .pa-marca { padding: 0; }
  .pa-nav { flex-direction: row; gap: var(--e2); overflow-x: auto; padding-bottom: var(--e3); scrollbar-width: none; }
  .pa-nav::-webkit-scrollbar { display: none; }
  .pa-nav__grupo,
  .pa-lateral__pie { display: none; }
  .pa-nav__item { width: auto; flex-shrink: 0; padding: 0.45rem 0.8rem; border: 1px solid var(--borde); border-radius: 999px; white-space: nowrap; }
  .pa-barra { position: static; flex-wrap: wrap; padding: var(--e4); }
  .pa-contenido { padding: var(--e4); }
  .recoger-ficha__cuerpo { grid-template-columns: 1fr; }
  .recoger-pasos { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .pa-barra__acciones { width: 100%; flex-wrap: wrap; }
  .pa-usuario { flex: 1 1 100%; order: -1; padding: 0 0 var(--e3); border-left: 0; border-bottom: 1px solid var(--borde); }
  .pa-usuario__datos { flex: 1; }
  .pa-agregar { flex: 1; justify-content: center; }
  .recoger-form__fila { flex-direction: column; }
  .recoger-ficha__accion .btn { width: 100%; }
}

/* Aviso de prendas por recoger */
.pa-alerta { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; padding: var(--e4) var(--e5); border: 1px solid rgba(210, 154, 60, 0.45); border-left: 5px solid var(--hilo); border-radius: 12px; background: rgba(210, 154, 60, 0.12); font-size: var(--t-sm); }
.pa-alerta svg { width: 26px; height: 26px; flex-shrink: 0; fill: none; stroke: var(--aviso); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pa-alerta p { flex: 1; min-width: 200px; }
.pa-agotadas { align-items: flex-start; }
.pa-agotadas__lista { margin: 4px 0 6px; padding-left: 18px; display: grid; gap: 4px; }
.pa-agotadas__lista li { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.pa-alerta--urgente { border-color: rgba(184, 64, 43, 0.4); border-left-color: var(--urgente); background: rgba(184, 64, 43, 0.08); }
.pa-alerta--urgente svg { stroke: var(--urgente); }

.pendientes { padding: var(--e5); border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
.pendientes--vacio { color: var(--texto-tenue); font-size: var(--t-sm); }
.pendientes__titulo { display: flex; align-items: center; gap: var(--e2); font-family: var(--display); font-size: var(--t-md); }
.pendientes__titulo .pa-nav__cuenta { margin-left: 0; }
.pendientes__lista { list-style: none; padding: 0; margin-top: var(--e4); display: grid; gap: var(--e3); }
.pendiente { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: var(--e4); padding: var(--e3) var(--e4); border: 1px solid var(--borde); border-radius: 10px; }
.pendiente .recoger-sello { justify-self: start; }
.pendiente--urgente { border-color: rgba(184, 64, 43, 0.45); background: rgba(184, 64, 43, 0.05); }
.pendiente__cliente { font-weight: 700; }
.pendiente__prendas { font-size: var(--t-sm); color: var(--texto-tenue); }
.pendiente__meta { text-align: right; font-size: var(--t-sm); }
.pendiente__vence { color: var(--texto-tenue); }
.pendiente--urgente .pendiente__vence { color: var(--urgente); font-weight: 700; }

@media (max-width: 700px) {
  .pendiente { grid-template-columns: 1fr; gap: var(--e2); }
  .pendiente__meta { text-align: left; }
}

.afiliar-ingreso {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  max-width: 640px; margin-top: var(--e5); padding: var(--e4) var(--e5);
  border: 1px solid rgba(140, 47, 67, 0.25); border-left: 5px solid var(--tinta); border-radius: 12px;
  background: var(--superficie); box-shadow: var(--sombra-suave);
}
.afiliar-ingreso__icono { width: 34px; height: 34px; flex-shrink: 0; fill: none; stroke: var(--pa-acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.afiliar-ingreso__texto { flex: 1; min-width: 200px; font-size: var(--t-sm); color: var(--texto-tenue); }
.afiliar-ingreso__titulo { font-family: var(--display); font-weight: 800; font-size: var(--t-md); color: var(--texto); }
.afiliar-ingreso__boton { white-space: nowrap; text-decoration: none; }
@media (max-width: 520px) { .afiliar-ingreso__boton { width: 100%; justify-content: center; } }

/* Publicar prenda · paso 4: precio y unidades */
.pp-fila { align-items: start; }
.mt-prefijo > .campo__control { flex: 1; min-width: 0; }
.mt-prefijo--fin > span { order: 2; border: 1px solid var(--borde); border-left: 0; border-radius: 0 var(--radio) var(--radio) 0; }
.mt-prefijo--fin .campo__control { border-radius: var(--radio) 0 0 var(--radio); }
.mt-prefijo .campo__control:disabled { opacity: 0.55; }

.pp-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e2); }
.pp-rapidos button {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  font-family: var(--dato); font-size: var(--t-xs); font-weight: 700;
  color: var(--texto-tenue);
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.pp-rapidos button:hover { border-color: var(--pa-acento); color: var(--pa-acento); }
.pp-rapidos button[aria-pressed='true'] { border-color: var(--tinta); background: var(--tinta); color: var(--crema); }

.pp-pasos { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; }
.pp-pasos button {
  display: grid; place-items: center;
  border: 1px solid var(--borde);
  background: var(--papel);
  font-size: 1.25rem; font-weight: 700; line-height: 1; color: var(--pa-acento);
  transition: background var(--transicion);
}
.pp-pasos button:first-child { border-right: 0; border-radius: var(--radio) 0 0 var(--radio); }
.pp-pasos button:last-child { border-left: 0; border-radius: 0 var(--radio) var(--radio) 0; }
.pp-pasos button:hover { background: var(--borde); }
.pp-pasos .campo__control { border-radius: 0; text-align: center; font-family: var(--dato); font-weight: 700; }

.pp-resumen {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px;
  margin: var(--e4) 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--borde);
}
.pp-resumen > div { display: flex; flex-direction: column; gap: 2px; padding: var(--e3) var(--e4); background: var(--papel); }
.pp-resumen span { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-tenue); }
.pp-resumen strong { font-family: var(--dato); font-size: var(--t-md); color: var(--texto); }
.pp-resumen > div:first-child { background: var(--tinta); }
.pp-resumen > div:first-child span { color: var(--crema); opacity: 0.8; }
.pp-resumen > div:first-child strong { font-size: 1.35rem; color: var(--crema); }
.pp-resumen > div:last-child strong { color: var(--urgente); }
.pp-resumen > p { grid-column: 1 / -1; padding: var(--e3) var(--e4); background: var(--papel); font-size: var(--t-sm); color: var(--texto-tenue); }

@media (max-width: 520px) {
  .pp-resumen { grid-template-columns: 1fr 1fr; }
  .pp-resumen > div:first-child { grid-column: 1 / -1; }
}

/* Publicar prenda: fácil para personas mayores (letra grande, botones de 48 px o más). */
.pp-form { font-size: 1.0625rem; }
.pp-form .campo { margin-bottom: var(--e5); }
.pp-form fieldset.campo { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.pp-form legend.campo__etiqueta { padding: 0; }
.pp-form .campo__etiqueta { display: block; margin-bottom: var(--e2); font-size: 1.0625rem; font-weight: 700; color: var(--texto); }
.pp-form .campo__ayuda { font-size: 0.9375rem; }
.pp-form .campo__control { min-height: 52px; font-size: 1.0625rem; }
.pp-form textarea.campo__control { min-height: 96px; }
.pp-form .mt-paso__titulo { font-size: 1.3rem; }
.pp-form .mt-paso__ayuda { font-size: 0.9375rem; }
.pp-form .subir-foto span { font-size: 1.125rem; }
.pp-opcional { font-weight: 400; color: var(--texto-tenue); }

.pp-form .ia-ayuda--publicar { grid-template-columns: minmax(0, 1fr); margin: calc(-1 * var(--e3)) 0 var(--e5); }
.pp-form .ia-ayuda__estado { grid-column: 1; }
.pp-form .ia-ayuda__accion { grid-column: 1; grid-row: auto; justify-self: stretch; width: 100%; min-height: 52px; justify-content: center; white-space: normal; font-size: 1.0625rem; }

.pp-color {
  display: flex; align-items: center; gap: var(--e2);
  min-height: 50px; padding: 0 var(--e3);
  border: 2px solid var(--borde); border-radius: 10px;
  background: var(--superficie);
  font-size: 1rem; font-weight: 600; color: var(--texto); text-align: left;
}
.pp-color__muestra { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.pp-color:hover { border-color: var(--pa-acento); }
.pp-color[aria-pressed='true'] { border-color: var(--tinta); background: var(--papel); box-shadow: 0 0 0 2px var(--tinta); }
.pp-color[aria-pressed='true']::after { content: '✓'; margin-left: auto; font-weight: 800; color: var(--pa-acento); }

.pp-form .pp-sugerencias { gap: var(--e2); margin-top: var(--e2); }
.pp-form .pp-sugerencias button {
  min-height: 48px; padding: 0 var(--e4);
  border: 2px solid var(--borde); background: var(--superficie);
  font-size: 1rem; font-weight: 600; color: var(--texto);
}
.pp-form .pp-sugerencias button:hover { transform: none; border-color: var(--pa-acento); }
.pp-form .pp-sugerencias button[aria-pressed='true'] { border-color: var(--tinta); background: var(--tinta); color: var(--crema); }
.pp-form .pp-sugerencias button[aria-pressed='true']::before { content: '✓ '; }

.pp-opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.pp-opcion { position: relative; }
.pp-opcion input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pp-opcion span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 56px;
  border: 2px solid var(--borde); border-radius: 10px;
  background: var(--superficie);
  font-size: 1.0625rem; font-weight: 700;
}
.pp-opcion input:checked + span { border-color: var(--tinta); background: var(--tinta); color: var(--crema); }
.pp-opcion input:checked + span::before { content: '✓'; }
.pp-opcion input:focus-visible + span { outline: 3px solid var(--hilo); outline-offset: 2px; }

.pp-form .talla-chip { min-width: 52px; min-height: 48px; font-size: 1rem; }
.pp-form .pp-rapidos button { min-height: 44px; padding: 0 var(--e4); font-size: 0.9375rem; }
.pp-form .pp-pasos { grid-template-columns: 58px minmax(0, 1fr) 58px; }
.pp-form .pp-pasos button { min-height: 52px; font-size: 1.5rem; }
.pp-form .consentimiento { align-items: flex-start; padding: var(--e3) var(--e4); border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); font-size: 1rem; }
.pp-form .consentimiento input { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--tinta); }
#pp-error:not([hidden]) { display: block; margin-bottom: var(--e3); padding: var(--e3) var(--e4); border: 2px solid var(--urgente); border-radius: 10px; background: rgba(184, 64, 43, 0.08); font-size: 1.0625rem; font-weight: 700; }

@media (max-width: 520px) {
  .pp-form .pp-fila { grid-template-columns: 1fr; }
}

/* Panel: lectura cómoda */
.pa-nav__item { min-height: 48px; font-size: var(--t-base); }
.pa-subtitulo { font-size: var(--t-base); }

/* =========================================================================
   PANEL: paleta de colores desplegable, animaciones y detalles visuales
   ========================================================================= */

/* Paleta de colores que se despliega */
.pp-paleta__boton {
  display: flex; align-items: center; justify-content: center; gap: var(--e3);
  width: 100%; min-height: 52px; padding: 0 var(--e4);
  border: 2px solid var(--tinta); border-radius: 999px;
  background: var(--superficie); box-shadow: 0 3px 0 rgba(140, 47, 67, 0.25);
  font-size: 1.0625rem; font-weight: 700; color: var(--pa-acento);
  cursor: pointer; transition: background var(--transicion), transform 0.15s ease, box-shadow 0.15s ease;
}
.pp-paleta__boton:hover { background: var(--papel); transform: translateY(-1px); box-shadow: 0 5px 0 rgba(140, 47, 67, 0.25); }
.pp-paleta__boton:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(140, 47, 67, 0.25); }
.pp-paleta__boton[aria-expanded='true'] { background: var(--tinta); color: var(--crema); }
.pp-paleta__muestra { transition: background 0.3s ease, transform 0.3s ease; }
.pp-paleta__muestra[data-vacia='si'] { background: conic-gradient(#C23B30, #E7C24A, #4E7A45, #34507A, #6E4A86, #C23B30); }
.pp-paleta__muestra[data-vacia='otro'] { background: repeating-linear-gradient(45deg, var(--borde) 0 4px, var(--papel) 4px 8px); }
.pp-paleta__boton[aria-expanded='true'] .pp-paleta__muestra { transform: scale(1.12); }
.pp-paleta__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-paleta { display: grid; grid-template-rows: 0fr; margin-top: calc(-1 * var(--e3)); transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.35s ease; }
.pp-paleta[data-abierta='si'] { grid-template-rows: 1fr; margin-bottom: var(--e5); }
.pp-paleta__dentro { min-height: 0; overflow: hidden; }
.pp-paleta__caja { margin-top: var(--e2); padding: var(--e4); border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); box-shadow: var(--sombra-flotante); visibility: hidden; transition: visibility 0s 0.35s; }
.pp-paleta[data-abierta='si'] .pp-paleta__caja { visibility: visible; transition: none; }
.pp-paleta__colores { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
.pp-paleta .pp-color { position: relative; flex-direction: column; justify-content: center; gap: 6px; min-height: 84px; padding: var(--e2); text-align: center; font-size: 0.9375rem; }
.pp-paleta .pp-color .pp-color__muestra { width: 38px; height: 38px; transition: transform 0.2s ease; }
.pp-paleta .pp-color:hover .pp-color__muestra { transform: scale(1.14); }
.pp-paleta .pp-color[aria-pressed='true']::after { position: absolute; top: 4px; right: 8px; margin: 0; }
.pp-paleta[data-abierta='si'] .pp-color { animation: pa-aparece 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 18ms); }
.pp-paleta__otro { display: grid; gap: 4px; margin-top: var(--e3); font-size: 0.9375rem; color: var(--texto-tenue); }
.pp-camara { display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* Iconos de la actividad (antes eran emojis) */
.actividad__icono svg { width: 17px; height: 17px; fill: none; stroke: var(--pa-acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Menú lateral: fondo continuo aunque la página sea larga */
.pa { background: linear-gradient(90deg, var(--superficie) calc(var(--pa-lateral) - 1px), var(--borde) 0, var(--borde) var(--pa-lateral), transparent 0); }
.pa-nav__item { position: relative; overflow: hidden; }
.pa-nav__item svg { transition: transform 0.25s ease; }
.pa-nav__item:hover svg { transform: translateX(3px) scale(1.08); }
.pa-nav__item[aria-current='page'] { box-shadow: 0 6px 16px rgba(140, 47, 67, 0.25); animation: pa-activo 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pa-nav__cuenta { animation: pa-pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.pa-marca__icono { transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
.pa-marca:hover .pa-marca__icono { transform: rotate(180deg); }

/* Entrada al cambiar de sección */
.pa-contenido--anima > *,
.pa-contenido--anima .panel-cuerpo > *,
.pa-contenido--anima .recoger > * { animation: pa-aparece 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pa-contenido--anima > :nth-child(2),
.pa-contenido--anima .panel-cuerpo > :nth-child(2),
.pa-contenido--anima .recoger > :nth-child(2) { animation-delay: 0.06s; }
.pa-contenido--anima > :nth-child(3),
.pa-contenido--anima .panel-cuerpo > :nth-child(3),
.pa-contenido--anima .recoger > :nth-child(3) { animation-delay: 0.12s; }
.pa-contenido--anima .panel-cuerpo > :nth-child(n+4),
.pa-contenido--anima .recoger > :nth-child(n+4) { animation-delay: 0.18s; }
.pa-contenido--anima .panel-cifra,
.pa-contenido--anima .inventario > li,
.pa-contenido--anima .actividad,
.pa-contenido--anima .pendiente { animation: pa-aparece 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pa-contenido--anima :is(.panel-cifra, .inventario > li, .actividad, .pendiente):nth-child(2) { animation-delay: 0.05s; }
.pa-contenido--anima :is(.panel-cifra, .inventario > li, .actividad, .pendiente):nth-child(3) { animation-delay: 0.1s; }
.pa-contenido--anima :is(.panel-cifra, .inventario > li, .actividad, .pendiente):nth-child(4) { animation-delay: 0.15s; }
.pa-contenido--anima :is(.panel-cifra, .inventario > li, .actividad, .pendiente):nth-child(5) { animation-delay: 0.2s; }
.pa-contenido--anima :is(.panel-cifra, .inventario > li, .actividad, .pendiente):nth-child(n+6) { animation-delay: 0.25s; }

/* Tarjetas que responden al pasar el mouse */
.pa :is(.panel-cifra, .pendiente, .inventario > li, .recoger-pasos li, .recoger-atajo) { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.pa :is(.panel-cifra, .pendiente, .inventario > li, .recoger-pasos li):hover { transform: translateY(-3px); box-shadow: var(--sombra-flotante); }
.pa .btn { transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; }
.pa .btn:active { transform: scale(0.97); }
.pa-icono svg { transition: transform 0.4s ease; }
.pa-icono:hover svg { transform: rotate(-25deg); }

/* Resultados y avisos */
.recoger-ficha,
.pa .validacion { animation: pa-aparece 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.recoger-dato--fuerte dd { animation: pa-pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) 0.15s both; }
.pa-alerta svg { transform-origin: 50% 10%; animation: pa-campana 1.2s ease 0.4s 2; }
.pa-alerta--urgente svg { animation: pa-campana 1.2s ease 0.4s infinite; }
.pa-alerta--urgente { animation: pa-latido 2.4s ease-in-out infinite; }

/* Rendimiento: cifras en tarjetas */
.pa .panel-resumen { gap: var(--e3); border: 0; }
.pa .panel-resumen > * { padding: var(--e4); border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }

/* Estados vacíos */
.pa-vacio,
.pa .panel-vacio { display: grid; justify-items: center; gap: var(--e2); padding: var(--e6) var(--e5); border: 2px dashed var(--borde); border-radius: 14px; background: var(--superficie); text-align: center; color: var(--texto-tenue); }
.pa-vacio svg { width: 48px; height: 48px; fill: none; stroke: var(--pa-acento); stroke-width: 1.5; stroke-linejoin: round; animation: pa-flota 3s ease-in-out infinite; }
.pa-vacio__titulo { font-family: var(--display); font-size: var(--t-md); font-weight: 800; color: var(--texto); }

@keyframes pa-aparece { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pa-pop { 0% { opacity: 0; transform: scale(0.4); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pa-activo { from { transform: scale(0.96); } to { transform: none; } }
@keyframes pa-campana { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
@keyframes pa-latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 64, 43, 0); } 50% { box-shadow: 0 0 0 6px rgba(184, 64, 43, 0.12); } }
@keyframes pa-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 960px) {
  .pa { background: none; }
}
@media (max-width: 520px) {
  .pp-paleta__colores { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pa *, .pa, .pp-paleta, .pp-paleta * { animation: none !important; transition: none !important; }
}

/* Barra superior en pantallas medianas */
.pa-agregar { white-space: nowrap; }
.pa-barra__titulos { min-width: 0; }
@media (max-width: 1200px) {
  .pa-usuario__correo span:last-child { display: none; }
  .pa-usuario__nombre { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Logos de las secciones del panel: mosaico de color por sección */
.pa-nav__item { gap: var(--e3); padding: 0.4rem var(--e2); }
.pa-nav__logo {
  --logo: #233344;
  display: grid; place-items: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--logo) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--logo) 22%, transparent);
  color: var(--logo);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.25s ease, color 0.25s ease;
}
.pa-nav__logo svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pa-nav__item:hover svg { transform: none; }
.pa-nav__item:hover .pa-nav__logo { transform: rotate(-8deg) scale(1.1); background: color-mix(in srgb, var(--logo) 22%, transparent); }
.pa-nav__item[aria-current='page'] .pa-nav__logo { background: rgba(255, 253, 249, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 253, 249, 0.3); color: var(--crema); }
.pa-nav__logo--recoger, .pa-nav__logo--rendimiento { --logo: #4A7340; }
.pa-nav__logo--pedidos, .pa-nav__logo--ia { --logo: #A86A12; }
.pa-nav__logo--tienda, .pa-nav__logo--tiendas { --logo: #7A6545; }
.pa-nav__logo--neutro { --logo: #6B5A55; }
[data-tema='oscuro'] .pa-nav__logo { --logo: #E6A2B0; }
[data-tema='oscuro'] :is(.pa-nav__logo--recoger, .pa-nav__logo--rendimiento) { --logo: #A9C79B; }
[data-tema='oscuro'] :is(.pa-nav__logo--pedidos, .pa-nav__logo--ia) { --logo: #E3B04B; }
[data-tema='oscuro'] :is(.pa-nav__logo--tienda, .pa-nav__logo--tiendas) { --logo: #CDBB98; }
[data-tema='oscuro'] .pa-nav__logo--neutro { --logo: #E8CFC2; }
@media (max-width: 960px) {
  .pa-nav__logo { width: 28px; height: 28px; border-radius: 8px; }
  .pa-nav__logo svg { width: 17px; height: 17px; }
}

/* Etiqueta "Ver más ofertas" como botón: una base oscura con la misma forma
   hace de canto (como un botón en relieve). Al pasar el mouse la etiqueta se
   levanta y al hacer clic se hunde sobre la base. */
.btn-etiqueta { cursor: pointer; }
.btn-etiqueta__pieza { isolation: isolate; animation-name: etiqueta-balanceo-suave; }
.btn-etiqueta__pieza::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #5C1828;
  -webkit-mask: url(../img/ver_ofertas_vino_600.webp) center / 100% 100% no-repeat;
  mask: url(../img/ver_ofertas_vino_600.webp) center / 100% 100% no-repeat;
  transform: translateY(7px);
}
.btn-etiqueta__img,
.btn-etiqueta__brillo { transition: transform 0.18s ease, filter 0.18s ease; }
.btn-etiqueta:hover :is(.btn-etiqueta__img, .btn-etiqueta__brillo),
.btn-etiqueta:focus-visible :is(.btn-etiqueta__img, .btn-etiqueta__brillo) { transform: translateY(-3px); }
.btn-etiqueta:active :is(.btn-etiqueta__img, .btn-etiqueta__brillo) { transform: translateY(6px); transition-duration: 0.06s; }
.btn-etiqueta:active .btn-etiqueta__pieza { filter: drop-shadow(0 4px 6px rgba(92, 24, 40, 0.25)); }
@keyframes etiqueta-balanceo-suave {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-etiqueta__img, .btn-etiqueta__brillo { transition: none; }
}

/* =========================================================================
   HALLOWEEN — se activa solo con <html data-halloween="si">
   (js/app.js lo pone del 24 de octubre al 1 de noviembre 00:00).
   - Tema CLARO: sutil y elegante. Se mantiene el azul marino TAURA; el
     acento dorado se vuelve dorado cálido y aparecen decoraciones discretas.
   - Tema OSCURO: inmersión total. Paleta marino profundo / dorado / crema.
   Todo vive en este bloque: borrarlo devuelve TAURA a la normalidad.
   ========================================================================= */

/* ---- Acentos comunes: el dorado del hilo se intensifica ---- */
:root[data-halloween='si'] {
  --hilo: #C77F28;           /* dorado otoñal cálido, menos saturado que calabaza */
}

/* Chispa de temporada: el rótulo eyebrow toma el dorado. */
:root[data-halloween='si'] .hero__eyebrow { color: #A86820; }

/* Los acentos de marca del hero se oscurecen y se refuerzan en tono marino. */
:root[data-halloween='si'] .hero__mini-indicadores .indicador,
:root[data-halloween='si'] .hero__mini-indicadores > * {
  --tinta: #1A2A42;
  --tinta-suave: #30466A;
}

/* El sello del titular en azul marino profundo con texto crema. */
:root[data-halloween='si'] .hero__titulo em,
:root[data-halloween='si'][data-tema='oscuro'] .hero__titulo em {
  background: #1A2A42;
  color: var(--crema);
}

/* ---- Contenedor de la decoración (lo inyecta js/app.js dentro del hero) ---- */
.hw-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hw-adorno {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Guirnalda de otoño colgando del borde superior del hero:
   un cordel curvo del que penden foquitos, calabazas y hojas. */
.hw-guirnalda {
  position: absolute;
  top: 0; left: -2%;
  width: 104%;
  height: clamp(52px, 9vw, 104px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 130'%3E%3Cpath d='M0 20 Q300 92 600 50 T1200 20' fill='none' stroke='%232A1D14' stroke-width='3'/%3E%3Cg fill='%23F0D694' stroke='%23B28E3A' stroke-width='2'%3E%3Ccircle cx='150' cy='63' r='11'/%3E%3Ccircle cx='450' cy='73' r='11'/%3E%3Ccircle cx='750' cy='73' r='11'/%3E%3Ccircle cx='1050' cy='63' r='11'/%3E%3C/g%3E%3Cg%3E%3Cg transform='translate(300 60)'%3E%3Cellipse cx='0' cy='8' rx='17' ry='14' fill='%23C77F28'/%3E%3Cellipse cx='0' cy='8' rx='6' ry='14' fill='%23A86820'/%3E%3C/g%3E%3Cg transform='translate(600 66)'%3E%3Cellipse cx='0' cy='8' rx='17' ry='14' fill='%23C77F28'/%3E%3Cellipse cx='0' cy='8' rx='6' ry='14' fill='%23A86820'/%3E%3C/g%3E%3Cg transform='translate(900 60)'%3E%3Cellipse cx='0' cy='8' rx='17' ry='14' fill='%23C77F28'/%3E%3Cellipse cx='0' cy='8' rx='6' ry='14' fill='%23A86820'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23A86820'%3E%3Cpath d='M75 55l3 7 7-4-3 8 8 1-6 5 3 6-7-3-2 7-2-7-7 3 3-6-6-5 8-1-3-8 7 4z'/%3E%3Cpath d='M1125 55l3 7 7-4-3 8 8 1-6 5 3 6-7-3-2 7-2-7-7 3 3-6-6-5 8-1-3-8 7 4z'/%3E%3C/g%3E%3C/svg%3E") top center / 100% 100% no-repeat;
}

/* Fantasmas flotando (SVG blanco con ojitos). */
.hw-fantasma {
  width: clamp(26px, 4vw, 46px);
  aspect-ratio: 5 / 6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 60'%3E%3Cpath d='M25 3C13 3 6 12 6 26v28l6-5 6 5 7-5 7 5 6-5 6 5V26C44 12 37 3 25 3z' fill='%23FBF8F3' stroke='%23D8CFC2' stroke-width='1.5'/%3E%3Ccircle cx='18' cy='24' r='3' fill='%233A2A2D'/%3E%3Ccircle cx='32' cy='24' r='3' fill='%233A2A2D'/%3E%3Cellipse cx='25' cy='33' rx='3' ry='4' fill='%233A2A2D' opacity='.5'/%3E%3C/svg%3E");
  filter: drop-shadow(0 3px 5px rgba(58, 42, 45, 0.12));
  animation: hw-flotar 5s ease-in-out infinite;
}
.hw-f1 { top: 20%; right: 3%; animation-delay: -1s; }
.hw-f2 { bottom: 14%; left: 4%; width: clamp(20px, 3vw, 34px); animation-delay: -2.6s; }
.hw-f3 { bottom: 26%; right: 8%; width: clamp(18px, 2.6vw, 30px); animation-delay: -3.8s; opacity: .85; }

/* Telarañas en las esquinas. */
.hw-telarana {
  width: clamp(58px, 10vw, 120px);
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23A99C8C' stroke-width='1.3'%3E%3Cpath d='M2 2 L98 98 M2 2 L86 2 M2 2 L2 86 M2 2 L74 38 M2 2 L38 74'/%3E%3Cpath d='M24 2 A22 22 0 0 1 2 24'/%3E%3Cpath d='M48 2 A46 46 0 0 1 2 48'/%3E%3Cpath d='M72 2 A70 70 0 0 1 2 72'/%3E%3C/svg%3E");
  opacity: .55;
}
.hw-t1 { top: 0; left: 0; }
.hw-t2 { top: 0; right: 0; transform: scaleX(-1); }

/* Calabazas. */
.hw-calabaza {
  width: clamp(26px, 4vw, 44px);
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M25 8v6' stroke='%234A6B2D' stroke-width='3' stroke-linecap='round'/%3E%3Cellipse cx='25' cy='30' rx='19' ry='16' fill='%23C77F28'/%3E%3Cellipse cx='14' cy='30' rx='7' ry='15' fill='%23D59F4D'/%3E%3Cellipse cx='36' cy='30' rx='7' ry='15' fill='%23D59F4D'/%3E%3Cellipse cx='25' cy='30' rx='7' ry='16' fill='%23A86820'/%3E%3C/svg%3E");
  filter: drop-shadow(0 3px 4px rgba(140, 71, 12, 0.18));
}
.hw-c1 { bottom: 4%; left: 2%; }
.hw-c2 { top: 34%; right: 2%; width: clamp(20px, 3vw, 32px); }

/* Hojas de arce. */
.hw-hoja {
  width: clamp(18px, 2.6vw, 30px);
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3l3 7 7-4-3 8 8 1-6 5 5 7-8-3-1 8-3-7-7 4 3-8-8-1 6-5-5-7 8 3 1-8z' fill='%23A86820'/%3E%3C/svg%3E");
  opacity: .9;
  animation: hw-caer 7s ease-in-out infinite;
}
.hw-h1 { top: 46%; left: 1%; animation-delay: -1.5s; }
.hw-h2 { top: 8%; left: 42%; animation-delay: -3s; }
.hw-h3 { bottom: 8%; right: 30%; animation-delay: -5s; }

@keyframes hw-flotar {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-12px) rotate(4deg); }
}
@keyframes hw-caer {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(18deg); }
}

/* ---- TEMA OSCURO: inmersión total de Halloween ---- */
:root[data-halloween='si'][data-tema='oscuro'] {
  --fondo: #140D1C;          /* noche morada muy oscura */
  --superficie: #241733;     /* morada */
  --papel: #2A1B3D;
  --papel-hueso: #140D1C;
  --texto: #F7ECDD;
  --texto-tenue: #C9B6D6;
  --borde: #3C2A52;
  --borde-fuerte: #6A4A8C;
  --tinta: #7A2E12;          /* botones: calabaza quemada */
  --tinta-suave: #9A3D18;
  --crema: #FFF7EE;
  --hilo: #FF7518;           /* calabaza brillante */
  --urgente: #FF7518;        /* descuentos en calabaza */
  --verde: #9BD46A;
  --aviso: #FFC24B;
}

/* Fondo nocturno con un resplandor de luna arriba a la derecha. */
:root[data-halloween='si'][data-tema='oscuro'] body {
  background-color: #140D1C;
  background-image:
    radial-gradient(circle at 85% -5%, rgba(255, 168, 76, 0.16), transparent 42%),
    radial-gradient(circle at 12% 8%, rgba(138, 79, 191, 0.14), transparent 38%),
    linear-gradient(rgba(255, 117, 24, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 117, 24, 0.03) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
}

/* En la noche, la decoración se aclara para verse sobre el fondo oscuro:
   telarañas y fantasmas con más presencia, hojas en tono cálido. */
:root[data-halloween='si'][data-tema='oscuro'] .hw-telarana { opacity: .7; filter: brightness(1.6); }
:root[data-halloween='si'][data-tema='oscuro'] .hw-guirnalda { filter: brightness(1.05); }
:root[data-halloween='si'][data-tema='oscuro'] .hero__eyebrow { color: #FF9538; }

@media (prefers-reduced-motion: reduce) {
  :root[data-halloween='si'] .hw-fantasma,
  :root[data-halloween='si'] .hw-hoja { animation: none; }
}

/* ---- Decoración GLOBAL: cubre toda la página, no solo el hero ----
   Overlay fijo a la ventana: telarañas en las esquinas y murciélagos que
   cruzan. No recibe clics y va detrás del contenido para no estorbar. */
.hw-global {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Telarañas en las cuatro esquinas de la ventana. */
.hw-global .hw-telarana { position: absolute; width: clamp(64px, 11vw, 150px); opacity: .4; }
.hw-g-t1 { top: 0; left: 0; }
.hw-g-t2 { top: 0; right: 0; transform: scaleX(-1); }
.hw-g-t3 { bottom: 0; left: 0; transform: scaleY(-1); }
.hw-g-t4 { bottom: 0; right: 0; transform: scale(-1); }

/* Murciélagos que cruzan despacio por el fondo. */
.hw-murcielago {
  position: absolute;
  width: clamp(26px, 3.6vw, 44px);
  aspect-ratio: 5 / 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'%3E%3Cpath d='M25 8c-2-4-5-6-9-6 1 2 1 4 0 5-3-3-7-4-11-3 3 1 5 3 6 6-2-1-4-1-6 0 4 1 7 3 9 7 2-3 5-5 7-5h8c2 0 5 2 7 5 2-4 5-6 9-7-2-1-4-1-6 0 1-3 3-5 6-6-4-1-8 0-11 3-1-1-1-3 0-5-4 0-7 2-9 6z' fill='%231A1016'/%3E%3C/svg%3E");
  opacity: .55;
  animation: hw-volar 26s linear infinite;
}
.hw-g-m1 { top: 16%; left: -8%; animation-delay: -3s; }
.hw-g-m2 { top: 32%; left: -8%; width: clamp(18px, 2.6vw, 30px); opacity: .4; animation-delay: -14s; }

@keyframes hw-volar {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  25%  { transform: translate(30vw, -6vh) rotate(4deg); }
  50%  { transform: translate(60vw, 4vh) rotate(-3deg); }
  75%  { transform: translate(90vw, -5vh) rotate(5deg); }
  100% { transform: translate(120vw, 2vh) rotate(-4deg); }
}

/* Un adorno de esquina por sección (catálogo, tiendas, rutas, pie). */
.hw-seccion {
  position: absolute;
  top: 0; right: 0;
  width: clamp(54px, 8vw, 96px);
  opacity: .32;
  pointer-events: none;
  z-index: 0;
}
.hw-seccion.hw-telarana { transform: scaleX(-1); }
.hw-seccion.hw-calabaza { top: 8px; right: 10px; opacity: .7; }
/* El contenido de cada sección decorada queda por encima de su adorno. */
:root[data-halloween='si'] #catalogo > *:not(.hw-seccion),
:root[data-halloween='si'] #tiendas > *:not(.hw-seccion),
:root[data-halloween='si'] #rutas > *:not(.hw-seccion),
:root[data-halloween='si'] .pie > *:not(.hw-seccion) { position: relative; z-index: 1; }

/* En la noche el murciélago y las telarañas globales se aclaran un poco. */
:root[data-halloween='si'][data-tema='oscuro'] .hw-global .hw-telarana { opacity: .55; filter: brightness(1.6); }
:root[data-halloween='si'][data-tema='oscuro'] .hw-murcielago { filter: brightness(2.2); opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  :root[data-halloween='si'] .hw-murcielago { animation: none; left: auto; right: 4%; }
}

/* En pantallas pequeñas se aligera la decoración global para no recargar. */
@media (max-width: 640px) {
  .hw-global .hw-telarana { width: clamp(48px, 16vw, 80px); opacity: .3; }
  .hw-g-m2, .hw-seccion { display: none; }
}

/* El panel del comerciante toma la paleta pero NADA de decoración:
   la decoración no se inyecta ahí, pero por si acaso queda oculta. */
:root[data-halloween='si'] .cuerpo-panel .hw-decor,
:root[data-halloween='si'] .cuerpo-panel .hw-global { display: none; }

/* =========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   Lo crea js/soporte.js solo si CONFIG.soporte.whatsapp tiene un número
   válido. Va abajo a la izquierda para no chocar con el asistente IA.
   ========================================================================= */
.wa-flotante {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.wa-flotante:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.55), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.wa-flotante:active { transform: scale(0.96); }
.wa-flotante:focus-visible { outline: 3px solid var(--hilo); outline-offset: 3px; }
.wa-flotante svg { display: block; }

@media (max-width: 640px) {
  .wa-flotante { width: 50px; height: 50px; left: 14px; bottom: 14px; }
}

/* ---------- Paginación del catálogo ----------
   Controles bajo la rejilla. Botones amplios (toque cómodo para todas las
   edades) en la paleta vinotinto/crema, sin azul. */
.paginacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e6);
}
.paginacion__info {
  font-family: var(--dato);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  margin: 0;
}
.paginacion__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--e2);
}
.paginacion__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--e3);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--dato);
  font-size: var(--t-base);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.paginacion__btn:hover:not(:disabled):not(.paginacion__btn--activa) {
  border-color: var(--tinta);
  color: var(--tinta);
}
.paginacion__btn--activa {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--crema);
  cursor: default;
}
.paginacion__btn--flecha { font-size: var(--t-lg); line-height: 1; }
.paginacion__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.paginacion__btn:focus-visible { outline: 3px solid var(--hilo); outline-offset: 2px; }
.paginacion__puntos {
  min-width: 24px;
  text-align: center;
  color: var(--texto-tenue);
  font-family: var(--dato);
}

/* CTA del hero: la imagen mantiene su proporción y cuelga como una etiqueta. */
.hero__cta {
  display: inline-block;
  width: var(--ancho-etiqueta);
  padding: 0;
  line-height: 0;
  border-radius: 0;
  transition: transform var(--transicion);
}
.hero__cta:hover,
.hero__cta:focus-visible { transform: translateY(-2px); }
.hero__cta:focus-visible { outline: 3px solid var(--hilo); outline-offset: 4px; }
.hero__cta-etiqueta {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  transform: rotate(-12deg);
  transform-origin: 8.44% 9.63%;
  transition: filter var(--transicion);
}
.hero__cta:hover .hero__cta-etiqueta,
.hero__cta:focus-visible .hero__cta-etiqueta { filter: brightness(1.06) saturate(1.1); }
.hero__cta:active .hero__cta-etiqueta { filter: brightness(0.95); }

/* =========================================================================
   PANEL · Tarjetas de pedido compactas y acciones jerarquizadas
   ========================================================================= */
/* La tarjeta pasa a layout de grid: info a la izquierda ocupando lo ancho
   disponible, acciones a la derecha en columna. Padding compacto para
   mostrar más pedidos sin scroll. */
.panel-pedido {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--e3) var(--e4);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.panel-pedido:hover { border-color: var(--borde-fuerte); }
/* Borde grueso izquierdo: franja de color para distinguir estados sin leer */
.panel-pedido { border-left-width: 4px; }
.panel-pedido--pendiente { border-left-color: var(--hilo); background: color-mix(in srgb, var(--hilo) 4%, var(--superficie)); }
.panel-pedido--pagado,
.panel-pedido--separado { border-left-color: var(--tinta); }
.panel-pedido--enviado { border-left-color: var(--etiqueta); }
.panel-pedido--contraentrega { border-left-color: var(--aviso); }
.panel-pedido--entregado { border-left-color: var(--verde); opacity: .78; }
.panel-pedido--entregado:hover { opacity: 1; }
.panel-pedido--cancelado,
.panel-pedido--vencido,
.panel-pedido--devuelto { border-left-color: var(--urgente); opacity: .65; }
.panel-pedido--cancelado:hover,
.panel-pedido--vencido:hover,
.panel-pedido--devuelto:hover { opacity: 1; }

/* La pastilla del estado más gorda y legible */
.panel-pedido .estado-pedido { padding: 3px 10px; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; }

.panel-pedido__info { min-width: 0; display: grid; gap: 4px; }
.panel-pedido__cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-pedido__numero { font-family: var(--dato); font-weight: 700; font-size: var(--t-sm); color: var(--texto); }
.panel-pedido__tipo { font-size: var(--t-xs); color: var(--texto-tenue); }
.panel-pedido__prenda { font-size: var(--t-sm); color: var(--texto); margin: 2px 0 0; }
.panel-pedido__talla { color: var(--texto-tenue); font-weight: 500; }
.panel-pedido__linea { font-size: var(--t-sm); color: var(--texto-tenue); margin: 0; }
.panel-pedido__linea strong { color: var(--texto); font-weight: 700; }
.panel-pedido__cliente { color: var(--texto); }
.panel-pedido__hora { font-size: var(--t-xs); }
.panel-pedido__detalle { font-size: var(--t-xs); color: var(--texto-tenue); margin: 0; font-style: italic; }

/* Acciones: la principal destacada, las secundarias chicas abajo */
.panel-pedido__acciones { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 170px; }
.panel-pedido__secundarias { display: flex; gap: var(--e2); justify-content: flex-end; align-items: center; flex-wrap: wrap; }

/* Botón de acción "pleno": ancho completo cuando es la única (ej. Confirmar pago) */
.pedido__accion--pleno { width: 100%; justify-content: center; min-height: 42px; font-weight: 700; }

/* Botón "sutil": para acciones secundarias como Actualizar */
.pedido__accion--sutil { padding: 6px 10px; font-size: var(--t-xs); background: transparent; border-color: var(--borde); }
.pedido__accion--sutil svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-right: 4px; vertical-align: -2px; }

/* Cancelar: enlace discreto en vez de botón rojo gigante */
.pedido__cancelar {
  border: none;
  background: transparent;
  color: var(--texto-tenue);
  font-size: var(--t-xs);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pedido__cancelar:hover { color: var(--urgente); background: color-mix(in srgb, var(--urgente) 8%, transparent); }
.pedido__cancelar--wa:hover { color: #25D366; background: color-mix(in srgb, #25D366 10%, transparent); }
.pedido__cancelar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Form de código de entrega: input y botón en línea */
.panel-pedido__entrega {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
}
.panel-pedido__entrega .campo__control {
  min-height: 42px;
  font-family: var(--dato);
  text-transform: uppercase;
  font-size: var(--t-sm);
  padding: 4px 10px;
  letter-spacing: 1px;
}

/* Barra de "Actualizar" más limpia */
.panel-recargar { display: flex; align-items: center; gap: var(--e3); margin: var(--e3) 0; flex-wrap: wrap; }
.panel-recargar small { color: var(--texto-tenue); font-size: var(--t-xs); }

@media (max-width: 720px) {
  .panel-pedido { grid-template-columns: 1fr; }
  .panel-pedido__acciones { min-width: 0; }
  .panel-pedido__secundarias { justify-content: flex-start; }
}

/* ---------- Aviso superior clicable ---------- */
.pa-alerta {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  padding: var(--e3) var(--e4);
  border: 1px solid rgba(210, 154, 60, 0.45);
  border-left: 4px solid var(--hilo);
  border-radius: 12px;
  background: rgba(210, 154, 60, 0.10);
  font-size: var(--t-sm);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  margin-bottom: var(--e3);
}
.pa-alerta:hover { background: rgba(210, 154, 60, 0.18); border-color: rgba(210, 154, 60, 0.65); }
.pa-alerta--urgente { border-left-color: var(--urgente); background: color-mix(in srgb, var(--urgente) 8%, var(--superficie)); }
.pa-alerta--urgente:hover { background: color-mix(in srgb, var(--urgente) 14%, var(--superficie)); }
.pa-alerta > svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--aviso); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pa-alerta--urgente > svg { stroke: var(--urgente); }
.pa-alerta__texto { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pa-alerta__texto strong { font-weight: 700; }
.pa-alerta__texto small { color: var(--texto-tenue); font-size: var(--t-xs); }
.pa-alerta__flecha { font-size: 20px; color: var(--tinta); flex-shrink: 0; transition: transform .15s ease; }
.pa-alerta:hover .pa-alerta__flecha { transform: translateX(3px); }

/* ---------- Atajo "¿Llegó un cliente?" ---------- */
.recoger-atajo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  font-size: var(--t-sm);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  margin-bottom: var(--e3);
}
.recoger-atajo:hover { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 4%, var(--superficie)); }
.recoger-atajo__texto { display: grid; gap: 2px; min-width: 0; flex: 1; }
.recoger-atajo__texto small { color: var(--texto-tenue); font-size: var(--t-xs); }
.recoger-atajo__flecha { font-size: 20px; color: var(--tinta); flex-shrink: 0; transition: transform .15s ease; }
.recoger-atajo:hover .recoger-atajo__flecha { transform: translateX(3px); }

/* ---------- Cantidad del ítem en el carrito ---------- */
.carrito__cantidad {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 4px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  width: fit-content;
}
.carrito__cantidad-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--papel);
  color: var(--texto);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s ease, color .15s ease;
}
.carrito__cantidad-btn:hover:not(:disabled) { background: var(--tinta); color: var(--crema); }
.carrito__cantidad-btn:disabled { opacity: .35; cursor: not-allowed; }
.carrito__cantidad-valor { font-family: var(--dato); font-weight: 700; min-width: 20px; text-align: center; font-size: var(--t-sm); }
.carrito__item-unitario { display: block; color: var(--texto-tenue); font-size: var(--t-xs); margin-top: 2px; }

/* ---------- Modal de cancelar: motivos sugeridos ---------- */
.motivo-cancelar { display: grid; gap: var(--e3); }
.motivo-cancelar__intro { color: var(--texto-tenue); font-size: var(--t-sm); margin: 0; }
.motivo-cancelar__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.motivo-chip {
  padding: 8px 14px;
  border: 1.5px solid var(--borde);
  border-radius: 99px;
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.motivo-chip:hover { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, var(--superficie)); }
.motivo-chip[aria-pressed='true'] { border-color: var(--tinta); background: var(--tinta); color: var(--crema); }
.motivo-cancelar__texto { min-height: 90px; font-family: var(--cuerpo); resize: vertical; }
.motivo-cancelar__botones { display: flex; gap: var(--e2); justify-content: flex-end; margin-top: var(--e2); flex-wrap: wrap; }
.btn--peligro { background: var(--urgente); border: 1.5px solid var(--urgente); color: #fff; }
.btn--peligro:hover { background: color-mix(in srgb, var(--urgente) 80%, #000); border-color: color-mix(in srgb, var(--urgente) 80%, #000); }


/* ==========================================================================
   FORMULARIO "AGREGAR PRENDA" · sobrio
   Sin movimiento: se anulan los levantamientos, sombras de "botón 3D",
   brillos y apariciones escalonadas, sólo dentro de #form-prenda.
   ========================================================================== */
#modal:has(#form-prenda),
#modal:has(#form-prenda) * { animation: none !important; transition: none !important; }

.pp-form { font-size: 1rem; color: var(--texto); }
.pp-form .mt-paso__cabeza {
  display: flex; align-items: center; gap: var(--e3);
  margin: var(--e5) 0 var(--e4); padding: 0 0 var(--e3);
  border-bottom: 1px solid var(--borde);
}
.pp-form .mt-paso__cabeza > div { min-width: 0; }
.pp-form .mt-paso__num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: transparent; color: var(--tinta); border: 1px solid var(--tinta);
  font-size: 0.875rem; font-weight: 700;
}
.pp-form .mt-paso__titulo { font-size: 1.125rem; font-weight: 700; margin: 0; line-height: 1.3; }
.pp-form .mt-paso__ayuda { font-size: 0.875rem; color: var(--texto-tenue); margin: 2px 0 0; }

.pp-form .campo { margin-bottom: var(--e4); }
.pp-form .campo__etiqueta { font-size: 0.9375rem; font-weight: 600; color: var(--texto); margin-bottom: 6px; }
.pp-form .campo__ayuda { font-size: 0.8125rem; color: var(--texto-tenue); margin-top: 6px; }
.pp-form .campo__control {
  min-height: 48px; padding: 0 var(--e3); font-size: 1rem;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie);
  color: var(--texto); box-shadow: none;
}
.pp-form textarea.campo__control { min-height: 96px; padding: var(--e3); line-height: 1.5; }
.pp-form .campo__control:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
.pp-form .campo__control::placeholder { color: var(--texto-tenue); opacity: 0.85; }
.pp-opcional { font-weight: 400; color: var(--texto-tenue); font-size: 0.8125rem; }

/* Fotos: un solo bloque plano, sin contorno dorado permanente */
.pp-form .subir-foto {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 112px; margin: 0 0 var(--e2); padding: var(--e3);
  border: 1px dashed var(--borde); border-radius: 10px; background: var(--superficie);
  text-align: center; cursor: pointer;
}
.pp-form .subir-foto:hover { background: var(--papel); }
.pp-form .subir-foto:focus-within { outline: none; }
.pp-form .subir-foto:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.pp-form .subir-foto span { font-size: 1rem; font-weight: 600; color: var(--texto); }
.pp-form .subir-foto small { font-size: 0.8125rem; color: var(--texto-tenue); font-weight: 400; }
.pp-form .pp-camara { stroke: var(--tinta); margin-right: 6px; }
.pp-form .fotos-prenda { gap: var(--e2); margin-bottom: var(--e2); }

/* Color: botón plano y paleta sin animación */
.pp-form .pp-paleta__boton {
  display: flex; align-items: center; gap: var(--e2); width: 100%; min-height: 48px; padding: 0 var(--e3);
  border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto);
  font-size: 1rem; font-weight: 500; text-align: left; box-shadow: none; transform: none;
}
.pp-form .pp-paleta__boton:hover { background: var(--papel); transform: none; box-shadow: none; }
.pp-form .pp-paleta__boton:active { transform: none; box-shadow: none; }
.pp-form .pp-paleta__boton[aria-expanded='true'] { background: var(--papel); border-color: var(--tinta); color: var(--texto); }
.pp-form .pp-paleta__boton[aria-expanded='true'] .pp-paleta__muestra { transform: none; }
.pp-form .pp-paleta__muestra { width: 22px; height: 22px; }
.pp-form .pp-paleta { display: none; margin: 0 0 var(--e4); }
.pp-form .pp-paleta[data-abierta='si'] { display: block; }
.pp-form .pp-paleta__caja { visibility: visible; margin-top: var(--e2); padding: var(--e3); border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); box-shadow: none; }
.pp-form .pp-paleta__colores { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); }
.pp-form .pp-paleta .pp-color {
  min-height: 72px; padding: var(--e2); gap: 6px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--superficie); box-shadow: none; font-size: 0.8125rem; color: var(--texto);
}
.pp-form .pp-paleta .pp-color .pp-color__muestra { width: 30px; height: 30px; transition: none; transform: none; animation: none; }
.pp-form .pp-paleta .pp-color:hover { background: var(--papel); transform: none; }
.pp-form .pp-paleta .pp-color[aria-pressed='true'] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.pp-form .pp-paleta .pp-color[aria-pressed='true']::after { color: var(--tinta); }
.pp-form .pp-paleta__otro { margin-top: var(--e3); font-size: 0.8125rem; color: var(--texto-tenue); }

/* Ayuda de IA: una caja plana, sin halo ni destellos */
.pp-form .ia-ayuda--publicar {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); margin: 0 0 var(--e5);
  padding: var(--e3); border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); box-shadow: none;
}
.pp-form .ia-ayuda::before, .pp-form .ia-ayuda::after, .pp-form .ia-ayuda__halo,
.pp-form .ia-ayuda__destello, .pp-form .ia-ayuda__icono { display: none; content: none; animation: none; }
.pp-form .ia-ayuda__estado { margin: 0; font-size: 0.8125rem; color: var(--texto-tenue); }
.pp-form .ia-ayuda__accion { width: 100%; min-height: 48px; justify-content: center; white-space: normal; box-shadow: none; transform: none; font-size: 1rem; }
.pp-form .ia-ayuda__accion:hover { transform: none; box-shadow: none; }
.pp-form .ia-ayuda--publicar:has(.ia-ayuda__accion[disabled]) { border-color: var(--borde); background: var(--superficie); }

/* Tallas: chips planos */
.pp-form .tallas-selector { margin-bottom: var(--e4); }
.pp-form .tallas-selector__grupo { font-size: 0.75rem; color: var(--texto-tenue); letter-spacing: 0.06em; margin: var(--e3) 0 var(--e2); }
.pp-form .talla-chip {
  min-width: 48px; min-height: 44px; padding: 0 var(--e3); border: 1px solid var(--borde); border-radius: 8px;
  background: var(--superficie); color: var(--texto); font-size: 0.9375rem; font-weight: 600; box-shadow: none; transform: none;
}
.pp-form .talla-chip:hover { background: var(--papel); border-color: var(--texto-tenue); transform: none; }
.pp-form .talla-chip[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.pp-form .tallas-selector__otra { max-width: none; margin-top: var(--e3); }

/* Género, unidades y precio */
.pp-form .pp-opciones { gap: var(--e2); }
.pp-form .pp-opcion span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--e3);
  border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto);
  font-size: 0.9375rem; font-weight: 600; box-shadow: none; transform: none;
}
.pp-form .pp-opcion span:hover { background: var(--papel); transform: none; }
.pp-form .pp-opcion input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.pp-form .pp-opcion input:checked + span::before { content: none; }
.pp-form .mt-prefijo > span { min-height: 48px; border-color: var(--borde); background: var(--papel); color: var(--texto-tenue); }
.pp-form .pp-pasos { grid-template-columns: 48px minmax(0, 1fr) 48px; }
.pp-form .pp-pasos button { min-height: 48px; border-color: var(--borde); background: var(--superficie); color: var(--texto); font-size: 1.25rem; box-shadow: none; }
.pp-form .pp-pasos button:hover { background: var(--papel); }
.pp-form .pp-pasos .campo__control { min-height: 48px; }

/* Botón final y errores */
.pp-form > .btn--primario, .pp-form .ia-ayuda__accion { min-height: 52px; box-shadow: none; transform: none; font-size: 1rem; font-weight: 700; }
/* Sin pespunte dorado decorativo dentro del formulario; el foco por teclado sí se ve */
.pp-form .btn--primario:not(:focus-visible) { outline: none; }
.pp-form > .btn--primario:hover { transform: none; box-shadow: none; }
#pp-error:not([hidden]) { margin-bottom: var(--e3); padding: var(--e3); border: 1px solid var(--urgente); border-radius: 8px; background: transparent; font-size: 0.9375rem; font-weight: 600; color: var(--urgente); }