/* ===========================================================
   vitrina.css — un modelo por pantalla, en grande.

   Fondo BLANCO/estudio a propósito: el color de la bota es el dato del
   catálogo. Teñir la foto con un color de tema hacía que una bota negra se
   viera verde. El color medido se usa solo como acento chico: el punto, el
   aro de la miniatura activa y un resplandor muy suave detrás del producto.
   =========================================================== */

/* la tarjeta es clara SIEMPRE, también en tema oscuro: se redefinen los
   colores adentro para que nada de lo de adentro cambie */
.vt-tarjeta,.vt-tira{
  --papel:#ffffff; --plato:#f7f6f4; --tinta:#121212; --suave:#6c6c6c;
  --tenue:#a3a09b; --linea:#e9e6e1; --rojo:#e11b1b;
  color:var(--tinta);
}
.vt{--acento:#e8e5e0}

/* ---------- barra de arriba (PC) ---------- */
.vt-barra{display:flex;align-items:flex-end;gap:24px;padding-top:26px;padding-bottom:18px}
.vt-kick{margin:0 0 6px;font-size:10.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tenue)}
.vt-h1{margin:0;font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.vt-ayuda{margin:0 0 4px auto;font-size:12px;color:var(--suave)}
.vt-ayuda kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;
  border:1px solid var(--linea);border-bottom-width:2px;border-radius:6px;
  font:600 11px/1 inherit;color:var(--tinta);padding:0 5px}
.vt-grilla{padding:11px 18px}

/* ---------- tarjeta ---------- */
.vt-escena{padding-bottom:26px}
.vt-tarjeta{position:relative;border-radius:28px;overflow:hidden;
  background:var(--plato);border:1px solid var(--linea);
  box-shadow:0 24px 60px rgba(20,16,10,.10);
  min-height:clamp(440px,64vh,620px);
  display:grid;grid-template-columns:minmax(280px,38%) 1fr}
