/*
Theme Name: Bella Berry
Theme URI: https://bellaberry.mx
Author: AiB
Author URI: https://aib.studio
Description: Tema editorial de lujo para Bella Berry — Snack Boutique en Chihuahua. Erewhon si viviera en Chihuahua y fuera interiorismo. Incluye panel de administración personalizado, gestor de menú, y elementos flotantes animados editables.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: bella-berry
*/

/* ============================================================
   BELLA BERRY — SISTEMA DE DISEÑO
   ============================================================ */

:root{
  /* Paleta del brandbook */
  --bb-cream: #F2F0EC;          /* crema principal, fondo dominante */
  --bb-cream-light: #FAF8F4;    /* fondo alternativo más claro */
  --bb-rose: #C68590;           /* rosa palo, acento primario */
  --bb-rose-soft: #E8D5D8;      /* rosa muy suave, hover states */
  --bb-rose-deep: #BA5B80;      /* rosa intenso, énfasis */
  --bb-sage: #B5DBD2;           /* sage / verde menta secundario */
  --bb-sage-dark: #769D91;      /* sage oscuro */
  --bb-peach: #EFB8A9;          /* melocotón / salmón suave */
  --bb-charcoal: #58595B;       /* carbón, textos */
  --bb-ink: #1a1a1a;            /* contorno negro 4px */

  /* Tipografía */
  --bb-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --bb-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaciado */
  --bb-section-y: clamp(72px, 11vw, 160px);
  --bb-gutter: clamp(24px, 6vw, 120px);
  --bb-radius: 8px;
  --bb-radius-lg: 18px;
  --bb-outline: 2px;

  /* Transiciones */
  --bb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body{
  margin: 0;
  font-family: var(--bb-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--bb-charcoal);
  background: var(--bb-cream);
  overflow-x: hidden;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; transition: color .35s var(--bb-ease); }
button{ font-family: inherit; cursor: pointer; }

::selection{ background: var(--bb-rose-soft); color: var(--bb-charcoal); }

/* Scrollbar refinado */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--bb-cream); }
::-webkit-scrollbar-thumb{ background: var(--bb-rose); border-radius: 20px; border: 3px solid var(--bb-cream); }

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */

h1,h2,h3,h4{
  font-family: var(--bb-display);
  font-weight: 300;
  color: var(--bb-charcoal);
  margin: 0;
  line-height: 1.05;
}

.bb-eyebrow{
  font-family: var(--bb-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--bb-rose);
}

.bb-display-xl{
  font-size: clamp(5rem, 14vw, 12rem);
  font-weight: 300;
  letter-spacing: .01em;
}

.bb-display-lg{ font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 300; }
.bb-display-md{ font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 300; }
.bb-italic{ font-style: italic; }

p{ margin: 0 0 1.2em; max-width: 60ch; }

/* ============================================================
   LAYOUT
   ============================================================ */

.bb-wrap{ width: 100%; max-width: 1480px; margin: 0 auto; padding-inline: var(--bb-gutter); }
.bb-section{ padding-block: var(--bb-section-y); position: relative; }
.bb-rule{ height: 1px; background: var(--bb-rose); opacity: .55; border: 0; margin: 0; }

/* ============================================================
   BOTONES — estilo sticker con contorno 4px
   ============================================================ */

.bb-btn{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--bb-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: var(--bb-radius-lg);
  border: var(--bb-outline) solid var(--bb-ink);
  background: var(--bb-cream-light);
  color: var(--bb-ink);
  transition: background .4s var(--bb-ease), color .4s var(--bb-ease), transform .4s var(--bb-ease);
}
.bb-btn:hover{ background: var(--bb-rose); color: var(--bb-cream-light); transform: translateY(-3px); }
.bb-btn--rose{ background: var(--bb-rose); color: var(--bb-cream-light); }
.bb-btn--rose:hover{ background: var(--bb-rose-deep); }
.bb-btn--sage{ background: var(--bb-sage); }
.bb-btn--sage:hover{ background: var(--bb-sage-dark); color: var(--bb-cream-light); }

