/* =====================================================================
   Cotseguro — estilos personalizados (complemento ao Tailwind CDN)
   Aqui ficam apenas coisas que o Tailwind utilitário não cobre bem:
   variáveis de cor, animações, gradientes e pequenos detalhes.
   ===================================================================== */

:root {
  --navy: #0b2545;
  --navy-700: #13315c;
  --brand: #1763e6;
  --sky: #3b82f6;
  --amber: #f59e0b;
  --ink: #0f172a;
  --whatsapp: #25d366;
}

/* Rolagem suave ao clicar em âncoras internas */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 170px; /* compensa o header fixo no mobile */
}
@media (min-width: 1024px) {
  html { scroll-padding-top: 140px; }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------
   Hero — fundo com gradiente da marca + textura sutil
   --------------------------------------------------------------------- */
.hero-bg {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(59, 130, 246, 0.35), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(23, 99, 230, 0.25), transparent 55%),
    linear-gradient(135deg, #0b2545 0%, #13315c 55%, #1763e6 130%);
}

/* Padrão de linhas diagonais (sensação de "movimento / rota") */
.hero-pattern {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 16px
  );
}

/* Faixa de seção com leve gradiente */
.section-soft {
  background: linear-gradient(180deg, #f8fafc 0%, #eef3fb 100%);
}

/* ---------------------------------------------------------------------
   Cartões de produto — hover elegante
   --------------------------------------------------------------------- */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(11, 37, 69, 0.45);
  border-color: rgba(23, 99, 230, 0.35);
}

/* Ícone dentro do cartão */
.icon-badge {
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.card-hover:hover .icon-badge {
  transform: scale(1.08) rotate(-3deg);
}

/* ---------------------------------------------------------------------
   Animação de entrada ao rolar (controlada pelo main.js)
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Atraso escalonado para grades */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------
   Header — sombra que aparece ao rolar (classe adicionada via JS)
   --------------------------------------------------------------------- */
.site-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.scrolled {
  box-shadow: 0 6px 24px -12px rgba(11, 37, 69, 0.35);
}

/* Link de navegação com sublinhado animado */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--brand);
  transition: width 0.25s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* ---------------------------------------------------------------------
   Botão flutuante de WhatsApp
   --------------------------------------------------------------------- */
.whatsapp-float {
  box-shadow: 0 12px 28px -8px rgba(37, 211, 102, 0.6);
}
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--whatsapp);
  opacity: 0.55;
  z-index: -1;
  animation: wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------------------------------------------------------------------
   Faixa de parceiros — escala de cinza que ganha cor no hover
   --------------------------------------------------------------------- */
.partner-chip {
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.partner-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -16px rgba(11, 37, 69, 0.5);
  color: var(--brand);
}

/* Menu mobile — dropdown compacto (card, não full-screen) */
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 12px;
  min-width: 200px;
  max-width: 260px;
  max-height: 0;
  overflow: hidden;
  border-radius: 0 0 14px 14px;
  background: white;
  box-shadow: 0 8px 24px -8px rgba(11, 37, 69, 0.22);
  border: 1px solid rgba(11, 37, 69, 0.08);
  border-top: none;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  z-index: 100;
}
.mobile-menu.open {
  max-height: 340px;
  opacity: 1;
}
html.dark .mobile-menu {
  background: #101d33;
  border-color: #26344d;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
}

/* =====================================================================
   MODO ESCURO (ativado pela classe .dark no <html>, via botão de tema)
   Sobrescreve as superfícies/textos claros do Tailwind para tons escuros.
   ===================================================================== */
html.dark body {
  background-color: #0a1322;
  color: #e6edf7;
}

/* Superfícies */
html.dark .bg-white          { background-color: #101d33 !important; }
html.dark .bg-white\/95      { background-color: rgba(16, 29, 51, 0.96) !important; }
html.dark .bg-slate-50       { background-color: #0e1a2e !important; }
html.dark .bg-slate-100      { background-color: #1a2942 !important; }
html.dark .hover\:bg-slate-50:hover  { background-color: #16243c !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #1a2942 !important; }
html.dark .section-soft {
  background: linear-gradient(180deg, #0b1626 0%, #0a1322 100%);
}

/* Cabeçalho fixo translúcido */
html.dark .site-header { background-color: rgba(10, 19, 34, 0.85) !important; }

/* Textos */
html.dark .text-navy     { color: #e6edf7 !important; }
html.dark .text-ink      { color: #e6edf7 !important; }
html.dark .text-slate-600 { color: #a7b6cc !important; }
html.dark .text-slate-500 { color: #9aa9c0 !important; }
html.dark .text-slate-400 { color: #7e8ea6 !important; }

/* Bordas e anéis */
html.dark .border-slate-200 { border-color: #26344d !important; }
html.dark .border-slate-100 { border-color: #1d2b44 !important; }
html.dark .ring-slate-200   { --tw-ring-color: #26344d !important; }
html.dark .ring-white\/40   { --tw-ring-color: rgba(255, 255, 255, 0.10) !important; }

/* Botões/superfícies em navy ficam um tom acima do fundo p/ contraste */
html.dark .bg-navy              { background-color: #16264a !important; }
html.dark .hover\:bg-navy:hover { background-color: #1c3157 !important; }

/* Cartões de logos dos parceiros permanecem claros p/ os logotipos aparecerem */
html.dark .partner-card { background-color: #ffffff !important; }

/* Inputs, textareas e selects no modo escuro:
   fundo branco mantido, texto e placeholder escurecidos p/ legibilidade.
   Especificidade reforçada (.bg-white) para vencer a regra geral de
   superfície escura aplicada pelo dark mode. */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="tel"],
html.dark textarea,
html.dark select,
html.dark select.bg-white,
html.dark input.bg-white,
html.dark textarea.bg-white {
  background-color: #ffffff !important;
  color: #0b2545 !important;
  border-color: #cbd5e1 !important;
}
html.dark select option {
  background-color: #ffffff !important;
  color: #0b2545 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}

/* Select com "Selecione..." (option desabilitado) aparece cinza
   como um placeholder, voltando ao normal quando uma opção é escolhida */
select:invalid,
select:has(option[value=""]:checked) {
  color: #94a3b8;
}
html.dark select:invalid,
html.dark select:has(option[value=""]:checked) {
  color: #94a3b8 !important;
}