/* ============================================================
   LICORES PALMIRA · Sistema visual
   Paleta oficial: #ef1c25 #f2592a #feb140 #89c93c #399933 + blanco/negro
   Tipografía: Century Gothic (manual) → Jost (web) · DM Sans (texto)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --rojo: #ef1c25;
  --naranja: #f2592a;
  --amarillo: #feb140;
  --verde-claro: #89c93c;
  --verde: #399933;
  --negro: #0b0b0b;
  --carbon: #141414;
  --grafito: #1d1d1f;
  --gris-900: #2a2a2d;
  --gris-700: #55555b;
  --gris-500: #8a8a92;
  --gris-300: #d9d9de;
  --gris-200: #e9e9ee;
  --gris-100: #f4f4f7;
  --blanco: #ffffff;
  --crema: #fbf9f5;

  --bg: #ffffff;
  --bg-alt: #f6f6f8;
  --texto: #141414;
  --texto-suave: #55555b;
  --borde: #e6e6ea;

  --grad-marca: linear-gradient(90deg, #ef1c25 0%, #f2592a 25%, #feb140 50%, #89c93c 75%, #399933 100%);
  --grad-calido: linear-gradient(135deg, #ef1c25, #f2592a 55%, #feb140);
  --grad-fresco: linear-gradient(135deg, #89c93c, #399933);

  --font-display: "Century Gothic", "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sombra-1: 0 1px 2px rgba(10, 10, 10, .06), 0 1px 1px rgba(10, 10, 10, .04);
  --sombra-2: 0 8px 24px -12px rgba(10, 10, 10, .22), 0 2px 6px rgba(10, 10, 10, .05);
  --sombra-3: 0 24px 48px -20px rgba(10, 10, 10, .35);

  --contenedor: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;
  --catbar-h: 52px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: .28s;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--amarillo); color: var(--negro); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lp-ico { display: inline-block; vertical-align: middle; flex: none; }

.contenedor { width: min(100% - 2 * var(--gutter), var(--contenedor)); margin-inline: auto; }
.linea-marca { height: 4px; background: var(--grad-marca); }

/* ---------- 3. Botones ---------- */
.btn {
  --btn-bg: var(--negro); --btn-fg: #fff; --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .01em; white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-bd);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur), color var(--dur), border-color var(--dur);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .45); }
.btn:active { transform: translateY(0); }
.btn--rojo { --btn-bg: var(--rojo); }
.btn--rojo:hover { --btn-bg: #d4141c; }
.btn--amarillo { --btn-bg: var(--amarillo); --btn-fg: var(--negro); }
.btn--amarillo:hover { --btn-bg: #ffbd5c; }
.btn--verde { --btn-bg: var(--verde); }
.btn--verde:hover { --btn-bg: #2f8a2c; }
.btn--wa { --btn-bg: #25d366; --btn-fg: #052e16; }
.btn--wa:hover { --btn-bg: #1fbf5b; }
.btn--blanco { --btn-bg: #fff; --btn-fg: var(--negro); }
.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .55); }
.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-bd: #fff; box-shadow: none; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--negro); --btn-bd: var(--negro); }
.btn--outline:hover { --btn-bg: var(--negro); --btn-fg: #fff; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--icon { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: 13px; font-weight: 600; background: var(--gris-100); color: var(--texto);
  border: 1px solid transparent; transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.chip:hover { background: var(--negro); color: #fff; }

/* ---------- 4. Header ---------- */
[data-component="header"], [data-component="footer"], [data-component="extras"] { display: contents; }
.header {
  position: sticky; top: 0; z-index: 60; background: var(--negro); color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.header__inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  min-height: var(--header-h);
}
.header__logo { display: flex; align-items: center; }
.header__logo img { height: 54px; width: auto; }
.header__logo--mobile { display: none; }
.header__center { display: flex; align-items: center; justify-content: center; }
.header__right { display: flex; align-items: center; gap: 6px; }
.header__nav { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
.header__nav a {
  padding: 8px 12px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  color: rgba(255, 255, 255, .85); transition: background var(--dur), color var(--dur);
}
.header__nav a:hover, .header__nav a.is-active { background: rgba(255, 255, 255, .1); color: #fff; }
.header__nav a.is-active { color: var(--amarillo); }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; color: #fff; transition: background var(--dur), transform var(--dur) var(--ease-out);
}
.icon-btn:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.icon-btn__badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--rojo); color: #fff; font: 700 11px/18px var(--font-display); text-align: center;
  transform: scale(0); transition: transform .25s var(--ease-out);
}
.icon-btn__badge.is-on { transform: scale(1); }
.icon-btn__badge.bump { animation: bump .45s var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.header__wa { margin-left: 6px; }
.header__burger { display: none; }

/* Buscador */
.search { position: relative; width: 100%; max-width: 620px; }
.search__form {
  display: flex; align-items: center; height: 46px; padding: 0 6px 0 16px; border-radius: var(--r-pill);
  background: #fff; color: var(--texto); border: 2px solid transparent;
  transition: box-shadow var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out);
}
.search__form:focus-within { border-color: var(--amarillo); box-shadow: 0 0 0 4px rgba(254, 177, 64, .25); transform: translateY(-1px); }
.search__form .lp-ico { color: var(--gris-500); }
.search__input {
  flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: transparent; font-size: 15px; color: var(--texto);
}
.search__input::placeholder { color: var(--gris-500); }
.search__input:focus { outline: none; }
.search__clear { display: none; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; color: var(--gris-500); }
.search__clear:hover { background: var(--gris-100); color: var(--texto); }
.search.has-text .search__clear { display: inline-flex; }
.search__submit {
  height: 36px; padding: 0 16px; border-radius: var(--r-pill); background: var(--negro); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; transition: background var(--dur);
}
.search__submit:hover { background: var(--rojo); }
.search__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 70;
  background: #fff; color: var(--texto); border-radius: var(--r-lg); box-shadow: var(--sombra-3); border: 1px solid var(--borde);
  opacity: 0; transform: translateY(-6px) scale(.985); pointer-events: none; transform-origin: top center;
  transition: opacity .2s var(--ease-out), transform .22s var(--ease-out);
  max-height: min(70vh, 560px); overflow: auto;
}
.search.is-open .search__panel { opacity: 1; transform: none; pointer-events: auto; }
.search__group { padding: 10px 8px 4px; }
.search__group + .search__group { border-top: 1px solid var(--borde); }
.search__label { padding: 4px 10px 6px; font: 600 11.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-500); }
.search__item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
  transition: background .15s;
}
.search__item:hover, .search__item.is-active { background: var(--gris-100); }
.search__item .bottle { width: 34px; height: 44px; flex: none; }
.search__item-cat {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none;
}
.search__item-main { flex: 1; min-width: 0; }
.search__item-title { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search__item-title mark { background: rgba(254, 177, 64, .45); color: inherit; border-radius: 3px; padding: 0 1px; }
.search__item-sub { font-size: 12.5px; color: var(--texto-suave); }
.search__item-price { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.search__all { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--rojo); }
.search__all:hover { background: var(--gris-100); }
.search__empty { padding: 20px 14px; text-align: center; color: var(--texto-suave); font-size: 14px; }
.search__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 10px; }

/* Barra de categorías */
.catbar { background: var(--carbon); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.catbar__inner { display: flex; align-items: center; gap: 8px; min-height: var(--catbar-h); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 6px 0; }
.catbar__inner::-webkit-scrollbar { display: none; }
.catbar__all {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); flex: none;
  background: var(--rojo); font: 600 13.5px var(--font-display); color: #fff; transition: background var(--dur);
}
.catbar__all:hover { background: #d4141c; }
.catbar__pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); flex: none;
  border: 1px solid rgba(255, 255, 255, .16); font: 600 13.5px var(--font-display); color: rgba(255, 255, 255, .9);
  transition: background var(--dur), border-color var(--dur), color var(--dur), transform var(--dur) var(--ease-out);
}
.catbar__pill .lp-ico { color: var(--pill-color, var(--amarillo)); }
.catbar__pill:hover, .catbar__pill.is-active { background: #fff; color: var(--negro); border-color: #fff; transform: translateY(-1px); }
.catbar__pill:hover .lp-ico, .catbar__pill.is-active .lp-ico { color: var(--pill-color, var(--negro)); }

/* ---------- 5. Hero ---------- */
.hero { padding: 20px 0 8px; }
.hero__slider {
  position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--negro); color: #fff;
  height: clamp(440px, 58vh, 580px); isolation: isolate; box-shadow: var(--sombra-3);
}
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease-in-out); pointer-events: none; }
.hero__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transform: scale(1.06); transition: transform 9s linear; }
.hero__slide.is-active .hero__media img { transform: scale(1); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .66) 42%, rgba(8, 8, 8, .18) 75%, rgba(8, 8, 8, .05) 100%),
    linear-gradient(0deg, rgba(8, 8, 8, .55) 0%, rgba(8, 8, 8, 0) 45%);
}
.hero__content {
  position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 5vw, 64px) clamp(24px, 6vw, 80px); max-width: 720px;
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: 10px; width: max-content; padding: 7px 14px 7px 8px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .14);
  font: 600 13px var(--font-display); letter-spacing: .04em; text-transform: uppercase;
}
.hero__kicker i { display: block; width: 22px; height: 6px; border-radius: 3px; background: var(--grad-marca); }
.hero__title { font-size: clamp(32px, 5vw, 60px); margin-top: 18px; font-weight: 700; letter-spacing: -.02em; }
.hero__title em { font-style: normal; background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__text { margin-top: 16px; font-size: clamp(15px, 1.4vw, 18px); color: rgba(255, 255, 255, .86); max-width: 540px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__slide.is-active .hero__kicker, .hero__slide.is-active .hero__title, .hero__slide.is-active .hero__text, .hero__slide.is-active .hero__ctas {
  animation: subir .8s var(--ease-out) both;
}
.hero__slide.is-active .hero__title { animation-delay: .08s; }
.hero__slide.is-active .hero__text { animation-delay: .16s; }
.hero__slide.is-active .hero__ctas { animation-delay: .24s; }
@keyframes subir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero__nav {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .22); transition: background var(--dur), transform var(--dur) var(--ease-out);
}
.hero__nav:hover { background: var(--rojo); border-color: var(--rojo); transform: translateY(-50%) scale(1.06); }
.hero__nav--prev { left: 18px; }
.hero__nav--next { right: 18px; }
.hero__dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 8px; }
.hero__dot { width: 10px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .4); transition: width .3s var(--ease-out), background .3s; }
.hero__dot.is-active { width: 30px; background: var(--amarillo); }
.hero__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero__pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); background: #fff;
  font: 600 13.5px var(--font-display); box-shadow: var(--sombra-1); border: 1px solid var(--borde); color: var(--texto);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.hero__pill:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.hero__pill .lp-ico { color: var(--pill-color, var(--rojo)); }

/* ---------- 6. Secciones ---------- */
.seccion { padding: clamp(40px, 6vw, 72px) 0; }
.seccion--alt { background: var(--bg-alt); }
.seccion--tight { padding-top: clamp(24px, 4vw, 40px); }
.seccion-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 3vw, 32px); }
.seccion-title { position: relative; }
.seccion-title__kicker { display: flex; align-items: center; gap: 10px; font: 600 12.5px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 8px; }
.seccion-title__kicker::before { content: ""; width: 28px; height: 5px; border-radius: 3px; background: var(--grad-marca); }
.seccion-title h2 { font-size: clamp(24px, 3vw, 36px); }
.seccion-title p { margin-top: 6px; color: var(--texto-suave); max-width: 560px; }
.seccion-head__link { display: inline-flex; align-items: center; gap: 6px; font: 600 14.5px var(--font-display); color: var(--rojo); white-space: nowrap; padding-bottom: 6px; }
.seccion-head__link .lp-ico { transition: transform var(--dur) var(--ease-out); }
.seccion-head__link:hover .lp-ico { transform: translateX(4px); }
.seccion-title--center { text-align: center; }
.seccion-title--center .seccion-title__kicker { justify-content: center; }
.seccion-title--center p { margin-inline: auto; }
.seccion-title--light h2 { color: #fff; }
.seccion-title--light p, .seccion-title--light .seccion-title__kicker { color: rgba(255, 255, 255, .72); }

/* ---------- 7. Carrusel (scroll-snap) ---------- */
.carrusel { position: relative; }
.carrusel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--col, calc((100% - 4 * var(--gap, 18px)) / 5));
  gap: var(--gap, 18px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 8px 2px 18px; margin: -8px -2px -8px; scrollbar-width: none;
}
.carrusel__track::-webkit-scrollbar { display: none; }
.carrusel__track > * { scroll-snap-align: start; }
.carrusel__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--negro); display: grid; place-items: center; box-shadow: var(--sombra-2); border: 1px solid var(--borde);
  transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease-out), opacity var(--dur);
}
.carrusel__btn:hover { background: var(--negro); color: #fff; transform: translateY(-50%) scale(1.06); }
.carrusel__btn--prev { left: -18px; }
.carrusel__btn--next { right: -18px; }
.carrusel__btn[disabled] { opacity: .35; pointer-events: none; }
.carrusel--cats { --col: calc((100% - 5 * var(--gap)) / 6); }
.carrusel--marcas { --col: 180px; }

/* ---------- 8. Tarjeta de categoría ---------- */
.cat-card {
  position: relative; display: block; aspect-ratio: 4 / 3.3; border-radius: var(--r-lg); overflow: hidden; background: var(--carbon); color: #fff;
  box-shadow: var(--sombra-1); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out), filter .5s; filter: saturate(.9); }
.cat-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 8, .12) 0%, rgba(8, 8, 8, .18) 45%, rgba(8, 8, 8, .9) 100%);
  transition: opacity var(--dur);
}
.cat-card__icon {
  position: absolute; z-index: 2; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--cat-color, var(--rojo)); color: #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
  transition: transform var(--dur) var(--ease-out);
}
.cat-card__body { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; }
.cat-card__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.15; }
.cat-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.cat-card__cta { display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px var(--font-display); color: var(--amarillo); opacity: .9; transition: gap var(--dur); }
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-3); }
.cat-card:hover img { transform: scale(1.06); filter: saturate(1.05); }
.cat-card:hover .cat-card__icon { transform: scale(1.08) rotate(-4deg); }
.cat-card:hover .cat-card__cta { gap: 8px; }

/* ---------- 9. Ilustración de botella ---------- */
.bottle { display: block; width: 100%; height: 100%; overflow: visible; }
.bottle text { font-family: var(--font-display); font-weight: 700; }

/* ---------- 10. Tarjeta de producto ---------- */
.product-card {
  position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--borde);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-3); border-color: transparent; }
.product-card__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 16px 20px 6px;
  background: radial-gradient(120% 80% at 50% 95%, #ededf2 0%, #fafafc 60%, #fff 100%);
}
.product-card__media .bottle { height: 100%; max-height: 190px; width: auto; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .18)); transition: transform .5s var(--ease-out); }
.product-card__media img { height: 100%; max-height: 190px; width: auto; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .18)); transition: transform .5s var(--ease-out); }
.cart-item__media img, .search__item img { width: 100%; height: 100%; object-fit: contain; }
.search__item img { width: 34px; height: 44px; flex: none; }
.product-card:hover .product-card__media .bottle, .product-card:hover .product-card__media img { transform: scale(1.05) translateY(-3px); }
.product-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--r-pill);
  font: 700 11px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--negro);
}
.badge--oferta { background: var(--rojo); }
.badge--nuevo { background: var(--verde); }
.badge--vendido { background: var(--amarillo); color: var(--negro); }
.badge--premium { background: linear-gradient(135deg, #1a1a1a, #3a3a3a); color: var(--amarillo); }
.badge--pct { background: var(--naranja); }
.product-card__fav {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--gris-700);
  display: grid; place-items: center; box-shadow: var(--sombra-1); opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur), transform var(--dur) var(--ease-out), color var(--dur), background var(--dur);
}
.product-card:hover .product-card__fav, .product-card__fav.is-on { opacity: 1; transform: none; }
.product-card__fav:hover { color: var(--rojo); }
.product-card__fav.is-on { color: var(--rojo); background: #fff1f1; }
.product-card__fav.is-on svg { fill: currentColor; }
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; gap: 6px; }
.product-card__cat { font: 600 11px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-500); }
.product-card__name { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; line-height: 1.25; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.product-card__pres { font-size: 12.5px; color: var(--texto-suave); }
.product-card__price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.price { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.price--old { font-size: 13.5px; font-weight: 500; color: var(--gris-500); text-decoration: line-through; }
.price--mayor { display: flex; align-items: center; gap: 5px; width: 100%; font: 600 12px var(--font-display); color: var(--verde); }
.stock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--verde); }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock--pocas { color: var(--naranja); }
.stock--agotado { color: var(--gris-500); }
.product-card__actions { display: flex; gap: 8px; margin-top: 10px; }
.product-card__add {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: var(--r-pill);
  background: var(--negro); color: #fff; font: 600 14px var(--font-display); transition: background var(--dur), transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.product-card__add:hover { background: var(--rojo); transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(239, 28, 37, .7); }
.product-card__add.is-added { background: var(--verde); }
.product-card__wa { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #e9fbef; color: #16a34a; transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease-out); }
.product-card__wa:hover { background: #25d366; color: #052e16; transform: translateY(-1px); }

/* Grid de productos (catálogo) */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }

/* ---------- 11. Experiencias / promos ---------- */
.promos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.promo {
  position: relative; display: flex; align-items: flex-end; min-height: 260px; border-radius: var(--r-lg); overflow: hidden; color: #fff; background: var(--carbon);
  box-shadow: var(--sombra-1); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.promo--ancho { grid-column: 1 / -1; min-height: 300px; }
.promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 8, .85) 0%, rgba(8, 8, 8, .5) 50%, rgba(8, 8, 8, .15) 100%); }
.promo__body { position: relative; z-index: 2; padding: clamp(20px, 3vw, 36px); max-width: 520px; }
.promo__title { font-size: clamp(22px, 2.6vw, 32px); }
.promo__text { margin-top: 8px; color: rgba(255, 255, 255, .85); font-size: 15px; }
.promo__cta { margin-top: 16px; }
.promo:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); }
.promo:hover img { transform: scale(1.05); }
.promo__tag { position: absolute; z-index: 2; top: 16px; left: 16px; }