/* ============================================================
   HEADER / NAV
   ============================================================ */

.bb-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 26px var(--bb-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .5s var(--bb-ease), padding .5s var(--bb-ease);
  mix-blend-mode: normal;
}
.bb-header.is-scrolled{
  background: rgba(242,240,236,.86);
  backdrop-filter: blur(14px);
  padding-block: 16px;
  border-bottom: 1px solid var(--bb-rose-soft);
}
.bb-logo{
  font-family: var(--bb-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: .04em;
  color: var(--bb-charcoal);
  display: inline-flex;
  align-items: center;
}
.bb-logo .bb-logo-text span{ font-style: italic; color: var(--bb-rose); }
.bb-logo-img--header{ height: 40px; width: auto; transition: height .5s var(--bb-ease); }
.bb-header.is-scrolled .bb-logo-img--header{ height: 34px; }
.bb-logo-img--hero{ width: min(620px, 78vw); height: auto; margin: 0 auto; display:block; }
.bb-logo-img--footer{ height: 56px; width: auto; }
.bb-nav{ display: flex; gap: 10px; align-items: center; }
.bb-nav a{
  font-family: var(--bb-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 100px;
  border: 2px solid transparent;
  color: var(--bb-charcoal);
  transition: all .35s var(--bb-ease);
}
.bb-nav a:hover, .bb-nav a.current-menu-item{
  border-color: var(--bb-ink);
  background: var(--bb-cream-light);
}
.bb-nav a.bb-nav-cta{ background: var(--bb-sage); border-color: var(--bb-ink); }
.bb-nav a.bb-nav-cta:hover{ background: var(--bb-sage-dark); color: var(--bb-cream-light); }

.bb-burger{ display: none; background: none; border: 0; flex-direction: column; gap: 5px; padding: 8px; }
.bb-burger span{ width: 26px; height: 2px; background: var(--bb-charcoal); transition: .3s; }

/* ============================================================
   HERO
   ============================================================ */

.bb-hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bb-cream);
}
.bb-hero__slides{ position: absolute; inset: 0; z-index: 0; }
.bb-hero__slide{
  position: absolute; inset: -12% 0; /* extra alto para el paralax */
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
  will-change: transform, opacity;
  transform: translateY(0) scale(1.06);
}
.bb-hero__slide.is-active{ opacity: 1; }
.bb-hero__overlay{ position: absolute; inset: 0; z-index: 1; background: var(--bb-cream); }
.bb-hero__content{
  position: relative;
  z-index: 5;
  text-align: center;
  padding-inline: 6vw;
}
.bb-hero__title{
  font-family: var(--bb-display);
  font-weight: 300;
  font-size: clamp(5rem, 15vw, 13rem);
  line-height: .92;
  color: var(--bb-charcoal);
  letter-spacing: .005em;
}
.bb-hero__title em{ font-style: italic; color: var(--bb-rose); }
.bb-hero__sub{
  margin-top: 22px;
  font-family: var(--bb-body);
  font-weight: 500;
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: .58em;
  text-transform: uppercase;
  color: var(--bb-charcoal);
  padding-left: .58em;
}
.bb-hero__tagline{
  margin-top: 26px;
  font-family: var(--bb-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  color: var(--bb-rose-deep);
}

/* Elementos flotantes */
.bb-floaters{ position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bb-floater{
  position: absolute;
  width: var(--size, 90px);
  will-change: transform;
  animation: bbFloat var(--dur, 14s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  opacity: .94;
}
.bb-floater img{ width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(88,89,91,.12)); }
@keyframes bbFloat{
  0%   { transform: translate(0,0) rotate(var(--rot,0deg)); }
  33%  { transform: translate(var(--mx,18px), var(--my,-22px)) rotate(calc(var(--rot,0deg) + 4deg)); }
  66%  { transform: translate(calc(var(--mx,18px) * -0.6), var(--my2,16px)) rotate(calc(var(--rot,0deg) - 3deg)); }
  100% { transform: translate(var(--mx2,-14px), var(--my3,-12px)) rotate(calc(var(--rot,0deg) + 2deg)); }
}

/* ============================================================
   STRIP (marquee estático con separadores)
   ============================================================ */

.bb-strip{
  background: var(--bb-rose);
  color: var(--bb-cream-light);
  padding-block: 22px;
  overflow: hidden;
}
.bb-strip__inner{ display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 34px; padding-inline: var(--bb-gutter); }
.bb-strip__item{
  font-family: var(--bb-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  display: flex; align-items: center; gap: 34px;
}
.bb-strip__item::after{ content:'·'; opacity:.6; }
.bb-strip__item:last-child::after{ content:none; }

/* ============================================================
   SECCIÓN EDITORIAL (Nosotras preview)
   ============================================================ */

.bb-editorial{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.bb-editorial__media{ position: relative; }
.bb-editorial__media img{
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--bb-radius);
}
.bb-editorial__media--framed img{ border: var(--bb-outline) solid var(--bb-ink); }
.bb-editorial__text .bb-eyebrow{ margin-bottom: 22px; display: block; }
.bb-editorial__text h2{ margin-bottom: 28px; }
.bb-editorial__text p{ font-size: 1.05rem; }
.bb-editorial--reverse .bb-editorial__media{ order: 2; }

/* ============================================================
   MENÚ PREVIEW
   ============================================================ */

.bb-secthead{ text-align: center; margin-bottom: clamp(40px, 6vw, 80px); }
.bb-secthead .bb-eyebrow{ display: block; margin-bottom: 18px; }

.bb-menu-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 36px); }
.bb-card{
  background: var(--bb-cream-light);
  border: var(--bb-outline) solid var(--bb-ink);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  transition: transform .5s var(--bb-ease);
  display: flex; flex-direction: column;
}
.bb-card{
  transition: transform .5s var(--bb-ease), box-shadow .5s var(--bb-ease);
}
.bb-card:hover{ transform: translateY(-8px) scale(1.025); box-shadow: 0 26px 50px -24px rgba(88,89,91,.4); }
.bb-card.is-pressed{ transform: scale(.975); transition: transform .18s ease; }
.bb-card__media{ aspect-ratio: 4/5; overflow: hidden; background: var(--bb-sage); border-bottom: var(--bb-outline) solid var(--bb-ink); }
.bb-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--bb-ease); }
.bb-card:hover .bb-card__media img{ transform: scale(1.06); }
.bb-card__ph{ width:100%; height:100%; display:grid; place-items:center; background: var(--bb-sage); }
.bb-card__body{ padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bb-card__name{ font-family: var(--bb-display); font-size: 1.7rem; line-height: 1.1; }
.bb-card__desc{ font-size: .92rem; color: var(--bb-charcoal); opacity: .85; flex: 1; margin: 0; }
.bb-card__price{ font-family: var(--bb-body); font-weight: 500; font-size: 1rem; color: var(--bb-rose-deep); letter-spacing: .02em; }
.bb-card__cat{ font-family: var(--bb-body); font-weight:500; font-size: 10px; letter-spacing:.2em; text-transform: uppercase; color: var(--bb-sage-dark); }

.bb-center-cta{ text-align: center; margin-top: clamp(40px, 6vw, 72px); }

/* ============================================================
   GALERÍA MASONRY
   ============================================================ */

.bb-gallery{ columns: 3; column-gap: 18px; }
.bb-gallery__item{ break-inside: avoid; margin-bottom: 18px; border-radius: var(--bb-radius); overflow: hidden; }
.bb-gallery__item img{ width: 100%; transition: transform .8s var(--bb-ease); }
.bb-gallery__item:hover img{ transform: scale(1.05); }

/* ============================================================
   CTA DELIVERY
   ============================================================ */

.bb-cta{ background: var(--bb-sage); text-align: center; }
.bb-cta h2{ margin-bottom: 14px; }
.bb-cta__sub{ font-family: var(--bb-display); font-style: italic; font-size: clamp(1.3rem,2.6vw,2rem); color: var(--bb-sage-dark); margin-bottom: 38px; }
.bb-cta__btns{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */

.bb-footer{ background: var(--bb-charcoal); color: var(--bb-cream); padding-block: clamp(60px,8vw,110px) 40px; }
.bb-footer__grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; margin-bottom: 60px; }
.bb-footer__logo{ font-family: var(--bb-display); font-size: clamp(2.4rem,5vw,4rem); color: var(--bb-cream); line-height: 1; }
.bb-footer__logo em{ font-style: italic; color: var(--bb-rose); }
.bb-footer__tag{ font-family: var(--bb-display); font-style: italic; font-size: 1.3rem; color: var(--bb-rose); margin-top: 10px; }
.bb-footer h4{ font-family: var(--bb-body); font-weight: 500; font-size: 11px; letter-spacing:.24em; text-transform: uppercase; color: var(--bb-rose); margin-bottom: 18px; }
.bb-footer p, .bb-footer a{ color: var(--bb-cream); font-size: .95rem; opacity: .85; }
.bb-footer a:hover{ color: var(--bb-rose); opacity: 1; }
.bb-footer__row{ margin-bottom: 8px; }
.bb-footer__bottom{ border-top: 1px solid rgba(242,240,236,.18); padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; letter-spacing: .08em; opacity: .65; }

/* ============================================================
   PÁGINA MENÚ
   ============================================================ */

.bb-page-hero{ padding-top: clamp(150px, 18vw, 220px); padding-bottom: clamp(40px,6vw,70px); text-align: center; }
.bb-page-hero .bb-eyebrow{ display:block; margin-bottom: 20px; }
.bb-page-hero h1{ font-size: clamp(3.5rem, 10vw, 8rem); }
.bb-page-hero h1 em{ font-style: italic; color: var(--bb-rose); }

.bb-tabs{ display:flex; flex-wrap: wrap; justify-content:center; gap: 10px; margin-bottom: clamp(40px,5vw,64px); }
.bb-tab{
  font-family: var(--bb-body); font-weight:500; font-size: 12px; letter-spacing:.14em; text-transform: uppercase;
  padding: 12px 24px; border-radius: 100px; border: 2px solid var(--bb-rose-soft);
  background: transparent; color: var(--bb-charcoal); transition: all .35s var(--bb-ease);
}
.bb-tab:hover{ border-color: var(--bb-ink); }
.bb-tab.is-active{ background: var(--bb-rose); border-color: var(--bb-ink); color: var(--bb-cream-light); }

.bb-menu-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: clamp(20px,2.5vw,32px); }
.bb-menu-cat-block{ margin-bottom: clamp(50px,7vw,90px); }
.bb-menu-cat-title{ font-family: var(--bb-display); font-style: italic; font-size: clamp(2rem,4vw,3rem); color: var(--bb-rose); margin-bottom: 32px; text-align:center; }
.bb-menu-cat-block.is-hidden{ display: none; }

