/* Lorena · Estanterías de Tartas — front v1.1
   Premium · temas claro/oscuro · 2 estilos de tarjeta · bordes con desvanecido
   Sin JavaScript obligatorio (scroll-snap). El JS solo añade flechas y afina el desvanecido. */

.le-section{
  --le-card-w:190px;
  --le-card-w-m:150px;
  --le-gap:12px;
  --le-shelf-gap:26px;
  --le-pad:28px;
  --le-radius:16px;
  --le-maxw:1180px;
  --le-navy:#192A3D;
  --le-accent:#B8924A;
  --le-title-font:Constantia,Georgia,serif;
  --le-fade:36px;
  --le-glow:rgba(184,146,74,.45);
  /* tokens de tema (por defecto = claro) */
  --le-text:#192A3D;
  --le-sub:#5b6b7a;
  --le-card-bg:#ffffff;
  --le-card-brd:rgba(25,42,61,.12);
  --le-shadow:0 12px 28px -18px rgba(25,42,61,.5);
  --le-shadow-hover:0 22px 46px -20px rgba(25,42,61,.55);
  --le-arrow-bg:rgba(255,255,255,.96);
  --le-arrow-fg:#192A3D;
  --le-arrow-brd:rgba(25,42,61,.12);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--le-text);
  background:transparent;
  max-width:var(--le-maxw);
  margin:0 auto;
  padding:var(--le-pad) 0;
  box-sizing:border-box;
}
.le-section *{box-sizing:border-box}

/* ---------- Tema oscuro (panel premium tipo cine) ---------- */
.le-section.le-theme-dark{
  --le-text:#f4f6f8;
  --le-sub:#a9b6c3;
  --le-card-bg:#141d29;
  --le-card-brd:rgba(255,255,255,.10);
  --le-shadow:0 18px 40px -18px rgba(0,0,0,.72);
  --le-shadow-hover:0 28px 60px -22px rgba(0,0,0,.85);
  --le-arrow-bg:rgba(18,27,38,.86);
  --le-arrow-fg:#ffffff;
  --le-arrow-brd:rgba(255,255,255,.18);
  --le-glow:rgba(210,150,70,.55);
  background:radial-gradient(1100px 520px at 50% -14%, #294055 0%, #182734 46%, #0d151f 100%);
  border-radius:22px;
  padding:34px clamp(14px,3vw,30px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.6);
}

/* ---------- Tema claro (panel claro sobre la web) ---------- */
.le-section.le-theme-light{
  background:#faf9f7;
  border:1px solid rgba(25,42,61,.08);
  border-radius:20px;
  padding:28px clamp(14px,3vw,26px);
  box-shadow:0 20px 50px -34px rgba(25,42,61,.32);
}
/* Tema transparente = el de base (sin fondo, hereda la web). */

/* ---------- Cabecera de cada fila ---------- */
.le-shelf{margin-bottom:var(--le-shelf-gap)}
.le-shelf:last-child{margin-bottom:0}
.le-head{
  position:relative;
  padding:0 16px;margin-bottom:12px;
  min-height:26px;
}
.le-title{
  font-family:var(--le-title-font);
  font-size:clamp(19px,2.5vw,26px);
  font-weight:700;line-height:1.2;margin:0;color:var(--le-text);
  letter-spacing:.2px;
  padding-right:118px; /* reserva sitio para "Ver todas" */
}
.le-al-center .le-title{text-align:center;padding-left:118px}
.le-al-right .le-title{text-align:right}
.le-nolink .le-title{padding-left:0;padding-right:0}
.le-all{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--le-accent);text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  white-space:nowrap;transition:opacity .2s;
}
.le-all:hover{opacity:.72}

/* ---------- Viewport + pista ---------- */
.le-viewport{position:relative}
.le-track{
  display:flex;gap:var(--le-gap);
  overflow-x:auto;overflow-y:hidden;
  scroll-behavior:smooth;
  padding:6px 16px 16px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.le-track::-webkit-scrollbar{height:0;display:none}
.le-track:focus{outline:none}

/* Desvanecido de bordes (máscara). Lo activan las clases que pone el JS;
   por defecto el servidor marca .le-fade-r para que ya se vea sin JS. */
.le-viewport.le-fade-r .le-track{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--le-fade)),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - var(--le-fade)),transparent 100%);
}
.le-viewport.le-fade-l .le-track{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--le-fade));
  mask-image:linear-gradient(to right,transparent 0,#000 var(--le-fade));
}
.le-viewport.le-fade-l.le-fade-r .le-track{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--le-fade),#000 calc(100% - var(--le-fade)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--le-fade),#000 calc(100% - var(--le-fade)),transparent 100%);
}

/* ---------- Tarjeta base ---------- */
.le-card{
  position:relative;
  flex:0 0 var(--le-card-w);
  width:var(--le-card-w);
  border-radius:var(--le-radius);
  overflow:hidden;
  text-decoration:none;
  color:var(--le-text);
  background:var(--le-card-bg);
  box-shadow:var(--le-shadow);
  transition:transform .28s ease,box-shadow .28s ease;
  will-change:transform;
}
.le-card:hover{transform:translateY(-6px);box-shadow:var(--le-shadow-hover)}
.le-card:focus-visible{outline:2px solid var(--le-accent);outline-offset:3px}

.le-img{display:block;position:relative;width:100%;overflow:hidden;background:rgba(0,0,0,.06)}
.le-img img{width:100%;height:100%;object-fit:cover;display:block;margin:0;transition:transform .5s ease}
.le-card:hover .le-img img{transform:scale(1.06)}
.le-noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,#e9e9e9,#d3d3d3)}

