/* ═══════════════════════════════════════════════════════════════
   VILLAL · VITRINA
   ───────────────────────────────────────────────────────────────
   Lo que se ve en el inicio y en cada sección:

   1. El tendedero de "Súper descuentos": pared de ladrillo blanco,
      cuerda de algodón y pinzas de madera. Se desliza de lado.
   2. "Más para consentirte": encabezado en etiqueta roja y tus
      etiquetas (2 por fila en el celular y 6 en el computador).
   3. La bolsa flotante: barra de abajo con el total.

   Va DESPUÉS de base.css. Usa sus colores (--marca, --tinta...).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,700;1,700&family=Caveat:wght@700&display=swap');

:root {
  --vt-titulo: 'Gelasio', Georgia, 'Times New Roman', serif;
  --vt-kraft: #D9B58E;
  --vt-kraft-osc: #7A4524;
  --vt-cordel: #8C5A34;
  --vt-pad: 24px;            /* igual que el margen de .contenedor */
}
@media (max-width: 768px) { :root { --vt-pad: 16px; } }
@media (max-width: 400px) { :root { --vt-pad: 12px; } }


/* ───────────────────────────────────────────────────────────────
   ENCABEZADOS DE SECCIÓN
   ─────────────────────────────────────────────────────────────── */
.vt-seccion { padding-top: var(--e-6); }
.vt-seccion + .vt-seccion { padding-top: var(--e-6); }
.vt-seccion.vt-arriba { padding-top: 0; }   /* la pared de descuentos arranca pegada al header */
.vt-abajo { padding-bottom: var(--e-8); }
.vt-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-3); flex-wrap: wrap; }
.vt-cab h2 { font: 700 clamp(26px, 4vw, 36px)/1.1 var(--vt-titulo); letter-spacing: 0; text-wrap: balance; }
.vt-cab p { margin-top: 6px; color: var(--tinta-media); }
.vt-flechas { display: flex; gap: 8px; }
.vt-flechas button {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--tinta); background: var(--fondo-tarjeta); color: var(--tinta);
  transition: background var(--rapida), color var(--rapida);
}
.vt-flechas button:hover { background: var(--tinta); color: #fff; }
.vt-flechas button:disabled { opacity: .3; cursor: default; background: var(--fondo-tarjeta); color: var(--tinta); }
@media (max-width: 600px) { .vt-flechas { display: none; } }


/* ───────────────────────────────────────────────────────────────
   1. TENDEDERO DE DESCUENTOS
   ─────────────────────────────────────────────────────────────── */
.vt-tend {
  --w: 186px;          /* ancho de cada tarjeta */
  --pinY: 32px;        /* altura de la cuerda */
  --sag: 16px;         /* cuánto se cae la cuerda entre pinzas */
  /* La pared va de borde a borde de la pantalla; lo de adentro se alinea con el logo */
  --vt-col: max(var(--vt-pad), calc((100% - 1232px) / 2));
}
@media (max-width: 600px) { .vt-tend { --w: min(46vw, 172px); --pinY: 30px; } }

/* Pared de ladrillo blanco */
.vt-muro {
  position: relative; overflow: hidden; padding-bottom: 12px;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255,255,255,.55), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56'%3E%3Crect width='120' height='56' fill='%23E2D6CB'/%3E%3Crect x='1' y='1' width='57' height='25' rx='2' fill='%23F7F2ED'/%3E%3Crect x='61' y='1' width='57' height='25' rx='2' fill='%23F1EAE3'/%3E%3Crect x='-29' y='29' width='57' height='25' rx='2' fill='%23F4EEE8'/%3E%3Crect x='31' y='29' width='57' height='25' rx='2' fill='%23F9F5F1'/%3E%3Crect x='91' y='29' width='57' height='25' rx='2' fill='%23F0E8E0'/%3E%3C/svg%3E") 0 0 / 120px 56px;
}

/* La fila que se desliza */
.vt-pista {
  position: relative; display: flex; gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--vt-col); padding: var(--pinY) var(--vt-col) 34px;
  scrollbar-width: none; cursor: grab;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
          mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.vt-pista::-webkit-scrollbar { display: none; }
.vt-pista:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.vt-pista.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.vt-pista.arrastrando * { pointer-events: none; }
.vt-pista.auto { scroll-snap-type: none; }
.vt-pista img { -webkit-user-drag: none; user-select: none; }

.vt-cuerda { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; max-width: none; height: auto; }

