/* Construmateriales - estilo de las filas de productos: «Vitrina iluminada» (v132).
   Se carga solo si está elegido en /staff/apariencia → Tarjetas de producto → «Estilo de las filas» (Tema.EnlaceFilas).
   Todo va bajo su clase (.fila--vitrina), que pone VistasInicio.Fila. El modo oscuro va al final con :root[data-modo=oscuro]. */
/* ===== v132: filas de productos, variante 3 «Vitrina iluminada» (todo bajo .fila--vitrina) =====
   Una vitrina de noche: focos fijos en el techo que iluminan los productos que pasan debajo, repisa de vidrio con una
   luz ámbar que dice cuánto falta por deslizar, el producto señalado con un borde ámbar que gira, y el puntero como
   linterna (sitio.js). La vitrina es oscura también en modo claro: toma los colores del modo oscuro del panel
   (--osc-*, con su valor de respaldo) y redefine los tokens dentro de ella, así tarjeta, precio, «Agregar», corazón,
   anuncios y estados se pintan solos. Colores nuevos (exponer en Apariencia cuando se decida): --vitrina-*. */
@property --vit-giro{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--vitrina-fondo-a:#24324a;--vitrina-fondo-b:#0d131b;--vitrina-luz:#ffd98a}
.ancho.fila.fila--vitrina{
  --tinta:var(--osc-texto,#e6ebf2);--gris:var(--osc-texto2,#a3adbb);--linea:var(--osc-lineas,#2e3846);
  --superficie:var(--osc-superficie,#1a212c);--azul:var(--osc-primario,#5b8ff0);--azul-cl:var(--osc-primario-cl,#1c2a44);--verde:var(--osc-verde,#2fa266);
  --tarjeta-fondo:var(--osc-superficie,#1a212c);--tarjeta-borde:var(--osc-lineas,#2e3846);--tarjeta-hover:var(--ambar);
  --foto-fondo:var(--osc-foto,#f1f3f6);--precio-color:var(--osc-texto,#e6ebf2);--agr-color:var(--osc-primario,#5b8ff0);
  --anuncio-fondo:var(--osc-superficie,#1a212c);--anuncio-borde:#5c4a17;--anuncio-titulo:var(--osc-texto,#e6ebf2);
  --ml-sombra:0 1px 2px rgba(0,0,0,.4);--ml-sombra-alta:0 14px 28px -10px rgba(0,0,0,.7);
  --vit-periodo:calc((100% + 14px) / 6);
  position:relative;isolation:isolate;overflow:hidden;color:var(--tinta);color-scheme:dark;
  margin-top:18px;margin-bottom:18px;padding:26px 24px 30px;border-radius:20px;
  background:radial-gradient(ellipse 70% 90% at 50% -25%,var(--vitrina-fondo-a),transparent 70%),linear-gradient(180deg,#121a25,var(--vitrina-fondo-b));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 22px 50px -24px rgba(8,12,18,.75)}
/* El vidrio de la vitrina: un reflejo quieto en diagonal, por encima de todo y sin estorbar el mouse. */
.fila--vitrina::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.05) 0,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 64%,rgba(255,255,255,.035) 74%,rgba(255,255,255,0) 82%)}
.fila--vitrina .fila__cab{margin-bottom:20px}
.fila--vitrina .fila__cab h2{color:var(--tinta)}
.fila--vitrina .fila__rotulo{background:radial-gradient(circle at 5px 50%,rgba(255,255,255,.4) 1.3px,transparent 1.8px),radial-gradient(circle at calc(100% - 5px) 50%,rgba(255,255,255,.4) 1.3px,transparent 1.8px),rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* Los focos del techo: cada uno arroja un cono de luz cálida sobre una columna de la fila. Están fijos (como en una
   vitrina de verdad): los productos pasan por debajo al deslizar. */
.fila--vitrina .fila__marco::before{content:"";position:absolute;left:0;right:0;top:14px;bottom:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 16px 4px at 50% 3px,#fff8e6 0,var(--vitrina-luz) 45%,transparent 75%),
    conic-gradient(from 152deg at 50% 0,transparent 0deg,rgba(255,217,138,.05) 12deg,rgba(255,217,138,.16) 28deg,rgba(255,217,138,.05) 44deg,transparent 56deg);
  background:radial-gradient(ellipse 16px 4px at 50% 3px,#fff8e6 0,var(--vitrina-luz) 45%,transparent 75%),
    conic-gradient(from 152deg at 50% 0,transparent 0deg,color-mix(in srgb,var(--vitrina-luz) 5%,transparent) 12deg,color-mix(in srgb,var(--vitrina-luz) 17%,transparent) 28deg,color-mix(in srgb,var(--vitrina-luz) 5%,transparent) 44deg,transparent 56deg);
  background-size:var(--vit-periodo) 100%;background-repeat:repeat-x;
  -webkit-mask:linear-gradient(#000 0,#000 30%,transparent 92%);mask:linear-gradient(#000 0,#000 30%,transparent 92%)}
.fila.fila--vitrina[data-fila-escena] .fila__marco::after{display:none}
.fila.fila--vitrina[data-fila-escena] .fila__pista{padding-top:40px;margin-top:-26px}
/* La tarjeta en la vitrina: borde fino, filo de luz arriba y la foto iluminada desde el foco. */
.fila.fila--vitrina[data-fila-escena] .fila__pista>.tarjeta{border:1px solid var(--tarjeta-borde);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--vitrina-luz) 30%,transparent),0 14px 26px -16px rgba(0,0,0,.8)}
.fila.fila--vitrina[data-fila-escena] .fila__pista .tarjeta__c{border-top:1px solid var(--linea)}
.fila--vitrina .tarjeta__foto::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(60% 45% at 50% -4%,rgba(255,226,160,.22),transparent 70%),radial-gradient(130% 100% at 50% 0,transparent 52%,rgba(18,26,38,.22) 100%)}
.fila.fila--vitrina[data-fila-escena] .precio__bs{color:var(--gris)}
.fila.fila--vitrina[data-fila-escena] .estado--no{color:#dfab64}
.fila.fila--vitrina[data-fila-escena] .tarjeta__gusta{border-color:var(--linea);background:rgba(26,33,44,.92);color:var(--gris)}
.fila.fila--vitrina[data-fila-escena] .tarjeta__gusta:hover,.fila.fila--vitrina[data-fila-escena] .tarjeta__gusta[aria-pressed="true"]{color:#fe7665}
.fila.fila--vitrina[data-fila-escena] .tarjeta__ab,.fila.fila--vitrina[data-fila-escena] .tarjeta__mas{border-color:var(--linea);background:rgba(26,33,44,.94);color:var(--tinta)}
.fila.fila--vitrina[data-fila-escena] .tarjeta__ab:hover,.fila.fila--vitrina[data-fila-escena] .tarjeta__mas:hover{background:var(--azul);border-color:var(--azul);color:#fff}
.fila.fila--vitrina[data-fila-escena] .tarjeta__puntos{background:rgba(26,33,44,.88)}
.fila.fila--vitrina[data-fila-escena] .tarjeta__puntos i{background-color:#2f3640}
.fila.fila--vitrina[data-fila-escena] .tarjeta__flecha{background:rgba(26,33,44,.95)}
.fila.fila--vitrina[data-fila-escena] .agr__b:hover,.fila.fila--vitrina[data-fila-escena] .agr__b--ok{color:#fff}
.fila.fila--vitrina[data-fila-escena] .anuncio__c{border-top-color:#494024}
/* El borde ámbar que gira: un anillo de 2px (máscara) con un destello que da la vuelta. Solo en la tarjeta señalada. */
.fila.fila--vitrina[data-fila-escena] .fila__pista>.tarjeta::after{z-index:4;opacity:0;transform:none;border-radius:inherit;padding:2px;transition:opacity .25s ease-out;
  background:var(--ambar);
  background:conic-gradient(from var(--vit-giro),color-mix(in srgb,var(--ambar) 55%,transparent) 0 58%,var(--ambar) 72%,#fff6d6 80%,var(--ambar) 88%,color-mix(in srgb,var(--ambar) 55%,transparent) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@keyframes vit-giro{to{--vit-giro:360deg}}
/* La repisa de vidrio y su luz ámbar (antes el nivel de burbuja: el mismo JavaScript la mueve y le da el ancho). */
.fila.fila--vitrina[data-fila-escena] .fila__anaquel{height:9px;margin:-10px 2px 0;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.07) 45%,rgba(140,170,220,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 26px -6px color-mix(in srgb,var(--vitrina-luz) 28%,transparent)}
.fila--vitrina .fila__nivel{top:auto;bottom:-4px;height:3px;border-radius:3px;background:var(--ambar);box-shadow:0 0 10px var(--ambar),0 0 2px #fff}
.fila--vitrina .fila__nivel i{display:none}
.fila--vitrina .fila__fl--ant{left:-12px}
.fila--vitrina .fila__fl--sig{right:-12px}
.fila--vitrina .fila__fl{background:var(--superficie);color:var(--tinta);box-shadow:0 0 0 1px var(--linea),0 6px 16px rgba(0,0,0,.5)}
/* La linterna: la pone sitio.js y sigue al mouse (solo transform). */
.vitrina__luz{position:absolute;left:0;top:0;z-index:3;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,244,214,.13) 0,rgba(255,226,160,.06) 38%,transparent 68%);transition:opacity .35s ease-out}
.vitrina__luz--on{opacity:1}
/* Señalar un producto: se ilumina, sube y los demás quedan en penumbra. */
.fila--vitrina .fila__pista>*{transition:transform .3s cubic-bezier(.22,.8,.25,1),opacity .3s ease-out,box-shadow .3s ease-out}
.fila.fila--vitrina[data-fila-escena] .fila__pista>.tarjeta:hover,.fila.fila--vitrina[data-fila-escena] .fila__pista>.tarjeta--foco{box-shadow:0 0 30px color-mix(in srgb,var(--ambar) 38%,transparent),0 24px 40px -18px rgba(0,0,0,.85)}
.fila.fila--vitrina[data-fila-escena] .fila__pista>.tarjeta:hover::after,.fila.fila--vitrina[data-fila-escena] .fila__pista>.tarjeta--foco::after{opacity:1}
@media (hover:hover) and (pointer:fine){
  .fila--vitrina .fila__pista>.tarjeta:hover{transform:translateY(-8px)}
  .fila--vitrina .fila__pista:has(>.tarjeta:hover)>:not(:hover){opacity:.7}
  .fila.fila--vitrina[data-fila-escena] .fila__pista>.tarjeta:hover::after{animation:vit-giro 2.8s linear infinite}
}
/* En el teléfono: se ilumina el producto que queda al centro (sitio.js marca .tarjeta--foco); el destello da una sola vuelta. */
@media (hover:none){
  .fila--vitrina .fila__pista.con-foco>:not(.tarjeta--foco){opacity:.74}
  .fila--vitrina .fila__pista>.tarjeta--foco{transform:translateY(-6px)}
  .fila.fila--vitrina[data-fila-escena] .fila__pista>.tarjeta--foco::after{animation:vit-giro 1.6s cubic-bezier(.3,.7,.4,1) 1}
}
/* La vitrina se enciende al aparecer: primero parpadean los focos y luego se prende cada producto, uno tras otro. */
@keyframes vit-focos{0%{opacity:0}8%{opacity:.9}13%{opacity:.15}22%{opacity:1}30%{opacity:.45}42%,100%{opacity:1}}
@keyframes vit-enciende{0%{opacity:0}35%{opacity:.85}45%{opacity:.25}60%{opacity:1}70%{opacity:.7}100%{opacity:1}}
.fila--vitrina.fila--antes .fila__marco::before{opacity:0}
.fila--vitrina.fila--vista .fila__marco::before{animation:vit-focos 1.1s linear .15s backwards}
.fila--vitrina.fila--vista .fila__pista>*{animation-name:vit-enciende;animation-duration:.8s;animation-timing-function:linear}
.fila--vitrina.fila--vista .fila__pista>:nth-child(1){animation-delay:.55s}.fila--vitrina.fila--vista .fila__pista>:nth-child(2){animation-delay:.67s}
.fila--vitrina.fila--vista .fila__pista>:nth-child(3){animation-delay:.79s}.fila--vitrina.fila--vista .fila__pista>:nth-child(4){animation-delay:.91s}
.fila--vitrina.fila--vista .fila__pista>:nth-child(5){animation-delay:1.03s}.fila--vitrina.fila--vista .fila__pista>:nth-child(6){animation-delay:1.15s}
.fila--vitrina.fila--vista .fila__pista>:nth-child(7){animation-delay:1.27s}.fila--vitrina.fila--vista .fila__pista>:nth-child(n+8){animation-delay:1.39s}
@media (max-width:1100px){.ancho.fila.fila--vitrina{--vit-periodo:calc((100% + 14px) / 4)}}
@media (max-width:900px){.ancho.fila.fila--vitrina{--vit-periodo:calc((100% + 12px) / 3)}}
@media (max-width:760px){
  .ancho.fila.fila--vitrina{--vit-periodo:calc(46% + 10px);width:auto;margin:14px 8px;padding:18px 12px 22px;border-radius:16px}
  .ancho .ancho.fila-p.fila--vitrina{margin-left:0;margin-right:0}
  .vitrina__luz{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fila--vitrina .fila__pista>*{transition:none}
  .fila--vitrina .fila__pista>.tarjeta:hover,.fila--vitrina .fila__pista>.tarjeta--foco{transform:none}
  .fila.fila--vitrina[data-fila-escena] .fila__pista>.tarjeta:hover::after,.fila.fila--vitrina[data-fila-escena] .fila__pista>.tarjeta--foco::after{animation:none}
  .vitrina__luz{display:none}
}
/* v132: la vitrina iluminada en modo oscuro (se despega un poco del fondo de la página) */
:root[data-modo=oscuro] .ancho.fila.fila--vitrina{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.4),0 22px 50px -24px rgba(0,0,0,.9)}