.bb-empty{ text-align: center; padding: 60px 0; font-style: italic; font-family: var(--bb-display); font-size: 1.6rem; color: var(--bb-rose); }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */

[data-reveal]{ opacity: 0; transform: translateY(34px); transition: opacity 1s var(--bb-ease), transform 1s var(--bb-ease); }
[data-reveal].is-visible{ opacity: 1; transform: none; }
[data-reveal-delay="1"]{ transition-delay: .12s; }
[data-reveal-delay="2"]{ transition-delay: .24s; }
[data-reveal-delay="3"]{ transition-delay: .36s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px){
  .bb-editorial{ grid-template-columns: 1fr; }
  .bb-editorial--reverse .bb-editorial__media{ order: 0; }
  .bb-gallery{ columns: 2; }
  .bb-footer__grid{ grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 720px){
  .bb-burger{ display: flex; }
  .bb-nav{
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px);
    background: var(--bb-cream-light); flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 8px; padding: 40px; transform: translateX(100%);
    transition: transform .5s var(--bb-ease); box-shadow: -20px 0 60px rgba(88,89,91,.15);
  }
  .bb-nav.is-open{ transform: none; }
  .bb-nav a{ font-size: 15px; }
  .bb-gallery{ columns: 1; }
  .bb-strip__item{ gap: 18px; }
  .bb-strip__item::after{ display:none; }
}

