@font-face {
  font-family: 'Bricolage Grotesque';
  src: url(../fonts/bricolage-grotesque.woff2) format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url(../fonts/dm-sans.woff2) format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  -webkit-font-smoothing: antialiased;
}

:root {
  --navy:     #0C1F4A;
  --navy-mid: #142254;
  --navy-dk:  #091733;
  --orange:   #F07820;
  --orange-lt:#FF8C35;
  --orange-txt:#AD4B06; /* laranja para texto pequeno em fundo claro (contraste AA) */
  --orange-lg: #D8620E; /* laranja para títulos grandes em fundo claro */
  --orange-btn:#C05508; /* fundo dos botões: contraste AA com texto branco */
  --white:    #FFFFFF;
  --gray:     #eaeef5;
  --text:     #1A1A2E;
  --muted:    #5d6573;
  --radius:   14px;
  --shadow:   0 8px 32px rgba(12,31,74,.12);
  --header-h: 5.5rem;

  /* ícone de check em SVG (o caractere ✓ depende da fonte do sistema e fica fino e torto) */
  --check-branco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  --check-laranja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AD4B06' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

html {
  scroll-padding-top: var(--header-h);
}

/* recomendado pelo Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  line-height: 1.15;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*
  Estado inicial das animações de entrada (animacoes.js revela tudo).
  Só vale com JS ativo e para quem não pediu menos movimento.
  O h1 é o maior elemento da primeira tela (LCP do Google), então ele
  nunca fica invisível: só começa um pouco mais abaixo e desliza.
*/
@media (prefers-reduced-motion: no-preference) {
  .js [data-hero],
  .js [data-reveal],
  .js [data-reveal-group] > * {
    visibility: hidden;
  }

  .js [data-hero-titulo] {
    transform: translateY(1.5rem);
  }
}