/* ═══════════════════════════════════════════════════════════
   Vino&Copas — tienda online
   ═══════════════════════════════════════════════════════════

   El color de marca (#CD3072) sale del propio logo. Es distinto al rojo de
   Los Toro a propósito: son dos marcas, y el cliente que compra una botella no
   tiene por qué saber que atrás hay una distribuidora.

   El fondo es papel cálido y no blanco puro: una tienda de vinos que se ve como
   un panel de administración no invita a comprar. */

/* Los colores salen del logo, medidos del archivo, no elegidos a ojo:
   el magenta es #CD3072 y la tinta oscura de las letras es #33253F —una
   berenjena, no un negro—. Esa tinta es lo que hace que la página se vea de la
   marca y no de cualquier tienda: un negro puro al lado del magenta se ve
   duro, y era lo que tenía antes. */
:root{
  --marca:#CD3072;  --marca-osc:#A8215A;  --marca-tenue:#FBEFF4;
  --marca-cl:#DA6495; --marca-pal:#F3CBDC;
  --tinta:#33253F;  --tinta-2:#54455F;    --tenue:#8B7C93;
  --papel:#FFFFFF;  --piso:#FAF7F8;       --linea:#E8E0EA;
  --ok:#1E7F45;     --alerta:#B25E00;
  --display:'Oswald',system-ui,'Helvetica Neue',sans-serif;
  --texto:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sombra:0 1px 2px rgba(27,20,24,.05), 0 10px 30px -22px rgba(27,20,24,.4);
  --t:.18s ease;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--piso);color:var(--tinta-2);
  font-family:var(--texto);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--marca-osc)}

h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--tinta);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.1;
  text-wrap:balance;margin:0}
h1{font-size:clamp(1.7rem,4.4vw,2.5rem)}
h2{font-size:1.25rem}
h3{font-size:1rem}

.env{max-width:1180px;margin:0 auto;padding:0 20px}

/* ── Barra ──────────────────────────────────────────────── */
.barra{position:sticky;top:0;z-index:40;background:var(--papel);
  border-bottom:1px solid var(--linea)}
.barra-in{display:flex;align-items:center;gap:20px;padding:14px 0}
/* El logo va como imagen y no tipografiado: la marca tiene una botella en la
   I y una copa en la P, y eso no se imita con una fuente parecida. */
.marca{display:flex;align-items:center;text-decoration:none;flex:none}
.marca img{height:44px;width:auto}
@media (max-width:640px){ .marca img{height:34px} }

.buscador{flex:1;min-width:0;display:flex;gap:8px}
.buscador input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--linea);
  border-radius:999px;font-family:inherit;font-size:.92rem;background:var(--piso);color:var(--tinta)}
.buscador input:focus{outline:0;border-color:var(--marca);background:var(--papel)}

.carro{flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;background:var(--marca);color:#fff;
  text-decoration:none;font-weight:600;font-size:.86rem;transition:var(--t)}
.carro:hover{background:var(--marca-osc)}
.carro .n{background:rgba(255,255,255,.25);border-radius:999px;
  padding:1px 7px;font-variant-numeric:tabular-nums}

/* ── Cintas de categoría ────────────────────────────────── */
.cintas{border-bottom:1px solid var(--linea);background:var(--papel)}
.cintas-in{display:flex;gap:6px;overflow-x:auto;padding:0 20px 12px;
  scrollbar-width:none}
.cintas-in::-webkit-scrollbar{display:none}
.cinta{flex:none;padding:7px 14px;border-radius:999px;font-size:.84rem;
  text-decoration:none;color:var(--tinta-2);border:1px solid var(--linea);
  white-space:nowrap;transition:var(--t)}
