/* gerado por site/build-tokens.sh a partir de identidade/ — não editar à mão */
:root {
  --cor-petroleo-50: #E3FDFF;
  --cor-petroleo-100: #D8F5F9;
  --cor-petroleo-200: #C3E5EA;
  --cor-petroleo-300: #A3CDD3;
  --cor-petroleo-400: #7BAFB6;
  --cor-petroleo-500: #559199;
  --cor-petroleo-600: #34777F;
  --cor-petroleo-700: #00545C;
  --cor-petroleo-800: #014950;
  --cor-petroleo-900: #003339;
  --cor-petroleo-950: #002126;
  --cor-verde-50: #D0FFEE;
  --cor-verde-100: #C3FEE5;
  --cor-verde-200: #A9F0D3;
  --cor-verde-300: #7FD9B7;
  --cor-verde-400: #18D5A2;
  --cor-verde-500: #00A075;
  --cor-verde-600: #008659;
  --cor-verde-700: #006D43;
  --cor-verde-800: #005430;
  --cor-verde-900: #003C1E;
  --cor-verde-950: #00280F;
  --cor-neutro-50: #F5F8F7;
  --cor-neutro-100: #E8F0F2;
  --cor-neutro-200: #D7E0E2;
  --cor-neutro-300: #BBC7C9;
  --cor-neutro-400: #9AA7AA;
  --cor-neutro-500: #7A898C;
  --cor-neutro-600: #5B6B6E;
  --cor-neutro-700: #49585B;
  --cor-neutro-800: #354245;
  --cor-neutro-900: #202C30;
  --cor-neutro-950: #131C1E;
  --cor-sucesso-50: #E5FFDC;
  --cor-sucesso-100: #DBF9D0;
  --cor-sucesso-200: #C7EABA;
  --cor-sucesso-300: #A8D398;
  --cor-sucesso-400: #82B56F;
  --cor-sucesso-500: #5E9847;
  --cor-sucesso-600: #3B7A1C;
  --cor-sucesso-700: #286500;
  --cor-sucesso-800: #154E00;
  --cor-sucesso-900: #033700;
  --cor-sucesso-950: #002400;
  --cor-atencao-50: #FFF3D7;
  --cor-atencao-100: #FFEACC;
  --cor-atencao-200: #F7D8B5;
  --cor-atencao-300: #E2BD91;
  --cor-atencao-400: #C89B66;
  --cor-atencao-500: #AC7B3B;
  --cor-atencao-600: #8F5B00;
  --cor-atencao-700: #7A4900;
  --cor-atencao-800: #603400;
  --cor-atencao-900: #462100;
  --cor-atencao-950: #301100;
  --cor-erro-50: #FFE8E3;
  --cor-erro-100: #FFDDD8;
  --cor-erro-200: #FFC9C4;
  --cor-erro-300: #FFAAA4;
  --cor-erro-400: #E8847E;
  --cor-erro-500: #CE5F5A;
  --cor-erro-600: #B23A3A;
  --cor-erro-700: #982427;
  --cor-erro-800: #790C16;
  --cor-erro-900: #5B0006;
  --cor-erro-950: #400000;
  --cor-info-50: #E0FAFF;
  --cor-info-100: #D5F2FF;
  --cor-info-200: #C0E2FF;
  --cor-info-300: #9FC9F2;
  --cor-info-400: #77AADA;
  --cor-info-500: #508BC1;
  --cor-info-600: #2C6FA8;
  --cor-info-700: #14598E;
  --cor-info-800: #004272;
  --cor-info-900: #002D55;
  --cor-info-950: #001B3D;
  --cor-petroleo: #00545C;
  --cor-verde: #18D5A2;
  --cor-branco-suave: #F5F8F7;
  --cor-grafite: #202C30;

  --fundo: #F5F8F7;
  --fundo-elevado: #FFFFFF;
  --fundo-suave: #E3FDFF;
  --fundo-marca: #00545C;
  --texto: #202C30;
  --texto-secundario: #49585B;
  --texto-marca: #00545C;
  --texto-sobre-marca: #F5F8F7;
  --destaque: #18D5A2;
  --destaque-texto: #006D43;
  --borda: #D7E0E2;
  --borda-forte: #7A898C;
  --foco: #008659;
  --sucesso: #3B7A1C;
  --atencao: #8F5B00;
  --erro: #B23A3A;
  --info: #2C6FA8;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0B1E21;
    --fundo-elevado: #12292D;
    --fundo-suave: #163439;
    --fundo-marca: #00545C;
    --texto: #E6EEEC;
    --texto-secundario: #BBC7C9;
    --texto-marca: #C3E5EA;
    --texto-sobre-marca: #F5F8F7;
    --destaque: #18D5A2;
    --destaque-texto: #C3E5EA;
    --borda: #24444A;
    --borda-forte: #559199;
    --foco: #18D5A2;
    --sucesso: #A8D398;
    --atencao: #E2BD91;
    --erro: #FFAAA4;
    --info: #9FC9F2;
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --fundo: #0B1E21;
  --fundo-elevado: #12292D;
  --fundo-suave: #163439;
  --fundo-marca: #00545C;
  --texto: #E6EEEC;
  --texto-secundario: #BBC7C9;
  --texto-marca: #C3E5EA;
  --texto-sobre-marca: #F5F8F7;
  --destaque: #18D5A2;
  --destaque-texto: #C3E5EA;
  --borda: #24444A;
  --borda-forte: #559199;
  --foco: #18D5A2;
  --sucesso: #A8D398;
  --atencao: #E2BD91;
  --erro: #FFAAA4;
  --info: #9FC9F2;
  color-scheme: dark;
}

