/* ================================================================
   Hotel Booking Engine — clases .hbe-*, paleta vía custom properties
   (--hbe-primary/--hbe-accent/etc.), sobreescritas en runtime por
   hotel_get_palette() del Hotel Core activo (ver enqueue en
   hotel-booking-engine.php). Los valores de acá son solo el respaldo
   por defecto si algún Hotel Core no define paleta propia.
   ================================================================ */

html { overflow-anchor: none; }

:root {
  --hbe-bg:            #f8f6ef;
  --hbe-bg-warm:       #f0e6d3;
  --hbe-bg-section:    #eef3e8;
  --hbe-panel:         rgba(255, 253, 248, 0.96);
  --hbe-border:        rgba(63, 125, 50, 0.18);

  --hbe-text:          #1f2e18;
  --hbe-muted:         #5c6b4d;
  --hbe-text-light:    #f7f9f2;

  /* A diferencia de --hbe-text/--hbe-muted (siempre oscuros, fijos acá
     abajo), estas 3 SÍ las recalcula hotel-booking-engine.php por hotel
     según la luminancia real de --hbe-bg de ese Hotel Core -- para texto
     que va DIRECTO sobre --hbe-bg/--hbe-bg-warm como superficie propia
     (calendario, modal de reserva, tarjetas de "Servicios extra", inputs
     del formulario de huésped). Sin esto, un hotel con paleta oscura
     (Deep Teal Command) queda con texto oscuro sobre fondo oscuro ahí.
     El valor de acá es solo el respaldo para el Hotel Core que no la
     sobreescriba (paleta clara de origen). */
  --hbe-fg:            #1f2e18;
  --hbe-fg-muted:      #5c6b4d;
  --hbe-fg-disabled:   rgba(31, 46, 24, .25);

  --hbe-primary:         #3f7d32;
  --hbe-primary-light:   #6ba84f;
  --hbe-primary-dark:    #2b5a20;

  --hbe-accent:       #c1603a;
  --hbe-accent-light: #e08256;
  --hbe-accent-dark:  #96482a;

  --hbe-shine-angle:   0deg;

  --hbe-shadow:        0 8px 40px rgba(30, 50, 20, .14);
  --hbe-shadow-sm:     0 3px 16px rgba(30, 50, 20, .10);
  --hbe-radius:        16px;
  --hbe-radius-sm:     9px;

  --hbe-safe-bottom:   env(safe-area-inset-bottom, 0px);
}

/* ----------------------------------------------------------------
   Reset & base
   ---------------------------------------------------------------- */
.hbe-home, .hbe-home *,
.hbe-propiedades, .hbe-propiedades *,
.hbe-propiedad, .hbe-propiedad * {
  box-sizing: border-box;
}

.hbe-home, .hbe-propiedades, .hbe-propiedad {
  font-family: "Inter", Arial, sans-serif;
  color: var(--hbe-text);
  background: var(--hbe-bg);
  /* "clip", no "hidden": ver comentario equivalente en monitos-tour.css —
     evita que este wrapper se vuelva el contenedor de scroll y rompa el
     position:sticky de sus hijos. */
  overflow-x: clip;
  overflow-y: visible;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.hbe-container {
  width: min(1100px, 92%);
  margin-inline: auto;
}

.hbe-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hbe-primary-dark);
  margin: 0 0 .9rem;
}
.hbe-eyebrow--light { color: var(--hbe-primary-light); }

.hbe-section-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 1.4rem;
  color: var(--hbe-text);
}
.hbe-section-title--light { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.3); }

/* ----------------------------------------------------------------
   Botones — !important en toda propiedad visual: el tema activo trae su
   propio reset para button/[type=button]/[type=submit] con la MISMA
   especificidad que una clase, cargado después. Mismo criterio que
   monitos-tour.css.
   ---------------------------------------------------------------- */
.hbe-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .8rem 2.2rem !important;
  border-radius: 999px !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
  position: relative;
  overflow: hidden;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.hbe-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.12);
  opacity: 0;
  transition: opacity .18s;
}
.hbe-btn:hover::after { opacity: 1; }
.hbe-btn:active { transform: scale(.97); }

