/* ============================================================
   PREUGE — Estilos Principales  v4.1
   Estética: Koliba Eslovaca de Cicmany — techo ahumado,
   carbón de leña, brasa de hogar, lino viejo manchado de humo.
   ============================================================

   COLORES — como las paredes de una koliba con horno de leña:
   --carbon    : #080604   carbón profundo / hollín
   --smoke     : #1E1A14   techo ahumado / vigas negras
   --hueso     : #D4C49C   lino viejo manchado de humo
   --hueso-dark: #BCA87A   madera clara muy envejecida
   --crema     : #E6D9BC   crema ahumada / tarjetas
   --acento    : #C4711C   brasa / ámbar de vela
   ============================================================ */

:root {
  /* Fondos */
  --carbon:       #080604;   /* carbón / hollín — navbar, footer */
  --carbon-hover: #18120A;
  --smoke:        #1E1A14;   /* techo ahumado — secciones oscuras alternas */
  --hueso:        #f4f1e9;   /* lino claro — página principal */
  --hueso-dark:   #e8e2d4;   /* lino ligeramente más oscuro — secciones alternas */
  --crema:        #faf8f3;   /* crema suave — tarjetas */

  /* Texto */
  --texto:        #080604;   /* carbón — títulos */
  --texto-cuerpo: #2A1606;   /* marrón oscuro de madera */
  --texto-muted:  #725A38;   /* marrón humo claro */

  /* Acento — brasa / ámbar de vela / miel oscura */
  --acento:       #C4711C;
  --acento-dark:  #8E4E10;
  --acento-suave: #D8C09A;   /* resplandor ahumado */

  /* Madera oscura rica para categorías */
  --marron:       #6A3210;

  /* Bordes */
  --borde:        rgba(8,6,4,.12);
  --borde-media:  rgba(8,6,4,.22);

  /* Tipografía */
  --font-display: 'Inter', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;

  /* Layout */
  --radio:        8px;
  --radio-sm:     5px;
  --radio-lg:     14px;
  --sombra:       0 1px 4px rgba(8,6,4,.12), 0 4px 16px rgba(8,6,4,.10);
  --sombra-hover: 0 8px 32px rgba(8,6,4,.24);
  --transicion:   0.2s ease;
  --max-width:          1160px;
  --nav-height:         68px;
  --container-padding:  32px;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family:    var(--font-body);
  background:     var(--hueso);
  color:          var(--texto-cuerpo);
  line-height:    1.7;
  -webkit-font-smoothing: antialiased;
}

/* ─── Grain texture overlay ──────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.048;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── Warm glow on sections ──────────────────────────────────── */
.seccion-menu {
  background: var(--hueso);
}
.seccion-nosotros {
  background: var(--smoke);
}
.seccion-resenas {
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(196,113,28,.05) 0%, transparent 60%), var(--hueso);
}
img   { max-width: 100%; height: auto; display: block; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); }

/* ─── Contenedor ─────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-padding); }

/* ─── Botones — solo 2 estilos, nunca más ────────────────────── */
.btn {
  display:      inline-flex;
  align-items:  center;
  gap:          8px;
  padding:      11px 28px;
  border-radius: var(--radio-sm);
  font-weight:  600;
  font-size:    .88rem;
  letter-spacing: .4px;
  border:       2px solid transparent;
  transition:   all var(--transicion);
  white-space:  nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primario {
  background:   var(--acento);
  color:        #fff;
  border-color: var(--acento);
}
.btn-primario:hover { background: var(--acento-dark); border-color: var(--acento-dark); }

.btn-outline-claro {
  background:   transparent;
  color:        #fff;
  border-color: rgba(255,255,255,.4);
}
.btn-outline-claro:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn-outline-oscuro {
  background:   transparent;
  color:        var(--carbon);
  border-color: var(--borde-media);
}
.btn-outline-oscuro:hover { border-color: var(--acento); color: var(--acento); }

/* ─── NAVBAR — refined dark glass ────────────────────────────── */
.navbar {
  position:      sticky;
  top:           0;
  z-index:       1000;
  height:        var(--nav-height);
  background:    var(--smoke);
  border-bottom: 1px solid rgba(196,113,28,.22);
  box-shadow:    0 2px 24px rgba(0,0,0,.35);
}
/* No scroll state change — always solid smoke */
.navbar--scrolled {
  background:  var(--smoke);
  box-shadow:  0 2px 24px rgba(0,0,0,.35);
}
.navbar__inner {
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
}

/* Logo */
.navbar__logo { display: flex; align-items: center; }
.navbar__logo-img { height: 44px; width: auto; max-width: 190px; object-fit: contain; display: block; transition: opacity var(--transicion); }
.navbar__logo-img:hover { opacity: .82; }
.navbar__logo-text {
  font-family:    var(--font-display);
  font-size:      1.1rem;
  font-weight:    800;
  color:          var(--hueso);
  letter-spacing: 4px;
  text-transform: uppercase;
  transition:     color var(--transicion);
}
.navbar__logo-text:hover { color: var(--acento); }

/* Nav links */
.navbar__nav { display: flex; align-items: center; gap: 30px; }
.navbar__nav a {
  color:          rgba(242,233,216,.72);
  font-size:      .76rem;
  font-weight:    500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition:     color var(--transicion);
  padding-bottom: 3px;
  border-bottom:  1px solid transparent;
}
.navbar__nav a:hover,
.navbar__nav a.activo {
  color:              var(--acento);
  border-bottom-color: rgba(196,113,28,.55);
}

/* Ícono del carrito */
.navbar__carrito {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      transparent;
  color:           var(--acento);
  border:          1.5px solid rgba(196,113,28,.5);
  transition:      background var(--transicion), border-color var(--transicion), color var(--transicion);
  flex-shrink:     0;
}
.navbar__carrito:hover {
  background:    var(--acento);
  border-color:  var(--acento);
  color:         #fff;
}
.navbar__carrito svg { width: 18px; height: 18px; }

.carrito-badge {
  position:    absolute;
  top:         -6px;
  right:       -6px;
  background:  var(--hueso);
  color:       var(--acento);
  width:       17px;
  height:      17px;
  border-radius: 50%;
  font-size:   .62rem;
  font-weight: 700;
  display:     none;
  align-items: center;
  justify-content: center;
}
.carrito-badge.visible { display: flex; }

/* Hamburguesa */
.navbar__toggle {
  display:    none;
  flex-direction: column;
  gap:        5px;
  background: none;
  border:     none;
  padding:    4px;
}
.navbar__toggle span {
  display:      block;
  width:        22px;
  height:       1.5px;
  background:   rgba(255,255,255,.7);
  border-radius: 1px;
}

/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
  position:   relative;
  min-height: 68vh;
  display:    flex;
  align-items: center;
  background: var(--carbon);
  overflow:   hidden;
}
.hero__bg {
  position: absolute;
  inset:    0;
  /* FOTO HERO: Sube en Apariencia → Personalizar → Imagen de cabecera.
     Ideal: foto horizontal, cálida, del trdelník o del local.
     Mínimo 1600×900px. */
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.hero__overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(
    160deg,
    rgba(8,6,4,.8) 0%,
    rgba(8,6,4,.55) 55%,
    rgba(8,6,4,.7) 100%
  );
}
.hero__content {
  position:   relative;
  z-index:    2;
  max-width:  580px;
  color:      #fff;
}
.hero__eyebrow {
  color:         rgba(255,255,255,.5);
  font-size:     .7rem;
  font-weight:   500;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--acento);
  padding-bottom: 8px;
}
/* Rotador de frases */
.hero__eyebrow--rotador {
  position: relative;
  height: 1.6em;
  overflow: visible;
}
.hero__eyebrow-item {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .55s ease, transform .55s ease;
  white-space: nowrap;
  pointer-events: none;
}
.hero__eyebrow-item.activo {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero__titulo {
  font-family:    'Playfair Display', Georgia, serif;
  font-size:      clamp(2.8rem, 6.5vw, 5rem);
  font-weight:    700;
  line-height:    1.1;
  letter-spacing: -.5px;
  color:          var(--hueso);
  margin-bottom:  20px;
}
.hero__titulo em {
  font-style:     italic;
  font-weight:    800;
  color:          var(--acento);
  display:        inline-block;
}
.hero__subtitulo {
  font-size:     1rem;
  color:         rgba(255,255,255,.6);
  line-height:   1.8;
  margin-bottom: 36px;
  max-width:     440px;
}
.hero__acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* Scroll hint */
.hero__scroll {
  position:   absolute;
  bottom:     28px;
  left:       50%;
  transform:  translateX(-50%);
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap:        6px;
  color:      rgba(255,255,255,.28);
  font-size:  .65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation:  hero-bounce 2.4s infinite;
}
.hero__scroll svg { width: 14px; height: 14px; }
@keyframes hero-bounce {
  0%,100% { transform: translateX(-50%) translateY(0);   opacity: .28; }
  50%      { transform: translateX(-50%) translateY(7px); opacity: .6; }
}

/* ─── DIVISOR ORNAMENTAL ─────────────────────────────────────
   Separa las secciones principales.
   Divisores ornamentales: ver .divisor-folk más abajo.           */

/* ─── DIVISORES FOLK ─────────────────────────────────────────── */
.divisor-folk {
  padding: 4px 0;
  overflow: visible;
}
.divisor-folk__svg {
  width:   100%;
  height:  auto;
  display: block;
  color:   var(--acento);       /* oro antiguo en secciones claras */
  opacity: .75;
  transition: opacity var(--transicion);
}
.divisor-folk.en-oscuro .divisor-folk__svg {
  color:   var(--acento);       /* el oro se ve bien en oscuro también */
  opacity: .45;
}
/* El tulipán es más alto — ajusta el padding de su contenedor */
.divisor-folk--tulipan { padding: 0; }

/* ─── CABECERA DEL MENÚ — título izq + recomendado dcha ─────── */
.menu-cabecera {
  padding:        64px 0 56px;
  background:     var(--smoke);
  border-bottom:  2px solid rgba(196,113,28,.5);
  position:       relative;
}
/* Pattern + gold grain overlay */
.menu-cabecera::after {
  content:  '';
  position: absolute;
  inset:    0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 50%, rgba(196,113,28,.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 80% at 80% 20%, rgba(196,113,28,.04) 0%, transparent 60%),
    url('../img/pattern white.png') repeat;
  background-size: auto, auto, 50%;
  opacity:        .07;
  pointer-events: none;
  z-index:        0;
}

/* Banda superior: eyebrow + línea dorada */
.menu-cabecera__band {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(196,113,28,.4);
  padding-bottom: 10px;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.menu-cabecera__band .hero__eyebrow {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  color: rgba(212,196,156,.55);
}

/* Fila principal: título izq + recomendado dcha */
.menu-cabecera__cuerpo {
  display: flex;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.menu-cabecera__texto { flex: 1; min-width: 0; }
.menu-cabecera__texto .hero__titulo { color: var(--hueso); margin: 0; }

/* Columna derecha: recomendado */
.menu-cabecera__recomendado {
  flex-shrink: 0;
  width: 490px;
}
/* ── "Oferta del día" título ── */
.oferta-del-dia-titulo {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.oferta-del-dia-titulo::before,
.oferta-del-dia-titulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f4f1e9, transparent);
}
.oferta-del-dia-titulo__text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #f4f1e9;
  white-space: nowrap;
}

/* Descripción (del panel) bajo el label */
.menu-cabecera__recomendado-desc {
  font-size: .83rem;
  color: rgba(212,196,156,.6);
  font-style: italic;
  margin: 0 0 16px;
  line-height: 1.4;
}

/* Lista de cards de oferta */
.menu-cabecera__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}

