/* ===========================================================
   JuntoCompra — Tienda (diseños ECOMMERCE 1, 2 y 3)

   Lo comparten la portada (index.html), la página de categoría
   (categoria.html, en /categoria/<slug>) y la de resultados del
   buscador (buscar.html). La tarjeta de producto, la cabecera y los
   paneles viven en components.css y drawer.css porque salen también
   en la ficha de producto.

   Los diseños son de escritorio (1920 px). El móvil es derivación
   propia: filas que se deslizan con el dedo, rejilla de dos columnas
   y los filtros del buscador en un panel lateral.
   =========================================================== */

.tienda{
  padding-top:var(--header-h);
  padding-bottom:var(--s9);
  background:var(--bg);
  overflow-x:clip;
}

/* ═══ CHIPS (categorías y orden) ═══════════════════════════ */
/* Píldora gris clara con borde fino; la activa, navy. Sirve igual para
   enlaces (categorías: aria-current) y para botones (orden:
   aria-pressed). */
.chip{
  flex:none;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;
  padding:0 20px;
  border:1px solid #AFAFBA;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg, #F2F2F3 0%, #E3E3E6 100%);
  color:var(--ink);
  font:600 var(--fs-body)/1 var(--font);
  letter-spacing:var(--track-body);
  white-space:nowrap;
  cursor:pointer;
  transition:border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.chip:hover{border-color:var(--ink-60)}
.chip svg{width:18px;height:18px;flex:none}
.chip[aria-current="page"],
.chip[aria-pressed="true"]{
  background:var(--ink);border-color:var(--ink);color:var(--white);
}
.chip--flash::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--red);
  animation:pulse 1.9s var(--ease) infinite;
}

/* Barra de categorías bajo la cabecera. Una sola fila: si no cabe, se
   desliza dentro de su caja (position:relative, para que nada en
   absoluto ensanche la página). */
.barra-cats{padding-block:var(--s5) var(--s2)}
.barra-cats__pista,
.orden{
  position:relative;
  display:flex;align-items:center;gap:10px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding-block:3px;
  /* Hasta el borde de la pantalla al deslizar; el primero y el último
     respetan el margen lateral. */
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
}
.barra-cats__pista::-webkit-scrollbar,
.orden::-webkit-scrollbar{display:none}

/* ═══ PORTADA · BANNER ═════════════════════════════════════ */
.hero-t{margin-top:var(--s3)}
.hero-t__caja{
  position:relative;
  background:var(--ink);
  color:var(--white);
  border-radius:clamp(20px,2.4vw,40px);
  overflow:hidden;
}
.hero-t__pista{
  position:relative;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.hero-t__pista::-webkit-scrollbar{display:none}
.hero-t__slide{
  flex:0 0 100%;
  min-width:0;
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s5);
  padding:clamp(18px,3.2vw,56px);
  padding-bottom:calc(clamp(18px,3.2vw,56px) + 36px);
}
.hero-t__foto{
  position:relative;
  display:grid;place-items:center;
  height:clamp(150px,34vw,200px);
  background:var(--white);
  border-radius:clamp(16px,1.8vw,28px);
  color:var(--ink);
  font-size:clamp(64px,16vw,120px);
  line-height:1;
  overflow:hidden;
}
.hero-t__foto img{width:100%;height:100%;object-fit:contain;padding:8%}
.hero-t__texto{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:var(--s3);
  min-width:0;
}
.hero-t__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-sm);font-weight:600;
  color:rgba(255,255,255,.82);
}
.hero-t__eyebrow b{color:var(--white)}
.hero-t__eyebrow--flash::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--red);
  animation:pulse 1.9s var(--ease) infinite;
}
.hero-t__titulo{
  font-size:clamp(2.2rem,5.6vw,4.9rem);
  font-weight:800;
  letter-spacing:var(--track-display);
  line-height:1;
}
.hero-t__producto{
  font-size:clamp(1.15rem,2.2vw,1.9rem);
  font-weight:700;
  letter-spacing:var(--track-heading);
  line-height:1.15;
}
.hero-t__nota{font-size:var(--fs-sm);color:rgba(255,255,255,.82);max-width:42ch}
.hero-t__nota b{color:var(--white)}
.hero-t__cta{margin-top:var(--s2)}
.hero-t__puntos{
  position:absolute;
  left:clamp(18px,3.2vw,56px);bottom:clamp(10px,2vw,28px);
  display:flex;gap:2px;
}
.hero-t__punto{
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
}
.hero-t__punto::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.45);
  transition:background var(--t-fast), width var(--t-fast);
}
.hero-t__punto[aria-current="true"]::before{background:var(--white)}

