/* tokens.css */
/* Tokens do Brand Book Gryfo 2027. Nenhuma cor fora desta lista. */

@font-face {
  font-family: "Exo 2";
  src: url("/fonts/exo2-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paleta */
  --azul-gryfo: #0057EF;
  --azul-claro: #64A7FE;
  --verde-lima: #CFFFB4;
  --marinho: #00022B;
  --grafite: #1F1F1F;
  --branco: #FFFFFF;

  /* Degradê oficial (único permitido) */
  --degrade: linear-gradient(12deg, #599EFC 0%, #0057EF 36%, #00022B 100%);
  --degrade-vertical: linear-gradient(180deg, #00022B 0%, #0057EF 64%, #599EFC 100%);

  /* Valores fixos do tema claro, usados também dentro de ilustrações */
  --claro-texto-suave: #5F6B8C;
  --claro-borda-forte: #7A88A8;

  /* Status (sempre com ícone + rótulo) */
  --sucesso: #0B7A3E;
  --sucesso-fundo: #E4F5EA;
  --alerta: #9A5B00;
  --alerta-fundo: #FFF1D6;
  --erro: #C42B2B;
  --erro-fundo: #FCE8E8;
  --info: #0057EF;
  --info-fundo: #E6EFFE;

  /* Tipografia */
  --fonte-display: "Exo 2", "Trebuchet MS", system-ui, sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-codigo: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;

  --texto-display: clamp(2.25rem, 1.35rem + 3.6vw, 4rem);      /* 64 */
  --texto-titulo: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);      /* 40 */
  --texto-subtitulo: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);   /* 32 */
  --texto-intertitulo: 1.25rem;                                /* 20 */
  --texto-corpo: 1rem;                                         /* 16 */
  --texto-pequeno: 0.875rem;                                   /* 14 */
  --texto-tag: 0.8125rem;                                      /* 13: nada legível abaixo disso */
  --texto-numero: clamp(2.5rem, 2rem + 2vw, 3.5rem);

  /* Forma e espaço */
  --raio-card: 20px;
  --raio-botao: 8px;
  --raio-pill: 999px;
  --largura-maxima: 75rem;
  --margem-lateral: clamp(1rem, 4vw, 2rem);
  --espaco-secao: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --espaco-bloco: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* Tema claro: padrão do site e de qualquer superfície clara */
:root,
.tema-claro,
.tema-alternativo,
.superficie-clara {
  --fundo: #FFFFFF;
  --fundo-alternativo: #F3F7FE;
  --card: #F3F7FE; /* superfícies se separam por um passo de tom, não por borda */
  --texto: #00022B;
  --texto-secundario: #4A5578;
  --texto-suave: #5F6B8C;
  --borda: #C9D6EE;
  --borda-forte: #7A88A8;
  --acao: #0057EF;
  --acao-hover: #0047C4;
  --acao-texto: #FFFFFF;
  --link: #0057EF;
  --foco: #0057EF;
  --numero: #0057EF;
  --destaque: #0057EF; /* verde-lima não tem contraste sobre fundo claro */
  --icone: #0057EF;
  --icone-fundo: #F3F7FE;
  --outline-simbolo: url("/img/marca/simbolo-outline-azul.svg");
}

.tema-alternativo {
  --fundo: #F3F7FE;
  --card: #FFFFFF;
  --icone-fundo: #FFFFFF;
}

/* Tema escuro: seções de fundo marinho (não é um modo escuro global) */
.tema-escuro,
.tema-azul,
.tema-degrade {
  --fundo: #00022B;
  --fundo-alternativo: #060A38;
  --card: #0B1145;
  --texto: #FFFFFF;
  --texto-secundario: #B4C0E2;
  --texto-suave: #8E9BC4;
  --borda: #26306B;
  --borda-forte: #5C69AA;
  --acao: #0057EF;
  --acao-hover: #1F6BF2;
  --acao-texto: #FFFFFF;
  --link: #64A7FE;
  --foco: #CFFFB4;
  --numero: #64A7FE;
  --destaque: #CFFFB4;
  --icone: #FFFFFF;
  --icone-fundo: #0B1145;
  --outline-simbolo: url("/img/marca/simbolo-outline-azul.svg");
}

/* Sobre azul e degradê: texto branco, botão branco com texto azul, links brancos */
.tema-azul,
.tema-degrade {
  --fundo: #0057EF;
  --texto-secundario: #FFFFFF;
  --texto-suave: #FFFFFF;
  --borda: rgb(255 255 255 / 0.4);
  --borda-forte: #FFFFFF;
  --acao: #FFFFFF;
  --acao-hover: #CFFFB4;
  --acao-texto: #0057EF;
  --link: #FFFFFF;
  --numero: #FFFFFF;
  --outline-simbolo: url("/img/marca/simbolo-outline-branco.svg");
}

/* base.css */
/* Base: reset, tipografia, layout, componentes comuns, cabeçalho e rodapé. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-corpo);
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 700;
}

code {
  font-family: var(--fonte-codigo);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--fundo-alternativo);
  border: 1px solid var(--borda);
}

pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Foco visível em todo elemento interativo, na cor do tema */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

main:focus {
  outline: none;
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--raio-botao);
  background: var(--marinho);
  color: var(--branco);
  font-weight: 700;
  transform: translateY(-200%);
}

.pular:focus {
  transform: none;
  outline-color: var(--verde-lima);
}

/* ---------------------------------------------------------------- Layout */

.container {
  width: 100%;
  max-width: calc(var(--largura-maxima) + 2 * var(--margem-lateral));
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

.container--estreito {
  max-width: calc(46rem + 2 * var(--margem-lateral));
}

.secao {
  position: relative;
  padding-block: var(--espaco-secao);
  background: var(--fundo);
  color: var(--texto);
  isolation: isolate;
}

.tema-alternativo + .tema-alternativo,
.tema-claro + .tema-claro {
  padding-top: 0;
}

.tema-degrade {
  /* O degradê oficial, ancorado no topo: a faixa mais clara fica abaixo da área de texto,
     mantendo o branco sempre sobre marinho ou azul-gryfo (contraste 5,8:1 ou mais). */
  background: var(--marinho) var(--degrade) top / 100% 165% no-repeat;
}

.tema-azul {
  background: var(--azul-gryfo);
}

/* ---------------------------------------------------------- Tipografia */

.secao__cabecalho {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
  margin-bottom: var(--espaco-bloco);
}

.secao__titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--texto-titulo);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.secao__texto {
  color: var(--texto);
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 44rem;
}

.destaque {
  color: var(--destaque);
}

/* Selo acima do título (campo "selo"), sempre menor que o logo da Gryfo */
.selo img {
  display: block;
  height: 2.5rem;
  width: auto;
}

/* Imagem larga de uma seção (campo "imagem" de passos e resumos) */
.secao__imagem {
  margin-bottom: var(--espaco-bloco);
}

.secao__imagem img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio-card);
}

