/* ================================================================
   MeuHotelOnline.com.br — Official Brand System
   Identidade Oficial baseada no Logotipo:
   - Deep Navy / Azul Noturno: #002B49 (Autoridade, Solidez)
   - Vibrant Teal / Turquesa Ciano: #00A8B5 (Destaque, Conversão)
   - Soft Teal Glow: rgba(0, 168, 181, 0.22)
   - Accent Gold: #FACC15 (Valores, Garantia, Cases)
   ================================================================ */

:root {
  --primary-teal: #00a8b5;
  --primary-teal-hover: #00c4d4;
  --primary-teal-dark: #008894;
  --navy-deep: #001726;
  --navy-main: #002b49;
  --navy-surface: #0a2238;
  --navy-card: rgba(10, 34, 56, 0.75);
  --border-teal: rgba(0, 168, 181, 0.2);
  --border-teal-glow: rgba(0, 168, 181, 0.45);
  --accent-gold: #facc15;
  --accent-gold-glow: rgba(250, 204, 21, 0.25);
  --text-muted: #94a3b8;
  --text-light: #f1f5f9;
}

html {
  scroll-behavior: smooth;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

body {
  background-color: var(--navy-deep);
  color: #ffffff;
  overflow-x: hidden;
}

/* Efeito sutil de background radial / glow */
.bg-glow-radial {
  background: radial-gradient(circle at 50% 0%, rgba(0, 168, 181, 0.16) 0%, rgba(0, 23, 38, 0) 65%);
}

.bg-glow-radial-bottom {
  background: radial-gradient(circle at 50% 100%, rgba(0, 168, 181, 0.14) 0%, rgba(0, 23, 38, 0) 70%);
}

/* Glassmorphism Cards */
.glass-card {
  background: var(--navy-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-teal);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: var(--border-teal-glow);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -15px rgba(0, 168, 181, 0.2);
}

.glass-card-gold {
  background: rgba(26, 38, 30, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(250, 204, 21, 0.3);
  box-shadow: 0 10px 30px -10px rgba(250, 204, 21, 0.1);
  transition: all 0.3s ease;
}

.glass-card-gold:hover {
  border-color: rgba(250, 204, 21, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -15px rgba(250, 204, 21, 0.25);
}

/* Header Shine Animation */
@keyframes header-shine {
  0% { left: -40%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.header-glow-line::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -40%;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 168, 181, 0.7), transparent);
  animation: header-shine 6s ease-in-out infinite;
  z-index: 1;
}

/* Botão Dourado Pulsante */
.btn-gold-pulse {
  position: relative;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.14), rgba(250, 204, 21, 0.04));
  border: 1px solid rgba(250, 204, 21, 0.38);
  color: #ffffff;
  transition: all 0.3s ease;
  overflow: hidden;
}

.btn-gold-pulse:hover {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.28), rgba(250, 204, 21, 0.12));
  border-color: rgba(250, 204, 21, 0.8);
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.3);
  transform: translateY(-2px);
}

.btn-gold-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #facc15, transparent);
}

/* Botão Teal Principal com Efeito Brilho */
.btn-teal {
  background: linear-gradient(135deg, #00a8b5 0%, #008894 100%);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 168, 181, 0.35);
  transition: all 0.3s ease;
}

.btn-teal:hover {
  background: linear-gradient(135deg, #00c4d4 0%, #00a8b5 100%);
  box-shadow: 0 6px 30px rgba(0, 168, 181, 0.55);
  transform: translateY(-2px);
}

/* Gift Wobble Animation */
@keyframes gift-wobble {
  0%, 80%, 100% { transform: rotate(0deg) translateY(0); }
  85% { transform: rotate(-8deg) translateY(-2px); }
  90% { transform: rotate(8deg) translateY(-2px); }
  95% { transform: rotate(-4deg) translateY(-1px); }
}

.animate-gift {
  animation: gift-wobble 3.5s ease-in-out infinite;
}

/* Pulse Glow dot */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.animate-pulse-dot {
  animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Floating Card Animation */
@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: float-card 5s ease-in-out infinite;
}

/* Marquee / Logos Slider Contínuo */
.marquee-wrapper {
  overflow: hidden;
  user-select: none;
  display: flex;
  gap: 2rem;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: 2rem;
  animation: scroll-left 35s linear infinite;
}

.marquee-wrapper:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 2rem)); }
}

/* Modal Transitions */
.modal-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content-box {
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-content-box {
  transform: scale(1) translateY(0);
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--navy-deep);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 168, 181, 0.35);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 168, 181, 0.7);
}