@media (min-width:700px){
  .hero-t__slide{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    align-items:stretch;
    gap:clamp(24px,4vw,64px);
  }
  .hero-t__foto{height:auto;min-height:clamp(240px,30vw,440px)}
  .hero-t__puntos{left:calc(50% - 20px)}
}

/* ═══ PORTADA · SECCIONES CON FILA DE COMPRAS ═════════════ */
.bloque{margin-top:clamp(40px,5.5vw,88px)}
.bloque__cab{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:var(--s3) var(--s5);
  margin-bottom:clamp(18px,2vw,32px);
}
.bloque__tit{min-width:0;flex:1 1 280px}
.bloque__h2{
  font-size:clamp(1.45rem,2.6vw,2.45rem);
  font-weight:800;
  letter-spacing:var(--track-heading);
  color:var(--ink);
}
.bloque__sub{
  margin-top:6px;
  font-size:clamp(.95rem,1.3vw,1.2rem);
  color:var(--ink-80);
}
.btn--vermas{
  min-height:44px;
  padding:.7em 1.9em;
  font-size:var(--fs-body);font-weight:700;
}

/* En el móvil y la tableta, fila deslizable (una tarjeta y media a la
   vista, que invita a pasar); desde 1000px, rejilla de cuatro. */
.fila-compras{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:min(64%, 300px);
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  scroll-padding-inline:var(--gutter);
  padding-bottom:4px;
}
.fila-compras::-webkit-scrollbar{display:none}
.fila-compras > .pcard{scroll-snap-align:start}
@media (min-width:640px){
  .fila-compras{grid-auto-columns:calc((100% - 2 * 16px) / 2.6);gap:16px}
}
@media (min-width:1000px){
  .fila-compras{
    grid-auto-flow:row;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-columns:auto;
    overflow:visible;
    margin-inline:0;padding-inline:0;
    gap:clamp(16px,1.6vw,24px);
  }
  .fila-compras > .pcard:nth-child(n+5){display:none}
}

/* ═══ PORTADA · BANNER «¿Buscas buenas ofertas?» ══════════ */
.promo{
  margin-top:clamp(48px,6vw,96px);
}
.promo__caja{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s6);
  padding:clamp(24px,4vw,72px);
  background:var(--ink);
  color:var(--white);
  border-radius:clamp(20px,2.4vw,40px);
  overflow:hidden;
}
.promo__texto{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s4);min-width:0}
.promo__h2{
  font-size:clamp(2rem,5vw,4.4rem);
  font-weight:800;
  letter-spacing:var(--track-display);
  line-height:1.02;
}
.promo__p{font-size:clamp(1rem,1.6vw,1.45rem);color:rgba(255,255,255,.88)}
.promo__foto{
  width:100%;height:100%;
  min-height:220px;
  object-fit:cover;
  border-radius:clamp(16px,2vw,32px);
}
@media (min-width:860px){
  .promo__caja{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch}
  .promo__caja{padding-right:clamp(16px,1.6vw,28px)}
}

/* ═══ PORTADA · Business y app ═════════════════════════════ */
.duo{
  margin-top:clamp(48px,6vw,96px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2vw,32px);
}
.duo__caja{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s5);
  padding:clamp(24px,3vw,48px);
  border-radius:clamp(20px,2.4vw,40px);
  color:var(--white);
  overflow:hidden;
}
.duo__caja--business{background:var(--ink)}
.duo__caja--app{background:var(--red)}
.duo__texto{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);min-width:0}
/* «JuntoCompra» no se puede partir: el tamaño va ligado al ancho para
   que nunca se meta en la foto (llegaba a salirse 88px a 1440). */
