/* BEBIDAS · noche azul petróleo · sólo section#bebidas. Cargar tras la hoja base y los temas anteriores.
   La foto del encabezado es un recorte sin texto de la referencia aprobada; las tarjetas no llevan fotos. */
#bebidas.menu-section {
  --bd-navy: #071d34;
  --bd-ink: #0b1b3e;
  --bd-teal: #00798e;
  --bd-ocre: #b97516;
  --bd-serif: var(--font-display, Fraunces, Georgia, 'Times New Roman', serif);
  isolation: isolate;
  overflow: hidden;
  padding: 0 0 clamp(26px, 3.4vw, 44px);
  border: 0;
  border-radius: 16px;
  background: url('../assets/bebidas/fondo.svg'), linear-gradient(180deg, #071a2e, #06182b 60%, #071d34);
  color: #f6ecd8;
  box-shadow: 0 16px 40px rgba(2, 8, 20, .4);
}
#bebidas.menu-section::before,
#bebidas.menu-section::after { content: none; }

/* ── Encabezado nocturno con bebidas fotográficas ───────── */
#bebidas .section-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: clamp(300px, 28.5vw, 420px);
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  padding: clamp(26px, 3.6vw, 52px) 52% clamp(26px, 3.6vw, 52px) clamp(24px, 4.2vw, 62px);
  background:
    radial-gradient(circle at 34% 6%, rgba(255, 170, 60, .22), transparent 13%),
    radial-gradient(ellipse at 20% 100%, rgba(0, 121, 142, .18), transparent 60%),
    linear-gradient(180deg, #061426, #07203a);
}
/* Recorte fotográfico (vaso de cola, botella, té y jugo). */
#bebidas .section-head::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: 58%;
  background: url('../assets/bebidas/hero-bebidas.webp') right bottom / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%), linear-gradient(180deg, transparent 0, #000 28%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%), linear-gradient(180deg, transparent 0, #000 28%, #000 93%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}
#bebidas .section-head::after { content: none; }
#bebidas .section-head > * { position: relative; z-index: 1; }
#bebidas .section-head .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  color: #20b9cf;
  font: 600 clamp(.75rem, 1.1vw, 1rem)/1.2 var(--bd-serif);
  letter-spacing: .34em;
  text-transform: uppercase;
  white-space: nowrap;
}
#bebidas .section-head .eyebrow::before,
#bebidas .section-head .eyebrow::after {
  content: '';
  flex: 0 1 clamp(60px, 7vw, 100px);
  height: 18px;
  background:
    url('../assets/bebidas/rizo-izq.svg') no-repeat right center / 20px auto,
    linear-gradient(#d9a436, #d9a436) no-repeat left center / calc(100% - 22px) 1px;
}
#bebidas .section-head .eyebrow::after {
  background:
    url('../assets/bebidas/rizo-der.svg') no-repeat left center / 20px auto,
    linear-gradient(#d9a436, #d9a436) no-repeat right center / calc(100% - 22px) 1px;
}
#bebidas .section-head h3 {
  margin: 0 0 8px;
  color: #fff1d6;
  font: 800 clamp(3.4rem, 9.6vw, 9.2rem)/.95 var(--bd-serif);
  letter-spacing: -.045em;
  text-transform: none;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .5);
}
#bebidas .section-head > p {
  max-width: 30ch;
  margin: 0;
  color: #f6ecd8;
  font: 400 clamp(1.1rem, 2vw, 1.8rem)/1.3 var(--bd-serif);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
