/* =============================================================================
   base.css — reset, fontes e tokens de design.

   O reset reproduz o subconjunto do Preflight do Tailwind v4 que o layout
   original dependia (box-sizing, zeragem de margem/padding, img como block,
   headings herdando tamanho/peso, reset de botão). Alterar qualquer regra
   daqui muda a geometria da página inteira.
   ============================================================================= */

/* ----- Reset (equivalente ao Preflight do Tailwind v4) ---------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
}

body {
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

ol, ul, menu {
  list-style: none;
}

img, svg, video, canvas, audio, iframe, embed, object {
  vertical-align: middle;
  display: block;
}

img, video {
  max-width: 100%;
  height: auto;
}

button, input, select, optgroup, textarea {
  font: inherit;
  color: inherit;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
}

/* ----- Escala proporcional --------------------------------------------------
   Todo o CSS deste projeto está em rem, com 1rem = 16px do desenho do Figma.
   Estas duas regras são o único lugar onde a escala é decidida:

     desktop   1rem = 100vw / 120        -> em 1920px de viewport, 1rem = 16px
     mobile    1rem = 100vw / 23.4375    -> em  375px de viewport, 1rem = 16px

   Nas larguras de referência (1920 e 375) o resultado é idêntico ao desenho
   original. Em qualquer outra largura a composição inteira escala junto, em vez
   de estourar para os lados. O teto impede que o canvas fique maior do que foi
   desenhado; o piso evita que encolha demais em telas muito estreitas.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  :root { font-size: min(16px, 100vw / 120); }
}

@media (max-width: 1023.98px) {
  /* piso = 320px de viewport, teto = 480px (daí em diante o canvas
     de 375 fica centralizado, sem esticar). */
  :root { font-size: clamp(13.653px, 100vw / 23.4375, 20.48px); }
}

/* ----- Fontes --------------------------------------------------------------
   Auto-hospedadas, subset latin, geradas a partir dos arquivos que o projeto
   original carregava do CDN da Figma.

   ATENÇÃO — Roboto é declarada SOMENTE no peso 400, de propósito. Os títulos
   dos cards pedem peso 900 e o CTA de "O que é" pede 800; como não existe face
   real nesses pesos, o navegador sintetiza o negrito. Esse negrito sintético
   faz parte da aparência atual da página. Declarar faces reais de Roboto em
   700/900 aqui MUDARIA o desenho dos títulos.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ----- Tokens -------------------------------------------------------------- */

:root {
  /* Marca */
  --c-orange: #f06209;
  --c-teal: #20a19a;
  --c-teal-dark: #39605e;
  --c-green: #45703e;

  /* Texto */
  --c-text: #424242;
  --c-muted: #828599;
  --c-white: #fff;

  /* Superfícies */
  --c-circle: #d9d9d9;
  --c-border-soft: #dedede;
  --c-border-softer: #e4e4e4;

  /* Tipografia */
  --font-poppins: "Poppins", sans-serif;
  --font-roboto: "Roboto", sans-serif;
  /* Pilha herdada do Tailwind. Usada apenas em "Como o … pode ajudar", que no
     projeto original ficou sem família definida. Ver README/relatório. */
  --font-system: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Raios */
  --r-cta: 0.625rem;
  --r-card: 1.25rem;
  --r-benefit: 1.875rem;

  /* Gradiente do topo (hero + "O que é") */
  --gradient-top: linear-gradient(252.21deg, rgb(255, 255, 255) 7.47%, rgb(238, 238, 238) 92.53%);
}

/* ----- Casca da página ----------------------------------------------------- */

.page {
  position: relative;
  /* `clip` e não `hidden`: os dois recortam igual, mas `hidden` cria um
     contêiner de rolagem, e as animações guiadas por scroll da linha do tempo
     passariam a medir a rolagem DELE (que nunca rola) em vez da janela. */
  overflow: clip;
  background-color: #fff;
}

.page__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-image: var(--gradient-top);
}

/* Pílulas decorativas: camada única sobre a página inteira, para que continuem
   pintando por cima de todas as seções (uma delas cruza a borda branco/laranja). */
.pills {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}

.pill {
  position: absolute;
  max-width: none;
  object-fit: cover;
}