/* ---------- 12. Beneficios ---------- */
.beneficios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.beneficio {
  display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--borde);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.beneficio:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: transparent; }
.beneficio__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--b-color, var(--rojo)); box-shadow: 0 10px 20px -10px var(--b-color, var(--rojo)); }
.beneficio h3 { font-size: 18px; }
.beneficio p { font-size: 14.5px; color: var(--texto-suave); }

/* ---------- 13. Marcas (marquee) ---------- */
.marcas { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marcas__row { display: flex; gap: 14px; width: max-content; animation: marquee 48s linear infinite; }
.marcas__row--rev { animation-direction: reverse; margin-top: 14px; }
.marcas:hover .marcas__row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marca {
  display: flex; align-items: center; justify-content: center; min-width: 190px; height: 76px; padding: 0 22px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--borde); font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-700);
  transition: color var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.marca:hover { color: var(--negro); border-color: var(--negro); transform: translateY(-3px); box-shadow: var(--sombra-2); }
.marca img { max-height: 40px; width: auto; }

/* ---------- 14. Sedes ---------- */
.sedes { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: stretch; }
.sedes__list { display: grid; gap: 14px; }
.sede {
  display: grid; grid-template-columns: 6px 1fr; gap: 16px; padding: 18px 20px 18px 0; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--borde); overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.sede::before { content: ""; background: var(--s-color, var(--rojo)); }
.sede:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.sede__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sede__name { font-size: 19px; }
.sede__type { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }
.sede__badge { flex: none; }
.sede__rows { display: grid; gap: 6px; margin-top: 12px; font-size: 14px; color: var(--texto-suave); }
.sede__row { display: flex; align-items: flex-start; gap: 8px; }
.sede__row .lp-ico { color: var(--s-color, var(--rojo)); margin-top: 1px; }
.sede__actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.sedes__map { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--gris-100); min-height: 380px; border: 1px solid var(--borde); }
.sedes__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.9) contrast(1.02); }
.sedes__map-card { position: absolute; z-index: 2; left: 16px; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .96); box-shadow: var(--sombra-2); font-size: 14px; }
.sedes__map-card b { font-family: var(--font-display); }

/* ---------- 15. Nosotros strip ---------- */
.nosotros-strip { position: relative; color: #fff; background: var(--negro); overflow: hidden; }
.nosotros-strip__bg { position: absolute; inset: 0; }
.nosotros-strip__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.nosotros-strip__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 100% at 20% 50%, rgba(11, 11, 11, .2), rgba(11, 11, 11, .9)); }
.nosotros-strip__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.nosotros-strip h2 { font-size: clamp(26px, 3.2vw, 40px); }
.nosotros-strip p { margin-top: 14px; color: rgba(255, 255, 255, .82); max-width: 560px; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cifra { padding: 18px; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(6px); }
.cifra__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.8vw, 36px); line-height: 1; background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cifra__label { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.familia { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.familia span { padding: 8px 14px; border-radius: var(--r-pill); font: 600 13px var(--font-display); color: #0b0b0b; }

/* ---------- 16. Banda CTA ---------- */
.cta-band { background: var(--grad-marca); color: var(--negro); }
.cta-band__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 44px) 0; }
.cta-band h2 { font-size: clamp(22px, 2.6vw, 32px); }
.cta-band p { margin-top: 6px; color: rgba(0, 0, 0, .72); }
.cta-band__form { display: flex; gap: 8px; background: rgba(255, 255, 255, .92); padding: 6px; border-radius: var(--r-pill); box-shadow: var(--sombra-2); }
.cta-band__form input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border: 0; background: transparent; font-size: 15px; }
.cta-band__form input:focus { outline: none; }

/* ---------- 17. Footer ---------- */
.footer { background: var(--negro); color: rgba(255, 255, 255, .8); padding-top: clamp(40px, 5vw, 64px); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 64px; width: auto; }
.footer__brand p { margin-top: 14px; font-size: 14px; max-width: 300px; }
.footer__social { display: flex; gap: 8px; margin-top: 16px; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; transition: background var(--dur), transform var(--dur) var(--ease-out); }
.footer__social a:hover { background: var(--rojo); transform: translateY(-2px); }
.footer h4 { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.footer__col li + li { margin-top: 9px; }
.footer__col a { font-size: 14.5px; color: rgba(255, 255, 255, .72); transition: color var(--dur), padding-left var(--dur); }
.footer__col a:hover { color: var(--amarillo); padding-left: 4px; }
.footer__contact li { display: flex; gap: 10px; font-size: 14px; align-items: flex-start; }
.footer__contact .lp-ico { color: var(--amarillo); flex: none; margin-top: 2px; }
.footer__pagos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); align-items: center; }
.footer__pagos span:first-child { font: 600 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; margin-right: 6px; color: rgba(255, 255, 255, .55); }
.pago { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .14); font: 600 12.5px var(--font-display); color: #fff; }
.footer__legal { margin-top: 24px; padding: 18px 0 calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.footer__legal-inner { display: grid; gap: 10px; }
.footer__legal b { color: rgba(255, 255, 255, .8); font-weight: 600; }
.footer__legal a { color: rgba(255, 255, 255, .8); }
.footer__legal a:hover { color: var(--amarillo); }
.footer__legal-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }

/* ---------- 18. Flotantes ---------- */
.fab {
  position: fixed; z-index: 55; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), opacity var(--dur);
}
.fab:hover { transform: translateY(-3px) scale(1.04); }
.fab--wa { left: 22px; bottom: 22px; background: #25d366; color: #052e16; }
.fab--wa::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .55); animation: pulso 2.4s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.fab--cart { right: 22px; bottom: 22px; background: var(--negro); }
.fab--cart .icon-btn__badge { top: -2px; right: -2px; }
.fab--top { right: 22px; bottom: 92px; width: 44px; height: 44px; background: #fff; color: var(--negro); border: 1px solid var(--borde); opacity: 0; pointer-events: none; transform: translateY(8px); }
.fab--top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.fab__tip { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: 8px; background: var(--negro); color: #fff; font: 600 12px var(--font-display); white-space: nowrap; opacity: 0; transition: opacity var(--dur); pointer-events: none; }
.fab--wa .fab__tip { right: auto; left: calc(100% + 10px); }
.fab:hover .fab__tip { opacity: 1; }

/* Barra inferior móvil */
.tabbar {
  display: none; position: fixed; z-index: 58; left: 0; right: 0; bottom: 0; background: var(--negro); color: #fff;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .08);
  grid-template-columns: repeat(5, 1fr);
}
.tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 10px; font: 600 10.5px var(--font-display); color: rgba(255, 255, 255, .75); }
.tabbar a.is-active, .tabbar a:hover, .tabbar button:hover { color: var(--amarillo); }
.tabbar .lp-ico { width: 22px; height: 22px; }
.tabbar .icon-btn__badge { top: 0; right: calc(50% - 20px); }
.tabbar__wa { color: #25d366 !important; }

/* ---------- 19. Carrito (drawer) ---------- */
.overlay { position: fixed; inset: 0; z-index: 80; background: rgba(8, 8, 8, .55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.overlay.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; display: flex; flex-direction: column;
  transform: translateX(104%); transition: transform .42s var(--ease-out); box-shadow: var(--sombra-3);
}
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--borde); }
.drawer__head h3 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.drawer__count { font: 600 12px var(--font-display); padding: 3px 9px; border-radius: var(--r-pill); background: var(--gris-100); }
.drawer__body { flex: 1; overflow: auto; padding: 12px 20px; }
.drawer__empty { display: grid; place-items: center; gap: 10px; text-align: center; padding: 48px 12px; color: var(--texto-suave); }
.drawer__empty .lp-ico { color: var(--gris-300); }
.cart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.cart-item__media { width: 56px; height: 68px; display: grid; place-items: center; border-radius: 10px; background: var(--gris-100); padding: 6px; }
.cart-item__name { font: 600 14px var(--font-display); line-height: 1.25; }
.cart-item__pres { font-size: 12px; color: var(--texto-suave); }
.cart-item__price { font: 700 14px var(--font-display); margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cart-item__mayor { font: 600 11px var(--font-display); color: var(--verde); padding: 2px 7px; border-radius: var(--r-pill); background: #ecf8e8; }
.cart-item__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: var(--r-pill); overflow: hidden; }
.qty button { width: 32px; height: 32px; display: grid; place-items: center; transition: background .15s; }
.qty button:hover { background: var(--gris-100); }
.qty span { min-width: 30px; text-align: center; font: 700 14px var(--font-display); }
.cart-item__remove { color: var(--gris-500); display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.cart-item__remove:hover { color: var(--rojo); }
.drawer__foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borde); background: var(--gris-100); }
.drawer__hint { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--texto-suave); margin-bottom: 10px; }
.drawer__hint .lp-ico { color: var(--verde); flex: none; }
.drawer__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.drawer__total span { font-size: 14px; color: var(--texto-suave); }
.drawer__total b { font: 700 24px var(--font-display); }
.drawer__savings { font: 600 12.5px var(--font-display); color: var(--verde); margin-top: -8px; margin-bottom: 10px; }
.drawer__actions { display: grid; gap: 8px; }

/* ---------- 20. Menú móvil ---------- */
.mnav { position: fixed; z-index: 90; top: 0; left: 0; bottom: 0; width: min(360px, 88%); background: #fff; transform: translateX(-104%); transition: transform .42s var(--ease-out); display: flex; flex-direction: column; box-shadow: var(--sombra-3); }
.mnav.is-open { transform: none; }
.mnav__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--negro); }
.mnav__head img { height: 46px; }
.mnav__head .icon-btn { color: #fff; }
.mnav__body { flex: 1; overflow: auto; padding: 10px 10px 20px; }
.mnav__label { padding: 14px 10px 6px; font: 600 11.5px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-500); }
.mnav a.mnav__link { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; font: 600 15px var(--font-display); }
.mnav a.mnav__link:hover { background: var(--gris-100); }
.mnav a.mnav__link .lp-ico { color: var(--link-color, var(--rojo)); }
.mnav__foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borde); display: grid; gap: 8px; }

/* ---------- 21. Puerta de edad ---------- */
.agegate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(6, 6, 6, .92); backdrop-filter: blur(10px); }
.agegate[hidden] { display: none; }
.agegate__card { width: min(460px, 100%); text-align: center; padding: 36px 28px 28px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--sombra-3); animation: subir .6s var(--ease-out) both; }
.agegate__card img { height: 90px; margin: 0 auto 18px; }
.agegate__card h2 { font-size: 26px; }
.agegate__card p { margin-top: 10px; color: var(--texto-suave); font-size: 14.5px; }
.agegate__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.agegate__legal { margin-top: 16px; font-size: 11.5px; color: var(--gris-500); }