.secao--resumo-pagina .secao__imagem img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: right center;
}

.numero-grande {
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: var(--texto-numero);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--numero);
}

/* ------------------------------------------------------------- Ícones */

.icone {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

/* ------------------------------------------------------------- Botões */

.grupo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--raio-botao);
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: var(--texto-pequeno);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.botao .icone {
  width: 1.25rem;
  height: 1.25rem;
}

.botao--primario {
  background: var(--acao);
  color: var(--acao-texto);
}

.botao--primario:hover {
  background: var(--acao-hover);
}

.botao--secundario {
  background: transparent;
  color: var(--texto);
  border-color: var(--borda-forte);
}

.botao--secundario:hover {
  border-color: var(--texto);
}

/* Sobre degradê, o botão principal é a ação em verde-lima (texto marinho) */
.tema-degrade .botao--primario {
  background: var(--verde-lima);
  color: var(--marinho);
}

.tema-degrade .botao--primario:hover {
  background: var(--branco);
  color: var(--azul-gryfo);
}

.link-seta {
  margin-top: 1.25rem;
  font-weight: 700;
  font-size: var(--texto-pequeno);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--link);
}

.link-seta a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.5rem;
  color: inherit;
  text-decoration: none;
}

.link-seta a::after,
.link-seta[aria-hidden]::after {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: url("/icons/arrow_forward.svg") center / contain no-repeat;
  mask: url("/icons/arrow_forward.svg") center / contain no-repeat;
  transition: transform 0.15s ease;
  vertical-align: middle;
}

.link-seta a:hover::after {
  transform: translateX(3px);
}

.link-seta a:hover {
  text-decoration: underline;
}

.link-voltar a {
  font-weight: 600;
  font-size: var(--texto-pequeno);
}

/* --------------------------------------------------------------- Tags */

.tag {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pill);
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--texto-tag);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto);
}

.tag--suave {
  border-color: transparent;
  background: var(--info-fundo);
  color: var(--marinho);
}

.tema-escuro .tag--suave {
  background: var(--fundo-alternativo);
  color: var(--branco);
  border-color: var(--borda);
}

.tag--lima {
  border-color: transparent;
  background: var(--verde-lima);
  color: var(--marinho);
}

/* -------------------------------------------------------------- Cards */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border-radius: var(--raio-card);
  background: var(--card);
  color: var(--texto);
}

.card__icone {
  display: inline-grid;
  color: var(--icone); /* ícone solto, sem quadrado colorido atrás */
}

.card__icone .icone {
  width: 2rem;
  height: 2rem;
}

.card__titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--texto-intertitulo);
  line-height: 1.25;
}

.card__titulo a {
  color: inherit;
  text-decoration: none;
}

.card__titulo a:hover {
  text-decoration: underline;
}

.card__texto {
  color: var(--texto);
}

.card__numero {
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: clamp(2rem, 1rem + 1.5vw, 2.75rem); /* "+40 milhões" numa linha nos quatro cards em 1440px */
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--numero);
}

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

@media (min-width: 64em) {
  .cards--3,
  .cards--6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .cards--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .cards--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ----------------------------------------------------- Imagem pendente */

.imagem-pendente {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--raio-card);
  background: var(--card) var(--outline-simbolo) center / 55% no-repeat;
  border: 1px solid var(--borda);
}

/* ----------------------------------------------------------- Cabeçalho */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--branco);
  color: var(--marinho);
  box-shadow: 0 1px 0 var(--borda);
}

.cabecalho__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2.75rem; /* 2,75rem ≈ diâmetro do símbolo: área de proteção do logo */
  min-height: 5rem;
  padding-block: 0.75rem;
}

.cabecalho__logo {
  display: block;
  flex: none;
  border-radius: 4px;
}

.cabecalho__logo img {
  width: 8.75rem; /* 140px: acima do mínimo de 128px */
  height: auto;
}