.hbe-btn--primary {
  background: var(--hbe-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(63,125,50,.3) !important;
}
.hbe-btn--primary:hover {
  background: var(--hbe-primary-light) !important;
  box-shadow: 0 8px 24px rgba(63,125,50,.45) !important;
  transform: translateY(-2px);
}

.hbe-btn--outline {
  background: transparent !important;
  color: var(--hbe-primary-dark) !important;
  border: 1.5px solid var(--hbe-primary) !important;
}
.hbe-btn--outline:hover { background: rgba(63,125,50,.08) !important; transform: translateY(-2px); }

.hbe-btn--ghost {
  background: var(--hbe-bg-warm) !important;
  color: var(--hbe-fg) !important;
  border: 1px solid var(--hbe-border) !important;
  padding: .55rem 1.3rem !important;
  font-size: .76rem !important;
}
.hbe-btn--ghost:hover { background: #fff !important; }

@property --hbe-shine-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.hbe-btn-shine { position: relative; overflow: visible; isolation: isolate; }
.hbe-btn-shine::before {
  content: "";
  position: absolute;
  inset: -3px;
  padding: 3px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--hbe-shine-angle),
    transparent 0%, transparent 72%,
    var(--hbe-primary-light) 85%,
    var(--hbe-accent) 92%,
    var(--hbe-primary-light) 96%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  animation: hbe-shine-spin 2.6s linear infinite;
  pointer-events: none;
}
@keyframes hbe-shine-spin { from { --hbe-shine-angle: 0deg; } to { --hbe-shine-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hbe-btn-shine::before { animation: none; } }

@media (max-width: 640px) {
  .hbe-btn { width: 100%; justify-content: center; }
}

/* ----------------------------------------------------------------
   TOPBAR
   ---------------------------------------------------------------- */
.hbe-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 0 clamp(18px, 4vw, 48px);
  min-height: 64px;
  background: rgba(248, 246, 239, 0.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hbe-border);
  box-shadow: 0 2px 20px rgba(30,50,20,.1);
  transition: background .25s, box-shadow .25s;
}
.hbe-topbar.is-scrolled {
  background: rgba(248, 246, 239, 0.98);
  box-shadow: 0 4px 28px rgba(30,50,20,.15);
}
.hbe-topbar__logo {
  display: flex; align-items: center; text-decoration: none; flex-shrink: 0;
}
.hbe-topbar__logo-text {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  color: var(--hbe-text);
  letter-spacing: .04em;
}
.hbe-topbar__logo-text span { color: var(--hbe-primary); }
.hbe-topbar__nav {
  display: flex; align-items: center; gap: 2rem; flex: 1; justify-content: center;
}
.hbe-topbar__nav a {
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-decoration: none; color: var(--hbe-muted); transition: color .18s;
}
.hbe-topbar__nav a:hover { color: var(--hbe-primary-dark); }
.hbe-topbar__cta { flex-shrink: 0; padding: .55rem 1.5rem; font-size: .78rem; }

.hbe-topbar__actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

.hbe-topbar__hamburger {
  display: none !important; flex-direction: column; gap: 5px;
  background: none !important; border: none !important; cursor: pointer; padding: .4rem !important; flex-shrink: 0;
  -webkit-appearance: none !important; appearance: none !important;
}
.hbe-topbar__hamburger span {
  display: block; width: 22px; height: 2px; background: var(--hbe-text);
  border-radius: 2px; transition: transform .22s, opacity .22s;
}
.hbe-topbar__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hbe-topbar__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hbe-topbar__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
  .hbe-topbar__nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(248,246,239,.98); border-bottom: 1px solid var(--hbe-border);
    flex-direction: column; gap: 0; padding: .5rem 0 1rem;
    box-shadow: 0 8px 24px rgba(30,50,20,.12);
  }
  .hbe-topbar__nav.is-open { display: flex; }
  .hbe-topbar__nav a { padding: .8rem clamp(18px, 4vw, 48px); width: 100%; }
  .hbe-topbar__hamburger { display: flex !important; }
  .hbe-topbar__cta { padding: .5rem 1.1rem; font-size: .72rem; }
  .hbe-topbar__logo-text { font-size: .92rem; }
}

/* ----------------------------------------------------------------
   Placeholder de foto (mientras no hay imagen real subida)
   ---------------------------------------------------------------- */
.hbe-placeholder-photo {
  width: 100%; height: 100%; position: absolute; inset: 0;
  background: linear-gradient(135deg,
    hsl(var(--hbe-hue, 100), 45%, 62%) 0%,
    hsl(var(--hbe-hue, 100), 40%, 40%) 50%,
    hsl(var(--hbe-hue, 100), 45%, 22%) 100%);
}
.hbe-room-card__photo {
  width: 100%; height: 100%; position: absolute; inset: 0;
  object-fit: cover;
}

/* ----------------------------------------------------------------
   HERO
   ---------------------------------------------------------------- */
.hbe-hero {
  position: relative;
  min-height: 100svh;
  padding-top: 64px;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(150deg, #2b5a20 0%, #3f7d32 42%, #6ba84f 100%);
}
.hbe-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(16,26,10,.55) 0%, rgba(16,26,10,.25) 45%, rgba(16,26,10,.7) 100%);
}
.hbe-hero__content {
  position: relative; z-index: 2;
  width: min(660px, 90%); margin-inline: auto; text-align: center;
  padding: 0 0 clamp(60px, 10vh, 120px); margin-top: auto;
}
.hbe-hero__eyebrow {
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--hbe-accent-light); margin: 0 0 1.2rem;
}
.hbe-hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.6rem, 7.5vw, 5rem);
  font-weight: 500; line-height: 1.08; margin: 0 0 1.2rem;
  color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.hbe-hero__title span { font-style: italic; color: var(--hbe-accent-light); }
.hbe-hero__lead {
  font-size: clamp(.95rem, 2.2vw, 1.08rem);
  color: rgba(255,255,255,.9); line-height: 1.72; margin: 0 0 2rem;
}
.hbe-hero__lead strong { color: #fff; font-weight: 700; }
.hbe-hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; }
.hbe-hero__scroll span {
  display: block; width: 24px; height: 40px;
  border: 2px solid rgba(255,255,255,.4); border-radius: 12px; position: relative;
}
.hbe-hero__scroll span::after {
  content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 8px; background: rgba(255,255,255,.7); border-radius: 2px;
  animation: hbe-scroll-dot 1.6s ease-in-out infinite;
}
@keyframes hbe-scroll-dot { 0% { opacity:1; top:6px; } 80% { opacity:0; top:22px; } 100% { opacity:0; top:6px; } }

/* ----------------------------------------------------------------
   BIENVENIDA
   ---------------------------------------------------------------- */
.hbe-welcome {
  background: var(--hbe-bg-section);
  padding: clamp(60px, 10vw, 110px) 0;
  border-top: 1px solid var(--hbe-border);
  text-align: center;
}
.hbe-welcome__body {
  max-width: 720px; margin-inline: auto;
  font-size: 1.02rem; line-height: 1.75; color: var(--hbe-muted);
}
.hbe-welcome__body strong { color: var(--hbe-text); }

/* ----------------------------------------------------------------
   CTA TARIFA
   ---------------------------------------------------------------- */
.hbe-rate-cta {
  background: linear-gradient(120deg, var(--hbe-primary-dark), var(--hbe-primary));
}
.hbe-rate-cta__inner {
  padding: clamp(50px, 8vw, 80px) 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
}
.hbe-rate-cta .hbe-eyebrow { color: var(--hbe-accent-light); }
.hbe-rate-cta__action { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }

@media (max-width: 640px) {
  .hbe-rate-cta__inner { flex-direction: column; align-items: flex-start; }
  .hbe-rate-cta__action { align-items: flex-start; width: 100%; }
  .hbe-rate-cta__action .hbe-btn { width: 100%; }
}

/* ----------------------------------------------------------------
   PROPIEDADES — grilla de tarjetas (home preview + listado completo)
   ---------------------------------------------------------------- */
.hbe-properties {
  padding: clamp(60px, 10vw, 100px) 0;
}
.hbe-properties__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
  margin-top: 2rem;
}
.hbe-property-card {
  display: flex; flex-direction: column;
  background: var(--hbe-panel);
  border: 1px solid var(--hbe-border);
  border-radius: var(--hbe-radius);
  overflow: hidden;
  box-shadow: var(--hbe-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease;
}
.hbe-property-card:hover { transform: translateY(-4px); box-shadow: var(--hbe-shadow); }
.hbe-property-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.hbe-property-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.hbe-property-card__name { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; margin: 0; color: var(--hbe-text); }
.hbe-property-card__unidad-tag {
  display: inline-block;
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hbe-primary-dark);
  background: rgba(63,125,50,.1);
  border: 1px solid rgba(63,125,50,.25);
  border-radius: 999px;
  padding: .15rem .55rem;
  margin: -.1rem 0 .3rem;
  width: fit-content;
}
.hbe-property-card__resumen { font-size: .84rem; color: var(--hbe-muted); line-height: 1.5; margin: 0; flex: 1; }
.hbe-property-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; }
.hbe-property-card__desde { font-size: .78rem; color: var(--hbe-muted); }
.hbe-property-card__desde strong { display: block; font-size: 1.05rem; color: var(--hbe-accent-dark); }

/* ----------------------------------------------------------------
   MODAL DE RESERVA
   ---------------------------------------------------------------- */
.hbe-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.hbe-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.hbe-modal__backdrop {
  position: absolute; inset: 0; background: rgba(16, 30, 10, 0.72);
  cursor: pointer; backdrop-filter: blur(4px);
}
.hbe-modal__panel {
  position: relative; z-index: 1;
  width: min(680px, 96vw); max-height: 94svh; overflow-y: auto;
  background: var(--hbe-bg); border-radius: var(--hbe-radius);
  box-shadow: 0 32px 80px rgba(16,30,10,.4);
  transform: translateY(20px) scale(.97);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
  border: 1px solid var(--hbe-border);
}
.hbe-modal.is-open .hbe-modal__panel { transform: translateY(0) scale(1); }
.hbe-modal__close {
  position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px;
  border-radius: 50% !important; background: var(--hbe-bg-warm) !important; border: 1px solid var(--hbe-border) !important;
  cursor: pointer; font-size: 1.2rem; display: flex !important; align-items: center; justify-content: center;
  color: var(--hbe-fg-muted) !important; transition: background .18s, color .18s; z-index: 2;
  padding: 0 !important;
  -webkit-appearance: none !important; appearance: none !important;
}
.hbe-modal__close:hover { background: var(--hbe-primary) !important; color: #fff !important; border-color: var(--hbe-primary) !important; }
.hbe-modal__head { padding: 1.3rem 1.6rem .9rem; text-align: center; border-bottom: 1px solid var(--hbe-border); }
.hbe-modal__title { font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; font-weight: 500; margin: 0 0 .25rem; color: var(--hbe-fg); }
.hbe-modal__sub { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hbe-fg-muted); margin: 0; }
.hbe-modal__form { padding: 1.1rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .8rem; }
.hbe-modal__body { padding: 1.1rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .8rem; }
.hbe-modal__field { display: flex; flex-direction: column; gap: .4rem; }
.hbe-modal__label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hbe-primary-dark);
}
.hbe-modal__date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: .7rem; }
.hbe-modal__date-btn {
  display: flex !important; flex-direction: column; gap: .18rem; padding: .65rem 1rem !important;
  background: var(--hbe-bg-warm) !important; border: 1.5px solid var(--hbe-border) !important; border-radius: var(--hbe-radius-sm) !important;
  cursor: default; text-align: left; transition: border-color .2s; width: 100%;
  -webkit-appearance: none !important; appearance: none !important;
}
.hbe-modal__date-btn small { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hbe-primary-dark); }
.hbe-modal__date-btn strong { font-size: .86rem; font-weight: 400; color: var(--hbe-fg-muted); }
.hbe-modal__date-btn.has-date { border-color: var(--hbe-primary) !important; }
.hbe-modal__date-btn.has-date strong { color: var(--hbe-fg); font-weight: 500; }

.hbe-cal-container { overflow-x: auto; border-radius: var(--hbe-radius-sm); border: 1px solid var(--hbe-border); background: var(--hbe-bg-warm); }
/* font-size: 16px es a propósito -- flatpickr le da foco a este input (oculto
   fuera de pantalla) al elegir un día, y Safari/Chrome en iOS hacen zoom
   automático de toda la página al enfocar un input con letra < 16px, aunque
   el input sea invisible. Sin esto, elegir fecha dejaba la página con zoom. */
.hbe-cal-container > input { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; font-size: 16px !important; }