/* ── Tarjeta horizontal (modo recomendado normal) ── */
.producto-card--horizontal {
  flex-direction: row !important;
  align-items: stretch;
}
.producto-card--horizontal .producto-card__img-wrap {
  width: 110px;
  min-width: 110px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio) 0 0 var(--radio);
}
.producto-card--horizontal .producto-card__cuerpo {
  flex: 1;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
}
.producto-card--horizontal .producto-card__nombre { font-size: .92rem; }
.producto-card--horizontal .producto-card__extracto {
  font-size: .75rem;
  -webkit-line-clamp: 2;
  margin-bottom: 6px;
}
.producto-card--horizontal .producto-card__precio { font-size: .95rem; }
.producto-card--horizontal .producto-card__btn {
  margin-top: auto;
  padding: 6px 12px;
  font-size: .76rem;
}
.producto-card--horizontal .badge-empaque,
.producto-card--horizontal .badge-no-domicilio { font-size: .72rem; }

/* ── Tarjeta de oferta especial ── */
.oferta-card {
  flex-direction: row !important;
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196,113,28,.45);
  border-radius: var(--radio);
  cursor: pointer;
  align-items: stretch;
  animation: oferta-glow 2.6s ease-in-out infinite;
}

@keyframes oferta-glow {
  0%, 100% {
    border-color: rgba(196,113,28,.35);
    box-shadow:
      0 4px 20px rgba(0,0,0,.4),
      0 18px 40px -8px rgba(196,113,28,.18);
  }
  50% {
    border-color: rgba(196,113,28,.9);
    box-shadow:
      0 4px 24px rgba(0,0,0,.45),
      0 22px 52px -6px rgba(196,113,28,.42);
  }
}

.oferta-card .producto-card__img-wrap {
  width: 300px !important;
  min-width: 300px !important;
  height: auto !important;
  aspect-ratio: unset !important;
  border-radius: 0 !important;
  overflow: hidden;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.oferta-card .producto-card__img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform .45s ease;
}
.oferta-card:hover .producto-card__img-wrap img {
  transform: scale(1.05);
}

.oferta-card .sin-foto {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.oferta-card .producto-card__cuerpo {
  flex: 1;
  min-width: 0;
  min-height: 420px;
  padding: 32px 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.oferta-card .producto-card__extracto {
  font-size: 1.15rem;
  line-height: 1.7;
  -webkit-line-clamp: unset;
  margin-bottom: 0;
  flex: 1;
  display: flex;
  align-items: center;
  overflow: visible;
}

.oferta-card .producto-card__precio {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--acento);
}

.oferta-card .producto-card__btn {
  margin-top: auto;
  width: 100%;
  padding: 11px 20px;
  font-size: .88rem;
  background: var(--acento);
  color: #fff;
  border-color: var(--acento);
  font-weight: 600;
  display: block;
  text-align: center;
}
.oferta-card .producto-card__btn:hover {
  background: var(--acento-dark);
  border-color: var(--acento-dark);
}

@media (max-width: 960px) {
  .menu-cabecera__cuerpo { flex-direction: column; }
  .menu-cabecera__recomendado { width: 100%; }
  .menu-cabecera__cards { flex-direction: row; flex-wrap: wrap; }
  .producto-card--horizontal { width: calc(50% - 5px); }
  .oferta-card { width: calc(50% - 8px); }
}
@media (max-width: 600px) {
  .menu-cabecera { padding: 40px 0 32px; }
  .producto-card--horizontal { width: 100%; }
  .oferta-card { width: 100%; }
}

/* ─── OFERTA PRODUCTOS MODAL ─────────────────────────────────── */
.oferta-modal-productos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(196,113,28,.2);
}
.oferta-modal-producto {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--acento-suave);
  border-radius: var(--radio-sm);
  padding: 8px 12px;
}
.oferta-modal-producto img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.oferta-modal-producto__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.oferta-modal-producto__info strong {
  font-size: .9rem;
  font-weight: 600;
  color: var(--texto);
}
.oferta-modal-producto__info span {
  font-size: .78rem;
  color: var(--texto-suave);
}

/* ─── OFERTA EXTRAS MODAL ────────────────────────────────────── */
.oferta-extras-grupo {
  margin-bottom: 18px;
}
.oferta-extras-grupo__label {
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acento-dark);
  margin-bottom: 8px;
}
.oferta-extras-opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-size: .9rem;
  transition: background var(--transicion);
}
.oferta-extras-opcion:hover { background: var(--acento-suave); }
.oferta-extras-opcion input { accent-color: var(--acento); width: 15px; height: 15px; }

#oferta-modal-precio-total {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--acento-dark);
  margin: 12px 0;
}

