/* Quelios — estilos do site. Mobile-first. Todo valor de cor, fonte e espaço vem do :root. */

/* ------------------------------------------------------------ fontes */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fontes/source-serif-4-subhead-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fontes/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fontes/inter-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Reservas medidas contra a Arial por ferramentas/fontes.py, para a troca não mexer no layout */
@font-face {
  font-family: "Source Serif Reserva";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600;
  size-adjust: 91.68%;
  ascent-override: 113.00%;
  descent-override: 36.54%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Inter Reserva";
  src: local("Arial");
  font-weight: 400;
  size-adjust: 106.32%;
  ascent-override: 91.11%;
  descent-override: 22.69%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Inter Reserva";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600;
  size-adjust: 101.29%;
  ascent-override: 95.64%;
  descent-override: 23.81%;
  line-gap-override: 0.00%;
}

/* ------------------------------------------------------------ tokens */

:root {
  /* cor, fundos claros — contraste em specs/design.md §7 */
  --bg: #EEF2F7;
  --surface: #FFFFFF;
  --border: #D5DCE4;
  --text: #081F3E;
  --text-muted: #4A5668;
  --accent: #0059C8;
  --accent-hover: #00479F;
  --sobre-destaque: #FFFFFF;
  --foco: #0073FC;

  /* cor, fundos escuros */
  --escuro: #0A1A33;
  --escuro-2: #081F3E;
  --texto-claro: #FFFFFF;
  --texto-claro-2: #E6ECF3;
  --texto-claro-3: #B7C3D3;
  --destaque-claro: #4D9BFF;
  --destaque-claro-2: #7DB6FF;
  --borda-escura: rgb(183 195 211 / 0.18);
  --realce-escuro: rgb(255 255 255 / 0.08);

  /* hero: brilho do fundo e véus sobre a foto (com véu de 0,8 sob o texto, até o
     pixel mais claro da foto deixa o texto secundário acima de 4,5:1) */
  --hero-brilho: rgb(0 115 252 / 0.16);
  --veu-forte: rgb(10 26 51 / 0.9);
  --veu-medio: rgb(10 26 51 / 0.8);
  --veu-fraco: rgb(10 26 51 / 0.45);
  --veu-celular: rgb(10 26 51 / 0.8);
  /* foto de "Quem somos": véu leve na cor da seção. Sem ele, os claros da foto (janela e
     parede iluminada, p95 em L* 79) ficavam no nível do texto; com 0,3 descem a L* 60 e a
     foto mantém 73% da faixa de tons */
  --veu-quem: rgb(10 26 51 / 0.3);

  /* sombras e movimento */
  --sombra-cartao: 0 1px 2px rgb(8 31 62 / 0.06), 0 8px 24px rgb(8 31 62 / 0.07);
  --sombra-cartao-hover: 0 2px 4px rgb(8 31 62 / 0.08), 0 16px 40px rgb(8 31 62 / 0.14);
  --sombra-botao: 0 6px 16px rgb(0 71 159 / 0.3);
  --transicao: 0.2s ease;
  --deslocamento: 12px;

  /* fonte */
  --fonte-titulo: "Source Serif 4", "Source Serif Reserva", Georgia, serif;
  --fonte-corpo: "Inter", "Inter Reserva", Arial, sans-serif;
  --t-h1: clamp(1.875rem, 1.55rem + 1.45vw, 3rem);
  --t-h2: clamp(1.5rem, 1.3rem + 0.89vw, 2.25rem);
  --t-h3: clamp(1.1875rem, 1.13rem + 0.26vw, 1.375rem);
  --t-lead: clamp(1.1875rem, 1.1rem + 0.39vw, 1.375rem);
  --t-corpo: clamp(1.0625rem, 1.012rem + 0.225vw, 1.125rem);
  --t-pequeno: 1.0625rem;
  --t-numero: clamp(2.5rem, 2.1rem + 1.6vw, 3.5rem);

  /* espaço — múltiplos de 8 */
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-5: 40px;
  --e-6: 48px;
  --e-7: 64px;
  --e-8: 80px;
  --e-9: 96px;

  /* layout */
  --container: 1120px;
  --lateral: 24px;
  --secao: 64px;
  --secao-compacta: 48px;
  --gap: 16px;
  --pad-cartao: 24px;
  --medida: 36rem;
  --alvo: 48px;
  --alvo-grande: 56px;
  --raio: 12px;
  --raio-botao: 8px;
  --topo: 64px;
  --logo-topo: 32px;
  --logo-rodape: 28px;
}

@media (min-width: 48em) {
  :root {
    --lateral: 32px;
    --secao: 80px;
    --secao-compacta: 64px;
    --gap: 24px;
    --topo: 80px;
    --logo-topo: 36px;
  }
}