/* ============================================================
   COMPONENTES v2 — badges, ratings, tilt, geometría, marquee,
   nav sticky de menú, mapa, top 3, temporada
   ============================================================ */

/* Card: top row (categoría + rating), foot (precio + tag), badges */
.bb-card__top{ display:flex; justify-content:space-between; align-items:center; gap:10px; min-height: 16px; }
.bb-card__rating{ font-family: var(--bb-body); font-weight:500; font-size:11px; letter-spacing:.02em; color: var(--bb-rose-deep); white-space:nowrap; }
.bb-card__rating i{ font-style: normal; opacity:.6; }
.bb-card__foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top: 4px; flex-wrap: wrap; }
.bb-card__tag{ font-family: var(--bb-body); font-weight:500; font-size:10px; letter-spacing:.04em; color: var(--bb-sage-dark); }
.bb-card__ph{ position: relative; }
.bb-card__ph span{ font-family: var(--bb-display); font-size: 1.5rem; color: rgba(255,255,255,.7); letter-spacing:.04em; }
.bb-card__ph em{ font-style: italic; }
.bb-card__media{ position: relative; }
.bb-badge{
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: var(--bb-body); font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px; border: var(--bb-outline) solid var(--bb-ink);
}
.bb-badge--pop{ background: var(--bb-peach); color: var(--bb-ink); }