:root[data-tema="oscuro"] .vt-tarjeta{border-color:#2a2a2a;box-shadow:0 24px 60px rgba(0,0,0,.5)}

.vt-top{position:absolute;inset:18px 22px auto;display:flex;align-items:center;
  gap:10px;z-index:4;pointer-events:none}
.vt-mini{font-size:9.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.vt-der{margin-left:auto;display:flex;gap:10px;align-items:center;pointer-events:auto}
.vt-pos{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--tenue);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.vt-circ{width:34px;height:34px;border-radius:50%;border:1px solid var(--linea);
  background:var(--papel);display:grid;place-items:center;color:var(--tinta);
  transition:border-color .18s,transform .18s var(--curva)}
.vt-circ:hover{border-color:var(--tinta);transform:rotate(-12deg)}
.vt-circ svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- texto ---------- */
.vt-texto{padding:74px 10px 110px 40px;display:flex;flex-direction:column;z-index:3;min-width:0}
.vt-kick2{font-size:9.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 12px}
.vt-kick2.oferta{color:var(--rojo)}
.vt-nombre{margin:0;font-size:clamp(28px,3.2vw,44px);line-height:1.03;font-weight:800;
  letter-spacing:-.035em;max-width:11ch}
.vt-sub{margin:14px 0 0;font-size:12.5px;color:var(--suave);max-width:32ch;line-height:1.6}
.vt-chips{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 0}
.vt-chip{border:1px solid var(--linea);background:var(--papel);border-radius:999px;
  padding:6px 12px;font-size:10.5px;font-weight:600;letter-spacing:.03em;
  display:inline-flex;align-items:center;gap:7px}
.vt-chip .sw{width:11px;height:11px}
.vt-precio{margin:auto 0 0;display:flex;align-items:baseline;gap:11px;padding-top:26px;
  flex-wrap:wrap}
.vt-precio .n{font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.03em;
  color:var(--rojo);font-variant-numeric:tabular-nums}
.vt-precio .antes{font-size:14px;color:var(--tenue);text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.vt-precio .off{background:var(--rojo);color:#fff;font-size:10px;font-weight:800;
  padding:4px 9px;border-radius:999px;letter-spacing:.06em}
.vt-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.vt-links a{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 0;white-space:nowrap;text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:6px}
.vt-links a.tres{text-decoration-color:var(--rojo)}

/* ---------- producto ---------- */
.vt-foto{position:relative;display:grid;place-items:center;padding:44px 30px 30px;min-height:0}
/* resplandor con el color medido ACLARADO: el único lugar donde se usa como
   color de ambiente, muy suave, sin tocar el color real del producto */
.vt-brillo{position:absolute;left:50%;top:46%;width:74%;padding-bottom:74%;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;
  background:radial-gradient(circle, var(--acento) 0%, transparent 62%);
  opacity:.20;filter:blur(18px);transition:background .5s var(--curva)}
.vt-sombra{position:absolute;left:50%;bottom:15%;width:52%;height:8%;
  transform:translateX(-50%);border-radius:50%;z-index:1;
  background:radial-gradient(ellipse at center, rgba(20,16,10,.34), rgba(20,16,10,0) 70%);
  filter:blur(8px)}
/* multiply sobre claro NO tiñe: deja la foto igual y hace desaparecer el
   fondo de estudio, que ya se llevó a blanco puro */
.vt-foto img{position:relative;z-index:2;width:min(76%,440px);display:block;
  mix-blend-mode:multiply;transform:rotate(var(--giro,-10deg))}

@keyframes vtSale{to{opacity:0;transform:translateY(40px) rotate(-3deg) scale(.95)}}
@keyframes vtEntra{from{opacity:0;transform:translateY(-44px) rotate(5deg) scale(.97)}
                   to{opacity:1;transform:translateY(0) rotate(var(--giro,-10deg)) scale(1)}}
@keyframes vtSombraSale{to{opacity:0;transform:translateX(-50%) scaleX(.7)}}
@keyframes vtSombraEntra{from{opacity:0;transform:translateX(-50%) scaleX(.6)}
                         to{opacity:1;transform:translateX(-50%) scaleX(1)}}
@keyframes vtTexto{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vt-foto img.entrando{animation:vtEntra .72s var(--curva) both}
.vt-foto img.saliendo{animation:vtSale .40s ease-in both}
.vt-sombra.entrando{animation:vtSombraEntra .72s var(--curva) both}
.vt-sombra.saliendo{animation:vtSombraSale .40s ease-in both}
.vt-texto.refresca > *{animation:vtTexto .5s var(--curva) both}
.vt-texto.refresca > *:nth-child(2){animation-delay:.05s}
.vt-texto.refresca > *:nth-child(3){animation-delay:.09s}
.vt-texto.refresca > *:nth-child(4){animation-delay:.13s}
.vt-texto.refresca > *:nth-child(5){animation-delay:.17s}

/* ---------- pie de la tarjeta ---------- */
.vt-pie{position:absolute;left:40px;right:26px;bottom:24px;display:flex;
  align-items:center;gap:12px;z-index:4}
.vt-comprar{display:flex;align-items:center;gap:12px;min-width:0}
.vt-flechas{margin-left:auto;display:flex;gap:8px;flex:0 0 auto}
.vt-fl{width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);
  background:var(--papel);display:grid;place-items:center;font-size:18px;color:var(--tinta);
  transition:border-color .18s,transform .18s var(--curva)}
.vt-fl:hover{border-color:var(--tinta)}
.vt-fl:active{transform:scale(.92)}
.vt-btn{background:var(--tinta);color:#fff;border:none;border-radius:999px;padding:14px 28px;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(20,16,10,.18);white-space:nowrap;
  transition:transform .18s var(--curva),box-shadow .18s}
.vt-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,16,10,.26)}
.vt-btn:active{transform:translateY(0) scale(.98)}
.vt-paso{display:inline-flex;align-items:center;background:var(--tinta);color:#fff;
  border-radius:999px;box-shadow:0 6px 18px rgba(20,16,10,.18)}
.vt-paso button{width:46px;height:46px;border:none;background:none;color:#fff;font-size:18px;
  border-radius:50%;transition:background .15s}
.vt-paso button:hover{background:rgba(255,255,255,.14)}
.vt-paso span{min-width:74px;text-align:center;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.vt-paso b{font-size:15px;letter-spacing:0;margin-right:3px}
.vt-verped{border:none;background:none;padding:12px 2px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta);white-space:nowrap;
  text-decoration:underline;text-decoration-color:var(--rojo);
  text-decoration-thickness:2px;text-underline-offset:6px}

/* ---------- miniaturas ---------- */
.vt-tira-envol{padding-bottom:40px}
.vt-tira{display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;scroll-behavior:smooth;
  padding:6px 4px 10px;overscroll-behavior-x:contain}
.vt-tira button{flex:0 0 auto;width:66px;height:66px;border-radius:16px;padding:0;
  background:var(--plato);overflow:hidden;border:1px solid var(--linea);
  outline:2px solid transparent;outline-offset:2px;
  transition:outline-color .2s,transform .2s var(--curva)}
.vt-tira button:hover{transform:translateY(-3px)}
.vt-tira button[aria-current="true"]{outline-color:var(--tinta)}
:root[data-tema="oscuro"] .vt-tira button[aria-current="true"]{outline-color:#f2f0ed}
.vt-tira img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

/* ===== CELULAR: una pantalla por modelo, se cambia deslizando =====
   No es una página que se scrollea con varios modelos: cada modelo OCUPA la
   pantalla y el dedo hacia arriba trae el siguiente. Por eso acá se apaga el
   scroll de la página: si la página scrollea, el gesto compite. */
@media (max-width:900px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  body{display:flex;flex-direction:column;height:100dvh}
  .aviso,.cab{flex:0 0 auto}
  .vt{flex:1;min-height:0;display:flex;flex-direction:column}
  .vt-barra,.vt-tira-envol,.pie,.arriba{display:none !important}
  .vt-escena{flex:1;min-height:0;padding:10px 10px 10px;max-width:none;display:flex}
  .vt-tarjeta{grid-template-columns:1fr;min-height:0;width:100%;
    display:flex;flex-direction:column;border-radius:22px}
  .vt-top{inset:14px 16px auto}
  .vt-foto{order:1;flex:1;min-height:0;padding:44px 16px 4px}
  .vt-foto img{width:auto;max-width:min(86%,500px);max-height:100%}
  .vt-texto{order:2;padding:4px 20px 0;flex:0 0 auto}
  .vt-sub{display:none}              /* la línea menos útil, libera 2 renglones */
  .vt-chips{margin-top:12px}
  .vt-precio{padding-top:10px;margin-top:0}
  .vt-links{margin-top:8px}
  .vt-nombre{max-width:none;font-size:clamp(23px,6.6vw,30px)}
  .vt-pie{position:static;order:3;padding:12px 16px 16px 20px;left:auto;right:auto;
    bottom:auto;flex:0 0 auto}
  .vt-comprar{flex:1}
  .vt-btn{flex:1;padding:15px 18px}
  .vt-fl{width:46px;height:46px;font-size:19px}
  .vt-circ{width:42px;height:42px}

  /* el movimiento sigue al dedo: --dir vale 1 al subir y -1 al bajar */
  @keyframes vtSale{to{opacity:0;
    transform:translateY(calc(var(--dir,1) * -70px)) scale(.95)}}
  @keyframes vtEntra{from{opacity:0;
    transform:translateY(calc(var(--dir,1) * 74px)) scale(.96)}
    to{opacity:1;transform:translateY(0) rotate(var(--giro,-10deg)) scale(1)}}
  .vt-foto img.entrando{animation-duration:.5s}
  .vt-foto img.saliendo{animation-duration:.26s}

  .vt-pista{position:absolute;left:50%;top:40%;transform:translateX(-50%);
    background:rgba(18,18,18,.82);color:#fff;font-size:10.5px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;white-space:nowrap;
    border-radius:999px;z-index:6;pointer-events:none;
    display:flex;align-items:center;gap:8px;transition:opacity .6s}
  .vt-pista.ida{opacity:0}
  .vt-pista i{font-style:normal;animation:vtSube 1.3s infinite ease-in-out}
  @keyframes vtSube{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
}
/* lo que decide el tamaño de toque es el dedo, no el ancho de pantalla */
@media (pointer:coarse){
  .vt-fl{width:46px;height:46px;font-size:19px}
  .vt-circ{min-width:42px;min-height:42px}
  .vt-btn{padding:15px 24px}
  .vt-chip{padding:9px 13px}
  .vt-links a{padding:13px 0}
  .vt-tira button{width:64px;height:64px}
}
@media (max-width:420px){
  .vt-pos{display:none}
  .vt-nombre{font-size:clamp(23px,7.4vw,30px)}
  .vt-precio .n{font-size:28px}
  /* en una sola fila: el botón estira y las flechas quedan al lado. Si se
     parten en dos renglones, el segundo cae fuera de la tarjeta. */
  .vt-btn{padding:15px 12px;font-size:10px}
  .vt-pie{flex-wrap:nowrap;gap:8px;padding-left:16px;padding-right:12px}
  .vt-paso span{min-width:58px}
  .vt-paso button{width:44px;height:44px}
  .vt-chips{gap:5px}
  .vt-chip{padding:8px 11px;font-size:10px}
}
/* celular apaisado o pantallas muy bajas: lo justo para que todo entre */
@media (max-width:900px) and (max-height:560px){
  .vt-chips,.vt-links,.vt-kick2{display:none}
  .vt-foto{padding-top:34px}
}
@media (prefers-reduced-motion:reduce){
  .vt-pista i{animation:none}
}