/* ============================================================
   SENTIDA · la tienda: Nuestras tortas y Antojos (TRAMA, 24/09/2026)
   Grilla de productos y, al costado, el ticket «Tu pedido». Sin
   JavaScript, cada tarjeta se pide con su enlace de WhatsApp.
   ============================================================ */
.tienda-in{max-width:var(--ancho); margin:0 auto; padding:clamp(40px,7vh,80px) var(--lateral) clamp(72px,12vh,120px); display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(24px,4vw,64px); align-items:start}
.tienda-cab{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 40px; margin-bottom:clamp(28px,5vh,48px)}
.tienda-cab h1{font-size:clamp(3rem,5.4vw,4.75rem); line-height:1; letter-spacing:-.045em}
.tienda-cab .eti{margin-bottom:18px}
.tienda-cab p{font-size:16px; line-height:1.6; color:var(--marron-medio); max-width:44ch}

.productos{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(32px,5vh,60px) clamp(12px,1.8vw,26px)}
.producto{display:flex; flex-direction:column}
.producto-foto{position:relative; aspect-ratio:4/4.5; overflow:hidden; background:var(--crema); outline:2px solid transparent; outline-offset:4px; transition:outline-color .3s}
.producto-foto img{width:100%; height:100%; object-fit:cover}
.mov .producto-foto img{transition:transform .4s}
.mov .producto:hover .producto-foto img{transform:scale(1.035)}
.sin-foto{display:flex; align-items:flex-end; padding:clamp(14px,1.6vw,22px) 70px clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px)}
.sin-foto span{font-size:clamp(22px,2.2vw,32px); line-height:1.05; letter-spacing:-.02em; color:var(--marron)}
.producto-agregar{position:absolute; right:14px; bottom:14px; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--blanco); color:var(--marron); font-family:var(--ui); font-size:26px; font-weight:300; line-height:1; cursor:pointer; transition:background-color .2s, color .2s}
.producto-agregar:hover{background:var(--marron); color:var(--blanco)}
/* Varias fotos: una tira que se desliza de a una (sin JavaScript también).
   Con JavaScript, puntos abajo a la izquierda y flechas al pasar o con el teclado. */
.galeria-tira{display:flex; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none}
.galeria-tira::-webkit-scrollbar{display:none}
.galeria-tira img{flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always}
.galeria-tira:focus-visible{outline:2px solid var(--marron); outline-offset:-2px}
.mov .galeria-tira{scroll-behavior:smooth}
.mov .producto:hover .galeria img{transform:none}
.galeria-flecha{position:absolute; top:50%; z-index:1; width:44px; height:44px; margin-top:-22px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--blanco); color:var(--marron); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s, background-color .2s, color .2s}
.galeria-flecha .ico{width:20px; height:20px}
.galeria-ant{left:10px}
.galeria-sig{right:10px}
.galeria:hover .galeria-flecha,.galeria:focus-within .galeria-flecha{opacity:1; pointer-events:auto}
.galeria-flecha:hover{background:var(--marron); color:var(--blanco)}
/* En pantallas táctiles se desliza con el dedo: las flechas solo aparecen con el teclado. */
@media (hover:none){
  .galeria:hover:not(:focus-within) .galeria-flecha{opacity:0; pointer-events:none}
}
.galeria-puntos{position:absolute; left:14px; bottom:26px; height:20px; padding:0 8px; display:flex; align-items:center; gap:6px; background:var(--blanco); border-radius:2px; pointer-events:none}
.galeria-puntos span{width:6px; height:6px; border-radius:50%; background:var(--beige); transition:background-color .2s, transform .2s}
.galeria-puntos .actual{background:var(--marron); transform:scale(1.2)}
.producto-meta{display:flex; justify-content:space-between; gap:12px; margin:18px 0 6px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--celeste-profundo)}
.producto :is(h2,h3){font-size:clamp(22px,1.9vw,27px); line-height:1.2; letter-spacing:-.03em}
.producto-desc{margin-top:4px; font-size:14px; line-height:1.5; color:var(--marron-medio)}
.producto-precio{margin-top:6px; font-size:12px; font-weight:600}
.producto-acc{margin-top:auto; padding-top:10px; display:flex; align-items:center; min-height:52px}
.producto-meta span:last-child{white-space:nowrap}
/* Con JavaScript el enlace de WhatsApp se esconde: sin nada en el pedido, no queda franja vacía. */
.js .producto:not(.en-pedido) .producto-acc{min-height:0; padding-top:0}
.producto.en-pedido .producto-foto{outline-color:var(--beige)}
.producto.marcada .producto-foto{outline-color:var(--marron)}

.tienda-panel{position:sticky; top:calc(var(--cab) + 24px); display:flex; flex-direction:column; gap:14px}
.tienda-terminar{width:100%}

.mesa-dulce{margin-top:clamp(72px,12vh,120px); padding-top:clamp(40px,6vh,64px); border-top:1px solid var(--beige); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:24px 48px; align-items:end}
.mesa-dulce h2{font-size:clamp(2.25rem,4vw,3.5rem); line-height:.95; letter-spacing:-.025em}
.mesa-dulce-txt{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.mesa-dulce-txt p{font-size:15px; line-height:1.6; color:var(--marron-medio); max-width:44ch}

.tira-pedido{display:none}

.productos-destacados{grid-template-columns:repeat(3,minmax(0,1fr))}
.destacados{background:var(--crema-suave)}
.destacados-pie .botones{justify-content:center}
.destacados-pie{margin-top:clamp(50px,8vh,75px); display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; color:var(--marron-medio)}

@media (max-width:1099px){
  .tienda-in{grid-template-columns:minmax(0,1fr) 300px}
  .productos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .productos-destacados{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* En dos columnas angostas: la categoría en una línea y sin el contador. */
  .producto-meta{margin-top:14px}
  .producto-meta span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .producto-meta span:last-child{display:none}
  .producto-desc{font-size:13px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .tienda-in{grid-template-columns:minmax(0,1fr); padding-bottom:120px}
  .tienda-panel{position:static; max-width:440px}
  .mesa-dulce{grid-template-columns:minmax(0,1fr); align-items:start}
  /* Con algo en el pedido, una tira abajo lo muestra y lo abre. */
  .tira-pedido{
    position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:55;
    display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 6px 6px 16px;
    background:var(--marron); color:var(--blanco); border-radius:2px; box-shadow:0 10px 24px -10px var(--sombra);
  }
  .tira-pedido-t{font-family:var(--display); font-size:18px}
  .tira-pedido-n{flex:1; font-size:13px; font-weight:600; color:var(--crema)}
  .tira-pedido button{min-height:44px; padding:0 16px; background:var(--blanco); color:var(--marron); border:0; border-radius:2px; font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; cursor:pointer}
  .tira-pedido button:focus-visible{outline:2px solid var(--crema); outline-offset:2px}
  html{scroll-padding-bottom:88px}
}