.cinta:hover{border-color:var(--marca);color:var(--marca-osc)}
.cinta.on{background:var(--marca);border-color:var(--marca);color:#fff;font-weight:600}

/* ── Portada ────────────────────────────────────────────── */
/* El fondo va de la berenjena del logo al magenta, en ese orden: la marca
   escrita en oscuro sobre claro es la versión de todos los días, y el magenta
   pleno es el acento. Al revés —magenta de pared entera— grita. */
.hero{background:linear-gradient(135deg,#2A1E33 0%,#3F2748 45%,#7A2454 100%);
  color:#fff;padding:clamp(48px,8vw,92px) 0;position:relative;overflow:hidden}
/* Una copa enorme, apenas insinuada, recortada por el borde. Es el mismo
   dibujo del logo: ata la portada a la marca sin repetir el logo dos veces. */
.hero::after{content:"";position:absolute;right:-60px;top:-40px;bottom:-40px;
  width:min(46%,520px);opacity:.10;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' d='M22 8h56c0 30-8 46-22 52v58h18v6H26v-6h18V60C30 54 22 38 22 8z'/%3E%3Cpath fill='%23fff' d='M25 12h50c-1 18-5 28-11 33H36c-6-5-10-15-11-33z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:820px){ .hero::after{display:none} }
/* Mismo motivo: en la portada sólo el primer aviso es <h1>; los demás son
   «.bn-tit» y tienen que verse idénticos. Un selector, no dos reglas. */
.hero h1,
.hero .bn-tit{color:#fff;max-width:16ch;font-size:clamp(1.7rem,4.4vw,2.5rem);
  font-family:var(--display);font-weight:500;line-height:1.1;margin:0;
  text-transform:uppercase;letter-spacing:.02em;text-wrap:balance}
.hero p{max-width:52ch;color:rgba(255,255,255,.82);font-size:1.05rem;margin:16px 0 0}
.hero .btns{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;
  border-radius:999px;font-weight:600;font-size:.88rem;letter-spacing:.02em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  font-family:inherit;transition:var(--t)}
.btn-marca{background:var(--marca);color:#fff}
.btn-marca:hover{background:var(--marca-osc)}
.btn-linea{border-color:currentColor;color:inherit;background:transparent}
.btn-linea:hover{background:rgba(255,255,255,.08)}
.btn-osc{border-color:var(--linea);color:var(--tinta);background:var(--papel)}
.btn-osc:hover{border-color:var(--marca);color:var(--marca-osc)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-full{width:100%;justify-content:center}

/* ── Grilla de productos ────────────────────────────────── */
.seccion{padding:44px 0}
.seccion-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:22px;flex-wrap:wrap}
.seccion-h .sub{color:var(--tenue);font-size:.88rem}
/* La banda inclinada es el recurso del propio logo —el rótulo «tienda
   gourmet»—. Usarla para titular las secciones ata la página a la marca con
   algo que ya existe, en vez de inventar un adorno nuevo. */
/* El «.h2» del selector es para los títulos de página que son <h1> por
   estructura —catálogo, carrito— pero se ven como el resto de los rótulos. Se
   SUMA a la regla existente en vez de copiar sus valores: dos copias del mismo
   estilo se desincronizan al primer ajuste, y eso ya pasó seis veces acá. */
.seccion-h h2,
.seccion-h .h2{position:relative;display:inline-block;padding:4px 14px;color:#fff;
  background:var(--marca);transform:rotate(-1.2deg);border-radius:2px;
  font-size:1.25rem;margin:0}
.seccion-h h2.plano,
.seccion-h .h2.plano{background:none;color:var(--tinta);transform:none;padding:0}

.grilla{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

.prod{background:var(--papel);border:1px solid var(--linea);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;transition:var(--t);
  position:relative}
.prod:hover{border-color:var(--marca-cl);box-shadow:var(--sombra);transform:translateY(-3px)}
.prod:hover .prod-foto img{transform:scale(1.04)}
.prod-foto{aspect-ratio:1;background:#fff;display:flex;align-items:center;
  justify-content:center;padding:14px;border-bottom:1px solid var(--linea)}
.prod-foto img{max-height:100%;width:auto;object-fit:contain;transition:transform .25s ease}
@media (prefers-reduced-motion:reduce){
  .prod:hover{transform:none}
  .prod:hover .prod-foto img{transform:none}
}
.prod-cuerpo{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-nom{font-weight:600;color:var(--tinta);font-size:.92rem;line-height:1.35;
  text-decoration:none;display:block}
.prod-nom:hover{color:var(--marca-osc)}
.prod-sub{font-size:.76rem;color:var(--tenue)}
.prod-pre{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;
  gap:8px;flex-wrap:wrap}
.prod-pre b{font-family:var(--display);font-weight:500;font-size:1.32rem;
  color:var(--tinta);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.prod-pre s{font-size:.82rem;color:var(--tenue)}
.prod .btn{margin:0 14px 14px}

.sello{position:absolute;top:10px;left:10px;z-index:2;
  background:var(--marca);color:#fff;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.sello.ahorro{background:var(--tinta)}

/* ── Ficha ──────────────────────────────────────────────── */
.ficha{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;padding:34px 0}
@media (max-width:820px){ .ficha{grid-template-columns:1fr} }
/* ── El cajón de la foto ──────────────────────────────────────────────────
   La foto LLENA el cajón y se recorta con su mismo redondeo. Antes el cajón
   tenía 26 px de relleno y el fondo del tema: en modo noche eso dejaba un
   rectángulo blanco de esquinas rectas —la foto, que viene con fondo blanco
   quemado— flotando dentro de una caja oscura redondeada. Dos formas distintas,
   una dentro de la otra, que es justo lo que se ve mal.

   `overflow:hidden` es lo que hace el trabajo: el redondeo del cajón recorta lo
   que hay adentro, así que la foto termina donde termina la curva. */
.ficha-foto{background:var(--foto-fondo,#FFF);border:1px solid var(--linea);
  border-radius:16px;padding:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:320px}
/* La foto grande ocupa el cajón entero, con `object-fit:contain` para que no se
   deforme ninguna botella. El `background:#FFF` del propio <img> es la pieza
   fina: con `contain`, lo que sobra a los lados deja ver el fondo DEL ELEMENTO,
   no el del cajón. Pintándolo blanco —el mismo blanco que traen quemado las
   fotos de producto— la unión entre la foto y su cajón deja de existir, y lo
   que se ve es una sola superficie blanca redondeada.

   Antes acá vivía un `max-width:100%` que resolvía otro problema: con
   `width:auto` y 440 px de alto, una foto apaisada calculaba su ancho desde el
   alto y desbordaba la página —494 px de contenido en un teléfono de 360—. Con
   el ancho atado al cajón ese caso ya no puede ocurrir. */
.ficha-foto > img{width:100%;height:100%;min-height:320px;max-height:440px;
  object-fit:contain;background:#FFF;display:block;align-self:stretch}
.ficha .precio{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0}
.ficha .precio b{font-size:2rem;color:var(--tinta);font-variant-numeric:tabular-nums;
  font-family:var(--display);font-weight:500}
.ficha .precio s{color:var(--tenue);font-size:1rem}
.ficha .precio .baja{background:var(--marca-tenue);color:var(--marca-osc);
  font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px}

.datos{border-top:1px solid var(--linea);margin-top:22px;padding-top:16px}
.datos div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;
  font-size:.88rem;border-bottom:1px solid var(--linea)}
.datos div:last-child{border-bottom:0}
.datos dt{color:var(--tenue)}
.datos dd{margin:0;color:var(--tinta);font-weight:500;text-align:right}

.cant{display:flex;align-items:center;gap:10px;margin:20px 0}
.cant input{width:74px;padding:11px;text-align:center;border:1px solid var(--linea);
  border-radius:10px;font-family:inherit;font-size:1rem;background:var(--papel)}

/* ── Avisos ─────────────────────────────────────────────── */
.aviso{padding:14px 16px;border-radius:12px;font-size:.9rem;margin:16px 0;
  border:1px solid var(--linea);background:var(--papel)}
.aviso.ok{border-color:rgba(30,127,69,.3);background:rgba(30,127,69,.07);color:#14572f}
.aviso.mal{border-color:rgba(205,48,114,.35);background:var(--marca-tenue);color:var(--marca-osc)}
.vacio{padding:60px 20px;text-align:center;color:var(--tenue);
  background:var(--papel);border:1px dashed var(--linea);border-radius:14px}

/* ── Pie ────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:rgba(255,255,255,.72);margin-top:64px;
  padding:44px 0 28px;font-size:.88rem}
.pie-logo{height:64px;width:auto;margin-bottom:16px}
.pie h3{color:#fff;font-size:.82rem;letter-spacing:.14em;margin-bottom:12px}
.pie a{color:rgba(255,255,255,.9)}
.pie-cols{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pie-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:18px;
  font-size:.78rem;color:rgba(255,255,255,.55)}

/* ── Puerta de edad ─────────────────────────────────────── */
.edad{position:fixed;inset:0;z-index:100;background:rgba(20,10,14,.94);
  display:flex;align-items:center;justify-content:center;padding:24px}
/* Sin esto la puerta de edad NO se cierra nunca: el «display:flex» de la regla
   de arriba le gana al atributo hidden, que el navegador aplica con una regla
   de menos peso. Poner hidden y que no pase nada es de los errores que no se
   ven leyendo el código. */
.edad[hidden]{display:none}
.edad-caja{background:var(--papel);border-radius:18px;padding:34px;max-width:420px;
  width:100%;text-align:center}
.edad-caja p{color:var(--tinta-2);font-size:.94rem}
.edad-caja .btns{display:flex;gap:10px;margin-top:22px}
/* «Sí, tengo 18 o más» no cabía y se partía en dos líneas, justo al lado de un
   «No» de dos letras. Ahora el sí se lleva el espacio que necesita y ninguno de
   los dos parte palabras: es el botón que casi todos van a apretar, y ahora se
   ve en cada visita. */
.edad-caja .btns .btn{white-space:nowrap;flex:0 1 auto}
.edad-caja .btns .btn:first-child{flex:1 1 auto}

/* ── Paginación ─────────────────────────────────────────── */
.paginas{display:flex;gap:8px;justify-content:center;margin:34px 0;flex-wrap:wrap}
.paginas a,.paginas span{padding:8px 14px;border-radius:10px;font-size:.88rem;
  text-decoration:none;border:1px solid var(--linea);color:var(--tinta-2);background:var(--papel)}
.paginas .on{background:var(--marca);border-color:var(--marca);color:#fff;font-weight:600}

@media (max-width:640px){
  .barra-in{flex-wrap:wrap;gap:12px}
  .buscador{order:3;width:100%;flex-basis:100%}
  .grilla{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .prod-cuerpo{padding:11px}
  .prod .btn{margin:0 11px 11px}
}

/* ═══════════════════════════════════════════════════════════
   Barra que se achica, íconos, banner, confianza y avisos
   ═══════════════════════════════════════════════════════════ */

.barra{transition:box-shadow var(--t)}
.barra.chica{box-shadow:0 2px 14px -6px rgba(51,37,63,.28)}
.barra.chica .barra-in{padding:8px 0}
.barra.chica .marca img{height:34px}
.barra-in,.marca img{transition:all var(--t)}

.buscador{position:relative}
.bs-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--tenue);pointer-events:none;display:flex}
.buscador input{padding-left:42px}

.carro svg{flex:none}
.carro.late{animation:late .4s ease}
@keyframes late{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .carro.late{animation:none} }
@media (max-width:520px){ .carro-txt{display:none} }

/* ── Banner ─────────────────────────────────────────────── */
.hero-in{position:relative;z-index:1;display:grid}
/* Las láminas se apilan en la misma celda: así el alto lo manda la más larga y
   la portada no pega saltos cuando rota. */
.bn-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease,visibility .5s}
.bn-slide.on{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){ .bn-slide{transition:none;transform:none} }
.bn-puntos{grid-area:2/1;display:flex;gap:8px;margin-top:26px}
.bn-punto{width:28px;height:4px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.3);transition:var(--t)}
.bn-punto.on{background:#fff;width:44px}

/* ── Franja de confianza ────────────────────────────────── */
.confianza{background:var(--papel);border-bottom:1px solid var(--linea)}
.confianza-in{display:grid;gap:18px;padding:20px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cf{display:flex;align-items:center;gap:12px}
.cf-ic{flex:none;width:42px;height:42px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;
  background:var(--marca-tenue);color:var(--marca-osc)}
.cf-txt b{display:block;color:var(--tinta);font-size:.88rem}
.cf-txt span{display:block;color:var(--tenue);font-size:.78rem;line-height:1.35}

/* ── Aparecer al hacer scroll ───────────────────────────── */
/* ── Aparecer al hacer scroll ────────────────────────────────
   Va bajo «.js» a propósito. La regla estaba suelta, así que quien llegara sin
   JavaScript —o con el script caído a mitad por cualquier error anterior— veía
   la portada con la franja de confianza y después NADA: las secciones de
   productos quedaban en opacity:0 para siempre.

   Una tienda que se ve vacía por un adorno es un adorno que no vale la pena.
   Sin la clase «js» todo se ve, y el efecto simplemente no ocurre. */
.js .aparece{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease}
.aparece.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .aparece{opacity:1;transform:none;transition:none}
}

/* ── Aviso flotante ─────────────────────────────────────── */
.flota{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);
  z-index:90;background:var(--tinta);color:#fff;padding:12px 20px;
  border-radius:999px;font-size:.88rem;font-weight:500;box-shadow:var(--sombra);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
  max-width:calc(100% - 32px);text-align:center}
.flota.ver{opacity:1;transform:translate(-50%,0)}
.flota.mal{background:var(--marca-osc)}

/* ── Botones + / − ──────────────────────────────────────── */
.paso{width:38px;height:38px;border-radius:10px;border:1px solid var(--linea);
  background:var(--papel);color:var(--tinta);font-size:1.15rem;line-height:1;
  cursor:pointer;font-family:inherit;transition:var(--t)}
.paso:hover{border-color:var(--marca);color:var(--marca-osc)}
.paso-caja{display:flex;align-items:center;gap:6px}

/* ═══════════════════════════════════════════════════════════
   Comunidad, cupones y la caja de 6
   ═══════════════════════════════════════════════════════════ */

.cuenta-lnk{flex:none;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;
  border-radius:999px;border:1px solid var(--linea);color:var(--tinta);
  text-decoration:none;font-weight:600;font-size:.86rem;transition:var(--t)}
.cuenta-lnk:hover{border-color:var(--marca);color:var(--marca-osc)}
.cinta-caja{border-color:var(--marca);color:var(--marca-osc);font-weight:600}

/* ── Registro / comunidad ───────────────────────────────── */
.comunidad{display:grid;gap:38px;grid-template-columns:minmax(0,1fr) minmax(320px,420px);
  align-items:start}
@media (max-width:900px){ .comunidad{grid-template-columns:1fr} }
.com-texto h1{margin-bottom:14px}
.com-texto p{max-width:52ch}
.ventajas{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.ventajas li{display:flex;gap:14px;align-items:flex-start}
.ventajas li>span{flex:none;width:42px;height:42px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;background:var(--marca-tenue);color:var(--marca-osc)}
.ventajas b{display:block;color:var(--tinta);font-size:.92rem}
.ventajas div{font-size:.85rem;color:var(--tenue);line-height:1.45}

/* «min-width:0» en los dos: por defecto una celda de grid no se achica por
   debajo de su contenido, así que los campos empujaban la tarjeta fuera de la
   pantalla en vez de encogerse. Es el desborde clásico de CSS grid. */
.com-caja{background:var(--papel);border:1px solid var(--linea);border-radius:18px;
  padding:26px;box-shadow:var(--sombra);min-width:0}
.comunidad>*{min-width:0}
.tabs{display:flex;gap:4px;background:var(--piso);padding:4px;border-radius:999px;margin-bottom:22px}
.tab{flex:1;text-align:center;padding:9px;border-radius:999px;font-size:.86rem;
  text-decoration:none;color:var(--tenue);font-weight:600;transition:var(--t)}
.tab.on{background:var(--papel);color:var(--tinta);box-shadow:0 1px 3px rgba(51,37,63,.12)}

/* ── Entrar con Google ────────────────────────────────────────────────────
   Blanco con borde gris SIEMPRE, también en modo noche, y por eso no está en
   tema.css. Las reglas de marca de Google piden su logo de colores sobre fondo
   claro, y la «G» de cuatro colores sobre un fondo oscuro se ensucia. Un botón
   que se ve igual en todas partes es además el que la gente reconoce sin leer.
   Los colores van escritos a mano y no con variables por lo mismo: no deben
   seguir al tema. */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;box-sizing:border-box;padding:12px 16px;border:1px solid #DADCE0;
  border-radius:999px;background:#FFF;color:#3C4043;font-size:.9rem;font-weight:600;
  text-decoration:none;transition:var(--t)}
.btn-google:hover{background:#F7F8F8;border-color:#C9CDD1;box-shadow:0 1px 3px rgba(60,64,67,.16)}
.btn-google:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.btn-google svg{flex:0 0 auto}

/* El «o» entre el botón y el formulario, con su línea a cada lado. La línea se
   dibuja con dos pseudoelementos que crecen: así queda centrada pase lo que
   pase con el ancho, sin números escritos a mano. */
.o-bien{display:flex;align-items:center;gap:12px;margin:18px 0;
  font-size:.78rem;color:var(--tenue);text-transform:uppercase;letter-spacing:.06em}
.o-bien::before,.o-bien::after{content:"";flex:1;height:1px;background:var(--linea)}

.com-t{margin:0 0 6px;font-size:1.25rem}

/* ── Boleta o factura, en la caja ─────────────────────────────────────────
   Dos tarjetas en vez de dos radios sueltos: el área que se puede apretar es
   la tarjeta entera y no un círculo de 14 px, que en un teléfono es la
   diferencia entre elegir y errarle. El <input> se deja visible —no se
   esconde— porque es lo que dice cuál está marcado sin depender del color, y
   porque un lector de pantalla lo necesita donde está. */
.ck-doc{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin:0 0 4px}
@media (max-width:560px){ .ck-doc{grid-template-columns:1fr} }
/* Los selectores van con «.ck-doc» adelante, y no sueltos, por una razón
   concreta: estas tarjetas son <label> y viven dentro de `.form-cuenta`, que
   tiene `.form-cuenta label { display:grid }`. Una clase sola pierde contra una
   clase más un elemento, así que `.ck-doc-op{display:flex}` no se aplicaba: el
   radio quedaba arriba del texto, centrado, en vez de al lado. Es el mismo
   choque de pesos que dejó el <select> escondido midiendo el ancho del
   formulario. Con el padre delante gana esta regla, sin un solo !important. */
.ck-doc .ck-doc-op{display:flex;gap:10px;align-items:flex-start;padding:14px;cursor:pointer;
  border:1px solid var(--linea);border-radius:12px;background:var(--papel);transition:var(--t)}
.ck-doc .ck-doc-op:hover{border-color:var(--marca-cl)}
/* `input[type=radio]` y no `input` a secas. La hoja trae
   `.form-cuenta input:not([type=checkbox]) { width:100% }` —pensada para los
   campos de texto— y un radio TAMBIÉN cumple «no es checkbox»: se llevaba el
   ancho completo, el borde y el relleno de un campo de texto. El resultado era
   una pastilla enorme que empujaba el texto de cada opción fuera de su tarjeta.
   Las dos reglas pesaban igual, así que ganaba la que va después; con el tipo
   en el selector esta pesa más y el empate deja de decidirse por el orden. */
.ck-doc .ck-doc-op input[type=radio]{margin:3px 0 0;padding:0;width:auto;height:auto;
  min-width:0;flex:0 0 auto;border:0;background:none;accent-color:var(--marca)}
/* `font-weight:400` explícito: `.form-cuenta label` las deja en 600 y la
   bajada de cada opción salía tan gruesa como su título. */
/* `--tinta-2` y no `--tenue`: esto no es una pista al margen, es lo que
   explica cada opción, y es lo único que distingue boleta de factura para
   alguien que no sabe la diferencia. Con el gris tenue queda en 3,5 de
   contraste sobre la tarjeta rosada de la opción elegida — por debajo del 4,5
   que pide la norma para texto de este tamaño. Con éste queda sobre 7. */
.ck-doc .ck-doc-op span{display:block;min-width:0;font-size:.82rem;font-weight:400;
  color:var(--tinta-2);line-height:1.45;letter-spacing:0;text-transform:none}
.ck-doc .ck-doc-op span b{display:block;font-size:.95rem;color:var(--tinta);
  font-weight:600;margin-bottom:3px}
/* `:has()` deja marcada la tarjeta elegida sin una línea de JavaScript. Donde
   no exista, se pierde el realce y el radio sigue diciendo cuál está marcado:
   no se rompe nada, sólo se ve más plano. */
.ck-doc-op:has(input:checked){border-color:var(--marca);background:var(--marca-tenue)}
.ck-doc-op:has(input:focus-visible){outline:2px solid var(--marca);outline-offset:2px}

.ck-factura{display:grid;gap:14px;margin:14px 0 4px;padding:16px;
  border:1px dashed var(--linea);border-radius:12px;background:var(--piso)}
/* Las dos líneas de este bloque explican por qué se piden cinco datos y a
   dónde llega la factura. Mismo motivo que arriba para no dejarlas en gris
   tenue: si no se leen, los cinco campos parecen un capricho. */
/* Con `.form-cuenta` adelante, otra vez: más abajo en esta misma hoja hay un
   `.form-cuenta .pista { color:var(--tenue) }` que pesa igual y va después.
   Es la tercera vez en este bloque que el contexto del formulario gana por ir
   más abajo; dentro de `.form-cuenta` no sirve una clase sola. */
.form-cuenta .ck-factura > .pista{color:var(--tinta-2)}

.form-cuenta{display:grid;gap:14px}
/* `align-content:start` no es decorativo: una rejilla estira sus filas para
   llenar la celda, así que cuando el vecino de al lado era alto, la etiqueta
   quedaba arriba del todo y su campo hundido al fondo, con 95 px de aire en
   medio. Con `start` el par etiqueta+campo se mantiene junto pase lo que pase
   al lado. */
.form-cuenta label{display:grid;gap:6px;align-content:start;font-size:.82rem;
  color:var(--tinta);font-weight:600;min-width:0}
.form-cuenta input:not([type=checkbox]){width:100%;min-width:0;padding:12px 14px;
  border:1px solid var(--linea);border-radius:11px;font-family:inherit;font-size:.95rem;
  background:var(--piso);color:var(--tinta);font-weight:400}
.form-cuenta input:focus{outline:0;border-color:var(--marca);background:var(--papel)}
.form-cuenta .campos{display:grid;gap:14px;grid-template-columns:1fr 1fr;min-width:0}
@media (max-width:520px){ .form-cuenta .campos{grid-template-columns:1fr} }
.form-cuenta h3{margin-bottom:2px}
label.check{display:flex!important;align-items:center;gap:9px;font-weight:400!important;
  color:var(--tinta-2)!important;font-size:.86rem;cursor:pointer}
label.check input{width:auto;accent-color:var(--marca)}

.panel-cuenta{display:grid;gap:22px;max-width:640px}
.tarjeta-socio{display:flex;align-items:center;gap:14px;background:var(--papel);
  border:1px solid var(--linea);border-radius:16px;padding:18px;flex-wrap:wrap}
.ts-ic{flex:none;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;background:var(--marca-tenue);color:var(--marca-osc)}
.ts-datos b{display:block;color:var(--tinta);font-size:1rem}
.ts-datos span{display:block;font-size:.8rem;color:var(--tenue)}
.btn-sm{padding:8px 14px;font-size:.8rem}

/* ── Resumen del carrito ────────────────────────────────── */
.resumen{background:var(--papel);border:1px solid var(--linea);border-radius:16px;
  padding:20px;margin-top:18px;max-width:460px;margin-left:auto}
.res-lineas div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:.92rem}
.res-lineas .baja{color:var(--marca-osc)}
.res-lineas .res-total{border-top:1px solid var(--linea);margin-top:8px;padding-top:12px;
  font-family:var(--display);font-size:1.1rem;color:var(--tinta);align-items:baseline}
.res-lineas .res-total b{font-size:1.7rem;font-variant-numeric:tabular-nums}
.res-lineas b{color:var(--tinta);font-variant-numeric:tabular-nums}
.cupon-caja{margin-top:16px;border-top:1px solid var(--linea);padding-top:16px}
.cupon-caja label{display:block;font-size:.82rem;font-weight:600;color:var(--tinta);margin-bottom:8px}
.cupon-fila{display:flex;gap:8px}
.cupon-fila input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--linea);
  border-radius:11px;font-family:inherit;text-transform:uppercase;background:var(--piso)}
.cupon-fila input:focus{outline:0;border-color:var(--marca);background:var(--papel)}

/* ── La caja de 6 ───────────────────────────────────────── */
.caja-hero{background:linear-gradient(120deg,#2A1E33,#6E2350);color:#fff;padding:44px 0 40px}
.caja-hero h1{color:#fff}
.caja-hero p{color:rgba(255,255,255,.85);max-width:56ch;margin:12px 0 0}
.caja-barra{position:sticky;top:74px;z-index:30;background:var(--papel);
  border-bottom:1px solid var(--linea);box-shadow:0 2px 10px -8px rgba(51,37,63,.4)}
.caja-barra-in{display:flex;align-items:center;gap:18px;padding:14px 20px;flex-wrap:wrap}
.cb-texto b{display:block;color:var(--tinta);font-family:var(--display);font-size:1.1rem}
.cb-texto span{display:block;font-size:.8rem;color:var(--tenue)}
.cb-riel{flex:1;min-width:140px;height:8px;border-radius:999px;background:var(--marca-tenue);
  overflow:hidden}
.cb-riel span{display:block;height:100%;background:var(--marca);border-radius:999px;
  transition:width .4s ease}
@media (prefers-reduced-motion:reduce){ .cb-riel span{transition:none} }
@media (max-width:640px){ .caja-barra{position:static} }

/* ═══════════════════════════════════════════════════════════
   Cintas con ícono, franja de confianza y botón de agregar
   ═══════════════════════════════════════════════════════════ */

/* ── Cintas de categoría ────────────────────────────────── */
.cintas-in{gap:8px;padding:12px 20px;align-items:center}
/* En pantalla ancha el riel se centra; cuando ya no cabe, «flex-start» lo deja
   pegado a la izquierda para que se pueda arrastrar sin perder el primero. */
@media (min-width:1100px){ .cintas-in{justify-content:center} }

.cinta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;
  border-radius:999px;font-size:.86rem;font-weight:500;line-height:1;
  text-decoration:none;color:var(--tinta-2);border:1px solid var(--linea);
  background:var(--papel);white-space:nowrap;
  transition:transform .16s ease,border-color var(--t),background var(--t),color var(--t)}
.cinta svg{flex:none;color:var(--marca);transition:transform .25s ease,color var(--t)}
.cinta span{display:block;padding-top:1px}   /* alinea el texto con el ícono */
.cinta:hover{border-color:var(--marca);color:var(--tinta);transform:translateY(-2px)}
.cinta:hover svg{transform:scale(1.12) rotate(-4deg)}
.cinta.on{background:var(--marca);border-color:var(--marca);color:#fff;font-weight:600}
.cinta.on svg{color:#fff}
.cinta-caja{border-color:var(--marca-cl);color:var(--marca-osc);font-weight:600}
.cinta-caja:hover{background:var(--marca-tenue)}
@media (prefers-reduced-motion:reduce){
  .cinta:hover{transform:none} .cinta:hover svg{transform:none}
}

/* ── Franja de confianza ────────────────────────────────── */
.confianza-in{padding:22px 20px;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cf{display:flex;align-items:center;gap:13px;padding:4px 22px;position:relative}
/* Una línea fina entre columnas, y no en la primera. Es lo que hace que se lea
   como una franja de cuatro cosas y no como cuatro cosas sueltas. */
.cf + .cf::before{content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:1px;background:var(--linea)}
@media (max-width:1100px){ .cf + .cf::before{display:none} }
.cf-ic{flex:none;width:44px;height:44px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--marca-tenue),#F7DFE9);
  color:var(--marca-osc);box-shadow:inset 0 0 0 1px rgba(205,48,114,.14)}
.cf-txt{min-width:0}
.cf-txt b{display:block;color:var(--tinta);font-size:.9rem;line-height:1.2;margin-bottom:3px}
.cf-txt span{display:block;color:var(--tenue);font-size:.79rem;line-height:1.3}

/* ── Botón «Agregar» ────────────────────────────────────── */
/* Antes era un bloque magenta macizo que competía con la foto del producto.
   Ahora parte en línea y se rellena al pasar por encima: la tarjeta se ve más
   liviana y el botón igual de claro cuando se le apunta. */
.btn-add{position:relative;overflow:hidden;isolation:isolate;
  border:1.5px solid var(--marca);background:transparent;color:var(--marca-osc);
  padding:11px 18px;gap:9px;transition:color var(--t),border-color var(--t)}
.btn-add::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--marca);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.btn-add:hover,.btn-add:focus-visible{color:#fff}
.btn-add:hover::before,.btn-add:focus-visible::before{transform:scaleX(1)}
.btn-add:active{transform:scale(.97)}
.add-ic{display:flex;transform:translateX(-3px);opacity:.65;
  transition:transform .28s ease,opacity .28s ease}
.btn-add:hover .add-ic{transform:translateX(0);opacity:1}
.btn-add[disabled]{opacity:.65}
.btn-add[disabled]::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .btn-add::before{transition:none}
  .add-ic{transition:none;transform:none;opacity:1}
  .btn-add:active{transform:none}
}

/* ── Sello de la tarjeta ────────────────────────────────── */
.sello{box-shadow:0 2px 8px -3px rgba(51,37,63,.4);letter-spacing:.08em}

/* ── Banner con foto ────────────────────────────────────── */
/* La foto va de fondo y el degradado de la marca encima, no al revés: así el
   texto se lee sea cual sea la imagen que se suba. */
.hero.con-foto{background:linear-gradient(105deg,rgba(30,20,36,.94) 0%,rgba(48,28,54,.86) 42%,rgba(122,36,84,.72) 100%),
  var(--foto) center/cover no-repeat}
.hero.con-foto::after{opacity:.06}
.hero:has(.bn-slide.on.con-foto)::after{opacity:.05}

/* ── Puente a Los Toro desde el pie ─────────────────────── */
.pie-cta{display:inline-flex;align-items:center;gap:9px;margin-top:12px;
  padding:10px 18px;border-radius:999px;text-decoration:none;
  border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:600;font-size:.84rem;
  transition:background var(--t),border-color var(--t),transform .16s ease}
.pie-cta:hover{background:var(--marca);border-color:var(--marca);transform:translateY(-2px)}
.pie-cta svg{flex:none}
@media (prefers-reduced-motion:reduce){ .pie-cta:hover{transform:none} }
.pie-cols{gap:34px}

/* ═══════════════════════════════════════════════════════════
   Avatar del socio
   ═══════════════════════════════════════════════════════════ */

/* «place-items:center» y no padding: el ícono queda centrado de verdad, no
   aproximadamente. Era lo que se veía corrido en la tarjeta del socio. */
.soc-av{display:grid;place-items:center;border-radius:50%;flex:none;
  font-weight:700;letter-spacing:.02em;line-height:1;
  color:hsl(var(--av,320) 55% 26%);background:hsl(var(--av,320) 60% 92%);
  box-shadow:inset 0 0 0 1px hsl(var(--av,320) 45% 82%)}
.soc-av-foto{object-fit:cover;background:var(--piso)}

.av-form{flex:none;margin:0}
.av-caja{position:relative;display:block;cursor:pointer;line-height:0}
.av-caja input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.av-caja .soc-av{transition:filter var(--t)}
.av-caja:hover .soc-av{filter:brightness(.9)}
.av-lapiz{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;
  border-radius:50%;display:grid;place-items:center;background:var(--marca);color:#fff;
  border:2px solid var(--papel);transition:transform var(--t)}
.av-caja:hover .av-lapiz{transform:scale(1.1)}
.av-caja input:focus-visible + .av-lapiz{outline:2px solid var(--marca);outline-offset:2px}

.tarjeta-socio{gap:16px}
.ts-datos{min-width:0;flex:1}
.ts-salir{margin-left:auto;margin-bottom:0}
.av-quitar{background:none;border:0;padding:0;font-family:inherit;font-size:.76rem;
  color:var(--marca-osc);text-decoration:underline;cursor:pointer}
.av-quitar:hover{color:var(--tinta)}

.cuenta-lnk.con-av{padding:5px 16px 5px 5px;gap:9px}

/* Pista bajo un campo del formulario. */
.form-cuenta .pista{font-size:.74rem;font-weight:400;color:var(--tenue);line-height:1.35}

@media (prefers-reduced-motion:reduce){
  .av-caja:hover .av-lapiz{transform:none}
}

/* ── Ajustes de contraste ───────────────────────────────────
   Los íconos de la franja quedaban rosa sobre rosa: se veían apagados justo
   donde hay que transmitir confianza. Ahora la pastilla va en el magenta de la
   marca y el ícono en blanco. */
.cf-ic{background:var(--marca);color:#fff;box-shadow:0 3px 10px -4px rgba(205,48,114,.65);
  transition:transform .2s ease}
.cf:hover .cf-ic{transform:translateY(-2px) scale(1.04)}
@media (prefers-reduced-motion:reduce){ .cf:hover .cf-ic{transform:none} }

/* El botón en reposo tenía el fondo transparente y se leía como un contorno
   vacío. Con un fondo tenue se ve como botón desde el principio, y al pasar
   por encima se llena de color completo. */
.btn-add{background:var(--marca-tenue)}
/* El trazo se define en el SVG, pero a 22 px sobre un fondo saturado queda
   demasiado fino. Se engrosa desde CSS en vez de tocar el generador de íconos,
   que los dibuja para fondos claros. */
.cf-ic svg{stroke-width:1.9;width:23px;height:23px}

/* ═══════════════════════════════════════════════════════════
   Correcciones de alineación y desborde
   ═══════════════════════════════════════════════════════════ */

/* ── La barra de categorías empezaba cortada ─────────────────
   La causa era «justify-content:center» sobre un contenedor con scroll. Cuando
   el contenido no cabe, centrar reparte el sobrante a los DOS lados, y el que
   queda a la izquierda es inalcanzable: scrollLeft ya está en 0 y no hay a
   dónde volver. Medido acá: contenido 1561px, ventana 1180px, y los primeros
   190px no se podían ver de ninguna manera. Por eso «Licores» aparecía como
   «ores».

   «safe center» es exactamente el arreglo: centra mientras quepa y se comporta
   como flex-start cuando no. Van las dos declaraciones a propósito —el
   navegador que no entienda la segunda se queda con la primera— y por eso la
   base es flex-start y no center. */
.cintas-in{justify-content:flex-start;
  scroll-snap-type:x proximity;scroll-padding-inline:24px;
  scroll-behavior:smooth}
@media (min-width:1100px){
  .cintas-in{justify-content:center;justify-content:safe center}
}
/* Que ningún chip quede partido a la mitad al soltar el scroll. */
.cinta{scroll-snap-align:center}

/* ── Flechas ────────────────────────────────────────────────
   Sin ellas no hay nada que diga que la fila sigue. El JS las muestra sólo
   cuando hay a dónde ir; sin JS no aparecen y la fila se arrastra igual. */
.cintas-env{position:relative}
.cin-fl{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--papel);color:var(--marca-osc);cursor:pointer;
  border:1px solid var(--linea);box-shadow:0 2px 10px -3px rgba(51,37,63,.28);
  transition:background var(--t),color var(--t),border-color var(--t)}
.cin-fl:hover{background:var(--marca);color:#fff;border-color:var(--marca)}
.cin-fl:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.cin-fl[hidden]{display:none}
.cin-izq{left:6px}
.cin-der{right:6px}
/* El degradado hace que los chips se desvanezcan bajo la flecha en vez de
   pasar por debajo con un corte seco. Es decorativo: no recibe clics. */
.cintas-env::before,.cintas-env::after{content:"";position:absolute;top:0;bottom:0;
  width:56px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s ease}
.cintas-env::before{left:0;background:linear-gradient(90deg,var(--papel) 30%,transparent)}
.cintas-env::after{right:0;background:linear-gradient(270deg,var(--papel) 30%,transparent)}
.cintas-env.hay-izq::before,.cintas-env.hay-der::after{opacity:1}
@media (max-width:720px){ .cin-fl{display:none} }

/* El chip de destacados se distingue sin gritar: sólo el ícono va en color. */
.cinta-dest svg{color:var(--marca)}
.cinta-dest.on svg{color:#fff}

/* ── El botón de la tarjeta se salía del borde ───────────────
   «.btn-full» pone width:100% y «.prod .btn» le pone 14px de margen a cada
   lado. 100% del contenedor MÁS los márgenes: el botón terminaba 13px fuera de
   la tarjeta (medido: la tarjeta acaba en 271.6px y el botón en 284.6px).
   El ancho tiene que descontar los márgenes. */
.prod .btn{margin:0 14px 14px;width:calc(100% - 28px)}
@media (max-width:520px){ .prod .btn{margin:0 11px 11px;width:calc(100% - 22px)} }

/* ── La franja de confianza ──────────────────────────────────
   El ícono no salía blanco y no estaba centrado en su pastilla, y no era culpa
   del color: «.cf span» (0,1,1) le ganaba a «.cf-ic» (0,1,0) y le imponía
   display:block y el gris del texto. Se arregló apuntando el selector al
   bloque de texto —.cf-txt span— en vez de a todos los span de la franja.
   Acá sólo queda el centrado del conjunto. */
.confianza-in{max-width:1120px;margin-inline:auto}
.cf{justify-content:center}
@media (max-width:1100px){ .cf{justify-content:flex-start} }
.cf-txt{max-width:15rem}

/* ── El botón «Guardar» ocupaba todo el ancho ────────────────
   .form-cuenta es un grid, y un grid estira a sus hijos por defecto. El botón
   se iba de lado a lado con el texto pegado a la izquierda, que es como se ve
   un error, no un botón. */
.form-cuenta > .btn{justify-self:start}

/* Lo que sólo tiene sentido cuando NO hay JavaScript: el botón de actualizar
   cantidades del carrito. Con JS la cantidad se aplica sola. */
.js .sin-js{display:none}

/* ── Cumpleaños: tres listas en vez de un calendario ─────────
   El calendario del navegador abre en el mes actual, así que para 1985 hay que
   retroceder cuarenta veces. Tres listas se contestan en tres toques, y en el
   teléfono la diferencia es todavía mayor. */
.campo-cumple{display:grid;gap:6px;min-width:0}
.campo-cumple .et{font-size:.82rem;font-weight:500;color:var(--tinta)}
/* Los tres anchos son mínimos garantizados, no proporciones sueltas. Con
   «1fr» al medio, en una columna angosta el select del mes se encogía tanto que
   no cabía ni la palabra «Mes» y quedaba una casilla vacía. */
/* Flex con wrap y no una rejilla de tres columnas fijas: en la columna angosta
   del registro no caben los tres, y con grid el resultado era «Dí», el mes sin
   etiqueta y el año fuera de la caja. Así, el que no cabe baja de línea. */
/* El bloque del cumpleaños ocupa la fila ENTERA de .campos.
   Antes compartía fila con el teléfono, y en una columna de 176 px no caben
   dos listas de 5,6 rem: el flex las bajaba de a una y quedaban «Día», «Mes» y
   «Año» apilados, estirando la fila y dejando el campo del teléfono colgando
   al fondo. Con la fila completa los tres caben al lado. */
.form-cuenta .campos .campo-cumple{grid-column:1 / -1}

.cumple-campos{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
/* Una sola regla, no dos. Había dos `.cumple-campos select` seguidas y la
   segunda pisaba el `min-width:5.6rem` de la primera con `min-width:0` —el
   mínimo garantizado que el comentario de arriba dice que hace falta para que
   quepa la palabra «septiembre»—. Dos reglas con el mismo selector siempre
   terminan así: alguien edita una y la otra decide. */
.cumple-campos select{flex:1 1 5.6rem;min-width:5.6rem;
  padding:12px 30px 12px 10px;background-position:right 9px center;
  font-family:inherit;font-size:.9rem;color:var(--tinta);background-color:var(--papel);
  border:1px solid var(--linea);border-radius:12px;transition:border-color var(--t)}
.cumple-campos select:focus{outline:0;border-color:var(--marca)}
@media (max-width:380px){ .cumple-campos{gap:6px} }

/* ── Tus datos son tuyos (Ley 21.719) ────────────────────────
   Separado del formulario de arriba por una línea y con el fondo del piso:
   no es «un campo más» de Mis datos, es otra cosa que se hace una vez en la
   vida. El botón de cerrar la cuenta vive dentro de un <details> cerrado —una
   acción sin vuelta atrás no se pone a un clic de distancia del de guardar. */
.mis-datos{margin-top:26px;padding-top:22px;border-top:1px solid var(--linea);
  display:grid;gap:10px}
.mis-datos h3{margin:0}
.md-fila{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;background:var(--piso);border:1px solid var(--linea);
  border-radius:14px;padding:14px 16px;margin-top:6px}
.md-fila > div{display:grid;gap:3px;flex:1 1 16rem;min-width:0}
.md-fila b{font-size:.92rem;color:var(--tinta)}
.md-cerrar{background:var(--piso);border:1px solid var(--linea);
  border-radius:14px;padding:14px 16px}
.md-cerrar summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--tinta)}
.md-cerrar summary::marker{color:var(--marca)}
.md-form{display:grid;gap:12px;margin-top:14px;max-width:22rem}
.md-form label:not(.check){display:grid;gap:6px;font-size:.82rem;
  font-weight:600;color:var(--tinta)}
.md-form input:not([type=checkbox]){width:100%;padding:12px 14px;
  border:1px solid var(--linea);border-radius:11px;font-family:inherit;
  font-size:.95rem;background:var(--papel);color:var(--tinta);font-weight:400}
.md-form input:focus{outline:0;border-color:var(--marca)}
/* Rojo de verdad, y sólo acá: es el único botón de la tienda que destruye algo. */
.btn-rojo{background:#B3261E;color:#fff;border-color:#B3261E}
.btn-rojo:hover{background:#8F1D17;border-color:#8F1D17}

/* ── Sugerencias del buscador ────────────────────────────────
   Cuelgan del formulario, que ya es position:relative. Van sobre todo lo demás
   —incluida la barra de categorías— porque son una respuesta a algo que la
   persona está escribiendo en este momento. */
.bs-lista{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:var(--papel);border:1px solid var(--linea);border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(51,37,63,.45);overflow:hidden auto;
  max-height:min(70vh,420px)}
.bs-lista[hidden]{display:none}
.bs-it{display:flex;align-items:center;gap:11px;padding:9px 13px;
  text-decoration:none;color:var(--tinta);border-bottom:1px solid var(--linea)}
.bs-it:last-child{border-bottom:0}
.bs-it:hover,.bs-it.on{background:var(--marca-tenue)}
.bs-it img{flex:none;width:34px;height:34px;object-fit:contain;border-radius:8px;background:#fff}
.bs-lupa{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:var(--marca-tenue);color:var(--marca-osc);font-size:1.05rem}
.bs-txt{min-width:0;flex:1}
.bs-txt b{display:block;font-size:.84rem;font-weight:600;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-txt span{display:block;font-size:.72rem;color:var(--tenue)}
.bs-pre{flex:none;font-size:.84rem;font-weight:600;font-variant-numeric:tabular-nums}
.bs-pre.of{color:var(--marca-osc)}
.bs-cat .bs-txt b{font-weight:500}
/* Lo que anuncia cuántos resultados hay, para quien navega con lector de
   pantalla. No se ve, pero tiene que existir en el documento. */
.bs-vivo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ── Experiencias ────────────────────────────────────────────
   La única página que no vende una botella. Se despega del resto con un fondo
   propio, pero con los colores de siempre: es la misma tienda, no otra marca. */
.exp-hero{background:linear-gradient(135deg,var(--tinta),var(--marca-osc));color:#fff;
  padding:64px 0 60px;text-align:center}
/* Con foto: la imagen va de fondo y el degradado se queda ENCIMA, con
   transparencia. Es el mismo velo del banner de la portada, y por el mismo
   motivo: el texto es blanco y una foto clara lo deja ilegible. Como el velo
   es parte del background y no una capa aparte, no hay z-index que ordenar ni
   pseudoelemento que se pueda quedar atrás del texto.

   El velo se aclaró a .62 después de mirarlo con las fotos reales: todas las
   que hay son de bar de noche —luminancia media entre 10 y 70 sobre 255— y con
   un velo del 88% no se veía absolutamente nada de la foto. Lo que sostiene la
   legibilidad si algún día sube una foto clara no es subirle la opacidad al
   velo hasta tapar la imagen, sino la sombra del texto de abajo. */
.exp-hero.con-foto{
  background:linear-gradient(160deg,rgba(51,37,63,.58),rgba(168,33,90,.5) 55%,rgba(51,37,63,.72)),
             var(--foto) center/cover no-repeat}
/* La sombra sólo cuando hay foto: sobre el degradado plano no hace falta y
   ensucia el título. */
.exp-hero.con-foto h1{text-shadow:0 2px 18px rgba(20,12,24,.65)}
.exp-hero.con-foto p,
.exp-hero.con-foto .exp-eyebrow{text-shadow:0 1px 10px rgba(20,12,24,.75)}
.exp-hero .btns{flex-wrap:wrap;gap:10px}
.exp-eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:14px}
/* El color va explícito: el h1 tiene el suyo propio en la hoja base y hereda
   mal sobre un fondo oscuro; sin esto el título queda tinta sobre tinta. */
.exp-hero h1{color:#fff;font-family:var(--display);font-size:clamp(2rem,5vw,3.1rem);
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  line-height:1.05;text-wrap:balance;margin-bottom:14px}
.exp-hero p{max-width:44rem;margin:0 auto 26px;color:rgba(255,255,255,.86);
  font-size:1.02rem;line-height:1.6}

.exp-grilla{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.exp-card{background:var(--papel);border:1px solid var(--linea);border-radius:18px;
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;transition:var(--t)}
.exp-card:hover{border-color:var(--marca-cl);box-shadow:var(--sombra);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){ .exp-card:hover{transform:none} }
.exp-ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:var(--marca);color:#fff;box-shadow:0 4px 14px -6px rgba(205,48,114,.7)}
.exp-card h2{font-size:1.12rem;color:var(--tinta);line-height:1.25}
.exp-card > p{color:var(--tenue);font-size:.9rem;line-height:1.55}
.exp-card ul{list-style:none;display:grid;gap:7px;margin-top:2px}
.exp-card li{position:relative;padding-left:20px;font-size:.85rem;color:var(--tinta)}
/* El punto es un pseudoelemento y no una viñeta para poder teñirlo sin pelear
   con el estilo por defecto de la lista. */
.exp-card li::before{content:"";position:absolute;left:4px;top:.5em;width:6px;height:6px;
  border-radius:50%;background:var(--marca)}
.exp-card .btn{margin-top:auto;align-self:flex-start}

.exp-pedir{display:grid;gap:30px;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  align-items:start}
@media (max-width:820px){ .exp-pedir{grid-template-columns:1fr} }
.exp-intro p{color:var(--tenue);font-size:.94rem;line-height:1.6}
.exp-form select,.exp-form textarea{width:100%;min-width:0;padding:12px 14px;
  font-family:inherit;font-size:.92rem;color:var(--tinta);background:var(--papel);
  border:1px solid var(--linea);border-radius:12px;transition:border-color var(--t)}
.exp-form textarea{resize:vertical;line-height:1.5}
.exp-form select:focus,.exp-form textarea:focus{outline:0;border-color:var(--marca)}

/* El campo trampa. No usa display:none: hay robots que saltan justamente lo
   que está oculto de esa forma. Queda en el documento, fuera de la pantalla y
   fuera del recorrido del tabulador. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── La lista de correo, en el pie ──────────────────────────────────── */

/* Para un lector de pantalla, no para la vista: la etiqueta existe aunque el
   campo muestre sólo el placeholder, que es texto de ejemplo y no un nombre. */
.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Una franja propia encima del pie, no una columna más dentro de él.
   Metida como sexta columna, el campo de correo y el botón no cabían en los
   200px que mide cada una — y peor: estrechaba a las otras cuatro, con lo que
   el botón de WhatsApp de «Contacto», que antes entraba justo, empezó a
   desbordarse. Una caja que se agranda a costa de sus vecinas no es una caja
   que quepa. */
.pie-lista{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 34px;
  padding:0 0 26px; margin:0 0 30px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.pie-lista > *{flex:1 1 280px; min-width:0}
.pie-lista h3{margin:0}
.pie-lista p{margin:0}
.pie-sus{display:flex; gap:8px; margin:12px 0 0; flex-wrap:wrap}
.pie-sus-campo{flex:1 1 170px; min-width:0}
.pie-sus input[type=email]{
  width:100%; padding:11px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08); color:#fff; font:inherit; font-size:.92rem;
}
.pie-sus input[type=email]::placeholder{color:rgba(255,255,255,.55)}
.pie-sus input[type=email]:focus{outline:2px solid #fff; outline-offset:1px}
.pie-sus .btn{flex:0 0 auto}
.pie-mini{font-size:.78rem; opacity:.62; margin:9px 0 0; line-height:1.5}
.pie-sus-aviso{
  margin:0; padding:10px 13px; border-radius:12px; font-size:.88rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
}
.pie-sus-aviso.mal{background:rgba(255,120,120,.16); border-color:rgba(255,150,150,.4)}
.cinta-exp{border-color:var(--marca-cl);color:var(--marca-osc);font-weight:600}
.cinta-exp:hover{background:var(--marca-tenue)}
.cinta-exp svg{color:var(--marca)}
.cinta-exp.on svg{color:#fff}

/* La insignia de «cambiar foto» tenía el mismo tamaño que el adorno de socio y
   se confundía con él. Un poco más grande y con anillo blanco se lee como un
   botón encima de la foto, que es lo que es. */
.av-lapiz{width:26px;height:26px;box-shadow:0 2px 6px -2px rgba(51,37,63,.5)}
.av-caja{cursor:pointer}
.av-caja:focus-within .av-lapiz{transform:scale(1.1)}

/* ── El − n + de la tarjeta ──────────────────────────────────
   Ocupa el mismo lugar que el botón «Agregar» y con la misma altura, para que
   la tarjeta no dé un salto al aparecer. Es lo que evita tener que entrar a la
   ficha o al carrito sólo para llevar dos botellas. */
.prod-add{margin-top:auto}
.tar-paso{display:flex;align-items:center;gap:8px;margin:0 14px 14px}
.tar-paso[hidden]{display:none}
.tar-paso .paso{flex:none;width:40px;height:42px;border-radius:12px;
  border:1.5px solid var(--marca);background:var(--marca-tenue);color:var(--marca-osc);
  font-size:1.15rem;font-weight:600;font-family:inherit;cursor:pointer;line-height:1;
  display:grid;place-items:center;transition:var(--t)}
.tar-paso .paso:hover:not(:disabled){background:var(--marca);color:#fff}
.tar-paso .paso:active:not(:disabled){transform:scale(.94)}
.tar-paso .paso:disabled{opacity:.4;cursor:not-allowed;border-color:var(--linea);
  background:transparent;color:var(--tenue)}
.tar-n{flex:1;text-align:center;font-weight:700;font-size:1.02rem;color:var(--tinta);
  font-variant-numeric:tabular-nums}
@media (max-width:520px){ .tar-paso{margin:0 11px 11px;gap:6px}
  .tar-paso .paso{width:36px;height:38px} }
@media (prefers-reduced-motion:reduce){ .tar-paso .paso:active:not(:disabled){transform:none} }

/* ── Los select ──────────────────────────────────────────────
   La flecha que dibuja el sistema no se puede alinear ni teñir, y al lado de
   los campos de texto —que sí están estilados— se ve como de otro formulario.
   Se apaga y se pone una propia, del color de la marca. El padding derecho es
   el que impide que un año largo quede debajo de la flecha. */
.tienda-sel,.form-cuenta select,.cumple-campos select,.exp-form select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:12px 38px 12px 14px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8215A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:15px;
  cursor:pointer}
/* Al abrirse, el borde de la marca y no el azul del sistema. */
.form-cuenta select:focus-visible,.cumple-campos select:focus-visible,
.exp-form select:focus-visible,.tienda-sel:focus-visible{
  outline:0;border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-tenue)}
.cumple-campos select:hover,.exp-form select:hover{border-color:var(--marca-cl)}

/* Redes. Van en el pie y no en la barra: quien está comprando no debería
   encontrarse un enlace que lo saca del sitio antes de terminar. */
.pie-redes{display:flex;gap:10px;margin-top:12px}
.pie-redes a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  transition:var(--t)}
.pie-redes a:hover{background:var(--marca);border-color:var(--marca);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){ .pie-redes a:hover{transform:none} }

/* La franja de «esto ya lo hacemos». Va entre las tres tarjetas y el
   formulario: justo donde alguien decide si vale la pena escribir. */
/* La franja de Vino al Puerto.
   Era rosa pálido con dos líneas de texto y se leía como una nota al pie. Es lo
   contrario de lo que hace: es la prueba de que las catas ya existen y no son
   un servicio inventado para la web. Ahora es una banda oscura —la única de la
   página, así que corta el ritmo y se mira— con la copa de marca de agua y los
   tres datos que alguien quiere antes de ir. */
.exp-prueba{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(115deg,var(--tinta) 0%,#432c4d 45%,var(--marca-osc) 100%)}
/* Un hilo de luz arriba y abajo: separa la banda de lo que viene sin usar un
   borde plano, que sobre fondo oscuro se ve como una grieta. */
.exp-prueba::before,.exp-prueba::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.exp-prueba::before{top:0} .exp-prueba::after{bottom:0}
.exp-marca-agua{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  color:#fff;opacity:.055;pointer-events:none;line-height:0}
@media (max-width:900px){ .exp-marca-agua{display:none} }
.exp-prueba-in{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;padding:34px 20px}
.exp-prueba .exp-eyebrow{margin-bottom:8px}
.exp-prueba strong{display:block;font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.7rem);
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;
  color:#fff;margin-bottom:8px}
.exp-prueba p{color:rgba(255,255,255,.8);font-size:.92rem;line-height:1.6;max-width:44rem}
.exp-prueba p b{color:#fff}
.exp-prueba-txt{min-width:0;flex:1 1 26rem}

/* Los tres datos. Van con separador vertical y no en cajas: son un dato al
   lado del otro, no tres tarjetas. */
.exp-datos{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:18px 0 0;padding:0}
.exp-datos li{display:flex;flex-direction:column;gap:1px;padding-left:14px;
  border-left:2px solid var(--marca)}
.exp-datos b{font-size:.95rem;color:#fff;line-height:1.2}
.exp-datos span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
/* «flex:none» impedía que este bloque se encogiera, así que en el teléfono los
   dos botones empujaban la página a 427 px de ancho y aparecía scroll
   horizontal. Ahora puede encogerse y los botones se apilan. */
.exp-prueba-btns{display:flex;gap:10px;flex-wrap:wrap;flex:0 1 auto;min-width:0}
@media (max-width:560px){
  .exp-prueba-btns{width:100%}
  .exp-prueba-btns .btn{flex:1 1 100%;justify-content:center}
}
/* Sobre la banda oscura el botón de Instagram no puede ser blanco sólido: se
   comería la atención del botón principal, que es el de las fechas. */
.exp-prueba .btn-osc{background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(2px)}
.exp-prueba .btn-osc:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}

/* El select de ordenar el catálogo: mismo tratamiento que el resto, pero con
   forma de píldora porque vive entre chips y no dentro de un formulario. */
.tienda-sel{font-family:inherit;font-size:.86rem;color:var(--tinta);
  background-color:var(--papel);border:1px solid var(--linea);
  border-radius:12px;transition:border-color var(--t),box-shadow var(--t)}
.sel-pill{border-radius:999px;padding:9px 36px 9px 16px;background-position:right 13px center}
.tienda-sel:hover{border-color:var(--marca-cl)}

/* ── «hidden» tiene que ocultar, siempre ─────────────────────
   El navegador oculta [hidden] con display:none, pero esa regla es de su hoja
   por defecto y cualquier clase nuestra que fije display —.btn es inline-flex,
   .edad era flex— le gana y el elemento reaparece. Ya pasó tres veces: la
   puerta de edad que no cerraba, y el botón «Agregar» que se veía junto al
   − 1 + de su propia tarjeta.
   Es de los pocos lugares donde !important es lo correcto: no hay ningún caso
   en que queramos marcar algo como oculto y mostrarlo igual. */
[hidden]{display:none !important}

/* El desvanecido del aviso de éxito. Se va hacia arriba mientras se apaga y
   además cierra su propio alto, así lo de abajo sube sin dar un salto. */
.aviso{transition:opacity .45s ease,transform .45s ease,
  margin .45s ease,padding .45s ease,max-height .45s ease;
  max-height:20rem;overflow:hidden}
.aviso.yendose{opacity:0;transform:translateY(-8px);
  max-height:0;margin-block:0;padding-block:0;border-width:0}
@media (prefers-reduced-motion:reduce){ .aviso{transition:opacity .2s linear} }

/* ── Páginas legales ─────────────────────────────────────────
   Texto largo que hay que poder leer de verdad: una sola columna angosta, tipo
   grande y aire entre párrafos. Un documento legal ilegible cumple con la ley y
   con nadie más. */
.legal{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:38px;align-items:start}
@media (max-width:860px){ .legal{grid-template-columns:1fr;gap:22px} }
.legal-menu{display:grid;gap:2px;position:sticky;top:96px}
@media (max-width:860px){ .legal-menu{position:static;
  display:flex;gap:8px;overflow-x:auto;padding-bottom:6px} }
.legal-lnk{padding:9px 13px;border-radius:10px;font-size:.85rem;color:var(--tenue);
  text-decoration:none;border:1px solid transparent;transition:var(--t);white-space:nowrap}
.legal-lnk:hover{background:var(--marca-tenue);color:var(--marca-osc)}
.legal-lnk.on{background:var(--marca-tenue);border-color:var(--marca-cl);
  color:var(--marca-osc);font-weight:600}

.legal-txt{max-width:44rem;min-width:0}
.ph-legal{background:none;color:var(--tinta);transform:none;padding:0;
  font-size:clamp(1.5rem,3.4vw,2rem)}
.legal-fecha{font-size:.78rem;color:var(--tenue);margin:-12px 0 26px}
.legal-txt h2{font-family:var(--display);font-size:1.12rem;color:var(--tinta);
  margin:30px 0 10px;padding-top:20px;border-top:1px solid var(--linea)}
.legal-txt h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal-txt p{color:var(--tinta);font-size:.95rem;line-height:1.7;margin-bottom:12px}
.legal-txt b{font-weight:600}
.legal-txt ol{margin:0 0 12px 20px;display:grid;gap:9px}
.legal-txt li{font-size:.95rem;line-height:1.65;color:var(--tinta)}
.legal-txt code{background:var(--marca-tenue);padding:1px 6px;border-radius:5px;
  font-size:.88em;color:var(--marca-osc)}
.legal-tabla{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:.9rem}
.legal-tabla th,.legal-tabla td{text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--linea);vertical-align:top;line-height:1.5}
.legal-tabla th{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tenue);font-weight:600}
.legal-pie{margin-top:32px;padding:16px 18px;background:var(--marca-tenue);
  border-radius:12px;font-size:.9rem}

/* Los enlaces legales del pie, en una fila que se parte sola en el teléfono. */
.pie-legales{display:inline-flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
.pie-legales a{color:rgba(255,255,255,.78);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28)}
.pie-legales a:hover{color:#fff;border-color:#fff}
/* La letra chica de la caja. No está escondida: si la regla no se explica en la
   misma pantalla, el cliente la descubre en el total y se siente engañado. */
.caja-fino{color:rgba(255,255,255,.7);font-size:.84rem;line-height:1.55;
  margin-top:10px;max-width:46rem}

/* ── Menú de la cuenta ───────────────────────────────────────
   Sobre <details>, así que se abre sin JavaScript. El triángulo que el
   navegador dibuja solo hay que apagarlo en los dos motores. */
.cuenta-menu{position:relative}
.cuenta-menu > summary{list-style:none;cursor:pointer}
.cuenta-menu > summary::-webkit-details-marker{display:none}
.cuenta-menu > summary::marker{content:""}
.cta-flecha{transition:transform .2s ease;opacity:.7;flex:none}
.cuenta-menu[open] .cta-flecha{transform:rotate(180deg)}
.cta-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:70;min-width:232px;
  background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:6px;
  box-shadow:0 20px 44px -20px rgba(51,37,63,.5);display:grid;gap:1px}
.cta-quien{padding:11px 12px 12px;border-bottom:1px solid var(--linea);margin-bottom:5px}
.cta-quien b{display:block;font-size:.88rem;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cta-quien span{display:block;font-size:.74rem;color:var(--tenue);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cta-pop a,.cta-salir button{display:flex;align-items:center;gap:9px;width:100%;
  padding:10px 12px;border-radius:9px;font-size:.86rem;color:var(--tinta);
  text-decoration:none;background:none;border:0;font-family:inherit;text-align:left;
  cursor:pointer;transition:background var(--t),color var(--t)}
.cta-pop a:hover,.cta-salir button:hover{background:var(--marca-tenue);color:var(--marca-osc)}
.cta-pop svg{flex:none;color:var(--marca)}
.cta-salir{border-top:1px solid var(--linea);margin-top:5px;padding-top:5px}
.cta-salir button{color:var(--marca-osc)}
@media (max-width:520px){ .cta-pop{right:-8px;min-width:210px} }

/* ── Bloque de contacto del pie ──────────────────────────────
   Eran tres líneas de texto subrayado del mismo peso, y la que más se usa
   —WhatsApp— quedaba tapada por las otras dos. Ahora cada dato lleva su ícono
   y WhatsApp es un botón, que es lo que en realidad es. */
/* Las pastillas de 30 px que tenían los íconos empujaban el texto hacia la
   derecha y lo dejaban desalineado con el título de su propia columna: se veía
   como si la columna estuviera corrida. Ahora el ícono es pequeño y se apoya en
   el mismo borde izquierdo que todo lo demás. */
/* El «padding:0» es el que faltaba: list-style:none saca la viñeta pero NO el
   padding-inline-start de 40 px que el navegador le pone a toda lista. Por eso
   el correo y el teléfono aparecían corridos hacia la derecha respecto al
   título de su propia columna, y el bloque entero se leía torcido. */
.pie-datos{list-style:none;margin:0;padding:0;display:grid;gap:8px;margin-bottom:14px}
.pie-datos a{display:flex;align-items:center;gap:9px;text-decoration:none;
  color:rgba(255,255,255,.88);font-size:.9rem;line-height:1.35;
  transition:color var(--t)}
.pie-datos a:hover{color:#fff}
.pd-ic{flex:none;width:17px;height:17px;display:grid;place-items:center;
  color:rgba(255,255,255,.5);transition:color var(--t)}
.pie-datos a:hover .pd-ic{color:var(--marca-cl)}
.pie-datos span:last-child{min-width:0;overflow-wrap:anywhere}

/* El botón de WhatsApp era verde macizo y en un pie oscuro gritaba más que
   cualquier otra cosa de la página, incluido el logo. Ahora es del mismo tipo
   que los otros dos botones del pie —contorno claro— y el verde queda sólo en
   el ícono, que es lo que la gente reconoce sin leer. */
.pie-wa{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;
  border-radius:999px;background:transparent;color:#fff !important;
  border:1px solid rgba(255,255,255,.25);
  font-weight:600;font-size:.84rem;text-decoration:none;white-space:nowrap;
  transition:background var(--t),border-color var(--t)}
.pie-wa svg{color:#25D366}
.pie-wa:hover{background:rgba(37,211,102,.14);border-color:#25D366}

.pie-horario{margin-top:14px;font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.6}

/* Las columnas arrancan todas arriba y con el mismo respiro bajo el título.
   Antes cada una tenía su propio margen y las alturas dispares hacían que el
   bloque entero se leyera torcido. */
.pie-cols{align-items:start}
.pie-cols > div{min-width:0}
.pie p{text-wrap:pretty}
.pie h3{margin-bottom:14px}
.pie-redes{margin-top:14px}
.pie-redes a{width:34px;height:34px;border-radius:10px}

/* ── Banner: una foto por aviso ──────────────────────────────
   Antes la foto era del <section> entero, así que los tres avisos compartían
   fondo. Ahora cada aviso trae el suyo desde el portal, y la foto se pinta en
   una capa detrás del texto en vez de en el fondo del bloque: así puede
   desvanecerse junto con el aviso al que pertenece.

   El velo oscuro va SIEMPRE encima de la foto. Una foto clara con letras
   blancas es un banner ilegible, y eso no puede depender de qué imagen suba
   alguien un martes. */
/* El «inset:-9999px» no es un número al azar: el .hero tiene overflow:hidden,
   así que la capa se recorta exactamente a su borde. Anclarla al slide con
   medidas finas dejaba franjas del degradado arriba y abajo, porque el padding
   del hero cambia con el ancho de la pantalla.

   Y el slide NO lleva position:relative a propósito: sin él, el ::before se
   ancla al .hero —el ancestro posicionado— y cubre la franja entera. */
.bn-slide.con-foto::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  /* Las medidas son exactas, no aproximadas: arriba y abajo se anula el padding
     del .hero —el mismo clamp— y a los lados se sale del .env centrado hasta el
     borde de la ventana. El primer intento usaba inset:-9999px confiando en el
     overflow:hidden del hero, y el resultado fue una caja de veinte mil píxeles:
     «cover» ampliaba la foto tanto que en pantalla se veía un solo píxel
     estirado, indistinguible de un degradado liso. */
  top:calc(-1 * clamp(48px,8vw,92px));
  bottom:calc(-1 * clamp(48px,8vw,92px));
  left:calc(-50vw + 50%); width:100vw;
  background:linear-gradient(105deg,rgba(28,18,34,.90) 0%,rgba(46,26,52,.74) 42%,
             rgba(122,36,84,.48) 100%), var(--foto) center/cover no-repeat}
/* Con foto, la copa decorativa estorba: son dos imágenes peleando. */
.bn-slide.con-foto ~ .bn-puntos{position:relative;z-index:1}

/* ── Mis compras ─────────────────────────────────────────────
   Cada pedido es una tarjeta con su número, su estado y lo que llevaba. El
   estado va en color porque es lo que la persona vino a mirar: si ya salió. */
.seccion-cuenta{margin-top:42px;max-width:640px}
.pedidos{display:grid;gap:14px}
.pedido{background:var(--papel);border:1px solid var(--linea);border-radius:14px;
  overflow:hidden}

/* ── Encabezado del pedido ───────────────────────────────────
   Rejilla de 2×2 y no una fila flex. Con flex, el número, el chip de estado y
   el total peleaban por el ancho, y en 390 px el chip empujaba al número hasta
   partirlo: «VC-26-» / «0002». Acá el número tiene su celda y no se entera de
   lo que pase al lado. */
.ped-h{display:grid;grid-template-columns:1fr auto;gap:2px 14px;
  align-items:baseline;padding:14px 16px;border-bottom:1px solid var(--linea)}
.ped-num{font-size:.95rem;color:var(--tinta);min-width:0;
  overflow-wrap:anywhere}
.ped-total{font-size:1.06rem;color:var(--tinta);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* La fecha y el estado ocupan las dos columnas de la segunda fila: son
   contexto del pedido, no titulares que compitan con el total. */
.ped-meta{grid-column:1 / -1;display:flex;gap:9px;align-items:center;
  flex-wrap:wrap;margin-top:3px}
.ped-meta > span:first-child{font-size:.76rem;color:var(--tenue)}
.ped-estado{display:inline-block;font-size:.68rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;
  border-radius:999px;background:var(--marca-tenue);color:var(--marca-osc)}
.ped-estado.e-entregado{background:rgba(30,127,69,.1);color:#14572f}
.ped-estado.e-anulado{background:var(--linea);color:var(--tenue)}

/* ── Líneas del pedido ───────────────────────────────────────
   El precio unitario va bajo el nombre y no en su propia columna: una tercera
   columna de cifras obliga a decidir cuál de las dos es «el precio», y la que
   importa es el total de la línea, que es la que cuadra con la suma. */
.ped-items{list-style:none;margin:0;padding:12px 16px;display:grid;gap:9px}
.ped-items li{display:flex;gap:10px;align-items:baseline;font-size:.86rem}
.pi-cant{flex:none;color:var(--tenue);font-variant-numeric:tabular-nums;
  min-width:2.2em}
.pi-nom{flex:1;min-width:0;color:var(--tinta);display:grid;gap:1px}
.pi-uni{display:block;font-size:.74rem;color:var(--tenue);
  font-variant-numeric:tabular-nums}
.pi-pre{flex:none;color:var(--tinta);font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* ── La suma ─────────────────────────────────────────────────
   Va siempre, con o sin descuentos, y termina en «Total». Cuando aparecía sólo
   si había algo que restar, dos pedidos seguidos tenían estructura distinta y
   la lista se veía desordenada sin que se supiera por qué. */
.ped-suma{list-style:none;margin:0;padding:12px 16px;display:grid;gap:6px;
  border-top:1px dashed var(--linea);background:var(--piso)}
.ped-suma li{display:flex;justify-content:space-between;gap:12px;
  font-size:.82rem;color:var(--tenue);font-variant-numeric:tabular-nums}
.ped-suma li.baja{color:var(--marca-osc);font-weight:600}
.ped-suma-tot{margin-top:4px;padding-top:8px;border-top:1px solid var(--linea);
  font-size:.92rem !important;font-weight:600;color:var(--tinta) !important}

/* ── El pie ──────────────────────────────────────────────────
   Dos datos con etiqueta, uno por línea. Antes eran dos frases sueltas puestas
   una al lado de la otra, y había que adivinar dónde terminaba la boleta y
   empezaba la dirección. */
.ped-pie{display:grid;gap:6px;padding:12px 16px;
  border-top:1px solid var(--linea)}
.pp-dato{display:flex;gap:10px;align-items:baseline;font-size:.78rem;
  color:var(--tenue)}
.pp-et{flex:none;min-width:4.2rem;font-weight:600;color:var(--tinta-2);
  font-size:.72rem;letter-spacing:.03em}

/* ── Campanita de avisos ─────────────────────────────────────
   Sobre <details>, como el menú de la cuenta: se abre sin JavaScript y se
   maneja con el teclado. El script sólo apaga el punto rojo. */
.campana{position:relative;flex:none}
.campana > summary{list-style:none;cursor:pointer;position:relative;
  width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
  color:var(--tinta);border:1px solid var(--linea);background:var(--papel);
  transition:var(--t)}
.campana > summary::-webkit-details-marker{display:none}
.campana > summary::marker{content:""}
.campana > summary:hover{border-color:var(--marca);color:var(--marca-osc)}
.campana[open] > summary{border-color:var(--marca);color:var(--marca-osc)}
.campana > summary:focus-visible{outline:2px solid var(--marca);outline-offset:2px}

/* El número va arriba a la derecha y en el magenta de la marca. Rojo sería
   alarma, y un aviso de que llegó un vino no es una alarma. */
.cam-n{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--marca);color:#fff;font-size:.66rem;
  font-weight:700;display:grid;place-items:center;
  border:2px solid var(--papel);font-variant-numeric:tabular-nums}

.cam-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:70;
  width:min(340px,calc(100vw - 32px));
  background:var(--papel);border:1px solid var(--linea);border-radius:14px;
  box-shadow:0 20px 44px -20px rgba(51,37,63,.5);overflow:hidden}
.cam-h{padding:12px 15px;border-bottom:1px solid var(--linea);
  font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue)}
.cam-lista{list-style:none;margin:0;padding:0;max-height:min(60vh,400px);overflow-y:auto}
.cam-it{display:flex;gap:11px;padding:12px 15px;border-bottom:1px solid var(--linea)}
.cam-it:last-child{border-bottom:0}
/* El no leído se marca con el fondo, no con negrita: la negrita en un título
   que ya es negrita no se nota. */
.cam-it.nuevo{background:var(--marca-tenue)}
.cam-ic{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--linea);color:var(--tinta)}
.cam-ic.t-oferta{background:var(--marca);color:#fff}
.cam-ic.t-pedido{background:rgba(30,127,69,.12);color:#14572f}
.cam-txt{min-width:0;flex:1}
.cam-txt b{display:block;font-size:.85rem;line-height:1.35;color:var(--tinta)}
.cam-txt p{margin:3px 0 0;font-size:.78rem;line-height:1.45;color:var(--tenue)}
.cam-txt > a{display:inline-block;margin-top:5px;font-size:.78rem;font-weight:600;
  color:var(--marca-osc)}
.cam-fecha{display:block;margin-top:5px;font-size:.7rem;color:var(--tenue)}
/* ── En el teléfono, el panel sube desde abajo ────────────────
   Colgarlo del ícono no funciona en una pantalla angosta: con «right» negativo
   se salía por el costado y aparecía scroll horizontal en toda la tienda —427
   px de contenido en una ventana de 390—, y con «right:0» se cortaba por la
   izquierda, porque la campanita vive cerca del borde derecho y el panel es más
   ancho que lo que queda a su izquierda.

   Anclarlo al borde inferior de la ventana resuelve las dos cosas y además es
   el gesto que la gente ya conoce de cualquier aplicación: la hoja que sube. No
   hay que calcular el alto de la barra, que en el teléfono cambia según si el
   buscador cabe en la misma fila. */
@media (max-width:560px){
  .campana[open] > summary::after{content:"";position:fixed;inset:0;z-index:69;
    background:rgba(28,18,34,.45);backdrop-filter:blur(1.5px)}
  .cam-pop{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;
    border-radius:18px 18px 0 0;border-bottom:0;
    box-shadow:0 -14px 40px -16px rgba(28,18,34,.55);
    padding-bottom:env(safe-area-inset-bottom,0px);
    animation:cam-sube .22s ease}
  .cam-lista{max-height:min(66vh,440px)}
  /* Un tirador, para que se lea como una hoja que se puede cerrar. */
  .cam-h{position:relative;padding-top:20px;text-align:center}
  .cam-h::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:999px;background:var(--linea)}
}
@keyframes cam-sube{ from{transform:translateY(14px);opacity:.6} to{transform:none;opacity:1} }
@media (prefers-reduced-motion:reduce){ .cam-pop{animation:none} }

/* ── Barra de compra pegada abajo, en el teléfono ─────────────
   En una ficha larga el botón de comprar queda tres pantallazos más arriba, y
   volver a buscarlo es donde se pierde la venta. Aparece sólo cuando el botón
   original ya no está a la vista: si se viera siempre, taparía contenido justo
   cuando la persona todavía está decidiendo. */
.cta-fija{position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:none;align-items:center;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--papel);border-top:1px solid var(--linea);
  box-shadow:0 -8px 24px -14px rgba(28,18,34,.5);
  animation:cta-sube .2s ease}
@media (max-width:760px){ .cta-fija{display:flex} }
.cta-fija[hidden]{display:none}
.cf-precio{flex:1;min-width:0}
.cf-precio b{display:block;font-family:var(--display);font-weight:500;font-size:1.25rem;
  color:var(--tinta);line-height:1.1;font-variant-numeric:tabular-nums}
.cf-precio s{font-size:.78rem;color:var(--tenue)}
.cta-fija .btn{flex:none;padding:12px 22px}
@keyframes cta-sube{ from{transform:translateY(100%)} to{transform:none} }
@media (prefers-reduced-motion:reduce){ .cta-fija{animation:none} }
/* Aire al final de la página para que la barra no tape el pie. */
@media (max-width:760px){ body:has(.cta-fija:not([hidden])) .pie{padding-bottom:84px} }

/* ── Ir a pagar ──────────────────────────────────────────────── */
.ir-pagar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:20px}
.btn-grande{padding:15px 30px;font-size:.98rem}
@media (max-width:560px){ .ir-pagar .btn{flex:1 1 100%;justify-content:center} }

/* ── Checkout ────────────────────────────────────────────────
   Dos columnas en el escritorio y una sola en el teléfono, con el resumen
   arriba: en una pantalla angosta, pedir la tarjeta antes de mostrar cuánto se
   va a cobrar es pedirle a alguien que firme sin leer. */
.ck{display:grid;gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  align-items:start}
@media (max-width:880px){
  .ck{grid-template-columns:1fr}
  .ck-resumen{order:-1}
}
.ck-datos h3,.ck-resumen h3{font-size:1.05rem;color:var(--tinta);margin-bottom:14px}
.ck-resumen{background:var(--papel);border:1px solid var(--linea);border-radius:16px;
  padding:20px;position:sticky;top:96px}
@media (max-width:880px){ .ck-resumen{position:static} }
.ck-items{list-style:none;margin:0 0 12px;padding:0 0 12px;display:grid;gap:7px;
  border-bottom:1px solid var(--linea)}
.ck-items li{display:flex;gap:10px;align-items:baseline;font-size:.85rem}
.ck-suma{list-style:none;margin:0;padding:0 0 12px;display:grid;gap:6px;
  border-bottom:1px solid var(--linea)}
.ck-suma li{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;
  color:var(--tenue);font-variant-numeric:tabular-nums}
.ck-suma li.baja{color:var(--marca-osc);font-weight:600}
.ck-total{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;padding:14px 0 4px}
.ck-total span{font-size:.9rem;color:var(--tinta);font-weight:600}
.ck-total b{font-family:var(--display);font-weight:500;font-size:1.6rem;
  color:var(--tinta);font-variant-numeric:tabular-nums}

/* El Brick tarda un instante en dibujarse. Sin este alto mínimo, el resumen
   salta hacia abajo justo cuando la persona iba a apretar. */
#ck-pago{min-height:320px;margin-top:14px}
.ck-aviso{margin-top:12px;padding:12px 14px;border-radius:11px;font-size:.86rem;
  line-height:1.5}
.ck-aviso.mal{background:var(--marca-tenue);color:var(--marca-osc);
  border:1px solid var(--marca-cl)}
.ck-aviso.ok{background:rgba(30,127,69,.08);color:#14572f;
  border:1px solid rgba(30,127,69,.25)}
.ck-seguro{display:flex;gap:8px;align-items:flex-start;margin-top:14px;
  font-size:.76rem;color:var(--tenue);line-height:1.5}
.ck-seguro svg{flex:none;margin-top:2px;color:var(--ok,#1E7F45)}

/* ── Gracias ─────────────────────────────────────────────────── */
.gracias{max-width:560px;margin:0 auto;text-align:center}
.gr-tic{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 18px;background:rgba(30,127,69,.1);color:#1E7F45}
.gracias h1{margin-bottom:8px}
.gr-num{font-size:1rem;color:var(--tinta);margin-bottom:6px}
.gracias > p{color:var(--tenue);font-size:.94rem;line-height:1.6}
.gr-caja{background:var(--papel);border:1px solid var(--linea);border-radius:16px;
  padding:18px 20px;margin:24px 0;text-align:left}
.gr-caja .ped-items,.gr-caja .ped-suma{padding-inline:0}
.gr-datos{display:grid;gap:14px;text-align:left;margin-bottom:26px}
.gr-datos p{font-size:.86rem;color:var(--tenue);line-height:1.6}
.gr-datos b{color:var(--tinta)}

/* La descripción del producto en la ficha.
   Ancho de lectura limitado a propósito: una línea de 110 caracteres cansa y
   se pierde el renglón al volver. El borde de la izquierda la separa del
   precio y del botón sin necesidad de una caja. */
.prod-desc{margin:22px 0 4px;padding-left:16px;border-left:3px solid var(--marca-tenue);
  color:var(--tinta-2);font-size:.97rem;line-height:1.68;max-width:38rem}
.prod-desc + .datos{margin-top:22px}

/* ── Galería de la ficha ─────────────────────────────────────────
   La foto grande manda y las miniaturas van debajo, no al costado: en el
   teléfono una columna lateral deja la botella del tamaño de un sello. */
/* Con galería, la foto grande arriba y las miniaturas abajo. El relleno lo pone
   la fila de miniaturas y no el cajón: si lo pusiera el cajón, volvería el
   marco alrededor de la foto que este cambio vino a sacar. */
.ficha-foto.con-galeria{display:flex; flex-direction:column; gap:0}
.ficha-foto.con-galeria > img{min-height:280px}
.ficha-foto .gal{padding:14px 16px 16px}
.gal{display:flex; gap:9px; flex-wrap:wrap; justify-content:center}
.gal-m{display:block; border:1px solid var(--linea); border-radius:11px; padding:4px;
  background:#fff; line-height:0; transition:var(--t)}
.gal-m img{width:62px; height:62px; object-fit:contain; display:block}
.gal-m:hover{border-color:var(--marca-cl)}
/* La foto elegida se marca con el borde de marca Y con un anillo: sólo el color
   deja fuera a quien no lo distingue. */
.gal-m.on{border-color:var(--marca); box-shadow:0 0 0 2px var(--marca-tenue)}
.gal-m:focus-visible{outline:2px solid var(--marca); outline-offset:2px}
@media (max-width:520px){ .gal-m img{width:54px; height:54px} }

/* ── Subcategorías ───────────────────────────────────────────────
   Píldoras, no cintas con ícono: son un segundo nivel y tienen que verse más
   livianas que la barra de arriba. Si pesaran lo mismo, la página tendría dos
   barras principales compitiendo. */
.subcintas{display:flex;flex-wrap:wrap;gap:8px}
.subcinta{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--linea);background:var(--papel);color:var(--tinta-2);
  font-size:.88rem;text-decoration:none;transition:var(--t);white-space:nowrap}
.subcinta span{font-size:.74rem;color:var(--tenue);font-variant-numeric:tabular-nums}
.subcinta:hover{border-color:var(--marca-cl);color:var(--tinta)}
.subcinta.on{background:var(--marca);border-color:var(--marca);color:#fff}
.subcinta.on span{color:rgba(255,255,255,.75)}
.subcinta:focus-visible{outline:2px solid var(--marca);outline-offset:2px}


/* ══ Catálogo con filtros al costado ══════════════════════════════
   Antes los filtros iban arriba, y eran la TERCERA fila de botones redondos
   debajo de las categorías y las subcategorías. Tres filas parecidas haciendo
   cosas distintas: nadie sabía cuál era cuál. Al costado se leen como lo que
   son —herramientas para acotar la lista de al lado— y los productos quedan
   arriba de todo, que es lo que la gente vino a ver. */
.cat-cuerpo{display:grid;grid-template-columns:232px minmax(0,1fr);gap:30px;
  align-items:start;padding-top:30px;padding-bottom:44px}

/* La columna acompaña el scroll. Con 491 vinos, tener que subir hasta arriba
   para cambiar un filtro es el motivo por el que la gente deja de filtrar.
   El «top» deja libre la barra de arriba, que también es pegajosa. */
.cat-lado{position:sticky;top:86px;max-height:calc(100vh - 106px);overflow-y:auto;
  padding-right:4px}
.cat-lado > summary{display:none}
.cat-lista{min-width:0}
/* Con la columna al lado quedan unos 880px para la grilla. Con el mínimo
   general de 210px eso daba tres tarjetas y una franja vacía a la derecha;
   bajando a 190 entran cuatro y la góndola se ve llena, que es como se ve una
   tienda que tiene surtido. */
.cat-lista .grilla{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.cat-lista .seccion-h{margin-bottom:18px}

.filtros{display:flex;flex-direction:column;gap:16px}
.filtro-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:12px;border-bottom:1px solid var(--linea);
  font-size:.82rem;color:var(--tinta-2)}
.filtro-cab a{color:var(--marca-osc);text-decoration:underline}
.filtro-tit{display:flex;align-items:center;gap:7px;color:var(--tinta);font-size:.76rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.filtro + .filtro{padding-top:16px;border-top:1px solid var(--linea)}
.filtro-n{display:inline-flex;align-items:center;justify-content:center;min-width:1.1rem;height:1.1rem;
  padding:0 5px;border-radius:999px;background:var(--marca);color:#fff;font-size:.66rem;
  letter-spacing:0;font-variant-numeric:tabular-nums}

/* Lista vertical y no píldoras. En 232px las píldoras se cortan en cualquier
   parte y las cuentas quedan bailando; en columna, los nombres se leen de
   corrido y los números se alinean a la derecha, que es como se compara. */
.filtro-chips{display:flex;flex-direction:column;gap:1px;margin-top:8px}
.fchip{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:8px;
  color:var(--tinta-2);font-size:.88rem;text-decoration:none;transition:var(--t);
  min-height:34px;line-height:1.25}
/* La casilla se dibuja con CSS y no es un <input>: esto es un enlace —cambia de
   página— y meterle un checkbox de verdad prometería un formulario que no hay. */
.fchip::before{content:"";flex:none;width:15px;height:15px;border-radius:4px;
  border:1.5px solid var(--linea);background:var(--papel);transition:var(--t)}
.fchip span{margin-left:auto;font-size:.76rem;color:var(--tenue);font-variant-numeric:tabular-nums}
.fchip:hover{background:var(--marca-tenue);color:var(--tinta)}
.fchip:hover::before{border-color:var(--marca-cl)}
.fchip.on{color:var(--marca-osc);font-weight:600}
.fchip.on::before{background:var(--marca);border-color:var(--marca);
  /* El visto se dibuja con un fondo SVG en línea: no hay que cargar nada y se
     ve nítido en cualquier pantalla. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}
.fchip.on span{color:var(--marca-cl)}
.fchip:focus-visible{outline:2px solid var(--marca);outline-offset:1px}

.filtro-mas{margin-top:2px}
.filtro-mas summary{display:inline-flex;align-items:center;min-height:30px;padding:2px 6px;
  list-style:none;cursor:pointer;color:var(--marca-osc);font-size:.82rem;text-decoration:underline}
.filtro-mas summary::-webkit-details-marker{display:none}
.filtro-mas[open] summary{color:var(--tenue)}
.filtro-mas[open] summary::after{content:" — ver menos"}
.filtro-mas .filtro-chips{margin-top:2px}

@media (max-width:900px){
  /* No hay costado: la caja entera se pliega en un botón «Filtrar» y los
     productos quedan a la vista sin hacer scroll. */
  .cat-cuerpo{grid-template-columns:1fr;gap:16px;padding-top:20px}
  .cat-lado{position:static;max-height:none;overflow:visible;padding:0}
  .cat-lado > summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
    padding:11px 18px;border-radius:999px;border:1px solid var(--linea);background:var(--papel);
    color:var(--tinta);font-weight:600;font-size:.92rem;width:max-content}
  .cat-lado > summary::-webkit-details-marker{display:none}
  .cat-lado > summary::after{content:"";width:7px;height:7px;border-right:1.8px solid currentColor;
    border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .cat-lado[open] > summary{border-color:var(--marca);color:var(--marca-osc)}
  .cat-lado[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
  .cat-lado .filtros{margin-top:12px;padding:14px 16px;background:var(--papel);
    border:1px solid var(--linea);border-radius:14px}
  .fchip{min-height:40px}
}
@media (max-width:560px){
  /* El título, la cuenta y el orden se apilaban en tres líneas y empujaban los
     productos. La cuenta y el selector caben juntos en una sola. */
  .cat-lista .seccion-h{gap:10px}
  .cat-lista .seccion-h > div{width:100%;justify-content:space-between}
  .cat-lista .grilla{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}

/* ══ Recetas ══════════════════════════════════════════════════════
   La foto manda: un trago se elige mirándolo. Por eso la tarjeta es foto
   grande arriba y texto corto abajo, al revés de la tarjeta de producto —donde
   lo que decide es el precio—. */
.rec-grilla{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.rec-grilla.chica{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.rec-card{background:var(--papel);border:1px solid var(--linea);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;transition:var(--t)}
.rec-card:hover{border-color:var(--marca-cl);box-shadow:var(--sombra);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){ .rec-card:hover{transform:none} }
.rec-foto{display:block;aspect-ratio:4/3;background:var(--marca-tenue);line-height:0}
.rec-foto img{width:100%;height:100%;object-fit:cover;display:block}
.rec-sinfoto{width:100%;height:100%;display:grid;place-items:center;color:var(--marca-cl)}
.rec-sinfoto.grande{aspect-ratio:4/3;border-radius:16px;background:var(--marca-tenue)}
.rec-cuerpo{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.rec-tit{font-family:var(--display);font-size:1.06rem;font-weight:600;line-height:1.22;
  color:var(--tinta);text-decoration:none;text-wrap:balance}
.rec-tit:hover{color:var(--marca)}
.rec-baja{color:var(--tenue);font-size:.88rem;line-height:1.5;margin:0}
.rec-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:auto;padding-top:6px;
  font-size:.8rem;color:var(--tenue);align-items:center}
.rec-meta span{display:inline-flex;align-items:center;gap:5px}
/* El único dato con color: es el que convierte la receta en una compra. */
.rec-comprable{color:var(--marca);font-weight:600}

/* ── La ficha ──────────────────────────────────────────────────── */
.miga{font-size:.85rem;color:var(--tenue);margin-bottom:18px}
.miga a{color:var(--marca);text-decoration:none}
.miga span{margin:0 6px}
.rec-ficha{display:grid;gap:30px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:860px){ .rec-ficha{grid-template-columns:1fr} }
.rec-ficha-foto{display:flex;flex-direction:column;gap:12px}
.rec-ficha-foto img{width:100%;height:auto;border-radius:16px;display:block;
  border:1px solid var(--linea)}
/* El pie va bajo la foto y en cursiva: es una nota del autor, no parte de la
   receta. Sin cursiva se confunde con la bajada. */
.rec-pie{margin:0;font-size:.87rem;font-style:italic;color:var(--tenue);
  line-height:1.5;text-align:center}
.rec-ficha-txt h1{font-family:var(--display);font-size:clamp(1.7rem,4vw,2.4rem);font-weight:600;
  text-transform:uppercase;line-height:1.06;color:var(--tinta);text-wrap:balance;margin-bottom:10px}
.rec-baja-g{color:var(--tinta-2);font-size:1.02rem;line-height:1.55;margin-bottom:14px}
.rec-intro{color:var(--tinta-2);font-size:.96rem;line-height:1.68;margin:16px 0}
.rec-comprar{margin-top:20px;display:grid;gap:8px}
.rec-comprar .sub{text-align:center}

.rec-bloque{margin-top:40px}
.rec-bloque h2{font-family:var(--display);font-size:1.3rem;font-weight:600;text-transform:uppercase;
  color:var(--tinta);margin-bottom:16px}

/* Los ingredientes: la medida en columna propia y alineada, para poder leerlos
   como una lista de compras y no como un párrafo. */
.rec-ing{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:14px;overflow:hidden;max-width:44rem}
.rec-ing li{display:grid;grid-template-columns:6.5rem 1fr;gap:14px;align-items:baseline;
  padding:12px 16px;background:var(--papel)}
.rec-med{color:var(--tenue);font-size:.88rem;font-variant-numeric:tabular-nums}
.rec-nom{color:var(--tinta)}
.rec-nom a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--marca-cl)}
.rec-nom a:hover{color:var(--marca)}
.rec-precio{color:var(--marca);font-weight:600;font-size:.88rem;margin-left:8px;white-space:nowrap}

.rec-pasos{margin:0;padding-left:1.4rem;display:grid;gap:11px;max-width:44rem;
  color:var(--tinta-2);line-height:1.6}
.rec-pasos li{padding-left:6px}
.rec-pasos li::marker{color:var(--marca);font-weight:600}

/* ── Comentarios ───────────────────────────────────────────────── */
.rec-com-form{display:grid;gap:9px;max-width:40rem;margin-bottom:24px}
.rec-com-form textarea{width:100%;padding:12px 14px;border:1px solid var(--linea);
  border-radius:12px;font-family:inherit;font-size:.95rem;background:var(--papel);
  color:var(--tinta);resize:vertical}
.rec-com-form textarea:focus{outline:0;border-color:var(--marca);
  box-shadow:0 0 0 3px var(--marca-tenue)}
.rec-com-form .btn{justify-self:start}
.rec-com-entrar{background:var(--marca-tenue);border-radius:12px;padding:15px 18px;
  margin-bottom:22px;max-width:40rem}
.rec-com-entrar p{margin:0;color:var(--tinta-2);font-size:.94rem}
.rec-com-entrar a{color:var(--marca);font-weight:600}
.rec-coms{list-style:none;margin:0;padding:0;display:grid;gap:18px;max-width:44rem}
.rec-coms li{border-top:1px solid var(--linea);padding-top:16px}
.rec-com-quien{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.rec-com-quien b{display:block;font-size:.93rem;color:var(--tinta)}
.rec-com-quien .sub{font-size:.78rem}
.rec-coms p{margin:0;color:var(--tinta-2);line-height:1.6}

/* ── Contacto ───────────────────────────────────────────────
   Dos columnas: a la izquierda por qué escribir y por dónde más rápido, a la
   derecha el formulario. En el teléfono se apilan, y el texto va primero: si
   lo que necesitaba era el WhatsApp, lo encuentra sin bajar hasta el final de
   un formulario que no iba a llenar. */
.contacto{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:start}
@media (max-width:840px){ .contacto{grid-template-columns:1fr;gap:26px} }

.contacto-txt h1{margin:0 0 10px}
.contacto-txt p{color:var(--tinta-2);line-height:1.6}
.contacto-rapido{background:var(--piso);border:1px solid var(--linea);border-radius:14px;
  padding:13px 15px;font-size:.92rem}
.contacto-datos{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;font-size:.92rem}
.contacto-datos b{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue);font-weight:700}

.contacto-caja{background:var(--papel);border:1px solid var(--linea);border-radius:18px;
  padding:24px}
@media (max-width:520px){ .contacto-caja{padding:18px;border-radius:14px} }

/* `.form-cuenta` sólo vestía los <input>. Un <select> y un <textarea> sin estas
   dos reglas salían con el estilo de fábrica del navegador, en medio de campos
   con borde redondeado: se veía como un formulario a medio hacer. */
.form-cuenta select,
.form-cuenta textarea{width:100%;min-width:0;padding:12px 14px;border:1px solid var(--linea);
  border-radius:11px;font-family:inherit;font-size:.95rem;background:var(--piso);
  color:var(--tinta);font-weight:400}
.form-cuenta textarea{resize:vertical;min-height:130px;line-height:1.55}
.form-cuenta select:focus,
.form-cuenta textarea:focus{outline:0;border-color:var(--marca);background:var(--papel)}

/* La trampa anti-robots. Fuera de la pantalla y no `display:none`: hay robots
   que saltan lo que está escondido con `display:none` justamente porque saben
   que suele ser una trampa. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Avísame cuando llegue ──────────────────────────────────
   Reemplaza al bloque de comprar en la ficha de un producto agotado, así que
   tiene que pesar lo mismo que pesaba ese: es LA acción de la página, no una
   nota al pie. */
.espera-caja{background:var(--piso);border:1px solid var(--linea);border-radius:16px;
  padding:18px 20px;margin-top:4px}
.espera-t{margin:0 0 6px;font-size:1.02rem}
.espera-p{margin:0 0 12px;color:var(--tinta-2);font-size:.88rem;line-height:1.5}
.espera-p:last-child{margin:10px 0 0}
.espera-form{display:flex;gap:9px;flex-wrap:wrap}
.espera-form input[type=email]{flex:1 1 200px;min-width:0;padding:12px 14px;
  border:1px solid var(--linea);border-radius:11px;font-family:inherit;font-size:.95rem;
  background:var(--papel);color:var(--tinta)}
.espera-form input[type=email]:focus{outline:0;border-color:var(--marca)}
.espera-form .btn{flex:0 0 auto}
@media (max-width:420px){ .espera-form .btn{flex:1 1 100%} }

/* «Volver a pedir», en la tarjeta de cada pedido pasado. Alineado a la derecha
   y con el peso de un botón secundario: es un atajo, no la acción principal de
   la página. */
.ped-repetir{display:flex;justify-content:flex-end;margin-top:12px}
@media (max-width:480px){ .ped-repetir .btn{width:100%;justify-content:center} }

/* ── Reseñas con copas ─────────────────────────────────────────────────
   Las copas son SVG y no el emoji 🍷: el emoji lo dibuja cada sistema a su
   manera —otro color, otro tamaño— y no se puede pintar a medias para un 3,5.
   Acá la media copa es un recorte y se ve igual en todas partes. */
.copas            { display:inline-flex; gap:2px; vertical-align:middle }
.copa             { display:block }
.copa-vacia       { fill:none; stroke:#c9b7bd; stroke-width:1.5 }
.copa-llena       { fill:var(--marca,#9d2449) }
.copas-n          { margin-left:8px; font-size:.9rem; color:var(--gris,#6b6b6b) }

.res-prom         { display:inline-flex; align-items:center }
.res-lista        { list-style:none; margin:0 0 26px; padding:0;
                    display:grid; gap:14px }
.res              { border:1px solid var(--linea,#e8e2e4); border-radius:12px;
                    padding:14px 16px; background:#fff }
.res-h            { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                    margin-bottom:6px }
.res-h b          { font-weight:600 }
.res-h time       { color:var(--gris,#6b6b6b); font-size:.86rem; margin-left:auto }
.res p            { margin:0; line-height:1.55 }
.res-ok           { background:#e8f5ec; color:#15803d; border-radius:999px;
                    padding:2px 10px; font-size:.78rem; font-weight:600 }

.res-aviso        { border-radius:10px; padding:10px 14px; margin:0 0 16px }
.res-aviso.ok     { background:#e8f5ec; color:#15803d }
.res-aviso.mal    { background:#fdecec; color:#b91c1c }

.res-form         { border:1px solid var(--linea,#e8e2e4); border-radius:12px;
                    padding:18px 20px; background:#faf7f8 }
.res-form h3      { margin:0 0 12px; font-size:1.05rem }
.res-campo        { display:block; margin:14px 0 }
.res-campo span   { display:block; margin-bottom:6px; font-weight:600;
                    font-size:.92rem }
.res-campo i      { font-weight:400; color:var(--gris,#6b6b6b) }
.res-campo textarea { width:100%; border:1px solid var(--linea,#e8e2e4);
                    border-radius:10px; padding:10px 12px; font:inherit;
                    resize:vertical }
.res-pie          { display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.res-entrar       { display:flex; align-items:center; gap:14px; flex-wrap:wrap }

/* Las copas para elegir. Los radios van en orden 5→1 en el HTML para que el
   selector «~» pueda pintar las de la izquierda: CSS sólo mira hacia adelante
   entre hermanos, así que el truco es invertir el orden y darle la vuelta con
   flex-direction. Sin una línea de JavaScript, y funciona con el teclado. */
.res-copas-pick   { border:0; padding:0; margin:0; display:flex;
                    flex-direction:row-reverse; justify-content:flex-end;
                    align-items:center; gap:4px }
.res-copas-pick legend { float:left; width:100%; font-weight:600;
                    font-size:.92rem; margin-bottom:6px }
.res-copas-pick input  { position:absolute; opacity:0; width:0; height:0 }
.res-copas-pick label  { cursor:pointer; line-height:0; padding:2px;
                    border-radius:6px }
.res-copas-pick label .copa-llena { fill:#d9cdd1; transition:fill .12s }
.res-copas-pick input:checked ~ label .copa-llena,
.res-copas-pick label:hover .copa-llena,
.res-copas-pick label:hover ~ label .copa-llena { fill:var(--marca,#9d2449) }
.res-copas-pick input:focus-visible + label { outline:2px solid var(--marca,#9d2449);
                    outline-offset:2px }
.vo               { position:absolute; width:1px; height:1px; overflow:hidden;
                    clip:rect(0 0 0 0); white-space:nowrap }

/* Las copas en la tarjeta del catálogo: chicas y sin número, que ahí lo que
   importa es la señal, no el dato. */
.tar-copas        { display:flex; align-items:center; gap:4px; margin-top:4px }
.tar-copas .copas-n { margin-left:2px; font-size:.78rem }