/* Tilt cards (Top 3) — girados ~20°, flotan al hover */
.bb-top3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 60px); padding-block: 30px; }
.bb-card--tilt{ transform: rotate(var(--tilt, -8deg)); transition: transform .55s var(--bb-ease), box-shadow .55s var(--bb-ease); }
.bb-card--tilt:hover{ transform: rotate(0deg) translateY(-14px) scale(1.02); box-shadow: 0 30px 60px -20px rgba(88,89,91,.4); z-index: 5; }
.bb-top3 .bb-card-wrap:nth-child(1){ margin-top: 40px; }
.bb-top3 .bb-card-wrap:nth-child(1) .bb-card{ --tilt: -18deg; }
.bb-top3 .bb-card-wrap:nth-child(2) .bb-card{ --tilt: 6deg; }
.bb-top3 .bb-card-wrap:nth-child(3){ margin-top: 56px; }
.bb-top3 .bb-card-wrap:nth-child(3) .bb-card{ --tilt: 20deg; }
.bb-top3__rank{
  position: absolute; top: -18px; right: -10px; z-index: 6;
  width: 52px; height: 52px; border-radius: 50%; border: var(--bb-outline) solid var(--bb-ink);
  background: var(--bb-rose); color: var(--bb-cream-light);
  display: grid; place-items: center; font-family: var(--bb-display); font-size: 1.5rem; font-weight: 500;
}
.bb-card-wrap{ position: relative; }

