/**
 * Boipeba Salvador — Design System de Turismo Náutico Premium
 * Sobrepõe o style.css base sem quebrar lógica PHP ou dependências JS.
 * Inspiração: GetYourGuide, Airbnb Experiências, Booking Atrações
 * Fontes: Plus Jakarta Sans (já carregada no header.php)
 */

/* ==========================================================================
   1. DESIGN TOKENS — PALETA NÁUTICA BAIANA PREMIUM
   ========================================================================== */
:root {
  /* Oceano & Natureza */
  --ocean-deep:    #0a2342;   /* Azul profundo do atlântico */
  --ocean-mid:     #0e4d7b;   /* Azul mar aberto */
  --ocean-bright:  #0284c7;   /* Ciano oceânico */
  --ocean-light:   #e0f2fe;   /* Espuma de onda */
  --teal-vivid:    #0d9488;   /* Verde esmeralda tropical */
  --teal-light:    #ccfbf1;   /* Verde água claro */

  /* Areia & Sol */
  --sand-warm:     #f5e6c8;   /* Areia dourada de Boipeba */
  --sand-deep:     #e8c97a;   /* Areia mais intensa */
  --sol-gold:      #f59e0b;   /* Sol do meio-dia */
  --sol-orange:    #ea580c;   /* Pôr do sol baiano */
  --sol-light:     #fef9ee;   /* Clarão de areia */

  /* Neutros Premium */
  --ink-900:       #0f1b2d;   /* Texto escuro profundo */
  --ink-700:       #1e3a5f;   /* Texto médio */
  --ink-500:       #475569;   /* Texto muted */
  --ink-200:       #e2e8f0;   /* Bordas */
  --ink-50:        #f8fafc;   /* Fundo sutíl */

  /* Sombras Náuticas */
  --shadow-ocean:  0 4px 24px -4px rgba(10, 35, 66, 0.18), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-card:   0 8px 32px -6px rgba(10, 35, 66, 0.13), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-float:  0 16px 48px -8px rgba(10, 35, 66, 0.22), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-glow-ocean: 0 0 0 3px rgba(2, 132, 199, 0.25);
  --shadow-glow-teal:  0 0 0 3px rgba(13, 148, 136, 0.25);
  --shadow-glow-gold:  0 0 0 3px rgba(245, 158, 11, 0.25);

  /* Animações */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);

  /* Radius */
  --r-card:  18px;
  --r-btn:   12px;
  --r-pill:  9999px;
  --r-sm:    8px;
}

/* ==========================================================================
   2. TIPOGRAFIA FLUIDA — HIERARQUIA PREMIUM
   ========================================================================== */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Títulos de seção com underline decorativo */
.section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, var(--sol-gold), var(--teal-vivid));
  border-radius: var(--r-pill);
  margin-top: 0.55rem;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--ink-500);
  line-height: 1.65;
  margin-top: 0.5rem;
}

/* ==========================================================================
   3. TOP BAR — FAIXA INFORMATIVA MODERNA
   ========================================================================== */
.top-bar {
  background: linear-gradient(135deg, var(--ocean-deep) 0%, #0e2a45 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.top-bar-contact a,
.top-bar-contact span {
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s ease;
}

.top-bar-contact a:hover {
  color: var(--sand-deep);
}

/* WhatsApp na top bar — destaque especial */
.top-bar a[href*="wa.me"] {
  background: rgba(37, 211, 102, 0.15);
  color: #4ade80 !important;
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(74, 222, 128, 0.25);
  font-weight: 700;
  transition: all 0.2s ease;
}

.top-bar a[href*="wa.me"]:hover {
  background: rgba(37, 211, 102, 0.28);
  color: #86efac !important;
  border-color: rgba(74, 222, 128, 0.45);
}

/* ==========================================================================
   4. HEADER & NAVBAR — NAVEGAÇÃO PREMIUM COM GLASSMORPHISM
   ========================================================================== */
.site-header {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
  box-shadow: 0 1px 0 rgba(10, 35, 66, 0.04), 0 4px 16px -4px rgba(10, 35, 66, 0.06) !important;
  transition: all 0.3s var(--ease-smooth) !important;
}

.site-header.is-sticky {
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow: 0 2px 0 rgba(226, 232, 240, 0.8), 0 8px 24px -4px rgba(10, 35, 66, 0.1) !important;
}

/* Brand Name — identidade náutica */
.brand-name {
  color: var(--ocean-deep) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.brand-slogan {
  color: var(--ink-500) !important;
  font-weight: 500;
  font-size: 0.72rem;
}

/* Nav Links */
.nav-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-700) !important;
  padding: 0.45rem 0.1rem;
  position: relative;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ocean-bright), var(--teal-vivid));
  border-radius: var(--r-pill);
  transition: width 0.3s var(--ease-spring);
}

.nav-link:hover {
  color: var(--ocean-bright) !important;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active {
  color: var(--ocean-mid) !important;
}

.nav-link.active::after {
  width: 100%;
  background: linear-gradient(90deg, var(--ocean-mid), var(--teal-vivid)) !important;
}

/* Botão Carrinho — rebrand turístico */
a.btn.btn-outline[href*="carrinho"] {
  border-color: var(--ocean-bright) !important;
  color: var(--ocean-bright) !important;
  border-radius: var(--r-btn) !important;
  font-weight: 700 !important;
  transition: all 0.22s var(--ease-smooth) !important;
  position: relative;
}

a.btn.btn-outline[href*="carrinho"]:hover {
  background: var(--ocean-bright) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-ocean) !important;
}

/* Botão Anunciar */
a.btn.btn-accent {
  background: linear-gradient(135deg, var(--sol-gold), var(--sol-orange)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-btn) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
  transition: all 0.22s var(--ease-smooth) !important;
}

a.btn.btn-accent:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.45) !important;
  filter: brightness(1.05);
}

/* Mobile Toggle Button */
.btn-mobile-toggle {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: var(--ocean-light) !important;
  color: var(--ocean-mid) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  border: 1px solid rgba(2, 132, 199, 0.2) !important;
  transition: all 0.2s ease !important;
}

.btn-mobile-toggle:hover {
  background: var(--ocean-mid) !important;
  color: #fff !important;
}

/* Menu Mobile Dropdown */
@media (max-width: 1120px) {
  .main-nav {
    background: #fff !important;
    border-top: 2px solid var(--ocean-light) !important;
    box-shadow: 0 16px 40px -8px rgba(10, 35, 66, 0.18) !important;
    border-radius: 0 0 var(--r-card) var(--r-card) !important;
    padding: 1.25rem 1.5rem 1.5rem !important;
    gap: 0.25rem !important;
  }

  .main-nav .nav-link {
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.95rem !important;
  }

  .main-nav .nav-link:hover {
    background: var(--ocean-light) !important;
    color: var(--ocean-mid) !important;
    padding-left: 1.25rem !important;
  }

  .main-nav .nav-link.active {
    background: linear-gradient(135deg, var(--ocean-light), var(--teal-light)) !important;
    color: var(--ocean-mid) !important;
  }

  .main-nav .nav-link::after {
    display: none !important;
  }

  .main-nav .btn {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 0.5rem !important;
  }
}

/* ==========================================================================
   5. HERO SECTION — BANNER IMPACTANTE DE TURISMO
   ========================================================================== */
.hero-section {
  background: linear-gradient(
    165deg,
    rgba(10, 35, 66, 0.92) 0%,
    rgba(13, 77, 123, 0.85) 45%,
    rgba(13, 148, 136, 0.75) 100%
  ), url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=1600&q=80')
    center / cover no-repeat !important;
  padding: 5.5rem 0 6.5rem !important;
  position: relative;
  overflow: hidden;
}

/* Onda decorativa no rodapé do hero */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='%23f8fafc' fill-opacity='1' d='M0,64L48,58.7C96,53,192,43,288,48C384,53,480,75,576,74.7C672,75,768,53,864,42.7C960,32,1056,32,1152,37.3C1248,43,1344,53,1392,58.7L1440,64L1440,80L1392,80C1344,80,1248,80,1152,80C1056,80,960,80,864,80C768,80,672,80,576,80C480,80,384,80,288,80C192,80,96,80,48,80L0,80Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  pointer-events: none;
}

.hero-badge {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: var(--sand-deep) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 0.4rem 1.1rem !important;
}

.hero-title,
.hero-section h1 {
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 2px 16px rgba(10, 35, 66, 0.6) !important;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5) !important;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   6. SEARCH BOX — CAIXA DE BUSCA FLUTUANTE PREMIUM
   ========================================================================== */
.search-box-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-float) !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important;
  padding: 1.75rem !important;
  margin-top: -3.5rem !important;
}

.search-tab-btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
}

.search-tab-btn.active,
.search-tab-btn:hover {
  background: var(--ocean-light) !important;
  color: var(--ocean-mid) !important;
}

.form-control {
  border-radius: 10px !important;
  border-color: #e2e8f0 !important;
  padding: 0.7rem 1rem !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
}

.form-control:focus {
  border-color: var(--ocean-bright) !important;
  box-shadow: var(--shadow-glow-ocean) !important;
}

/* ==========================================================================
   7. CARDS DE PASSEIOS / ESCUNAS / IMÓVEIS — VITRINE PREMIUM
   ========================================================================== */
.property-card {
  border-radius: var(--r-card) !important;
  border: 1px solid #e8edf5 !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, border-color 0.3s ease !important;
  position: relative;
  background: #fff;
}