.vt-item {
  position: relative; z-index: 1; flex: 0 0 var(--w); scroll-snap-align: start;
  transform-origin: 50% 0; rotate: var(--r, 0deg);
  animation: vt-cae .9s cubic-bezier(.3,1.5,.5,1) backwards, vt-mece 4.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 70ms), var(--d, 0s);
}
@keyframes vt-cae { from { transform: translateY(-46px) rotate(-8deg); } }
@keyframes vt-mece { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
.vt-item:hover { animation-play-state: running, paused; }
/* Pocas ofertas: caben todas y quedan centradas. Muchas: empiezan alineadas y se deslizan */
.vt-pista > .vt-item:first-of-type { margin-left: auto; }
.vt-pista > .vt-item:last-of-type { margin-right: auto; }
@media (max-width: 600px) {
  .vt-item { animation: vt-cae .9s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay: calc(var(--i) * 70ms); }
}

/* La tarjeta colgada */
.vt-carta {
  position: relative; display: grid; gap: 7px; padding: 9px 9px 10px; border-radius: 4px;
  background: var(--fondo-tarjeta);
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 24px 26px -14px rgba(70,40,20,.42);
  transform-origin: 50% 0; rotate: calc(var(--viento, 0) * 1deg);
  transition: rotate .9s cubic-bezier(.25,1.9,.45,1);
}
.vt-pista.soplando .vt-carta { transition-duration: .25s; transition-timing-function: ease-out; }
.vt-carta .vt-foto { display: block; aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: var(--fondo-suave); }
.vt-carta .vt-foto img { width: 100%; height: 100%; object-fit: cover; }
.vt-carta .vt-nombre { font-weight: 600; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-carta .vt-nombre:hover { color: var(--marca); }
.vt-ahorras { justify-self: start; padding: 3px 8px; border-radius: 99px; background: #E5F5EC; color: #17804A; font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.vt-quedan { display: grid; gap: 4px; color: var(--marca); font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.vt-quedan i { display: block; height: 5px; border-radius: 99px; background: #F3DDE1; overflow: hidden; }
.vt-quedan i::after { content: ''; display: block; height: 100%; width: calc(var(--s) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--marca), #F06A82); }
.vt-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vt-precios { flex: 1 0 100%; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vt-precios b { color: var(--marca); font-size: 16px; font-weight: 700; }
.vt-precios s { color: var(--tinta-suave); font-size: 12px; }

/* Etiqueta kraft del descuento: arriba a la derecha, en la orilla */
.vt-etq { position: absolute; top: -12px; right: 10px; z-index: 4; filter: drop-shadow(0 6px 6px rgba(70,35,10,.28)); transform-origin: 50% 9px; }
.vt-etq::after { content: ''; position: absolute; left: 50%; top: -6px; width: 1.5px; height: 12px; background: var(--vt-cordel); }
.vt-etq-cuerpo {
  position: relative; display: block; width: 54px; padding: 19px 4px 7px; text-align: center;
  color: var(--vt-kraft-osc); background: var(--vt-kraft); border-radius: 0 0 9px 9px;
  clip-path: polygon(50% 0, 100% 15px, 100% 100%, 0 100%, 0 15px);
}
.vt-etq-cuerpo::before { content: ''; position: absolute; left: 50%; top: 9px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--fondo); box-shadow: 0 0 0 2px var(--vt-cordel); }
.vt-etq b { display: block; font: 700 15px/1 var(--vt-titulo); color: var(--marca); transform: rotate(-6deg); }
.vt-item:hover .vt-etq { animation: vt-etq-vuelo 1.3s cubic-bezier(.3,.7,.4,1); }
@keyframes vt-etq-vuelo { 25% { transform: perspective(500px) rotate(12deg) rotateY(28deg); } 50% { transform: perspective(500px) rotate(-7deg) rotateY(-14deg); } 75% { transform: perspective(500px) rotate(3deg) rotateY(6deg); } }

/* Pinza de madera con resorte */
.vt-pinza { position: absolute; left: 50%; top: -22px; z-index: 5; width: 12px; height: 44px; margin-left: -6px; border-radius: 3px; background: linear-gradient(90deg, #B98250, #E7C08A 42%, #D2A06A 58%, #A97443); box-shadow: 1px 3px 3px rgba(60,30,10,.35); }
.vt-pinza::before { content: ''; position: absolute; left: -2px; right: -2px; top: 15px; height: 6px; border-radius: 2px; background: linear-gradient(#EEE, #8D8D8D); box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.vt-pinza::after { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; margin-left: -.5px; background: rgba(80,40,10,.45); }

/* Encabezado dentro de la pared: "Precios de siempre" tachado, título grande y el mayor descuento */
.vt-titular {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 18px 40px; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; padding: 28px var(--vt-pad) 4px;
}
.vt-titular-izq { min-width: 0; }
.vt-antes { display: flex; align-items: center; gap: 14px; margin: 0; }
.vt-tachado { position: relative; font: 600 clamp(18px, 2vw, 26px)/1 var(--fuente-titulo); color: #8A7B81; }
.vt-tachado svg { position: absolute; left: -6px; top: 50%; width: calc(100% + 12px); height: 26px; margin-top: -12px; overflow: visible; }
.vt-tachado path { fill: none; stroke: var(--marca); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.vt-antes em { font: 700 clamp(20px, 2vw, 26px)/1 'Caveat', cursive; font-style: normal; color: var(--marca); rotate: -4deg; }
.vt-titular h2 {
  margin: 8px 0 12px; font: 800 clamp(40px, 5.4vw, 70px)/.95 var(--fuente-titulo);
  letter-spacing: -.035em; color: var(--tinta); text-wrap: balance;
}
.vt-titular h2 span { color: var(--marca); }
.vt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-chips span { padding: 6px 13px; border-radius: 99px; background: #fff; border: 1px solid #EADCDD; font-size: 13px; font-weight: 600; color: #3D3035; }
.vt-chips b { color: #146B3E; }
.vt-cifra { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--marca); }
.vt-cifra small { margin-top: clamp(8px, 1.4vw, 20px); font: 700 clamp(11px, 1vw, 15px)/1 var(--fuente-texto); letter-spacing: .16em; text-transform: uppercase; writing-mode: vertical-rl; rotate: 180deg; color: #5E3A2A; }
.vt-cifra b { font: 800 clamp(84px, 10.5vw, 150px)/.82 var(--fuente-titulo); letter-spacing: -.05em; text-shadow: 5px 5px 0 rgba(200, 30, 60, .15); white-space: nowrap; }

/* Encabezado "Cintas que corren": una roja grande y una crema más delgada, cruzadas */
.vt-cruce { position: relative; z-index: 3; height: 150px; margin-top: 6px; }
.vt-cinta { position: absolute; left: -5%; width: 110%; overflow: hidden; box-shadow: 0 10px 18px -10px rgba(70, 20, 30, .5); }
.vt-cinta.a { top: 26px; z-index: 2; background: var(--marca); color: #fff; rotate: -2.2deg; }
.vt-cinta.b { top: 78px; z-index: 1; background: #F6D9C2; color: #4E260C; rotate: 1.6deg; }
.vt-cinta-in { display: flex; width: max-content; animation: vt-corre 34s linear infinite; will-change: transform; }
.vt-cinta.b .vt-cinta-in { animation-duration: 40s; animation-direction: reverse; }
@keyframes vt-corre { to { transform: translateX(-50%); } }
.vt-trozo {
  display: flex; align-items: center; gap: 22px; padding: 13px 22px 12px 0; white-space: nowrap;
  font: 800 30px/1 var(--fuente-titulo); letter-spacing: .01em; text-transform: uppercase;
}
.vt-cinta.b .vt-trozo { font-size: 20px; font-weight: 700; letter-spacing: .08em; padding-block: 11px; }
.vt-trozo i { font-style: normal; font-size: .7em; opacity: .8; }
.vt-trozo em { font-style: normal; font-family: var(--vt-titulo); text-transform: none; font-size: 1.05em; color: #FFE08A; }
.vt-cinta.b .vt-trozo em { color: var(--marca); }
@media (max-width: 640px) {
  .vt-cruce { height: 116px; }
  .vt-cinta.a { top: 18px; } .vt-cinta.b { top: 62px; }
  .vt-trozo { font-size: 21px; gap: 14px; padding-right: 14px; }
  .vt-cinta.b .vt-trozo { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .vt-cinta-in { animation: none; } }

/* Flechas a los lados de la pared (solo cuando hay más de las que caben) */
.vt-tendal { position: relative; }
.vt-flecha {
  position: absolute; top: 50%; z-index: 6; width: 46px; height: 46px; margin-top: -10px; padding: 0;
  border: 0; border-radius: 50%; background: #fff; color: var(--tinta);
  display: grid; place-items: center; box-shadow: 0 6px 18px -6px rgba(60, 30, 20, .45);
  transition: background var(--rapida), color var(--rapida), opacity var(--rapida);
}
.vt-flecha svg { width: 20px; height: 20px; }
.vt-flecha:hover { background: var(--tinta); color: #fff; }
.vt-flecha:disabled { opacity: 0; pointer-events: none; }
.vt-flecha.izq { left: 16px; } .vt-flecha.der { right: 16px; }
.vt-muro:not(.desliza) .vt-flecha,
.vt-muro:not(.desliza) .vt-progreso,
.vt-muro:not(.desliza) .vt-ayuda { display: none; }
@media (max-width: 600px) { .vt-flecha { display: none; } }

@media (max-width: 640px) {
  .vt-titular { padding-top: 22px; gap: 10px; align-items: flex-end; }
  .vt-antes { gap: 10px; }
  .vt-chips span { font-size: 11.5px; padding: 5px 10px; }
  .vt-cifra { margin-left: auto; }
}

/* Barra de avance y pista de ayuda */
.vt-progreso { position: relative; z-index: 1; height: 4px; width: min(260px, 60%); margin: 2px auto 0; border-radius: 99px; background: #EBDDDF; overflow: hidden; }
.vt-progreso i { display: block; height: 100%; width: 20%; border-radius: 99px; background: var(--marca); transition: transform .15s linear; }
.vt-ayuda { position: relative; z-index: 1; margin-top: 8px; text-align: center; font-size: 12px; color: var(--tinta-suave); }

/* Celular: la tarjeta del centro de frente y las de los lados giran sobre su pinza.
   Lo calcula el navegador mientras deslizas (sin JavaScript), por eso va suave. */
@media (max-width: 600px) {
  .vt-pista { gap: 12px; padding-inline: calc(50% - var(--w) / 2); scroll-padding-inline: 0; }
  .vt-item { scroll-snap-align: center; }
  .vt-ayuda::after { content: ' →'; }
}
@supports (animation-timeline: view()) {
  @media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
    .vt-item { view-timeline: --vt-carta inline; }
    .vt-item > .vt-carta { animation: vt-gira linear both; animation-timeline: --vt-carta; will-change: transform; }
  }
}
@keyframes vt-gira {
  0%   { transform: perspective(760px) rotateY(-36deg) scale(.84); }
  50%  { transform: perspective(760px) rotateY(0deg) scale(1); }
  100% { transform: perspective(760px) rotateY(36deg) scale(.84); }
}


/* ───────────────────────────────────────────────────────────────
   BOTONES COMUNES: Comprar (WhatsApp) y bolsa
   ─────────────────────────────────────────────────────────────── */
.vt-comprar {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1; min-width: 0;
  padding: 6px 8px; border-radius: 99px; background: var(--wa); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  transition: background var(--rapida), transform var(--rapida);
}
.vt-comprar:hover { background: var(--wa-oscuro); transform: translateY(-1px); }
.vt-comprar svg { width: 13px; height: 13px; flex-shrink: 0; }
.vt-agregar {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--tinta); background: var(--fondo-tarjeta); color: var(--tinta);
  transition: background var(--rapida), color var(--rapida);
}
.vt-agregar:hover { background: var(--tinta); color: #fff; }
.vt-agregar svg { width: 15px; height: 15px; }
.vt-agregar.listo { background: var(--ok); border-color: var(--ok); color: #fff; }
.vt-agotado-txt { flex: 1; text-align: center; padding: 6px 8px; border-radius: 99px; background: #EFE8E9; color: var(--tinta-media); font-size: 12px; font-weight: 700; }


/* ───────────────────────────────────────────────────────────────
   2. CATÁLOGO: TUS ETIQUETAS
   Encabezado en una etiqueta roja con su ojal; cada producto en su
   etiqueta con el precio en una etiquetica roja, "Ahorras",
   "¡Quedan N!" con barrita y el botón Agregar que se vuelve − n +.
   ─────────────────────────────────────────────────────────────── */
.vt-franja {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap;
  margin-bottom: var(--e-3); padding: 16px 22px 16px 50px; border-radius: 0 14px 14px 0;
  background: radial-gradient(120% 120% at 100% 0, #E8405F, var(--marca) 55%, var(--marca-oscura)); color: #fff;
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 24px 100%, 0 50%);
}
.vt-franja::before { content: ''; position: absolute; left: 20px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--fondo); box-shadow: 0 0 0 3px #E9C46A; }
.vt-franja-tit { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vt-franja-tit svg { width: 26px; height: 26px; flex: none; fill: #FFE08A; }
.vt-franja h2 { color: #fff; font: 800 clamp(24px, 3vw, 34px)/1.1 var(--fuente-titulo); letter-spacing: -.02em; text-wrap: balance; }
.vt-franja p { color: rgba(255,255,255,.88); font-size: 14px; }
@media (max-width: 600px) {
  .vt-franja { padding: 12px 16px 13px 40px; clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%); }
  .vt-franja::before { left: 15px; width: 10px; height: 10px; margin-top: -5px; }
  .vt-franja-tit svg { width: 22px; height: 22px; }
  .vt-franja p { font-size: 12.5px; }
}

.vt-rejilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 12px; padding-top: 16px; }
@media (max-width: 1024px) { .vt-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .vt-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } }

.vt-mini { position: relative; min-width: 0; transform-origin: 50% 0; filter: drop-shadow(0 6px 8px rgba(120,20,40,.10)); transition: rotate .8s cubic-bezier(.3,1.9,.5,1); }
@media (hover: hover) { .vt-mini:hover { rotate: 2deg; } }
.vt-mini-in {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 6px;
  padding: 24px 8px 10px; background: var(--fondo-tarjeta); border-radius: 0 0 12px 12px;
  clip-path: polygon(22% 0, 78% 0, 100% 22px, 100% 100%, 0 100%, 0 22px);
}
/* el ojal dorado de la etiqueta */
.vt-mini-in::before { content: ''; position: absolute; z-index: 2; left: 50%; top: 8px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--fondo); box-shadow: 0 0 0 2.5px #E9C46A; }
.vt-mini .vt-foto { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--fondo-suave); cursor: zoom-in; }
.vt-mini .vt-foto img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 90%; }
.vt-sinfoto { display: grid; place-items: center; height: 100%; padding: 8px; text-align: center; color: var(--tinta-suave); font-size: 11px; }
.vt-velo { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,248,247,.6); color: var(--tinta-media); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* Sello de agotado: una etiquetica oscura, ladeada, sobre la foto */
.vt-velo b { padding: 6px 13px; border-radius: 99px; background: var(--tinta); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; rotate: -7deg; box-shadow: 0 4px 10px -3px rgba(26,18,22,.45); }
.vt-info { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.vt-mini .vt-nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; font-size: 13px; font-weight: 600; line-height: 1.25; }
.vt-mini .vt-nombre:hover { color: var(--marca); }

/* Nuevo y −15% en etiquetitas sobre la foto */
.vt-marcas { position: absolute; z-index: 1; left: 6px; bottom: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; pointer-events: none; }
.vt-etq {
  position: relative; display: inline-flex; align-items: center; padding: 3px 8px 3px 15px; border-radius: 0 4px 4px 0;
  background: var(--marca); color: #fff; font-size: 11px; font-weight: 800; line-height: 1.2; white-space: nowrap;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}
.vt-etq::before { content: ''; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #fff; }
.vt-etq.oscura { background: var(--tinta); }

/* El precio va en una etiquetica roja con su ojal */
.vt-precio { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.vt-ptag {
  position: relative; display: inline-flex; align-items: center; padding: 4px 10px 4px 21px; border-radius: 0 7px 7px 0;
  background: var(--marca); color: #fff; font: 800 16px/1.15 var(--fuente-titulo); white-space: nowrap;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}
.vt-ptag::before { content: ''; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #E9C46A; }
.vt-precio s { color: var(--tinta-suave); font-size: 11.5px; font-weight: 500; }
.vt-precio.cambia { animation: vt-cambio .35s ease; }
@keyframes vt-cambio { from { opacity: .3; transform: scale(.85); } }
.vt-ahorra { align-self: flex-start; padding: 2px 7px; border-radius: 5px; background: #E7F7EE; color: #0E7A3C; font-size: 11px; font-weight: 800; }

/* ¡Quedan 3! con su barrita */
.vt-poco { display: flex; flex-direction: column; gap: 4px; }
.vt-poco b { color: var(--marca); font-size: 11.5px; font-weight: 800; }
.vt-poco > i { display: block; height: 6px; border-radius: 99px; background: #F3E6E8; overflow: hidden; }
.vt-poco > i > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FF7A59, var(--marca)); }

/* Agregar (se vuelve − n +) y WhatsApp */
.vt-acc { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 2px; }
.vt-agregar-btn {
  flex: 1; min-width: 0; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px;
  border-radius: 99px; background: var(--marca); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background var(--rapida), transform var(--rapida);
}
.vt-agregar-btn:hover { background: var(--marca-oscura); }
.vt-agregar-btn:active { transform: scale(.96); }
.vt-agregar-btn svg { width: 15px; height: 15px; flex: none; }
.vt-paso { flex: 1; min-width: 0; height: 34px; display: flex; align-items: center; justify-content: space-between; border-radius: 99px; background: var(--marca); color: #fff; animation: vt-cambio .3s ease; }
.vt-paso button { width: 36px; height: 34px; flex: none; color: #fff; font-size: 19px; font-weight: 700; line-height: 1; border-radius: 99px; }
.vt-paso button:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.vt-paso button:disabled { opacity: .4; cursor: not-allowed; }
.vt-paso b { font-size: 14px; font-variant-numeric: tabular-nums; }
.vt-wa-r { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--wa); color: #fff; transition: background var(--rapida), transform var(--rapida); }
.vt-wa-r:hover { background: var(--wa-oscuro); color: #fff; transform: scale(1.06); }
.vt-wa-r svg { width: 17px; height: 17px; }
.vt-acc .vt-agotado-txt { flex: 1; }

/* Agotado: "Avísame" (abre el WhatsApp del bot, que avisa solo cuando llegue) */
.vt-avisame {
  flex: 1; min-width: 0; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px;
  border: 1.5px solid var(--marca); border-radius: 99px; background: var(--fondo-tarjeta); color: var(--marca);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background var(--rapida), color var(--rapida), transform var(--rapida);
}
.vt-avisame:hover { background: var(--marca); color: #fff; }
.vt-avisame:active { transform: scale(.96); }
.vt-avisame svg { width: 15px; height: 15px; flex: none; }
.vt-avisame:hover svg, .vt-avisame:focus-visible svg { animation: vt-campana .6s ease; }
@keyframes vt-campana { 20% { rotate: 14deg; } 45% { rotate: -10deg; } 70% { rotate: 5deg; } }
.vt-v-acciones .vt-avisame { height: auto; padding: 12px 16px; font-size: 15px; }
.vt-v-acciones .vt-avisame svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .vt-avisame:hover svg, .vt-avisame:focus-visible svg { animation: none; } }

/* Corazón arriba a la derecha, sobre la foto */
.vt-sobre { position: absolute; z-index: 3; top: 30px; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 2px 6px rgba(40,20,30,.18); }
.vt-fav { right: 14px; color: var(--tinta-suave); }
.vt-fav svg { width: 16px; height: 16px; }
.vt-fav[aria-pressed="true"] { color: var(--marca); }
.vt-fav[aria-pressed="true"] svg { fill: currentColor; animation: vt-late .45s cubic-bezier(.3,1.8,.5,1); }
@keyframes vt-late { 40% { transform: scale(1.45); } }

/* Tamaños (solo si el producto los tiene) */
.vt-tallas { display: flex; gap: 4px; }
.vt-tallas button { flex: 1; min-width: 0; padding: 3px 0; border: 1px solid var(--borde-fuerte); border-radius: 6px; background: var(--fondo-tarjeta); color: var(--tinta-media); font-size: 10.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-tallas button[aria-pressed="true"] { border-color: var(--tinta); background: #F8F1F2; color: var(--tinta); }

@media (max-width: 600px) {
  .vt-mini-in { padding: 22px 7px 9px; clip-path: polygon(22% 0, 78% 0, 100% 18px, 100% 100%, 0 100%, 0 18px); }
  .vt-mini-in::before { top: 7px; width: 9px; height: 9px; margin-left: -4.5px; }
  .vt-sobre { top: 27px; }
  .vt-fav { right: 12px; }
  .vt-ptag { font-size: 15px; }
}
@media (max-width: 360px) {
  .vt-agregar-btn { gap: 3px; padding: 0 6px; font-size: 12px; }
  .vt-agregar-btn svg { width: 13px; height: 13px; }
}

/* Aparecen columpiándose al bajar (solo navegadores que lo soportan; sin JavaScript) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vt-mini { animation: vt-columpio linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
  }
}
@keyframes vt-columpio { from { opacity: 0; transform: rotate(14deg); } }

/* Peluches que saludan: un saltico de vez en cuando y al pasar el mouse */
@media (hover: hover) { .vt-mini:hover .vt-foto img { animation: vt-saluda .9s ease-in-out; } }
.vt-mini .vt-foto img.salta { animation: vt-saluda .9s ease-in-out; }
@keyframes vt-saluda { 0%, 100% { transform: none; } 20% { transform: rotate(-7deg) translateY(-4px); } 45% { transform: rotate(6deg) translateY(-7px); } 70% { transform: rotate(-3deg); } }

/* Esqueleto mientras cargan los productos */
.vt-mini.esq .vt-mini-in > * { visibility: hidden; }
.vt-mini.esq .vt-foto, .vt-mini.esq .vt-nombre, .vt-mini.esq .vt-precio, .vt-mini.esq .vt-boton-esq { visibility: visible; color: transparent; background: linear-gradient(90deg, #F3EBEA 25%, #FBF4F3 50%, #F3EBEA 75%); background-size: 200% 100%; animation: esqueleto-brillo 1.4s ease-in-out infinite; border-radius: 6px; }
.vt-mini.esq .vt-nombre { height: 12px; width: 80%; min-height: 0; }
.vt-mini.esq .vt-precio { height: 22px; width: 55%; }
.vt-mini.esq .vt-boton-esq { display: block; height: 34px; border-radius: 99px; }


/* ───────────────────────────────────────────────────────────────
   FILTROS, ORDENAR Y BÚSQUEDA
   ─────────────────────────────────────────────────────────────── */
.vt-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.vt-filtros { display: flex; flex: 1; min-width: 0; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.vt-filtros::-webkit-scrollbar { display: none; }
.vt-filtros button { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--borde-fuerte); border-radius: 99px; background: var(--fondo-tarjeta); color: var(--tinta-media); font-size: 13px; font-weight: 600; line-height: 1.3; }
.vt-filtros button small { color: var(--tinta-suave); font-size: 11px; font-weight: 600; }
.vt-filtros button[aria-pressed="true"] { background: var(--marca-clara); border-color: var(--marca); color: var(--marca); }
.vt-filtros button[aria-pressed="true"] small { color: var(--marca); }
.vt-ordenar { margin-left: auto; flex-shrink: 0; }
.vt-ordenar select {
  appearance: none; -webkit-appearance: none; padding: 7px 30px 7px 12px; border: 1.5px solid var(--borde-fuerte); border-radius: 99px;
  background: var(--fondo-tarjeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%231A1216' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center / 12px no-repeat;
  color: var(--tinta); font-size: 13px; font-weight: 600; cursor: pointer;
}
@media (max-width: 600px) { .vt-barra { flex-wrap: wrap; } .vt-filtros { flex: 1 0 100%; } .vt-ordenar { margin-left: 0; } }
.vt-busqueda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 2px; padding: 10px 14px; border-radius: var(--r-md); background: var(--marca-clara); color: var(--marca-oscura); font-size: var(--t-sm); }
.vt-busqueda a { font-weight: 700; text-decoration: underline; }
.vt-vacio { grid-column: 1 / -1; padding: var(--e-7) var(--e-4); text-align: center; color: var(--tinta-media); }
.vt-vacio a { color: var(--marca); font-weight: 600; }


/* ───────────────────────────────────────────────────────────────
   VISTA RÁPIDA (al tocar la foto)
   ─────────────────────────────────────────────────────────────── */
.vt-vista { width: min(800px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 40px); margin: auto; padding: 0; border: 0; border-radius: 22px; overflow: auto; background: var(--fondo-tarjeta); color: var(--tinta); box-shadow: 0 30px 80px rgba(30,10,20,.35); }
.vt-vista::backdrop { background: rgba(26,18,22,.5); }
.vt-vista[open] { animation: vt-aparece .35s cubic-bezier(.2,1.2,.4,1); }
@keyframes vt-aparece { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.vt-v-grid { display: grid; grid-template-columns: 1fr 1fr; }

/* La vitrina flotante: el producto flota, respira y gira en 3D
   cuando se le pasa el mouse o el dedo por encima. Varias fotos:
   flechas, puntitos o deslizar de lado. */
.vt-v-foto {
  position: relative; min-height: 380px; overflow: hidden; border-radius: 22px 0 0 22px;
  background: radial-gradient(circle at 50% 38%, var(--vitrina-centro) 0%, var(--vitrina-medio) 48%, var(--vitrina-orilla) 100%);
}
.vt-flo-escena { position: absolute; inset: 0; perspective: 900px; touch-action: pan-y; outline: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.vt-flo-escena:active { cursor: grabbing; }
.vt-flo-escena:focus-visible { box-shadow: inset 0 0 0 3px var(--marca); }
.vt-flo-piso { position: absolute; left: 17%; right: 17%; bottom: 18%; height: 9%; transform: translateX(var(--sx, 0px)); transition: transform .7s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.vt-flo-sombra { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(ellipse at center, var(--vitrina-sombra) 0%, transparent 70%); animation: vt-flo-respira 4.2s ease-in-out infinite; }
/* Foto con fondo (tarjeta): sin reflejo (en el iPhone se veía como una caja gris), la sombra del piso hace el trabajo */
.vt-flo-giro {
  position: absolute; left: 0; right: 0; top: 7%; height: 66%; display: grid; place-items: center;
  transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s cubic-bezier(.2,.8,.2,1); pointer-events: none;
}
.vt-flo-escena.toca .vt-flo-giro, .vt-flo-escena.toca .vt-flo-piso { transition-duration: .08s; transition-timing-function: linear; }
.vt-flo-flota { position: relative; height: 92%; aspect-ratio: 1; transform-style: preserve-3d; animation: vt-flo-flota 4.2s ease-in-out infinite; }
.vt-flo-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; background: var(--fondo-tarjeta);
  box-shadow: 0 26px 40px -16px var(--vitrina-sombra);
  opacity: 0; visibility: hidden; transform: translateX(var(--entra, 34px)) scale(.92);
  transition: opacity .35s ease, transform .55s cubic-bezier(.2,1.1,.3,1), visibility 0s .35s;
  user-select: none; -webkit-user-drag: none;
}
.vt-flo-img.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .55s cubic-bezier(.2,1.1,.3,1), visibility 0s; }
/* Foto recortada (PNG sin fondo): sale el producto solo, sin marco */
.vt-flo-img.recorte { object-fit: contain; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 18px 22px rgba(70,25,35,.28)); -webkit-box-reflect: below -14px linear-gradient(transparent 62%, rgba(255,255,255,.22)); }
.vt-flo-flota .vt-sinfoto { position: absolute; inset: 0; border-radius: 22px; background: var(--fondo-tarjeta); box-shadow: 0 26px 40px -16px var(--vitrina-sombra); font-size: var(--t-sm); }
.vt-flo-flecha {
  position: absolute; top: 40%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: var(--tinta); box-shadow: 0 6px 18px rgba(60,20,30,.15);
  transition: transform var(--rapida), background var(--rapida);
}
@media (hover: hover) { .vt-flo-flecha:hover { background: var(--fondo-tarjeta); transform: scale(1.06); } }
.vt-flo-flecha:active { transform: scale(.94); }
.vt-flo-flecha svg { width: 20px; height: 20px; }
.vt-flo-flecha.izq { left: 14px; }
.vt-flo-flecha.der { right: 14px; }
.vt-flo-abajo { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.vt-flo-puntos { display: flex; align-items: center; pointer-events: auto; }
.vt-flo-puntos button { position: relative; width: 20px; height: 26px; padding: 0; border: 0; background: none; transition: width var(--rapida); }
.vt-flo-puntos button::before { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 99px; background: rgba(26,18,22,.28); transform: translate(-50%, -50%); transition: width var(--rapida), background var(--rapida); }
.vt-flo-puntos button[aria-pressed="true"] { width: 34px; }
.vt-flo-puntos button[aria-pressed="true"]::before { width: 24px; background: var(--marca); }
.vt-flo-ayuda { font-size: 12px; font-weight: 600; color: var(--tinta-media); text-align: center; }
@keyframes vt-flo-flota { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes vt-flo-respira { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(.86); opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .vt-flo-flota, .vt-flo-sombra { animation: none; }
  .vt-flo-img, .vt-flo-img.on { transform: none; }
}

/* En la tarjeta: cuántas fotos tiene (si tiene más de una) */
.vt-nfotos { position: absolute; z-index: 1; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 6px; border-radius: 99px; background: rgba(26,18,22,.62); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.4; pointer-events: none; }
.vt-nfotos svg { width: 12px; height: 12px; }

/* Lo de abajo (o a la derecha en el computador): nombre, precio, botones */
.vt-v-info { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 24px; background: var(--fondo); }
.vt-v-cat { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-media); }
.vt-v-info h3:focus { outline: none; }
.vt-v-info h3 { padding-right: 36px; font: 700 28px/1.05 var(--fuente-titulo); letter-spacing: -.02em; text-wrap: balance; }
.vt-v-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vt-v-precio { display: flex; align-items: baseline; gap: 10px; font: 700 30px/1.1 var(--fuente-titulo); letter-spacing: -.01em; }
.vt-v-precio s { color: var(--tinta-suave); font: 500 15px var(--fuente-texto); }
.vt-v-chip { padding: 5px 11px; border-radius: 99px; background: var(--marca-clara); color: var(--marca-oscura); font-size: 13px; font-weight: 700; line-height: 1.3; }
.vt-v-nota { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-media); }
.vt-v-info p { color: var(--tinta-media); font-size: 14px; line-height: 1.55; }
.vt-v-info .vt-tallas button { padding: 7px 0; font-size: 13px; border-radius: 8px; }
.vt-v-acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.vt-v-acciones .vt-comprar { height: 54px; padding: 0 12px; gap: 8px; border-radius: 16px; background: var(--wa-fuerte); font-size: 17px; box-shadow: 0 10px 22px -8px var(--wa-fuerte); }
.vt-v-acciones .vt-comprar:hover { background: var(--wa-fuerte); }
@media (hover: hover) { .vt-v-acciones .vt-comprar:hover { filter: brightness(1.08); } }
.vt-v-acciones .vt-comprar svg { width: 20px; height: 20px; }
.vt-v-agregar { height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 2px solid var(--tinta); border-radius: 16px; background: var(--fondo-tarjeta); color: var(--tinta); font-size: 17px; font-weight: 700; transition: background var(--rapida), color var(--rapida), transform var(--rapida); }
@media (hover: hover) { .vt-v-agregar:hover { background: var(--tinta); color: #fff; } }
.vt-v-agregar:active, .vt-v-acciones .vt-comprar:active { transform: scale(.97); }
.vt-v-agregar svg { width: 20px; height: 20px; }
.vt-v-acciones .vt-avisame { grid-column: 1 / -1; height: 54px; border-radius: 16px; font-size: 16px; }
.vt-v-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 10px; min-height: 44px; font-size: 15px; }
.vt-v-links > * { white-space: nowrap; }
.vt-v-links a { color: var(--marca); font-weight: 700; }
.vt-v-fav { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); font-size: 15px; font-weight: 600; }
.vt-v-fav svg { width: 20px; height: 20px; color: var(--marca); }
.vt-v-fav[aria-pressed="true"] { color: var(--marca); }
.vt-v-fav[aria-pressed="true"] svg { fill: currentColor; animation: vt-late .45s cubic-bezier(.3,1.8,.5,1); }
.vt-v-cerrar { position: absolute; z-index: 3; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--fondo-tarjeta); box-shadow: 0 4px 14px rgba(60,20,30,.14); }
@media (max-width: 600px) {
  .vt-vista { width: 100%; margin: auto 0 0; max-height: 94vh; border-radius: 28px 28px 0 0; }
  .vt-vista[open] { animation: vt-hoja .35s cubic-bezier(.2,1,.3,1); }
  .vt-v-grid { grid-template-columns: 1fr; }
  .vt-v-foto { height: min(362px, 46vh); min-height: 280px; border-radius: 0; }
  .vt-v-info { padding: 18px 22px 22px; }
  .vt-v-info h3 { font-size: 26px; }
  .vt-v-precio { font-size: 28px; }
}
@keyframes vt-hoja { from { transform: translateY(100%); } }


/* ───────────────────────────────────────────────────────────────
   BOLSA FLOTANTE Y AVISOS
   ─────────────────────────────────────────────────────────────── */
.vt-bolsa {
  position: fixed; z-index: var(--z-flotante); left: 50%; bottom: 16px; width: min(680px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 12px; border-radius: 99px;
  background: var(--tinta); color: #fff; box-shadow: 0 20px 40px -14px rgba(26,18,22,.6);
  transform: translateX(-50%); animation: vt-bolsa-entra .45s cubic-bezier(.2,1.2,.4,1);
}
@keyframes vt-bolsa-entra { from { opacity: 0; transform: translate(-50%, 40px); } }
/* Salvavidas: páginas viejas guardadas en el navegador traían un botón redondo
   con la clase vt-bolsa-flot; sin su estilo, el ícono salía gigante abajo. */
a.vt-bolsa-flot:not(.vt-bolsa-ico) { display: none !important; }
.vt-bolsa-ico { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }
.vt-bolsa-ico:hover { color: #fff; background: rgba(255,255,255,.2); }
.vt-bolsa-ico svg { width: 22px; height: 22px; }
.vt-bolsa-ico b { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border: 2px solid var(--tinta); border-radius: 99px; background: var(--marca); color: #fff; font-size: 11.5px; }
.vt-bolsa-ico.salta { animation: vt-salta .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes vt-salta { 40% { transform: scale(1.22); } }
.vt-bolsa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; color: #fff; }
.vt-bolsa-txt:hover { color: #fff; }
.vt-bolsa-txt b { font: 800 18px/1.15 var(--fuente-titulo); font-variant-numeric: tabular-nums; }
.vt-bolsa-txt small { overflow: hidden; color: rgba(255,255,255,.65); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.vt-bolsa-vaciar { flex: none; color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vt-bolsa-vaciar:hover { color: #fff; }
.vt-bolsa-pedir { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 99px; background: var(--wa); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background var(--rapida); }
.vt-bolsa-pedir:hover { background: var(--wa-oscuro); color: #fff; }
.vt-bolsa-pedir svg { width: 18px; height: 18px; flex: none; }
body.con-bolsa { padding-bottom: 86px; }
@media (max-width: 600px) {
  .vt-bolsa { bottom: 10px; gap: 8px; padding: 6px 6px 6px 7px; }
  .vt-bolsa-ico { width: 40px; height: 40px; }
  .vt-bolsa-vaciar, .vt-bolsa-largo { display: none; }
  .vt-bolsa-txt b { font-size: 16px; }
  .vt-bolsa-txt small { font-size: 11px; }
  .vt-bolsa-pedir { padding: 11px 14px; font-size: 13.5px; }
  body.con-bolsa { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .vt-bolsa { animation: none; } }
.vt-volador { position: fixed; z-index: calc(var(--z-modal) + 10); left: 0; top: 0; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 14px; overflow: hidden; pointer-events: none; will-change: transform; box-shadow: 0 8px 18px rgba(0,0,0,.2); background: var(--fondo-suave); }
.vt-volador img { width: 100%; height: 100%; object-fit: cover; }


/* ═══════════════════════════════════════════════════════════════
   SECCIONES: Todo · Peluches · Carros…  (se manejan desde el panel)
   Cada una es una etiquetica acostada con su ojal; la abierta, en rojo.
   ═══════════════════════════════════════════════════════════════ */
.vt-secciones { position: relative; z-index: 2; background: var(--fondo); border-bottom: 1px solid #F1E4E2; }
.vt-sec-pista {
  display: flex; gap: 8px; max-width: 1280px; margin: 0 auto; padding: 12px var(--e-5);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vt-sec-pista::-webkit-scrollbar { display: none; }
.vt-sec {
  position: relative; flex: none; display: inline-flex; align-items: center;
  padding: 8px 14px 8px 24px; border-radius: 0 10px 10px 0;
  background: #fff; color: var(--tinta); font-size: 14px; font-weight: 700; white-space: nowrap;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  box-shadow: inset 0 0 0 1.5px #EBDAD7; transition: background .15s, color .15s;
}
.vt-sec::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #EBDAD7; }
.vt-sec:hover { color: var(--marca); background: var(--marca-clara); }
.vt-sec.on { background: var(--marca); color: #fff; box-shadow: none; }
.vt-sec.on::before { background: #fff; box-shadow: 0 0 0 1.5px #E9C46A; }
@media (max-width: 600px) { .vt-sec-pista { padding: 10px 12px; } .vt-sec { font-size: 13.5px; } }