/* ---------- 22. Toast ---------- */
.toast { position: fixed; z-index: 120; left: 50%; bottom: 96px; transform: translate(-50%, 20px); padding: 12px 16px; border-radius: var(--r-pill); background: var(--negro); color: #fff; font: 600 14px var(--font-display); display: flex; align-items: center; gap: 10px; box-shadow: var(--sombra-3); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease-out); max-width: calc(100% - 32px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast .lp-ico { color: var(--verde-claro); }

/* ---------- 23. Reveal al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal--stagger.is-visible > * { opacity: 1; transform: none; }
.reveal--stagger.is-visible > :nth-child(1) { transition-delay: .0s; }
.reveal--stagger.is-visible > :nth-child(2) { transition-delay: .07s; }
.reveal--stagger.is-visible > :nth-child(3) { transition-delay: .14s; }
.reveal--stagger.is-visible > :nth-child(4) { transition-delay: .21s; }
.reveal--stagger.is-visible > :nth-child(5) { transition-delay: .28s; }
.reveal--stagger.is-visible > :nth-child(6) { transition-delay: .35s; }
.reveal--stagger.is-visible > :nth-child(n + 7) { transition-delay: .4s; }
html.no-io .reveal, html.no-io .reveal--stagger > * { opacity: 1; transform: none; }

/* ---------- 24. Catálogo ---------- */
.page-head { padding: clamp(28px, 4vw, 44px) 0 8px; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); margin-bottom: 10px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--rojo); }
.catalogo { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; padding-bottom: clamp(40px, 6vw, 72px); }
.filtros { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 18px; }
.filtros__box { padding: 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--borde); }
.filtros__box h4 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.filtros__cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; font: 500 14px var(--font-body); text-align: left; transition: background .15s, color .15s; }
.filtros__cat .lp-ico { color: var(--cat-color, var(--rojo)); }
.filtros__cat small { margin-left: auto; color: var(--gris-500); font-size: 12px; }
.filtros__cat:hover { background: var(--gris-100); }
.filtros__cat.is-active { background: var(--negro); color: #fff; font-weight: 600; }
.filtros__cat.is-active .lp-ico, .filtros__cat.is-active small { color: var(--amarillo); }
.filtros__range { display: grid; gap: 8px; }
.filtros__range label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.filtros__range input { accent-color: var(--rojo); width: 18px; height: 18px; }
.catalogo__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.catalogo__count { font-size: 14px; color: var(--texto-suave); }
.catalogo__count b { color: var(--texto); font-family: var(--font-display); }
.select { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 14px; border-radius: var(--r-pill); border: 1px solid var(--borde); background: #fff; font: 600 14px var(--font-display); }
.select select { border: 0; background: transparent; font: inherit; padding-right: 4px; }
.select select:focus { outline: none; }
.catalogo__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.catalogo__chips .chip { background: var(--negro); color: #fff; }
.catalogo__empty { padding: 60px 20px; text-align: center; color: var(--texto-suave); display: grid; place-items: center; gap: 8px; }
.catalogo__empty .lp-ico { color: var(--gris-300); }
.catalogo__more { display: flex; justify-content: center; margin-top: 28px; }
.filtros__toggle { display: none; }

/* ---------- 25. Nosotros ---------- */
.page-hero { position: relative; color: #fff; background: var(--negro); overflow: hidden; min-height: 380px; display: flex; align-items: center; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 8, .9), rgba(8, 8, 8, .35)); }
.page-hero__inner { position: relative; z-index: 2; padding: clamp(40px, 6vw, 80px) 0; max-width: 720px; }
.page-hero h1 { font-size: clamp(32px, 4.6vw, 54px); }
.page-hero p { margin-top: 14px; font-size: 17px; color: rgba(255, 255, 255, .85); }
.historia { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.historia__text p + p { margin-top: 12px; }
.historia__text p { color: var(--texto-suave); font-size: 16px; }
.historia__img { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--sombra-3); }
.historia__img img { width: 100%; height: 100%; object-fit: cover; }
.historia__tag { position: absolute; left: 18px; bottom: 18px; padding: 12px 16px; border-radius: var(--r-md); background: #fff; color: var(--negro); box-shadow: var(--sombra-2); }
.historia__tag b { display: block; font: 700 26px var(--font-display); line-height: 1; }
.historia__tag span { font-size: 12.5px; color: var(--texto-suave); }
.mvv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mvv__card { padding: 26px; border-radius: var(--r-lg); color: #fff; background: var(--mvv-color, var(--rojo)); min-height: 240px; display: flex; flex-direction: column; gap: 12px; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.mvv__card:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); }
.mvv__card .lp-ico { width: 40px; height: 40px; }
.mvv__card h3 { font-size: 24px; }
.mvv__card p { color: rgba(255, 255, 255, .9); font-size: 15px; }
.mvv__values { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.mvv__values span { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .18); font: 600 13px var(--font-display); }
.equipo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.area { padding: 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--borde); border-top: 5px solid var(--a-color, var(--rojo)); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.area:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.area__num { font: 700 13px var(--font-display); color: var(--a-color, var(--rojo)); }
.area .lp-ico { color: var(--a-color, var(--rojo)); margin: 10px 0 8px; }
.area h3 { font-size: 16px; }
.area p { font-size: 13.5px; color: var(--texto-suave); margin-top: 6px; }
.faq { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.faq details { border: 1px solid var(--borde); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; font: 600 16px var(--font-display); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .lp-ico { transition: transform var(--dur); color: var(--rojo); }
.faq details[open] summary .lp-ico { transform: rotate(45deg); }
.faq details p { padding: 0 18px 16px; color: var(--texto-suave); font-size: 15px; }

/* ---------- 26. Responsive ---------- */
@media (max-width: 1100px) {
  .carrusel__track { --col: calc((100% - 3 * var(--gap)) / 4); }
  .carrusel--cats { --col: calc((100% - 3 * var(--gap)) / 4); }
  .beneficios { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer__col--contacto { grid-column: span 1; }
  .equipo { grid-template-columns: repeat(3, 1fr); }
  .header__nav a { padding: 8px 9px; font-size: 14px; }
}
@media (max-width: 960px) {
  :root { --header-h: 64px; }
  .header__inner { grid-template-columns: auto 1fr auto; gap: 10px; min-height: var(--header-h); }
  .header__logo img { height: 44px; }
  .header__logo { grid-row: 1; grid-column: 1; }
  .header__right { grid-row: 1; grid-column: 3; }
  .header__center { grid-column: 1 / -1; grid-row: 2; padding-bottom: 10px; }
  .header__inner.has-search-row { grid-template-rows: var(--header-h) auto; }
  .header__nav { display: none; }
  .header__burger { display: inline-flex; }
  .header__wa { display: none; }
  .search { max-width: none; }
  .search__form { height: 42px; }
  .search__submit { display: none; }
  .hero { padding-top: 12px; }
  .hero__slider { height: clamp(420px, 70vh, 560px); border-radius: var(--r-lg); }
  .hero__media::after { background: linear-gradient(0deg, rgba(8, 8, 8, .92) 0%, rgba(8, 8, 8, .55) 50%, rgba(8, 8, 8, .15) 100%); }
  .hero__content { justify-content: flex-end; padding: 24px 22px 56px; }
  .hero__nav { display: none; }
  .carrusel__track { --col: calc((100% - 2 * var(--gap)) / 3); }
  .carrusel--cats { --col: calc((100% - 2 * var(--gap)) / 3); }
  .carrusel__btn { display: none; }
  .promos { grid-template-columns: 1fr; }
  .sedes { grid-template-columns: 1fr; }
  .nosotros-strip__inner { grid-template-columns: 1fr; gap: 28px; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .catalogo { grid-template-columns: 1fr; }
  .filtros { position: static; display: none; }
  .filtros.is-open { display: grid; }
  .filtros__toggle { display: inline-flex; }
  .historia { grid-template-columns: 1fr; }
  .mvv { grid-template-columns: 1fr; }
  .tabbar { display: grid; }
  .fab--wa, .fab--cart { display: none; }
  .fab--top { bottom: 84px; }
  body { padding-bottom: 70px; }
  .toast { bottom: 84px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .header__logo img { height: 40px; }
  .icon-btn--user { display: none; }
  .hero__slider { height: clamp(460px, 78vh, 600px); }
  .hero__title { font-size: clamp(28px, 8vw, 40px); }
  .hero__ctas .btn { flex: 1; }
  .hero__pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .hero__pills::-webkit-scrollbar { display: none; }
  .hero__pill { flex: none; }
  .product-card__add { font-size: 13px; gap: 6px; }
  .carrusel__track { --col: 72%; --gap: 12px; }
  .carrusel--cats { --col: 46%; }
  .carrusel__track.carrusel__track--productos { --col: 64%; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-card__body { padding: 10px 12px 12px; }
  .product-card__name { font-size: 14px; }
  .price { font-size: 17px; }
  .product-card__wa { display: none; }
  .beneficios { grid-template-columns: 1fr; }
  .beneficio { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; }
  .beneficio__icon { width: 48px; height: 48px; flex: none; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer__col--contacto { grid-column: 1 / -1; }
  .promo { min-height: 220px; }
  .promo--ancho { min-height: 240px; }
  .equipo { grid-template-columns: 1fr 1fr; }
  .agegate__actions { grid-template-columns: 1fr; }
  .cta-band__form { flex-direction: column; border-radius: var(--r-lg); }
  .cta-band__form input { height: 44px; }
  .seccion-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- 27. Movimiento reducido: solo lo intrusivo ---------- */
@media (prefers-reduced-motion: reduce) {
  .fab--wa::before { animation: none; }
  .marcas__row { animation-duration: 120s; }
  .hero__media img { transition: none; transform: none; }
}

/* ---------- 28. Impresión ---------- */
@media print {
  .header, .catbar, .fab, .tabbar, .drawer, .overlay, .agegate, .cta-band { display: none !important; }
}

/* ============================================================
   29. PAUTA · carrusel de marcas (espacios patrocinados)
   ============================================================ */
.pauta { padding: 18px 0 6px; }
.pauta__wrap { position: relative; }
.pauta__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 2px 10px; margin: -6px -2px -4px;
}
.pauta__track::-webkit-scrollbar { display: none; }
.pauta__btn { top: calc(50% - 14px); }
.pauta__dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.pauta__dot { width: 8px; height: 8px; border-radius: 4px; background: var(--gris-300); transition: width .3s var(--ease-out), background .3s; }
.pauta__dot.is-active { width: 24px; background: var(--rojo); }
.pauta__foot { text-align: center; margin-top: 8px; font-size: 13px; }
.pauta__foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-suave); font-weight: 500; padding: 6px 12px; border-radius: var(--r-pill); transition: color var(--dur), background var(--dur); }
.pauta__foot a:hover { color: var(--rojo); background: var(--gris-100); }

.ad {
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; scroll-snap-align: start; color: #fff; background: var(--carbon);
  box-shadow: var(--sombra-2); isolation: isolate; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.ad:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); }
.ad--color { background: linear-gradient(145deg, var(--c1) 0%, var(--c2) 100%); }
.ad__deco { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(60% 50% at 85% 85%, rgba(255, 255, 255, .22), transparent 70%),
  radial-gradient(45% 40% at 10% 0%, rgba(255, 255, 255, .14), transparent 70%); }
.ad__deco::after { content: ""; position: absolute; right: -18%; bottom: -22%; width: 78%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .14); }
.ad__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.ad--foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 8, 8, .25) 0%, rgba(8, 8, 8, .35) 40%, rgba(8, 8, 8, .92) 100%); }
.ad:hover .ad__bg { transform: scale(1.05); }
.ad__head { position: absolute; z-index: 3; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ad__brand { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); color: var(--negro); font: 700 12px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.ad__tag { padding: 5px 10px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .25); font: 600 10.5px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.ad__body { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ad--color .ad__body { right: 42%; bottom: 0; top: 60px; justify-content: center; }
.ad__kicker { font: 600 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo); }
.ad__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.08; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.ad__text { font-size: 13.5px; color: rgba(255, 255, 255, .86); line-height: 1.4; }
.ad__cta { margin-top: 8px; }
.ad__product { position: absolute; z-index: 2; right: 4%; bottom: 0; top: 14%; width: 44%; display: flex; align-items: flex-end; justify-content: center; }
.ad__product img, .ad__product .bottle { max-height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .45)); transition: transform .6s var(--ease-out); }
.ad:hover .ad__product img, .ad:hover .ad__product .bottle { transform: translateY(-6px) scale(1.03); }
.ad--imagen img:not(.lp-ico) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad--imagen .ad__head { justify-content: flex-end; }
.ad--imagen .ad__brand { display: none; }

/* Página de pauta */
.espacios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.espacio { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--borde); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.espacio:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.espacio--top { border: 2px solid var(--amarillo); }
.espacio > .badge { position: absolute; top: -11px; left: 18px; }
.espacio h3 { font-size: 17px; margin-top: 4px; }
.espacio__precio { font: 700 28px var(--font-display); letter-spacing: -.01em; }
.espacio__precio small { font-size: 13px; font-weight: 500; color: var(--texto-suave); margin-left: 4px; }
.espacio p { font-size: 14px; color: var(--texto-suave); flex: 1; }
.espacio__fmt { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--font-display); color: var(--texto); padding: 6px 10px; border-radius: var(--r-pill); background: var(--gris-100); width: max-content; }
.espacios__pack { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; margin-top: 18px; padding: 28px; border-radius: var(--r-lg); background: var(--negro); color: #fff; }
.espacios__pack h3 { font-size: 26px; margin-top: 6px; }
.espacios__pack p { margin-top: 8px; color: rgba(255, 255, 255, .8); font-size: 15px; }
.espacios__pack .seccion-title__kicker { color: var(--amarillo); }
.espacios__pack-precio { display: grid; gap: 4px; justify-items: start; padding: 20px; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.espacios__pack-precio span { font: 600 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.espacios__pack-precio b { font: 700 38px var(--font-display); background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.espacios__pack-precio small { color: rgba(255, 255, 255, .7); font-size: 13px; }
.espacios__pack-precio .btn { margin-top: 10px; }
.tabla-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--borde); background: #fff; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
.tabla th { font: 600 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); background: var(--gris-100); }
.tabla td:first-child { font-weight: 600; font-family: var(--font-display); white-space: nowrap; }
.tabla tr:last-child td { border-bottom: 0; }
.spec-notas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.spec-notas .beneficio { flex-direction: row; align-items: flex-start; gap: 14px; }
.spec-notas .beneficio__icon { flex: none; width: 48px; height: 48px; }
.muted { color: var(--texto-suave); font-size: 14px; padding: 20px; }
.tabla-titulo { padding: 12px 16px; font: 600 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); border-bottom: 1px solid var(--borde); }

/* ============================================================
   30. CALCULADORA de eventos
   ============================================================ */
.page-hero--calc { min-height: 340px; }
.calc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.calc-step { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px 18px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--borde); }
.calc-step span { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-marca); color: #0b0b0b; font: 700 16px var(--font-display); }
.calc-step b { font-family: var(--font-display); font-size: 15px; }
.calc-step small { font-size: 12.5px; color: var(--texto-suave); }
.calc { display: grid; grid-template-columns: 1fr; gap: 22px; }
.calc-form { padding: clamp(18px, 3vw, 30px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra-2); display: grid; gap: 20px; }
.calc-form__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.campo { display: grid; gap: 8px; }
.campo__label { display: flex; align-items: center; gap: 8px; font: 600 13.5px var(--font-display); }
.campo__label .lp-ico { color: var(--rojo); }
.campo__label small { font-weight: 400; color: var(--texto-suave); }
.campo__input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--borde); background: #fff; font: 500 15px var(--font-body); transition: border-color var(--dur), box-shadow var(--dur); }
.campo__input:focus { outline: none; border-color: var(--amarillo); box-shadow: 0 0 0 4px rgba(254, 177, 64, .25); }
.stepper { display: grid; grid-template-columns: 44px 1fr 44px; height: 48px; border-radius: 12px; border: 1.5px solid var(--borde); overflow: hidden; background: #fff; }
.stepper button { display: grid; place-items: center; background: var(--gris-100); transition: background .15s; }
.stepper button:hover { background: var(--amarillo); }
.stepper input { border: 0; text-align: center; font: 700 18px var(--font-display); min-width: 0; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper input:focus { outline: none; background: #fffbf2; }
.calc-intens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.calc-radio { position: relative; display: block; cursor: pointer; }
.calc-radio input { position: absolute; opacity: 0; }
.calc-radio span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--borde); transition: border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.calc-radio b { font: 700 15px var(--font-display); }
.calc-radio small { font-size: 12.5px; color: var(--texto-suave); }
.calc-radio input:checked + span { border-color: var(--negro); background: var(--negro); color: #fff; }
.calc-radio input:checked + span small { color: rgba(255, 255, 255, .75); }
.calc-radio input:focus-visible + span { box-shadow: 0 0 0 4px rgba(254, 177, 64, .35); }
.calc-licores { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.calc-licor { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; border: 1.5px solid var(--borde); background: #fff; font: 600 13px var(--font-display); color: var(--texto-suave); transition: all var(--dur) var(--ease-out); }
.calc-licor .lp-ico:first-child { color: var(--gris-500); transition: color var(--dur); }
.calc-licor__check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--verde); color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--dur), transform var(--dur) var(--ease-out); }
.calc-licor:hover { border-color: var(--negro); color: var(--texto); transform: translateY(-2px); }
.calc-licor.is-on { border-color: var(--negro); background: #fffaf0; color: var(--texto); }
.calc-licor.is-on .lp-ico:first-child { color: var(--rojo); }
.calc-licor.is-on .calc-licor__check { opacity: 1; transform: scale(1); }
.calc-form__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.calc-form__hint { font-size: 13px; color: var(--texto-suave); }
.calc-out { padding: clamp(18px, 3vw, 30px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra-2); scroll-margin-top: 90px; }
.calc-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; }
.calc-sum__item { padding: 14px; border-radius: 12px; background: var(--negro); color: #fff; display: grid; }
.calc-sum__item b { font: 700 24px var(--font-display); background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; }
.calc-sum__item span { font-size: 12.5px; color: rgba(255, 255, 255, .75); }
.calc-group { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--borde); }
.calc-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--borde); }
.calc-row__media { width: 64px; height: 76px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(120% 80% at 50% 95%, #ededf2, #fafafc 70%); padding: 6px; }
.calc-row__media img, .calc-row__media .bottle { max-height: 100%; width: auto; }
.calc-row__kind { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rojo); }
.calc-row__select { display: block; width: 100%; max-width: 420px; margin-top: 4px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--borde); font: 600 13.5px var(--font-body); background: #fff; }
.calc-row__name { font: 600 15px var(--font-display); margin-top: 4px; }
.calc-row__note { font-size: 12.5px; color: var(--texto-suave); margin-top: 3px; }
.calc-row__right { display: grid; justify-items: end; gap: 6px; }
.calc-row__price { text-align: right; display: grid; }
.calc-row__price b { font: 700 16px var(--font-display); }
.calc-row__price small { font-size: 12px; color: var(--texto-suave); }
.calc-tips { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #eef7ff; font-size: 13.5px; color: #1f3a5f; }
.calc-tips .lp-ico { color: #1f6fd1; flex: none; margin-top: 2px; }
.calc-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--gris-100); }
.calc-total > div:first-child { display: grid; }
.calc-total span { font-size: 13px; color: var(--texto-suave); }
.calc-total b { font: 700 32px var(--font-display); letter-spacing: -.01em; line-height: 1.1; }
.calc-total small { font: 600 12.5px var(--font-display); color: var(--verde); }
.calc-total__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.calc-nota { margin-top: 14px; font-size: 12.5px; color: var(--texto-suave); }

@media (max-width: 1100px) {
  .espacios { grid-template-columns: repeat(2, 1fr); }
  .calc-licores { grid-template-columns: repeat(4, 1fr); }
  .calc-form__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .pauta__track { grid-auto-columns: calc((100% - 18px) / 2); }
  .pauta__btn { display: none; }
  .espacios__pack { grid-template-columns: 1fr; }
  .spec-notas { grid-template-columns: 1fr; }
  .calc-steps { grid-template-columns: 1fr; }
  .calc-step { grid-template-columns: 36px 1fr; }
  .calc-sum { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pauta { padding-top: 12px; }
  .pauta__track { grid-auto-columns: 86%; gap: 12px; }
  .ad { border-radius: var(--r-lg); }
  .ad__title { font-size: 24px; }
  .ad--color .ad__body { right: 38%; }
  .espacios { grid-template-columns: 1fr; }
  .calc-licores { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .calc-licor { padding: 12px 4px; font-size: 12px; }
  .calc-intens { grid-template-columns: 1fr; }
  .calc-form__grid { grid-template-columns: 1fr; }
  .calc-row { grid-template-columns: 52px 1fr; }
  .calc-row__media { width: 52px; height: 64px; }
  .calc-row__right { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; justify-items: start; }
  .calc-row__price { text-align: right; justify-self: end; }
  .calc-total b { font-size: 26px; }
  .calc-total__actions { width: 100%; }
  .calc-total__actions .btn { flex: 1; }
}

/* ============================================================
   31. MENÚ FIJO con desplegables (megabar)
   ============================================================ */
.megabar { position: sticky; top: var(--header-h); z-index: 56; background: var(--carbon); }
.megabar__inner { position: relative; display: flex; align-items: center; gap: 2px; min-height: var(--catbar-h); }
.megabar__item { position: static; }
.megabar__link {
  position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 15px 9px; font: 600 14px var(--font-display); color: rgba(255, 255, 255, .9); white-space: nowrap;
  transition: color var(--dur);
}
.megabar__link > .lp-ico { width: 13px; height: 13px; }
.megabar__link::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 9px; height: 2px; border-radius: 1px; background: var(--amarillo); transform: scaleX(0); transition: transform var(--dur) var(--ease-out); }
.megabar__link:hover, .megabar__item.is-open .megabar__link, .megabar__item.is-active .megabar__link { color: #fff; }
.megabar__link:hover::after, .megabar__item.is-open .megabar__link::after, .megabar__item.is-active .megabar__link::after { transform: scaleX(1); }
.megabar__link .lp-ico { opacity: .7; transition: transform var(--dur); }
.megabar__item.is-open .megabar__link .lp-ico { transform: rotate(180deg); }
.megabar__link--ofertas { color: var(--amarillo); }
.megabar__link--ofertas i { width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); margin: -8px 0 0 2px; }
.megabar__pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--rojo); color: #fff; font: 600 13.5px var(--font-display); white-space: nowrap; transition: transform var(--dur) var(--ease-out), background var(--dur); }
.megabar__pill:hover { transform: translateY(-1px); background: #d4141c; }
.megabar__pill--regalo { background: #7a1f2b; margin-left: auto; }
.megabar__pill--regalo:hover { background: #5e1420; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 70; display: none; grid-template-columns: 380px 1fr; gap: 24px; padding: 22px;
  background: #fff; color: var(--texto); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--sombra-3); border: 1px solid var(--borde); border-top: 0;
}
.megabar__item.is-open .mega { display: grid; animation: megaIn .22s var(--ease-out); }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega__banner .ad--menu { aspect-ratio: 2 / 1; border-radius: var(--r-md); box-shadow: none; }
.mega__banner .ad--menu .ad__title { font-size: 22px; }
.mega__banner .ad--menu .ad__text { font-size: 12.5px; }
.mega__banner .ad--menu .ad__body { right: 40%; top: 50px; padding: 16px; }
.mega__banner .ad--menu .ad__product { width: 38%; top: 12%; }
.mega__banner .ad--menu .ad__cta { min-height: 32px; padding: 0 12px; font-size: 13px; }
.mega__fallback { position: relative; display: block; aspect-ratio: 2 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--carbon); color: #fff; }
.mega__fallback img { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.mega__fallback span { position: absolute; left: 16px; bottom: 14px; display: grid; }
.mega__fallback b { font: 700 20px var(--font-display); }
.mega__fallback small { font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.mega__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; align-content: start; }
.mega__cols--2, .mega__cols--3 { grid-template-columns: repeat(3, 1fr); }
.mega__col { display: grid; align-content: start; gap: 2px; }
.mega__head { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 15px var(--font-display); color: var(--texto); }
.mega__head .lp-ico { color: var(--rojo); }
.mega__link { display: block; padding: 7px 10px; margin-left: -10px; border-radius: 8px; font-size: 14.5px; color: var(--texto-suave); transition: background .15s, color .15s, padding-left .15s; }
.mega__link:hover { background: var(--gris-100); color: var(--texto); padding-left: 14px; }
.mega__link--all { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; font: 600 13.5px var(--font-display); color: var(--rojo); }
.catalogo__subs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.catalogo__subs:empty { display: none; }
.subchip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--borde); background: #fff; font: 600 13.5px var(--font-display); color: var(--texto-suave); transition: all var(--dur); }
.subchip small { font-size: 11.5px; color: var(--gris-500); }
.subchip:hover { border-color: var(--negro); color: var(--texto); }
.subchip.is-active { background: var(--negro); border-color: var(--negro); color: #fff; }
.subchip.is-active small { color: var(--amarillo); }

/* ============================================================
   32. BANNER SELECCIÓN · marca exclusiva con tarjeta de compra
   ============================================================ */
.sel { padding: clamp(18px, 3vw, 36px) 0 4px; }
.sel__frame { position: relative; height: clamp(440px, 40vw, 520px); border-radius: var(--r-xl); overflow: hidden; background: #0b1a2b; color: #fff; box-shadow: var(--sombra-3); }
.sel__slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; pointer-events: none; transition: opacity .8s var(--ease-in-out); }
.sel__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.sel__left { position: relative; padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px) 80px; display: flex; flex-direction: column; justify-content: center; gap: 12px; background: linear-gradient(135deg, #0b1a2b 0%, #10263d 100%); }
.sel__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.sel__seal { display: inline-grid; justify-items: center; gap: 2px; padding: 14px 22px 12px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 18px; position: relative; }
.sel__seal::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px; }
.sel__seal img { height: 30px; width: auto; margin-bottom: 4px; }
.sel__seal b { font: 700 20px var(--font-display); letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.sel__seal small { font: 600 10px var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.sel__title { font-size: clamp(30px, 3.4vw, 46px); font-style: italic; letter-spacing: -.01em; }
.sel__text { font-size: clamp(15px, 1.3vw, 19px); font-style: italic; color: rgba(255, 255, 255, .88); max-width: 520px; }
.sel__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font: 700 17px var(--font-display); color: #fff; width: max-content; transition: gap var(--dur), color var(--dur); }
.sel__more:hover { gap: 10px; color: var(--amarillo); }
.sel__right { position: relative; overflow: hidden; }
.sel__right img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 8s linear; }
.sel__slide.is-active .sel__right img { transform: scale(1); }
.sel__right::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 26, 43, .55), rgba(11, 26, 43, 0) 45%); }
.sel__card {
  position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 340px; max-height: calc(100% - 48px); padding: 14px 16px 14px; border-radius: 20px; background: #fff; color: var(--texto);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); display: grid; gap: 6px;
}
.sel__slide.is-active .sel__card { animation: selCard .7s var(--ease-out) both; }
@keyframes selCard { from { opacity: 0; transform: translate(-50%, -44%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (max-width: 960px) { @keyframes selCard { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } }
.sel__card-media { height: 168px; display: flex; align-items: center; justify-content: center; padding: 4px; overflow: hidden; }
.sel__card-media img, .sel__card-media .bottle { height: 100%; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .2)); }
.sel__card-name { font: 600 15.5px var(--font-display); line-height: 1.25; }
.sel__card-price { font: 700 22px var(--font-display); }
.sel__card-actions { display: flex; align-items: center; gap: 10px; }
.sel__card-actions .qty { height: 46px; border-radius: var(--r-pill); }
.sel__card-actions .qty button { width: 40px; height: 44px; }
.sel__card-actions .qty span { min-width: 36px; font-size: 16px; }
.sel__card-actions .btn { flex: 1; }
.sel__pager { position: absolute; z-index: 4; left: clamp(24px, 4vw, 56px); bottom: 28px; display: flex; align-items: center; gap: 10px; color: #fff; font: 600 15px var(--font-display); }
.sel__pager button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .1); transition: background var(--dur), transform var(--dur) var(--ease-out); }
.sel__pager button:hover { background: var(--rojo); transform: scale(1.06); }
.sel__pager span { min-width: 44px; text-align: center; }

@media (max-width: 1280px) {
  .megabar__link { padding: 15px 7px; font-size: 13.5px; }
  .megabar__link > .lp-ico { display: none; }
  .megabar__pill { padding: 7px 11px; font-size: 13px; }
  .mega { grid-template-columns: 320px 1fr; }
}
@media (max-width: 960px) {
  .megabar { position: static; }
  .megabar__inner { overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 6px 0; }
  .megabar__inner::-webkit-scrollbar { display: none; }
  .megabar__link { padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-pill); font-size: 13.5px; }
  .megabar__link::after { display: none; }
  .megabar__link .lp-ico { display: none; }
  .megabar__pill--regalo { margin-left: 4px; }
  .mega { display: none !important; }
  .sel__frame { height: auto; }
  .sel__slide { position: relative; display: none; grid-template-columns: 1fr; }
  .sel__slide.is-active { display: block; }
  .sel__right { height: 260px; }
  .sel__right::before { background: linear-gradient(0deg, rgba(11, 26, 43, .7), rgba(11, 26, 43, 0) 60%); }
  .sel__card { position: relative; top: auto; left: auto; transform: none; width: auto; margin: -70px 16px 0; }
  .sel__card-media { height: 170px; }
  .sel__left { padding: 22px 20px 70px; }
  .sel__seal { padding: 10px 16px 8px; }
  .sel__seal b { font-size: 16px; }
  .sel__title { font-size: 28px; }
  .sel__pager { left: 20px; bottom: 20px; }
}

/* ============================================================
   33. ESTILO CORPORATIVO v2 (feedback del cliente)
   Títulos más llamativos · carteles tipo poster · categorías con botellas
   · beneficios interactivos · reseñas · ofertas · ficha de producto ·
   Lyra · mayoristas · seguimiento · mapa del equipo
   ============================================================ */
:root { --font-poster: "Anton", "Jost", Impact, sans-serif; }

/* Títulos de sección más llamativos */
.seccion-title__kicker { font-size: 12px; }
.seccion-title__kicker::before { width: 34px; height: 6px; }
.seccion-title h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.02em; line-height: 1.05; }
.seccion-title h2 em { font-style: normal; background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.seccion-title h2 mark { background: var(--amarillo); color: var(--negro); padding: 0 .18em; border-radius: 8px; }
.seccion-title p { font-size: 16px; }
.seccion-head__link { font-size: 15px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--gris-100); color: var(--texto); }
.seccion-head__link:hover { background: var(--negro); color: #fff; }

/* Franja corporativa (títulos sobre color) */
.seccion--marca { background: linear-gradient(135deg, #fff5f5 0%, #fff9ef 55%, #f3fbec 100%); }
.seccion--rojo { background: linear-gradient(135deg, #ef1c25, #f2592a); color: #fff; }
.seccion--rojo .seccion-title h2, .seccion--rojo .seccion-title p, .seccion--rojo .seccion-title__kicker { color: #fff; }
.seccion--rojo .seccion-title__kicker::before { background: #fff; }

/* Carteles tipo poster */
.ad--poster { background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%); }
.ad--poster .ad__deco::after { border-color: rgba(255, 255, 255, .22); width: 110%; right: -40%; bottom: -55%; }
.ad--poster .ad__deco { background: radial-gradient(70% 60% at 100% 100%, rgba(255, 255, 255, .25), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 10px, transparent 10px 22px); }
.poster__text { position: absolute; z-index: 3; left: 20px; right: 42%; top: 62px; bottom: 54px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.poster__badge { width: max-content; max-width: 100%; padding: 6px 12px; border-radius: 8px; background: var(--ac); color: #0b0b0b; font: 700 13px var(--font-display); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
.poster__title { display: flex; flex-direction: column; font-family: var(--font-poster); font-size: clamp(30px, 3vw, 44px); line-height: .98; letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 4px 18px rgba(0, 0, 0, .45); }
.poster__title span { white-space: nowrap; }
.poster__hi { color: var(--ac); font-size: 1.14em; }
.poster__price { font-family: var(--font-poster); font-size: clamp(34px, 3.4vw, 50px); line-height: 1; color: #fff; background: rgba(0, 0, 0, .35); padding: 6px 14px; border-radius: 12px; width: max-content; border: 2px solid var(--ac); }
.poster__note { font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.poster__products { position: absolute; z-index: 2; right: 2%; top: 14%; bottom: 12%; width: 44%; display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.poster__products span { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.poster__products img, .poster__products .bottle { max-height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .5)); transition: transform .6s var(--ease-out); }
.ad--poster-2 .poster__products span:first-child { height: 100%; z-index: 1; }
.ad--poster-2 .poster__products span:last-child { height: 72%; margin-left: -22%; }
.ad--poster:hover .poster__products img, .ad--poster:hover .poster__products .bottle { transform: translateY(-6px) scale(1.03); }
.poster__foot { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 12px var(--font-display); color: rgba(255, 255, 255, .8); }
.poster__foot img { height: 34px; width: auto; }
.pauta__dots { margin-top: 10px; }

/* Categorías compuestas con botellas */
.cat-card--comp { background: linear-gradient(160deg, var(--cat-color) 0%, #141414 115%); }
.cat-card--comp::after { background: linear-gradient(180deg, rgba(8, 8, 8, 0) 40%, rgba(8, 8, 8, .78) 100%); }
.cat-card__bg { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 110%, rgba(255, 255, 255, .25), transparent 70%); }
.cat-card__bottles { position: absolute; left: 10%; right: 10%; top: 10%; bottom: 26%; display: flex; align-items: flex-end; justify-content: center; }
.cat-card__bottles span { height: 100%; display: flex; align-items: flex-end; justify-content: center; transition: transform .6s var(--ease-out); }
.cat-card__bottles img, .cat-card__bottles .bottle { max-height: 100%; width: auto; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .5)); }
.cat-card__bottles--3 span:nth-child(1) { height: 78%; margin-right: -14%; z-index: 1; }
.cat-card__bottles--3 span:nth-child(2) { height: 100%; z-index: 2; }
.cat-card__bottles--3 span:nth-child(3) { height: 78%; margin-left: -14%; z-index: 1; }
.cat-card__bottles--2 span:nth-child(1) { height: 92%; margin-right: -8%; }
.cat-card__bottles--2 span:nth-child(2) { height: 100%; }
.cat-card:hover .cat-card__bottles span { transform: translateY(-6px); }
.cat-card:hover .cat-card__bottles span:nth-child(2) { transform: translateY(-10px) scale(1.04); }
.cat-card--comp .cat-card__name { font-size: 20px; }

/* Promos compuestas */
.promo--comp { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.promo--comp::after { background: linear-gradient(90deg, rgba(8, 8, 8, .45) 0%, rgba(8, 8, 8, .1) 55%, rgba(8, 8, 8, 0) 100%); }
.promo__deco { position: absolute; inset: 0; background: radial-gradient(60% 70% at 90% 90%, rgba(255, 255, 255, .25), transparent 70%); }
.promo__kicker { display: inline-block; margin-bottom: 8px; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .18); font: 600 11.5px var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.promo__products { position: absolute; z-index: 2; right: 3%; top: 10%; bottom: 0; width: 42%; display: flex; align-items: flex-end; justify-content: center; }
.promo__products span { display: flex; align-items: flex-end; height: 100%; }
.promo__products img, .promo__products .bottle { max-height: 100%; width: auto; filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .45)); }
.promo__products span:nth-child(1) { height: 82%; margin-right: -12%; }
.promo__products span:nth-child(2) { height: 100%; z-index: 1; }
.promo__products span:nth-child(3) { height: 82%; margin-left: -12%; }
.promo--comp .promo__body { max-width: 54%; }
.promo--ancho.promo--comp .promo__body { max-width: 50%; }
.promo__title { font-size: clamp(24px, 2.8vw, 36px); }

/* Beneficios interactivos */
.bene-grid, .beneficios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bene-tile { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 26px 18px 22px; border-radius: var(--r-lg); background: #fff; border: 2px solid var(--borde); cursor: pointer; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur), background var(--dur); overflow: hidden; }
.bene-tile__icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: var(--b-color); box-shadow: 0 14px 24px -12px var(--b-color); transition: transform var(--dur) var(--ease-out); }
.bene-tile__title { font: 700 19px var(--font-display); letter-spacing: -.01em; margin-top: 6px; }
.bene-tile__text { font-size: 14px; color: var(--texto-suave); }
.bene-tile__plus { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gris-100); color: var(--texto-suave); transition: transform var(--dur), background var(--dur), color var(--dur); }
.bene-tile__more { display: grid; gap: 10px; justify-items: center; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease-out), opacity .3s, margin .3s; font-size: 13.5px; color: #fff; }
.bene-tile:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: var(--b-color); }
.bene-tile:hover .bene-tile__icon { transform: scale(1.08) rotate(-4deg); }
.bene-tile.is-open { background: var(--b-color); border-color: var(--b-color); color: #fff; }
.bene-tile.is-open .bene-tile__text { color: rgba(255, 255, 255, .85); }
.bene-tile.is-open .bene-tile__icon { background: rgba(255, 255, 255, .2); box-shadow: none; }
.bene-tile.is-open .bene-tile__more { max-height: 220px; opacity: 1; margin-top: 8px; }
.bene-tile.is-open .bene-tile__plus { transform: rotate(45deg); background: rgba(255, 255, 255, .25); color: #fff; }
.bene { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 26px 20px; border-radius: var(--r-lg); color: #fff; }
.bene--rojo { background: linear-gradient(145deg, #ef1c25, #c9121a); } .bene--naranja { background: linear-gradient(145deg, #f2592a, #d6451a); } .bene--amarillo { background: linear-gradient(145deg, #feb140, #e49a22); color: #0b0b0b; } .bene--verde { background: linear-gradient(145deg, #399933, #2c7a28); }
.bene b { font: 700 18px var(--font-display); }
.bene small { font-size: 13.5px; opacity: .9; }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.paso { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 24px 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--borde); }
.paso span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-marca); color: #0b0b0b; font: 700 18px var(--font-display); }
.paso b { font: 700 17px var(--font-display); }
.paso small { font-size: 13.5px; color: var(--texto-suave); }

/* Ofertas de la semana */
.ofertas-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.countdown { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--negro); color: #fff; font: 600 14px var(--font-display); }
.countdown b { font-size: 18px; color: var(--amarillo); }
.countdown .lp-ico { color: var(--amarillo); }

/* Reseñas */
.carrusel--resenas { --col: calc((100% - 2 * var(--gap)) / 3); }
.resena { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra-1); }
.resena__stars i { font-style: normal; color: var(--gris-300); font-size: 18px; }
.resena__stars i.is-on { color: var(--amarillo); }
.resena__text { font-size: 15px; line-height: 1.5; flex: 1; }
.resena__who { display: flex; align-items: center; gap: 10px; }
.resena__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-marca); color: #0b0b0b; font: 700 16px var(--font-display); }
.resena__who b { font-family: var(--font-display); display: block; }
.resena__who small { font-size: 12.5px; color: var(--texto-suave); }

/* Ficha de producto */
.pd { display: grid; grid-template-columns: 420px 1fr; gap: 32px; align-items: start; padding: 10px 0 30px; }
.pd__media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: var(--r-xl); padding: 28px; background: radial-gradient(120% 80% at 50% 95%, #ededf2 0%, #fafafc 60%, #fff 100%); border: 1px solid var(--borde); }
.pd__media img, .pd__media .bottle { max-height: 100%; width: auto; filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .2)); }
.pd__name { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.02em; margin-top: 6px; }
.pd__pres { margin-top: 6px; color: var(--texto-suave); font-size: 14.5px; }
.pd__intro { margin-top: 14px; font-size: 16px; line-height: 1.55; }
.pd__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pd__price .price { font-size: 32px; }
.pd__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pd__actions .qty { height: 50px; border-radius: var(--r-pill); }
.pd__actions .qty button { width: 44px; height: 48px; }
.pd__ficha { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0 0; }
.pd__ficha div { padding: 12px 14px; border-radius: 12px; background: var(--gris-100); }
.pd__ficha dt { font: 600 11.5px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rojo); }
.pd__ficha dd { margin: 3px 0 0; font-size: 14px; }
.pd__cocteles { margin-top: 22px; }
.pd__cocteles h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin-bottom: 10px; }
.pd__cocteles h3 .lp-ico { color: var(--rojo); }
.pd__cocteles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.coctel { padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--borde); border-top: 4px solid var(--amarillo); }
.coctel b { font: 700 15px var(--font-display); }
.coctel p { margin-top: 4px; font-size: 13px; color: var(--texto-suave); }
.pmodal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px; background: rgba(8, 8, 8, .6); backdrop-filter: blur(4px); }
.pmodal[hidden] { display: none; }
.pmodal__box { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--sombra-3); animation: subir .4s var(--ease-out); }
.pmodal__close { position: absolute; top: 12px; right: 12px; z-index: 2; color: var(--negro); background: var(--gris-100); }
.pd--modal { padding: 0; grid-template-columns: 340px 1fr; gap: 24px; }
.product-card__media, .product-card__name { cursor: pointer; }

/* Lyra */
.lyra-fab { position: fixed; z-index: 57; right: 22px; bottom: 92px; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--r-pill); background: #fff; color: var(--negro); box-shadow: var(--sombra-3); border: 1px solid var(--borde); transition: transform var(--dur) var(--ease-out); }
.lyra-fab:hover { transform: translateY(-3px); }
.lyra-fab__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-marca); color: #0b0b0b; font: 700 18px var(--font-display); flex: none; }
.lyra-fab__txt { display: grid; line-height: 1.1; text-align: left; }
.lyra-fab__txt b { font: 700 14px var(--font-display); }
.lyra-fab__txt small { font-size: 11.5px; color: var(--texto-suave); }
.fab--top { bottom: 160px; }
.lyra { position: fixed; z-index: 95; right: 22px; bottom: 22px; width: min(400px, calc(100% - 32px)); height: min(620px, calc(100vh - 60px)); display: flex; flex-direction: column; background: #fff; border-radius: 22px; box-shadow: var(--sombra-3); border: 1px solid var(--borde); overflow: hidden; transform: translateY(20px) scale(.98); opacity: 0; pointer-events: none; transition: transform .3s var(--ease-out), opacity .25s; }
.lyra.is-open { transform: none; opacity: 1; pointer-events: auto; }
.lyra__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--negro); color: #fff; }
.lyra__head > div { flex: 1; display: grid; line-height: 1.15; }
.lyra__head b { font: 700 15px var(--font-display); }
.lyra__head small { font-size: 11.5px; color: rgba(255, 255, 255, .7); }
.lyra__msgs { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--gris-100); }
.lyra__msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; background: #fff; border: 1px solid var(--borde); border-bottom-left-radius: 6px; }
.lyra__msg--yo { align-self: flex-end; background: var(--negro); color: #fff; border-color: var(--negro); border-bottom-left-radius: 16px; border-bottom-right-radius: 6px; }
.lyra__msg .btn { margin-top: 8px; margin-right: 6px; }
.lyra__cards { display: grid; gap: 8px; margin: 10px 0 4px; }
.lyra__card { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: var(--gris-100); }
.lyra__card-media { width: 44px; height: 54px; display: grid; place-items: center; }
.lyra__card-media img, .lyra__card-media .bottle { max-height: 100%; width: auto; }
.lyra__card b { font: 600 13px var(--font-display); display: block; line-height: 1.2; }
.lyra__card small { font-size: 12px; color: var(--texto-suave); }
.lyra__chips { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--borde); }
.lyra__chips::-webkit-scrollbar { display: none; }
.lyra__chips .chip { flex: none; }
.lyra__form { display: flex; gap: 8px; padding: 10px 12px; }
.lyra__form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--borde); font-size: 14px; }
.lyra__form input:focus { outline: none; border-color: var(--amarillo); }
.lyra__legal { margin: 0; padding: 0 12px 10px; font-size: 10.5px; color: var(--gris-500); text-align: center; }
.cta-band__lyra { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .92); box-shadow: var(--sombra-2); }
.cta-band__lyra .lyra-fab__avatar { width: 48px; height: 48px; font-size: 22px; }
.cta-band__lyra b { font: 700 16px var(--font-display); display: block; }
.cta-band__lyra small { font-size: 13px; color: var(--texto-suave); }