.hbe-cal-container .flatpickr-calendar { background: var(--hbe-bg-warm) !important; box-shadow: none !important; border: none !important; font-family: "Inter", Arial, sans-serif !important; }
.hbe-cal-container .flatpickr-days .flatpickr-day { height: 34px !important; line-height: 34px !important; font-size: .82rem !important; }
.hbe-cal-container .flatpickr-weekdays,
.hbe-cal-container span.flatpickr-weekday { height: 24px !important; line-height: 24px !important; font-size: .68rem !important; }
.hbe-cal-container .flatpickr-current-month { font-size: .95rem !important; padding-top: 4px !important; }
.hbe-cal-container .flatpickr-months { padding: 6px 0 !important; }
.hbe-cal-container .flatpickr-months .flatpickr-month,
.hbe-cal-container .flatpickr-months .flatpickr-prev-month,
.hbe-cal-container .flatpickr-months .flatpickr-next-month { background: var(--hbe-bg-warm) !important; color: var(--hbe-fg) !important; fill: var(--hbe-primary-dark) !important; }
.hbe-cal-container .flatpickr-current-month input.cur-year,
.hbe-cal-container .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--hbe-fg) !important; }
.hbe-cal-container .flatpickr-weekday { background: var(--hbe-bg-warm) !important; color: var(--hbe-primary-dark) !important; font-weight: 700 !important; }
.hbe-cal-container .flatpickr-days, .hbe-cal-container .dayContainer { background: var(--hbe-bg-warm) !important; }
.hbe-cal-container .flatpickr-day { color: var(--hbe-fg) !important; border-radius: 6px !important; }
.hbe-cal-container .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.inRange) { background: rgba(63,125,50,.15) !important; border-color: var(--hbe-primary-light) !important; }
.hbe-cal-container .flatpickr-day.today:not(.selected) { border-color: var(--hbe-primary-dark) !important; }
.hbe-cal-container .flatpickr-day.selected,
.hbe-cal-container .flatpickr-day.startRange,
.hbe-cal-container .flatpickr-day.endRange,
.hbe-cal-container .flatpickr-day.selected:hover,
.hbe-cal-container .flatpickr-day.startRange:hover,
.hbe-cal-container .flatpickr-day.endRange:hover { background: var(--hbe-primary) !important; border-color: var(--hbe-primary) !important; color: #fff !important; }
.hbe-cal-container .flatpickr-day.inRange { background: rgba(63,125,50,.18) !important; border-color: transparent !important; box-shadow: -5px 0 0 rgba(63,125,50,.18), 5px 0 0 rgba(63,125,50,.18) !important; color: var(--hbe-fg) !important; border-radius: 0 !important; }
.hbe-cal-container .flatpickr-day.flatpickr-disabled,
.hbe-cal-container .flatpickr-day.flatpickr-disabled:hover { color: var(--hbe-fg-disabled) !important; background: transparent !important; border-color: transparent !important; }

.hbe-modal__steppers {
  display: flex; flex-wrap: wrap; gap: .8rem 1rem;
  background: var(--hbe-bg-warm); border: 1px solid var(--hbe-border);
  border-radius: var(--hbe-radius-sm); padding: .9rem 1rem;
}
.hbe-stepper { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; flex: 1 1 90px; min-width: 90px; }
.hbe-stepper__label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--hbe-fg-muted); white-space: nowrap; }
.hbe-stepper__ctrl { display: flex !important; align-items: center; gap: .4rem; }
.hbe-stepper__btn {
  width: 26px !important; height: 26px !important; border-radius: 50% !important; border: 1.5px solid var(--hbe-border) !important;
  background: var(--hbe-bg) !important; color: var(--hbe-primary-dark) !important; font-size: 1rem !important; cursor: pointer;
  display: flex !important; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s, border-color .15s; line-height: 1; padding: 0 !important;
  -webkit-appearance: none !important; appearance: none !important;
}
.hbe-stepper__btn:hover { background: var(--hbe-primary) !important; border-color: var(--hbe-primary) !important; color: #fff !important; }
.hbe-stepper__ctrl input[type="number"] {
  width: 26px !important; padding: 0 !important; box-sizing: content-box !important;
  text-align: center; border: none; background: none; flex-shrink: 0;
  font-size: 16px !important; font-weight: 700; color: var(--hbe-fg); -moz-appearance: textfield;
  display: block !important; opacity: 1 !important;
}
.hbe-stepper__ctrl input[type="number"]::-webkit-inner-spin-button,
.hbe-stepper__ctrl input[type="number"]::-webkit-outer-spin-button { display: none; }

.hbe-modal__submit { width: 100%; padding: .95rem; font-size: .88rem; margin-top: .4rem; }

.hbe-ninos-edades { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--hbe-border); }
.hbe-ninos-edades[hidden] { display: none; }
.hbe-ninos-edades__label { font-size: .8rem; font-weight: 600; color: var(--hbe-fg); margin: 0 0 .5rem; }
.hbe-ninos-edades__hint { font-size: .72rem; color: var(--hbe-fg-muted); margin: .4rem 0 0; }
.hbe-ninos-edades__grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.hbe-ninos-edades__select {
  flex: 0 0 auto; width: 62px;
  border: 1.5px solid var(--hbe-border); border-radius: var(--hbe-radius-sm);
  padding: .5rem .4rem; background: var(--hbe-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b4d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .4rem center/14px;
  color: var(--hbe-fg); font-family: inherit; font-size: 16px; font-weight: 700;
  -webkit-appearance: none; appearance: none;
}

/* ----------------------------------------------------------------
   PÁGINA DE PROPIEDAD — cabecera + tarjetas de habitación
   ---------------------------------------------------------------- */
.hbe-propiedad__header {
  position: relative;
  padding: clamp(90px, 16vh, 160px) 0 clamp(50px, 8vh, 90px);
  color: #fff;
  overflow: hidden;
}
.hbe-propiedad__header-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,26,10,.35), rgba(16,26,10,.78)); }
.hbe-propiedad__header-inner { position: relative; z-index: 2; }
.hbe-propiedad__back { display: inline-flex; align-items: center; gap: .4rem; color: var(--hbe-text-light); font-size: .82rem; text-decoration: none; margin-bottom: 1rem; opacity: .85; }
.hbe-propiedad__back:hover { opacity: 1; }
.hbe-propiedad__title { font-family: "Fraunces", Georgia, serif; font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 .6rem; }
.hbe-propiedad__resumen { max-width: 640px; font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.9); }