/* ─── Barrio selector ────────────────────────────────────────────────────── */
.barrio-selector { position: relative; }
.barrio-selector input[type=text] { width: 100%; }
.barrio-lista {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #ddd;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 210px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  padding: 4px 0;
  margin: 0;
  list-style: none;
}
.barrio-lista li {
  padding: 9px 14px;
  cursor: pointer;
  font-size: .88rem;
  border-bottom: 1px solid #f5f5f5;
  transition: background .15s;
}
.barrio-lista li:last-child { border-bottom: none; }
.barrio-lista li:hover { background: rgba(196,113,28,.1); color: var(--acento-dark); }
.barrio-precio-info {
  font-size: .83rem;
  font-weight: 700;
  color: var(--acento-dark);
  margin: 5px 0 0;
}
.barrio-disclaimer {
  font-size: .76rem;
  color: #999;
  font-style: italic;
  margin: 4px 0 0;
  line-height: 1.4;
}

/* ─── Topping toggle en modal de producto ────────────────────────────────── */
#modal-toppings {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #eee;
}
.modal-topping-toggle {
  width: 100%;
  padding: 11px 16px;
  background: #fff8e8;
  border: 2px solid var(--acento);
  border-radius: var(--radio-sm);
  color: var(--acento-dark);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  letter-spacing: .2px;
  transition: background .2s, border-color .2s;
}
.modal-topping-toggle:hover {
  background: rgba(196,113,28,.15);
}
.modal-topping-toggle--activo {
  background: rgba(196,113,28,.18);
  border-style: solid;
}
.modal__agregar {
  margin-top: 20px;
}

/* ─── Toppings adicionales en modal de oferta ────────────────────────────── */
/* Variant selector in offer modal */
.oferta-variante-select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--borde-media);
  border-radius: var(--radio-sm);
  font-size: .92rem;
  font-family: var(--font-body);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s;
  margin-bottom: 4px;
}
.oferta-variante-select:focus {
  outline: none;
  border-color: var(--acento);
}

/* Toppings section — always visible, no toggle */
.oferta-toppings-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(196,113,28,.2);
}
.oferta-topping-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-muted);
  margin-bottom: 5px;
}
.oferta-topping-select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--borde-media);
  border-radius: var(--radio-sm);
  font-size: .88rem;
  font-family: var(--font-body);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s;
}
.oferta-topping-select:focus {
  outline: none;
  border-color: var(--acento);
}
.oferta-topping-error {
  border-color: #d63638 !important;
  border-width: 2px !important;
  animation: shake .3s ease;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ─── SABOR DE TEMPORADA — card dentro del menú ──────────────── */
.destacado-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 32px rgba(8,6,4,.08);
  border: 1px solid var(--hueso-dark);
  max-width: 820px;
  margin: 0 auto;
}
.destacado-card__foto {
  overflow: hidden;
  background: var(--hueso-dark);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.destacado-card__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.destacado-card__cuerpo {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.destacado-card__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
  background: rgba(196,113,28,.1);
  border: 1px solid rgba(196,113,28,.3);
  border-radius: 20px;
  padding: 3px 10px;
  width: fit-content;
}
.destacado-card__nombre {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--carbon);
  margin: 0;
  line-height: 1.2;
}
.destacado-card__desc {
  font-size: .92rem;
  color: var(--texto-cuerpo);
  line-height: 1.6;
  margin: 0;
}
.destacado-card__nota {
  font-size: .82rem;
  color: var(--texto-muted);
  margin: 0;
}
.destacado-card__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.destacado-card__precio {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--acento-dark);
}
@media (max-width: 900px) {
  .menu-cabecera--con-card { grid-template-columns: 1fr; gap: 28px; }
  .menu-cabecera { padding: 40px 0 32px; }
}
@media (max-width: 700px) {
  .destacado-card { grid-template-columns: 1fr; }
  .destacado-card__foto { min-height: 220px; }
  .destacado-card__cuerpo { padding: 24px 22px; }
  .destacado-card__nombre { font-size: 1.35rem; }
}

/* ─── MENÚ — secciones por categoría ────────────────────────── */
.seccion-menu { padding: 0 0 96px; background: var(--hueso); }

/* Encabezado de sección */
.seccion-encabezado {
  margin-bottom: 40px;
}
.seccion-encabezado .eyebrow {
  display:        block;
  font-size:      .68rem;
  font-weight:    500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--acento);
  margin-bottom:  10px;
}
.seccion-encabezado h2 {
  font-family:  var(--font-display);
  font-size:    clamp(1.7rem, 3vw, 2.3rem);
  font-weight:  800;
  color:        var(--texto);
  line-height:  1.2;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.seccion-encabezado p { color: var(--texto-muted); font-size: .95rem; max-width: 460px; }

/* Filtros de categoría */
.filtros-menu {
  display:         flex;
  gap:             6px;
  flex-wrap:       wrap;
  margin-top:      48px;
  margin-bottom:   56px;
}
.filtro-btn {
  padding:       7px 18px;
  border-radius: 2px;
  border:        1px solid var(--borde-media);
  background:    transparent;
  color:         var(--texto-muted);
  font-weight:   500;
  font-size:     .78rem;
  letter-spacing: .5px;
  transition:    all var(--transicion);
  white-space:   nowrap;
}
.filtro-btn:hover { border-color: var(--acento); color: var(--acento); }
.filtro-btn.activo {
  background:   var(--carbon);
  border-color: var(--carbon);
  color:        var(--hueso);
}
.filtro-btn--temporada {
  border-color: rgba(196,113,28,.5);
  color: var(--acento-dark);
}
.filtro-btn--temporada:hover,
.filtro-btn--temporada.activo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

/* ─── CATEGORÍA DE MENÚ (sección visual) ─────────────────────── */
.menu-categoria { margin-bottom: 64px; }
.menu-categoria:last-child { margin-bottom: 0; }

/* Encabezado de categoría */
.categoria-encabezado {
  display:       flex;
  align-items:   baseline;
  gap:           16px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde);
}
.categoria-nombre {
  font-family:    var(--font-display);
  font-size:      .8rem;
  font-weight:    700;
  color:          var(--marron);
  line-height:    1;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}
.categoria-cantidad {
  font-size:   .76rem;
  color:       var(--texto-muted);
  font-weight: 400;
}

/* Grid de tarjetas dentro de la categoría */
.productos-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   20px;
}

/* ─── TARJETA DE PRODUCTO ────────────────────────────────────── */
.producto-card {
  background:    var(--crema);
  border-radius: var(--radio);
  box-shadow:    var(--sombra);
  border:        1px solid var(--borde);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  cursor:        pointer;
  transition:    transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.producto-card:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--sombra-hover);
  border-color: var(--acento-suave);
}

/* Foto rectangular */
.producto-card__img-wrap {
  width:        100%;
  aspect-ratio: 3 / 4;
  overflow:     hidden;
  background:   var(--hueso-dark);
  flex-shrink:  0;
}
.producto-card__img-wrap img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center;
  display:          block;
  transition:       transform 0.45s ease;
}
.producto-card:hover .producto-card__img-wrap img { transform: scale(1.06); }

/* Placeholder sin foto */
.producto-card__img-wrap .sin-foto {
  width:           100%;
  height:          100%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  color:           var(--texto-muted);
  font-size:       .72rem;
  opacity:         .5;
}
.sin-foto svg { width: 28px; height: 28px; }

/* Cuerpo */
.producto-card__cuerpo {
  padding:        14px 16px 18px;
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  text-align:     left;
}
.producto-card__nombre {
  font-family: var(--font-display);
  font-size:   .95rem;
  font-weight: 700;
  color:       var(--texto);
  line-height: 1.3;
}
.producto-card__extracto {
  font-size:  .77rem;
  color:      var(--texto-muted);
  line-height: 1.55;
  display:    -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:   hidden;
}
.producto-card__precio {
  font-family: var(--font-display);
  font-size:   1.05rem;
  font-weight: 800;
  color:       var(--acento);
  margin-top:  2px;
}
.producto-card__precio small { font-size: .7rem; font-weight: 400; color: var(--texto-muted); }

.badge-empaque {
  font-size:  .68rem;
  color:      var(--texto-muted);
  align-self: center;
  opacity:    .8;
}

.badge-no-domicilio {
  font-size:   .68rem;
  color:       var(--texto-muted);
  align-self:  center;
  opacity:     .7;
}