.duo__h2{
  font-size:clamp(1.7rem,2.5vw,2.55rem);   /* tope: la tarjeta deja de crecer con el contenedor */
  font-weight:800;
  letter-spacing:var(--track-display);
  line-height:1.02;
}
.duo__p{font-size:clamp(1rem,1.4vw,1.3rem);line-height:1.35;color:rgba(255,255,255,.92)}
.duo__p b{color:var(--white)}
.duo__texto .btn{margin-top:auto}
.duo__foto{
  width:100%;height:100%;
  min-height:180px;
  object-fit:cover;
  border-radius:clamp(16px,2vw,28px);
}
/* La app aún no existe: en el hueco del QR, el logo y «Muy pronto» */
.duo__pronto{
  display:grid;place-items:center;align-content:center;gap:var(--s3);
  min-height:180px;
  padding:var(--s6);
  background:var(--white);
  border-radius:clamp(16px,2vw,28px);
  color:var(--ink);
  text-align:center;
}
.duo__pronto img{width:min(180px,70%);height:auto}
.duo__pronto span{
  padding:6px 14px;
  border-radius:var(--r-pill);
  background:var(--red-soft);
  color:var(--red-hover);
  font-size:var(--fs-sm);font-weight:700;
}
@media (min-width:560px){
  .duo__caja{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:stretch}
}
@media (min-width:1000px){
  .duo{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═══ CATEGORÍA Y BUSCADOR · cabecera de página ═══════════ */
.pag-cab{margin-top:clamp(20px,2.6vw,44px)}
.pag-cab__h1{
  font-size:clamp(1.5rem,2.5vw,2.3rem);
  font-weight:800;
  letter-spacing:var(--track-heading);
  color:var(--ink);
}
.pag-cab__h1 q{quotes:'«' '»'}
.pag-cab__n{margin-top:4px;font-size:var(--fs-sm);color:var(--ink-60)}

/* Subcategorías (solo si los productos de la categoría llevan `sub`) */
.subcats{margin-top:clamp(20px,2.4vw,40px);position:relative}
.subcats__pista{
  position:relative;
  display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(120px,16vw,180px);
  gap:clamp(12px,1.4vw,20px);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
}
.subcats__pista::-webkit-scrollbar{display:none}
.subcat{
  display:flex;flex-direction:column;gap:10px;
  scroll-snap-align:start;
  color:var(--ink);
  text-align:left;
}
.subcat__caja{
  display:grid;place-items:center;
  aspect-ratio:1/1;
  border:1px solid rgba(36,36,68,.45);
  border-radius:clamp(16px,1.6vw,24px);
  background:var(--bg);
  font-size:clamp(40px,5vw,64px);
  transition:border-color var(--t-fast), background var(--t-fast);
}
.subcat[aria-pressed="true"] .subcat__caja,
.subcat:hover .subcat__caja{border-color:var(--ink);background:var(--white)}
.subcat__nombre{font-size:var(--fs-body);font-weight:800}

/* Orden: misma píldora que las categorías */
.orden{margin-top:clamp(24px,3vw,48px);margin-bottom:clamp(16px,2vw,28px)}

/* ═══ REJILLA DE RESULTADOS ════════════════════════════════ */
.rejilla{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (min-width:640px){ .rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} }
@media (min-width:1000px){ .rejilla{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)} }
@media (max-width:359px){ .rejilla{gap:8px} }

.mas{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,56px)}

.vacio{
  padding:var(--s8) var(--gutter);
  text-align:center;
  background:var(--surface-2);
  border-radius:var(--r-lg);
}
.vacio__t{font-size:var(--fs-h3);font-weight:800;color:var(--ink)}
.vacio__d{margin:6px auto var(--s5);max-width:46ch;color:var(--ink-60)}
.vacio__cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

/* ═══ BUSCADOR · filtros laterales y paginación ═══════════ */
.busqueda{margin-top:clamp(16px,2.4vw,40px)}
.busqueda__barra{
  display:flex;align-items:center;gap:10px;
  margin-bottom:clamp(16px,2vw,28px);
}
.busqueda__barra .orden{margin:0;flex:1 1 auto;min-width:0}
.btn-filtros{flex:none}
.btn-filtros b{
  display:inline-grid;place-items:center;
  min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-pill);
  background:var(--red);color:var(--white);
  font-size:11px;
}