.hbe-room-types { padding: clamp(50px, 8vw, 90px) 0; }
.hbe-room-types__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; margin-top: 2rem; }
.hbe-room-card {
  display: flex; flex-direction: column;
  background: var(--hbe-panel); border: 1px solid var(--hbe-border); border-radius: var(--hbe-radius);
  overflow: hidden; box-shadow: var(--hbe-shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
.hbe-room-card__media { position: relative; aspect-ratio: 4/3; }
.hbe-room-card__badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  background: rgba(16,30,10,.75); color: #fff; font-size: .68rem; font-weight: 700;
  padding: .3rem .7rem; border-radius: 999px; letter-spacing: .04em;
}
.hbe-room-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.hbe-room-card__name { font-family: "Fraunces", Georgia, serif; font-size: 1.1rem; margin: 0; }
.hbe-room-card__chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.hbe-room-card__chips span {
  font-size: .72rem; color: var(--hbe-muted); background: var(--hbe-bg-warm);
  border: 1px solid var(--hbe-border); border-radius: 999px; padding: .2rem .6rem;
}
.hbe-room-card__features { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.hbe-room-card__features li { font-size: .78rem; color: var(--hbe-muted); }
.hbe-room-card__features li::before { content: "✓ "; color: var(--hbe-primary); font-weight: 700; }
.hbe-room-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }
.hbe-room-card__price { font-size: .82rem; color: var(--hbe-muted); margin: 0; }
.hbe-room-card__price strong { display: block; font-size: 1.05rem; color: var(--hbe-accent-dark); }

/* ----------------------------------------------------------------
   BLOQUE DE MARCA / CIERRE + FOOTER
   ---------------------------------------------------------------- */
.hbe-brand {
  background: linear-gradient(150deg, #2b5a20, #1f2e18);
  padding: clamp(60px, 10vw, 100px) 0;
}
.hbe-brand__inner { text-align: center; }
.hbe-brand__tagline { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 1.1rem; color: var(--hbe-accent-light); margin: 0 0 1.6rem; }

.hbe-footer {
  background: #1f2e18; color: rgba(247,249,242,.7);
  padding: 2.2rem 0; text-align: center; font-size: .8rem;
}

/* ================================================================
   PÁGINA "CABAÑAS FRENTE AL MAR EN CÓRDOBA" — sección comparativa +
   tarjeta de cabaña con lista de características (contenido editorial,
   ver includes/shortcodes-cabanas-cordoba.php).
   ================================================================ */
.hbe-compare { padding: clamp(50px, 8vw, 90px) 0; background: var(--hbe-bg); }
.hbe-compare__grid {
  display: grid; gap: .7rem; margin: 2rem 0;
  max-width: 640px;
}
.hbe-compare__row {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.1rem;
  background: var(--hbe-panel);
  border: 1px solid var(--hbe-border);
  border-radius: var(--hbe-radius-sm);
  font-size: .92rem;
}
.hbe-compare__pref { color: var(--hbe-muted); flex: 1; }
.hbe-compare__arrow { color: var(--hbe-primary); font-weight: 700; }
.hbe-compare__destino { color: var(--hbe-text); font-weight: 700; }
.hbe-compare__highlight {
  max-width: 640px;
  background: rgba(193,96,58,.08);
  border: 1px solid rgba(193,96,58,.3);
  border-radius: var(--hbe-radius-sm);
  padding: 1.1rem 1.3rem;
  color: var(--hbe-text);
  line-height: 1.6;
}
.hbe-compare__highlight strong { color: var(--hbe-accent-dark); }
.hbe-compare__amenidades {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: .5rem .8rem;
}
.hbe-compare__amenidades li {
  color: rgba(255,255,255,.92); font-size: .88rem;
  padding-left: 1.3rem; position: relative;
}
.hbe-compare__amenidades li::before {
  content: "✓"; position: absolute; left: 0; color: var(--hbe-accent-light); font-weight: 700;
}
/* Variante para usar la misma lista con check dentro de una tarjeta clara
   (.hbe-property-card, fondo --hbe-panel) en vez de la banda verde oscura. */
.hbe-compare__amenidades--card { grid-template-columns: 1fr; gap: .3rem; }
.hbe-compare__amenidades--card li { color: var(--hbe-muted); }
.hbe-compare__amenidades--card li::before { color: var(--hbe-primary); }
.hbe-cabin-card__lista-titulo {
  font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  color: var(--hbe-primary-dark); margin: .5rem 0 .1rem;
}
.hbe-cabin-card__ideal { font-size: .82rem; color: var(--hbe-muted); margin: .5rem 0 0; }

/* Rompe el loop de altura con el iframe que embebe esta página desde el
   post viejo (ver includes/embed-legacy-post.php): min-height:100svh
   dependía del propio alto del iframe, que a su vez dependía de esto. */
.hbe-home--embebido .hbe-hero { min-height: 640px; }

/* ================================================================
   FASE 2 — motor de reservas: picker en página de propiedad, cantidad
   por tipo, panel resumen/confirmación, badges de disponibilidad.
   Clon estructural de monitos-tour.css con selectores .hbe-* y paleta
   verde/terracota.
   ================================================================ */

/* Cantidad por tipo de habitación dentro de la tarjeta */
.hbe-room-card__qty {
  display: flex; align-items: center; gap: .8rem; margin-top: .6rem;
}
.hbe-room-card__qty-val { font-size: 1rem; font-weight: 700; color: var(--hbe-text); min-width: 1.4rem; text-align: center; }
.hbe-room-card__avail-note { font-size: .74rem; color: var(--hbe-muted); margin: .35rem 0 0; }
.hbe-room-card.is-unavailable { opacity: .55; }
.hbe-stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.hbe-stepper__btn:disabled:hover { background: var(--hbe-bg); color: var(--hbe-primary-dark); }

/* Barra flotante de fechas — fija (no sticky) con margen a los bordes. */
.hbe-datesbar {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 14px;
  right: 14px;
  z-index: 40;
  background: var(--hbe-primary-dark);
  border-radius: 999px;
  box-shadow: var(--hbe-shadow);
}
.hbe-datesbar__inner { width: auto; margin: 0; padding: .75rem 1.1rem; }
.hbe-datesbar__btn {
  display: flex !important;
  align-items: center;
  gap: .7rem;
  width: 100% !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--hbe-text-light) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.hbe-datesbar__icon { font-size: 1.15rem; flex-shrink: 0; }
.hbe-datesbar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hbe-datesbar__text strong { font-size: .92rem; }
.hbe-datesbar__text small { font-size: .74rem; color: rgba(247, 249, 242, .78); }
.hbe-datesbar__edit {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  color: var(--hbe-text-light);
  border: 1.5px solid rgba(247, 249, 242, .45);
  border-radius: 999px;
  padding: .35rem .8rem;
}

/* Barra flotante inferior — total en vivo, abre el modal de "Tu reserva" */
.hbe-floatbar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(var(--hbe-safe-bottom) + 14px);
  z-index: 45;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--hbe-shadow);
  animation: hbe-floatbar-in .25s ease;
}
.hbe-floatbar[hidden] { display: none; }
.hbe-floatbar__btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100% !important;
  border-radius: inherit !important;
  padding: .95rem 1.3rem !important;
  background: var(--hbe-primary-dark) !important;
  border: none !important;
  color: var(--hbe-text-light) !important;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.hbe-floatbar__count { font-size: .8rem; font-weight: 600; opacity: .85; }
