/* === Variables y navbar === */
:root{
  /* paleta */
  --cafe-900:#3b2a22; --cafe-800:#4d362b; --cafe-700:#6a4a39;
  --cafe-600:#8a5d47; --cafe-500:#a56f54; --cafe-300:#d3b6a3;
  --cafe-100:#f8f4f1;

  /* layout */
  --nav-h:64px;
  --hero-h:52vh;
  --wave-fill: var(--cafe-100);

  /* carrusel categorías */
  --tile-w:220px;
  --gap:16px;
  --tiles:1;
  --side-pad:16px;
  --fade-bg: var(--cafe-100);
}
@media (min-width:576px){ :root{ --tiles:2; --side-pad:20px; } }
@media (min-width:768px){ :root{ --tiles:3; --side-pad:24px; } }
@media (min-width:992px){ :root{
  --nav-h:72px; --hero-h:56vh;
  --tile-w:260px; --tiles:5; --side-pad:32px;
} }

.bg-cafe{ background-color:var(--cafe-700) !important; }
.bg-cafe-oscuro{ background-color:var(--cafe-900) !important; }

/* === HERO de video (tienda) === */
.hero-video{ position:relative; overflow:hidden; }
.hero-video.hero-compact{ min-height:var(--hero-h); }
.hero-video.hero-compact .content .row{ min-height:var(--hero-h); }

.hero-video .bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-video .scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(80% 100% at 20% 20%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15) 35%, rgba(0,0,0,.35) 100%);
}
.hero-video .content{ position:relative; z-index:3; color:#fff; }
.hero-video .control{
  position:absolute; right:1rem; bottom:1rem; z-index:4;
  border-radius:999px; background:rgba(255,255,255,.9); backdrop-filter:blur(4px);
}

/* Ola inferior (altura = viewBox) */
.hero-video .wave{
  position:absolute; left:0; right:0; bottom:-1px; width:100%; height:120px;
  z-index:2; color:var(--wave-fill); pointer-events:none; display:block;
}

/* === Chips y cards de productos === */
.product-card .price{ font-weight:700; }
.category-chip{
  background:var(--cafe-300); color:var(--cafe-900);
  text-decoration:none; padding:.4rem .75rem; border-radius:999px; display:inline-block;
}
.category-chip:hover{ filter:brightness(.95); }

/* (Opcional) Hero de imagen antiguo */
.hero-full{
  min-height:calc(100vh - var(--nav-h));
  display:flex; align-items:center; color:#fff;
  background:
    linear-gradient(135deg, rgba(106,74,57,.9), rgba(165,111,84,.85)),
    url('/tienda/assets/hero.jpg') center/cover no-repeat;
}
.hero-full .lead{ opacity:.9; }

/* === Carrusel horizontal de categorías (centrado) === */
.scroll-wrap{ padding-block:4px; }

.scroll-window{
  position:relative; margin-inline:auto;
  max-width: calc(var(--tiles)*var(--tile-w) + (var(--tiles) - 1)*var(--gap) + 2*var(--side-pad));
}
.scroll-window::before,
.scroll-window::after{
  content:""; position:absolute; top:0; bottom:0; width:var(--side-pad);
  z-index:3; pointer-events:none;
}
.scroll-window::before{ left:0;  background:linear-gradient(to right, var(--fade-bg), transparent); }
.scroll-window::after { right:0; background:linear-gradient(to left,  var(--fade-bg), transparent); }

.hscroll{
  display:flex; gap:var(--gap);
  overflow-x:auto; overflow-y:visible;      /* ← permite crecer en hover */
  padding-block:8px 12px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll::before, .hscroll::after{ content:""; flex:0 0 var(--side-pad); }

/* Tarjeta base */
.tile-cat{
  scroll-snap-align:start;
  min-width:var(--tile-w); max-width:var(--tile-w); height:420px;
  border-radius:24px; color:#fff; text-decoration:none; position:relative; overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.12); display:flex; align-items:flex-end; background:#222;

  /* animaciones / hover */
  transform-origin:center;
  will-change:transform;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  z-index:1; /* base bajo los botones */
}
@media (max-width:575.98px){ .tile-cat{ height:360px; } }

/* Borde/sombra suave */
.tile-cat::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: box-shadow .25s ease, opacity .25s ease;
  opacity:.8;
}

.tile-cat .tile-bg{
  position:absolute; inset:0; background:#6a4a39; transform:scale(1.03);
  transition: transform .6s ease, filter .3s ease;
}
.tile-cat .tile-body{
  position:relative; z-index:2; width:100%; padding:22px;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
}
.tile-cat .label-top{ font-size:.85rem; opacity:.9; margin-bottom:.25rem; }
.tile-cat .title{ font-weight:800; font-size:1.7rem; line-height:1.1; margin:0 0 .35rem; }
.tile-cat .meta{ font-size:.9rem; opacity:.9; }

/* Hover / focus */
.tile-cat:hover,
.tile-cat:focus-visible{
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 18px 44px rgba(0,0,0,.25);
  z-index:10; /* aún debajo de los botones (100) */
}
.tile-cat:hover::after,
.tile-cat:focus-visible::after{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.tile-cat:hover .tile-bg,
.tile-cat:focus-visible .tile-bg{ transform:scale(1.10); filter:saturate(1.05) brightness(.98); }
.tile-cat:active{ transform: translateY(-2px) scale(1.02); }

/* Botón prev/next SIEMPRE por encima */
.scroll-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:100; pointer-events:auto;
  width:44px; height:44px; border:0; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(6px);
  transition:background .2s ease, transform .2s ease;
}
.scroll-btn.prev{ left:4px; }
.scroll-btn.next{ right:4px; }
.scroll-btn:hover{ background:#fff; transform:translateY(-50%) scale(1.04); }

/* Botón “+ / →” dentro de la tarjeta (opcional) */
.tile-cat .plus{
  position:absolute; right:12px; bottom:12px;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:#000;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  transition: transform .2s ease, background .2s ease; font-size:1.1rem;
}
.tile-cat:hover .plus{ transform: translateY(-2px); background:#fff; }

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .tile-cat, .tile-cat .tile-bg{ transition:none; }
}

/* Sticky footer genérico */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.site-footer { margin-top: auto; }