.filtros{
  background:var(--white);
  color:var(--ink);
  border:1px solid rgba(36,36,68,.55);
  border-radius:var(--r-lg);
  padding:var(--s4) var(--s5) var(--s6);
}
.filtros__cab{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2)}
.filtros__h2{font-size:var(--fs-h3);font-weight:800}
.filtros__cerrar{
  width:44px;height:44px;margin-right:-8px;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
}
.filtros__cerrar:hover{background:rgba(36,36,68,.08)}
.filtros__cerrar svg{width:18px;height:18px}

.filtro-grupo{border-bottom:1px solid rgba(36,36,68,.55)}
.filtro-grupo > summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:56px;
  font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:800;
  letter-spacing:var(--track-heading);
  cursor:pointer;
  list-style:none;
}
.filtro-grupo > summary::-webkit-details-marker{display:none}
.filtro-grupo > summary svg{width:20px;height:20px;flex:none;transition:transform var(--t-fast)}
.filtro-grupo[open] > summary svg{transform:rotate(180deg)}
.filtro-grupo__ops{padding-bottom:var(--s4);display:grid;gap:2px}
.filtro-op{
  display:flex;align-items:center;gap:10px;
  min-height:40px;
  font-size:var(--fs-body);
  cursor:pointer;
}
.filtro-op input{
  width:18px;height:18px;margin:0;flex:none;
  accent-color:var(--ink);
  cursor:pointer;
}
.filtro-op__n{color:var(--ink-60);font-variant-numeric:tabular-nums}
.filtro-op__estrellas{color:var(--red);letter-spacing:1px}
/* «Ver N compras»: solo en el panel del móvil, siempre a la vista */
.filtros__ver{display:none}
.filtros__borrar{
  margin-top:var(--s4);
  min-height:44px;
  font-size:var(--fs-sm);font-weight:700;
  color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;
}

/* Móvil y tableta: los filtros son un panel que entra por la izquierda
   (mismas reglas que el resto: fondo oscuro, Escape y foco). */
@media (max-width:999px){
  .filtros{
    position:fixed;top:0;bottom:0;left:0;z-index:90;
    width:min(360px,88vw);
    overflow-y:auto;
    overscroll-behavior:contain;
    border:0;
    border-radius:0 var(--r-xl) var(--r-xl) 0;
    padding-top:var(--s5);
    box-shadow:14px 0 44px rgba(36,36,68,.22);
    transform:translateX(-105%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    visibility:hidden;
  }
  .filtros.is-open{transform:translateX(0);visibility:visible}
  .filtros__ver{
    display:flex;
    position:sticky;bottom:calc(-1 * var(--s6));
    margin:var(--s5) calc(-1 * var(--s5)) calc(-1 * var(--s6));
    padding:var(--s4) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom));
    background:var(--white);
    box-shadow:0 -8px 20px rgba(36,36,68,.08);
  }
  .filtros__ver .btn{width:100%}
}
@media (min-width:1000px){
  .busqueda__cuerpo{
    display:grid;
    grid-template-columns:clamp(260px,22vw,320px) minmax(0,1fr);
    gap:clamp(20px,2.4vw,40px);
    align-items:start;
  }
  .btn-filtros,.filtros__cerrar{display:none}
  .filtros{position:sticky;top:calc(var(--header-h) + 16px)}
  .busqueda .rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.paginacion{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;
  margin-top:clamp(32px,4vw,64px);
}
.paginacion__paso,
.paginacion__num{
  display:inline-grid;place-items:center;
  min-height:48px;
  border-radius:var(--r-pill);
  background:var(--ink);color:var(--white);
  font-size:var(--fs-body);font-weight:800;
}
.paginacion__paso{padding:0 1.6em}
.paginacion__num{width:48px;background:#53526E}
.paginacion__num[aria-current="page"]{background:var(--ink)}
.paginacion__paso[aria-disabled="true"]{opacity:.4;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .chip--flash::before,.hero-t__eyebrow--flash::before{animation:none}
  .filtros{transition:none}
}