.cabecalho__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.cabecalho__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabecalho__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--marinho);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.cabecalho__lista a:hover {
  border-bottom-color: var(--borda-forte);
}

.cabecalho__lista a[aria-current="page"] {
  color: var(--azul-gryfo);
  border-bottom-color: var(--azul-gryfo);
}

.cabecalho__cta {
  min-height: 2.75rem;
  padding-block: 0.6rem;
}

.cabecalho__menu-botao {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-botao);
  background: var(--branco);
  color: var(--marinho);
  cursor: pointer;
}

.cabecalho__menu-botao[hidden] {
  display: none;
}

.cabecalho__menu-botao .icone-fechar,
.cabecalho__menu-botao[aria-expanded="true"] .icone-abrir {
  display: none;
}

.cabecalho__menu-botao[aria-expanded="true"] .icone-fechar {
  display: block;
}

@media (max-width: 63.99em) {
  /* Com JavaScript, o menu vira um painel que abre pelo botão. Sem JavaScript, os links ficam sempre visíveis. */
  .cabecalho[data-menu] .cabecalho__nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 0.5rem 0 1.25rem;
  }

  .cabecalho[data-menu="fechado"] .cabecalho__nav {
    display: none;
  }

  .cabecalho[data-menu] .cabecalho__lista {
    flex-direction: column;
    gap: 0;
  }

  .cabecalho[data-menu] .cabecalho__lista a {
    width: 100%;
    min-height: 3rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--borda);
  }

  .cabecalho[data-menu] .cabecalho__lista a[aria-current="page"] {
    border-bottom-color: var(--borda);
    box-shadow: inset 3px 0 0 var(--azul-gryfo);
    padding-left: 0.75rem;
  }
}

@media (min-width: 64em) {
  .cabecalho__menu-botao {
    display: none !important;
  }
}

/* -------------------------------------------------------------- Rodapé */

.rodape {
  background: var(--marinho);
  color: var(--texto);
  padding-block: var(--espaco-secao) 2rem;
  font-size: var(--texto-pequeno);
}

.rodape a {
  color: var(--texto);
  text-decoration: none;
}

.rodape a:hover {
  text-decoration: underline;
}

.rodape__interno {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.rodape__marca {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  grid-column: 1 / -1;
  max-width: 26rem;
}

.rodape__marca img {
  width: 8.75rem;
  margin-bottom: 0.5rem;
}

.rodape__texto {
  color: var(--texto-secundario);
}

.rodape__titulo {
  margin-bottom: 0.75rem;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--texto);
}

.rodape ul {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape__coluna a,
.rodape__redes a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
}

.rodape__redes {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem !important;
  font-weight: 600;
}

.rodape__contato {
  font-style: normal;
  display: grid;
  gap: 0.5rem;
  align-content: start;
  color: var(--texto-secundario);
}

.rodape__parceiros {
  margin-top: 3rem;
}

.rodape__parceiros ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
}

.rodape__parceiros img {
  height: 2rem; /* sempre menores que o logo da Gryfo no rodapé */
  width: auto;
}

.rodape__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  color: var(--texto-suave);
}

.rodape__legal a {
  color: var(--texto-secundario);
}

@media (min-width: 64em) {
  .rodape__interno {
    grid-template-columns: 1.6fr repeat(4, 1fr);
  }

  .rodape__marca {
    grid-column: auto;
  }
}

/* ------------------------------------------------------------- Entrada */
/* .revelar só é posta pelo static/js/revelar.js: sem script, nada fica escondido */

.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.revelar.revelado {
  opacity: 1;
  transform: none;
}

/* Na impressão (e no "salvar como PDF") sai tudo, mesmo o que ainda não passou pela tela */
@media print {
  .revelar {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------ Movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* blocos.css */
/* Estilo de cada tipo de bloco (templates/blocos/*.html). */

/* ---------------------------------------------- Apoio gráfico da marca */

/* Símbolo em outline, ampliado e cortado pela borda, atrás do conteúdo */
.secao--hero::before,
.secao--cta-final::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8% -14% auto auto;
  width: min(62vw, 46rem);
  aspect-ratio: 1;
  background: var(--outline-simbolo) center / contain no-repeat;
  pointer-events: none;
}

.secao--hero,
.secao--cta-final,
.secao--destaque-impacto {
  overflow: hidden;
}

.secao--cta-final::before {
  inset: auto auto -30% -18%;
  width: min(70vw, 38rem);
}

/* Sobre fundo claro o traço azul pesa mais: mais cortado pela borda e mais suave,
   para nunca competir com o título ou com a imagem do hero */
.tema-claro.secao--hero::before,
.tema-alternativo.secao--hero::before,
.tema-claro.secao--cta-final::before,
.tema-alternativo.secao--cta-final::before {
  opacity: 0.35;
}

.tema-claro.secao--hero::before,
.tema-alternativo.secao--hero::before {
  inset: auto -24% -38% auto;
}

/* Malha de pontos: só em áreas sem texto pequeno */
.secao--destaque-impacto::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: min(45%, 32rem);
  background: url("/img/marca/pattern-pontos.svg") 0 0 / 26px 26.7px repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 85%);
  mask-image: linear-gradient(90deg, transparent, #000 85%);
  opacity: 0.55;
  pointer-events: none;
}

/* --------------------------------------------------------------- Hero */