.property-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.04), rgba(13, 148, 136, 0.04));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.property-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-float) !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
}

.property-card:hover::before {
  opacity: 1;
}

/* Thumbnail com overlay de gradiente */
.property-thumb {
  height: 230px !important;
  overflow: hidden;
  position: relative;
}

.property-thumb::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(10, 35, 66, 0.55) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.property-thumb img {
  transition: transform 0.5s var(--ease-smooth) !important;
}

.property-card:hover .property-thumb img {
  transform: scale(1.08) !important;
}

/* Badges sobre a thumbnail */
.thumb-badges {
  z-index: 2;
  top: 1rem !important;
  left: 1rem !important;
}

.badge {
  border-radius: 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 0.28rem 0.65rem !important;
}

.badge-embarcacao {
  background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-bright)) !important;
}

.badge-destaque {
  background: linear-gradient(135deg, var(--sol-gold), var(--sol-orange)) !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.45) !important;
  animation: pulse-gold 2.5s ease-in-out infinite;
}

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 3px 10px rgba(245, 158, 11, 0.45); }
  50%       { box-shadow: 0 3px 18px rgba(245, 158, 11, 0.7); }
}

/* Corpo do card */
.property-body {
  padding: 1.35rem 1.4rem !important;
  position: relative;
  z-index: 1;
}

.property-price {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--ocean-mid) !important;
  letter-spacing: -0.02em;
}

.property-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ink-900) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
}

.property-location {
  color: var(--ink-500) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
}

.property-footer {
  background: var(--ink-50) !important;
  border-top: 1px solid #f0f4f8 !important;
  padding: 0.85rem 1.4rem !important;
}

/* ==========================================================================
   8. BOTÕES — SISTEMA PREMIUM DE CTAs
   ========================================================================== */
.btn {
  border-radius: var(--r-btn) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  transition: all 0.22s var(--ease-smooth) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-deep)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(14, 77, 123, 0.35) !important;
  border: none !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(14, 77, 123, 0.45) !important;
  filter: brightness(1.08);
}

.btn-accent {
  background: linear-gradient(135deg, var(--sol-gold), var(--sol-orange)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
  border: none !important;
}

.btn-accent:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.5) !important;
}

.btn-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
  border: none !important;
}

.btn-whatsapp:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5) !important;
}

.btn-outline {
  border: 1.5px solid var(--ink-200) !important;
  color: var(--ink-700) !important;
  background: transparent !important;
}

.btn-outline:hover {
  border-color: var(--ocean-bright) !important;
  color: var(--ocean-mid) !important;
  background: var(--ocean-light) !important;
}

.btn-lg {
  padding: 0.95rem 2rem !important;
  font-size: 1.05rem !important;
  border-radius: 14px !important;
}

/* ==========================================================================
   9. SEÇÕES E SECTIONS GERAIS
   ========================================================================== */
.section {
  padding: 4.5rem 0 !important;
}

/* Section headers com linha decorativa */
.section-header {
  margin-bottom: 2.5rem !important;
}

/* CTA Banner — faixa de conversão premium */
.cta-banner {
  background: linear-gradient(135deg, var(--ocean-deep) 0%, var(--ocean-mid) 50%, var(--teal-vivid) 100%) !important;
  border-radius: 24px !important;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cta-content h2 {
  color: #fff !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.cta-content p {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* ==========================================================================
   10. CARDS DE CATEGORIAS — ÍCONES TURÍSTICOS
   ========================================================================== */
.category-card {
  border-radius: 16px !important;
  border: 1.5px solid #f0f4f8 !important;
  box-shadow: 0 2px 12px rgba(10, 35, 66, 0.06) !important;
  transition: all 0.3s var(--ease-spring) !important;
  background: #fff !important;
}

.category-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
  box-shadow: var(--shadow-card) !important;
}

.category-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--ocean-light), var(--teal-light)) !important;
  color: var(--ocean-mid) !important;
  font-size: 1.6rem !important;
  transition: transform 0.3s var(--ease-spring) !important;
}

.category-card:hover .category-icon {
  transform: scale(1.12) rotate(-4deg);
  background: linear-gradient(135deg, var(--ocean-mid), var(--teal-vivid)) !important;
  color: #fff !important;
}

.category-title {
  font-weight: 700 !important;
  color: var(--ink-900) !important;
}

.category-count {
  color: var(--ink-500) !important;
  font-size: 0.78rem !important;
}

/* ==========================================================================
   11. CONTENT BOXES & SPEC PILLS — DETALHES DE PASSEIOS
   ========================================================================== */
.content-box {
  border-radius: 18px !important;
  border: 1.5px solid #edf2f7 !important;
  box-shadow: 0 2px 12px rgba(10, 35, 66, 0.05) !important;
}

.content-box-title {
  color: var(--ink-900) !important;
  font-weight: 800 !important;
  border-bottom-color: #edf2f7 !important;
}

.spec-pill {
  border-radius: 12px !important;
  border: 1.5px solid #edf2f7 !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
}

.spec-pill:hover {
  border-color: rgba(2, 132, 199, 0.25) !important;
  box-shadow: 0 4px 12px rgba(10, 35, 66, 0.08) !important;
}

.spec-pill-icon {
  color: var(--ocean-bright) !important;
}