:root {
  --fonte-titulo: "Manrope", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --peso-leve: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  --tipo-display: clamp(2.75rem, 2rem + 3vw, 4rem);
  --tipo-h1: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  --tipo-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --tipo-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --tipo-h4: 1.25rem;
  --tipo-lead: 1.375rem;
  --tipo-texto: 1.125rem;
  --tipo-pequeno: 0.9375rem;
  --tipo-rotulo: 0.8125rem;

  --entrelinha-titulo: 1.1;
  --entrelinha-subtitulo: 1.25;
  --entrelinha-texto: 1.55;
  --entrelinha-compacta: 1.35;

  --tracking-titulo: -0.02em;
  --tracking-rotulo: 0.08em;
  --medida-texto: 64ch;

  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-7: 3rem;
  --espaco-8: 4rem;
  --espaco-9: 6rem;
  --espaco-10: 8rem;

  --raio-1: 0.25rem;
  --raio-2: 0.5rem;
  --raio-3: 1rem;
  --raio-4: 1.5rem;
  --raio-pilula: 999px;

  --sombra-1: 0 1px 2px rgba(0, 51, 57, 0.08), 0 1px 3px rgba(0, 51, 57, 0.06);
  --sombra-2: 0 4px 12px rgba(0, 51, 57, 0.10), 0 1px 3px rgba(0, 51, 57, 0.06);
  --sombra-3: 0 16px 40px rgba(0, 51, 57, 0.14), 0 2px 6px rgba(0, 51, 57, 0.06);

  --grade-colunas: 12;
  --grade-largura: 72rem;
  --grade-calha: 1.5rem;
  --grade-margem: clamp(1rem, 4vw, 3rem);

  --traco-icone: 2px;
  --duracao-curta: 160ms;
  --duracao-media: 280ms;
  --curva-padrao: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-curta: 0ms;
    --duracao-media: 0ms;
  }
}

html {
  font-family: var(--fonte-texto);
  font-size: 100%;
  line-height: var(--entrelinha-texto);
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: var(--tipo-texto);
  background: var(--fundo);
  color: var(--texto);
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--tracking-titulo);
  line-height: var(--entrelinha-titulo);
  margin: 0 0 var(--espaco-4);
  text-wrap: balance;
}

h1 { font-size: var(--tipo-h1); }
h2 { font-size: var(--tipo-h2); line-height: var(--entrelinha-subtitulo); }
h3 { font-size: var(--tipo-h3); font-weight: var(--peso-medio); line-height: var(--entrelinha-subtitulo); letter-spacing: -0.01em; }
h4 { font-size: var(--tipo-h4); font-weight: var(--peso-medio); line-height: var(--entrelinha-compacta); letter-spacing: 0; }

p { margin: 0 0 var(--espaco-4); max-width: var(--medida-texto); }

.display { font-family: var(--fonte-titulo); font-size: var(--tipo-display); font-weight: var(--peso-semibold); line-height: 1.02; letter-spacing: -0.025em; }
.lead { font-size: var(--tipo-lead); line-height: 1.45; }
.pequeno { font-size: var(--tipo-pequeno); }
.rotulo { font-family: var(--fonte-titulo); font-size: var(--tipo-rotulo); font-weight: var(--peso-medio); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; }

a { color: var(--texto-marca); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--destaque-texto); }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--raio-1);
}

.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-medio);
  font-size: 1rem;
  line-height: 1;
  padding: 0.9375rem 1.5rem;
  border-radius: var(--raio-pilula);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duracao-curta) var(--curva-padrao), color var(--duracao-curta) var(--curva-padrao), transform var(--duracao-curta) var(--curva-padrao);
}
.botao:active { transform: translateY(1px); }
.botao--primario { background: var(--fundo-marca); color: var(--texto-sobre-marca); }
.botao--primario:hover { background: var(--cor-petroleo-800); color: var(--texto-sobre-marca); }
.botao--secundario { background: transparent; color: var(--texto-marca); border-color: currentColor; }
.botao--secundario:hover { background: var(--fundo-suave); }
.botao--destaque { background: var(--destaque); color: var(--cor-grafite); }
.botao--destaque:hover { background: var(--cor-verde-300); color: var(--cor-grafite); }

.container {
  width: min(100% - 2 * var(--grade-margem), var(--grade-largura));
  margin-inline: auto;
}
.grade {
  display: grid;
  grid-template-columns: repeat(var(--grade-colunas), minmax(0, 1fr));
  gap: var(--grade-calha);
}

.cartao {
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  padding: var(--espaco-5);
  box-shadow: var(--sombra-1);
}

.icone {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  stroke-width: var(--traco-icone);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: none;
}