@media (min-width: 80em) {
  :root {
    --lateral: 40px;
    --secao: 96px;
    --secao-compacta: 72px;
    --gap: 32px;
    --pad-cartao: 32px;
  }
}

/* ------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--e-2);
}

body {
  margin: 0;
  background: var(--escuro);
  color: var(--text);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.6;
  hyphens: manual;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

p + p {
  margin-top: var(--e-2);
}

img,
svg {
  display: block;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

/* sobre fundo escuro e sobre a foto do hero, o contorno de foco usa o azul claro: o azul da marca
   cairia para 2,16:1 no pixel mais claro da foto; o claro fica acima de 3:1 também ali */
.pular:focus-visible,
.topo :focus-visible,
.fundo-escuro :focus-visible,
.fundo-escuro-2 :focus-visible {
  outline-color: var(--destaque-claro);
}

/* ------------------------------------------------------------ fundos: a alternância cria o ritmo */

.fundo-claro {
  background: var(--bg);
}

.fundo-branco {
  background: var(--surface);
}

.fundo-escuro,
.fundo-escuro-2 {
  color: var(--texto-claro-2);
}

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

.fundo-escuro-2 {
  background-color: var(--escuro-2);
}

.fundo-escuro :is(h1, h2, h3),
.fundo-escuro-2 :is(h1, h2, h3) {
  color: var(--texto-claro);
}

.fundo-escuro a:not(.botao),
.fundo-escuro-2 a:not(.botao) {
  color: var(--destaque-claro-2);
}

/* ------------------------------------------------------------ layout */

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

.texto {
  max-width: var(--medida);
}

.secao {
  padding-block: var(--secao);
}

.secao--compacta {
  padding-block: var(--secao-compacta);
}

.secao h2 {
  font-size: var(--t-h2);
  line-height: 1.18;
  margin-bottom: var(--e-4);
}

/* traço curto acima de cada título de seção (exceção aprovada ao "destaque só no clicável") */
.secao h2::before {
  content: "";
  display: block;
  width: var(--e-5);
  height: 4px;
  margin-bottom: var(--e-2);
  border-radius: 2px;
  background: var(--accent);
}

.fundo-escuro h2::before,
.fundo-escuro-2 h2::before {
  background: var(--destaque-claro);
}

.texto h2 {
  margin-bottom: var(--e-3);
}

.nota {
  margin-top: var(--e-4);
  max-width: var(--medida);
  color: var(--text-muted);
}

/* Grade que se ajusta ao número de itens (specs/design.md §9.3):
   até 1023px, 1 coluna; 2 itens viram 2 colunas a partir de 1024px; 3 itens viram 3 colunas
   a partir de 1280px. Acrescentar um item é só conteúdo: nenhuma regra muda. */
.grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 64em) {
  .grade {
    grid-template-columns: repeat(6, 1fr);
  }
  .grade > * {
    grid-column: span 6;
  }
  .grade > :first-child:nth-last-child(2),
  .grade > :first-child:nth-last-child(2) ~ * {
    grid-column: span 3;
  }
}

@media (min-width: 80em) {
  .grade > :first-child:nth-last-child(3),
  .grade > :first-child:nth-last-child(3) ~ * {
    grid-column: span 2;
  }
}

/* Quem somos: texto e foto em duas colunas a partir de 1024px. Enquanto só houver o texto,
   ele ocupa a linha inteira; quando a foto entrar no HTML, as duas colunas aparecem sozinhas. */
.quem {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}

.quem__foto {
  position: relative;
  margin: 0;
}

.quem__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raio);
  background: var(--veu-quem);
  pointer-events: none;
}

.quem__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raio);
}

@media (min-width: 64em) {
  .quem {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e-8);
  }
  .quem > :only-child {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------ componentes */

/* no celular o link ocupa a largura do header: com a largura do texto, focado, ele cobria
   5px do botão Menu em 360px */
.pular {
  position: absolute;
  left: var(--e-1);
  right: var(--e-1);
  top: -200px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo);
  padding-inline: var(--e-2);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--raio-botao);
}

.pular:focus {
  top: var(--e-1);
}

@media (min-width: 30em) {
  .pular {
    right: auto;
  }
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo);
  padding: var(--e-1) var(--e-3);
  border: 2px solid var(--accent);
  border-radius: var(--raio-botao);
  background: var(--accent);
  color: var(--sobre-destaque);
  font-family: var(--fonte-corpo);
  font-size: var(--t-pequeno);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transicao), border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.botao:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--sobre-destaque);
  box-shadow: var(--sombra-botao);
  transform: translateY(-1px);
}