.amenity-badge {
  border-radius: 10px !important;
  background: linear-gradient(135deg, #f8fafc, #f0fdfa) !important;
  border-color: #e2f0fa !important;
  transition: all 0.2s ease !important;
}

.amenity-badge:hover {
  border-color: rgba(13, 148, 136, 0.3) !important;
  background: var(--teal-light) !important;
}

.amenity-badge i {
  color: var(--teal-vivid) !important;
}

/* ==========================================================================
   12. SIDEBAR DO ANUNCIANTE — CARD DE CONTATO PREMIUM
   ========================================================================== */
.advertiser-card {
  border-radius: 18px !important;
  border: 1.5px solid #edf2f7 !important;
  box-shadow: var(--shadow-card) !important;
}

.simulator-box {
  border-radius: 18px !important;
  border: 1.5px solid #edf2f7 !important;
}

.sim-result-card {
  background: linear-gradient(135deg, var(--ocean-light), var(--teal-light)) !important;
  border-radius: 12px !important;
}

.sim-result-val {
  color: var(--ocean-mid) !important;
}

/* ==========================================================================
   13. GALERIA DE FOTOS — VISOR PREMIUM
   ========================================================================== */
.gallery-container {
  border-radius: 18px !important;
  border-color: #edf2f7 !important;
  overflow: hidden;
  box-shadow: var(--shadow-card) !important;
}

.gallery-main-viewer {
  background: var(--ocean-deep) !important;
}

.gallery-thumb-item.active,
.gallery-thumb-item:hover {
  border-color: var(--ocean-bright) !important;
  box-shadow: var(--shadow-glow-ocean) !important;
}

/* ==========================================================================
   14. FORMULÁRIOS — INPUTS E CONTROLES MODERNOS
   ========================================================================== */
.form-control {
  border-radius: 10px !important;
}

.form-label {
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  color: var(--ink-700) !important;
  letter-spacing: 0.01em;
}

textarea.form-control {
  resize: vertical;
  min-height: 110px;
}

/* Upload Dropzone */
.upload-dropzone {
  border-radius: 16px !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
  background: linear-gradient(135deg, #f0f9ff, #f0fdfa) !important;
  transition: all 0.25s ease !important;
}

.upload-dropzone:hover {
  border-color: var(--ocean-bright) !important;
  background: linear-gradient(135deg, #e0f2fe, #ccfbf1) !important;
  box-shadow: var(--shadow-glow-ocean) !important;
}

/* ==========================================================================
   15. RODAPÉ — FOOTER NÁUTICO ELEGANTE
   ========================================================================== */
.site-footer {
  background: linear-gradient(180deg, var(--ocean-deep) 0%, #060e1a 100%) !important;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ocean-bright), var(--teal-vivid), var(--sol-gold));
}

.footer-col h4 {
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  font-size: 1rem !important;
}

.footer-col h4::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  background: linear-gradient(90deg, var(--sol-gold), var(--teal-vivid));
  border-radius: 9999px;
  margin-top: 0.5rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 0.875rem;
  transition: all 0.2s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.footer-links a:hover {
  color: var(--sand-deep) !important;
  padding-left: 6px !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ==========================================================================
   16. MODAIS E LIGHTBOX — SOBREPOSIÇÕES ELEGANTES
   ========================================================================== */
.modal-overlay {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(10, 35, 66, 0.88) !important;
}

.lightbox-close {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.1) !important;
}

/* ==========================================================================
   17. MICRO-ANIMAÇÕES E ESTADOS DE INTERAÇÃO
   ========================================================================== */

/* Fade-in suave na entrada dos cards */
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Onda animada de entrada */
@keyframes wave-in {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Flutuação suave nos ícones */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Brilho pulsante nos CTAs principais */
@keyframes cta-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ==========================================================================
   18. BADGE DE STATUS — VISUAL PREMIUM
   ========================================================================== */
.badge-status {
  padding: 0.3rem 0.75rem !important;
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
}

.badge-status-publicado {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
  color: #15803d !important;
}

/* ==========================================================================
   19. TABELA DE PREÇOS — SCROLL MOBILE PREMIUM
   ========================================================================== */
.tabela-scroll-hint-mobile {
  background: linear-gradient(135deg, var(--ocean-light), var(--teal-light)) !important;
  border-color: rgba(2, 132, 199, 0.25) !important;
  color: var(--ocean-mid) !important;
  border-radius: 10px !important;
}

/* ==========================================================================
   20. FILTROS DO CATÁLOGO E BUSCA — MOBILE TOUCH
   ========================================================================== */
.search-toggle-icon,
.catalog-filter-icon {
  background: linear-gradient(135deg, var(--ocean-light), var(--teal-light)) !important;
  color: var(--ocean-mid) !important;
}

.search-box-card.is-open .search-toggle-icon,
.imoveis-filter-sidebar.is-open .catalog-filter-icon {
  background: linear-gradient(135deg, var(--ocean-mid), var(--teal-vivid)) !important;
  color: #fff !important;
}

.search-toggle-badge,
.catalog-filter-badge {
  background: linear-gradient(135deg, var(--ocean-mid), var(--teal-vivid)) !important;
  box-shadow: 0 2px 8px rgba(14, 77, 123, 0.3) !important;
}

/* ==========================================================================
   21. RESPONSIVIDADE MOBILE FIRST — REFINAMENTOS
   ========================================================================== */
@media (max-width: 768px) {
  .hero-section {
    padding: 3.5rem 0 5.5rem !important;
  }

  .search-box-card {
    border-radius: 16px !important;
    padding: 1rem !important;
  }

  .property-card {
    border-radius: 14px !important;
  }

  .property-thumb {
    height: 200px !important;
  }

  .section {
    padding: 3rem 0 !important;
  }

  .cta-banner {
    border-radius: 16px !important;
    padding: 2.25rem 1.5rem !important;
  }

  .btn-lg {
    padding: 0.85rem 1.5rem !important;
    font-size: 1rem !important;
    width: 100%;
    justify-content: center;
    display: flex;
  }

  .category-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.35rem !important;
  }

  /* Melhor toque no mobile */
  .btn, .nav-link, .category-card, .property-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

@media (max-width: 480px) {
  .hero-section::after {
    height: 50px;
  }

  .properties-grid {
    gap: 1rem !important;
  }

  .section-title::after {
    width: 36px;
    height: 3px;
  }
}

/* ==========================================================================
   22. MELHORIAS VISUAIS ESPECÍFICAS DE TURISMO NÁUTICO
   ========================================================================== */

/* Badge de escuna/embarcação com ícone náutico especial */
.badge-embarcacao {
  background: linear-gradient(135deg, #0e4d7b, #0284c7) !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

.badge-temporada {
  background: linear-gradient(135deg, #b45309, #f59e0b) !important;
}

/* Thumb code mais visível */
.thumb-code {
  background: rgba(10, 35, 66, 0.8) !important;
  backdrop-filter: blur(6px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

/* Galeria item interativo */
.city-tour-galeria-item {
  border-radius: 10px !important;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease !important;
}

.city-tour-galeria-item:hover {
  transform: scale(1.04) !important;
  box-shadow: var(--shadow-card) !important;
}

/* City tour card header — gradiente náutico */
.city-tour-card-header {
  background: linear-gradient(135deg, var(--ocean-deep) 0%, var(--teal-vivid) 100%) !important;
}

.city-tour-card {
  border-radius: 20px !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.city-tour-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-float) !important;
  border-color: rgba(13, 148, 136, 0.35) !important;
}

/* ==========================================================================
   23. SCROLL BAR PERSONALIZADA — NAVEGADORES WEBKIT
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ocean-bright), var(--teal-vivid));
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--ocean-mid), var(--teal-vivid));
}

/* ==========================================================================
   24. SELEÇÃO DE TEXTO — MARCA DA IDENTIDADE
   ========================================================================== */
/* ==========================================================================
   ETAPA 2 — CARDS DE TRANSFER, FOOTER APRIMORADO & AJUSTES GLOBAIS
   ========================================================================== */

/* ------------------------------------------------------------------
   25. CARDS DE TRANSFER DA HOME — ESTILO PREMIUM EXECUTIVO
   ------------------------------------------------------------------ */
.transfer-home-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1.5px solid #e8edf5 !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.transfer-home-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-float) !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}

/* Cabeçalho do card de transfer */
.transfer-home-card > div:first-child {
  background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%) !important;
  border-bottom: 1px solid #e8f4fd !important;
}

/* Badge de veículo */
.transfer-home-card span[style*="background: #e0f2fe"] {
  background: linear-gradient(135deg, var(--ocean-light), #bfdbfe) !important;
  color: var(--ocean-mid) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 0.3rem 0.7rem !important;
  border: 1px solid rgba(2, 132, 199, 0.18) !important;
}

/* Badge Destaque */
.transfer-home-card span[style*="background: #fef2f2"] {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  color: #92400e !important;
  border-color: #fcd34d !important;
  font-weight: 800 !important;
}

/* Título do transfer card */
.transfer-home-card h3 a {
  color: var(--ink-900) !important;
  transition: color 0.2s ease !important;
}

.transfer-home-card:hover h3 a {
  color: var(--ocean-mid) !important;
}

/* Seta de rota */
.transfer-home-card .bi-arrow-right {
  color: var(--ocean-bright) !important;
}

/* Box de preço interno */
.transfer-home-card > div:last-child > div[style*="background: #f8fafc"] {
  background: linear-gradient(135deg, var(--ocean-light), var(--teal-light)) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.2) !important;
  border-radius: 14px !important;
}

/* Preço grande */
.transfer-home-card span[style*="font-size: 1.5rem"] {
  color: var(--ocean-mid) !important;
  font-weight: 800 !important;
}

/* Pills de amenidades dos transfers */
.transfer-home-card span[style*="background: #f1f5f9"] {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 0.25rem 0.6rem !important;
  font-size: 0.78rem !important;
}

/* Seção dos transfers na home — background melhorado */
section.section[style*="background: #f8fafc"] {
  background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 100%) !important;
  border-top: 1px solid rgba(2, 132, 199, 0.1) !important;
  border-bottom: 1px solid rgba(2, 132, 199, 0.1) !important;
}

/* Badge da seção de transfers */
section.section span.badge[style*="background: #0284c7"] {
  background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-bright)) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
  font-weight: 700 !important;
}

/* Botão "Ver Todos os Transfers" */
section.section a.btn[href*="transfers.php"] {
  background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-bright)) !important;
  color: #fff !important;
  border-radius: var(--r-btn) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28) !important;
  transition: all 0.22s var(--ease-smooth) !important;
}

section.section a.btn[href*="transfers.php"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.4) !important;
}

/* ------------------------------------------------------------------
   26. HERO SLIDER — DOTS NÁUTICOS E ONDA NA BASE
   ------------------------------------------------------------------ */
.hero-dot.active {
  background: var(--sol-gold) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.8) !important;
  border-color: #fff !important;
}

.hero-slide-arrow:hover {
  background: rgba(2, 132, 199, 0.88) !important;
  border-color: var(--ocean-light) !important;
}

/* Onda base no hero-slider */
.hero-slider-section {
  min-height: 520px !important;
}

/* ------------------------------------------------------------------
   27. FOOTER — REFINAMENTOS PREMIUM
   ------------------------------------------------------------------ */

/* Ícone de marca no footer */
.site-footer .footer-grid > .footer-col:first-child > div > div:first-child {
  background: linear-gradient(135deg, var(--ocean-bright), var(--teal-vivid)) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.35) !important;
}

/* Nome da empresa no footer */
.site-footer .footer-grid h3 {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

/* Badge de registro profissional */
.site-footer div[style*="background: #1e293b"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08)) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 10px !important;
  color: var(--sol-gold) !important;
}

/* Links coloridos do footer — substituir inline JS hover por CSS */
.site-footer .footer-links a[style*="color: #38bdf8"],
.site-footer .footer-links a[href*="escunas"],
.site-footer .footer-links a[href*="frades"],
.site-footer .footer-links a[href*="experiencias"] {
  color: var(--ocean-bright) !important;
}

.site-footer .footer-links a[style*="color: #2dd4bf"],
.site-footer .footer-links a[href*="transfers"],
.site-footer .footer-links a[href*="city-tours"] {
  color: var(--teal-vivid) !important;
}

.site-footer .footer-links a[style*="color: #f59e0b"],
.site-footer .footer-links a[href*="loja"] {
  color: var(--sol-gold) !important;
}

.site-footer .footer-links a[style*="color: #4ade80"],
.site-footer .footer-links a[href*="wa.me"] {
  color: #4ade80 !important;
}