.hbe-floatbar__cta { font-size: .95rem; }
.hbe-floatbar__cta strong { color: var(--hbe-accent-light); margin-left: .3rem; }
@keyframes hbe-floatbar-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hbe-floatbar { animation: none; }
}

/* Tras un envío exitoso, se bloquean los steppers de habitación para
   evitar una segunda reserva sobre la misma carga de página. */
.hbe-propiedad.is-reserved [data-hbe-room-step] {
  pointer-events: none;
  opacity: .35;
}

/* Panel de resumen y envío de reserva */
.hbe-reserve-panel {
  background: linear-gradient(150deg, #2b5a20, #16290f);
  padding: clamp(50px, 8vw, 90px) 0;
}
.hbe-reserve-box {
  background: var(--hbe-panel);
  border-radius: var(--hbe-radius);
  padding: 1.6rem;
  width: 100%;
  max-width: none;
  margin: 1.4rem 0 1.8rem;
  box-shadow: var(--hbe-shadow);
}
.hbe-reserve-box__empty { color: var(--hbe-muted); font-size: .88rem; margin: 0; }
.hbe-reserve-box__lines { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .8rem; }
.hbe-reserve-box__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .82rem; color: var(--hbe-muted);
  padding-bottom: .5rem; border-bottom: 1px dashed var(--hbe-border);
}
.hbe-reserve-box__row strong { color: var(--hbe-text); font-size: .92rem; }
.hbe-reserve-box__row--cart { align-items: center; }
.hbe-reserve-box__row--cart span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.hbe-cart-line__ctrl { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.hbe-cart-line__ctrl .hbe-stepper__btn { width: 24px !important; height: 24px !important; font-size: .95rem !important; }
.hbe-cart-line__ctrl b { font-size: .82rem; min-width: .9rem; text-align: center; color: var(--hbe-text); }
.hbe-reserve-box__row--total {
  border-bottom: none; margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--hbe-border);
}
.hbe-reserve-box__row--total span { font-weight: 700; color: var(--hbe-text); }
.hbe-reserve-box__row--total strong { font-size: 1.2rem; color: var(--hbe-accent-dark); }
.hbe-reserve-box__totals { margin-bottom: 1rem; }
.hbe-reserve-box__form { display: flex; flex-direction: column; gap: .8rem; }
.hbe-reserve-box__field { display: flex; flex-direction: column; gap: .3rem; }
.hbe-reserve-box__field label {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hbe-primary-dark);
}
.hbe-reserve-box__field input {
  padding: .65rem .8rem; border: 1.5px solid var(--hbe-border); border-radius: var(--hbe-radius-sm);
  font-size: 16px; font-family: inherit; background: var(--hbe-bg-warm); color: var(--hbe-fg);
}
.hbe-reserve-box__field input:focus { outline: none; border-color: var(--hbe-primary); }
.hbe-reserve-box__error { color: var(--hbe-accent-dark); font-size: .8rem; margin: 0; }
.hbe-reserve-box #hbe-reserve-submit { width: 100%; margin-top: .3rem; }

.hbe-reserve-box__confirm { text-align: center; padding: .5rem 0; }
.hbe-reserve-box__confirm-icon {
  width: 48px; height: 48px; line-height: 48px; margin: 0 auto .8rem;
  border-radius: 50%; background: var(--hbe-primary); color: #fff; font-size: 1.4rem; font-weight: 700;
}
.hbe-reserve-box__confirm h3 { font-family: "Fraunces", Georgia, serif; margin: 0 0 .5rem; color: var(--hbe-text); }
.hbe-reserve-box__confirm p { color: var(--hbe-muted); font-size: .88rem; line-height: 1.5; margin: 0 0 .5rem; }
.hbe-reserve-box__confirm-total { font-weight: 700; color: var(--hbe-text) !important; }