/* Mayoristas */
.page-hero--corp { background: linear-gradient(135deg, #0b0b0b, #2a2a2d); }
.page-hero--corp::after { background: linear-gradient(90deg, rgba(8, 8, 8, .92), rgba(239, 28, 37, .35)); }
.page-hero--corp h1 em { font-style: normal; background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero--corta { min-height: 280px; }
.mayor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mayor-card { padding: 28px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra-2); }
.mayor-card--dark { background: var(--negro); color: #fff; border-color: transparent; }
.mayor-card--dark .campo__label { color: #fff; }
.mayor-form { display: grid; gap: 14px; margin-top: 18px; }
.mayor-form__error { padding: 10px 14px; border-radius: 10px; background: #fff1f1; color: var(--rojo); font-size: 13.5px; }
.mayor-bienvenida { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 18px; align-items: center; padding: 24px; border-radius: var(--r-lg); background: var(--negro); color: #fff; }
.mayor-bienvenida h2 { font-size: 26px; }
.mayor-bienvenida p { color: rgba(255, 255, 255, .8); margin-top: 6px; font-size: 14.5px; }
.mayor-asesor { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .08); }
.mayor-asesor .lp-ico { color: var(--amarillo); flex: none; }
.mayor-asesor b { font-family: var(--font-display); display: block; }
.mayor-asesor small { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.tabla--mayor td:first-child { white-space: normal; }

/* Seguimiento */
.seg-form { display: flex; gap: 12px; align-items: flex-end; padding: 22px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra-2); }
.seg-card { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; padding: 18px; border-radius: var(--r-lg); background: var(--gris-100); border: 1px solid var(--borde); }
.seg-card--ok { background: #ecf8e8; border-color: #cfe9c6; }
.seg-card__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--negro); color: #fff; flex: none; }
.seg-card--ok .seg-card__ico { background: #25d366; color: #052e16; }
.seg-card b { font: 700 16px var(--font-display); display: block; }
.seg-card small { font-size: 13.5px; color: var(--texto-suave); }
.seg-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; }
.seg-paso { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 20px 14px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--borde); }
.seg-paso__ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 10px 20px -10px var(--c); }
.seg-paso b { font: 700 15px var(--font-display); }
.seg-paso small { font-size: 12.5px; color: var(--texto-suave); }

/* Mapa del equipo */
.tmap { position: relative; padding-top: 10px; }
.tmap__lines { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 420px; }
.tmap__areas { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.tmap__area { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 18px 12px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--borde); border-top: 5px solid var(--a-color); box-shadow: var(--sombra-1); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.tmap__area:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.tmap__num { font: 700 12px var(--font-display); color: var(--a-color); letter-spacing: .1em; }
.tmap__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--a-color); color: #fff; }
.tmap__area b { font: 700 15px var(--font-display); }
.tmap__area small { font-size: 12.5px; color: var(--texto-suave); }
.tmap__center { position: relative; z-index: 2; width: 220px; margin: 150px auto 0; padding: 18px; border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 4px; background: #fff; border: 6px solid transparent; background-image: linear-gradient(#fff, #fff), var(--grad-marca); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: var(--sombra-3); }
.tmap__center img { width: 120px; }
.tmap__center span { font: 700 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.tmap__clients { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.tmap__client { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-pill); background: var(--negro); color: #fff; }
.tmap__client .lp-ico { color: var(--a-color); flex: none; }
.tmap__client b { font-family: var(--font-display); display: block; }
.tmap__client small { font-size: 12.5px; color: rgba(255, 255, 255, .75); }

/* Historia: composición de botellas (sin fotos de tragos) */
.lineup { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; background: linear-gradient(160deg, #0b0b0b 0%, #2a2a2d 100%); box-shadow: var(--sombra-3); }
.lineup::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 100%, rgba(254, 177, 64, .35), transparent 70%); }
.lineup__row { position: absolute; left: 6%; right: 6%; bottom: 12%; height: 62%; display: flex; align-items: flex-end; justify-content: center; }
.lineup__row span { display: flex; align-items: flex-end; height: 100%; margin: 0 -3%; }
.lineup__row img { max-height: 100%; width: auto; filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .55)); }
.lineup__row span:nth-child(1), .lineup__row span:nth-child(5) { height: 72%; }
.lineup__row span:nth-child(2), .lineup__row span:nth-child(4) { height: 86%; }
.lineup__row span:nth-child(3) { height: 100%; z-index: 1; }
.lineup__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--grad-marca); }

/* Selección v2: colores de la paleta en vez de azul, lado derecho compuesto con la botella real */
.sel__frame { background: #0b0b0b; }
.sel__left { background: linear-gradient(135deg, #0b0b0b 0%, var(--c1, #141414) 130%); }
.sel__right--comp { background: linear-gradient(135deg, var(--c1, #141414) 0%, var(--c2, #333) 100%); }
.sel__right--comp::before { background: radial-gradient(70% 60% at 50% 110%, rgba(255, 255, 255, .3), transparent 70%), linear-gradient(90deg, rgba(11, 11, 11, .35), transparent 40%); }
.sel__right--comp::after { content: ""; position: absolute; right: -10%; top: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .18); }
.sel__big { position: absolute; inset: 8% 4% 0 auto; width: 46%; display: flex; align-items: flex-end; justify-content: center; }
.sel__big img, .sel__big .bottle { max-height: 100%; width: auto; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); transform: scale(1.02); transition: transform 6s linear; }
.sel__slide.is-active .sel__big img { transform: scale(1); }
.sel__kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo); }
.sel__rank { font-style: normal; padding: 3px 8px; border-radius: 6px; background: var(--amarillo); color: #0b0b0b; font: 700 13px var(--font-display); }
.sel__card-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 26px; }
.sel__card-price small { font: 600 12.5px var(--font-display); color: var(--verde); }
.sel__card { left: 48%; }
@media (max-width: 960px) { .sel__right--comp { height: 300px; } .sel__big { inset: 6% 8% 0 auto; width: 60%; } .sel__card { left: auto; } }

/* Calculadora: hero corporativo */
.calc-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #0b0b0b 0%, #7a0f14 60%, #ef1c25 100%); }
.calc-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: end; padding: clamp(36px, 5vw, 64px) 0 0; }
.calc-hero h1 { font-size: clamp(32px, 4.6vw, 54px); }
.calc-hero h1 em { font-style: normal; color: var(--amarillo); }
.calc-hero p { margin-top: 14px; font-size: 17px; color: rgba(255, 255, 255, .88); max-width: 560px; }
.calc-hero__bottles { position: relative; height: 300px; display: flex; align-items: flex-end; justify-content: center; }
.calc-hero__bottles span { display: flex; align-items: flex-end; height: 100%; margin: 0 -4%; }
.calc-hero__bottles img, .calc-hero__bottles .bottle { max-height: 100%; width: auto; filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .55)); }
.calc-hero__bottles span:nth-child(odd) { height: 78%; }
.calc-hero__bottles span:nth-child(2) { height: 100%; z-index: 1; }
.calc-hero__bottles span:nth-child(4) { height: 92%; z-index: 1; }
.calc-hero__pad { padding-bottom: clamp(36px, 5vw, 64px); }

/* Catálogo: cabecera con color de categoría */
.page-head--cat { position: relative; padding: clamp(24px, 3vw, 36px) 0; margin-bottom: 10px; border-radius: 0 0 var(--r-xl) var(--r-xl); color: #fff; background: linear-gradient(135deg, var(--cat-color, #141414), #0b0b0b 120%); }
.page-head--cat .breadcrumb, .page-head--cat .breadcrumb a { color: rgba(255, 255, 255, .75); }
.page-head--cat .seccion-title h1, .page-head--cat .seccion-title p { color: #fff; }
.page-head--cat .seccion-title p { color: rgba(255, 255, 255, .8); }
.page-head--cat .seccion-title__kicker { color: rgba(255, 255, 255, .75); }
.page-head--cat .filtros__toggle { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .6); }

.cta-band__inner { grid-template-columns: 1fr 1fr; }

@media (max-width: 1100px) {
  .pd__cocteles-grid { grid-template-columns: 1fr; }
  .tmap__areas { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .tmap__area { padding: 14px 8px; }
}
@media (max-width: 960px) {
  .bene-grid, .beneficios { grid-template-columns: repeat(2, 1fr); }
  .pd, .pd--modal { grid-template-columns: 1fr; }
  .pd__media { max-width: 420px; margin-inline: auto; }
  .pasos, .seg-pasos { grid-template-columns: repeat(2, 1fr); }
  .mayor-grid { grid-template-columns: 1fr; }
  .mayor-bienvenida { grid-template-columns: 1fr; }
  .tmap__lines { display: none; }
  .tmap__areas { grid-template-columns: repeat(2, 1fr); }
  .tmap__center { margin-top: 20px; }
  .calc-hero__inner { grid-template-columns: 1fr; }
  .calc-hero__bottles { height: 200px; }
  .carrusel--resenas { --col: calc((100% - var(--gap)) / 2); }
  .poster__text { right: 44%; }
  .lyra-fab { right: 14px; bottom: 84px; padding: 6px 12px 6px 6px; }
  .lyra-fab__avatar { width: 36px; height: 36px; font-size: 16px; }
  .lyra { right: 10px; bottom: 80px; width: calc(100% - 20px); height: min(560px, calc(100vh - 110px)); }
  .fab--top { display: none; }
  .cta-band__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .seccion-title h2 { font-size: 26px; }
  .bene-grid, .beneficios { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bene-tile { padding: 18px 12px 16px; }
  .bene-tile__icon { width: 56px; height: 56px; border-radius: 16px; }
  .bene-tile__title { font-size: 15px; }
  .bene-tile__text { font-size: 12.5px; }
  .beneficio { flex-direction: column; }
  .poster__title { font-size: 26px; }
  .poster__price { font-size: 30px; }
  .poster__text { right: 40%; top: 56px; }
  .pasos, .seg-pasos { grid-template-columns: 1fr; }
  .pd__ficha { grid-template-columns: 1fr; }
  .pd__actions .btn { flex: 1; }
  .pmodal { padding: 10px; }
  .pmodal__box { padding: 18px; border-radius: var(--r-lg); }
  .carrusel--resenas { --col: 86%; }
  .seg-form { flex-direction: column; align-items: stretch; }
  .tmap__areas { grid-template-columns: 1fr; }
  .tmap__clients { grid-template-columns: 1fr; }
  .promo--comp .promo__body, .promo--ancho.promo--comp .promo__body { max-width: 60%; }
  .promo__products { width: 38%; }
  .cat-card--comp .cat-card__name { font-size: 17px; }
  .calc-hero__bottles { height: 160px; }
}

/* ============================================================
   34. REDISEÑO v4 (2026-10-07, feedback del cliente vía Miro + referencia de José)
   · Fondo de marca: foto de estantes con botellas (Higgsfield) + formas de COLOR SÓLIDO
     en las esquinas (sin degradados: son bandas con cortes duros)
   · Hoja central blanca (máx. 1300 px), cabecera blanca con logo a color y menú verde
   · Títulos grandes (Jost 800), sin subtítulos · nada de degradados en toda la web
   · Promos sólidas con el logo · cifras con íconos · reseñas de Google
   · Banner Selección sin solapes · Ficha de producto sin desbordes
   · Lyra = mascota 3D de Astronomical AI (assets/img/lyra)
   Las reglas de aquí abajo mandan sobre las de arriba (misma especificidad, van después).
   ============================================================ */
:root {
  --grad-marca: linear-gradient(90deg, #ef1c25 0 20%, #f2592a 20% 40%, #feb140 40% 60%, #89c93c 60% 80%, #399933 80%); /* bloques sólidos, no degradado */
  --grad-calido: #ef1c25;
  --grad-fresco: #399933;
  --contenedor: 1220px;
  --hoja: 1300px;
  --verde-menu: #2f7d2c;
  --lyra: #4fd8f5;
}

/* ---- Fondo de marca (solo se ve en pantallas más anchas que la hoja) ---- */
html { background: #0b0b0b; }
html::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: #0b0b0b url("../assets/img/fondo-botellas.webp") center / cover no-repeat;
}
html::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat;
  /* Solo esquinas (como la referencia): triángulos sólidos con una franja de otro color; el centro de los lados deja ver las botellas */
  background-image:
    linear-gradient(to bottom right, #f2592a 0 42%, transparent calc(42% + 1px)),
    linear-gradient(to bottom right, transparent 47%, #ef1c25 calc(47% + 1px) 53%, transparent calc(53% + 1px)),
    linear-gradient(to top right, #feb140 0 40%, transparent calc(40% + 1px)),
    linear-gradient(to top right, transparent 45%, #89c93c calc(45% + 1px) 51%, transparent calc(51% + 1px)),
    linear-gradient(to bottom left, #ef1c25 0 40%, transparent calc(40% + 1px)),
    linear-gradient(to bottom left, transparent 45%, #feb140 calc(45% + 1px) 51%, transparent calc(51% + 1px)),
    linear-gradient(to top left, #399933 0 42%, transparent calc(42% + 1px)),
    linear-gradient(to top left, transparent 47%, #ef1c25 calc(47% + 1px) 53%, transparent calc(53% + 1px)),
    linear-gradient(rgba(5, 5, 5, .18), rgba(5, 5, 5, .18));
  background-size: 22vw 38vh, 22vw 38vh, 20vw 36vh, 20vw 36vh, 20vw 36vh, 20vw 36vh, 22vw 40vh, 22vw 40vh, 100% 100%;
  background-position: 0 0, 0 0, 0 100%, 0 100%, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 0;
}
body { position: relative; max-width: var(--hoja); min-height: 100vh; margin-inline: auto; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px rgba(0, 0, 0, .65); }
@media (max-width: 1300px) { html::before { background-image: none; } html::after { display: none; } body { box-shadow: none; } }

/* ---- Cabecera blanca con logo a color (referencia de José) ---- */
.linea-marca { height: 5px; }
.header { background: #fff; color: var(--texto); box-shadow: 0 1px 0 var(--borde); }
.header__logo img { height: 60px; }
.header__nav a { color: var(--gris-700); font-weight: 600; }
.header__nav a:hover { background: var(--gris-100); color: var(--negro); }
.header__nav a.is-active { background: transparent; color: var(--rojo); }
.header__nav a[href="mayoristas.html"] { border: 1.5px solid var(--naranja); color: var(--naranja); padding: 7px 14px; }
.header__nav a[href="mayoristas.html"]:hover, .header__nav a[href="mayoristas.html"].is-active { background: var(--naranja); color: #fff; }
.header .icon-btn { color: var(--texto); }
.header .icon-btn:hover { background: var(--gris-100); }
.search__form { background: var(--gris-100); border-color: var(--gris-200); }
.search__form:focus-within { background: #fff; }
.search__submit { background: var(--naranja); color: #fff; }
.search__submit:hover { background: var(--rojo); }
.mnav__head { background: #fff; border-bottom: 1px solid var(--borde); }
.mnav__head .icon-btn { color: var(--texto); }

/* ---- Menú fijo verde ---- */
.catbar, .megabar { background: var(--verde-menu); border-bottom: 0; }
.megabar__link { color: #fff; }
.megabar__link::after { background: var(--amarillo); }
.megabar__link--ofertas { color: var(--amarillo); }
.megabar__pill, .megabar__pill--regalo { background: var(--rojo); }
.megabar__pill:hover, .megabar__pill--regalo:hover { background: #c9121a; }
@media (max-width: 960px) { .megabar__link { border-color: rgba(255, 255, 255, .35); } }

/* ---- Títulos: grandes y llamativos, sin subtítulos ---- */
.seccion-title__kicker { font-size: 12.5px; letter-spacing: .16em; color: var(--gris-700); }
.seccion-title__kicker::before { width: 36px; height: 6px; border-radius: 3px; background: var(--grad-marca); }
.seccion-title h2 { font-size: clamp(30px, 4.2vw, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.seccion-title h2 em, .seccion-title h1 em, .page-hero--corp h1 em, .hero__title em { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--rojo); font-style: normal; }
.seccion-title--light h2 em { color: var(--amarillo); }
.seccion-title--light .seccion-title__kicker { color: rgba(255, 255, 255, .78); }
.seccion-head { align-items: flex-end; }
.seccion-head__aside { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head--cat { background: var(--cat-color, #0b0b0b); border-radius: 0; padding: clamp(28px, 4vw, 44px) 0 clamp(24px, 3vw, 36px); }
.page-head--cat h1 { font-size: clamp(34px, 4.8vw, 58px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; }
.page-head--cat .seccion-title__kicker { color: rgba(255, 255, 255, .8); }
.page-head--cat .seccion-title h1 em { color: var(--amarillo); }

/* ---- Sin degradados en ninguna parte ---- */
.cat-card--comp { background: var(--cat-color); }
.cat-card--comp::after { background: linear-gradient(180deg, transparent 56%, rgba(8, 8, 8, .62) 56%); } /* banda sólida translúcida, corte duro */
.cat-card__bg { display: none; }
.product-card__media, .pd__media, .calc-row__media { background: var(--gris-100); }
.badge--premium { background: #1a1a1a; }
.promo--comp { background: var(--c1); }
.promo--comp::after { background: rgba(8, 8, 8, .25); }
.promo__deco { display: none; }
.nosotros-strip__bg img { opacity: .28; }
.nosotros-strip__bg::after { background: rgba(11, 11, 11, .78); }
.cifra__num { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--c, var(--amarillo)); }
.ad--color, .ad--poster { background: var(--c1); }
.ad__deco, .ad--poster .ad__deco { background: none; }
.ad--foto::before { background: rgba(8, 8, 8, .55); }
.espacios__pack-precio b, .calc-sum__item b { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--amarillo); }
.calc-step span, .paso span { background: var(--amarillo); }
.seccion--marca { background: #fff8ee; }
.seccion--rojo { background: var(--rojo); }
.bene--rojo { background: var(--rojo); } .bene--naranja { background: var(--naranja); } .bene--amarillo { background: var(--amarillo); } .bene--verde { background: var(--verde); }
.resena__avatar { background: var(--amarillo); }
.page-hero::after { background: rgba(8, 8, 8, .72); }
.page-hero--corp { background: #0b0b0b; }
.page-hero--corp::after { background: rgba(8, 8, 8, .6); }
.calc-hero { background: #0b0b0b; }
.lineup { background: #0b0b0b; }
.lineup::before { display: none; }
.sel__left { background: #0b0b0b; }
.sel__right--comp { background: var(--c2); }
.sel__right--comp::before { display: none; }
.sel__right::before { background: rgba(11, 11, 11, .25); }
.tmap__center { border: 6px solid var(--amarillo); background: #fff; background-image: none; }
.hero__media::after { background: rgba(8, 8, 8, .55); }
.cta-band { background: #0b0b0b; color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .8); }
.cta-band__form { background: #fff; }

/* ---- Promos: color sólido de la paleta + logo oficial ---- */
.promo--solido { background: var(--c); color: #fff; min-height: 240px; align-items: center; }
.promo--solido::after { display: none; }
.promo--solido .promo__body { max-width: 60%; padding: clamp(22px, 3vw, 36px); }
.promo--solido .promo__kicker { background: rgba(255, 255, 255, .22); }
.promo--solido .promo__title { font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; }
.promo--solido .promo__text { color: rgba(255, 255, 255, .92); }
.promo--solido .promo__cta { --btn-bg: #fff; --btn-fg: var(--c); }
.promo__logo { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: 30%; max-width: 250px; display: flex; justify-content: center; }
.promo__logo img { width: 100%; height: auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .35)); transition: transform .5s var(--ease-out); }
.promo--ancho.promo--solido .promo__logo { width: 22%; max-width: 300px; }
.promo--solido:hover .promo__logo img { transform: scale(1.04) rotate(-2deg); }

/* ---- Cifras con ícono y color ---- */
.cifras { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cifra { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: none; }
.cifra__ico { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--c); }
.cifra__num { font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.cifra__label { margin-top: 2px; color: rgba(255, 255, 255, .78); }
.nosotros-strip p { font-size: 17px; }

/* ---- Reseñas de Google ---- */
.resena__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.resena__g { font: 700 11px var(--font-display); letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); background: var(--gris-100); color: var(--gris-700); border: 1px solid var(--borde); }
.google-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra-1); font: 600 14px var(--font-display); color: var(--texto); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.google-pill:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.google-pill b { font-size: 18px; }
.google-pill i { color: var(--amarillo); font-style: normal; letter-spacing: -1px; }
.google-pill span { color: var(--texto-suave); font-weight: 500; }

.resenas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.resena--resumen { align-items: flex-start; background: #0b0b0b; color: #fff; border-color: transparent; }
.resena--resumen .resena__g { background: #fff; color: var(--negro); border-color: #fff; }
.resena__big { font: 800 56px/1 var(--font-display); letter-spacing: -.03em; margin-top: 6px; }
.resena--resumen .resena__stars i { font-size: 22px; }
.resena__meta { font-size: 14px; color: rgba(255, 255, 255, .78); flex: 1; }
.resena__meta b { color: #fff; }
.resena__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.resena--resumen .btn--negro { --btn-bg: var(--amarillo); --btn-fg: var(--negro); }
.resena--resumen .btn--outline { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .5); }
.resena--resumen .btn--outline:hover { --btn-bg: #fff; --btn-fg: var(--negro); }
@media (max-width: 960px) { .resenas-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .resenas-grid { grid-template-columns: 1fr; } }

/* ---- Banner Selección: la tarjeta va al lado de la botella, nunca encima ---- */
.sel__right--comp { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); padding: clamp(16px, 2.4vw, 32px); }
.sel__big { position: static; width: auto; height: 100%; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.sel__big img, .sel__big .bottle { max-height: 100%; max-width: 100%; width: auto; }
.sel__card { position: static; left: auto; top: auto; transform: none; width: 290px; flex: none; max-height: 100%; margin: 0; }
.sel__slide.is-active .sel__card { animation: selCardUp .7s var(--ease-out) both; }
@keyframes selCardUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sel__card-media { height: 150px; }
.sel__title { font-style: normal; font-weight: 800; letter-spacing: -.02em; }
.sel__text { font-style: normal; }
@media (max-width: 960px) {
  .sel__right--comp { height: auto; flex-direction: column; padding: 20px 16px; }
  .sel__big { height: 230px; width: 100%; flex: none; }
  .sel__card { width: 100%; margin: 0; }
}

/* ---- Ficha de producto: la botella nunca se sale de su recuadro ---- */
.pd__media { overflow: hidden; }
.pd__media > img, .pd__media > .bottle { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); max-height: none; object-fit: contain; margin: auto; }

/* ---- Lyra: mascota 3D (Astronomical AI) en el botón, el chat y la banda ---- */
.lyra-fab { padding: 6px 18px 6px 6px; min-height: 60px; gap: 6px; overflow: visible; }
.lyra-fab__fig { position: relative; width: 62px; height: 50px; flex: none; }
.lyra-fab__fig img { position: absolute; left: -6px; bottom: -8px; width: 76px; height: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35)); animation: lyraFlota 3.4s ease-in-out infinite; transition: transform var(--dur) var(--ease-out); }
.lyra-fab:hover .lyra-fab__fig img { animation-play-state: paused; transform: rotate(-6deg) scale(1.06); }
@keyframes lyraFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.lyra__avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; overflow: visible; }
.lyra__avatar img { width: 50px; height: auto; }
.lyra__head { background: #0b0b0b; }
.lyra-fab__avatar { background: var(--amarillo); }
.cta-lyra { position: relative; overflow: hidden; background: #0b0b0b; color: #fff; }
.cta-lyra__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 48px) 0 0; }
.cta-lyra .seccion-title h2 { font-size: clamp(30px, 4vw, 50px); }
.cta-lyra .seccion-title h2 em { color: var(--lyra); }
.cta-lyra p { margin-top: 12px; color: rgba(255, 255, 255, .8); max-width: 520px; font-size: 16px; }
.cta-lyra__acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.cta-lyra__form { display: flex; gap: 8px; background: #fff; padding: 6px; border-radius: var(--r-pill); max-width: 520px; margin: 14px 0 clamp(28px, 4vw, 48px); }
.cta-lyra__form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; background: transparent; font-size: 15px; color: var(--texto); }
.cta-lyra__form input:focus { outline: none; }
.cta-lyra__fig { position: relative; display: flex; justify-content: center; align-items: flex-end; align-self: end; min-height: 340px; }
.cta-lyra__fig img { width: min(100%, 360px); height: auto; filter: drop-shadow(0 30px 40px rgba(79, 216, 245, .25)); animation: lyraFlota 4.2s ease-in-out infinite; }
.cta-lyra__burbuja { position: absolute; z-index: 2; top: 6%; left: 0; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--negro); font: 700 14px var(--font-display); box-shadow: var(--sombra-2); }

/* ---- Portal mayorista (referencia de José) ---- */
.mayor-intro { margin-top: 8px; color: var(--texto-suave); font-size: 15px; }
.mayor-card .seccion-title h2 { font-size: clamp(26px, 2.6vw, 34px); }
.mayor-card .seccion-title h2 em { color: var(--naranja); }
.mayor-card .seccion-title__kicker .lp-ico { color: var(--naranja); }
.mayor-card .campo__label .lp-ico { color: var(--naranja); }
.mayor-card--sol { padding: 0; overflow: hidden; border-color: transparent; }
.mayor-card__head { padding: 26px 28px 22px; background: var(--naranja); color: #fff; }
.mayor-card__head .seccion-title__kicker { color: rgba(255, 255, 255, .9); }
.mayor-card__head .seccion-title__kicker::before { background: #fff; }
.mayor-card__head .seccion-title__kicker .lp-ico { color: #fff; }
.mayor-card__head h2 { color: #fff; }
.mayor-card__head h2 em { color: var(--amarillo); }
.mayor-card__head p { margin-top: 8px; color: rgba(255, 255, 255, .92); font-size: 15px; }
.mayor-card__body { padding: 22px 28px 28px; margin-top: 0; }
.mayor-form__links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--texto-suave); }
.mayor-form__links a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--rojo); }
.mayor-form__links a .lp-ico { color: #25d366; }

/* ---- Varios ---- */
.sedes { grid-template-columns: 1fr 1.25fr; }
.search__panel { color: var(--texto); }

@media (max-width: 960px) {
  .cta-lyra__inner { grid-template-columns: 1fr; }
  .cta-lyra__fig { min-height: 240px; margin-top: -10px; }
  .cta-lyra__fig img { width: min(78%, 280px); }
  .promo__logo { width: 28%; }
}
@media (max-width: 640px) {
  .seccion-title h2 { font-size: clamp(28px, 8.4vw, 36px); }
  .page-head--cat h1 { font-size: clamp(30px, 9vw, 40px); }
  .promo--solido .promo__body { max-width: 66%; }
  .promo__logo { width: 32%; right: 3%; }
  .promo--ancho.promo--solido .promo__logo { width: 30%; }
  .cifras { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cifra { padding: 14px; grid-template-columns: 40px 1fr; column-gap: 10px; }
  .cifra__ico { width: 40px; height: 40px; border-radius: 12px; }
  .cifra__ico .lp-ico { width: 20px; height: 20px; }
  .cifra__num { font-size: 24px; white-space: nowrap; }
  .header__logo img { height: 44px; }
  .google-pill { padding: 6px 12px; font-size: 13px; }
  .cta-lyra__form { flex-direction: column; border-radius: var(--r-lg); }
}

/* ============================================================
   35. REDISEÑO v5 (2026-10-07, brief de José con la referencia "Los favoritos de Palmira")
   · Cabecera y menú negros otra vez, con la franja degradada arriba
   · Fondo claro (crema) con ondas y manchas de color degradadas (.fondo-marca, inyectado por app.js)
   · Títulos Montserrat 900 en dos líneas (degradado + negro), subtítulo con divisor y botón pill degradado
   · Tarjetas de producto con fondo gráfico propio por botella (LP.fondoProducto → --f1/--f2 + variante pc-v0…4)
   · Selección en degradado cálido con frase manuscrita · promos compuestas con degradado
   Manda sobre las secciones 33 y 34 (van antes).
   ============================================================ */
:root {
  --rojo: #f21f26; --naranja: #ff6b00; --amarillo: #ffc400; --verde-claro: #8fd14f; --verde: #35a83f; --verde-oscuro: #16833a;
  --crema: #fffdf7;
  --grad-marca: linear-gradient(90deg, #f21f26 0%, #ff6b00 30%, #ffc400 58%, #8fd14f 80%, #35a83f 100%);
  --grad-texto: linear-gradient(92deg, #f21f26 0%, #ff6b00 32%, #ffc400 60%, #35a83f 100%);
  --grad-calido: linear-gradient(90deg, #f21f26, #ff6b00);
  --grad-fresco: linear-gradient(90deg, #35a83f, #16833a);
  --font-titulo: "Montserrat", "Jost", "Segoe UI", sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;
}

/* ---- Fondo: crema con ondas y manchas de color ---- */
html { background: var(--crema); }
html::before, html::after { display: none; content: none; }
body { max-width: none; box-shadow: none; background: transparent; }
.fondo-marca { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fondo-marca__blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.fondo-marca__blob--1 { width: 46vw; height: 46vw; right: -14vw; top: -18vw; opacity: .5; background: radial-gradient(circle, #ffc400 0%, #ff6b00 45%, rgba(255, 107, 0, 0) 72%); }
.fondo-marca__blob--2 { width: 34vw; height: 34vw; right: -8vw; top: 30vh; opacity: .22; background: radial-gradient(circle, #f21f26 0%, rgba(242, 31, 38, 0) 70%); }
.fondo-marca__blob--3 { width: 50vw; height: 40vw; right: -10vw; bottom: -22vw; opacity: .42; background: radial-gradient(circle, #8fd14f 0%, #35a83f 50%, rgba(53, 168, 63, 0) 72%); }
.fondo-marca__blob--4 { width: 40vw; height: 40vw; left: -16vw; bottom: -18vw; opacity: .38; background: radial-gradient(circle, #ffc400 0%, #ff6b00 55%, rgba(255, 107, 0, 0) 72%); }
.fondo-marca__onda { position: absolute; left: 0; width: 100%; }
.fondo-marca__onda--top { top: 0; height: 34vh; opacity: .9; }
.fondo-marca__onda--bottom { bottom: 0; height: 26vh; opacity: .85; }
.fondo-marca__botella { position: absolute; width: 11vw; max-width: 170px; opacity: .07; filter: grayscale(1) blur(1px); }
.fondo-marca__botella--1 { right: 9vw; top: 22vh; }
.fondo-marca__botella--2 { right: 2vw; top: 36vh; width: 9vw; }
.fondo-marca__botella--3 { right: 17vw; top: 44vh; width: 8vw; }
.seccion--alt { background: rgba(255, 255, 255, .55); }
.seccion--marca { background: rgba(255, 255, 255, .35); }

/* ---- Cabecera y menú negros con la franja degradada ---- */
.linea-marca { height: 6px; background: var(--grad-marca); }
.header { background: #0b0b0b; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.header__logo img { height: 68px; width: auto; }
.header__nav a { color: rgba(255, 255, 255, .85); }
.header__nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.header__nav a.is-active { background: transparent; color: var(--amarillo); }
.header__nav a[href="mayoristas.html"] { border-color: var(--naranja); color: #ffb35c; background: transparent; }
.header__nav a[href="mayoristas.html"]:hover, .header__nav a[href="mayoristas.html"].is-active { background: var(--naranja); color: #fff; }
.header .icon-btn { color: #fff; }
.header .icon-btn:hover { background: rgba(255, 255, 255, .12); }
.search__form { background: #fff; border-color: transparent; }
.search__submit { background: var(--grad-marca); color: #fff; font-family: var(--font-titulo); font-weight: 800; box-shadow: 0 6px 14px -6px rgba(242, 31, 38, .5); }
.search__submit:hover { background: var(--grad-marca); filter: brightness(1.06); }
.catbar, .megabar { background: #141414; }
.megabar__link { color: rgba(255, 255, 255, .9); }
.megabar__pill, .megabar__pill--regalo { background: var(--grad-calido); }
.megabar__pill:hover, .megabar__pill--regalo:hover { background: var(--grad-calido); filter: brightness(1.08); }
.mnav__head { background: #0b0b0b; border-bottom: 0; }
.mnav__head .icon-btn { color: #fff; }

/* ---- Títulos: Montserrat 900, dos líneas (degradado + negro), subtítulo con divisor ---- */
.titulo__kicker, .seccion-title__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 700 12.5px/1 var(--font-titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--gris-700); }
.titulo__kicker::before, .seccion-title__kicker::before { content: ""; width: 36px; height: 6px; border-radius: 3px; background: var(--grad-marca); }
.titulo__h, .seccion-title h2.titulo__h { font-family: var(--font-titulo); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 4.6vw, 64px); line-height: .95; letter-spacing: -.02em; color: var(--negro); }
.seccion-title h2.titulo__h em, .seccion-title--light h2.titulo__h em { display: block; font-style: italic; padding-right: .12em; background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.titulo__h span { display: block; }
.seccion-title--light .titulo__h span { color: #fff; }
.seccion-title--light .titulo__kicker { color: rgba(255, 255, 255, .78); }
.seccion-head { align-items: center; gap: 22px; }
.seccion-head .seccion-title { flex: 0 1 auto; }
.seccion-head__sub { flex: 0 1 300px; min-width: 210px; margin-right: auto; padding-left: 22px; border-left: 2px solid rgba(17, 17, 17, .14); font: 500 16px/1.4 var(--font-body); color: var(--gris-700); }
.seccion-title--light + .seccion-head__sub { color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .25); }
.seccion-head--center { justify-content: center; }
.seccion-head__aside { margin-left: auto; }
.seccion-head__link { background: var(--grad-marca); color: #fff; font: 800 15px var(--font-titulo); padding: 12px 20px; box-shadow: 0 12px 26px -12px rgba(242, 31, 38, .6); }
.seccion-head__link:hover { background: var(--grad-marca); color: #fff; filter: brightness(1.06); transform: translateY(-2px); }
.page-head--cat { background: linear-gradient(135deg, var(--cat-color, #141414) 0%, color-mix(in srgb, var(--cat-color, #141414) 55%, #0b0b0b) 100%); border-radius: 0 0 28px 28px; }
.page-head--cat h1 { font-family: var(--font-titulo); font-weight: 900; text-transform: uppercase; }

/* ---- Botones pill con degradado ---- */
.btn--grad { --btn-bg: var(--grad-marca); --btn-fg: #fff; --btn-bd: transparent; font-family: var(--font-titulo); font-weight: 800; box-shadow: 0 12px 26px -12px rgba(242, 31, 38, .6); }
.btn--grad:hover { filter: brightness(1.06); box-shadow: 0 16px 30px -12px rgba(255, 107, 0, .6); }
.btn--rojo { --btn-bg: var(--grad-calido); }
.btn--rojo:hover { --btn-bg: var(--grad-calido); filter: brightness(1.06); }
.btn--amarillo { --btn-bg: linear-gradient(90deg, #ffc400, #ff9a00); --btn-fg: #111; }
.btn--amarillo:hover { --btn-bg: linear-gradient(90deg, #ffc400, #ff9a00); filter: brightness(1.05); }
.btn--verde { --btn-bg: var(--grad-fresco); }
.btn--verde:hover { --btn-bg: var(--grad-fresco); filter: brightness(1.06); }
.product-card__add { background: var(--grad-marca); font-family: var(--font-titulo); font-weight: 800; }
.product-card__add:hover { background: var(--grad-marca); filter: brightness(1.06); box-shadow: 0 12px 22px -10px rgba(255, 107, 0, .6); }
.product-card__add.is-added { background: var(--verde); filter: none; }

/* ---- Tarjetas de producto: fondo gráfico propio detrás de la botella ---- */
.product-card { border: 0; border-radius: 24px; box-shadow: 0 14px 34px -18px rgba(17, 17, 17, .3), 0 2px 10px rgba(17, 17, 17, .05); }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -22px rgba(17, 17, 17, .42), 0 6px 16px rgba(17, 17, 17, .06); }
.product-card__media { position: relative; overflow: hidden; padding: 12px 12px 0; background: #fff; aspect-ratio: 1 / 1; }
.product-card__media::before { content: ""; position: absolute; z-index: 0; inset: 10px 10px 0; border-radius: 20px 20px 24px 24px; background: linear-gradient(150deg, var(--f1, #ffd45c), var(--f2, #fff4c9)); transition: filter var(--dur); }
.product-card__media::after { content: ""; position: absolute; z-index: 0; inset: 10px 10px 0; border-radius: 20px 20px 24px 24px; pointer-events: none; background: var(--deco, none), radial-gradient(60% 50% at 30% 18%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 70%); }
.product-card__media.pc-v0 { --deco: linear-gradient(118deg, rgba(255, 255, 255, .34) 0 46%, rgba(255, 255, 255, 0) 46.2%); }
.product-card__media.pc-v1 { --deco: radial-gradient(circle at 72% 58%, rgba(255, 255, 255, .36) 0 36%, rgba(255, 255, 255, 0) 36.4%); }
.product-card__media.pc-v2 { --deco: radial-gradient(130% 62% at 50% 112%, rgba(255, 255, 255, .4) 0 50%, rgba(255, 255, 255, 0) 50.4%); }
.product-card__media.pc-v3 { --deco: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .32) 0 56%, rgba(255, 255, 255, 0) 56.4%); }
.product-card__media.pc-v4 { --deco: linear-gradient(160deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .28) 38.2% 60%, rgba(255, 255, 255, 0) 60.2%); }
.product-card__media img, .product-card__media .bottle { position: relative; z-index: 1; height: 86%; max-height: none; width: auto; max-width: 80%; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .3)); }
.product-card:hover .product-card__media img, .product-card:hover .product-card__media .bottle { transform: scale(1.05) translateY(-4px); }
.product-card:hover .product-card__media::before { filter: saturate(1.15) brightness(1.03); }
.product-card__badges { top: 18px; left: 18px; z-index: 3; }
.product-card__fav { top: 18px; right: 18px; z-index: 3; }
.badge { font: 800 10.5px var(--font-titulo); letter-spacing: .06em; padding: 5px 10px; border-radius: var(--r-pill); box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.badge .lp-ico { width: 12px; height: 12px; }
.badge--vendido { background: var(--amarillo); color: #111; }
.badge--oferta, .badge--pct { background: var(--rojo); color: #fff; }
.badge--nuevo { background: var(--verde); }
.badge--premium { background: #111; color: var(--amarillo); }
.product-card__body { padding: 14px 16px 16px; gap: 5px; }
.product-card__cat { font: 800 10.5px var(--font-titulo); letter-spacing: .16em; color: var(--gris-500); }
.product-card__name { font: 800 16px/1.2 var(--font-titulo); letter-spacing: -.01em; }
.product-card__pres { font-size: 13px; }
.price { font: 900 22px var(--font-titulo); letter-spacing: -.02em; }
.price--old { font: 500 13.5px var(--font-titulo); }
.price--mayor { width: max-content; max-width: 100%; margin-top: 4px; padding: 6px 10px; border-radius: var(--r-pill); background: #e6f6e4; color: var(--verde-oscuro); font: 700 11.5px var(--font-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price--mayor small { font-weight: 600; opacity: .85; }
.product-card__add { font-size: 13.5px; white-space: nowrap; }
.carrusel__btn { box-shadow: 0 10px 24px -8px rgba(17, 17, 17, .35); border: 0; }

/* ---- Categorías y promos con degradado ---- */
.cat-card--comp { border-radius: 22px; background: linear-gradient(150deg, var(--cat-color) 0%, color-mix(in srgb, var(--cat-color) 50%, #141414) 100%); }
.cat-card--comp::after { background: linear-gradient(180deg, rgba(8, 8, 8, 0) 42%, rgba(8, 8, 8, .8) 100%); }
.cat-card__bg { display: block; background: radial-gradient(70% 60% at 50% 110%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%); }
.promo { border-radius: 24px; }
.promo--comp { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.promo--comp::after { background: linear-gradient(90deg, rgba(8, 8, 8, .38) 0%, rgba(8, 8, 8, .08) 55%, rgba(8, 8, 8, 0) 100%); }
.promo__deco { display: block; background: radial-gradient(60% 70% at 88% 85%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%), radial-gradient(40% 40% at 10% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%); }
.promo__title { font-family: var(--font-titulo); font-weight: 800; letter-spacing: -.01em; }
.promo__kicker { font-family: var(--font-titulo); font-weight: 700; }
.promo__icono { position: absolute; z-index: 2; right: 4%; top: 50%; transform: translateY(-50%); color: #fff; opacity: .95; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); }
.promo__icono .lp-ico { width: clamp(90px, 10vw, 150px); height: auto; }
/* Las fotos de producto son cuadradas con aire transparente: cada una se recorta a una caja 1:2 (object-fit: cover)
   para que las tres botellas queden una al lado de la otra sin taparse */
.promo--comp .promo__products { right: 0; width: 58%; gap: 2%; }
.promo--comp .promo__body { max-width: 46%; }
.promo__products span:nth-child(1), .promo__products span:nth-child(3) { margin: 0; }
.promo__products img { position: static; inset: auto; aspect-ratio: 1 / 2; width: auto; height: 100%; max-width: none; object-fit: cover; object-position: center; } /* .promo img (sección 11) las volvía absolutas y se apilaban */
.promo--icono .promo__products { right: 16%; width: 40%; }
.promo__logo-badge { position: absolute; z-index: 2; right: 18px; bottom: 16px; width: 92px; }
.promo__logo-badge img { width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }

/* ---- Selección: degradado cálido con frase manuscrita ---- */
.sel__frame { border-radius: 28px; background: #0b0b0b; }
.sel__left { background: linear-gradient(135deg, #0b0b0b 0%, #1a0d08 60%, var(--c1) 170%); }
.sel__right--comp { padding-top: 72px; background: radial-gradient(75% 80% at 68% 45%, var(--c2) 0%, var(--c1) 55%, #0b0b0b 125%); }
.sel__right--comp::before { display: block; background: radial-gradient(40% 50% at 70% 50%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%); }
.sel__right--comp::after { border-color: rgba(255, 255, 255, .14); }
.sel__frase { position: absolute; z-index: 2; right: 4%; top: 7%; max-width: 230px; font: 700 clamp(26px, 2.6vw, 40px)/1.05 var(--font-script); color: #ffd36a; text-align: center; transform: rotate(-8deg); text-shadow: 0 6px 20px rgba(0, 0, 0, .35); pointer-events: none; }
.sel__title { font-family: var(--font-titulo); font-weight: 900; font-style: italic; letter-spacing: -.02em; }
.sel__card { border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.sel__card-price { font-family: var(--font-titulo); font-weight: 900; }

/* ---- Otros bloques con degradado ---- */
.calc-hero { background: linear-gradient(135deg, #0b0b0b 0%, #7a0f14 60%, #f21f26 100%); }
.page-hero--corp { background: linear-gradient(135deg, #0b0b0b, #2a2a2d); }
.cta-band, .cta-lyra { background: linear-gradient(135deg, #0b0b0b 0%, #1a1a1a 100%); }
.nosotros-strip__bg::after { background: linear-gradient(90deg, rgba(11, 11, 11, .92), rgba(11, 11, 11, .7)); }
.cifra__num { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mayor-card__head { background: linear-gradient(135deg, #ff6b00, #f21f26); }
.bene-tile__icon { background: linear-gradient(145deg, var(--b-color), color-mix(in srgb, var(--b-color) 65%, #0b0b0b)); }
.bene-tile__title, .bene b, .paso b, .cifra__num { font-family: var(--font-titulo); }
.resena__big { font-family: var(--font-titulo); }
.cta-lyra .seccion-title h2.titulo__h em { background: linear-gradient(92deg, var(--lyra), #8fd14f); -webkit-background-clip: text; background-clip: text; }

@media (max-width: 960px) {
  .seccion-head__sub { display: none; }
  .fondo-marca__blob { filter: blur(50px); }
  .fondo-marca__botella { display: none; }
  .fondo-marca__onda--top { height: 22vh; }
  .fondo-marca__onda--bottom { height: 16vh; }
  .sel__right--comp { padding-top: 16px; }
  .sel__frase { position: static; transform: none; max-width: none; margin: 0 0 6px; text-align: center; }
  .promo__icono .lp-ico { width: 80px; }
  .promo--icono .promo__products { right: 24%; width: 36%; }
}
@media (max-width: 640px) {
  .titulo__h, .seccion-title h2.titulo__h { font-size: clamp(30px, 9vw, 40px); }
  .seccion-head { gap: 12px; }
  .seccion-head__aside { margin-left: 0; }
  .header__logo img { height: 48px; }
  .product-card__media { padding: 8px 8px 0; }
  .product-card__media::before, .product-card__media::after { inset: 6px 6px 0; }
  .product-card__badges { top: 12px; left: 12px; }
  .price { font-size: 19px; }
  .price--mayor { font-size: 11px; padding: 5px 8px; }
  .promo__icono .lp-ico { width: 64px; }
  .promo--comp .promo__body, .promo--ancho.promo--comp .promo__body { max-width: 58%; }
  .promo--comp .promo__products { width: 52%; right: -4%; }
  .promo--icono .promo__products { width: 44%; right: 14%; }
  .promo__kicker { white-space: nowrap; }
}

/* ============================================================
   36. DEGRADADOS v6 (2026-10-08, pedido de José: "usar estas combinaciones para que se vea más estético")
   Solo dos combinaciones para formas, fondos y textos (referencia: material-cliente/referencias/degradados-calido-fresco.jpg):
   · Cálido: rojo #ef1c25 → naranja #f2592a → ámbar #feb140
   · Fresco: verde #399933 → verde claro #89c93c → amarillo #fcca33
   La franja de marca une las dos (cálido + fresco invertido). Los colores sólidos vuelven a los del manual.
   Tarjetas de categoría, beneficios, cifras y cabecera del catálogo reciben --g1/--g2/--g3 desde LP.gradVars();
   producto --f1/--f2/--f3 desde LP.fondoProducto(); Selección y promos --c1/--c2/--c3 desde data.js.
   Manda sobre la sección 35.
   ============================================================ */
:root {
  --rojo: #ef1c25; --naranja: #f2592a; --amarillo: #feb140; --amarillo-sol: #fcca33; --verde-claro: #89c93c; --verde: #399933; --verde-oscuro: #2c7a28;
  --grad-calido: linear-gradient(90deg, #ef1c25 0%, #f2592a 50%, #feb140 100%);
  --grad-fresco: linear-gradient(90deg, #399933 0%, #89c93c 50%, #fcca33 100%);
  --grad-fresco-inv: linear-gradient(90deg, #fcca33 0%, #89c93c 50%, #399933 100%);
  --grad-franja: linear-gradient(90deg, #ef1c25 0%, #f2592a 22%, #feb140 44%, #fcca33 56%, #89c93c 78%, #399933 100%);
  --grad-texto: linear-gradient(92deg, #ef1c25 0%, #f2592a 50%, #feb140 100%);
  --grad-texto-fresco: linear-gradient(92deg, #399933 0%, #89c93c 50%, #fcca33 100%);
  --grad-marca: var(--grad-calido);
}

/* Franjas y separadores: las dos combinaciones unidas */
.linea-marca, .titulo__kicker::before, .seccion-title__kicker::before { background: var(--grad-franja); }

/* Botones con texto blanco: cálido · botones claros: fresco con texto oscuro */
.search__submit, .search__submit:hover, .seccion-head__link, .seccion-head__link:hover,
.product-card__add, .product-card__add:hover, .megabar__pill, .megabar__pill--regalo, .megabar__pill:hover, .megabar__pill--regalo:hover { background: var(--grad-calido); }
.search__submit, .seccion-head__link, .product-card__add, .btn--grad, .btn--rojo { text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.btn--grad, .btn--rojo, .btn--rojo:hover { --btn-bg: var(--grad-calido); }
.btn--verde, .btn--verde:hover { --btn-bg: var(--grad-fresco); --btn-fg: #0b0b0b; }
.btn--amarillo, .btn--amarillo:hover { --btn-bg: var(--grad-fresco-inv); --btn-fg: #0b0b0b; }
.header__nav a[href="mayoristas.html"] { color: var(--amarillo); }

/* Títulos: línea 1 en degradado cálido; en la banda de Lyra (fondo negro) el fresco */
.seccion-title h2.titulo__h em, .seccion-title--light h2.titulo__h em { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; }
.cta-lyra .seccion-title h2.titulo__h em, .cta-lyra .seccion-title h2 em { background: var(--grad-texto-fresco); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cifra__num { background: linear-gradient(92deg, var(--g1, #ef1c25) 0%, var(--g2, #f2592a) 50%, var(--g3, #feb140) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Formas con degradado propio */
.product-card__media::before { background: linear-gradient(150deg, var(--f1, #ef1c25) 0%, var(--f2, #f2592a) 52%, var(--f3, #feb140) 100%); }
.cat-card--comp { background: linear-gradient(150deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%); }
.bene-tile__icon { background: linear-gradient(145deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%); }
.page-head--cat { background: linear-gradient(115deg, var(--g1, #ef1c25) 0%, var(--g2, #f2592a) 55%, var(--g3, #feb140) 100%); }
.page-head--cat h1, .page-head--cat p { text-shadow: 0 2px 12px rgba(0, 0, 0, .22); }
.promo--comp { background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 52%, var(--c3, var(--c2)) 100%); }
.sel__left { background: linear-gradient(135deg, #0b0b0b 0%, #120c0a 55%, var(--c1) 165%); }
.sel__right--comp { background: radial-gradient(75% 80% at 68% 45%, var(--c3, var(--c2)) 0%, var(--c2) 38%, var(--c1) 72%, #0b0b0b 130%); }
.sel__frase { color: var(--amarillo-sol); }
.mayor-card__head { background: linear-gradient(135deg, #ef1c25 0%, #f2592a 50%, #feb140 100%); }
.calc-hero { background: linear-gradient(135deg, #0b0b0b 0%, #1d0b0b 42%, #ef1c25 80%, #f2592a 96%, #feb140 118%); }

/* Fondo crema: manchas con la misma paleta */
.fondo-marca__blob--1 { background: radial-gradient(circle, #feb140 0%, #f2592a 45%, rgba(242, 89, 42, 0) 72%); }
.fondo-marca__blob--2 { background: radial-gradient(circle, #ef1c25 0%, rgba(239, 28, 37, 0) 70%); }
.fondo-marca__blob--3 { background: radial-gradient(circle, #fcca33 0%, #89c93c 38%, #399933 58%, rgba(57, 153, 51, 0) 74%); }
.fondo-marca__blob--4 { background: radial-gradient(circle, #feb140 0%, #f2592a 55%, rgba(242, 89, 42, 0) 72%); }

/* Lyra con la ropa de Licores Palmira: brillo neutro (el robot ya no es solo cian) */
.cta-lyra__fig img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)) drop-shadow(0 0 30px rgba(79, 216, 245, .18)); }
@media (max-width: 960px) {
  /* El globo de Lyra va encima de la figura para no tapar el logo de la gorra */
  .cta-lyra__fig { padding-top: 58px; }
  .cta-lyra__burbuja { top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; border-radius: 16px 16px 16px 16px; }
}

/* ============================================================
   37. v7 (2026-10-08, pedidos de José)
   · Fondo: ondas suaves sobre blanco con línea dorada (material-cliente/fondo/), reemplaza manchas y ondas fuertes
   · Botón de WhatsApp igual al real: logo oficial, verde #25D366, ondas, timbre, notificación y globo de mensaje
   · (La Lyra guía por sección se probó y José la descartó el mismo día: Lyra solo va en el botón flotante, el chat y la banda “Pregúntale a Lyra”)
   ============================================================ */
:root { --crema: #fdfdfd; }
html { background: #fdfdfd; }
.fondo-marca { background: #fdfdfd url("../assets/img/fondo-ondas.webp") center bottom / cover no-repeat; }
.fondo-marca__blob, .fondo-marca__onda, .fondo-marca__botella { display: none !important; }
@media (max-aspect-ratio: 3/4) { .fondo-marca { background-image: url("../assets/img/fondo-ondas-movil.webp"); } }

/* ---- Botón flotante de WhatsApp ---- */
.fab.wa-fab { left: 22px; bottom: 22px; width: 62px; height: 62px; overflow: visible; isolation: isolate; background: #25d366; color: #fff;
  box-shadow: 0 14px 30px -10px rgba(18, 140, 126, .7), 0 4px 12px rgba(0, 0, 0, .18); }
.fab.wa-fab::before { content: none; animation: none; }
.fab.wa-fab:hover { background: #1fbe5b; transform: translateY(-3px) scale(1.06); box-shadow: 0 18px 34px -10px rgba(18, 140, 126, .8), 0 6px 14px rgba(0, 0, 0, .2); }
.fab.wa-fab:active { transform: scale(.96); }
.wa-fab__icono { position: relative; z-index: 2; display: grid; place-items: center; transform-origin: 50% 55%; animation: waTimbre 7s ease-in-out 2.4s infinite; }
.wa-fab__icono .lp-ico { width: 34px; height: 34px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }
.wa-fab__ondas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wa-fab__ondas i { position: absolute; inset: 0; border-radius: 50%; background: rgba(37, 211, 102, .5); animation: waOnda 2.8s cubic-bezier(.22, .61, .36, 1) infinite; }
.wa-fab__ondas i:nth-child(2) { animation-delay: 1.4s; }
.wa-fab__badge { position: absolute; z-index: 3; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b30; color: #fff;
  font: 800 12px/18px var(--font-titulo); text-align: center; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(255, 59, 48, .45); transform: scale(0); animation: waBadge .5s cubic-bezier(.34, 1.56, .64, 1) 3s forwards; }
.wa-fab__globo { position: absolute; z-index: 1; left: calc(100% + 14px); bottom: 4px; width: 236px; padding: 10px 14px 11px; border-radius: 14px 14px 14px 4px; background: #fff; color: #111b21;
  border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .4); text-align: left; opacity: 0; transform: translateX(-10px) scale(.95); transform-origin: left bottom;
  pointer-events: none; animation: waGlobo 8s ease 4.2s 1 both; }
.wa-fab__globo::before { content: ""; position: absolute; left: -6px; bottom: 8px; width: 12px; height: 12px; background: #fff; border-left: 1px solid rgba(0, 0, 0, .06); border-bottom: 1px solid rgba(0, 0, 0, .06); transform: rotate(45deg); }
.wa-fab__globo b { display: block; margin-bottom: 2px; font: 700 12.5px var(--font-titulo); color: #128c7e; }
.wa-fab__globo span { display: block; font: 500 13.5px/1.35 var(--font-body); }
.fab.wa-fab:hover .wa-fab__globo, .fab.wa-fab:focus-visible .wa-fab__globo { animation: none; opacity: 1; transform: none; }
@keyframes waOnda { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes waTimbre { 0%, 82%, 100% { transform: rotate(0) scale(1); } 84% { transform: rotate(-16deg) scale(1.1); } 86% { transform: rotate(14deg) scale(1.1); } 88% { transform: rotate(-12deg) scale(1.1); } 90% { transform: rotate(9deg) scale(1.06); } 92% { transform: rotate(-4deg) scale(1.02); } 94% { transform: rotate(0) scale(1); } }
@keyframes waBadge { to { transform: scale(1); } }
@keyframes waGlobo { 0% { opacity: 0; transform: translateX(-10px) scale(.95); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-10px) scale(.95); } }
/* El ícono de WhatsApp de la barra inferior del celular también en verde oficial */
.tabbar a[href*="wa.me"] .lp-ico, .tabbar a[href*="whatsapp"] .lp-ico { color: #25d366; }

@media (prefers-reduced-motion: reduce) {
  .wa-fab__ondas i, .wa-fab__icono { animation: none; }
  .wa-fab__badge { animation: none; transform: scale(1); }
  .wa-fab__globo { animation: none; }
}

/* ============================================================
   38. v8 (2026-10-08, referencias de José)
   · Tarjetas de producto: botella protagonista (de borde a borde) y vaso con whisky y hielo en whisky, ron y brandy
   · Selección y promociones con escenas publicitarias de lujo hechas en Higgsfield (assets/img/arte/, data.js → arte)
   ============================================================ */
.product-card__media { padding: 10px 10px 0; place-items: end center; }
.product-card__media img, .product-card__media .bottle { z-index: 2; height: 100%; max-width: 92%; transform-origin: 50% 100%; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .3)); }
.product-card__media .product-card__vaso { position: absolute; z-index: 1; left: 6%; bottom: 3%; width: 36%; height: auto; max-width: none; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .28)); pointer-events: none; }
.product-card:hover .product-card__media .product-card__vaso { transform: translateY(-2px); }

/* ---- Selección con escena completa ---- */
.sel__slide--arte { background: #0b0b0b; }
.sel__arte { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; transform: scale(1.03); transition: transform 8s linear; }
.sel__slide--arte.is-active .sel__arte { transform: scale(1); }
.sel__arte-movil { display: none; }
.sel__slide--arte .sel__left { z-index: 2; background: linear-gradient(90deg, rgba(6, 6, 6, .8) 0%, rgba(6, 6, 6, .45) 62%, rgba(6, 6, 6, 0) 100%); }
.sel__slide--arte .sel__left > * { max-width: min(400px, 100%); }
.sel__slide--arte .sel__right { position: static; background: none; overflow: visible; }
.sel__slide--arte .sel__right::before, .sel__slide--arte .sel__right::after { display: none; }
.sel__slide--arte .sel__card { position: absolute; z-index: 3; left: 38%; top: 54%; width: 270px; transform: translateY(-50%); background: rgba(255, 255, 255, .97); box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .75); }
.sel__slide--arte.is-active .sel__card { animation: selArteCard .8s var(--ease-out) .15s both; }
.sel__slide--arte .sel__card-media { height: 100px; }
.sel__slide--arte .sel__frase { position: absolute; z-index: 3; left: 38%; right: auto; top: 6%; width: 270px; max-width: none; text-align: center; color: var(--amarillo-sol); }
@keyframes selArteCard { from { opacity: 0; transform: translateY(-42%); } to { opacity: 1; transform: translateY(-50%); } }

/* ---- Promociones con escena completa ---- */
.promo--arte { background: #0b0b0b; }
.promo--arte .promo__arte { z-index: 0; object-fit: cover; object-position: right center; }
.promo--arte:hover .promo__arte { transform: scale(1.04); }
.promo--arte::after { z-index: 1; background: linear-gradient(90deg, rgba(6, 6, 6, .66) 0%, rgba(6, 6, 6, .34) 42%, rgba(6, 6, 6, 0) 70%); }
.promo--arte-fiesta::after { background: linear-gradient(90deg, rgba(120, 10, 16, .62) 0%, rgba(120, 10, 16, .28) 42%, rgba(120, 10, 16, 0) 68%); }
.promo--arte-sofi::after { background: linear-gradient(90deg, rgba(14, 64, 20, .66) 0%, rgba(14, 64, 20, .3) 42%, rgba(14, 64, 20, 0) 66%); }
.promo--arte-sofi .promo__arte { object-position: center center; }
.promo--arte .promo__body { max-width: 50%; }
.promo--arte .promo__title { text-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.promo--arte .promo__icono { z-index: 2; }

@media (max-width: 960px) {
  .sel__arte { display: none; }
  .sel__slide--arte .sel__left { background: #0b0b0b; }
  .sel__slide--arte .sel__left > * { max-width: none; }
  .sel__slide--arte .sel__right { position: relative; display: block; height: auto; padding: 0 0 18px; background: #0b0b0b; }
  .sel__arte-movil { display: block; position: static; width: 100%; height: 300px; object-fit: cover; object-position: 73% center; }
  .sel__slide--arte .sel__card { position: relative; left: auto; top: auto; width: auto; margin: -70px 16px 0; transform: none; animation: none; }
  .sel__slide--arte .sel__frase { left: 16px; top: 16px; width: auto; text-align: left; }
  .promo--arte .promo__body { max-width: 62%; }
}
/* Franja ancha de WhatsApp (4:1): la escena se muestra completa a la derecha y el verde de su borde rellena la izquierda */
.promo--arte-sofi { background: linear-gradient(90deg, #163a11 0%, #183e12 45%, #6f9a2c 80%, #dacf60 100%); }
.promo--arte-sofi .promo__arte { left: auto; right: 12%; width: auto; height: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.promo--arte-sofi:hover .promo__arte { transform: none; }
.promo--arte-sofi .promo__icono { color: #fff; }
.promo--arte-sofi .promo__icono .lp-ico { padding: 18px; border-radius: 50%; background: #25d366; box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .45); }
@media (max-width: 960px) {
  .promo--arte-sofi .promo__arte { right: 0; width: 100%; object-fit: cover; object-position: 66% center; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 960px) {
  /* La regla general .sel__right img (height 100%) le ganaba a la escena en celular */
  .sel__slide--arte .sel__right .sel__arte-movil { width: 100%; height: 300px; object-fit: cover; object-position: 73% center; transform: none; }
  /* En celular las promociones con escena muestran solo título y botón para no tapar los productos */
  .promo--arte .promo__text { display: none; }
  .promo--arte .promo__body { max-width: 56%; }
  .promo--arte-fiesta .promo__arte { object-position: 82% center; }
}
@media (max-width: 960px) {
  /* La animación de escritorio (translateY -50%) subía la tarjeta sobre la escena en celular */
  .sel__slide--arte.is-active .sel__card { animation: selCardUp .7s var(--ease-out) both; transform: none; margin-top: -56px; }
}