/* Links institucionais do footer (fora da .footer-links) */
.site-footer > .container > div[style*="border-top"] a {
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-footer > .container > div[style*="border-top"] a:hover {
  color: var(--sand-deep) !important;
}

/* ------------------------------------------------------------------
   28. SEÇÃO "DESTAQUES EM SALVADOR" — HEADER PREMIUM
   ------------------------------------------------------------------ */
section.section .section-header a.btn[href*="escunas"] {
  border-color: var(--ocean-bright) !important;
  color: var(--ocean-mid) !important;
  border-radius: var(--r-btn) !important;
  font-weight: 700 !important;
  transition: all 0.22s ease !important;
}

section.section .section-header a.btn[href*="escunas"]:hover {
  background: var(--ocean-light) !important;
  border-color: var(--ocean-mid) !important;
}

/* ------------------------------------------------------------------
   29. GRIDS DA HOME — ESPAÇAMENTOS REFINADOS
   ------------------------------------------------------------------ */
.transfers-home-grid {
  gap: 1.5rem !important;
}

@media (max-width: 991px) {
  .transfers-home-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 640px) {
  .transfers-home-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .transfer-home-card {
    border-radius: 16px !important;
  }
}

/* ------------------------------------------------------------------
   30. EFEITO DE ENTRADA NOS CARDS (Intersection Observer friendly)
   ------------------------------------------------------------------ */
.property-card,
.transfer-home-card,
.city-tour-card,
.category-card {
  animation: cardFadeUp 0.5s var(--ease-smooth) both;
}

/* Delay escalonado para os cards em grid */
.properties-grid .property-card:nth-child(1),
.transfers-home-grid .transfer-home-card:nth-child(1) { animation-delay: 0.05s; }
.properties-grid .property-card:nth-child(2),
.transfers-home-grid .transfer-home-card:nth-child(2) { animation-delay: 0.10s; }
.properties-grid .property-card:nth-child(3),
.transfers-home-grid .transfer-home-card:nth-child(3) { animation-delay: 0.15s; }
.properties-grid .property-card:nth-child(4),
.transfers-home-grid .transfer-home-card:nth-child(4) { animation-delay: 0.20s; }
.properties-grid .property-card:nth-child(5) { animation-delay: 0.25s; }
.properties-grid .property-card:nth-child(6) { animation-delay: 0.30s; }

/* ------------------------------------------------------------------
   31. BOTÃO WHATSAPP FLUTUANTE (se existir no layout)
   ------------------------------------------------------------------ */
.btn-whatsapp-float {
  position: fixed !important;
  bottom: 1.75rem !important;
  right: 1.75rem !important;
  z-index: 9999 !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #25d366, #128c7e) !important;
  color: #fff !important;
  font-size: 1.65rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45) !important;
  border: none !important;
  text-decoration: none !important;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease !important;
  animation: float-gentle 3s ease-in-out infinite;
}

.btn-whatsapp-float:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 10px 32px rgba(37, 211, 102, 0.6) !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .btn-whatsapp-float {
    bottom: 1.25rem !important;
    right: 1.25rem !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 1.45rem !important;
  }
}


/* ==========================================================================
   ETAPA 3 — PÁGINA DA ESCUNA & CITY TOURS — PREMIUM NÁUTICO
   ========================================================================== */

