:root{
  --vino:#722f37;
  --vino-oscuro:#5a1e2e;
  --bg:#f8f6f2;
  --text:#2c2c2c;
  --card:#fffdf9;
  --borde:#e8ded0;

  /* repetidas, pero mantenemos por compatibilidad con tu CSS previo */
  --vino:#722f37;
  --vino-oscuro:#5a1e2e;
}

/* ====== Reset básico ====== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
  /* Fondo */
  background:
    url("imagenes/fondo/uvas.webp") center / cover fixed no-repeat,
    var(--bg);
  /* Reservamos espacio por el header fijo */
  padding-top: 100px;
}
/* ====== Encabezado fijo ====== */
.hero-titulo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255, 245, 220, .95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  padding: 2.2rem 0 1rem;  /* ⬅️ antes: 1.2rem 0 .8rem — aumentamos el espacio arriba */
  text-align: center;
}

.hero-titulo h1 {
  margin: 0;
  font-family: 'Georgia', serif;
  color: #69262d;
  font-size: 2.4rem;
  letter-spacing: 1.2px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, .15);
  font-weight: normal;
}


/* Botón carrito fijo arriba a la derecha */
.btn-cart{
  position: fixed;
  top: 18px;
  right: 25px;
  background: var(--vino);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: .55rem 1.1rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: transform .2s ease, background .2s ease;
  z-index: 10000;
}
.btn-cart:hover{ transform: scale(1.05); background:#5a1e2e; }
.cart-counter{background:#ff3d3d;color:#fff;border-radius:999px;font-size:12px;padding:.1rem .45rem}

/* En móvil, el título reserva espacio para que no lo tape Mi compra */
@media (max-width:768px)
{
  .hero-titulo h1{ padding-right: 0px; }
}

/* ====== Layout ====== */
.layout{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:16px;
  padding:14px;
}

/* Sidebar */
.sidebar{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:12px;
  padding:12px;
  align-self:start;
  position:sticky;
  top:70px;
}
.sidebar__ttl{ margin:.2rem 0 .8rem 0; }
.fgroup{ margin-bottom:14px; }
.fgroup__label{ display:block; font-weight:700; margin-bottom:6px; }
.select{ width:100%; height:36px; border:1px solid #ddd; border-radius:8px; padding:0 .4rem; }
.chk-list{ display:grid; gap:6px; }
.radio,.check{ display:flex; align-items:center; gap:8px; cursor:pointer; }

/* Grid de productos */
.grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
}
.card{
  background:var(--card);
  border:1px solid var(--borde);
  border-radius:14px;
  padding:.8rem;
  text-align:center;
  box-shadow:0 3px 8px rgba(0,0,0,.06);
}
.card img{ width:100%; max-width:190px; border-radius:8px; display:block; margin:.25rem auto .5rem; }
.card h3{ font-size:1rem; margin:.25rem 0 .35rem; color:#5a3e2b; }
.card .precio{ color:#a42e2e; font-weight:800; margin:.25rem 0; }
.cant{ display:flex; justify-content:center; }
.cant input{
  width:56px; height:30px; border:1px solid #d7d7d7; border-radius:8px; text-align:center; font-size:14px;
}
.btn{height:36px;border:0;border-radius:8px;padding:0 .9rem;cursor:pointer;font-weight:700}
.btn--vino{background:var(--vino);color:#fff}
.btn--vino:hover{background:var(--vino-oscuro)}
.btn--light{background:#fff;border:1px solid #e6e3df;color:#4a4a4a}
.btn--light:hover{background:#faf9f7}
.btn--wsp{background:#25D366;color:#fff}
.btn--mail{background:#3b82f6;color:#fff}
.full{width:100%}
.btn-add{margin-top:.45rem}

/* “Leer más” con etiqueta visual */
.card p.small,
.card .descripcion-colapsada{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; cursor:pointer; transition:all .2s ease; position:relative;
}
.card p.small::before,
.card .descripcion-colapsada::before{
  content:""; position:absolute; left:0; right:0; bottom:1.2rem; height:2.5rem;
  background:linear-gradient(to top,var(--card) 30%,transparent);
  pointer-events:none;
}
.card p.small::after,
.card .descripcion-colapsada::after{
  content:"Leer más"; position:absolute; bottom:0; right:0; left:0;
  text-align:right; color:var(--vino); font-weight:700; background:var(--card); padding:.2rem .4rem;
}
.card p.small.expandida,
.card .descripcion-colapsada.expandida{ -webkit-line-clamp:unset; padding-bottom:.4rem; }
.card p.small.expandida::before,
.card .descripcion-colapsada.expandida::before{ display:none; }
.card p.small.expandida::after,
.card .descripcion-colapsada.expandida::after{
  content:"Leer menos"; position:static; display:inline-block; margin-top:.3rem; background:none; text-align:left;
}

/* Load more */
.loadmore-wrap{ display:flex; justify-content:center; margin:16px 0; }

/* Overlay + carrito */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.15); backdrop-filter:blur(2px);
  z-index:30; opacity:0; pointer-events:none; transition:.18s;
}
.overlay.visible{ opacity:1; pointer-events:auto; }
.cart{
  position:fixed; right:16px; bottom:16px; z-index:31;
  width:min(420px,92vw); transform:translateY(12px); opacity:0; pointer-events:none; transition:.18s;
}
.cart.visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
.cart__box{ background:#fff; border:1px solid #eee; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.3); padding:.6rem; }
.cart__head{ display:flex; align-items:center; justify-content:space-between; padding:.25rem .25rem .5rem; border-bottom:1px solid #eee; }
.cart__ttl{ margin:0; }
.cart__close{ background:none; border:0; font-size:18px; cursor:pointer; color:#666; }
.cart__scroll{ max-height:50vh; overflow:auto; margin:.4rem 0; border:1px solid #f0f0f0; border-radius:8px; }
.cart__table{ width:100%; border-collapse:collapse; font-size:14px; }
.cart__table th,.cart__table td{ padding:.4rem; border-bottom:1px solid #f3f3f3; text-align:center; }
.qty-wrap{ display:flex; align-items:center; justify-content:center; gap:6px; }
.qty-btn{ width:24px; height:24px; border:1px solid #ccc; background:#f3f3f3; border-radius:6px; cursor:pointer; }
.qty-input{ width:46px; height:28px; text-align:center; border:1px solid #ccc; border-radius:6px; }
.btn-icon{ background:none; border:0; cursor:pointer; font-size:16px; color:#c43b3b; }
.cart__foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.total{ font-weight:900; }

/* ====== Drawer de filtros (móvil) ====== */
.filters-fab{
  position: static;
  margin-top: 65px;
  left: 14px;
  top: calc(100px + 8px); /* debajo del header fijo */
  z-index: 10010;
  background: var(--vino);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .5rem .9rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  display: none; /* solo móvil */
}
.filters-fab:active{ transform: scale(.98); }

.filters-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25); backdrop-filter: blur(2px);
  z-index: 10005; opacity: 0; pointer-events: none; transition: .18s;
}
.filters-overlay.visible{ opacity: 1; pointer-events: auto; }

.filters-drawer{
  position: fixed; top:0; left:0; height:100dvh;
  width: min(90vw, 360px);
  background:#fff; border-right:1px solid #eee;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  z-index:10006; transform: translateX(-110%); transition: transform .22s ease;
  display:none; /* solo móvil */
}
.filters-drawer.visible{ transform: translateX(0); }
.filters-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem .9rem; border-bottom:1px solid #eee;
  position:sticky; top:0; background:#fff; z-index:1;
}
.filters-drawer__close{ background:none; border:0; cursor:pointer; font-size:18px; color:#666; }
.filters-drawer__body{ padding:.9rem; height:calc(100dvh - 56px); overflow:auto; }

/* ====== Responsive ====== */
@media (max-width:900px){
  .layout{ grid-template-columns:1fr; }
  .sidebar{ position:static; }
}
@media (max-width:768px){
  /* Ocultamos la sidebar y usamos el drawer */
  .sidebar{ display:none !important; }
  .filters-drawer{ display:block; }
  .filters-fab{ display:inline-flex; align-items:center; gap:.4rem; }
}
@media (max-width:380px){
  .btn-cart{ right:12px; padding:.45rem .8rem; font-size:.9rem; }
}
/* --- BOTONES FIJOS --- */

.btn-cart {
  position: fixed;
  top: 5px;        /* distancia desde arriba */
  right: 20px;      /* distancia desde el borde derecho */
  background: var(--vino);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
  z-index: 10000;
  transition: transform .2s ease, background .2s ease;
}

.btn-cart:hover {
  transform: scale(1.05);
  background: var(--vino-oscuro);
}



.btn-cart:hover {
  transform: scale(1.05);
  background: var(--vino-oscuro);
}

/* Botón de Filtros */
.btn-filtro {
  left: 20px;
  background: var(--vino);
  color: #fff;
}
.btn-filtro:hover {
  transform: scale(1.05);
  background: var(--vino-oscuro);
}

/* --- PANEL DE FILTROS RESPONSIVO --- */
.sidebar {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1rem;
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  overflow-y: auto;
  z-index: 9999;
  box-shadow: 0 0 20px rgba(0,0,0,.3);
  transition: left .3s ease;
}

.sidebar.visible {
  left: 0;
}

/* En pantallas grandes, el filtro se muestra fijo al costado */
@media (min-width: 769px) {
  .btn-filtro { display: none; }
  .sidebar {
    position: sticky;
    top: 100px;
    left: 0;
    width: 260px;
    height: auto;
    box-shadow: none;
    transition: none;
  }
}