/* portada.css — piezas propias de la portada (2026-09-22, referencia mobile-first de Gabriel) */
/* banner de preventa con cuenta regresiva real */
.preventa-wrap{padding:8px 0 0}
.preventa{display:grid;grid-template-columns:1.3fr auto auto;gap:28px;align-items:center;padding:28px 32px;border:1px solid var(--fu-line-2);border-radius:var(--fu-radius);background:var(--fu-surface);position:relative;overflow:hidden}
.preventa::before{content:"";position:absolute;inset:auto -10% -60% 40%;height:160%;background:radial-gradient(closest-side,var(--fu-tint),transparent);pointer-events:none}
.pv-texto h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;margin:12px 0 6px}
.pv-texto p{color:var(--fu-muted);max-width:34em}
.pv-reloj{display:flex;gap:10px}
.pv-reloj div{min-width:72px;padding:12px 10px;border-radius:var(--fu-radius-sm);background:var(--fu-bg);border:1px solid var(--fu-line);text-align:center}
.pv-reloj b{display:block;font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pv-reloj small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fu-faint)}
.pv-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pv-link{font-size:13.5px;color:var(--fu-muted)}
.pv-link:hover{color:var(--fu-text)}
.pv-nota{grid-column:1/-1;font-size:12px;color:var(--fu-faint);margin-top:-8px}
@media (max-width:1060px){.preventa{grid-template-columns:1fr;gap:18px}.pv-nota{margin-top:0}}

/* CELULAR: categorías y productos se deslizan con el dedo (referencia "Mobile-First") */
@media (max-width:760px){
  .cats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 calc(var(--fu-gutter) * -1);padding:0 var(--fu-gutter) 6px;scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cats .cat{flex:0 0 132px;min-height:118px;scroll-snap-align:start;padding:16px 14px}
  #home-nuevos,#home-vistos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--fu-gutter) * -1);padding:0 var(--fu-gutter) 8px;scrollbar-width:none}
  #home-nuevos::-webkit-scrollbar,#home-vistos::-webkit-scrollbar{display:none}
  #home-nuevos .card,#home-vistos .card{flex:0 0 72%;scroll-snap-align:start}
  .preventa{padding:22px 18px}
  .pv-reloj div{min-width:0;flex:1}
  .pv-cta,.pv-cta .btn{width:100%}
  .pv-cta .btn{justify-content:center}
}
@media (max-width:760px){.cats,#home-nuevos,#home-vistos{scroll-padding-inline:var(--fu-gutter)}}

/* =====================================================================
   LA VITRINA = ESCENARIO y RECIÉN LLEGADOS = PASARELA (Gustavo 2026-09-23)
   Prototipo aprobado: 02-CATALOGO/auditorias/fotos-opciones/vitrina-nueva.html
   ===================================================================== */
.escenario{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:860px){.escenario{grid-template-columns:1.5fr 1fr;align-items:stretch}}
.escenario .stage{position:relative;aspect-ratio:1/1;max-width:100%;border-radius:26px;overflow:hidden;background:radial-gradient(60% 55% at 50% 45%,var(--fu-surface) 0%,var(--fu-bg-2) 55%,var(--fu-surface-2) 100%);border:1px solid var(--fu-line);isolation:isolate}
:root[data-theme="dark"] .escenario .stage{background:radial-gradient(60% 55% at 50% 45%,#2d2e33 0%,#141416 55%,#070708 100%)}
@media (min-width:860px){.escenario .stage{aspect-ratio:auto;min-height:520px}}
.escenario .stage::before{content:"";position:absolute;inset:18% 22%;border-radius:50%;background:radial-gradient(closest-side,var(--fu-halo),transparent);filter:blur(8px);z-index:-1;animation:fu-respira 5s ease-in-out infinite}
.escenario .slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .9s var(--fu-ease),visibility 0s linear .9s}
.escenario .slide.on{opacity:1;visibility:visible;transition:opacity .9s var(--fu-ease)}
.escenario .slide img{width:66%;height:62%;object-fit:contain;margin-bottom:12%;transform:translateY(24px) scale(.94);transition:transform 1.1s var(--fu-ease)}
.escenario .slide.on img{transform:none;animation:fu-flota 6s ease-in-out 1.1s infinite}
/* foto con fondo blanco propio: en claro el blanco se funde con el escenario; en oscuro va sobre una placa clara */
.escenario img.con-fondo{mix-blend-mode:multiply}
:root[data-theme="dark"] .escenario img.con-fondo{mix-blend-mode:normal;background:#e6e6e9;border-radius:18px;padding:3%}
.escenario .sombra{position:absolute;left:30%;right:30%;bottom:21%;height:4%;border-radius:50%;background:var(--fu-piso);filter:blur(12px);z-index:-1}
.escenario .cartel{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.escenario .mar{display:block;font-family:var(--fu-f-brand);font-size:10px;letter-spacing:.16em;color:var(--fu-faint);text-transform:uppercase;margin-bottom:4px}
.escenario .nom{display:block;font-weight:600;line-height:1.25}
.escenario .det{display:block;color:var(--fu-muted);font-size:12.5px;line-height:1.35;margin-top:3px}
.escenario .cartel .nom{font-size:clamp(18px,2.6vw,24px)}
.escenario .cartel a{flex:0 0 auto;font-weight:600;font-size:13px;padding:10px 16px;border-radius:999px;background:var(--fu-cta-bg);color:var(--fu-cta-text)}
.escenario .progreso{position:absolute;left:0;top:0;height:3px;width:0;background:var(--fu-text);opacity:.5;z-index:2}
.escenario .progreso.corre{animation:fu-llena var(--fu-seg,4.5s) linear forwards}
.escenario.pausa .progreso{animation-play-state:paused}
@keyframes fu-llena{to{width:100%}}
.escenario .lista{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:860px){.escenario .lista{grid-template-columns:1fr 1fr;align-content:start}}
.escenario .mini{display:flex;flex-direction:column;gap:8px;text-align:left;border:1px solid var(--fu-line);border-radius:16px;padding:10px;background:transparent;color:inherit;cursor:pointer;font:inherit;transition:border-color .3s,background .3s}
.escenario .mini[aria-current="true"]{border-color:var(--fu-text);background:var(--fu-surface)}
.escenario .mini:focus-visible{outline:2px solid var(--fu-text);outline-offset:3px}
.escenario .mf{display:grid;place-items:center;aspect-ratio:1/1;max-width:100%;border-radius:12px;background:var(--fu-photo-bg);overflow:hidden}
.escenario .mf img{width:78%;height:78%;object-fit:contain;transition:transform .5s var(--fu-ease)}
.escenario .mini:hover .mf img{transform:scale(1.07)}
.escenario .mini .nom{font-size:13px}
.escenario .mini .det{display:none}
@media (min-width:860px){.escenario .mini .det{display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}

/* Pasarela: la misma tarjeta de siempre, en una cinta que no se detiene (salvo con el cursor encima) */
.pasarela{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);padding-block:6px 10px}
.pasarela .pista{display:flex;width:max-content;animation:fu-correr var(--fu-pas-dur,40s) linear infinite}
.pasarela:hover .pista,.pasarela:focus-within .pista{animation-play-state:paused}
.pasarela .grupo{display:flex;gap:16px;padding-right:16px}
.pasarela .card{width:260px;flex:0 0 auto}
@media (max-width:760px){.pasarela .card{width:210px}}
@keyframes fu-correr{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .escenario .stage::before,.escenario .slide.on img,.escenario .progreso.corre{animation:none}
  .pasarela .pista{animation:none}
  .pasarela{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}