/* --- 32. ESCUNA.PHP --- */
.escuna-page-wrapper {
  background: linear-gradient(180deg, #f0f9ff 0%, #f8fafc 30%) !important;
  padding: 2rem 0 4rem !important;
}
.escuna-header-card {
  background: #ffffff !important;
  border-radius: 22px !important;
  border: 1.5px solid #e8edf5 !important;
  padding: 2rem 2.25rem !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 8px 32px -6px rgba(10,35,66,.13),0 2px 8px rgba(0,0,0,.04) !important;
  position: relative;
  overflow: hidden;
}
.escuna-header-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0e4d7b, #0d9488, #f59e0b);
  border-radius: 22px 22px 0 0;
}
.escuna-card-section {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1.5px solid #edf2f7 !important;
  padding: 1.85rem !important;
  margin-bottom: 1.75rem !important;
  box-shadow: 0 2px 12px rgba(10,35,66,.05) !important;
}
.escuna-section-title, .escuna-box-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0f1b2d !important;
  letter-spacing: -.02em !important;
}
.escuna-section-title i, .escuna-box-title i { color: #0284c7 !important; }
.spec-badge {
  background: linear-gradient(135deg,#f8fafc,#f0f9ff) !important;
  border: 1.5px solid rgba(2,132,199,.15) !important;
  border-radius: 14px !important;
  padding: 1rem 1.15rem !important;
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
}
.spec-badge:hover {
  border-color: rgba(2,132,199,.35) !important;
  box-shadow: 0 4px 16px rgba(10,35,66,.08) !important;
  transform: translateY(-2px);
}
.spec-badge i { color: #0284c7 !important; font-size: 1.5rem !important; }
.spec-badge-info h4 {
  color: #475569 !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.spec-badge-info p { color: #0f1b2d !important; font-weight: 800 !important; font-size: 1.05rem !important; }

/* --- 33. TABELA DE TARIFAS --- */
.tarifa-table-wrap {
  border-radius: 14px !important;
  border: 1.5px solid #e8edf5 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(10,35,66,.04) !important;
}
.tarifa-table th {
  background: linear-gradient(135deg,#0e4d7b,#0a2342) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  letter-spacing: .04em !important;
  padding: 1rem 1.15rem !important;
}
.tarifa-table td {
  padding: .95rem 1.15rem !important;
  border-bottom: 1px solid #f0f4f8 !important;
  color: #1e3a5f !important;
}
.tarifa-table tr:last-child td { border-bottom: none !important; }
.tarifa-table tr:hover td { background: linear-gradient(90deg,#f0f9ff,#f0fdfa) !important; }
.tarifa-item {
  border: 1.5px solid #edf2f7 !important;
  border-radius: 14px !important;
  padding: 1.1rem 1.35rem !important;
  margin-bottom: .85rem !important;
  background: #fff !important;
  transition: all .25s ease !important;
}
.tarifa-item:hover {
  border-color: rgba(2,132,199,.35) !important;
  box-shadow: 0 6px 18px rgba(10,35,66,.08) !important;
  transform: translateX(4px);
}

/* --- 34. BOTÕES WHATSAPP DA ESCUNA --- */
.btn-whats-cta, .btn-whats-hero {
  background: linear-gradient(135deg,#25d366,#128c7e) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(37,211,102,.38) !important;
  transition: all .25s ease !important;
}
.btn-whats-cta:hover, .btn-whats-hero:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(37,211,102,.52) !important;
  color: #fff !important;
}

/* --- 35. SIDEBAR STICKY --- */
.escuna-sticky-sidebar {
  background: #ffffff !important;
  border: 1.5px solid #edf2f7 !important;
  border-radius: 20px !important;
  padding: 1.85rem !important;
  box-shadow: 0 8px 32px -6px rgba(10,35,66,.13) !important;
}
.escuna-box {
  background: #ffffff !important;
  border: 1.5px solid #edf2f7 !important;
  border-radius: 20px !important;
  padding: 1.85rem !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 2px 12px rgba(10,35,66,.05) !important;
}

/* --- 36. CALENDÁRIO --- */
.cal-nav-bar {
  background: linear-gradient(135deg,#e0f2fe,#ccfbf1) !important;
  border: 1.5px solid rgba(2,132,199,.2) !important;
  border-radius: 12px !important;
}

/* --- 37. CITY-TOURS HERO --- */
.city-tours-page { background: linear-gradient(180deg,#f8fafc 0%,#f0fdf4 100%) !important; }
.city-tours-hero {
  background: linear-gradient(155deg,rgba(10,35,66,.92) 0%,rgba(13,77,123,.88) 50%,rgba(13,148,136,.82) 100%),
    url('https://images.unsplash.com/photo-1598887142487-3c854d51d2c7?w=1600&auto=format&fit=crop&q=80') center/cover no-repeat !important;
  padding: 5.5rem 1rem 4.5rem !important;
  position: relative;
  overflow: hidden;
}
.city-tours-hero h1 {
  font-size: clamp(1.5rem,3vw,2.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  text-shadow: 0 2px 12px rgba(10,35,66,.5) !important;
}
.city-tours-hero p {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.4) !important;
}
.city-tours-hero-badge {
  background: rgba(255,255,255,.16) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #e8c97a !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
}

/* --- 38. CITY-TOURS FILTRO --- */
.city-tours-filter-bar {
  background: #ffffff !important;
  border: 1.5px solid #edf2f7 !important;
  border-radius: 18px !important;
  padding: 1.35rem 1.75rem !important;
  box-shadow: 0 8px 32px -6px rgba(10,35,66,.13) !important;
}
.city-tours-search-box input {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: .8rem 1.2rem !important;
  transition: all .2s ease !important;
}
.city-tours-search-box input:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,.25) !important;
  outline: none !important;
}
.city-tours-search-box button {
  background: linear-gradient(135deg,#0d9488,#0e4d7b) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(13,148,136,.3) !important;
  transition: all .22s ease !important;
}
.city-tours-search-box button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(13,148,136,.42) !important;
}

/* --- 39. CITY-TOUR CARDS --- */
.city-tour-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1.5px solid #e8edf5 !important;
  box-shadow: 0 8px 32px -6px rgba(10,35,66,.13) !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease !important;
}
.city-tour-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 48px -8px rgba(10,35,66,.22) !important;
  border-color: rgba(13,148,136,.35) !important;
}
.city-tour-card-thumb { height: 240px !important; }
.city-tour-card-thumb img { transition: transform .55s ease !important; }
.city-tour-card:hover .city-tour-card-thumb img { transform: scale(1.1) !important; }
.city-tour-badge {
  background: linear-gradient(135deg,#0d9488,#0f766e) !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 12px rgba(13,148,136,.4) !important;
  font-weight: 800 !important;
}
.city-tour-pill {
  background: linear-gradient(135deg,#f0fdfa,#e0f2fe) !important;
  color: #0e4d7b !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(13,148,136,.15) !important;
}
.city-tour-card-title { font-size: 1.15rem !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
.city-tour-card-title a:hover { color: #0d9488 !important; }
.city-tour-price-value { font-size: 1.4rem !important; font-weight: 800 !important; color: #0e4d7b !important; }
.city-tour-card-footer { border-top: 1.5px solid #f0f4f8 !important; }
.city-tour-card-footer a.btn-primary {
  background: linear-gradient(135deg,#0d9488,#0e4d7b) !important;
  box-shadow: 0 4px 14px rgba(13,148,136,.3) !important;
  border-radius: 12px !important;
  border: none !important;
  font-weight: 700 !important;
}
.city-tour-card-footer a.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(13,148,136,.45) !important;
}
.city-tours-grid { gap: 2rem !important; }

/* --- 40. GALERIA --- */
.gallery-thumb-item {
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  overflow: hidden !important;
  transition: all .2s ease !important;
}
.gallery-thumb-item.active, .gallery-thumb-item:hover {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2,132,199,.25) !important;
}

/* --- 41. RESPONSIVIDADE MOBILE --- */
@media (max-width: 991px) {
  .escuna-main-layout { grid-template-columns: 1fr !important; }
  .escuna-sticky-sidebar { position: static !important; }
  .escuna-header-card { padding: 1.5rem !important; border-radius: 16px !important; }
  .city-tours-hero { padding: 3.5rem 1rem 4rem !important; }
}
@media (max-width: 768px) {
  .city-tour-card-thumb { height: 200px !important; }
  .city-tours-filter-bar { padding: 1rem 1.25rem !important; border-radius: 14px !important; }
  .escuna-card-section, .escuna-box { border-radius: 14px !important; padding: 1.25rem !important; }
  .city-tours-grid { gap: 1.25rem !important; }
  .city-tour-card { border-radius: 16px !important; }
}

/* --- 42. SELEÇÃO DE TEXTO --- */
::selection { background: #e0f2fe; color: #0a2342; }


/* ==========================================================================
   ETAPA 4 — TRANSFERS ILHAS, DEPOIMENTOS, EXPERIÊNCIAS & REFINAMENTOS GLOBAIS
   ========================================================================== */

/* ------------------------------------------------------------------
   43. TRANSFERS ILHAS — SEÇÃO PREMIUM (transfers_ilhas_cards.php)
   ------------------------------------------------------------------ */
.transfers-ilhas-section {
  padding: 4rem 0 4.5rem !important;
  background: linear-gradient(180deg, #f0fdf4 0%, #f0f9ff 60%, #f8fafc 100%) !important;
  border-bottom: 1px solid rgba(2, 132, 199, 0.1) !important;
  position: relative;
}

.transfers-ilhas-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0d9488, #0284c7, #f59e0b);
}

.transfers-ilhas-badge {
  background: linear-gradient(135deg, #0e4d7b, #0284c7) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}

.transfers-ilhas-title {
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  color: #0f1b2d !important;
  letter-spacing: -.03em !important;
}

.transfers-ilhas-subtitle {
  color: #475569 !important;
  line-height: 1.65 !important;
}

/* Cards de Transfer de Ilha */
.transfer-ilha-card {
  background: #ffffff !important;
  border-radius: 22px !important;
  border: 1.5px solid #e8edf5 !important;
  box-shadow: 0 8px 32px -6px rgba(10,35,66,.13), 0 2px 8px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease !important;
}

.transfer-ilha-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 48px -8px rgba(10,35,66,.22) !important;
  border-color: rgba(2, 132, 199, 0.38) !important;
}

/* Header do card com gradiente náutico */
.transfer-ilha-card-header {
  background: linear-gradient(135deg, #0a2342 0%, #0e4d7b 60%, #0d9488 100%) !important;
  padding: 1.5rem 1.75rem !important;
  position: relative;
  overflow: hidden;
}

.transfer-ilha-card-header::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Corpo do card de ilha */
.transfer-ilha-card-body {
  padding: 1.6rem 1.75rem !important;
}

/* ------------------------------------------------------------------
   44. DEPOIMENTOS — SEÇÃO PREMIUM (depoimentos_section.php)
   ------------------------------------------------------------------ */
.section-depoimentos {
  background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 50%, #f0fdfa 100%) !important;
  padding: 5rem 1rem !important;
  border-top: 1px solid rgba(2, 132, 199, 0.1) !important;
  border-bottom: 1px solid rgba(13, 148, 136, 0.1) !important;
  position: relative !important;
}

/* Badge de avaliações */
.section-depoimentos span[style*="background: #e0f2fe"] {
  background: linear-gradient(135deg, #e0f2fe, #ccfbf1) !important;
  color: #0369a1 !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(3, 105, 161, 0.15) !important;
}

/* Título da seção */
.section-depoimentos h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: #0f1b2d !important;
  letter-spacing: -.03em !important;
}

/* Box de resumo de avaliação (estrelas + nota) */
.section-depoimentos > .container > div:first-child > div > div[style*="background: #ffffff"] {
  border-radius: 9999px !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.05) !important;
}

/* Botão "Deixar meu Depoimento" */
.section-depoimentos button[onclick*="abrirModalDepoimento"] {
  background: linear-gradient(135deg, #0284c7, #0e4d7b) !important;
  border-radius: 9999px !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.38) !important;
  font-weight: 700 !important;
  transition: all .25s ease !important;
  border: none !important;
}

.section-depoimentos button[onclick*="abrirModalDepoimento"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.5) !important;
}

/* Cards de depoimento — substituindo inline JS hover por CSS */
.section-depoimentos > .container > div[style*="display: grid"] > div {
  background: #ffffff !important;
  border: 1.5px solid #edf2f7 !important;
  border-radius: 18px !important;
  padding: 1.75rem !important;
  box-shadow: 0 4px 14px rgba(10,35,66,.05) !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease !important;
  position: relative !important;
}

.section-depoimentos > .container > div[style*="display: grid"] > div:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(10,35,66,.12) !important;
  border-color: rgba(2, 132, 199, 0.28) !important;
}

/* Aspas decorativas no card de depoimento */
.section-depoimentos > .container > div[style*="display: grid"] > div::before {
  content: '"';
  position: absolute;
  top: 1rem;
  right: 1.35rem;
  font-size: 4rem;
  color: rgba(2, 132, 199, 0.08);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

/* Avatar do depoente */
.section-depoimentos div[style*="border-radius: 50%"][style*="background: linear-gradient"] {
  background: linear-gradient(135deg, #0284c7, #0a2342) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}

/* Badge "Viajante Verificado" */
.section-depoimentos span[style*="background: #ecfdf5"] {
  background: linear-gradient(135deg, #dcfce7, #d1fae5) !important;
  color: #059669 !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
}

/* Modal de depoimento */
#modalNovoDepoimento > div {
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(10,35,66,.35) !important;
}

#modalNovoDepoimento > div > div:first-child {
  background: linear-gradient(135deg, #0284c7, #0a2342) !important;
  border-radius: 20px 20px 0 0 !important;
}

/* ------------------------------------------------------------------
   45. EXPERIÊNCIAS / ESCUNAS (experiencias.php) — PÁGINA DE LISTAGEM
   ------------------------------------------------------------------ */
.escunas-listagem-hero {
  background: linear-gradient(
    155deg,
    rgba(10, 35, 66, 0.93) 0%,
    rgba(14, 77, 123, 0.88) 55%,
    rgba(13, 148, 136, 0.82) 100%
  ) !important;
  position: relative;
  overflow: hidden;
}

.escunas-listagem-hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; width: 100%; height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70'%3E%3Cpath fill='%23f8fafc' d='M0,56L48,50.7C96,45,192,35,288,40C384,45,480,65,576,64.7C672,65,768,45,864,37.3C960,29,1056,29,1152,33.3C1248,37,1344,45,1392,49L1440,53L1440,70L0,70Z'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  pointer-events: none;
}

/* Cards de escuna na listagem */
.escuna-card-listagem {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1.5px solid #e8edf5 !important;
  box-shadow: 0 8px 32px -6px rgba(10,35,66,.12) !important;
  overflow: hidden !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease !important;
}

.escuna-card-listagem:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 16px 48px -8px rgba(10,35,66,.2) !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}

/* Thumb das escunas na listagem */
.escuna-card-listagem .card-thumb,
.escuna-card-thumb {
  height: 240px !important;
  position: relative;
  overflow: hidden !important;
}

.escuna-card-listagem .card-thumb::after,
.escuna-card-thumb::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(10,35,66,.55) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.escuna-card-listagem .card-thumb img {
  transition: transform .5s ease !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.escuna-card-listagem:hover .card-thumb img { transform: scale(1.08) !important; }

/* Preço de escuna em destaque */
.escuna-preco-destaque {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #0e4d7b !important;
  letter-spacing: -.025em !important;
}

.escuna-preco-pax {
  color: #475569 !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
}

/* ------------------------------------------------------------------
   46. FILTROS DE BUSCA GLOBAIS — SIDEBAR & BARRA SUPERIOR
   ------------------------------------------------------------------ */
.imoveis-filter-sidebar,
.escunas-filter-sidebar {
  background: #ffffff !important;
  border: 1.5px solid #edf2f7 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(10,35,66,.07) !important;
}

.filter-section-title {
  font-weight: 800 !important;
  color: #0f1b2d !important;
  font-size: .9rem !important;
  letter-spacing: -.01em !important;
}

/* Inputs de filtro */
.filter-control,
.filter-select {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  transition: all .2s ease !important;
}

.filter-control:focus,
.filter-select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, .2) !important;
  outline: none !important;
}

/* Botão aplicar filtros */
.btn-aplicar-filtros {
  background: linear-gradient(135deg, #0e4d7b, #0284c7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, .3) !important;
  transition: all .22s ease !important;
}

.btn-aplicar-filtros:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(2, 132, 199, .45) !important;
}

/* Botão limpar filtros */
.btn-limpar-filtros {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #475569 !important;
  background: #fff !important;
  font-weight: 600 !important;
  transition: all .2s ease !important;
}

.btn-limpar-filtros:hover {
  border-color: #0284c7 !important;
  color: #0e4d7b !important;
  background: #f0f9ff !important;
}

/* ------------------------------------------------------------------
   47. PAGINAÇÃO — ESTILO PREMIUM
   ------------------------------------------------------------------ */
.pagination {
  gap: .4rem !important;
}

.pagination .page-item .page-link {
  border-radius: 10px !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  padding: .55rem .95rem !important;
  transition: all .2s ease !important;
}

.pagination .page-item .page-link:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0e4d7b !important;
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #0e4d7b, #0284c7) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, .3) !important;
}

/* ------------------------------------------------------------------
   48. ESTADO VAZIO — EMPTY STATE PREMIUM
   ------------------------------------------------------------------ */
.empty-state-card {
  background: #ffffff !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 20px !important;
  padding: 3.5rem 2rem !important;
  text-align: center !important;
}

.empty-state-icon {
  color: #94a3b8 !important;
  font-size: 3rem !important;
  margin-bottom: 1rem !important;
}

.empty-state-title {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: #334155 !important;
  margin-bottom: .5rem !important;
}

.empty-state-desc {
  color: #64748b !important;
  font-size: .9rem !important;
}

/* ------------------------------------------------------------------
   49. TRANSFERS.PHP — PAGE PREMIUM
   ------------------------------------------------------------------ */
.transfers-page-hero {
  background: linear-gradient(
    150deg,
    rgba(10, 35, 66, 0.93) 0%,
    rgba(14, 77, 123, 0.88) 50%,
    rgba(13, 148, 136, 0.82) 100%
  ) !important;
  position: relative;
  overflow: hidden;
}

.transfers-page-hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; width: 100%; height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23f8fafc' d='M0,48L60,42.7C120,37,240,27,360,32C480,37,600,59,720,58.7C840,59,960,37,1080,29.3C1200,21,1320,27,1380,30.7L1440,35L1440,60L0,60Z'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  pointer-events: none;
}

/* Cards de transfer individuais */
.transfer-rota-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1.5px solid #e8edf5 !important;
  box-shadow: 0 8px 28px -6px rgba(10,35,66,.1) !important;
  overflow: hidden !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease !important;
}

.transfer-rota-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 44px -8px rgba(10,35,66,.18) !important;
  border-color: rgba(2, 132, 199, .3) !important;
}

/* Cabeçalho de transfer com rota */
.transfer-rota-header {
  background: linear-gradient(135deg, #f0f9ff 0%, #f0fdfa 100%) !important;
  border-bottom: 1px solid rgba(2, 132, 199, .12) !important;
  padding: 1.35rem 1.5rem !important;
}

/* Seta de rota animada */
.transfer-rota-arrow {
  color: #0284c7 !important;
  animation: float-gentle 2s ease-in-out infinite;
}

/* Box de preço de transfer */
.transfer-preco-box {
  background: linear-gradient(135deg, #f0f9ff, #f0fdfa) !important;
  border: 1.5px solid rgba(2, 132, 199, .18) !important;
  border-radius: 14px !important;
}

.transfer-preco-valor {
  color: #0e4d7b !important;
  font-weight: 800 !important;
  font-size: 1.55rem !important;
  letter-spacing: -.025em !important;
}

/* ------------------------------------------------------------------
   50. IMOVEIS.PHP (CATÁLOGO DE TEMPORADA) — LAYOUT
   ------------------------------------------------------------------ */
.imoveis-page-wrapper {
  background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 100%) !important;
}

/* Breadcrumb premium */
.breadcrumb {
  background: transparent !important;
  font-size: .84rem !important;
}

.breadcrumb-item a {
  color: #0284c7 !important;
  font-weight: 600 !important;
  transition: color .2s ease !important;
}

.breadcrumb-item a:hover { color: #0e4d7b !important; }

.breadcrumb-item.active { color: #64748b !important; }

.breadcrumb-item + .breadcrumb-item::before {
  color: #94a3b8 !important;
  content: "›" !important;
  font-size: 1rem !important;
}

/* Sort bar */
.sort-bar,
.catalog-sort-bar {
  background: #ffffff !important;
  border: 1.5px solid #edf2f7 !important;
  border-radius: 14px !important;
  padding: .75rem 1.25rem !important;
  box-shadow: 0 2px 10px rgba(10,35,66,.05) !important;
}

/* Tags / Chips de filtro ativos */
.filter-tag {
  background: linear-gradient(135deg, #e0f2fe, #cff8ea) !important;
  color: #0e4d7b !important;
  border: 1px solid rgba(2,132,199,.2) !important;
  border-radius: 9999px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  padding: .3rem .75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  transition: all .2s ease !important;
}

.filter-tag:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* ------------------------------------------------------------------
   51. GLOBAL — SCROLL SUAVE & LINK ÂNCORA
   ------------------------------------------------------------------ */
html {
  scroll-behavior: smooth !important;
}

/* Offset para links âncora não ficarem atrás do header sticky */
[id] {
  scroll-margin-top: 90px;
}

/* ------------------------------------------------------------------
   52. ACESSIBILIDADE — FOCUS RINGS PREMIUM
   ------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid #0284c7 !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

button:focus-visible,
a:focus-visible {
  box-shadow: 0 0 0 3px rgba(2, 132, 199, .35) !important;
}

/* ------------------------------------------------------------------
   53. PRINT STYLES — PARA ORÇAMENTOS IMPRESSOS
   ------------------------------------------------------------------ */
@media print {
  .site-header,
  .site-footer,
  .btn-whatsapp-float,
  .modal-overlay {
    display: none !important;
  }

  body {
    font-size: 12pt !important;
    color: #000 !important;
  }

  .container {
    max-width: 100% !important;
  }
}


/* ==========================================================================
   ETAPA 5 — PARCEIROS, ADMIN PANEL & POLISH FINAL
   ========================================================================== */

/* ------------------------------------------------------------------
   54. PARCEIROS.PHP — HERO PREMIUM
   ------------------------------------------------------------------ */
.section[style*="linear-gradient(135deg, #090d16"],
section[style*="linear-gradient(135deg, #090d16"] {
  background: linear-gradient(
    155deg,
    #060c1a 0%,
    #0a2342 50%,
    #0e6490 100%
  ) !important;
  padding: 5.5rem 1rem 4.5rem !important;
  position: relative;
  overflow: hidden;
}

/* Hero parceiros — bolhas de luz de fundo */
section[style*="linear-gradient(135deg, #090d16"]::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(56,189,248,.14) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

section[style*="linear-gradient(135deg, #090d16"]::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(13,148,136,.14) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

/* ------------------------------------------------------------------
   55. PARCEIROS — BARRA DE FILTROS & BUSCA
   ------------------------------------------------------------------ */
section[style*="background: #f8fafc"][style*="border-bottom"] > div > div[style*="background: #ffffff"] {
  background: #ffffff !important;
  border: 1.5px solid #edf2f7 !important;
  border-radius: 18px !important;
  padding: 1.35rem 1.75rem !important;
  box-shadow: 0 8px 28px -6px rgba(10,35,66,.1) !important;
}

/* Pílulas de categoria dos parceiros */
section[style*="background: #f8fafc"] a[style*="border-radius: 20px"][style*="background: #0284c7"] {
  background: linear-gradient(135deg, #0e4d7b, #0284c7) !important;
  box-shadow: 0 4px 12px rgba(2,132,199,.35) !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
}

section[style*="background: #f8fafc"] a[style*="border-radius: 20px"][style*="background: #f1f5f9"] {
  background: #f1f5f9 !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  transition: all .2s ease !important;
}

section[style*="background: #f8fafc"] a[style*="border-radius: 20px"][style*="background: #f1f5f9"]:hover {
  background: #e0f2fe !important;
  color: #0e4d7b !important;
}

/* Input de busca de parceiros */
#filtroParceiroInput {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  padding: .65rem 1rem .65rem 2.5rem !important;
  font-size: .9rem !important;
  transition: all .25s ease !important;
}

#filtroParceiroInput:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2,132,199,.2) !important;
  outline: none !important;
}

/* ------------------------------------------------------------------
   56. PARCEIROS — CARDS PREMIUM
   ------------------------------------------------------------------ */
.card-parceiro-item {
  background: #ffffff !important;
  border: 1.5px solid #e8edf5 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 24px -6px rgba(10,35,66,.1) !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Substituir o inline JS hover por CSS puro */
.card-parceiro-item:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 16px 44px -8px rgba(10,35,66,.18) !important;
  border-color: rgba(2,132,199,.3) !important;
}

/* Topo do card: área do logotipo */
.card-parceiro-item > div:first-child {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #f0f4f8 !important;
  padding: 1.85rem 1.5rem 1.25rem !important;
}

/* Moldura circular do logo */
.card-parceiro-item div[style*="border-radius: 50%"][style*="width: 100px"] {
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(10,35,66,.1) !important;
  transition: all .25s ease !important;
}

.card-parceiro-item:hover div[style*="border-radius: 50%"][style*="width: 100px"] {
  border-color: rgba(2,132,199,.4) !important;
  box-shadow: 0 8px 24px rgba(2,132,199,.2) !important;
  transform: scale(1.06) !important;
}

/* Badge de categoria do parceiro */
.card-parceiro-item span[style*="background: #e0f2fe"] {
  background: linear-gradient(135deg, #dbeafe, #e0f2fe) !important;
  color: #0369a1 !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(3,105,161,.15) !important;
}

/* Badge destaque dourado */
.card-parceiro-item div[style*="background: #fef3c7"] {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  color: #92400e !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(245,158,11,.25) !important;
}

/* Título do parceiro */
.card-parceiro-item h3 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0f1b2d !important;
  letter-spacing: -.02em !important;
}

/* Botão WhatsApp do parceiro */
.card-parceiro-item a[style*="background: #25d366"] {
  background: linear-gradient(135deg, #25d366, #128c7e) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(37,211,102,.3) !important;
  transition: all .22s ease !important;
  font-weight: 700 !important;
}

.card-parceiro-item a[style*="background: #25d366"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(37,211,102,.45) !important;
}

/* Botão "Visitar Site" */
.card-parceiro-item a[style*="background: #f1f5f9"] {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  color: #0f1b2d !important;
  transition: all .22s ease !important;
}

.card-parceiro-item a[style*="background: #f1f5f9"]:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0e4d7b !important;
}

/* ------------------------------------------------------------------
   57. BANNER "SEJA UM PARCEIRO" — PREMIUM
   ------------------------------------------------------------------ */
div[style*="linear-gradient(135deg, #0f172a"][style*="border-radius: 20px"] {
  background: linear-gradient(135deg, #060c1a 0%, #0a2342 55%, #0d4d7b 100%) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(56,189,248,.12) !important;
  box-shadow: 0 20px 60px -10px rgba(6,12,26,.5) !important;
  padding: 3.25rem 2.5rem !important;
}

div[style*="linear-gradient(135deg, #0f172a"] h2 {
  font-size: clamp(1.45rem, 2.5vw, 1.85rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}

div[style*="linear-gradient(135deg, #0f172a"] a[style*="background: #25d366"] {
  background: linear-gradient(135deg, #25d366, #128c7e) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(37,211,102,.38) !important;
  font-weight: 800 !important;
  transition: all .25s ease !important;
}

div[style*="linear-gradient(135deg, #0f172a"] a[style*="background: #25d366"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(37,211,102,.55) !important;
}

/* ------------------------------------------------------------------
   58. ADMIN — SIDEBAR PREMIUM (admin_header.php)
   ------------------------------------------------------------------ */
.admin-sidebar {
  background: linear-gradient(180deg, #060c1a 0%, #0a1f3d 60%, #0a2342 100%) !important;
  border-right: 1px solid rgba(56,189,248,.08) !important;
  box-shadow: 4px 0 20px rgba(0,0,0,.3) !important;
}

/* Brand do sidebar */
.sidebar-brand {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 1.5rem 1.25rem !important;
}

.sidebar-brand-icon {
  background: linear-gradient(135deg, #0284c7, #0d9488) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(2,132,199,.4) !important;
}

.sidebar-brand h2 {
  color: #f0f9ff !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

.sidebar-brand span {
  color: rgba(148,219,255,.7) !important;
  font-size: .78rem !important;
}

/* Headings das seções do menu */
.sidebar-heading {
  color: rgba(148,219,255,.5) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 1.2rem 1.25rem .4rem !important;
}

/* Links do sidebar */
.sidebar-link {
  color: rgba(226,240,255,.8) !important;
  border-radius: 10px !important;
  margin: .12rem .6rem !important;
  padding: .65rem 1rem !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  transition: all .2s ease !important;
}

.sidebar-link:hover {
  background: rgba(56,189,248,.1) !important;
  color: #ffffff !important;
}

.sidebar-link.active {
  background: linear-gradient(135deg, rgba(2,132,199,.25), rgba(13,148,136,.2)) !important;
  color: #38bdf8 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(56,189,248,.2) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

.sidebar-link i {
  font-size: 1rem !important;
  opacity: .85 !important;
  flex-shrink: 0 !important;
}

.sidebar-link.active i { opacity: 1 !important; }

/* Badge de pendências no sidebar */
.sidebar-badge {
  background: #ef4444 !important;
  color: #fff !important;
  border-radius: 9999px !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  padding: .1rem .45rem !important;
  margin-left: auto !important;
  min-width: 20px !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(239,68,68,.4) !important;
}

/* ------------------------------------------------------------------
   59. ADMIN — TOPBAR PREMIUM
   ------------------------------------------------------------------ */
.admin-topbar {
  background: #ffffff !important;
  border-bottom: 1.5px solid #edf2f7 !important;
  box-shadow: 0 2px 14px rgba(10,35,66,.06) !important;
  padding: .85rem 1.5rem !important;
}

.topbar-welcome { color: #475569 !important; font-size: .88rem !important; }
.topbar-welcome strong { color: #0f1b2d !important; font-weight: 700 !important; }

/* Avatar do usuário admin */
.user-avatar {
  background: linear-gradient(135deg, #0284c7, #0a2342) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  font-weight: 800 !important;
  font-size: .9rem !important;
  box-shadow: 0 4px 12px rgba(2,132,199,.3) !important;
  transition: all .2s ease !important;
}

.user-avatar:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 16px rgba(2,132,199,.45) !important;
}

.topbar-btn-site {
  border-radius: 10px !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
}

/* ------------------------------------------------------------------
   60. ADMIN — CONTENT AREA & CARDS DE DASHBOARD
   ------------------------------------------------------------------ */
.admin-content {
  background: #f0f4f8 !important;
  min-height: 100vh !important;
}

/* Cards de estatística do dashboard */
.stat-card,
.admin-stat-card {
  background: #ffffff !important;
  border: 1.5px solid #edf2f7 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(10,35,66,.07) !important;
  transition: all .25s ease !important;
}

.stat-card:hover,
.admin-stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(10,35,66,.12) !important;
  border-color: rgba(2,132,199,.25) !important;
}

/* Ícone das stat cards */
.stat-card-icon,
.admin-stat-icon {
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
}

/* Tabelas do admin */
.admin-table,
.table-admin {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1.5px solid #edf2f7 !important;
}

.admin-table thead th,
.table-admin thead th {
  background: linear-gradient(135deg, #f8fafc, #f0f4f8) !important;
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  border-bottom: 1.5px solid #e8edf5 !important;
  padding: .9rem 1rem !important;
}

.admin-table tbody tr,
.table-admin tbody tr {
  transition: background .15s ease !important;
}

.admin-table tbody tr:hover,
.table-admin tbody tr:hover {
  background: #f8fafc !important;
}

/* ------------------------------------------------------------------
   61. ADMIN — FORMULÁRIOS PREMIUM
   ------------------------------------------------------------------ */
.admin-form-card {
  background: #ffffff !important;
  border: 1.5px solid #edf2f7 !important;
  border-radius: 18px !important;
  padding: 2rem !important;
  box-shadow: 0 4px 20px rgba(10,35,66,.07) !important;
}

.form-control,
.admin-input {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: .65rem 1rem !important;
  font-size: .9rem !important;
  transition: all .2s ease !important;
}

.form-control:focus,
.admin-input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2,132,199,.2) !important;
  outline: none !important;
}

.form-label,
.admin-label {
  font-weight: 700 !important;
  color: #334155 !important;
  font-size: .85rem !important;
  margin-bottom: .4rem !important;
}

/* ------------------------------------------------------------------
   62. BUTTONS ADMIN — SISTEMA PREMIUM
   ------------------------------------------------------------------ */
.btn-primary {
  background: linear-gradient(135deg, #0e4d7b, #0284c7) !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(2,132,199,.3) !important;
  transition: all .22s ease !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0c3d6a, #036db0) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(2,132,199,.42) !important;
}

.btn-success {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(16,185,129,.3) !important;
  transition: all .22s ease !important;
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: all .22s ease !important;
}

.btn-warning {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  color: #fff !important;
  transition: all .22s ease !important;
}

.btn-outline-primary {
  border: 1.5px solid #0284c7 !important;
  color: #0284c7 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all .2s ease !important;
}

.btn-outline-primary:hover {
  background: #0284c7 !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------
   63. ALERTS & TOASTS — PREMIUM
   ------------------------------------------------------------------ */
.alert-success {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 12px !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  color: #065f46 !important;
  font-weight: 600 !important;
}

.alert-danger,
.alert-error {
  background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: 12px !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  color: #991b1b !important;
  font-weight: 600 !important;
}

.alert-warning {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border-left: 4px solid #f59e0b !important;
  border-radius: 12px !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  color: #92400e !important;
  font-weight: 600 !important;
}

.alert-info {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border-left: 4px solid #3b82f6 !important;
  border-radius: 12px !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  color: #1e3a8a !important;
  font-weight: 600 !important;
}

/* ------------------------------------------------------------------
   64. BADGES STATUS — PREMIUM
   ------------------------------------------------------------------ */
.badge-publicado,
.badge.bg-success {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
}

.badge-pendente,
.badge.bg-warning {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.badge-inativo,
.badge.bg-secondary {
  background: linear-gradient(135deg, #475569, #64748b) !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
}

.badge-destaque,
.badge-gold {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(245,158,11,.35) !important;
}

/* ------------------------------------------------------------------
   65. POLIMENTO FINAL — MICRO-INTERAÇÕES GLOBAIS
   ------------------------------------------------------------------ */

/* Transição de página suave */
body {
  opacity: 1;
  transition: opacity .2s ease;
}

/* Scrollbar customizada (navegadores que suportam) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0284c7, #0d9488);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #0e4d7b, #0d9488);
}

/* Links globais — transição de cor */
a {
  transition: color .2s ease, opacity .2s ease !important;
}

/* Imagens — carregamento suave */
img {
  transition: opacity .3s ease !important;
}

img[loading="lazy"] {
  opacity: 0;
}

img[loading="lazy"].loaded,
img.loaded {
  opacity: 1 !important;
}

/* Animação de entrada para conteúdos dinâmicos */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: slideInUp .4s var(--ease-smooth) forwards;
}

/* ------------------------------------------------------------------
   66. MOBILE FINAL — AJUSTES ESPECÍFICOS
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .card-parceiro-item { border-radius: 16px !important; }
  .admin-topbar { padding: .65rem 1rem !important; }
  .admin-form-card { padding: 1.25rem !important; border-radius: 14px !important; }

  /* Botões full-width no mobile */
  .btn-mobile-full {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Tabelas admin responsivas */
  .admin-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 480px) {
  .card-parceiro-item > div:first-child {
    padding: 1.35rem 1rem .85rem !important;
  }

  div[style*="linear-gradient(135deg, #0f172a"][style*="border-radius: 20px"] {
    padding: 2rem 1.25rem !important;
    border-radius: 16px !important;
  }
}

/* ------------------------------------------------------------------
   67. DARK MODE MEDIA QUERY — ADMIN (opcional futuro)
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  /* Admin já tem fundo escuro por padrão — manter consistente */
  .admin-content {
    background: #0f1925 !important;
  }
  .admin-topbar {
    background: #111827 !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
  }
  .stat-card,
  .admin-stat-card,
  .admin-form-card,
  .admin-table {
    background: #1a2535 !important;
    border-color: rgba(255,255,255,.08) !important;
  }
}

/* ------------------------------------------------------------------
   68. FRADES / ITAPARICA — MOBILE REORDERING (Benefícios abaixo de Serviços)
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .frades-page {
    display: flex !important;
    flex-direction: column !important;
  }
  .frades-hero {
    order: 1 !important;
  }
  .frades-itaparica-section {
    order: 2 !important;
  }
  .frades-benefits-bar {
    order: 3 !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    padding: 1.25rem 0 !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }
  .frades-page > .frades-main-container {
    order: 4 !important;
  }
  .frades-benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .frades-benefit-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0.85rem !important;
    gap: 0.5rem !important;
    border-radius: 12px !important;
  }
  .frades-benefit-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.15rem !important;
  }
  .frades-benefit-card strong {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
  }
  .frades-benefit-card span {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }
}
@media (max-width: 420px) {
  .frades-benefits-grid {
    gap: 0.5rem !important;
  }
  .frades-benefit-card {
    padding: 0.75rem 0.65rem !important;
  }
}

/* ------------------------------------------------------------------
   69. EXPERIENCIAS / ESCUNAS — MOBILE REORDERING (Benefícios abaixo de Serviços)
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .experiencias-page {
    display: flex !important;
    flex-direction: column !important;
  }
  .experiencias-page .escunas-hero {
    order: 1 !important;
  }
  .experiencias-page .frades-itaparica-section {
    order: 2 !important;
  }
  .experiencias-page .escunas-benefits-bar {
    order: 3 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 1.25rem 0 !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }
  .experiencias-page .escunas-catalog-section {
    order: 4 !important;
  }
  .escunas-info-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .escuna-info-card {
    padding: 0.85rem 1rem !important;
  }
}

/* ------------------------------------------------------------------
   70. TRANSFERS.PHP — BUSCA POR FILTRO RECOLHIDA POR PADRÃO (Mobile & PC)
   ------------------------------------------------------------------ */
#searchBoxCardTransfers .search-mobile-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
}
#searchBoxCardTransfers:not(.is-open) .search-box-collapsible {
  display: none !important;
}
#searchBoxCardTransfers.is-open .search-box-collapsible {
  display: block !important;
}

/* ------------------------------------------------------------------
   71. WHATSAPP FLUTUANTE — EFEITO DE PULSO E TOOLTIP
   ------------------------------------------------------------------ */
.btn-whatsapp-float .whatsapp-float-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0.8;
  animation: whatsapp-radar 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  pointer-events: none;
}
@keyframes whatsapp-radar {
  0% { transform: scale(0.9); opacity: 0.9; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.btn-whatsapp-float .whatsapp-float-tooltip {
  position: absolute;
  right: 68px;
  background: #0f172a;
  color: #fff;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-whatsapp-float:hover .whatsapp-float-tooltip {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 768px) {
  .btn-whatsapp-float .whatsapp-float-tooltip {
    display: none !important;
  }
}

/* ==========================================================================
   72. SELETOR DE IDIOMAS — GTRANSLATE (IDÊNTICO AO GOGOTOUR)
   ========================================================================== */
.top-bar-translate {
  display: inline-flex;
  align-items: center;
}
.top-bar-translate .gtranslate_wrapper {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  line-height: 1;
}
.top-bar-translate .gtranslate_wrapper a.glink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: 0 1px;
}
.top-bar-translate .gtranslate_wrapper a.glink img {
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}
.top-bar-translate .gtranslate_wrapper a.glink:hover img {
  opacity: 1 !important;
  transform: translateY(-2px) scale(1.15);
  box-shadow: 0 3px 8px rgba(56, 189, 248, 0.5);
}
.top-bar-translate .gtranslate_wrapper a.gt-current-lang img {
  opacity: 1 !important;
  outline: 2px solid #38bdf8;
  outline-offset: 1px;
  transform: scale(1.08);
}

/* Mobile drawer lang bar */
.mobile-nav-lang-bar {
  display: none;
  padding: 1rem 0 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}
@media (max-width: 991px) {
  .mobile-nav-lang-bar {
    display: block;
  }
  .mobile-lang-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.6rem;
  }
  .mobile-nav-lang-bar .gtranslate_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .mobile-nav-lang-bar .gtranslate_wrapper a.glink img {
    width: 26px;
    height: 26px;
  }
}

/* Esconde barras e iframes invasivos do Google Translate */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-banner-frame-skiptranslate {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  opacity: 0 !important;
}
body {
  top: 0px !important;
  position: static !important;
}
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
  visibility: hidden !important;
}
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}
font {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   73. GALERIA DE VÍDEOS — GRID RESPONSIVO & PLAYERS
   ========================================================================== */
.videos-hero {
  background: linear-gradient(135deg, #0a2342 0%, #0f355c 60%, #0c4a6e 100%);
  color: #fff;
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.videos-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.18) 0%, transparent 50%),
                    radial-gradient(circle at 10% 80%, rgba(225, 29, 72, 0.12) 0%, transparent 40%);
  pointer-events: none;
}
.videos-grid-container {
  padding: 3rem 0 5rem;
}
.videos-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.videos-filter-pill {
  padding: 0.5rem 1.15rem;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.videos-filter-pill:hover,
.videos-filter-pill.active {
  background: #e11d48;
  color: #ffffff;
  border-color: #e11d48;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.3);
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 2rem;
}
@media (max-width: 576px) {
  .videos-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.video-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10, 35, 66, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.85);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
  position: relative;
}
.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(10, 35, 66, 0.14);
}

.video-thumb-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0f172a;
  cursor: pointer;
}
.video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.video-card:hover .video-thumb-img {
  transform: scale(1.05);
}

/* Botão de Play centralizado com pulso suave */
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(225, 29, 72, 0.92);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.5);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
  padding-left: 4px;
}
.video-thumb-wrapper:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.15);
  background: #be123c;
}
.video-play-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(225, 29, 72, 0.6);
  animation: play-pulse 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
@keyframes play-pulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.video-badge-category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.video-badge-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.82);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.video-badge-type {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.video-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.video-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.6rem 0;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.2s ease;
}
.video-title:hover {
  color: #e11d48;
}
.video-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 1.25rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.video-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 0.9rem;
  margin-top: auto;
  font-size: 0.82rem;
  color: #94a3b8;
}
.video-btn-watch {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}
.video-btn-watch:hover {
  background: #e11d48;
  color: #fff;
  border-color: #e11d48;
}

/* Modal Lightbox Player de Vídeo */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 29, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.video-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.video-modal-box {
  width: 100%;
  max-width: 900px;
  background: #0f172a;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.video-modal-overlay.active .video-modal-box {
  transform: scale(1);
}
.video-modal-player-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-modal-player-wrapper iframe,
.video-modal-player-wrapper video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.video-modal-info {
  padding: 1.25rem 1.5rem;
  background: #0f172a;
}
.video-modal-title {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 0.4rem 0;
}
.video-modal-desc {
  color: #94a3b8;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}
.video-modal-close {
  position: absolute;
  top: -46px;
  right: 0;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.video-modal-close:hover {
  background: #e11d48;
  transform: rotate(90deg);
}
@media (max-width: 576px) {
  .video-modal-close {
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
  }
}