.secao--hero {
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem);
}

.hero__grade {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

.hero__texto {
  display: grid;
  gap: 1.5rem;
  max-width: 50rem;
}

.hero__titulo {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: var(--texto-display);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* A palavra em destaque não se parte entre linhas */
.hero__titulo .destaque {
  white-space: nowrap;
}

.hero__subtitulo {
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.45;
  color: var(--texto);
  max-width: 40rem;
}

.hero__texto .grupo-botoes {
  margin-top: 0.5rem;
}

.hero__visual {
  min-width: 0;
}

.hero__visual picture img,
.hero__visual .imagem-pendente {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio-card);
}

.hero__visual .ilustracao {
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
}

/* Sem visual ao lado, o título usa a largura toda */
.hero__grade:not(.hero__grade--visual) .hero__texto {
  max-width: none;
}

@media (min-width: 60em) {
  .hero__grade--visual {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .hero__grade--visual .hero__titulo {
    font-size: clamp(2.25rem, 1rem + 3vw, 3.5rem);
  }
}

/* Abertura com foto de fundo (visual "fundo"): no computador a foto cobre a seção e o título fica
   à esquerda, sobre o degradê da própria foto; no celular a foto vem inteira, abaixo do texto */
.hero__fundo img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__fundo {
  margin-top: 2.5rem;
}

@media (max-width: 59.99em) {
  .secao--hero:has(.hero__fundo) {
    padding-bottom: 0; /* a foto fecha a seção */
  }
}

@media (min-width: 60em) {
  .secao--hero:has(.hero__fundo) {
    display: grid;
    align-items: center;
    min-height: min(56.25vw, 52rem); /* a proporção da foto (16:9), sem passar de 52rem */
  }

  .secao--hero:has(.hero__fundo)::before {
    display: none;
  }

  .hero__fundo {
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: 0;
  }

  .hero__fundo picture,
  .hero__fundo img {
    height: 100%;
  }

  .hero__fundo img {
    object-fit: cover;
    object-position: right center;
  }

  /* reforço discreto do degradê da foto, para o texto branco nunca perder contraste */
  .hero__fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(0 2 43 / 0.85) 0%, rgb(0 2 43 / 0.6) 35%, rgb(0 2 43 / 0) 58%);
  }

  .hero__grade.hero__grade--fundo .hero__texto {
    max-width: 34rem; /* fica sobre o degradê da foto, sem cobrir a cena */
  }

  .hero__grade--fundo .hero__titulo {
    font-size: clamp(2.25rem, 1rem + 3vw, 3.5rem);
  }
}

/* Janela de código (hero do Dev 2 Dev) */
.codigo-janela {
  border-radius: var(--raio-card);
  background: var(--marinho);
  color: var(--branco);
  border: 1px solid #26306B;
  overflow: hidden;
}

.codigo-janela__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #26306B;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--texto-tag);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B4C0E2;
}

.codigo-janela pre,
.codigo-abas pre {
  margin: 0;
  padding: 1.25rem;
  overflow-x: auto;
  font-family: var(--fonte-codigo);
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 2;
  color: var(--branco);
}

/* -------------------------------------------------------------- Texto */

.texto__grade {
  display: grid;
  gap: 1.25rem 4rem;
}

.texto__corpo {
  display: grid;
  gap: 1.25rem;
}

.texto__corpo p {
  max-width: 40rem;
  font-size: 1.125rem;
  color: var(--texto);
}