.producto-card__btn {
  margin-top:    auto;
  width:         100%;
  padding:       9px;
  border-radius: var(--radio-sm);
  background:    var(--acento);
  color:         #fff;
  border:        none;
  font-weight:   600;
  font-size:     .82rem;
  letter-spacing: .3px;
  transition:    background var(--transicion);

}
.producto-card__btn:hover { background: var(--acento-dark); }
.producto-card__btn--no-domicilio,
.producto-card__btn--no-domicilio:hover { background: var(--borde-media); color: var(--texto-muted); cursor: not-allowed; opacity: .7; }

/* ─── MODAL DE PRODUCTO ──────────────────────────────────────── */
.modal-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(8,6,4,.6);
  z-index:        2000;
  display:        flex;
  align-items:    flex-end;
  justify-content: center;
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transicion);
}
.modal-overlay.abierto { opacity: 1; pointer-events: all; }

.modal {
  background:    var(--crema);
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  width:         100%;
  max-width:     510px;
  max-height:    92vh;
  overflow-y:    auto;
  padding:       30px 26px 38px;
  transform:     translateY(100%);
  transition:    transform 0.3s cubic-bezier(.4,0,.2,1);
  position:      relative;
}
.modal-overlay.abierto .modal { transform: translateY(0); }

.modal__cerrar {
  position:    absolute;
  top:         14px;
  right:       14px;
  background:  var(--hueso);
  border:      none;
  width:       30px;
  height:      30px;
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   .9rem;
  color:       var(--texto-muted);
  transition:  background var(--transicion);
}
.modal__cerrar:hover { background: var(--acento-suave); color: var(--acento); }

.modal__foto {
  width:         84px;
  height:        84px;
  border-radius: 50%;
  overflow:      hidden;
  border:        2px solid var(--hueso-dark);
  margin:        0 auto 16px;
  background:    var(--hueso-dark);
}
.modal__foto img { width: 100%; height: 100%; object-fit: cover; }

.modal__nombre {
  font-family:  var(--font-display);
  font-size:    1.25rem;
  font-weight:  800;
  color:        var(--texto);
  text-align:   center;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}
.modal__descripcion {
  text-align:  center;
  color:       var(--texto-muted);
  font-size:   .87rem;
  margin-bottom: 18px;
  line-height: 1.65;
}
.modal__nota {
  background:   var(--acento-suave);
  border-left:  2px solid var(--acento);
  padding:      9px 13px;
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size:    .8rem;
  color:        var(--acento-dark);
  margin-bottom: 16px;
  line-height:  1.55;
}

.modal__variantes-label {
  font-size:     .72rem;
  font-weight:   600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:         var(--texto-muted);
  margin-bottom: 9px;
}
.modal__variantes { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }

.variante-opcion {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  border-radius:   var(--radio-sm);
  border:          1.5px solid var(--borde-media);
  cursor:          pointer;
  transition:      all var(--transicion);
}
.variante-opcion:hover        { border-color: var(--acento); }
.variante-opcion.seleccionada { border-color: var(--acento); background: var(--acento-suave); }
.variante-opcion input[type="radio"] { display: none; }
.variante-opcion__nombre { font-weight: 600; font-size: .88rem; color: var(--texto); }
.variante-opcion__precio { font-family: var(--font-display); font-weight: 800; color: var(--acento); font-size: .95rem; }

/* Cantidad */
.modal__cantidad-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.modal__cantidad-label { font-size: .72rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--texto-muted); }
.cantidad-control {
  display:      flex;
  align-items:  center;
  border:       1.5px solid var(--borde-media);
  border-radius: var(--radio-sm);
  overflow:     hidden;
}
.cantidad-btn {
  background:  none;
  border:      none;
  width:       34px;
  height:      34px;
  font-size:   1rem;
  color:       var(--texto);
  transition:  background var(--transicion);
  display:     flex;
  align-items: center;
  justify-content: center;
}
.cantidad-btn:hover { background: var(--hueso); }
.cantidad-numero {
  min-width:   30px;
  text-align:  center;
  font-weight: 700;
  font-size:   .92rem;
  border-left: 1.5px solid var(--borde);
  border-right: 1.5px solid var(--borde);
  height:      34px;
  display:     flex;
  align-items: center;
  justify-content: center;
}

.modal__agregar {
  width:         100%;
  padding:       12px;
  background:    var(--acento);
  color:         #fff;
  border:        none;
  border-radius: var(--radio-sm);
  font-size:     .92rem;
  font-weight:   600;
  letter-spacing: .3px;
  transition:    background var(--transicion);
}
.modal__agregar:hover    { background: var(--acento-dark); }
.modal__agregar:disabled { background: #ccc; cursor: not-allowed; }

/* ─── CARRITO SIDEBAR ────────────────────────────────────────── */
.carrito-sidebar {
  position:   fixed;
  top:        0;
  right:      0;
  width:      min(390px, 100vw);
  height:     100%;
  background: var(--crema);
  z-index:    3000;
  box-shadow: -4px 0 28px rgba(8,6,4,.18);
  display:    flex;
  flex-direction: column;
  transform:  translateX(100%);
  transition: transform 0.45s cubic-bezier(.4,0,.2,1);
}
.carrito-sidebar.abierto { transform: translateX(0); }

.carrito-sidebar__header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     16px 20px;
  background:  var(--carbon);
  color:       var(--hueso);
  flex-shrink: 0;
}
.carrito-sidebar__titulo { font-family: var(--font-display); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; }
.carrito-sidebar__cerrar {
  background:  rgba(255,255,255,.08);
  border:      none;
  width:       28px;
  height:      28px;
  border-radius: 50%;
  color:       rgba(255,255,255,.7);
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   .9rem;
  transition:  background var(--transicion);
}
.carrito-sidebar__cerrar:hover { background: rgba(255,255,255,.18); }

.carrito-sidebar__items {
  flex:       1;
  overflow-y: auto;
  padding:    14px;
  display:    flex;
  flex-direction: column;
  gap:        9px;
}
.carrito-vacio {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  height:         100%;
  gap:            12px;
  color:          var(--texto-muted);
  text-align:     center;
  opacity:        .55;
}
.carrito-vacio svg { width: 48px; height: 48px; }
.carrito-vacio p   { font-size: .88rem; }