/* Geometría animada (formas sólidas con colores de marca) */
.bb-geo{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bb-geo > *{ position: absolute; opacity: .5; }
.bb-geo__circle{ border-radius: 50%; }
.bb-geo__ring{ border-radius: 50%; background: transparent !important; border: 28px solid var(--bb-sage); }
.bb-geo__blob{ border-radius: 42% 58% 60% 40% / 48% 42% 58% 52%; }
.bb-geo .g1{ width: 240px; height: 240px; background: var(--bb-peach); top: -60px; left: -60px; animation: bbGeoA 18s var(--bb-ease) infinite alternate; }
.bb-geo .g2{ width: 180px; height: 180px; top: 30%; right: -50px; animation: bbGeoB 22s var(--bb-ease) infinite alternate; }
.bb-geo .g3{ width: 130px; height: 130px; background: var(--bb-rose-soft); bottom: -40px; left: 22%; animation: bbGeoA 26s var(--bb-ease) infinite alternate-reverse; }
.bb-geo .g4{ width: 90px; height: 90px; background: var(--bb-sage); bottom: 12%; right: 18%; animation: bbGeoB 20s var(--bb-ease) infinite alternate; }
@keyframes bbGeoA{ to{ transform: translate(40px, 30px) rotate(40deg); } }
@keyframes bbGeoB{ to{ transform: translate(-36px, -28px) rotate(-30deg) scale(1.1); } }
.bb-section{ z-index: 1; }
.bb-section > .bb-wrap{ position: relative; z-index: 2; }

/* Producto de temporada */
.bb-seasonal{ position: relative; background: var(--bb-rose); color: var(--bb-cream-light); overflow: hidden; }
.bb-seasonal__inner{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; position: relative; z-index: 2; }
.bb-seasonal .bb-eyebrow{ color: var(--bb-cream-light); }
.bb-seasonal h2{ color: var(--bb-cream-light); margin: 18px 0 18px; }
.bb-seasonal p{ color: var(--bb-cream-light); opacity: .92; font-size: 1.05rem; }
.bb-seasonal__price{ font-family: var(--bb-display); font-size: 2.4rem; margin: 12px 0 28px; display:block; }
.bb-seasonal__media{ position: relative; }
.bb-seasonal__media .bb-card__media, .bb-seasonal__media img{
  aspect-ratio: 4/5; border-radius: var(--bb-radius-lg); overflow:hidden; border: var(--bb-outline) solid var(--bb-ink);
  width: 100%; object-fit: cover; transform: rotate(-4deg);
}
.bb-seasonal__ph{ width:100%; aspect-ratio:4/5; border-radius: var(--bb-radius-lg); border: var(--bb-outline) solid var(--bb-ink); display:grid; place-items:center; transform: rotate(-4deg); }
.bb-seasonal__ph span{ font-family: var(--bb-display); font-size: 2.2rem; color: rgba(255,255,255,.78); letter-spacing: .04em; }
.bb-seasonal__ph em{ font-style: italic; }

/* Marquee de reseñas con bordes difuminados */
.bb-reviews{ padding-block: var(--bb-section-y); background: var(--bb-cream-light); overflow: hidden; }
.bb-reviews__head{ text-align:center; margin-bottom: 44px; }
.bb-reviews__avg{ font-family: var(--bb-display); font-size: clamp(3rem,7vw,5rem); color: var(--bb-rose); line-height:1; }
.bb-reviews__avg sup{ font-size: .4em; }
.bb-reviews__count{ font-family: var(--bb-body); font-size: 12px; letter-spacing:.18em; text-transform: uppercase; color: var(--bb-charcoal); opacity:.7; }
.bb-marquee{
  position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.bb-marquee__track{ display: flex; gap: 22px; width: max-content; animation: bbMarquee 48s linear infinite; }
.bb-marquee:hover .bb-marquee__track{ animation-play-state: paused; }
@keyframes bbMarquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.bb-quote{
  flex: 0 0 auto; width: min(360px, 80vw);
  background: var(--bb-cream); border: var(--bb-outline) solid var(--bb-ink); border-radius: var(--bb-radius-lg);
  padding: 26px 28px;
}
.bb-quote p{ font-family: var(--bb-display); font-style: italic; font-size: 1.25rem; line-height: 1.4; margin: 0 0 14px; color: var(--bb-charcoal); }
.bb-quote span{ font-family: var(--bb-body); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--bb-rose-deep); }
.bb-quote span::before{ content: '— '; }

/* ============================================================
   PÁGINA MENÚ — navegación sticky estilo Uber Eats
   ============================================================ */
.bb-menunav{
  position: sticky; top: clamp(68px, 8.5vh, 90px); z-index: 60;
  margin: 18px var(--bb-gutter) 6px;
  background: var(--bb-rose);
  border: var(--bb-outline) solid var(--bb-ink);
  border-radius: 100px;
  padding: 8px;
  box-shadow: 0 14px 34px -18px rgba(88,89,91,.55);
}
.bb-menunav__scroll{
  display: flex; gap: 6px; overflow-x: auto; padding-inline: 4px;
  scrollbar-width: none; scroll-behavior: smooth;
}
.bb-menunav__scroll::-webkit-scrollbar{ display: none; }
.bb-menunav__link{
  flex: 0 0 auto;
  font-family: var(--bb-body); font-weight: 500; font-size: 13px; letter-spacing: .06em;
  padding: 9px 18px; border-radius: 100px; border: 2px solid transparent;
  color: var(--bb-ink); white-space: nowrap; background: transparent; cursor: pointer;
  transition: background .3s var(--bb-ease), color .3s var(--bb-ease), border-color .3s var(--bb-ease);
}
.bb-menunav__link:hover{ background: rgba(0,0,0,.08); }
.bb-menunav__link.is-active{ background: var(--bb-cream-light); color: var(--bb-ink); border-color: var(--bb-ink); }

.bb-menu-section{ scroll-margin-top: clamp(140px, 20vh, 170px); padding-top: clamp(40px,6vw,72px); }
.bb-menu-section__title{ font-family: var(--bb-display); font-style: italic; font-size: clamp(2rem,4.5vw,3.4rem); color: var(--bb-rose); margin-bottom: 30px; display:flex; align-items:baseline; gap:14px; }
.bb-menu-section__count{ font-family: var(--bb-body); font-style: normal; font-size: 12px; letter-spacing:.14em; color: var(--bb-charcoal); opacity:.5; }

/* Mapa / ubicación */
.bb-location{ background: var(--bb-cream-light); }
.bb-location__inner{ display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px,5vw,70px); align-items: stretch; }
.bb-location__info h2{ margin-bottom: 24px; }
.bb-location__item{ margin-bottom: 22px; }
.bb-location__item h4{ font-family: var(--bb-body); font-weight:500; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color: var(--bb-rose); margin:0 0 6px; }
.bb-location__item p{ margin: 0; font-size: 1rem; }
.bb-location__map{ border-radius: var(--bb-radius-lg); overflow: hidden; border: var(--bb-outline) solid var(--bb-ink); min-height: 360px; }
.bb-location__map iframe{ width: 100%; height: 100%; min-height: 360px; border: 0; display: block; filter: grayscale(.18) contrast(1.02); }
.bb-hours-row{ display:flex; justify-content:space-between; max-width: 320px; padding: 5px 0; border-bottom: 1px dashed var(--bb-rose-soft); font-size: .95rem; }
.bb-hours-row span:first-child{ color: var(--bb-charcoal); }
.bb-hours-row span:last-child{ color: var(--bb-rose-deep); font-weight: 500; }