.texto__cabeca {
  display: grid;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.texto__corpo .secao__titulo {
  max-width: 44rem;
}

/* Sem destaque ao lado, o título (com selo e etiqueta) fica à esquerda e o texto à direita */
@media (min-width: 60em) {
  .texto__grade:not(.texto__grade--destaque) .texto__corpo {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 0 4rem; /* sem espaço entre linhas: o título ocupa várias, e linhas vazias não podem somar espaço */
    align-items: start;
  }

  .texto__grade:not(.texto__grade--destaque) .texto__corpo > * {
    grid-column: 2;
    margin-top: 1.25rem;
  }

  .texto__grade:not(.texto__grade--destaque) .texto__corpo > .texto__cabeca {
    grid-column: 1;
    grid-row: 1 / span 20;
    margin: 0;
  }

  .texto__grade:not(.texto__grade--destaque) .texto__corpo > .texto__cabeca + * {
    margin-top: 0;
  }
}

.texto__destaque {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  padding: 2rem;
  border-radius: var(--raio-card);
  background: var(--marinho);
  color: var(--branco);
}

.texto__destaque .numero-grande {
  color: var(--verde-lima);
}

.texto__destaque a {
  color: var(--azul-claro);
}

@media (min-width: 60em) {
  .texto__grade--destaque {
    grid-template-columns: 1.6fr 1fr;
    align-items: center;
  }
}

/* ----------------------------------------------------- Cards destaque */

.cards__grade-ilustracao {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.cards__ilustracao .ilustracao {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}

@media (min-width: 64em) {
  .cards__grade-ilustracao {
    grid-template-columns: 1.4fr 1fr;
  }

  .cards__grade-ilustracao .cards--6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Cards só com texto, ao lado dos números: título no mesmo peso visual */
.card--numero ~ .card:not(.card--numero) .card__titulo {
  font-size: var(--texto-intertitulo);
}

.card--numero .card__texto {
  font-size: 1rem;
}

.card .tag {
  margin-top: auto;
}

.card .card__icone + .card__titulo,
.card .card__icone + .card__numero {
  margin-top: 0.5rem;
}

/* --------------------------------------------------- Lista de destaques */

.lista-destaques__grade {
  display: grid;
  gap: 0 4rem;
}

.lista-destaques {
  display: grid;
  gap: 1rem;
}

.lista-destaques__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.lista-destaques__icone {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--icone-fundo);
  border: 1px solid var(--borda);
  color: var(--icone);
}

.lista-destaques__icone .icone {
  width: 1.25rem;
  height: 1.25rem;
}

.lista-destaques__titulo {
  padding-top: 0.45rem;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
}

.lista-destaques__item p {
  margin-top: 0.25rem;
  color: var(--texto-secundario);
}

.lista-destaques__grade .grupo-botoes,
.lista-destaques__grade .link-seta {
  margin-top: 1.5rem;
}

@media (min-width: 60em) {
  .lista-destaques__grade {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .lista-destaques__grade .secao__cabecalho {
    margin-bottom: 0;
    position: sticky;
    top: 7rem;
  }
}

/* Com imagem: título e lista à esquerda, a imagem à direita */
.lista-destaques__imagem {
  margin-top: var(--espaco-bloco);
}

.lista-destaques__imagem img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio-card);
}

@media (min-width: 60em) {
  .lista-destaques__grade--imagem .secao__cabecalho {
    position: static;
    margin-bottom: var(--espaco-bloco);
  }

  .lista-destaques__grade--imagem > div:not(.lista-destaques__imagem) {
    grid-column: 1;
  }

  .lista-destaques__imagem {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------ Caminhos */

/* Card com imagem: a imagem ocupa o alto do card, de borda a borda */
.caminho--imagem {
  overflow: hidden;
}

.caminho__imagem {
  margin: calc(-1 * clamp(1.5rem, 1.25rem + 1vw, 2rem)) calc(-1 * clamp(1.5rem, 1.25rem + 1vw, 2rem)) 0.5rem;
}

.caminho__imagem img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.caminho__rotulo {
  margin-top: 0.5rem;
  font-weight: 700;
}

.caminho__ideal {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding-left: 1.125rem;
}

.caminho__ideal li::marker {
  color: var(--azul-gryfo);
}

.caminho .link-seta {
  margin-top: auto;
  padding-top: 1rem;
}

/* -------------------------------------------------------------- Tabela */

.tabela-rolagem {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  background: var(--card);
}

.tabela {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  text-align: left;
}

.tabela th,
.tabela td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}

.tabela tbody tr:last-child > * {
  border-bottom: 0;
}

.tabela thead th {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--texto-tag);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  background: var(--fundo-alternativo);
}

.tabela tbody th {
  font-family: var(--fonte-display);
  font-weight: 700;
  color: var(--texto);
}

.tabela td {
  color: var(--texto-secundario);
}

.tabela__nota {
  margin-top: 1.25rem;
  color: var(--texto-secundario);
}

/* --------------------------------------------------------------- Faixa */

.secao--faixa {
  padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
}

.faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.faixa__texto {
  max-width: 50rem;
  font-family: var(--fonte-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.4;
}

.faixa .link-seta {
  margin-top: 0;
}

/* ---------------------------------------------------- Destaque de impacto */

.destaque-impacto {
  display: grid;
  gap: 2.5rem;
}

.destaque-impacto__chamada {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.2rem + 5.5vw, 5.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}

.destaque-impacto__corpo {
  display: grid;
  gap: 1.5rem;
  max-width: 36rem;
}

.destaque-impacto__texto {
  font-size: 1.125rem;
  color: var(--texto);
}

.destaque-impacto__numero {
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: var(--texto-subtitulo);
  line-height: 1.2;
  color: var(--destaque); /* verde-lima nos temas escuros; azul-gryfo se a seção for clara */
}

.destaque-impacto__corpo .grupo-botoes {
  margin-top: 0;
}

/* A chamada ocupa a largura toda (cabe em duas ou três linhas); abaixo, texto à esquerda e número à direita */
@media (min-width: 64em) {
  .destaque-impacto {
    grid-template-columns: 1fr 1fr;
  }

  .destaque-impacto__chamada {
    grid-column: 1 / -1;
  }

  .destaque-impacto__corpo {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 4rem;
    max-width: none;
    align-items: start;
  }

  .destaque-impacto__texto {
    grid-row: span 2;
  }
}

/* -------------------------------------------------------------- Passos */

.passos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  counter-reset: passo;
}

.passo {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1.75rem;
  border-radius: var(--raio-card);
  background: var(--card);
}

.passo__numero {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--azul-gryfo);
  color: var(--branco);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.25rem;
}

.passo__titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--texto-intertitulo);
  line-height: 1.3;
}

.passo p {
  margin-top: 0.375rem;
  color: var(--texto-secundario);
}

.passo p::first-letter {
  text-transform: uppercase;
}

/* ------------------------------------------------------ Logos */

/* Só logos, sem notícias: título à esquerda e logos à direita */
@media (min-width: 60em) {
  .logos:not(:has(.logos__noticias)) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 0 4rem;
    align-items: center;
  }

  .logos:not(:has(.logos__noticias)) .secao__cabecalho {
    grid-row: span 2;
    margin-bottom: 0;
  }
}

.logos__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 3rem;
}