.carrito-item {
  display:      flex;
  gap:          10px;
  padding:      11px;
  border-radius: var(--radio-sm);
  border:       1px solid var(--borde);
  background:   var(--hueso);
}
.carrito-item__foto { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--hueso-dark); }
.carrito-item__foto img { width: 100%; height: 100%; object-fit: cover; }
.carrito-item__info { flex: 1; min-width: 0; }
.carrito-item__nombre { font-weight: 600; font-size: .85rem; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrito-item__variante { font-size: .74rem; color: var(--texto-muted); }
.carrito-item__precio { font-weight: 700; color: var(--acento); font-size: .88rem; }
.carrito-item__acciones { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.carrito-item__qty { display: flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; }
.carrito-item__qty-btn {
  background:  var(--crema);
  border:      1px solid var(--borde-media);
  width:       20px;
  height:      20px;
  border-radius: 50%;
  font-size:   .82rem;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  background var(--transicion);
}
.carrito-item__qty-btn:hover { background: var(--acento-suave); }
.carrito-item__eliminar { background: none; border: none; color: var(--texto-muted); font-size: .74rem; padding: 2px 4px; transition: color var(--transicion); }
.carrito-item__eliminar:hover { color: #c0392b; }

.carrito-sidebar__footer {
  padding:    14px 18px 20px;
  border-top: 1px solid var(--borde);
  flex-shrink: 0;
  background: var(--crema);
}
.carrito-total {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   12px;
}
.carrito-total__label { font-size: .8rem; color: var(--texto-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .8px; }
.carrito-total__valor { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--acento); }

.carrito-domicilio-linea {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         6px 0 8px;
  font-size:       .8rem;
  color:           var(--texto-muted);
  border-bottom:   1px solid var(--borde);
  margin-bottom:   8px;
}
.carrito-domicilio-linea__valor { font-weight: 600; color: var(--acento); }
.carrito-sidebar__ir {
  width:         100%;
  padding:       12px;
  background:    var(--acento);
  color:         #fff;
  border:        none;
  border-radius: var(--radio-sm);
  font-size:     .9rem;
  font-weight:   600;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           8px;
  transition:    background var(--transicion);
  text-decoration: none;
  letter-spacing: .3px;
}
.carrito-sidebar__ir:hover { background: var(--acento-dark); }

/* ─── NOSOTROS ───────────────────────────────────────────────── */
.seccion-nosotros { padding: 80px 0; background: var(--smoke); color: var(--hueso); }
.nosotros-grid {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            60px;
  align-items:    center;
}
.nosotros__imagen {
  border-radius: var(--radio);
  overflow:      hidden;
  aspect-ratio:  4/3;
  background:    rgba(8,6,4,.06);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--texto-muted);
  text-align:    center;
  padding:       32px;
  /* FOTO NOSOTROS: sube en Panel → Medios y reemplaza este bloque.
     Sugerencia: foto cálida del local, del equipo, o proceso de preparación. */
}
.nosotros__imagen img { width: 100%; height: 100%; object-fit: cover; }
.nosotros__contenido .eyebrow {
  display:        block;
  font-size:      .7rem;
  font-weight:    500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--acento);
  margin-bottom:  12px;
}
.nosotros__contenido h2 {
  font-family:   var(--font-display);
  font-size:     clamp(1.45rem, 2.8vw, 1.95rem);
  font-weight:   800;
  color:         var(--hueso);
  margin-bottom: 14px;
  line-height:   1.25;
  letter-spacing: -0.5px;
}
.nosotros__contenido p { color: var(--crema); margin-bottom: 14px; line-height: 1.8; font-size: .95rem; }
.nosotros__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.badge-caracteristica {
  padding:       6px 13px;
  border-radius: 2px;
  border:        1px solid rgba(196,113,28,.35);
  font-size:     .76rem;
  font-weight:   500;
  color:         var(--hueso);
  background:    rgba(196,113,28,.12);
}

/* ─── CTA WHATSAPP ───────────────────────────────────────────── */
.seccion-whatsapp { padding: 60px 0; background: var(--carbon); text-align: center; }
.seccion-whatsapp .eyebrow {
  display:        block;
  font-size:      .68rem;
  font-weight:    500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          rgba(255,255,255,.35);
  margin-bottom:  12px;
}
.seccion-whatsapp h2 {
  font-family:   var(--font-display);
  font-size:     clamp(1.5rem, 2.8vw, 2rem);
  font-weight:   800;
  letter-spacing: -0.5px;
  color:         var(--hueso);
  margin-bottom: 10px;
}
.seccion-whatsapp p { font-size: .93rem; color: rgba(255,255,255,.5); margin-bottom: 26px; max-width: 400px; margin-inline: auto; line-height: 1.75; }
.seccion-whatsapp .acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ─── UBICACIONES ────────────────────────────────────────────── */
.seccion-ubicaciones { padding: 80px 0; background: var(--hueso); }
.seccion-encabezado-centrado { text-align: center; margin-bottom: 48px; }
.seccion-encabezado-centrado .eyebrow { display: block; font-size: .68rem; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--acento); margin-bottom: 10px; }
.seccion-encabezado-centrado h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.5px; color: var(--texto); margin-bottom: 8px; }
.seccion-encabezado-centrado p  { color: var(--texto-muted); font-size: .93rem; }

.ubicaciones-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.ubicacion-card {
  background:    var(--crema);
  border:        1px solid var(--borde);
  border-radius: var(--radio);
  padding:       26px;
  box-shadow:    var(--sombra);
  transition:    transform var(--transicion), box-shadow var(--transicion);
}
.ubicacion-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.ubicacion-card__icono { width: 38px; height: 38px; background: var(--acento-suave); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ubicacion-card__icono svg { width: 18px; height: 18px; color: var(--acento); }
.ubicacion-card__nombre { font-family: var(--font-display); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--texto); margin-bottom: 7px; }
.ubicacion-card__direccion { color: var(--texto-muted); font-size: .86rem; line-height: 1.65; margin-bottom: 14px; }
.ubicacion-card__link { display: inline-flex; align-items: center; gap: 5px; color: var(--acento); font-weight: 600; font-size: .82rem; transition: gap var(--transicion); }
.ubicacion-card__link:hover { gap: 9px; }

/* ─── CHECKOUT / CARRITO ─────────────────────────────────────── */
.pagina-carrito { padding: 40px 0 80px; min-height: calc(100vh - var(--nav-height)); background: var(--hueso); }
.pagina-carrito__titulo {
  font-family:    var(--font-display);
  font-size:      .85rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color:          var(--texto);
  margin-bottom:  32px;
  padding-bottom: 16px;
  border-bottom:  1px solid var(--borde-media);
}

.checkout-wrap {
  display:               grid;
  grid-template-columns: 1fr 340px;
  gap:                   24px;
  align-items:           start;
}
.checkout-panel {
  background:    var(--crema);
  border-radius: var(--radio);
  border:        1px solid var(--borde);
  box-shadow:    var(--sombra);
  padding:       22px;
  margin-bottom: 18px;
}
.checkout-panel:last-child { margin-bottom: 0; }
.checkout-panel h2 {
  font-family:    var(--font-display);
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--texto);
  margin-bottom:  16px;
  padding-bottom: 12px;
  border-bottom:  1px solid var(--borde);
}

/* Items en checkout */
.checkout-items-lista { display: flex; flex-direction: column; gap: 10px; }
.checkout-item {
  display:      flex;
  gap:          12px;
  padding:      11px;
  border-radius: var(--radio-sm);
  border:       1px solid var(--borde);
  background:   var(--hueso);
}
.checkout-item__foto { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--hueso-dark); }
.checkout-item__foto img { width: 100%; height: 100%; object-fit: cover; }
.checkout-item__info { flex: 1; }
.checkout-item__nombre  { font-weight: 700; color: var(--texto); font-size: .88rem; }
.checkout-item__variante { font-size: .77rem; color: var(--texto-muted); }
.checkout-item__precio-row { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; gap: 6px; }
.checkout-item__qty-ctrl { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; }
.checkout-item__qty-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--borde-media); background: var(--crema); display: flex; align-items: center; justify-content: center; font-size: .88rem; transition: background var(--transicion); }
.checkout-item__qty-btn:hover { background: var(--acento-suave); }
.checkout-item__subtotal { font-weight: 700; color: var(--acento); font-size: .9rem; }
.checkout-item__eliminar { background: none; border: none; color: var(--texto-muted); padding: 4px; font-size: .85rem; transition: color var(--transicion); }
.checkout-item__eliminar:hover { color: #c0392b; }
.checkout-vacio { text-align: center; padding: 28px 0; color: var(--texto-muted); }
.checkout-vacio a { color: var(--acento); font-weight: 600; }

/* Toggle domicilio / tienda */
.tipo-entrega-toggle { display: flex; border: 1.5px solid var(--borde-media); border-radius: var(--radio-sm); overflow: hidden; margin-bottom: 16px; }
.tipo-entrega-btn { flex: 1; padding: 9px; border: none; background: transparent; font-weight: 600; font-size: .84rem; color: var(--texto-muted); transition: all var(--transicion); }
.tipo-entrega-btn.activo { background: var(--carbon); color: var(--hueso); }

/* Formulario */
.form-grupo { margin-bottom: 14px; }
.form-grupo label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-muted); margin-bottom: 5px; }
.form-grupo input,
.form-grupo textarea,
.form-grupo select {
  width:         100%;
  padding:       9px 12px;
  border:        1.5px solid var(--borde-media);
  border-radius: var(--radio-sm);
  font-family:   var(--font-body);
  font-size:     .92rem;
  color:         var(--texto);
  background:    var(--crema);
  transition:    border-color var(--transicion);
  outline:       none;
}
.form-grupo input:focus,
.form-grupo textarea:focus,
.form-grupo select:focus { border-color: var(--acento); }
.form-grupo textarea { resize: vertical; min-height: 72px; }

/* Panel resumen */
.resumen-panel { position: sticky; top: calc(var(--nav-height) + 16px); }
.resumen-linea { display: flex; justify-content: space-between; padding: 6px 0; font-size: .86rem; border-bottom: 1px solid var(--borde); }
.resumen-linea:last-of-type { border-bottom: none; }
.resumen-total { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1.5px solid var(--borde-media); margin-top: 4px; font-size: .92rem; font-weight: 700; }
.resumen-total .valor { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--acento); }
.resumen-nota { font-size: .76rem; color: var(--texto-muted); margin-top: 6px; line-height: 1.5; }