/* Servicios Extra — plan de alimentación (grilla de 4 tarjetas tipo radio) */
.hbe-svc-extra { margin-bottom: 1rem; }
.hbe-svc-extra h3 {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hbe-primary-dark); margin: 0 0 .7rem;
}
.hbe-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 560px) {
  .hbe-svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hbe-svc-card {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: flex !important;
  flex-direction: column; align-items: center; gap: 6px;
  min-width: 0; width: 100%;
  padding: 16px 10px !important;
  background: var(--hbe-bg-warm) !important;
  border: 1.5px solid var(--hbe-border) !important;
  border-radius: var(--hbe-radius-sm) !important;
  cursor: pointer; text-align: center; font-family: inherit;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.hbe-svc-card:hover { border-color: var(--hbe-primary) !important; box-shadow: 0 0 0 3px rgba(63,125,50,.15); }
.hbe-svc-card.is-svc-active {
  border-color: var(--hbe-accent) !important;
  background: rgba(193,96,58,.1) !important;
  box-shadow: 0 0 0 3px rgba(193,96,58,.2), 0 3px 10px rgba(30,50,20,.1);
}
.hbe-svc-card__icon { font-size: 1.4rem; }
.hbe-svc-card__label { font-size: .78rem; color: var(--hbe-fg); line-height: 1.3; max-width: 100%; overflow-wrap: break-word; }
/* Activa/seleccionada: el fondo pasa a un overlay translúcido de --hbe-accent
   que deja ver el panel SIEMPRE claro (--hbe-panel) de atrás -- ahí el texto
   se queda oscuro sin importar si el hotel es de paleta oscura o clara. */
.hbe-svc-card.is-svc-active .hbe-svc-card__label { color: var(--hbe-text) !important; }
.hbe-svc-card__price { font-size: .7rem; font-weight: 700; color: var(--hbe-accent-dark); max-width: 100%; overflow-wrap: break-word; }

/* Badge de disponibilidad sobre la foto de la tarjeta de propiedad */
.hbe-property-card__media { position: relative; }
.hbe-property-card__avail-badge {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
  font-size: .68rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px;
  color: #fff; backdrop-filter: blur(3px);
}
.hbe-property-card__avail-badge.is-available { background: rgba(63,125,50,.88); }
.hbe-property-card__avail-badge.is-full { background: rgba(80,80,80,.75); }
.hbe-property-card.is-unavailable { opacity: .72; }

/* ================================================================
   Restaurante / Bar — barra de categorías SIEMPRE vertical (también en
   mobile, con ícono + nombre, columna propia con scroll independiente) +
   grilla de ítems con foto + carrito.
   ================================================================ */
.hbe-menu-page { font-family: "Inter", Arial, sans-serif; color: var(--hbe-text); background: var(--hbe-bg); overflow-x: hidden; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.hbe-menu-body { padding: 0; }
.hbe-menu-layout { display: flex; align-items: stretch; }

.hbe-menu-cats {
  display: flex; flex-direction: column; gap: .4rem;
  flex: 0 0 88px; width: 88px;
  background: #17300f;
  padding: .8rem .4rem;
  position: sticky; top: 0; align-self: flex-start;
  height: 100svh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.hbe-menu-cats a {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  text-decoration: none; color: rgba(242,251,250,.75);
  background: rgba(255,255,255,.06); border: 1px solid transparent;
  border-radius: 14px; padding: .6rem .3rem;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.hbe-menu-cats a:hover { background: rgba(255,255,255,.12); color: #fff; }
.hbe-menu-cats a.is-active { background: var(--hbe-accent); color: #fff; border-color: var(--hbe-accent); }

/* Borde giratorio en la categoría activa — mismo mecanismo que .btn-shine */
.hbe-menu-cats a.is-active::before {
  content: "";
  position: absolute; inset: -3px; padding: 3px; border-radius: inherit;
  background: conic-gradient(
    from var(--hbe-shine-angle),
    transparent 0%, transparent 72%,
    var(--hbe-primary-light) 85%, #fff 92%, var(--hbe-primary-light) 96%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1; animation: hbe-shine-spin 2.6s linear infinite; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .hbe-menu-cats a.is-active::before { animation: none; } }
.hbe-menu-cats__icon { font-size: 1.3rem; line-height: 1; }
.hbe-menu-cats__label { font-size: .62rem; font-weight: 700; text-align: center; line-height: 1.2; overflow-wrap: break-word; }

.hbe-menu-content { flex: 1 1 auto; min-width: 0; padding: 1.4rem 0 .5rem; }
.hbe-menu-content .hbe-container { width: min(1000px, 94%); margin-inline: auto; }
.hbe-menu-cat { padding-top: 1.2rem; scroll-margin-top: 16px; }
.hbe-menu-cat__title { font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; margin: 0 0 .9rem; color: var(--hbe-text); }
.hbe-menu-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: .6rem; }

.hbe-menu-item {
  display: flex; flex-direction: column;
  background: var(--hbe-panel); border: 1px solid var(--hbe-border); border-radius: var(--hbe-radius-sm);
  overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hbe-menu-item:hover { transform: translateY(-2px); box-shadow: var(--hbe-shadow-sm); }
.hbe-menu-item:focus-visible { outline: 2px solid var(--hbe-primary); outline-offset: 2px; }
.hbe-menu-item.is-in-cart { border-color: var(--hbe-primary); box-shadow: 0 0 0 2px rgba(63,125,50,.16); }
.hbe-menu-item__media { position: relative; aspect-ratio: 1 / 1; background: var(--hbe-bg-warm); overflow: hidden; }
.hbe-menu-item__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbe-menu-item__badge {
  position: absolute; top: .4rem; left: .4rem; z-index: 2;
  font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #fff; background: var(--hbe-accent); border-radius: 999px; padding: .15rem .5rem;
}
/* Badge de cantidad — solo informativo, sin botones (el pill +/- por
   tarjeta se quitó a pedido del cliente; ajustar cantidad se hace desde
   las líneas del carrito al final de la página). */
.hbe-menu-item__count {
  position: absolute; right: .4rem; bottom: .4rem; z-index: 3;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--hbe-primary); color: #fff; font-size: .78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* Carrusel de fotos dentro de la tarjeta (cuando el producto tiene más de
   una imagen) */
.hbe-card-carousel__slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease;
}
.hbe-card-carousel__slide.is-active { opacity: 1; }
.hbe-card-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbe-card-carousel__dots {
  position: absolute; left: 0; right: 0; bottom: .4rem; z-index: 2;
  display: flex; justify-content: center; gap: 5px;
}
.hbe-card-carousel__dot {
  width: 6px !important; height: 6px !important; border-radius: 50% !important; border: none !important; padding: 0 !important;
  background: rgba(255,255,255,.5) !important; cursor: pointer; display: block !important;
  -webkit-appearance: none !important; appearance: none !important;
}
.hbe-card-carousel__dot.is-active { background: #fff !important; width: 16px !important; border-radius: 4px !important; }

/* "Carrito" de la tarjeta (pill -/cantidad/+) */
.hbe-menu-item__qty {
  position: absolute; right: .4rem; bottom: .4rem; z-index: 3;
  display: flex; align-items: center; gap: .35rem;
  background: rgba(23,48,15,.82); backdrop-filter: blur(3px);
  border-radius: 999px; padding: .25rem .4rem;
  isolation: isolate;
}
.hbe-menu-item__qty::before {
  content: "";
  position: absolute; inset: -3px; padding: 3px; border-radius: inherit;
  background: conic-gradient(
    from var(--hbe-shine-angle),
    transparent 0%, transparent 72%,
    var(--hbe-primary-light) 85%, var(--hbe-accent) 92%, var(--hbe-primary-light) 96%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1; animation: hbe-shine-spin 2.6s linear infinite; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .hbe-menu-item__qty::before { animation: none; } }
.hbe-menu-item__qty .hbe-stepper__btn { width: 24px; height: 24px; font-size: 1rem; background: rgba(255,255,255,.14); border-color: transparent; color: #fff; }
.hbe-menu-item__qty .hbe-stepper__btn:hover { background: var(--hbe-primary); }
.hbe-menu-item__qty-val { font-size: .82rem; font-weight: 700; min-width: .9rem; text-align: center; color: #fff; }
.hbe-menu-item__info { padding: .7rem .7rem .9rem; min-width: 0; }
.hbe-menu-item__cat-pill {
  display: inline-block; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--hbe-primary-dark); background: rgba(63,125,50,.1); border-radius: 999px; padding: .1rem .5rem; margin-bottom: .35rem;
}
.hbe-menu-item__name { font-size: .84rem; font-weight: 700; margin: 0 0 .2rem; color: var(--hbe-text); line-height: 1.3; }
.hbe-menu-item__desc { font-size: .7rem; color: var(--hbe-muted); margin: 0 0 .35rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hbe-menu-item__price { font-size: .82rem; font-weight: 700; color: var(--hbe-accent-dark); margin: 0; }

@media (min-width: 640px) {
  .hbe-menu-cats { flex: 0 0 130px; width: 130px; padding: 1.2rem .6rem; }
  .hbe-menu-cats__icon { font-size: 1.5rem; }
  .hbe-menu-cats__label { font-size: .68rem; }
  .hbe-menu-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .hbe-menu-content { padding: 2rem 0 1rem; }
}
@media (min-width: 900px) {
  .hbe-menu-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Botón flotante de carrito — círculo oscuro translúcido con borde
   giratorio dorado/terracota y badge de cantidad, fijo abajo a la derecha. */
.hbe-menu-fab {
  /* bottom:90px (no 22px) — el tema pone su botón "volver arriba" fijo en
     la misma esquina inferior derecha; sin este margen quedan superpuestos
     y ese botón (aunque pointer-events:none en reposo) termina interceptando
     el click del carrito al hacer scroll. */
  position: fixed; right: 18px; bottom: 90px; z-index: 1001;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23,48,15,.82); backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  text-decoration: none; isolation: isolate;
}
.hbe-menu-fab__icon { font-size: 1.5rem; }
.hbe-menu-fab::before {
  content: "";
  position: absolute; inset: -3px; padding: 3px; border-radius: 50%;
  background: conic-gradient(
    from var(--hbe-shine-angle),
    transparent 0%, transparent 65%,
    var(--hbe-accent) 80%, #ffd457 90%, var(--hbe-accent) 96%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1; animation: hbe-shine-spin 2.6s linear infinite; pointer-events: none;
}
.hbe-menu-fab__badge {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px;
  background: #ffd457; color: #17300f; border: 2px solid #17300f;
  font-size: .78rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
@media (prefers-reduced-motion: reduce) { .hbe-menu-fab::before { animation: none; } }
@media (min-width: 900px) { .hbe-menu-fab { right: 32px; bottom: 96px; } }

/* Anticipo + comprobante (huésped) */
.hbe-reserve-box__policy { font-size: .8rem; line-height: 1.5; color: var(--hbe-fg-muted, #5c6b4d); margin: 0 0 .8rem; }
.hbe-anticipo__horarios { font-size: .85rem; margin: .8rem 0 0; opacity: .85; }
.hbe-anticipo { margin-top: 1rem; padding: 1rem; border: 1px solid var(--hbe-primary, #3f7d32); border-radius: 12px; text-align: left; }
.hbe-anticipo h4 { margin: 0 0 .4rem; font-size: 1rem; }
.hbe-anticipo p { margin: .3rem 0; font-size: .88rem; }
.hbe-anticipo__datos { white-space: pre-wrap; font: inherit; font-size: .88rem; background: rgba(0,0,0,.05); padding: .7rem; border-radius: 8px; margin: .5rem 0; }
.hbe-anticipo__label { display: block; font-size: .8rem; margin: .8rem 0 .3rem; font-weight: 600; }
.hbe-anticipo__file { display: block; width: 100%; margin-bottom: .7rem; font-size: .85rem; }
.hbe-anticipo__msg { font-weight: 600; }