/* ==========================================================================
   TOTAL HOTEL BRÁS — site.css
   Base do design system (ref: luxury-real-estate-22). Tailwind via CDN cobre
   layout/utilitários; aqui ficam animações, ajustes finos e o widget Omnibees.
   Paleta: zinc (monocromático minimalista) + acento bronze/champagne nos CTAs.
   ========================================================================== */

:root {
  --brand: #ff2a22;        /* vermelho da marca Total Hotel (do logo) */
  --brand-dark: #d41c15;   /* hover dos CTAs */
  --brand-light: #ff6b65;
}

/* --- Marquee (barra de benefícios / selos em loop) --- */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 45s linear infinite;
}
.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

/* --- Esconder scrollbar dos trilhos horizontais (vitrine de quartos) --- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --- Acento de marca (usado junto ao Tailwind onde precisa de var) --- */
.text-brand   { color: var(--brand); }
.bg-brand     { background-color: var(--brand); }
.border-brand { border-color: var(--brand); }
.bg-brand:hover.hover\:bg-brand-dark:hover { background-color: var(--brand-dark); }

/* Botão Reservar (CTA principal) */
.btn-reservar {
  background-color: var(--brand);
  color: #fff;
  transition: background-color .3s ease, transform .3s ease;
}
.btn-reservar:hover { background-color: var(--brand-dark); }

/* Nota: o widget de reservas (.hero-search-bar) NÃO é escondido via CSS.
   A entrada é feita com gsap.from() em site.js — assim, se o JS falhar ou
   for interrompido, o widget de reservas permanece visível (fail-safe). */

/* --- Menu mobile --- */
#mobile-menu {
  transition: opacity .3s ease, visibility .3s ease;
}
#mobile-menu.hidden-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- Inputs de data Omnibees (placeholder) --- */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .7;
  cursor: pointer;
}

/* --- Utilidades de imagem/hover --- */
.img-zoom { transition: transform 1s ease; }
.group:hover .img-zoom { transform: scale(1.05); }

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .img-zoom { transition: none; }
}