.btn-enviar-pedido {
  width:         100%;
  padding:       13px;
  background:    #25D366;
  color:         #fff;
  border:        none;
  border-radius: var(--radio-sm);
  font-size:     .92rem;
  font-weight:   600;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           9px;
  margin-top:    16px;
  transition:    background var(--transicion);
  cursor:        pointer;
  letter-spacing: .2px;
}
.btn-enviar-pedido:hover    { background: #1EB858; }
.btn-enviar-pedido:disabled { background: #ccc; cursor: not-allowed; }
.btn-enviar-pedido svg      { width: 20px; height: 20px; }

/* ─── CARRITO DOS PASOS ──────────────────────────────────────── */
.carrito-encabezado {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             16px;
  margin-bottom:   28px;
  padding-bottom:  16px;
  border-bottom:   1px solid var(--borde-media);
}
.carrito-encabezado h1 {
  font-family:    var(--font-display);
  font-size:      .85rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color:          var(--texto);
}
.carrito-volver {
  font-size:  .85rem;
  color:      var(--texto-muted);
  transition: color var(--transicion);
}
.carrito-volver:hover { color: var(--acento); }

.carrito-paso {
  max-width:   620px;
  margin:      0 auto;
}

.carrito-total-fila {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         10px 0;
  font-size:       .9rem;
  font-weight:     600;
}
.carrito-total-fila--sub {
  color:         var(--texto-muted);
  font-weight:   500;
  font-size:     .85rem;
  border-top:    1px solid var(--borde);
  padding-top:   14px;
}
.carrito-total-fila--domicilio {
  color:       var(--texto-cuerpo);
  font-size:   .85rem;
}
.carrito-total-fila--total {
  border-top:  1.5px solid var(--borde-media);
  padding-top: 10px;
  font-weight: 700;
  font-size:   .95rem;
}
.carrito-total-fila .valor {
  font-family: var(--font-display);
  font-size:   1.2rem;
  font-weight: 800;
  color:       var(--acento);
}
.carrito-total-fila--sub .valor,
.carrito-total-fila--domicilio .valor {
  font-size: .95rem;
}

.carrito-nota {
  font-size:   .78rem;
  color:       var(--texto-muted);
  margin:      6px 0 20px;
  line-height: 1.5;
}

.carrito-continuar {
  width:      100%;
  margin-top: 8px;
  padding:    12px;
  font-size:  .95rem;
}

.domicilio-nota {
  background:    var(--acento-suave);
  border-left:   3px solid var(--acento);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  padding:       10px 14px;
  font-size:     .82rem;
  color:         var(--texto-cuerpo);
  line-height:   1.55;
  margin-bottom: 8px;
}

.carrito-volver-paso {
  display:        block;
  width:          100%;
  margin-top:     14px;
  padding:        10px;
  background:     none;
  border:         none;
  color:          var(--texto-muted);
  font-size:      .84rem;
  text-align:     center;
  cursor:         pointer;
  transition:     color var(--transicion);
}
.carrito-volver-paso:hover { color: var(--acento); }

.carrito-vacio { text-align: center; padding: 32px 0; color: var(--texto-muted); }
.carrito-vacio a { color: var(--acento); font-weight: 600; }

/* ─── BLOG — archivo y artículo individual ───────────────────── */
.pagina-blog   { padding: 64px 0 96px; background: var(--hueso); min-height: 60vh; }
.blog-cabecera { text-align: center; margin-bottom: 52px; }
.blog-cabecera h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 8px 0 12px; }
.blog-cabecera p  { color: var(--texto-muted); max-width: 500px; margin: 0 auto; }

/* Grid de cards */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.blog-card {
  background: var(--crema);
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.blog-card:hover { box-shadow: var(--sombra-hover); transform: translateY(-3px); }
.blog-card__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; }
.blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-card__img { transform: scale(1.04); }

.blog-card__body  { padding: 22px 22px 18px; display: flex; flex-direction: column; flex: 1; }
.blog-card__cat   { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acento-dark); margin-bottom: 8px; }
.blog-card__titulo { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.blog-card__titulo a { color: var(--texto); text-decoration: none; }
.blog-card__titulo a:hover { color: var(--acento-dark); }
.blog-card__extracto { font-size: .9rem; color: var(--texto-muted); line-height: 1.55; flex: 1; margin: 0 0 16px; }
.blog-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.blog-card__fecha  { font-size: .78rem; color: var(--texto-muted); }
.blog-card__leer   { font-size: .82rem; font-weight: 600; color: var(--acento-dark); text-decoration: none; white-space: nowrap; }
.blog-card__leer:hover { color: var(--acento); }

.blog-paginacion { margin-top: 52px; text-align: center; }
.blog-paginacion .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.blog-paginacion .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; border-radius: var(--radio); background: var(--crema); color: var(--texto); font-size: .9rem; text-decoration: none; border: 1px solid var(--borde-media); }
.blog-paginacion .page-numbers.current,
.blog-paginacion .page-numbers:hover { background: var(--acento); border-color: var(--acento); color: #fff; }

.blog-vacio { text-align: center; padding: 64px 0; color: var(--texto-muted); font-size: 1.1rem; }

/* Artículo individual */
.pagina-articulo { background: var(--hueso); min-height: 100vh; padding-bottom: 96px; }
.articulo-hero   { position: relative; max-height: 480px; overflow: hidden; }
.articulo-hero__img { width: 100%; height: 480px; object-fit: cover; display: block; }
.articulo-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(8,6,4,.35)); }

.articulo-inner  { max-width: 760px; margin: 0 auto; padding-top: 36px; }
.articulo-volver { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--acento-dark); text-decoration: none; margin-bottom: 28px; }
.articulo-volver:hover { color: var(--acento); }

.articulo-cabecera    { margin-bottom: 36px; }
.articulo-cabecera h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 10px 0 14px; }
.articulo-fecha       { font-size: .82rem; color: var(--texto-muted); }

/* Contenido del artículo — hereda estilos de Gutenberg */
.articulo-contenido { font-size: 1.05rem; line-height: 1.75; color: var(--texto-cuerpo); }
.articulo-contenido h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.4px; margin: 2em 0 .6em; color: var(--texto); }
.articulo-contenido h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin: 1.6em 0 .5em; }
.articulo-contenido p  { margin: 0 0 1.2em; }
.articulo-contenido img { max-width: 100%; border-radius: var(--radio); margin: 1.5em 0; }
.articulo-contenido ul,
.articulo-contenido ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.articulo-contenido li { margin-bottom: .4em; }
.articulo-contenido a  { color: var(--acento-dark); text-decoration: underline; }
.articulo-contenido blockquote { border-left: 3px solid var(--acento); margin: 1.5em 0; padding: .5em 0 .5em 1.2em; font-style: italic; color: var(--texto-muted); }
.articulo-contenido figure.wp-block-image { margin: 1.5em 0; }

.articulo-pie { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--borde-media); }

@media (max-width: 700px) {
  .blog-grid { grid-template-columns: 1fr; }
  .articulo-hero__img { height: 240px; }
}

/* ─── PÁGINA DE CONTACTO ─────────────────────────────────────── */
.pagina-contacto { padding: 64px 0 96px; background: var(--hueso); min-height: calc(100vh - var(--nav-height)); }

