/*
  Estas variáveis espelham tokens.json e servem apenas como fallback/uso em
  regras que o Tailwind (via CDN) não cobre diretamente. Ao atualizar
  tokens.json, atualize também estes valores e o bloco tailwind.config em
  cada página HTML (ver scripts/build-tokens.js).
*/
:root {
  --color-primary: #009069;
  --color-primary-dark: #005D44;
  --color-secondary: #00986F;
  --color-secondary-light: #E9F4F1;
  --color-surface: #FBFBFB;
  --color-surface-alt: #FFFFFF;
  --color-surface-dark: #1D1E1F;
  --color-ink: #1D1E1F;
  --color-muted: #6A6B6F;
  --color-border: #C6C5CA;
  --color-danger: #6F0006;
  --color-danger-bg: #D52F37;
  --color-success: #486807;
  --color-success-bg: #8ABA28;
  --color-warning: #644F00;
  --color-info: #092B51;
  --color-info-bg: #086FFA;

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.5rem;
  --radius-full: 9999px;

  --font-heading: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading);
}

/* Header: leve sombra quando a página é rolada (classe alternada via main.js) */
#site-header {
  transition: box-shadow 200ms ease, background-color 200ms ease;
}

#site-header.is-scrolled {
  box-shadow: 0 1px 0 0 var(--color-border), 0 8px 24px -12px rgba(15, 23, 42, 0.25);
}

/* Menu mobile: fechado é o pill; aberto vira um card branco colado ao topo,
   com logo + fechar na primeira linha e os links centralizados abaixo.
   Tudo animado via transições (classe .menu-open alternada no main.js). */
@media (max-width: 767px) {
  header {
    transition: top 350ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 350ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #site-header {
    row-gap: 0;
    border-radius: 28px;
    transition: border-radius 350ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 350ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 350ms ease, background-color 200ms ease;
  }

  #nav-menu {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
      padding 300ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 200ms ease,
      visibility 0s linear 300ms;
  }

  #nav-menu > a {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 150ms ease, transform 150ms ease;
  }

  #nav-toggle svg:not(.hidden) {
    animation: nav-icon-in 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  header.menu-open {
    top: 0;
    padding: 0;
  }

  header.menu-open #site-header {
    border-radius: 0 0 24px 24px;
    padding: 20px 24px 24px;
    box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.18);
  }

  header.menu-open #nav-menu {
    max-height: 400px;
    padding: 24px 0 0;
    opacity: 1;
    visibility: visible;
    transition: max-height 400ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 400ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 200ms ease,
      visibility 0s;
  }

  header.menu-open #nav-menu > a {
    opacity: 1;
    transform: none;
    transition: opacity 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Entrada escalonada dos links */
  header.menu-open #nav-menu > a:nth-child(1) { transition-delay: 80ms; }
  header.menu-open #nav-menu > a:nth-child(2) { transition-delay: 120ms; }
  header.menu-open #nav-menu > a:nth-child(3) { transition-delay: 160ms; }
  header.menu-open #nav-menu > a:nth-child(4) { transition-delay: 200ms; }
  header.menu-open #nav-menu > a:nth-child(5) { transition-delay: 240ms; }
}

@keyframes nav-icon-in {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  header,
  #site-header,
  #nav-menu,
  #nav-menu > a {
    transition: none !important;
  }

  #nav-toggle svg {
    animation: none !important;
  }
}

/* Links de navegação com sublinhado animado */
.nav-link {
  position: relative;
  color: var(--color-ink);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width 200ms ease;
}

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

/* Compensa o header fixo ao rolar até uma âncora */
.scroll-offset {
  scroll-margin-top: 5.5rem;
}

/* Estado de foco acessível e consistente para campos de formulário */
.form-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 144, 105, 0.15);
}

/* Botão "Enviar resposta" do formulário de contato */
.btn-send {
  border-radius: var(--pill, 999999px);
  border: var(--sds-size-stroke-border, 1px) solid var(--outline-brand-defalt, #009069);
  background: var(--background-brand-defalt, #009069);
  transition: background-color 200ms ease, border-color 200ms ease;
}

.btn-send:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Carrossel de logos de parceiros: faixa duplicada rolando em loop contínuo */
.partners-track {
  animation: partners-scroll 22s linear infinite;
}

.partners-marquee:hover .partners-track {
  animation-play-state: paused;
}

.partners-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

@keyframes partners-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners-track {
    animation: none;
  }
}

/* Mensagem de status do formulário de contato */
#form-status[data-state="success"] {
  color: var(--color-success);
}

#form-status[data-state="error"] {
  color: var(--color-danger);
}

/* Páginas legais (Termos de Serviço / Política de Privacidade) */
.legal-content h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 800;
  margin-bottom: 1rem;
}

.legal-content p + p,
.legal-content p + ul,
.legal-content ul + p,
.legal-content ul + .legal-note {
  margin-top: 0.875rem;
}

.legal-content ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.legal-content li {
  position: relative;
  padding-left: 1.5rem;
}

.legal-content li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--color-primary);
}

.legal-content a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-note {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background-color: #E9F4F1;
  border-left: 4px solid var(--color-primary);
}