.logos__lista img {
  max-height: 2.5rem; /* sempre menores que o logo da Gryfo */
  width: auto;
}

.logos__noticias {
  margin-top: 2.5rem;
}

/* ----------------------------------------------------------- Histórias */

.historia__resultado {
  font-weight: 600;
}

/* -------------------------------------------------------------- Código */

.codigo-abas {
  border-radius: var(--raio-card);
  background: var(--marinho);
  color: var(--branco);
  border: 1px solid #26306B;
  overflow: hidden;
}

.codigo-abas__painel + .codigo-abas__painel {
  border-top: 1px solid #26306B;
}

.codigo-abas__linguagem {
  padding: 0.75rem 1.25rem 0;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--texto-tag);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B4C0E2;
}

/* com JavaScript: abas */
.codigo-abas__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #26306B;
}

.codigo-abas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.codigo-abas__aba {
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 0;
  border-radius: var(--raio-botao);
  background: transparent;
  color: #B4C0E2;
  font-weight: 600;
  font-size: var(--texto-pequeno);
  cursor: pointer;
}

.codigo-abas__aba[aria-selected="true"] {
  background: #0B1145;
  color: var(--branco);
  box-shadow: inset 0 -2px 0 var(--azul-claro);
}

.codigo-abas[data-abas-ativas] .codigo-abas__linguagem {
  display: none;
}

.codigo-abas[data-abas-ativas] .codigo-abas__painel + .codigo-abas__painel {
  border-top: 0;
}

.botao-copiar {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid #5C69AA;
  border-radius: var(--raio-botao);
  background: transparent;
  color: var(--branco);
  font-weight: 700;
  font-size: var(--texto-tag);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.botao-copiar:hover {
  border-color: var(--branco);
}

.botao-copiar .icone {
  width: 1.125rem;
  height: 1.125rem;
}

.codigo-janela :focus-visible,
.codigo-abas :focus-visible {
  outline-color: var(--verde-lima);
}

/* ----------------------------------------------------------- Perguntas */

.perguntas__grade {
  display: grid;
  gap: 0 4rem;
}

.perguntas {
  border-top: 1px solid var(--borda);
}

.pergunta {
  border-bottom: 1px solid var(--borda);
}

.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 1rem;
  cursor: pointer;
  list-style: none;
}

.pergunta summary::-webkit-details-marker {
  display: none;
}

.pergunta__titulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
}

.pergunta__icone {
  display: inline-grid;
  color: var(--icone);
  transition: transform 0.2s ease;
}

.pergunta[open] .pergunta__icone {
  transform: rotate(180deg);
}

.pergunta p {
  padding-bottom: 1.25rem;
  max-width: 44rem;
  color: var(--texto-secundario);
}

@media (min-width: 60em) {
  .perguntas__grade {
    grid-template-columns: 1fr 1.6fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------- Redes */

.redes {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.redes .secao__cabecalho {
  max-width: 36rem;
  margin-bottom: 0;
}

.redes__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ------------------------------------------------------------- Artigos */

.artigo-card {
  padding: 0;
  overflow: hidden;
}

.artigo-card__imagem,
.artigo-card .imagem-pendente {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  border: 0;
}

.artigo-card__corpo {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
}

.artigo-card .link-seta {
  margin-top: 0.25rem;
}

/* O cartão inteiro é clicável pelo link do título */
.artigo-card .card__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raio-card);
}

.artigo-card:focus-within {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.artigo-card .card__titulo a:focus-visible {
  outline: none;
}

.midia-lista {
  display: grid;
  gap: 2.5rem;
}

.midia-lista__item {
  display: grid;
  gap: 0.5rem;
}

.midia-lista__titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--texto-intertitulo);
  line-height: 1.3;
}

.midia-lista__titulo a {
  color: var(--texto);
  text-decoration: none;
}

.midia-lista__titulo a:hover {
  color: var(--link);
  text-decoration: underline;
}

.midia-lista__item > p:last-child {
  color: var(--texto);
  max-width: 40rem;
}

.artigo-meta,
.midia-meta {
  font-size: var(--texto-pequeno);
  color: var(--texto-suave) !important;
}

.midia-meta strong {
  color: var(--texto);
}

.aviso-vazio {
  padding: 2rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  background: var(--fundo-alternativo);
  color: var(--texto-secundario);
  text-align: center;
}

.secao--lista-artigos .secao__titulo,
.secao--lista-midia .secao__titulo {
  margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------- Mídia */

.midia-destaque {
  margin-bottom: var(--espaco-secao);
  gap: 1rem;
}

.midia-destaque .card__titulo {
  font-size: var(--texto-subtitulo);
  line-height: 1.15;
  max-width: 48rem;
}

.midia-destaque > div {
  display: grid;
  gap: 1rem;
}

/* o card inteiro leva à matéria: o link do título se estende sobre ele */
.midia-destaque .card__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.midia-destaque img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--raio-card) / 2);
}

.midia-destaque p {
  max-width: 48rem;
  color: var(--texto-secundario);
}

@media (min-width: 60em) {
  .midia-destaque {
    padding: 3rem;
  }

  .midia-destaque--imagem {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    align-items: center;
    gap: 3rem;
  }
}

/* ------------------------------------------------------- Kit de imprensa */

.kit-imprensa {
  display: grid;
  gap: 2rem 4rem;
}