.contacto-layout {
  display:               grid;
  grid-template-columns: 1fr 1.1fr;
  gap:                   64px;
  align-items:           start;
}
@media (max-width: 768px) {
  .contacto-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* Columna izquierda */
.contacto-intro h1 {
  font-family:  var(--font-display);
  font-size:    clamp(1.8rem, 4vw, 2.6rem);
  font-weight:  800;
  letter-spacing: -1px;
  color:        var(--texto);
  line-height:  1.15;
  margin:       10px 0 16px;
}
.contacto-intro > p {
  color:       var(--texto-cuerpo);
  line-height: 1.7;
  margin-bottom: 36px;
}

.contacto-datos { display: flex; flex-direction: column; gap: 20px; }
.contacto-dato {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
}
.contacto-dato__icono {
  width:         38px;
  height:        38px;
  background:    var(--acento-suave);
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  color:         var(--acento);
}
.contacto-dato__icono svg { width: 18px; height: 18px; }
.contacto-dato__label {
  font-size:      .72rem;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--texto-muted);
  margin-bottom:  2px;
}
.contacto-dato__valor {
  font-size:   .92rem;
  color:       var(--texto);
  line-height: 1.5;
}
a.contacto-dato__valor { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
a.contacto-dato__valor:hover { color: var(--acento-dark); }

.btn-mapa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1px solid rgba(196,113,28,.45);
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--acento);
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.btn-mapa:hover {
  background: var(--acento);
  color: #fff;
  border-color: var(--acento);
}

/* Columna derecha: formulario */
.contacto-form-wrap {
  background:    var(--crema);
  border:        1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow:    var(--sombra);
  padding:       32px;
}
@media (max-width: 480px) {
  .contacto-form-wrap { padding: 22px; }
}

/* Honeypot: completamente oculto */
.contacto-honeypot {
  position:   absolute;
  left:       -9999px;
  visibility: hidden;
  height:     0;
  overflow:   hidden;
}

.contacto-submit {
  width:      100%;
  padding:    12px;
  font-size:  .95rem;
  margin-top: 4px;
}
.contacto-submit:disabled { opacity: .6; cursor: not-allowed; }

.contacto-privacidad {
  font-size:   .74rem;
  color:       var(--texto-muted);
  text-align:  center;
  margin-top:  12px;
  line-height: 1.5;
}

/* Mensaje de éxito */
.contacto-exito {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  background:    #e8f8ef;
  border:        1px solid #a3d9b8;
  border-radius: var(--radio-sm);
  padding:       18px;
  margin-bottom: 24px;
  color:         #1a6336;
}
.contacto-exito svg { width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; }
.contacto-exito strong { display: block; font-weight: 700; margin-bottom: 3px; }
.contacto-exito p { font-size: .88rem; margin: 0; }

/* Mensaje de error */
.contacto-error {
  background:    #fdecea;
  border:        1px solid #f5c2be;
  border-radius: var(--radio-sm);
  padding:       11px 14px;
  font-size:     .86rem;
  color:         #922;
  margin-bottom: 14px;
}

/* ─── RESEÑAS ────────────────────────────────────────────────── */
.seccion-resenas { padding: 72px 0 80px; background: var(--hueso); }

.resenas-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
  margin-top:            40px;
}
@media (max-width: 900px) { .resenas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .resenas-grid { grid-template-columns: 1fr; } }

.resena-card {
  background:    var(--crema);
  border:        1px solid var(--borde);
  border-radius: var(--radio);
  padding:       20px;
  display:       flex;
  flex-direction: column;
  gap:           12px;
  box-shadow:    var(--sombra);
  transition:    transform var(--transicion), box-shadow var(--transicion);
}
.resena-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 24px rgba(8,6,4,.10);
}

