/* =============================================================================
   VITRINAS DE CATEGORÍA (Fase 2, 24/09/2026)  --  un solo sistema para todas las categorías:
   mismo radio, jerarquía, tipografía y CTA. La personalidad la dan los productos y un tono de
   fondo por sector (tech / dinámico / editorial para perfumes / premium minimal para Dyson).
   Mobile primero: carrusel horizontal con scroll-snap, 2–3 productos por escena, nunca cortados.
   Usa las variables de valiant-v2.css (funciona en los 3 temas) con respaldos propios.
   ============================================================================= */
.vt{max-width:1180px;margin:0 auto 26px;padding:0 20px}
.vt[hidden]{display:none}
html.vt-on #cat-tiles{display:none}            /* los tiles viejos quedan solo de respaldo */
.vt-grid{list-style:none;margin:0;padding:0 0 10px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,82vw);
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.vt-card{--vt-bg:radial-gradient(120% 90% at 50% 18%,rgba(var(--blue2-rgb,64,170,255),.22),transparent 62%),var(--bg2,#0B1424);
  scroll-snap-align:start;position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--radius-card,32px);
  background:var(--vt-bg);border:1px solid rgba(var(--blue-rgb,0,140,255),.14);overflow:hidden;min-height:100%}
.vt--dinamico{--vt-bg:radial-gradient(110% 80% at 30% 20%,rgba(var(--blue2-rgb,64,170,255),.26),transparent 60%),radial-gradient(90% 70% at 90% 90%,rgba(140,110,255,.16),transparent 60%),var(--bg2,#0B1424)}
.vt--editorial{--vt-bg:radial-gradient(100% 80% at 50% 15%,rgba(214,176,140,.22),transparent 62%),linear-gradient(180deg,rgba(255,236,220,.04),transparent),var(--bg2,#0B1424)}
.vt--premium{--vt-bg:radial-gradient(100% 80% at 50% 20%,rgba(255,255,255,.10),transparent 62%),var(--bg2,#0B1424)}

/* escena: producto principal adelante y más grande; los otros detrás, más chicos y más arriba */
.vt-escena{display:block;position:relative;aspect-ratio:5/4;margin:0;overflow:hidden}
.vt-escena>span{position:absolute;inset:8% 6% 4%;display:block}
.vt-p{position:absolute;bottom:0;object-fit:contain;object-position:bottom center;height:86%;width:auto;max-width:46%;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.34));transition:transform var(--dur-base,.35s) var(--ease-out,cubic-bezier(.2,.8,.2,1));user-select:none}
.vt-p0{left:50%;transform:translateX(-50%);z-index:3}
.vt-p1{left:0;height:62%;max-width:32%;bottom:8%;z-index:1}
.vt-p2{right:0;height:62%;max-width:32%;bottom:8%;z-index:2}
.vt-p3,.vt-p4{display:none}
.vt-n1 .vt-p0{height:88%;max-width:78%}
.vt-n2 .vt-p0{left:62%;max-width:50%}
.vt-n2 .vt-p1{left:2%;height:70%;max-width:44%}
/* perfumes: frascos en fila escalonada (más editorial), hasta 5 */
.vt--editorial .vt-p{height:62%;max-width:26%;bottom:4%}
.vt--editorial .vt-p0{height:78%;max-width:32%}
.vt--editorial .vt-p1{left:4%;bottom:8%}.vt--editorial .vt-p2{right:4%;bottom:8%}
.vt--editorial .vt-p3{display:block;left:22%;height:54%;bottom:14%;z-index:0}
.vt--editorial .vt-p4{display:block;right:22%;height:54%;bottom:14%;z-index:0}
@media (hover:hover){.vt-card:hover .vt-p0{transform:translateX(-50%) translateY(-4px) scale(1.02)}
  .vt--editorial.vt-card:hover .vt-p0,.vt-n2 .vt-p0{transition:none}}

.vt-tx{padding:6px 20px 20px;display:flex;flex-direction:column;gap:8px}
.vt-t{margin:0;font:600 24px/1.1 'Exo 2',system-ui,sans-serif;letter-spacing:-.01em}
.vt-t a{color:var(--white,#F2F6FC);text-decoration:none}
.vt-d{margin:0;font:400 14.5px/1.45 'Exo 2',system-ui,sans-serif;color:var(--silver2,#9DB0C8)}
.vt-marcas{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.vt-marcas a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:999px;text-decoration:none;
  font:600 13px/1 'Exo 2',system-ui,sans-serif;color:var(--white,#F2F6FC);border:1px solid rgba(var(--blue-rgb,0,140,255),.22);background:rgba(255,255,255,.03)}
.vt-marcas a span{font-weight:400;color:var(--silver2,#9DB0C8);font-size:12px}
.vt-marcas a:hover{border-color:var(--blue2,#40AAFF)}
.vt-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;
  font:700 14px/1 'Exo 2',system-ui,sans-serif;color:var(--blue2,#40AAFF);text-decoration:none}
.vt-cta span{transition:transform .2s}.vt-cta:hover span{transform:translateX(3px)}

/* tema claro y celeste: sombras y fondos más suaves */
[data-theme="light_valiant"] .vt-card,[data-theme="celeste_gradient_valiant"] .vt-card{--vt-bg:var(--plate,linear-gradient(180deg,#FFFFFF,#EAF0F8));border-color:rgba(10,17,32,.08)}
[data-theme="light_valiant"] .vt-p,[data-theme="celeste_gradient_valiant"] .vt-p{filter:drop-shadow(0 14px 14px rgba(10,17,32,.22))}
[data-theme="light_valiant"] .vt-marcas a,[data-theme="celeste_gradient_valiant"] .vt-marcas a{background:rgba(255,255,255,.7)}

/* pantallas muy chicas: 2 productos, el tercero se esconde (nunca 4 diminutos) */
@media (max-width:359px){.vt-p2{display:none}.vt-n3 .vt-p0{left:58%}}
/* tablet / desktop: grilla; celulares (la primera) ocupa dos columnas */
@media (min-width:760px){
  .vt-grid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none}
  .vt--lead{grid-column:span 2}
  .vt--lead{grid-template-columns:1.15fr 1fr;grid-template-rows:auto;align-items:center}
  .vt--lead .vt-escena{aspect-ratio:16/10}
  .vt--lead .vt-tx{padding:20px 28px}
  .vt--lead .vt-t{font-size:30px}
}
@media (min-width:1080px){
  .vt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vt--lead{grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){.vt-p,.vt-cta span{transition:none}}
/* dentro del bloque "Explorá el catálogo" de la home */
#cat-tiles-wrap .vt{padding:0;max-width:none;text-align:left}