.botao--grande {
  min-height: var(--alvo-grande);
  padding-inline: var(--e-4);
}

.botao--secundario {
  background: transparent;
  color: var(--accent);
}

.botao--secundario:hover {
  background: var(--surface);
  color: var(--accent-hover);
}

/* sobre fundo escuro, o azul da marca tem 2,70:1 contra o fundo; o contorno claro
   leva a borda do botão a 6,16:1 */
.topo .botao,
.fundo-escuro .botao,
.fundo-escuro-2 .botao {
  border-color: var(--destaque-claro);
}

.topo .botao:hover,
.fundo-escuro .botao:hover,
.fundo-escuro-2 .botao:hover {
  background: var(--accent-hover);
  border-color: var(--destaque-claro-2);
}

.fundo-escuro .botao--secundario,
.fundo-escuro-2 .botao--secundario {
  background: transparent;
  color: var(--texto-claro);
}

.fundo-escuro .botao--secundario:hover,
.fundo-escuro-2 .botao--secundario:hover {
  background: var(--realce-escuro);
  color: var(--texto-claro);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.link-alvo {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  font-weight: 600;
}

/* header: sem JavaScript é uma faixa escura sólida acima do hero; com JavaScript fica
   transparente, por cima do hero, e escurece só quando o menu do celular abre */

.topo {
  background: var(--escuro);
  border-bottom: 1px solid var(--borda-escura);
  color: var(--texto-claro);
}

.js .topo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: transparent;
}

.js .topo.menu-aberto {
  background: var(--escuro);
}

.topo__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--e-2);
  min-height: var(--topo);
}

.topo__marca {
  display: inline-flex;
  align-items: center;
  min-height: var(--topo);
}

.topo__marca img {
  height: var(--logo-topo);
  width: auto;
}

.topo__menu {
  display: none;
}

.topo__nav {
  flex-basis: 100%;
  padding-bottom: var(--e-2);
}

.topo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.topo__lista li + li {
  border-top: 1px solid var(--borda-escura);
}

.topo__lista a:not(.botao) {
  display: flex;
  align-items: center;
  min-height: var(--alvo);
  color: var(--texto-claro);
  font-weight: 600;
  text-decoration: none;
}

.topo__lista a:not(.botao):hover {
  color: var(--destaque-claro-2);
}

.topo__lista a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.topo__cta {
  padding-top: var(--e-2);
}

.topo__cta .botao {
  width: 100%;
}

.js .topo__menu {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--alvo);
  min-width: var(--alvo);
  padding-inline: var(--e-2);
  border: 1px solid var(--texto-claro-3);
  border-radius: var(--raio-botao);
  background: transparent;
  color: var(--texto-claro);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.topo__menu-icone {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.js .topo__nav {
  display: none;
}

.js .topo__nav.aberto {
  display: block;
}

@media (min-width: 64em) {
  .topo__linha {
    flex-wrap: nowrap;
  }
  .js .topo__menu {
    display: none;
  }
  .topo__nav,
  .js .topo__nav {
    display: block;
    flex-basis: auto;
    padding-bottom: 0;
  }
  .topo__lista {
    display: flex;
    align-items: center;
    gap: var(--e-1);
  }
  .topo__lista li + li {
    border-top: 0;
  }
  .topo__lista a:not(.botao) {
    padding-inline: var(--e-2);
  }
  .topo__cta {
    padding-top: 0;
    padding-left: var(--e-1);
  }
  .topo__cta .botao {
    width: auto;
  }
}

/* hero: altura do conteúdo, com o mesmo respiro de uma seção em cima e embaixo
   (a tela inteira deixava área morta abaixo do texto; reavaliar quando a foto entrar) */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--secao);
  background-image:
    radial-gradient(70% 60% at 88% 18%, var(--hero-brilho), transparent 70%),
    linear-gradient(165deg, var(--escuro) 30%, var(--escuro-2) 100%);
}

.js .hero {
  padding-top: calc(var(--topo) + var(--secao));
}

.hero h1 {
  max-width: 16em;
  font-size: var(--t-h1);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.hero__apoio {
  max-width: 32rem;
  margin-top: var(--e-3);
  font-size: var(--t-lead);
  line-height: 1.5;
}

.hero__acoes {
  margin-top: var(--e-5);
}

.hero__local {
  margin-top: var(--e-2);
  color: var(--texto-claro-3);
  font-size: var(--t-pequeno);
}

/* foto do hero: entra no HTML com a classe hero--foto. Véu uniforme no celular, porque
   o texto ocupa a largura toda; no desktop, mais forte à esquerda, onde o texto fica */
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
}

.hero--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veu-celular);
}