.le-b{display:block}
.le-name{
  display:block;font-family:var(--le-title-font);
  font-size:15px;line-height:1.25;margin:0;
}
.le-pr{display:block;font-family:var(--le-title-font);font-size:14px;line-height:1.2}
.le-pr small{
  display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--le-sub);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  margin-bottom:1px;
}
.le-pr .amount,.le-pr bdi{font-weight:700}
.le-pr del{color:var(--le-sub);font-weight:400;font-size:12px;opacity:.8}
.le-pr ins{text-decoration:none}

/* ---------- Estilo A: texto SOBRE la foto (streaming) ---------- */
.le-style-overlay .le-img{aspect-ratio:3/4}
.le-style-overlay .le-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,10,16,.9) 0%,rgba(6,10,16,.55) 26%,rgba(6,10,16,.05) 52%,transparent 68%);
}
.le-style-overlay .le-b{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:12px 13px 14px;text-align:left;
}
.le-style-overlay .le-name{color:#fff;font-size:15.5px;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.le-style-overlay .le-pr{color:#fff;margin-top:3px}
.le-style-overlay .le-pr small{color:rgba(255,255,255,.72)}
.le-style-overlay .le-pr .amount,.le-style-overlay .le-pr bdi{color:var(--le-accent)}

/* ---------- Estilo B: foto arriba, texto debajo ---------- */
.le-style-caption .le-card{border:1px solid var(--le-card-brd)}
.le-style-caption .le-img{aspect-ratio:1/1}
.le-style-caption .le-b{padding:11px 11px 13px;text-align:center}
.le-style-caption .le-name{color:var(--le-text);margin-bottom:3px}
.le-style-caption .le-pr{color:var(--le-text)}
.le-style-caption .le-pr .amount,.le-style-caption .le-pr bdi{color:var(--le-accent)}

/* ---------- Modo Destacado / cine (tarjeta central protagonista) ---------- */
.le-fx-spotlight .le-viewport{overflow:visible}
.le-fx-spotlight .le-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(78%,720px);height:124%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side, var(--le-glow) 0%, rgba(0,0,0,0) 72%);
  opacity:.9;
}
.le-fx-spotlight .le-track{
  position:relative;z-index:1;
  scroll-snap-type:x mandatory;
  gap:calc(var(--le-gap) + 8px);
  padding-left:calc(50% - var(--le-card-w)/2);
  padding-right:calc(50% - var(--le-card-w)/2);
  padding-top:30px;padding-bottom:30px;
}
.le-fx-spotlight .le-card{
  scroll-snap-align:center;
  opacity:.62;
  transform:scale(.9);
  box-shadow:0 12px 30px -20px rgba(0,0,0,.7);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease,box-shadow .45s ease;
}
.le-fx-spotlight .le-card.le-active{
  opacity:1;
  transform:scale(1.07);
  z-index:3;
  box-shadow:0 34px 66px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07) inset;
}
/* Cuando el JS está activo, atenuamos más los laterales para dar más profundidad. */
.le-fx-spotlight.le-js .le-card{opacity:.42;transform:scale(.82)}
.le-fx-spotlight.le-js .le-card.le-active{opacity:1;transform:scale(1.07)}

/* En tema CLARO/TRANSPARENTE: sin halo (quedaría como mancha); la profundidad la dan
   tamaño + sombra. La atenuación de los laterales es más suave para que no se pierdan. */
.le-section:not(.le-theme-dark) .le-glow{display:none}
.le-section:not(.le-theme-dark).le-fx-spotlight .le-card{opacity:.72;transform:scale(.9)}
.le-section:not(.le-theme-dark).le-fx-spotlight.le-js .le-card{opacity:.6;transform:scale(.85)}
.le-section:not(.le-theme-dark).le-fx-spotlight .le-card.le-active{opacity:1;transform:scale(1.08);box-shadow:0 30px 60px -26px rgba(25,42,61,.6)}

/* ---------- Bucle infinito (movimiento continuo) ---------- */
.le-loop .le-track{scroll-snap-type:none;scroll-behavior:auto}
.le-loop .le-track{cursor:grab}
.le-loop .le-track:active{cursor:grabbing}

/* ---------- Flechas (mejora progresiva) ---------- */
.le-arrow{
  display:none;position:absolute;top:50%;transform:translateY(-50%);
  z-index:4;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--le-arrow-brd);
  background:var(--le-arrow-bg);color:var(--le-arrow-fg);
  font-size:24px;line-height:1;cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
  align-items:center;justify-content:center;
  backdrop-filter:saturate(140%) blur(4px);
  transition:background .2s,transform .2s,opacity .2s;
}
.le-arrow:hover{transform:translateY(-50%) scale(1.06)}
.le-prev{left:4px}
.le-next{right:4px}
.le-viewport.le-ready .le-arrow{display:flex}
.le-arrow.le-hide{opacity:0;pointer-events:none}

@media (max-width:560px){
  .le-card{flex-basis:var(--le-card-w-m);width:var(--le-card-w-m)}
  .le-head{padding:0 14px}
  .le-track{padding-left:14px;padding-right:14px}
  .le-viewport.le-ready .le-arrow{display:none} /* en móvil se desliza con el dedo */
}
@media (prefers-reduced-motion:reduce){
  .le-track{scroll-behavior:auto}
  .le-card,.le-img img{transition:none}
}