.kit-imprensa__boilerplate {
  margin-top: 1.5rem;
  padding: 1.75rem;
  border-left: 4px solid var(--azul-gryfo);
  border-radius: 0 var(--raio-card) var(--raio-card) 0;
  background: var(--card);
  font-size: 1.0625rem;
  color: var(--texto-secundario);
}

.kit-imprensa__downloads {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.download {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.download:hover {
  border-color: var(--azul-gryfo);
}

.download strong {
  font-family: var(--fonte-display);
  font-size: 1.125rem;
}

.download__detalhe {
  font-size: var(--texto-pequeno);
  color: var(--texto-suave);
}

@media (min-width: 60em) {
  .kit-imprensa {
    grid-template-columns: 1.5fr 1fr;
    align-items: end;
  }
}

/* ---------------------------------------------------------- Formulário */

.formulario__grade {
  display: grid;
  gap: 2.5rem 4rem;
}

.formulario__intro {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.formulario__intro .secao__texto a {
  color: var(--link);
}

.formulario__contato {
  display: grid;
  gap: 0.75rem;
  font-style: normal;
  color: var(--texto-secundario);
}

.formulario__contato p {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.formulario__contato .icone {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  color: var(--icone);
}

/* O cartão do formulário é sempre claro, em qualquer tema de seção */
.formulario__card {
  --fundo: #FFFFFF;
  --fundo-alternativo: #F3F7FE;
  --card: #FFFFFF;
  --texto: #00022B;
  --texto-secundario: #4A5578;
  --texto-suave: #5F6B8C;
  --borda: #C9D6EE;
  --borda-forte: #7A88A8;
  --acao: #0057EF;
  --acao-hover: #0047C4;
  --acao-texto: #FFFFFF;
  --link: #0057EF;
  --foco: #0057EF;
  border-color: transparent;
}

.formulario__card .botao--primario {
  background: var(--acao);
  color: var(--acao-texto);
}

.formulario__card .botao--primario:hover {
  background: var(--acao-hover);
  color: var(--acao-texto);
}

.formulario {
  display: grid;
  gap: 1.25rem;
}

.formulario[hidden] {
  display: none;
}

.campo {
  display: grid;
  gap: 0.375rem;
}

.campo label {
  font-weight: 600;
  font-size: var(--texto-pequeno);
}

.campo__opcional,
.campo__dica {
  font-weight: 400;
  font-size: var(--texto-pequeno);
  color: var(--texto-suave);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-botao);
  background: var(--branco);
  color: var(--marinho);
  font-size: 1rem;
}

.campo textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.campo select {
  appearance: none;
  padding-right: 2.75rem;
  background: var(--branco) url("/icons/expand_more.svg") right 0.75rem center / 1.5rem no-repeat;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: var(--marinho);
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline-offset: 1px;
  border-color: var(--azul-gryfo);
}

.campo [aria-invalid="true"] {
  border-color: var(--erro);
  border-width: 2px;
}

.campo__erro {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: var(--texto-pequeno);
  font-weight: 600;
  color: var(--erro);
}

.campo__erro .icone {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1rem;
}

.campo--isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__privacidade {
  font-size: var(--texto-pequeno);
  color: var(--texto-secundario);
}

.formulario .botao {
  justify-self: start;
}

.formulario__status:empty {
  display: none;
}

.formulario__status,
.status {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 1rem 1.25rem;
  border-radius: var(--raio-botao);
  font-weight: 600;
}

.formulario__status .icone,
.status .icone {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
}

.formulario__status[data-estado="sucesso"],
.status--sucesso {
  background: var(--sucesso-fundo);
  color: var(--sucesso);
}

.formulario__status[data-estado="erro"],
.status--erro {
  background: var(--erro-fundo);
  color: var(--erro);
}

.status--alerta {
  background: var(--alerta-fundo);
  color: var(--alerta);
}

.status--info {
  background: var(--info-fundo);
  color: var(--info);
}

.formulario__alternativa {
  font-size: 1.125rem;
}

.formulario__alternativa a {
  font-weight: 700;
}

@media (min-width: 60em) {
  .formulario__grade {
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
  }

  .formulario__intro {
    position: sticky;
    top: 7rem;
  }
}

/* ------------------------------------------------------------ CTA final */

.cta-final {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

.cta-final .secao__titulo {
  max-width: 44rem;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}

.cta-final .secao__texto {
  margin-inline: auto;
}

.cta-final .grupo-botoes {
  justify-content: center;
  margin-top: 0.75rem;
}

/* ---------------------------------------------------- Faixa de números */

.faixa-numeros {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.faixa-numeros__item {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.faixa-numeros__valor {
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.5rem + 2vw, 3rem); /* quatro números lado a lado em 1200px */
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--texto);
  white-space: nowrap;
}

.faixa-numeros__rotulo {
  font-size: 1.125rem;
  color: var(--texto);
}

/* ------------------------------------------------- Resumo de página */
/* Título com o link ao lado; abaixo, os itens em colunas abertas (sem caixa) e as etiquetas numa linha */

.resumo__itens {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.resumo__item.card {
  gap: 0.5rem;
  padding: 0;
  border-radius: 0;
  background: none;
}

.resumo__item .card__titulo {
  font-size: 1.5rem;
  margin: 0;
}

.resumo__item .card__texto {
  font-size: 1.0625rem;
}

@media (min-width: 60em) {
  .secao--resumo-pagina .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 4rem;
    align-items: end;
  }

  .secao--resumo-pagina .container > * {
    grid-column: 1 / -1;
  }

  .secao--resumo-pagina .secao__cabecalho {
    grid-column: 1;
    grid-row: 1;
  }

  .secao--resumo-pagina .container > .link-seta {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 0 var(--espaco-bloco);
  }
}

.resumo__etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.resumo__itens + .resumo__etiquetas {
  margin-top: var(--espaco-bloco);
}

.resumo__etiquetas-titulo {
  font-weight: 700;
}

.lista-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------- Case */

.case {
  display: grid;
  gap: var(--espaco-bloco);
}

.case__cabecalho {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
}

.case__logo img {
  max-height: 2rem; /* sempre menor que o logo da Gryfo */
  width: auto;
}

.case__grade {
  display: grid;
  gap: var(--espaco-bloco);
}

.case__historia {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  color: var(--texto-secundario);
}

.case__subtitulo {
  margin-top: 0.75rem;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--texto-intertitulo);
  color: var(--texto);
}

.case__historia .case__subtitulo:first-child,
.case__resultados .case__subtitulo {
  margin-top: 0;
}

.case__solucao {
  display: grid;
  gap: 0.625rem;
}

.case__solucao li {
  display: flex;
  gap: 0.625rem;
}

.case__solucao .icone {
  flex: none;
  margin-top: 0.125rem;
  color: var(--icone);
}

.case__resultados {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.case__resultado {
  container-type: inline-size;
}

.case__numeros {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* Exceção prevista no documento: números de resultado dos cases em verde-lima (sobre fundo escuro) */
.case__numero {
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: min(3rem, 18cqi); /* acompanha a largura do card: "+10 milhões" sempre cabe */
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--destaque);
  white-space: nowrap;
}

.case__resultado--texto .case__rotulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.125rem;
}

.case__data {
  font-size: var(--texto-pequeno);
  color: var(--texto-suave);
}

.case__depoimento {
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
  padding-left: 1.5rem;
  border-left: 3px solid var(--borda-forte);
}

.case__depoimento blockquote {
  font-family: var(--fonte-display);
  font-size: var(--texto-intertitulo);
  line-height: 1.4;
}

.case__depoimento figcaption {
  color: var(--texto-secundario);
}

@media (min-width: 60em) {
  .case__grade {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* ----------------------------------------------------------- Segmentos */

.segmentos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.segmento__entra {
  font-weight: 600;
}

.segmento__apoio {
  flex: 1;
}

.segmento__botao {
  align-self: start;
  margin-top: 0.5rem;
}

/* ------------------------------------------------------ Gráfico de linha */

.grafico {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 0.75rem + 1vw, 2rem);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  background: var(--card);
}

.grafico__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.grafico__grade {
  stroke: var(--borda);
  stroke-width: 1;
}

.grafico__linha {
  fill: none;
  stroke: var(--numero);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.grafico__ponto {
  fill: var(--numero);
}

.grafico__rotulo {
  fill: var(--texto-secundario);
  font-size: 13px;
}

.grafico__valor {
  fill: var(--texto);
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 18px;
}

.grafico__legenda {
  font-size: var(--texto-pequeno);
  color: var(--texto-secundario);
}

/* ----------------------------------------------------------------- FAQ */

.faq {
  display: grid;
  gap: 1.5rem;
}

.faq__abas {
  display: grid;
  gap: var(--espaco-bloco);
}

.faq__nome {
  margin-bottom: 0.5rem;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--texto-intertitulo);
}

/* com JavaScript: abas no lugar dos nomes */
.faq__abas[data-abas-ativas] {
  gap: 1.5rem;
}

.faq__abas[data-abas-ativas] .faq__nome {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.faq__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.faq__aba {
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pill);
  background: transparent;
  color: var(--texto);
  font-weight: 600;
  font-size: var(--texto-pequeno);
  cursor: pointer;
}

.faq__aba:hover {
  border-color: var(--acao);
}

.faq__aba[aria-selected="true"] {
  border-color: var(--acao);
  background: var(--acao);
  color: var(--acao-texto);
}

.faq__painel:focus-visible {
  outline-offset: 0.5rem;
}

/* ------------------------------------------------------- Outros canais */

.canais {
  display: grid;
  gap: 1.5rem 2rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.canal {
  display: flex;
  gap: 1rem;
}

/* ------------------------------------------- Formulário de contato */

.formulario__extras {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-botao);
}

.formulario__extras legend {
  padding-inline: 0.375rem;
  font-weight: 700;
  font-size: var(--texto-pequeno);
}

.campo--consentimento {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.25rem 0.75rem;
}

.campo--consentimento input {
  width: 1.5rem; /* 24px: área de toque mínima (WCAG 2.2) */
  height: 1.5rem;
  min-height: 0;
  padding: 0;
  margin-top: 0.125rem;
  accent-color: var(--azul-gryfo);
}

.campo--consentimento label {
  font-weight: 400;
  font-size: var(--texto-pequeno);
}

.campo--consentimento .campo__erro {
  grid-column: 1 / -1;
}

/* ---------------------------------------------- Destaque abaixo dos passos */

.passos__destaque {
  max-width: 48rem;
  margin-top: 2rem;
  border-color: var(--borda-forte);
}

/* ------------------------------------------- Artigos recentes (página inicial) */

.artigos-recentes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* ----------------------------------------------------------------- 404 */

.erro-404 .container {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}