#bebidas .section-head > p::after {
  content: '';
  display: block;
  width: min(100%, 360px);
  height: 26px;
  margin-top: 14px;
  background:
    url('../assets/bebidas/fleuron.svg') no-repeat center / 40px auto,
    linear-gradient(#d9a436, #d9a436) no-repeat left center / calc(50% - 32px) 1px,
    linear-gradient(#d9a436, #d9a436) no-repeat right center / calc(50% - 32px) 1px;
}

/* ── Tarjetas claras con relieve ────────────────────────── */
#bebidas .product-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
  padding: 0 clamp(14px, 2vw, 28px);
}
#bebidas .product-card { grid-column: span 4; }
#bebidas .product-card:nth-child(-n+4) { grid-column: span 3; }
#bebidas .product-card {
  position: relative;
  min-width: 0;
  min-height: 252px;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 14px;
  background:
    url('../assets/bebidas/relieve-tl.svg') left 6px top 6px / clamp(84px, 9vw, 128px) no-repeat,
    url('../assets/bebidas/relieve-br.svg') right 6px bottom 6px / clamp(84px, 9vw, 128px) no-repeat,
    radial-gradient(ellipse at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(165deg, #f5fafd, #d9e8f1);
  color: var(--bd-ink);
  box-shadow: 0 16px 34px rgba(0, 8, 22, .5), 0 0 0 1px rgba(11, 27, 62, .1), inset 0 1px 0 #ffffff;
  transition: transform .22s ease, box-shadow .22s ease;
}
/* Banda superior turquesa-oro. */
#bebidas .product-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #087b91, #e8b24a 50%, #087b91);
  pointer-events: none;
}
/* Doble filete interior dorado, como una carta de mesa. */
#bebidas .product-card::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(185, 117, 22, .32);
  border-radius: 9px;
  pointer-events: none;
}
#bebidas .product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(0, 8, 22, .55), 0 0 0 1px rgba(11, 138, 160, .45), 0 0 24px rgba(20, 180, 205, .25), inset 0 1px 0 #ffffff;
}
#bebidas .product-card__img { display: none; }
#bebidas .product-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 2.3vw, 32px) clamp(18px, 2vw, 28px) clamp(20px, 2vw, 26px);
}
#bebidas .product-card__top { display: flex; flex-direction: column; align-items: center; margin: 0 0 6px; }
#bebidas .product-card__top h4 {
  margin: 0;
  color: var(--bd-ink);
  font: 800 clamp(1.35rem, 1.95vw, 1.85rem)/1.1 var(--bd-serif);
  letter-spacing: -.03em;
  overflow-wrap: normal;
}
/* Filete dorado con flor turquesa bajo el nombre. */
#bebidas .product-card__top h4::after {
  content: '';
  display: block;
  width: min(240px, 86%);
  height: 22px;
  margin: 9px auto 4px;
  background:
    url('../assets/bebidas/fleuron.svg') no-repeat center / 30px auto,
    linear-gradient(90deg, transparent, #d9a436) no-repeat left center / calc(50% - 24px) 1px,
    linear-gradient(90deg, #d9a436, transparent) no-repeat right center / calc(50% - 24px) 1px;
}
#bebidas .product-card__price {
  background: linear-gradient(180deg, #a8680c, #7d4a08);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9));
  font: 800 clamp(1.9rem, 2.7vw, 2.6rem)/1.1 var(--bd-serif);
  letter-spacing: -.025em;
  white-space: nowrap;
}
#bebidas .product-card__desc {
  margin: 6px 0 16px;
  color: #26405c;
  font: 400 clamp(.95rem, 1.2vw, 1.08rem)/1.35 var(--bd-serif);
}
#bebidas .product-card__foot { margin-top: auto; padding: 0; border: 0; justify-content: center; }
#bebidas .product-card__foot > div:empty { display: none; }
#bebidas .add-btn {
  min-height: 48px;
  min-width: 148px;
  padding: 10px 24px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #0f9bb3 0%, #07677c 100%);
  color: #effbff;
  font: 700 clamp(.98rem, 1.25vw, 1.12rem)/1.2 var(--bd-serif);
  letter-spacing: .01em;
  box-shadow: 0 6px 14px rgba(0, 80, 100, .4), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: filter .2s ease, box-shadow .2s ease;
}
#bebidas .add-btn:hover { filter: brightness(1.12); box-shadow: 0 8px 18px rgba(0, 120, 145, .5), inset 0 1px 0 rgba(255, 255, 255, .45); transform: none; }
#bebidas .add-btn:focus-visible { outline: 3px solid #f3b13f; outline-offset: 3px; }
#bebidas .add-btn::after { content: ' +'; font: inherit; margin-left: 10px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  #bebidas .product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #bebidas .product-card,
  #bebidas .product-card:nth-child(-n+4) { grid-column: span 3; }
  #bebidas .product-card:last-child { grid-column: 2 / span 4; }
  #bebidas .section-head { padding-right: 48%; }
  #bebidas .section-head::before { width: 54%; }
  #bebidas .section-head h3 { font-size: clamp(3rem, 9vw, 6.4rem); }
}
@media (max-width: 700px) {
  #bebidas .section-head {
    min-height: 0;
    padding: 28px 20px calc((100vw - 56px) * .51 + 22px);
    background:
      radial-gradient(circle at 80% 8%, rgba(255, 170, 60, .2), transparent 20%),
      linear-gradient(180deg, #061426, #07203a);
  }
  #bebidas .section-head::before {
    inset: auto 0 0 0;
    width: auto;
    height: calc((100vw - 56px) * .51);
    background-position: center bottom;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  #bebidas .section-head h3 { font-size: clamp(3.2rem, 15vw, 5rem); }
  #bebidas .section-head .eyebrow { letter-spacing: .24em; }
  #bebidas .product-grid { grid-template-columns: minmax(0, 1fr); padding: 0 12px; gap: 14px; }
  #bebidas .product-card,
  #bebidas .product-card:nth-child(-n+4),
  #bebidas .product-card:last-child { grid-column: auto; }
  #bebidas .product-card { min-height: 210px; }
}
@media (max-width: 385px) {
  #bebidas .section-head .eyebrow::before,
  #bebidas .section-head .eyebrow::after { flex-basis: 34px; }
  #bebidas .section-head .eyebrow { letter-spacing: .16em; }
}
@media (prefers-reduced-motion: reduce) {
  #bebidas .product-card, #bebidas .add-btn { transition: none; }
  #bebidas .product-card:hover { transform: none; }
}