@media (min-width: 64em) {
  .hero--foto::before {
    background: linear-gradient(90deg, var(--veu-forte) 0%, var(--veu-medio) 55%, var(--veu-medio) 70%, var(--veu-fraco) 100%);
  }
  /* o menu fica sobre o lado claro da foto, onde o véu cai para 0,45: uma faixa de 0,8 embaixo
     do header, que some até o dobro da altura dele, garante o menu no pixel mais claro da foto */
  .js .hero--foto::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: calc(2 * var(--topo));
    background: linear-gradient(180deg, var(--veu-medio) 50%, transparent);
  }
  /* com foto, no desktop o hero pode passar um pouco da altura do texto para a imagem aparecer;
     o teto em svh garante que a seção seguinte continue visível na primeira tela */
  .hero--foto {
    display: flex;
    align-items: center;
    min-height: min(76svh, 720px);
  }
  .hero--foto > .container {
    width: 100%;
  }
}

/* cartões e pontos */

.cartao {
  padding: var(--pad-cartao);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  transition: box-shadow var(--transicao), transform var(--transicao);
}

.cartao:hover {
  box-shadow: var(--sombra-cartao-hover);
  transform: translateY(-2px);
}

.cartao h3,
.ponto h3 {
  font-size: var(--t-h3);
  line-height: 1.3;
  margin-bottom: var(--e-1);
}

.cartao p,
.ponto p {
  color: var(--text-muted);
}

.ponto {
  max-width: var(--medida);
  padding-top: var(--e-3);
  border-top: 2px solid var(--text);
}

/* passos: sequência real, mais compacta que o resto, com números grandes no azul da marca
   (exceção aprovada ao "destaque só no clicável") */

.passos {
  display: grid;
  gap: var(--e-4) var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: var(--e-6) 1fr;
  align-items: start;
  align-content: start;   /* o item estica até a altura do vizinho; a sobra fica embaixo */
}

.passos li::before {
  content: counter(passo);
  grid-row: span 2;
  font-family: var(--fonte-titulo);
  font-size: var(--t-numero);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.passos h3 {
  font-size: var(--t-h3);
  line-height: 1.3;
  margin-bottom: var(--e-1);
}

.passos p {
  grid-column: 2;
  color: var(--text-muted);
}

@media (min-width: 48em) {
  .passos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 80em) {
  .passos {
    grid-template-columns: repeat(4, 1fr);
  }
  .passos li {
    grid-template-columns: 1fr;
  }
  .passos li::before {
    grid-row: auto;
    margin-bottom: var(--e-2);
  }
  .passos p {
    grid-column: 1;
  }
}

/* rodapé escuro: links sem sublinhado, que aparece no hover e no foco */

.rodape {
  padding-block: var(--e-6);
  border-top: 1px solid var(--borda-escura);
  font-size: var(--t-pequeno);
}

.rodape__grade {
  display: grid;
  gap: var(--e-4);
}

.rodape__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  margin-bottom: var(--e-1);
}

.rodape__logo img {
  height: var(--logo-rodape);
  width: auto;
}

.rodape__marca p {
  color: var(--texto-claro-3);
}

.rodape__marca p + p {
  margin-top: var(--e-1);
}

.rodape__titulo {
  margin-bottom: var(--e-1);
  font-family: var(--fonte-corpo);
  font-size: var(--t-pequeno);
  font-weight: 600;
}

.rodape__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape .rodape__lista a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  min-width: var(--alvo);
  color: var(--texto-claro-2);
  text-decoration: none;
}

.rodape .rodape__lista a:hover,
.rodape .rodape__lista a:focus-visible {
  color: var(--texto-claro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.rodape .rodape__lista a[aria-current="page"] {
  color: var(--texto-claro);
  font-weight: 600;
}

.rodape__direitos {
  margin-top: var(--e-4);
  color: var(--texto-claro-3);
}

@media (min-width: 48em) {
  .rodape {
    padding-block: var(--e-7);
  }
  .rodape__grade {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* ------------------------------------------------------------ movimento */

@media (prefers-reduced-motion: no-preference) {
  .js [data-revelar] {
    opacity: 0;
    transform: translateY(var(--deslocamento));
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .js [data-revelar].visivel {
    opacity: 1;
    transform: none;
  }
  /* o cartão revelado mantém a transição curta e o deslocamento do hover
     (a regra de revelação tem especificidade maior e anularia os dois) */
  .js .cartao[data-revelar].visivel {
    transition: opacity 0.5s ease, transform var(--transicao), box-shadow var(--transicao);
  }
  .js .cartao[data-revelar].visivel:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .botao,
  .cartao {
    transition: none;
  }
  .botao:hover,
  .cartao:hover {
    transform: none;
  }
}