.resena-card__header {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.resena-card__avatar {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  overflow:      hidden;
  flex-shrink:   0;
  background:    var(--acento-suave);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     1rem;
  color:         var(--acento);
}
.resena-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.resena-card__meta { flex: 1; min-width: 0; }
.resena-card__autor {
  font-weight:   600;
  font-size:     .88rem;
  color:         var(--texto);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.resena-card__estrellas {
  display: flex;
  gap:     2px;
  margin-top: 2px;
}
.resena-card__estrellas svg { width: 13px; height: 13px; color: #F59E0B; }

.resena-card__google { margin-left: auto; flex-shrink: 0; opacity: .7; transition: opacity var(--transicion); }
.resena-card__google:hover { opacity: 1; }
.resena-card__google svg { width: 18px; height: 18px; display: block; }

.resena-card__texto {
  font-size:   .86rem;
  color:       var(--texto-cuerpo);
  line-height: 1.65;
  flex:        1;
}
.resena-mas button {
  background: none;
  border:     none;
  color:      var(--acento);
  font-size:  .86rem;
  cursor:     pointer;
  padding:    0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.resena-card__footer {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  font-size:   .74rem;
  color:       var(--texto-muted);
  border-top:  1px solid var(--borde);
  padding-top: 10px;
  margin-top:  auto;
}
.resena-card__local { font-weight: 600; }

.resenas-cta { text-align: center; margin-top: 36px; }

/* ─── UBICACIONES INLINE (dentro de reseñas) ─────────────────── */
.ubicaciones-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 0 48px;
}
.ubicacion-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 50px;
  border: 1.5px solid var(--borde);
  background: var(--crema);
  color: var(--texto);
  text-decoration: none;
  font-size: .85rem;
  transition: border-color .2s, box-shadow .2s;
}
.ubicacion-inline:hover { border-color: var(--acento); box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.ubicacion-inline svg { color: var(--acento); flex-shrink: 0; }
.ubicacion-inline__nombre { font-weight: 700; }
.ubicacion-inline__dir { color: var(--texto-muted); font-size: .78rem; }
.ubicacion-inline--domicilio .ubicacion-inline__nombre { color: var(--acento); }
@media (max-width: 600px) {
  .ubicacion-inline { flex-direction: row; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 50px; width: auto; }
  .ubicacion-inline__dir { display: none; }
}

/* ─── BARRA DE ANUNCIO ───────────────────────────────────────── */
/* ─── BARRA SOCIAL ───────────────────────────────────────────── */
.barra-social {
  background: var(--carbon);
  border-bottom: 1px solid rgba(196,113,28,.2);
  padding: 7px 0;
}
.barra-social__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}
.barra-social__texto {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-right: 4px;
}
.barra-social__links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.barra-social__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  transition: color .2s, border-color .2s;
}
.barra-social__btn:hover {
  color: var(--acento);
  border-color: rgba(196,113,28,.4);
}
@media (max-width: 600px) {
  .barra-social__texto { display: none; }
  .barra-social__inner { justify-content: center; }
}

.barra-anuncio {
  background: var(--acento);
  color: var(--hueso);
  text-align: center;
  padding: 9px 20px;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ─── HERO 2-COLUMN GRID ─────────────────────────────────────── */
.hero__grid {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.hero__grid--con-card {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: center;
}

/* ─── HERO TEMPORADA CARD ────────────────────────────────────── */
.hero__temporada {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(196,113,28,.35);
  border-top: 2px solid var(--acento);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  display: grid;
  grid-template-columns: 58% 1fr;
  grid-template-rows: auto 1fr;
  min-height: 220px;
  box-shadow:
    0 2px 0 0 var(--acento),
    0 16px 48px rgba(0,0,0,.55),
    0 2px 12px rgba(0,0,0,.4);
}
.hero__temporada-label {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acento);
  background: rgba(196,113,28,.12);
  border: 1px solid rgba(196,113,28,.3);
  border-radius: 20px;
  padding: 4px 10px;
  margin: 14px 14px 0;
}
.hero__temporada-foto {
  grid-column: 1;
  grid-row: 1 / 3;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(196,113,28,.3);
}
.hero__temporada-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__temporada-cuerpo {
  grid-column: 2;
  grid-row: 2;
  padding: 10px 16px 16px;
  display: flex;
  flex-direction: column;
}
.hero__temporada-nombre {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.hero__temporada-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero__temporada-precio {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--acento);
  margin-bottom: 6px;
}
.hero__temporada-nota {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}
.hero__temporada .producto-card__btn {
  width: auto;
  align-self: center;
  margin-top: auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 900px) {
  .hero__grid--con-card {
    grid-template-columns: 1fr;
  }
  .hero__temporada { display: none; }
}

/* ─── HERO DESTACADO (chip pequeño — legacy) ─────────────────── */
.hero__destacado {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 8px 18px;
  border-radius: 50px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  backdrop-filter: blur(6px);
  transition: background .2s;
}
.hero__destacado:hover { background: rgba(255,255,255,.2); }
.hero__destacado-label { opacity: .75; font-size: .78rem; }
.hero__destacado-nombre { font-weight: 700; }
.hero__destacado-precio { opacity: .85; }

/* ─── INSTAGRAM BUTTON (CTA section) ────────────────────────── */
.btn-instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: .93rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.btn-instagram:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ─── FAQ ────────────────────────────────────────────────────── */
.seccion-faq { padding: 72px 0 80px; background: var(--crema); }
.faq-lista { max-width: 720px; margin: 0 auto; }
.faq-item-pub { border-bottom: 1px solid var(--borde); }
.faq-item-pub:first-child { border-top: 1px solid var(--borde); }
.faq-pregunta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  padding: 18px 4px;
  font-size: .97rem;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}
.faq-pregunta:hover { color: var(--acento); }
.faq-icono { flex-shrink: 0; color: var(--acento); transition: transform .25s; }
.faq-pregunta[aria-expanded="true"] .faq-icono { transform: rotate(180deg); }
.faq-respuesta { padding: 0 4px 18px; color: var(--texto-muted); line-height: 1.7; font-size: .93rem; }
.faq-respuesta p { margin: 0; }

/* ─── FOOTER ─────────────────────────────────────────────────── */
.footer { background: var(--carbon); color: rgba(255,255,255,.55); padding: 52px 0 22px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.footer__col h4 { font-size: .65rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 16px; }

/* Nav links */
.footer__nav { display: flex; flex-direction: column; gap: 9px; }
.footer__nav a { font-size: .88rem; color: rgba(255,255,255,.6); text-decoration: none; transition: color var(--transicion); }
.footer__nav a:hover { color: #fff; }

/* Social links in footer col */
.footer__redes-col { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.footer__redes-col .footer__red { display: inline-flex; align-items: center; gap: 8px; font-size: .83rem; color: rgba(255,255,255,.45); text-decoration: none; transition: color var(--transicion); background: none; border-radius: 0; width: auto; height: auto; padding: 0; }
.footer__redes-col .footer__red:hover { color: rgba(255,255,255,.9); background: none; }
.footer__redes-col .footer__red svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Ubicaciones */
.footer__ubicacion { display: flex; align-items: flex-start; gap: 9px; color: rgba(255,255,255,.6); text-decoration: none; font-size: .85rem; line-height: 1; margin-bottom: 12px; transition: color var(--transicion); }
.footer__ubicacion:hover { color: #fff; }
.footer__ubicacion svg { flex-shrink: 0; margin-top: 2px; opacity: .6; }
.footer__ubicacion span { display: flex; flex-direction: column; gap: 2px; }
.footer__ubicacion strong { color: rgba(255,255,255,.85); font-size: .85rem; line-height: 1.2; }
.footer__ubicacion strong + * { font-size: .78rem; line-height: 1.2; }

/* Horarios */
.footer__horario { font-size: .85rem; color: rgba(255,255,255,.6); display: flex; flex-direction: column; gap: 2px; }
.footer__horario span { color: rgba(255,255,255,.85); font-weight: 600; }
.footer__horario-nota { font-size: .75rem; color: rgba(255,255,255,.3); margin-top: 8px; line-height: 1.5; }
.footer__logo-text { font-family: var(--font-display); font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 4px; color: var(--hueso); margin-bottom: 12px; }
.footer__logo-img { display: inline-block; margin-bottom: 14px; }
.footer__logo-img-tag { height: 38px; width: auto; max-width: 160px; display: block; }
.footer__descripcion { font-size: .84rem; line-height: 1.75; max-width: 270px; color: rgba(255,255,255,.4); }
.footer__redes { display: flex; gap: 9px; margin-top: 16px; }
.footer__red { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); transition: background var(--transicion), color var(--transicion); }
.footer__red:hover { background: var(--acento); color: #fff; }
.footer__red svg { width: 15px; height: 15px; }
.footer__col h4 { font-size: .68rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--hueso); margin-bottom: 14px; }
.footer__col ul { display: flex; flex-direction: column; gap: 7px; }
.footer__col ul li a { color: rgba(255,255,255,.45); font-size: .84rem; transition: color var(--transicion); }
.footer__col ul li a:hover { color: rgba(255,255,255,.9); }
.footer__col p { color: rgba(255,255,255,.45); font-size: .84rem; line-height: 1.7; margin-bottom: 5px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.06); padding-top: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .73rem; color: rgba(255,255,255,.28); }

/* ─── WHATSAPP FLOTANTE ──────────────────────────────────────── */
.whatsapp-flotante {
  position:    fixed;
  bottom:      28px;
  right:       28px;
  left:        auto;
  z-index:     999;
  display:     flex;
  align-items: center;
  gap:         12px;
  background:  #25D366;
  color:       #fff;
  padding:     16px 28px 16px 22px;
  border-radius: 50px;
  box-shadow:  0 6px 24px rgba(37,211,102,.42);
  font-weight: 700;
  font-size:   1.05rem;
  transition:  transform var(--transicion), box-shadow var(--transicion);
}
.whatsapp-flotante:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(37,211,102,.5); }
.whatsapp-flotante svg { width: 36px; height: 36px; flex-shrink: 0; }

/* ─── TOAST ──────────────────────────────────────────────────── */
.toast {
  position:      fixed;
  bottom:        18px;
  right:         18px;
  background:    var(--carbon);
  color:         var(--hueso);
  padding:       11px 16px;
  border-radius: var(--radio-sm);
  font-size:     .84rem;
  font-weight:   500;
  z-index:       9999;
  transform:     translateY(120%);
  opacity:       0;
  transition:    transform 0.26s ease, opacity 0.26s ease;
  max-width:     270px;
  border-left:   3px solid var(--acento);
}
.toast.visible { transform: translateY(0); opacity: 1; }
.toast.error   { border-left-color: #c0392b; }

/* ─── MENÚ MOBILE OVERLAY ────────────────────────────────────── */
.menu-overlay { display: none; position: fixed; inset: 0; background: rgba(8,6,4,.45); z-index: 990; }
.menu-overlay.visible { display: block; }

/* ─── ANIMACIÓN ENTRADA ──────────────────────────────────────── */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.producto-card.animado { animation: fadeInUp 0.35s ease forwards; }

/* ─── FOCO ───────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 3px; }

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--hueso); }
::-webkit-scrollbar-thumb { background: var(--borde-media); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--acento); }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .checkout-wrap { grid-template-columns: 1fr; }
  .resumen-panel { position: static; }
  .nosotros-grid { grid-template-columns: 1fr; gap: 30px; }
  .nosotros__imagen { aspect-ratio: 16/9; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__marca { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .container { --container-padding: 18px; }
  .navbar__nav {
    position: fixed; top: var(--nav-height); left: 0;
    width: 250px; height: calc(100vh - var(--nav-height));
    background: var(--carbon); flex-direction: column;
    align-items: flex-start; padding: 22px; gap: 18px;
    transform: translateX(-100%); transition: transform var(--transicion);
    z-index: 991; overflow-y: auto;
  }
  .navbar__nav.abierto { transform: translateX(0); }
  .navbar__nav a { font-size: .88rem; }
  .navbar__toggle { display: flex; }
  .hero { min-height: 70vh; }
  .hero__acciones { flex-direction: column; }
  .hero__acciones .btn { justify-content: center; }
  .productos-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 13px; }
  .menu-categoria { margin-bottom: 44px; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .filtros-menu { gap: 5px; }
  .filtro-btn { font-size: .74rem; padding: 6px 12px; }
  .productos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .producto-card__cuerpo { padding: 10px 10px 12px; }
  .whatsapp-flotante span { display: none; }
  .whatsapp-flotante { padding: 16px; border-radius: 50%; right: 18px; bottom: 18px; }
  .whatsapp-flotante svg { width: 32px; height: 32px; }
}


/* ─── RESPONSIVE — gaps adicionales ──────────────────────── */
/* Modal: padding reducido en pantallas muy pequeñas */
@media (max-width: 480px) {
  .modal { padding: 22px 16px 28px; }
}

/* Carrito sidebar: ancho completo en pantallas muy pequeñas */
@media (max-width: 390px) {
  .carrito-sidebar { width: 100vw; }
}

/* FAQ: sin max-width en móvil para no desbordar */
@media (max-width: 600px) {
  .faq-lista { max-width: 100%; }
  .seccion-faq .container { padding-left: 16px; padding-right: 16px; }
}

/* Anuncio: padding ajustado */
@media (max-width: 480px) {
  .barra-anuncio { padding: 7px 14px; font-size: .78rem; }
}