/* ============================================================
   RESPONSIVE v2
   ============================================================ */
@media (max-width: 900px){
  .bb-top3{ grid-template-columns: 1fr; gap: 50px; }
  .bb-top3 .bb-card-wrap{ margin-top: 0 !important; animation: bbBob 4.6s ease-in-out infinite alternate; }
  .bb-top3 .bb-card-wrap:nth-child(2){ animation-delay: -1.5s; }
  .bb-top3 .bb-card-wrap:nth-child(3){ animation-delay: -3s; }
  .bb-top3 .bb-card{ transform: rotate(-3deg) !important; }
  .bb-seasonal__inner{ grid-template-columns: 1fr; }
  .bb-location__inner{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .bb-quote{ width: 78vw; }
}

/* ============================================================
   MOVIMIENTO SUTIL v3 — temporada flotante, bob de tarjetas
   ============================================================ */
@keyframes bbBob{ from{ transform: translateY(0); } to{ transform: translateY(-10px); } }
@keyframes bbFloatY{ from{ transform: translateY(0); } to{ transform: translateY(-14px); } }

/* Producto de temporada: flota siempre; en desktop responde al cursor */
.bb-seasonal__media{ animation: bbFloatY 6s ease-in-out infinite alternate; will-change: transform; }
.bb-seasonal__media img, .bb-seasonal__ph{ transition: transform .6s var(--bb-ease); }
@media (hover: hover){
  .bb-seasonal__media:hover img,
  .bb-seasonal__media:hover .bb-seasonal__ph{ transform: rotate(-1.5deg) scale(1.035); }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .bb-marquee__track,
  .bb-seasonal__media,
  .bb-top3 .bb-card-wrap,
  .bb-geo > *,
  .bb-hero__slide{ animation: none !important; }
}