/* ===================================================================
   compact.css — PBP
   Tipografías compactas + menú superior optimizado
   =================================================================== */

/* Tamaño base rápido para todo el sitio */
:root{
  --fs-base: 14px;   /* antes 15px -> más compacto */

  /* Menú compacto */
  --menu-font: 12px; /* antes 13px -> más chico */
  --menu-gap: 6px;   /* antes 8px */
  --menu-pad-y: 4px; /* antes 6px */
  --menu-pad-x: 6px; /* antes 8px */

  /* Color de acento global */
  --accent: #f28c28;
}

html{ font-size: var(--fs-base); }
body{ font-size: .95rem; line-height: 1.45; color:#111; }

/* Títulos compactos */
h1{ font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h2{ font-size: clamp(1.15rem, 2.0vw, 1.45rem); }
h3{ font-size: clamp(1.00rem, 1.8vw, 1.20rem); }

/* Navegación / botones / texto suave */
.menu a{ font-size: var(--menu-font); }
.btn, .waLink{ font-size: .95rem; }
.muted{ font-size: .95rem; }

/* Chips, badges y precios */
.price-chip .amount{ font-size: 1rem; }
.price-chip .label{ font-size: .85rem; }
.badge, .tag{ font-size: 11px; }
.tag-no-slot{ font-size: 13px; }
.slot-time{ font-size: 1rem; }

/* Inputs a 16px para no activar zoom en iOS */
input, textarea, select{ font-size: 16px; }

/* ================================================================
   Menú compacto global (aplica a todas las páginas)
   ================================================================ */
.menu{
  gap: var(--menu-gap) !important;
  padding: var(--menu-pad-y) var(--menu-pad-x) !important;
  max-width: 96vw !important;
  border-radius: 14px !important;

  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;

  white-space: normal !important;
  overflow-x: visible !important;
}

/* Botones del menú */
.menu a{
  font-size: var(--menu-font) !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  line-height: 1 !important;
  letter-spacing: .25px !important;
  font-weight: 800;
  text-transform: uppercase;
  border:1.4px solid rgba(242,140,40,.9);
  background: rgba(255,255,255,.06);
  transition:.18s ease;
}
.menu a:hover{
  background: var(--accent);
  color: #191919;
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* iOS: fondos fixed -> scroll para evitar parpadeos */
@media (max-width: 768px){
  .hero{ background-attachment: scroll !important; }
}

/* ================================================================
   Responsivo
   ================================================================ */
@media (max-width: 768px){
  html{ font-size: 13.5px; }

  .menu{
    gap: 5px !important;
    padding: 4px 6px !important;
    width: calc(100% - 24px);
    left: 50%;
    transform: translateX(-50%);
  }
  .menu a{
    font-size: 11.5px !important;
    padding: 4px 6px !important;
    border-radius: 7px !important;
  }
  .centerWrap{ padding-top: 84px !important; }
}

@media (max-width: 480px){
  html{ font-size: 13px; }

  .menu{
    gap: 4px !important;
    padding: 4px 5px !important;
  }
  .menu a{
    font-size: 11px !important;
    padding: 4px 5px !important;
  }
  .centerWrap{ padding-top: 80px !important; }
}

/* ---------------------------------------------------------------
   Ocultar menú en celular (global, todas las páginas)
   --------------------------------------------------------------- */
@media (max-width: 900px){
  .menu{
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   (Opcional) Ocultar rápido el link de Acceso Admin por CSS
   Descomentar si lo necesitás temporalmente:
-------------------------------------------------------------------
.menu a[href="/reservas/admin/login.php"] { display: none !important; }
*/