/* SU Especialidades — carrusel de portada ([su_especialidades_home]).
   Cabecera centrada al estilo de las secciones de la home ("LO NUEVO",
   "FRESH"); tarjetas tipo tile de app (Instacart/GoPuff): rectángulo plano
   con tinte del color del término, nombre en negrita arriba-izquierda y
   glifo grande en color sólido abajo-derecha. Sin círculos ni sombras.
   Variables por tarjeta (calculadas en PHP a partir del color del término):
   --su-esp-hc  color base      --su-esp-hbg fondo tintado
   --su-esp-hsh sombra hover    --su-esp-hi  índice (stagger de entrada) */
.su-esp-home{--su-esp-ink:#242424;--su-esp-muted:#767676;--su-esp-brand:#FF2668;margin:40px auto 48px;font-family:"Nunito Sans",Arial,Helvetica,sans-serif}
.su-esp-home *{box-sizing:border-box}

/* ---- Portada: modernizar los títulos "underlined" de Woodmart en la home
   ("LO NUEVO", "FRESH", "Pasillos") para que sigan el mismo patrón que la
   cabecera de especialidades: sin subrayado gris, guiones degradados en rosa
   de marca a ambos lados. Solo en la portada (body.home). ---- */
.home .title-wrapper.wd-title-style-underlined .liner-continer{border-bottom:0;display:flex;align-items:center;justify-content:center;gap:18px}
.home .title-wrapper.wd-title-style-underlined .liner-continer::before,
.home .title-wrapper.wd-title-style-underlined .liner-continer::after{content:"";width:36px;height:2px;border-radius:2px;flex:none;background:linear-gradient(90deg,transparent,#FF2668)}
.home .title-wrapper.wd-title-style-underlined .liner-continer::after{background:linear-gradient(90deg,#FF2668,transparent)}
.home .title-wrapper.wd-title-style-underlined .woodmart-title-container{border-bottom:0;margin-bottom:0;padding-bottom:0;letter-spacing:-.01em}
@media (max-width:768px){
  .home .title-wrapper.wd-title-style-underlined .liner-continer{gap:14px}
  .home .title-wrapper.wd-title-style-underlined .liner-continer::before,
  .home .title-wrapper.wd-title-style-underlined .liner-continer::after{width:26px}
}

/* ---- Cabecera (centrada, patrón de secciones de la home) ---- */
.su-esp-home__head{text-align:center;margin-bottom:6px}
.su-esp-home__eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 10px;font:800 11px/1 "Nunito Sans",Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--su-esp-brand)}
.su-esp-home__eyebrow::before,.su-esp-home__eyebrow::after{content:"";width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--su-esp-brand));flex:none}
.su-esp-home__eyebrow::after{background:linear-gradient(90deg,var(--su-esp-brand),transparent)}
.su-esp-home__title{margin:0;font:900 30px/1.25 "Nunito Sans",Arial,Helvetica,sans-serif;letter-spacing:-.01em;color:var(--su-esp-ink);text-transform:uppercase}
.su-esp-home__sub{margin:8px auto 0;font:400 15px/1.5 "Nunito Sans",Arial,sans-serif;color:var(--su-esp-muted);max-width:560px}

/* ---- Rail + flechas superpuestas ---- */
.su-esp-home__viewport{position:relative}
.su-esp-home__track{display:flex;justify-content:flex-start;gap:12px;margin:0;padding:16px 4px 18px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.su-esp-home__track::-webkit-scrollbar{display:none}
/* Rail corto (caben todas): centrar el set — el JS añade .is-static */
.su-esp-home__viewport.is-static .su-esp-home__track{justify-content:center}
/* Fades de borde: rampa larga y progresiva (no un corte) */
.su-esp-home__viewport.has-left .su-esp-home__track{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 40px,#000 96px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 40px,#000 96px,#000 100%)}
.su-esp-home__viewport.has-right .su-esp-home__track{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 96px),rgba(0,0,0,.45) calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 96px),rgba(0,0,0,.45) calc(100% - 40px),transparent 100%)}
.su-esp-home__viewport.has-left.has-right .su-esp-home__track{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 40px,#000 96px,#000 calc(100% - 96px),rgba(0,0,0,.45) calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 40px,#000 96px,#000 calc(100% - 96px),rgba(0,0,0,.45) calc(100% - 40px),transparent 100%)}
/* Marquee continuo (JS): sin snap — pelearía con el desplazamiento por rAF */
.su-esp-home__viewport.is-marquee .su-esp-home__track{scroll-snap-type:none}
.su-esp-home__item{flex:none;scroll-snap-align:start;list-style:none;margin:0}

/* Flechas: círculos flotantes sobre el rail, centrados verticalmente.
   button. para ganar a los estilos genéricos de botón de Woodmart. */
button.su-esp-home__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;min-width:0;min-height:0;border-radius:999px;border:1px solid #ECECEC;background:#fff;color:#242424;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin:0;line-height:1;box-shadow:0 2px 10px rgba(16,24,40,.10);transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,opacity .22s ease,transform .22s ease;-webkit-tap-highlight-color:transparent}
button.su-esp-home__arrow--prev{left:-14px}
button.su-esp-home__arrow--next{right:-14px}
button.su-esp-home__arrow svg{width:18px;height:18px;display:block}
button.su-esp-home__arrow:hover{background:var(--su-esp-brand);border-color:var(--su-esp-brand);color:#fff;transform:translateY(-50%) scale(1.06);box-shadow:0 8px 22px rgba(255,38,104,.35)}
button.su-esp-home__arrow:disabled{opacity:0 !important;visibility:hidden;pointer-events:none}
button.su-esp-home__arrow:focus-visible{outline:2px solid var(--su-esp-brand);outline-offset:2px}
/* Rail estático (sin overflow): sin flechas */
.su-esp-home__viewport.is-static .su-esp-home__arrow{display:none}
/* Marquee: el rail rueda solo — las flechas solo aparecen al posar el
   cursor sobre el rail (o al navegar con teclado), estilo Netflix. */
.su-esp-home__viewport.is-marquee button.su-esp-home__arrow{opacity:0;pointer-events:none}
.su-esp-home__viewport.is-marquee:hover button.su-esp-home__arrow:not(:disabled),
.su-esp-home__viewport.is-marquee button.su-esp-home__arrow:focus-visible{opacity:1;pointer-events:auto}

/* ---- Tarjeta: chip centrado estilo app (GoPuff/Uber Eats) ----
   Nombre centrado arriba y glifo centrado debajo. En reposo el tile va
   LLENO del color del término (todo en blanco); al pasar el ratón se
   aclara al tinte con texto oscuro. */
a.su-esp-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:148px;height:96px;padding:10px 12px;border-radius:16px;overflow:hidden;text-align:center;text-decoration:none;background:var(--su-esp-hc,#A2CA60);box-shadow:0 6px 16px -8px var(--su-esp-hsh,rgba(162,202,96,.45));transition:background .25s ease,transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease;-webkit-tap-highlight-color:transparent}
a.su-esp-card:hover,a.su-esp-card:focus-visible{background:var(--su-esp-hbg,#eef4e3);transform:translateY(-3px);box-shadow:0 10px 22px -10px var(--su-esp-hsh,rgba(162,202,96,.45))}
a.su-esp-card:focus-visible{outline:2px solid var(--su-esp-hc,#A2CA60);outline-offset:3px}

/* Nombre: negrita fuerte, centrado, hasta 2 líneas */
.su-esp-card__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;font:900 13.5px/1.15 "Nunito Sans",Arial,sans-serif;letter-spacing:-.01em;color:#fff;transition:color .25s ease}
a.su-esp-card:hover .su-esp-card__name,a.su-esp-card:focus-visible .su-esp-card__name{color:var(--su-esp-ink)}

/* Glifo: centrado y algo mayor; blanco en reposo, color al aclararse */
.su-esp-card__icon{flex:none;width:36px;height:36px;color:#fff;transition:color .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1)}
.su-esp-card__icon svg{width:100%;height:100%;display:block}
.su-esp-card__icon svg.su-esp-flag{border-radius:9px}
.su-esp-card__icon .su-esp-k{display:block;font:900 29px/36px "Nunito Sans",Arial,sans-serif;letter-spacing:-.02em;text-align:center}
.su-esp-card__icon .su-esp-k--sm{font-size:22px}
.su-esp-card__icon .su-esp-k--xs{font-size:16px}
a.su-esp-card:hover .su-esp-card__icon,a.su-esp-card:focus-visible .su-esp-card__icon{color:var(--su-esp-hc,#A2CA60);transform:scale(1.08)}

/* Entrada escalonada — OPT-IN por JS: el script añade .is-anim solo si la
   sección aún está bajo el viewport (y luego .is-in al entrar). Por defecto
   las tarjetas son visibles: con JS retrasado (WP Rocket) o desactivado el
   rail nunca queda invisible. */
.su-esp-home.is-anim .su-esp-home__item{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.9,.3,1);transition-delay:calc(var(--su-esp-hi,0)*50ms)}
.su-esp-home.is-anim.is-in .su-esp-home__item{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .su-esp-home.is-anim .su-esp-home__item{opacity:1;transform:none;transition:none}
  a.su-esp-card,.su-esp-card__icon,button.su-esp-home__arrow{transition:none}
}

/* ---- Tablet ---- */
@media (max-width:1024px){
  a.su-esp-card{width:140px;height:92px}
  .su-esp-card__name{font-size:13px}
  button.su-esp-home__arrow--prev{left:-8px}
  button.su-esp-home__arrow--next{right:-8px}
}
/* ---- Móvil ---- */
@media (max-width:768px){
  .su-esp-home{margin:32px auto 36px}
  .su-esp-home__title{font-size:22px}
  .su-esp-home__sub{font-size:13.5px;padding:0 16px}
  .su-esp-home__eyebrow{font-size:10px}
  .su-esp-home__eyebrow::before,.su-esp-home__eyebrow::after{width:26px}
  .su-esp-home__track{gap:10px;padding:12px 4px 16px}
  a.su-esp-card{width:122px;height:84px;border-radius:14px;padding:8px 10px;gap:5px}
  .su-esp-card__name{font-size:12px}
  .su-esp-card__icon{width:30px;height:30px}
  .su-esp-card__icon .su-esp-k{font-size:24px;line-height:30px}
  .su-esp-card__icon .su-esp-k--sm{font-size:18px}
  .su-esp-card__icon .su-esp-k--xs{font-size:13px}
  .su-esp-card__icon svg.su-esp-flag{border-radius:8px}
  button.su-esp-home__arrow{display:none}
}