/* Abiel Gomes Nutricionista. Folha única de estilo.
   Fonte de verdade: docs/designSystem.md. Mobile first. Nenhum valor solto fora dos tokens. */

/* 1. Tokens */
:root {
  --corGrafite: #141414;
  --corGrafiteClaro: #1E1E1E;
  --corGrafiteTexto: #2A2A2A;
  --corBranco: #FFFFFF;
  --corPrataClara: #F2F2F2;
  --corPrata: #C8C8C8;
  --corPrataEscura: #969696;
  --corVerde: #60A639;
  --corVerdeClaro: #89C763;
  --corVerdeEscuro: #43901A;
  --corVerdeProfundo: #2E7A12;

  --degradePrata: linear-gradient(to bottom, #F5F5F5 0%, #D7D7D7 45%, #E1E1E1 55%, #AFAFAF 75%, #969696 100%);

  --fonteDisplay: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --fonteTexto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --tamanhoHero: clamp(3.2rem, 1.418rem + 7.602vw, 7.5rem);
  --tamanhoHeroApoio: clamp(1.9rem, 1.196rem + 3.006vw, 3.6rem);
  --tamanhoH2: clamp(1.8rem, 1.303rem + 2.122vw, 3rem);
  --tamanhoH3: clamp(1.25rem, 1.105rem + 0.619vw, 1.6rem);
  --tamanhoCorpo: clamp(1rem, 0.948rem + 0.221vw, 1.125rem);
  --tamanhoDestaque: clamp(1.125rem, 1.032rem + 0.398vw, 1.35rem);
  --tamanhoPequeno: clamp(0.85rem, 0.809rem + 0.177vw, 0.95rem);

  --alturaLinhaDisplay: 1.05;
  --alturaLinhaTitulo: 1.2;
  --alturaLinhaCorpo: 1.6;
  --larguraParagrafo: 65ch;

  --espaco1: 0.25rem;
  --espaco2: 0.5rem;
  --espaco3: 1rem;
  --espaco4: 1.5rem;
  --espaco5: 2rem;
  --espaco6: 3rem;
  --espaco7: 4.5rem;
  --espacoSecao: clamp(4rem, 8vw, 8rem);
  --margemLateral: clamp(1.25rem, 5vw, 6rem);
  --larguraMaxima: 1280px;

  --raioPequeno: 6px;
  --raioMedio: 10px;
  --raioGrande: 18px;
  --raioPilula: 999px;
  --sombraSuave: 0 8px 24px rgb(0 0 0 / 8%);
  --sombraFoto: 0 24px 48px rgb(0 0 0 / 35%);
  --bordaSutil: 1px solid var(--corPrataClara);

  --duracaoHover: 200ms;
  --duracaoEntrada: 250ms;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --deslocamentoEntrada: 12px;

  --alturaCabecalho: 64px;
  --alturaLogo: 56px;
  --alturaBotao: 56px;
  --alvoToque: 44px;
  --tracoRotulo: 34px;
  --tamanhoFlutuante: 56px;
  --margemFlutuante: 20px;
  --espessuraIcone: 1.5px;
  --iconeTexto: 20px;
  --iconeCard: 24px;
  --alturaHero: clamp(52rem, 100svh, 56rem);
  --espacoHeroBase: clamp(3rem, 11vh, 6rem);
  --iconeFlutuante: 28px;
  --passoTextura: 22px;
  --haloRisco: 14px;
}

/* 2. Fontes hospedadas no próprio servidor */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url("../assets/fonts/bebasNeue.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url("../assets/fonts/inter400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url("../assets/fonts/inter500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url("../assets/fonts/inter600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url("../assets/fonts/inter700.woff2") format("woff2");
}

/* 3. Reset leve, especificidade zero */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body, h1, h2, h3, p, ul, blockquote, figure) { margin: 0; }
:where(ul[class]) { padding: 0; list-style: none; }
:where(img, picture, svg) { display: block; max-inline-size: 100%; }
:where(img) { block-size: auto; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(a) { color: inherit; }
:where(address) { font-style: normal; }
:where(h1, h2, h3) { overflow-wrap: anywhere; }

/* 4. Base */
html { background: var(--corBranco); }
body {
  font-family: var(--fonteTexto);
  font-size: var(--tamanhoCorpo);
  font-weight: 400;
  line-height: var(--alturaLinhaCorpo);
  color: var(--corGrafiteTexto);
  background: var(--corBranco);
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
p { max-inline-size: var(--larguraParagrafo); }
h2 { font-size: var(--tamanhoH2); font-weight: 700; line-height: var(--alturaLinhaTitulo); color: var(--corGrafite); }
h3 { font-size: var(--tamanhoH3); font-weight: 600; line-height: var(--alturaLinhaTitulo); color: var(--corGrafite); }

:focus-visible {
  outline: 2px solid var(--corVerdeProfundo);
  outline-offset: 3px;
  border-radius: var(--raioPequeno);
}
.emFundoEscuro :focus-visible, .cabecalho :focus-visible { outline-color: var(--corVerde); }
html.menuAbertoDocumento .menuPainel :focus-visible { outline-color: var(--corVerdeProfundo); }
html.menuAbertoDocumento { overflow: hidden; }
html.menuAbertoDocumento .cabecalho { position: fixed; background: var(--corGrafite); }

/* 5. Composição e utilitários */
.container {
  inline-size: min(100% - 2 * var(--margemLateral), var(--larguraMaxima));
  margin-inline: auto;
}
.fluxo > * + * { margin-block-start: var(--fluxoEspaco, var(--espaco3)); }
.visualmenteOculto {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.icone {
  inline-size: var(--iconeTexto);
  block-size: var(--iconeTexto);
  flex: none;
  stroke-width: var(--espessuraIcone);
}
.rotuloSecao {
  display: flex;
  align-items: center;
  gap: var(--espaco2);
  font-size: var(--tamanhoPequeno);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corVerdeProfundo);
}
.rotuloSecao::before {
  content: "";
  inline-size: var(--tracoRotulo);
  block-size: 1px;
  background: currentColor;
  flex: none;
}
.emFundoEscuro .rotuloSecao { color: var(--corVerdeClaro); }

/* 6. Botões */
.botaoPrincipal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco2);
  min-block-size: var(--alturaBotao);
  padding-inline: var(--espaco4);
  font-weight: 600;
  font-size: var(--tamanhoCorpo);
  line-height: 1.2;
  color: var(--corGrafite);
  background: var(--corVerde);
  border-radius: var(--raioMedio);
  text-decoration: none;
  transition: background-color var(--duracaoHover) var(--curva), translate var(--duracaoHover) var(--curva);
}
.botaoPrincipal:hover { background: var(--corVerdeEscuro); }
.botaoPrincipal:active { translate: 0 1px; }
.botaoPrincipal .icone { transition: translate var(--duracaoHover) var(--curva); }
.botaoPrincipal:hover .icone { translate: 4px 0; }

.botaoSecundario {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco2);
  min-block-size: var(--alvoToque);
  font-weight: 500;
  color: var(--corGrafite);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-decoration-color var(--duracaoHover) var(--curva);
}
.botaoSecundario:hover { text-decoration-color: transparent; }
.botaoSecundario .icone { transition: translate var(--duracaoHover) var(--curva); }
.botaoSecundario:hover .icone { translate: 4px 0; }
.emFundoEscuro .botaoSecundario { color: var(--corPrata); }

.botaoPilula {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--alvoToque);
  padding-inline: var(--espaco4);
  border: 1px solid var(--corVerde);
  border-radius: var(--raioPilula);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--duracaoHover) var(--curva), color var(--duracaoHover) var(--curva);
}
.botaoPilula:hover { background: var(--corVerde); color: var(--corGrafite); }

.botaoFlutuante {
  position: fixed;
  inset-block-end: var(--margemFlutuante);
  inset-inline-end: var(--margemFlutuante);
  z-index: 20;
  display: grid;
  place-items: center;
  inline-size: var(--tamanhoFlutuante);
  block-size: var(--tamanhoFlutuante);
  border-radius: var(--raioPilula);
  background: var(--corVerdeEscuro);
  color: var(--corBranco);
  box-shadow: var(--sombraSuave);
  transition: background-color var(--duracaoHover) var(--curva), scale var(--duracaoHover) var(--curva);
  animation: aparecerFlutuante 1ms linear both;
  animation-timeline: scroll(root block);
  animation-range: 0 25vh;
}
@keyframes aparecerFlutuante {
  from { opacity: 0; visibility: hidden; scale: 0.9; }
  to { opacity: 1; visibility: visible; scale: 1; }
}
html.menuAbertoDocumento .botaoFlutuante { display: none; }
.botaoFlutuante .icone { inline-size: var(--iconeFlutuante); block-size: var(--iconeFlutuante); }
.botaoFlutuante:hover { background: var(--corVerdeProfundo); scale: 1.05; }
.botaoFlutuante:focus-visible { outline-color: var(--corVerdeProfundo); }

/* 7. Cabeçalho, sobre o hero */
.cabecalho {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10;
  block-size: var(--alturaCabecalho);
  color: var(--corBranco);
}
.cabecalhoInterno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 100%;
}
.marca { display: inline-flex; align-items: center; min-block-size: var(--alvoToque); }
.marca img { block-size: var(--alturaLogo); inline-size: auto; }

.menuBotao {
  display: grid;
  place-items: center;
  inline-size: var(--alvoToque);
  block-size: var(--alvoToque);
  margin-inline-end: calc(-1 * var(--espaco2));
  color: var(--corBranco);
}
.menuBotao .icone { inline-size: var(--iconeCard); block-size: var(--iconeCard); }
.menuBotao .icone path { transition: translate var(--duracaoHover) var(--curva), rotate var(--duracaoHover) var(--curva), opacity var(--duracaoHover); transform-origin: center; transform-box: fill-box; }
.menuBotao[aria-expanded="true"] .linhaTopo { translate: 0 5px; rotate: 45deg; }
.menuBotao[aria-expanded="true"] .linhaMeio { opacity: 0; }
.menuBotao[aria-expanded="true"] .linhaBase { translate: 0 -5px; rotate: -45deg; }

.menuPainel {
  display: none;
  position: fixed;
  inset: var(--alturaCabecalho) 0 0 0;
  z-index: 9;
  background: var(--corBranco);
  color: var(--corGrafite);
  padding-block: var(--espaco5);
  overflow-y: auto;
}
.menuBotao[aria-expanded="true"] + .menuPainel { display: block; }
.menuLista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco2);
  inline-size: min(100% - 2 * var(--margemLateral), var(--larguraMaxima));
  margin-inline: auto;
}
.menuLista a:not(.botaoPilula) {
  display: flex;
  align-items: center;
  min-block-size: var(--alvoToque);
  padding-block: var(--espaco2);
  font-size: var(--tamanhoH3);
  font-weight: 500;
  text-decoration: none;
  border-block-end: var(--bordaSutil);
}
.menuLista a[aria-current="page"] { color: var(--corVerdeProfundo); }
.menuLista .botaoPilula { margin-block-start: var(--espaco3); align-self: flex-start; color: var(--corGrafite); }

/* 8. Hero, única seção escura do site */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--corBranco);
  background:
    radial-gradient(ellipse 80% 70% at 35% 45%, var(--corGrafiteClaro), var(--corGrafite) 75%);
  --alturaVisual: calc(var(--alturaCabecalho) + var(--alturaFotoMobile));
  --alturaFotoMobile: min(38svh, 24rem);
}
/* textura de pontos minúsculos, feita em CSS */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--corBranco) 7%, transparent) 1px, transparent 1.2px);
  background-size: var(--passoTextura) var(--passoTextura);
  pointer-events: none;
}
.heroFundo {
  position: absolute;
  inset: 0 0 auto 0;
  block-size: var(--alturaVisual);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, var(--corGrafite) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, var(--corGrafite) 72%, transparent 100%);
}
.heroFaixa, .heroFaixaPrata, .heroBrilho, .heroBrilho::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 100%;
  aspect-ratio: 1;
}
.heroFaixa {
  clip-path: polygon(62% 0, 86% 0, 0 97.1%, 0 70%);
  background:
    linear-gradient(131.5deg,
      transparent 32.9%,
      color-mix(in srgb, var(--corBranco) 45%, transparent) 32.9%,
      color-mix(in srgb, var(--corBranco) 12%, transparent) 35.3%,
      transparent 38%,
      transparent 40.5%,
      color-mix(in srgb, var(--corGrafite) 18%, transparent) 43.6%,
      color-mix(in srgb, var(--corGrafite) 30%, transparent) 45.6%),
    linear-gradient(221.5deg, var(--corVerdeClaro) 0%, var(--corVerde) 45%, var(--corVerdeProfundo) 100%);
}
.heroFaixaPrata {
  clip-path: polygon(87.9% 0, 89.2% 0, 0 100.7%, 0 99.2%);
  background: linear-gradient(221.5deg, var(--corBranco) 0%, var(--corPrata) 40%, var(--corPrataEscura) 100%);
}
.heroBrilho { filter: blur(32px); opacity: 0.55; inset-inline-end: 0; }
.heroBrilho::before {
  content: "";
  inset: 0;
  inline-size: 100%;
  background: var(--corVerde);
  clip-path: polygon(58% 0, 90% 0, 0 104%, 0 64%);
}
.heroEco { display: none; }
.heroRisco {
  position: absolute;
  z-index: 1;
  inset-inline-start: -10%;
  inset-block-end: var(--espaco5);
  inline-size: 120%;
  block-size: 1px;
  rotate: -8deg;
  background: linear-gradient(90deg, transparent, var(--corVerdeClaro) 12%, var(--corVerdeClaro) 62%, transparent 85%);
  opacity: 0.8;
  pointer-events: none;
}
.heroRisco::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--haloRisco)) 0;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--corVerdeClaro) 28%, transparent), transparent);
  filter: blur(6px);
}

.heroConteudo {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block-end: var(--espaco7);
}
.heroVisual {
  block-size: var(--alturaVisual);
  margin-inline: calc(-1 * var(--margemLateral));
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
}
.heroFoto {
  block-size: var(--alturaFotoMobile);
  display: flex;
  align-items: flex-end;
}
.heroFoto img {
  block-size: 100%;
  inline-size: auto;
  max-inline-size: none;
  filter: drop-shadow(var(--sombraFoto));
  -webkit-mask-image: linear-gradient(to bottom, var(--corGrafite) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, var(--corGrafite) 78%, transparent 100%);
}
.heroTexto { padding-block-start: var(--espaco3); --fluxoEspaco: var(--espaco3); }
.heroTitulo {
  font-family: var(--fonteDisplay);
  font-weight: 400;
  line-height: var(--alturaLinhaDisplay);
  text-transform: uppercase;
  color: var(--corPrataClara);
  margin-block-start: var(--espaco2);
}
.heroTituloPrincipal { display: block; font-size: var(--tamanhoHero); letter-spacing: 0.01em; }
.heroTituloApoio { display: block; font-size: var(--tamanhoHeroApoio); letter-spacing: 0.02em; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .heroTitulo > span {
    background: var(--degradePrata);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-inline-end: 0.04em;
  }
}
.heroSubtitulo {
  font-size: var(--tamanhoDestaque);
  font-weight: 500;
  color: color-mix(in srgb, var(--corBranco) 85%, transparent);
  max-inline-size: 48ch;
}
.heroAcoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco3) var(--espaco5);
  margin-block-start: var(--espaco3);
}
.heroNota {
  font-size: var(--tamanhoPequeno);
  font-weight: 500;
  color: var(--corPrata);
}
.heroDestaque {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco3);
  margin-block-start: var(--espaco6);
  max-inline-size: 22rem;
}
.heroDestaque p {
  font-size: var(--tamanhoCorpo);
  font-weight: 500;
  line-height: var(--alturaLinhaTitulo);
  color: var(--corBranco);
}
.heroAspas {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--alvoToque);
  block-size: var(--alvoToque);
  border: 1px solid var(--corVerde);
  border-radius: var(--raioPilula);
  color: var(--corVerdeClaro);
}
.heroAspas .icone { inline-size: var(--iconeCard); block-size: var(--iconeCard); }

/* 9. Cápsula de resposta direta, discreta, logo após o hero */
.capsula { padding-block: var(--espacoSecao); }
.capsula p { max-inline-size: var(--larguraParagrafo); }

/* 10. Rodapé */
.rodape {
  background: var(--corPrataClara);
  color: var(--corGrafiteTexto);
  padding-block: var(--espacoSecao) var(--espaco6);
}
.rodapeGrade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--espaco6) var(--espaco5);
}
.rodapeIdentidade img { block-size: var(--alturaLogo); inline-size: auto; }
.rodapeIdentidade { --fluxoEspaco: var(--espaco2); }
.rodapeNome { font-weight: 600; color: var(--corGrafite); margin-block-start: var(--espaco4); }
.rodapeTitulo { font-size: var(--tamanhoH3); font-weight: 600; margin-block-end: var(--espaco3); }
.rodapeContato address { --fluxoEspaco: var(--espaco2); }
.rodapeItem { display: flex; align-items: flex-start; gap: var(--espaco2); }
.rodapeItem .icone { color: var(--corVerdeProfundo); margin-block-start: 0.35em; }
.rodapeItem a { display: inline-flex; align-items: center; min-block-size: var(--alvoToque); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.rodapeItem:has(a) { align-items: center; }
.rodapeItem:has(a) .icone { margin-block-start: 0; }
.rodapeContato .botaoSecundario { margin-block-start: var(--espaco3); }
.rodapeNavegacao ul { --fluxoEspaco: 0; }
.rodapeNavegacao a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--alvoToque);
  min-inline-size: var(--alvoToque);
  text-decoration: none;
}
.rodapeNavegacao a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.rodapeLinha {
  margin-block-start: var(--espaco6);
  padding-block-start: var(--espaco4);
  border-block-start: 1px solid var(--corPrata);
  padding-inline-end: calc(var(--tamanhoFlutuante) + var(--margemFlutuante));
  font-size: var(--tamanhoPequeno);
  font-weight: 500;
  color: var(--corGrafiteTexto);
}

/* 11. Movimento com propósito, curto e escalonado */
@keyframes surgir {
  from { opacity: 0; translate: 0 var(--deslocamentoEntrada); }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* A foto é o elemento de LCP e não entra com fade, para o navegador contar a pintura dela. */
  .heroTexto > *, .heroDestaque {
    animation: surgir var(--duracaoEntrada) var(--curva) both;
  }
  .heroTexto > :nth-child(1) { animation-delay: 0ms; }
  .heroTexto > :nth-child(2) { animation-delay: 60ms; }
  .heroTexto > :nth-child(3) { animation-delay: 120ms; }
  .heroTexto > :nth-child(4) { animation-delay: 180ms; }
  .heroTexto > :nth-child(5) { animation-delay: 240ms; }
  .heroDestaque { animation-delay: 300ms; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  /* O flutuante continua ligado à rolagem, mas só com opacidade, sem escala. */
  @keyframes aparecerFlutuante {
    from { opacity: 0; visibility: hidden; }
    to { opacity: 1; visibility: visible; }
  }
}

/* 11b. Celular alto: mais espaço para a foto sem tirar o botão da dobra */
@media (min-height: 44em) {
  .hero { --alturaFotoMobile: min(44svh, 24rem); }
}

/* 12. Tablet: menu horizontal */
@media (min-width: 48em) {
  :root { --alturaCabecalho: 72px; }
  .menuBotao { display: none; }
  .menuPainel {
    display: block;
    position: static;
    inset: auto;
    background: transparent;
    color: inherit;
    padding: 0;
    overflow: visible;
  }
  /* Barra translúcida escura: garante contraste dos links mesmo onde a faixa verde passa por trás */
  .menuLista {
    flex-direction: row;
    align-items: center;
    gap: var(--espaco2);
    inline-size: auto;
    margin: 0;
    padding: var(--espaco2) var(--espaco1) var(--espaco2) var(--espaco2);
    border-radius: var(--raioPilula);
    background: color-mix(in srgb, var(--corGrafite) 78%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .menuLista a:not(.botaoPilula) {
    min-block-size: var(--alvoToque);
    padding: 0 var(--espaco3);
    font-size: var(--tamanhoCorpo);
    border: 0;
    border-radius: var(--raioPilula);
    color: color-mix(in srgb, var(--corBranco) 90%, transparent);
    transition: color var(--duracaoHover) var(--curva);
  }
  .menuLista a:not(.botaoPilula):hover, .menuLista a[aria-current="page"] { color: var(--corBranco); }
  .menuLista .botaoPilula { margin: 0 0 0 var(--espaco2); color: var(--corBranco); }
  .menuLista .botaoPilula:hover { color: var(--corGrafite); }
}

/* 13. Desktop: composição do hero fiel à referência */
@media (min-width: 64em) {
  .hero {
    min-block-size: var(--alturaHero);
    --alturaVisual: 100%;
    --alturaFoto: min(900px, 0.86 * var(--alturaHero), 56vw);
    --larguraFoto: var(--alturaFoto);
    --centroCabeca: 72%;
    --esmaecimentoFoto: 36%;
  }
  .heroFundo { inset: 0; block-size: 100%; -webkit-mask-image: none; mask-image: none; }
  /* Faixa ancorada ao contêiner: a borda esquerda no topo fica em faixaX do contêiner, o ângulo é sempre 22.6 graus
     (desce 0.416 da altura do hero para a esquerda) e o reflexo é calculado em px sobre o mesmo eixo, por isso não muda com a altura da janela. */
  .hero {
    --larguraContainer: min(100vw - 2 * var(--margemLateral), var(--larguraMaxima));
    --faixaX: calc(50vw - 0.5 * var(--larguraContainer) + 0.72 * var(--larguraContainer));
    --alturaH: var(--alturaHero);
  }
  .heroFaixa, .heroFaixaPrata, .heroBrilho, .heroBrilho::before {
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: auto;
  }
  .heroBrilho::before { clip-path: polygon(calc(var(--faixaX) - 0.048 * var(--alturaH)) 0, calc(var(--faixaX) + 0.176 * var(--alturaH)) 0, calc(var(--faixaX) - 0.24 * var(--alturaH)) 100%, calc(var(--faixaX) - 0.464 * var(--alturaH)) 100%); }
  .heroFaixa {
    clip-path: polygon(var(--faixaX) 0, calc(var(--faixaX) + 0.128 * var(--alturaH)) 0, calc(var(--faixaX) - 0.288 * var(--alturaH)) 100%, calc(var(--faixaX) - 0.416 * var(--alturaH)) 100%);
    background:
      linear-gradient(112.59deg,
        transparent calc(0.923 * var(--faixaX)),
        color-mix(in srgb, var(--corBranco) 45%, transparent) calc(0.923 * var(--faixaX)),
        color-mix(in srgb, var(--corBranco) 12%, transparent) calc(0.923 * var(--faixaX) + 0.0223 * var(--alturaH)),
        transparent calc(0.923 * var(--faixaX) + 0.0484 * var(--alturaH)),
        transparent calc(0.923 * var(--faixaX) + 0.0707 * var(--alturaH)),
        color-mix(in srgb, var(--corGrafite) 18%, transparent) calc(0.923 * var(--faixaX) + 0.1005 * var(--alturaH)),
        color-mix(in srgb, var(--corGrafite) 30%, transparent) calc(0.923 * var(--faixaX) + 0.1182 * var(--alturaH))),
      linear-gradient(202.59deg, var(--corVerdeClaro) 0%, var(--corVerde) 45%, var(--corVerdeProfundo) 100%);
  }
  .heroFaixaPrata {
    clip-path: polygon(calc(var(--faixaX) + 0.146 * var(--alturaH)) 0, calc(var(--faixaX) + 0.158 * var(--alturaH)) 0, calc(var(--faixaX) - 0.258 * var(--alturaH)) 100%, calc(var(--faixaX) - 0.27 * var(--alturaH)) 100%);
    background: linear-gradient(202.59deg, var(--corBranco) 0%, var(--corPrata) 40%, var(--corPrataEscura) 100%);
  }
  .heroEco {
    display: block;
    position: absolute;
    z-index: 0;
    inset-inline-start: -14%;
    inset-block-start: 2%;
    block-size: 96%;
    aspect-ratio: 1084 / 900;
    background-image: url("../assets/img/heroAbiel900.webp");
    background-image: image-set(url("../assets/img/heroAbiel900.avif") type("image/avif"), url("../assets/img/heroAbiel900.webp") type("image/webp"));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
    filter: grayscale(1);
    opacity: 0.08;
    pointer-events: none;
  }
  .heroRisco {
    inset-block-end: auto;
    inset-block-start: 92%;
    inset-inline-start: -10%;
    inline-size: 120%;
    block-size: 2px;
    rotate: -14.7deg;
  }
  .heroConteudo {
    min-block-size: var(--alturaHero);
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: 1fr auto auto;
    align-items: end;
    padding-block: var(--alturaCabecalho) var(--espacoHeroBase);
  }
  .heroVisual {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: calc(var(--centroCabeca) - 0.57 * var(--larguraFoto));
    block-size: 100%;
    margin: 0;
    overflow: visible;
    z-index: 1;
    align-items: flex-end;
    justify-content: flex-start;
  }
  .heroFoto { block-size: var(--alturaFoto); }
  .heroFoto img {
    inline-size: var(--larguraFoto);
    object-fit: cover;
    object-position: 57% 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, var(--corGrafite) var(--esmaecimentoFoto), var(--corGrafite) 90%, transparent);
    mask-image: linear-gradient(to right, transparent, var(--corGrafite) var(--esmaecimentoFoto), var(--corGrafite) 90%, transparent);
  }
  .heroSubtitulo { max-inline-size: 32ch; }
  .heroAcoes { flex-direction: column; align-items: flex-start; }
  .heroNota { max-inline-size: 28ch; }
  .heroTexto {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    z-index: 2;
    padding: 0;
    padding-inline-end: var(--espaco5);
  }
  .heroDestaque {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    z-index: 2;
    margin-block-start: var(--espaco5);
  }
  .heroTitulo { margin-block-start: var(--espaco3); }
  .heroAcoes { margin-block-start: var(--espaco5); }
}

/* 13b. Janela baixa de desktop (notebook com barras do navegador): composição compacta para a chamada caber na primeira dobra */
@media (min-width: 64em) and (max-height: 46em) {
  :root {
    --alturaHero: clamp(44rem, 100svh, 56rem);
    --espacoHeroBase: var(--espaco5);
    --tamanhoHero: clamp(3.2rem, 1.418rem + 6vw, 6rem);
    --tamanhoHeroApoio: clamp(1.9rem, 1.196rem + 2.4vw, 2.9rem);
  }
  .heroTexto { --fluxoEspaco: var(--espaco2); }
  .heroSubtitulo { line-height: 1.5; }
  .heroAcoes { margin-block-start: var(--espaco3); }
  .heroDestaque { margin-block-start: var(--espaco4); }
}

/* 14. Desktop largo: cabeça da foto mais à direita, como na referência */
@media (min-width: 80em) {
  .hero { --centroCabeca: 67%; --esmaecimentoFoto: 38%; --faixaX: calc(50vw - 0.5 * var(--larguraContainer) + 0.75 * var(--larguraContainer)); }
  .heroSubtitulo { max-inline-size: 33ch; }
  .heroAcoes { flex-direction: row; align-items: center; }
  .heroNota { max-inline-size: var(--larguraParagrafo); }
  .heroConteudo { grid-template-rows: 1fr auto; }
  .heroDestaque {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    margin: var(--espaco6) 0 0 0;
    max-inline-size: 15.6rem;
    text-align: end;
    padding: var(--espaco2);
    border-radius: var(--raioGrande);
    background: color-mix(in srgb, var(--corGrafite) 78%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .heroDestaque p { font-size: var(--tamanhoDestaque); }
}
@media (min-width: 90em) {
  .hero { --centroCabeca: 69%; }
}

/* 15. Página Sobre: cabeçalho claro fixo, tela dividida, números, formação, local e chamada final */
:root {
  --tamanhoTituloPagina: clamp(2.6rem, 1.523rem + 4.597vw, 5.2rem);
  --alturaFotoSobre: 70svh;
  --alturaFotoLocal: 50svh;
  --alturaFotoLocalDesktop: 70svh;
  --iconeTrilha: 16px;
  --espessuraLinhaTempo: 1px;
  --pontoLinhaTempo: 8px;
}
.cabecalhoClaro {
  position: fixed;
  background: var(--corBranco);
  color: var(--corGrafite);
  border-block-end: var(--bordaSutil);
}
.cabecalhoClaro .menuBotao { color: var(--corGrafite); }
.cabecalhoClaro :focus-visible { outline-color: var(--corVerdeProfundo); }
html.menuAbertoDocumento .cabecalhoClaro { background: var(--corBranco); }
.paginaClara main { padding-block-start: var(--alturaCabecalho); }
.paginaClara .rotuloSecao { color: var(--corVerdeProfundo); }

.trilha {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco1);
  font-size: var(--tamanhoPequeno);
  font-weight: 500;
  color: var(--corGrafiteTexto);
}
.trilha li { display: inline-flex; align-items: center; gap: var(--espaco1); }
.trilha a { display: inline-flex; align-items: center; min-block-size: var(--alvoToque); min-inline-size: var(--alvoToque); text-decoration: none; }
.trilha a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.trilha .icone { inline-size: var(--iconeTrilha); block-size: var(--iconeTrilha); color: var(--corGrafiteTexto); }
.trilha [aria-current="page"] { color: var(--corGrafite); }

.sobreAbertura {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-block-size: calc(100svh - var(--alturaCabecalho));
}
.sobreFoto {
  position: relative;
  block-size: var(--alturaFotoSobre);
  overflow: hidden;
  background: var(--corPrataClara);
}
.sobreFoto picture, .localFoto picture { block-size: 100%; }
.sobreFoto img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.sobreFotoNome {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  max-inline-size: 100%;
  padding: var(--espaco2) var(--espaco4);
  background: color-mix(in srgb, var(--corGrafite) 85%, transparent);
  color: var(--corBranco);
  line-height: var(--alturaLinhaTitulo);
}
.sobreFotoNome strong { display: block; font-weight: 500; font-size: var(--tamanhoCorpo); }
.sobreFotoNome span { display: block; font-size: var(--tamanhoPequeno); font-weight: 500; color: var(--corPrata); }

.sobreLeitura {
  padding: var(--espacoSecao) var(--margemLateral);
  --fluxoEspaco: var(--espaco4);
}
.sobreLeitura > * { max-inline-size: var(--larguraParagrafo); }
.sobreLeitura p { text-wrap: pretty; }
.sobreTitulo {
  font-family: var(--fonteDisplay);
  font-weight: 400;
  font-size: var(--tamanhoTituloPagina);
  line-height: var(--alturaLinhaDisplay);
  letter-spacing: 0.01em;
  color: var(--corGrafite);
  text-wrap: balance;
  margin-block-start: var(--espaco2);
}
.tituloDisplay {
  font-family: var(--fonteDisplay);
  font-weight: 400;
  font-size: var(--tamanhoH2);
  line-height: var(--alturaLinhaDisplay);
  letter-spacing: 0.02em;
  color: var(--corGrafite);
  text-wrap: balance;
}
.sobreLeitura .tituloDisplay { margin-block-start: var(--espaco7); }
.sobreCapsula { font-size: var(--tamanhoDestaque); font-weight: 500; color: var(--corGrafite); }
.sobreAcoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco3) var(--espaco5); margin-block-start: var(--espaco5); }
.sobreCitacao {
  position: relative;
  margin-block-start: var(--espaco7);
  padding-inline-start: var(--espaco4);
  border-inline-start: 2px solid var(--corVerde);
}
.sobreCitacao .icone { inline-size: var(--iconeCard); block-size: var(--iconeCard); color: var(--corVerde); margin-block-end: var(--espaco2); }
.sobreCitacao p {
  font-family: var(--fonteDisplay);
  font-weight: 400;
  font-size: var(--tamanhoH2);
  line-height: var(--alturaLinhaDisplay);
  letter-spacing: 0.02em;
  color: var(--corGrafite);
  text-wrap: balance;
}

.faixaNumeros { background: var(--corPrataClara); padding-block: var(--espacoSecao); }
.numerosGrade { container-type: inline-size; }
.numerosLista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaco5); }
.numerosLista li { border-inline-start: 2px solid var(--corVerde); padding-inline-start: var(--espaco4); }
.numerosLista strong {
  display: block;
  font-family: var(--fonteDisplay);
  font-weight: 400;
  font-size: var(--tamanhoHeroApoio);
  line-height: var(--alturaLinhaDisplay);
  letter-spacing: 0.02em;
  color: var(--corGrafite);
}
.numerosLista span { display: block; font-size: var(--tamanhoPequeno); font-weight: 500; color: var(--corGrafiteTexto); margin-block-start: var(--espaco1); }
@container (min-width: 30em) {
  .numerosLista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.formacao { padding-block: var(--espacoSecao); }
.formacaoGrade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaco6); }
.formacaoApoio { color: var(--corGrafiteTexto); margin-block-start: var(--espaco3); }
.linhaTempo { list-style: none; margin: 0; position: relative; padding-inline-start: var(--espaco5); --fluxoEspaco: var(--espaco5); }
.linhaTempo::before {
  content: "";
  position: absolute;
  inset-block: var(--espaco2);
  inset-inline-start: calc(var(--pontoLinhaTempo) / 2 - var(--espessuraLinhaTempo) / 2);
  inline-size: var(--espessuraLinhaTempo);
  background: var(--corPrata);
}
.linhaTempo li { position: relative; }
.linhaTempo li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--espaco5));
  inset-block-start: 0.5em;
  inline-size: var(--pontoLinhaTempo);
  block-size: var(--pontoLinhaTempo);
  border-radius: var(--raioPilula);
  background: var(--corVerde);
}
.linhaTempo strong { display: block; font-weight: 500; color: var(--corGrafite); }
.linhaTempo span { display: block; font-size: var(--tamanhoPequeno); font-weight: 500; color: var(--corGrafiteTexto); margin-block-start: var(--espaco1); }

.localSplit { display: grid; grid-template-columns: minmax(0, 1fr); }
.localTexto { padding: var(--espacoSecao) var(--margemLateral); --fluxoEspaco: var(--espaco4); }
.localTexto > * { max-inline-size: var(--larguraParagrafo); }
.localTexto p { text-wrap: pretty; }
.localHorario { display: flex; align-items: flex-start; gap: var(--espaco2); color: var(--corGrafiteTexto); }
.localHorario .icone { color: var(--corVerdeProfundo); margin-block-start: 0.35em; }
.localFoto { block-size: var(--alturaFotoLocal); overflow: hidden; background: var(--corPrataClara); }
.localFoto img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 35%; }

.chamadaFinal { padding-block: var(--espacoSecao); text-align: center; view-timeline-name: --chamadaFinal; }
/* O flutuante se recolhe enquanto a chamada final está na tela, para nunca cobrir o botão principal dela. Sem suporte a linha do tempo, a animação termina no estado visível. */
.paginaClara { timeline-scope: --chamadaFinal; }
.paginaClara .botaoFlutuante {
  animation: aparecerFlutuante 1ms linear both, recolherFlutuante 1ms linear both;
  animation-timeline: scroll(root block), --chamadaFinal;
  animation-range: 0 25vh, entry 0% exit 0%;
}
html:has(body.paginaClara) { scroll-padding-block-start: var(--alturaCabecalho); }
.paginaClara .botaoFlutuante:focus-visible { box-shadow: 0 0 0 3px var(--corBranco), var(--sombraSuave); }
@media (prefers-reduced-motion: reduce) {
  .paginaClara .botaoFlutuante { animation-name: aparecerFlutuante, recolherFlutuanteEstatico; }
}
@keyframes recolherFlutuanteEstatico {
  12%, 99% { visibility: hidden; }
}
@keyframes recolherFlutuante {
  from { translate: 0 0; }
  12%, 99% { translate: 0 calc(100% + var(--margemFlutuante) + var(--tamanhoFlutuante)); visibility: hidden; }
  to { translate: 0 0; }
}
.chamadaFinal .container { display: grid; justify-items: center; gap: var(--espaco4); }
.chamadaFinal p { max-inline-size: 48ch; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .surgeAoRolar {
      animation: surgir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

@media (min-width: 48em) {
  .cabecalhoClaro .menuLista { background: color-mix(in srgb, var(--corPrataClara) 85%, transparent); }
  .cabecalhoClaro .menuLista a:not(.botaoPilula) { color: var(--corGrafiteTexto); }
  .cabecalhoClaro .menuLista a:not(.botaoPilula):hover, .cabecalhoClaro .menuLista a[aria-current="page"] { color: var(--corVerdeProfundo); }
  .cabecalhoClaro .menuLista .botaoPilula { color: var(--corGrafite); }
}

@media (min-width: 64em) {
  .sobreAbertura { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .sobreFoto {
    position: sticky;
    inset-block-start: var(--alturaCabecalho);
    align-self: start;
    block-size: calc(100svh - var(--alturaCabecalho));
  }

  .formacaoGrade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espaco7); }
  .localSplit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .localFoto { block-size: auto; min-block-size: var(--alturaFotoLocalDesktop); }
  .localTexto { align-self: center; }
}

/* 16. Fallback da Inter com métricas ajustadas, para o texto não pular quando a fonte hospedada chega (CLS zero) */
@font-face {
  font-family: "InterFallbackArial";
  src: local("Arial");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "InterFallbackRoboto";
  src: local("Roboto");
  size-adjust: 100.3%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "InterFallbackDejaVu";
  src: local("DejaVu Sans");
  size-adjust: 91%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
:root { --fonteTexto: "Inter", "InterFallbackArial", "InterFallbackRoboto", "InterFallbackDejaVu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* 17. Home, seções claras: atendimentos, como funciona, quem atende, planos, dúvidas e chamada final. Utilitários compartilhados entre páginas. */
:root {
  --larguraFaq: 48rem;
  --larguraFotoAutoridade: 28rem;
  --proporcaoFotoAutoridade: 3 / 4;
  --deslocamentoHover: 4px;
  /* 65ch rende 75 a 80 caracteres em Inter porque ch mede o zero; 54ch entrega os 65 caracteres do design system (medido no sprint 3) */
  --larguraParagrafo: 54ch;
}

/* Link de pular para o conteúdo: fora da tela até receber foco por teclado */
.pularConteudo {
  position: absolute;
  inset-block-start: var(--espaco2);
  inset-inline-start: var(--espaco2);
  z-index: 30;
  padding: var(--espaco2) var(--espaco3);
  background: var(--corBranco);
  color: var(--corGrafite);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--raioPequeno);
  box-shadow: var(--sombraSuave);
  min-block-size: var(--alvoToque);
  display: inline-flex;
  align-items: center;
  translate: 0 calc(-100% - var(--espaco6));
}
.pularConteudo:focus-visible { translate: 0 0; outline-color: var(--corVerdeProfundo); box-shadow: 0 0 0 5px var(--corBranco), var(--sombraSuave); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.secao[id] { scroll-margin-block-start: var(--espaco5); }

/* Composição das seções claras. O contêiner de cada seção vira contêiner de consulta: as grades contam colunas pelo espaço que recebem, não pela janela. */
.secao { padding-block: var(--espacoSecao); }
.secao > .container { container-type: inline-size; }
.secaoAlternada { background: var(--corPrataClara); }
.secaoCabeca { --fluxoEspaco: var(--espaco3); }
.secaoCabeca .tituloDisplay { margin-block-start: var(--espaco2); }
.secaoCabeca p { text-wrap: pretty; }
.paragrafoCapsula { font-size: var(--tamanhoDestaque); font-weight: 500; color: var(--corGrafite); }
.secaoAcoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco3) var(--espaco5);
  margin-block-start: var(--espaco6);
}
.secaoNota { font-size: var(--tamanhoPequeno); font-weight: 500; color: var(--corGrafiteTexto); }

/* Cards de atendimento */
.cardsGrade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco4);
  margin-block-start: var(--espaco6);
}
.cardServico {
  display: flex;
  flex-direction: column;
  gap: var(--espaco3);
  padding: var(--espaco5);
  background: var(--corBranco);
  border: var(--bordaSutil);
  border-radius: var(--raioGrande);
  transition: translate var(--duracaoHover) var(--curva), box-shadow var(--duracaoHover) var(--curva);
}
.cardServico > .icone { inline-size: var(--iconeCard); block-size: var(--iconeCard); color: var(--corVerdeProfundo); }
.cardServico h3 { text-wrap: balance; overflow-wrap: anywhere; }
.cardServico p { text-wrap: pretty; }
.cardServico .botaoSecundario { margin-block-start: auto; align-self: flex-start; }
.cardServico:hover { translate: 0 calc(-1 * var(--deslocamentoHover)); box-shadow: var(--sombraSuave); }
.cardServico:has(:focus-visible) { box-shadow: var(--sombraSuave); }
/* Quatro cards: um, dois ou quatro por linha, nunca três mais um órfão */
@container (min-width: 34rem) { .cardsGrade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 66rem) { .cardsGrade { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cardServico { padding: var(--espaco4); } }

/* Passos do acompanhamento */
.passos {
  display: grid;
  list-style: none;
  padding-inline-start: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco5) var(--espaco4);
  margin-block-start: var(--espaco6);
}
@container (min-width: 34rem) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 60rem) { .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.passo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco2);
  padding-block-start: var(--espaco4);
  border-block-start: 1px solid var(--corPrata);
}
.passoNumero {
  font-family: var(--fonteDisplay);
  font-weight: 400;
  font-size: var(--tamanhoHeroApoio);
  line-height: var(--alturaLinhaDisplay);
  letter-spacing: 0.02em;
  color: var(--corVerdeProfundo);
}
.passo h3 { text-wrap: balance; }
.passo p { text-wrap: pretty; }

/* Quem atende: foto real e texto, números reaproveitados da página Sobre */
.autoridadeGrade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco6);
  align-items: center;
}
.autoridadeFoto {
  inline-size: 100%;
  max-inline-size: var(--larguraFotoAutoridade);
  aspect-ratio: var(--proporcaoFotoAutoridade);
  overflow: hidden;
  border-radius: var(--raioGrande);
  background: var(--corPrata);
}
.autoridadeFoto picture { block-size: 100%; }
.autoridadeFoto img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 20%; }
.autoridadeTexto { --fluxoEspaco: var(--espaco3); }
.autoridadeTexto .tituloDisplay { margin-block-start: var(--espaco2); }
.autoridadeTexto p { text-wrap: pretty; }
.autoridadeTexto .numerosGrade { margin-block-start: var(--espaco6); }
.autoridadeTexto .secaoAcoes { margin-block-start: var(--espaco5); }

/* Planos e valores */
.planosGrade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco4);
  margin-block-start: var(--espaco6);
}
.cardPlano {
  display: flex;
  flex-direction: column;
  gap: var(--espaco2);
  padding: var(--espaco5);
  background: var(--corBranco);
  border: 1px solid var(--corPrata);
  border-radius: var(--raioGrande);
}
.cardPlano h3 { font-size: var(--tamanhoCorpo); font-weight: 600; }
.planoValor {
  font-family: var(--fonteDisplay);
  font-weight: 400;
  font-size: var(--tamanhoHeroApoio);
  line-height: var(--alturaLinhaDisplay);
  letter-spacing: 0.02em;
  color: var(--corGrafite);
}
.planoPeriodo { font-size: var(--tamanhoPequeno); font-weight: 500; color: var(--corVerdeProfundo); }
.cardPlano > p:last-child { margin-block-start: var(--espaco2); text-wrap: pretty; }
/* Três formatos lado a lado a partir de 48rem de contêiner (sprint 6: em 40rem o tablet abria três colunas de 214px e o card sem valor quebrava em três linhas); abaixo disso empilham, para nunca sobrar um card sozinho */
@container (min-width: 48rem) { .planosGrade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cardPlano { padding: var(--espaco4); } }
@container (min-width: 60rem) { .cardPlano { padding: var(--espaco5); } }

/* Dúvidas frequentes: details e summary nativos, ícone de mais que vira menos */
.faqLista {
  max-inline-size: var(--larguraFaq);
  margin-block-start: var(--espaco6);
  border-block-start: 1px solid var(--corPrata);
}
.faqItem { border-block-end: 1px solid var(--corPrata); }
/* Até o tablet a lista deixa folga à direita para o flutuante não cobrir o ícone de abrir */
@media (max-width: 63.99em) {
  .faqLista { padding-inline-end: calc(var(--tamanhoFlutuante) + var(--margemFlutuante) - var(--margemLateral)); }
}
.faqItem summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco3);
  min-block-size: var(--alvoToque);
  padding-block: var(--espaco3);
  font-size: var(--tamanhoDestaque);
  font-weight: 600;
  line-height: var(--alturaLinhaTitulo);
  color: var(--corGrafite);
  cursor: pointer;
  list-style: none;
  transition: color var(--duracaoHover) var(--curva);
}
.faqItem summary > span { min-inline-size: 0; overflow-wrap: anywhere; text-wrap: balance; }
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem summary:hover { color: var(--corVerdeProfundo); }
.faqItem summary:focus-visible { outline-offset: 0; }
.faqIcone { color: var(--corVerdeProfundo); }
.faqIcone path { transition: rotate var(--duracaoHover) var(--curva), opacity var(--duracaoHover) var(--curva); transform-origin: center; transform-box: fill-box; }
.faqItem[open] .faqIconeVertical { rotate: 90deg; opacity: 0; }
.faqItem p { padding-block: 0 var(--espaco4); text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  .faqItem { interpolate-size: allow-keywords; }
  .faqItem::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--duracaoEntrada) var(--curva), content-visibility var(--duracaoEntrada) allow-discrete;
  }
  .faqItem[open]::details-content { block-size: auto; }
}

/* O flutuante se recolhe na chamada final em qualquer página, não só na Sobre (mesma mecânica da seção 15) */
body { timeline-scope: --chamadaFinal; }
.botaoFlutuante {
  animation: aparecerFlutuante 1ms linear both, recolherFlutuante 1ms linear both;
  animation-timeline: scroll(root block), --chamadaFinal;
  animation-range: 0 25vh, entry 0% exit 0%;
}
.botaoFlutuante:focus-visible { box-shadow: 0 0 0 3px var(--corBranco), var(--sombraSuave); }
@media (prefers-reduced-motion: reduce) {
  .botaoFlutuante { animation-name: aparecerFlutuante, recolherFlutuanteEstatico; }
}

.chamadaFinal p { text-wrap: balance; }

/* Entrada das seções sem esmaecimento: com a linha do tempo de visualização o bloco fica parado em opacidade baixa enquanto cruza a dobra, e o texto perde contraste ali. Só o deslocamento anima. */
@keyframes surgirDeslocando {
  from { translate: 0 var(--deslocamentoEntrada); }
  to { translate: 0 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* A faixa começa mais tarde que a do sprint 2 (era entrada de 0% a 35%) para a acomodação terminar com o título já na zona de leitura, e não no rodapé da janela, onde ninguém via. */
    /* Quem desliza é o conteúdo, não a seção: deslocando a seção inteira abria uma faixa do fundo da página entre ela e a anterior, visível na única costura de escuro para claro. O fundo fica parado e a linha do tempo do flutuante, que nasce na chamada final, não muda. */
    .surgeAoRolar { animation-name: none; }
    .surgeAoRolar > .container {
      animation: surgirDeslocando linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 60%;
    }
    /* A seção Local da página Sobre põe texto e foto direto na seção, sem contêiner, então ela mesma continua sendo quem desliza. Ali as duas seções vizinhas são claras e não existe costura para aparecer. */
    .localSplit.surgeAoRolar { animation-name: surgirDeslocando; animation-range: entry 20% entry 60%; }
  }
}

@media (min-width: 64em) {
  .autoridadeGrade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espaco7); }
  .autoridadeFoto { max-inline-size: none; }
  .secaoCabeca { max-inline-size: 62ch; }
}

/* 18. Páginas internas do sprint 4: topo de página, coluna de leitura, grupos de perguntas, contato com formulário e estado vazio. */
:root {
  --alturaCampo: 48px;
  --larguraFormulario: 34rem;
  --iconeVazio: 40px;
}

/* Topo de página interna sem foto: trilha, rótulo, H1 e cápsula. Fundo claro, como toda página que não é a home. */
.paginaTopo { padding-block: var(--espaco6) var(--espacoSecao); }
.paginaTopo > .container { container-type: inline-size; }
.paginaTopoTexto { --fluxoEspaco: var(--espaco3); margin-block-start: var(--espaco5); }
.paginaTopoTexto .secaoAcoes { margin-block-start: var(--espaco5); }
.tituloPagina {
  font-family: var(--fonteDisplay);
  font-weight: 400;
  font-size: var(--tamanhoTituloPagina);
  line-height: var(--alturaLinhaDisplay);
  letter-spacing: 0.01em;
  color: var(--corGrafite);
  text-wrap: balance;
  max-inline-size: 26ch;
  margin-block-start: var(--espaco2);
}
/* A cápsula é tamanhoDestaque, e ch mede o zero da fonte do próprio elemento: os mesmos 54ch do corpo renderiam 23% mais largo. 50ch aqui devolve a mesma medida da cápsula da home. */
.paginaTopo .paragrafoCapsula { max-inline-size: 50ch; text-wrap: pretty; }

/* Conteúdo corrido das páginas de serviço: uma coluna de leitura, títulos e parágrafos alternando. */
.colunaLeitura { max-inline-size: var(--larguraParagrafo); --fluxoEspaco: var(--espaco3); }
.colunaLeitura .tituloDisplay { margin-block-start: var(--espaco6); }
.colunaLeitura > .tituloDisplay:first-child { margin-block-start: 0; }
.colunaLeitura p { text-wrap: pretty; }

/* Título de grupo em Inter, para o que é subtítulo e não título de impacto. */
.tituloGrupo {
  font-size: var(--tamanhoH3);
  font-weight: 600;
  line-height: var(--alturaLinhaTitulo);
  color: var(--corGrafite);
  text-wrap: balance;
}

/* Perguntas agrupadas por assunto na página de FAQ. */
.faqGrupos {
  display: grid;
  gap: var(--espaco7);
  max-inline-size: var(--larguraFaq);
  margin-block-start: var(--espaco6);
}
.faqGrupo .faqLista { margin-block-start: var(--espaco4); }
/* O grupo não é contêiner de fluxo, então o parágrafo de abertura precisa do próprio respiro. */
.faqGrupo .tituloGrupo + p { margin-block-start: var(--espaco3); }

/* Contato: dados do consultório e formulário lado a lado quando há espaço. */
.contatoGrade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco7);
}
.contatoDados { --fluxoEspaco: var(--espaco3); }
.contatoDados .tituloDisplay { margin-block-start: var(--espaco2); }
.contatoDados p { text-wrap: pretty; }
.contatoLista { --fluxoEspaco: var(--espaco3); font-style: normal; margin-block-start: var(--espaco5); }
.contatoDados .secaoAcoes { margin-block-start: var(--espaco5); }
.contatoFormulario {
  padding: var(--espaco5);
  background: var(--corBranco);
  border: 1px solid var(--corPrata);
  border-radius: var(--raioGrande);
  max-inline-size: var(--larguraFormulario);
}
.contatoFormulario > p { margin-block-start: var(--espaco3); text-wrap: pretty; }

/* Formulário: rótulo visível sempre, campo de 48px, anel de foco no verde profundo. */
.formulario { display: grid; gap: var(--espaco4); margin-block-start: var(--espaco5); }
.campo { display: grid; gap: var(--espaco2); }
.campo label { font-size: var(--tamanhoPequeno); font-weight: 600; color: var(--corGrafite); }
.campo input,
.campo select,
.campo textarea {
  inline-size: 100%;
  min-block-size: var(--alturaCampo);
  padding: var(--espaco2) var(--espaco3);
  font-family: inherit;
  font-size: var(--tamanhoCorpo);
  line-height: var(--alturaLinhaCorpo);
  color: var(--corGrafite);
  background: var(--corBranco);
  border: 1px solid var(--corPrata);
  border-radius: var(--raioMedio);
  transition: border-color var(--duracaoHover) var(--curva);
}
.campo textarea { min-block-size: calc(var(--alturaCampo) * 2); resize: vertical; }
/* corPrataEscura dá 2,96 sobre branco e não passa nos 4,5 da tabela; a mistura fica dentro da paleta e passa. */
.campo input::placeholder,
.campo textarea::placeholder { color: color-mix(in srgb, var(--corGrafiteTexto) 72%, var(--corBranco)); }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--corGrafiteTexto); }
.campo :is(input, select, textarea):focus-visible { border-color: var(--corVerdeProfundo); }
.campoNota { font-size: var(--tamanhoPequeno); font-weight: 500; color: var(--corGrafiteTexto); text-wrap: pretty; }
.formulario .botaoPrincipal { justify-self: start; }
/* Em espera o botão não perde contraste: quem avisa é a nota em role status. aria-disabled no lugar de disabled mantém o foco onde estava. */
/* Em espera o botão vira branco sobre corVerdeProfundo, que dá 5,37 de contraste. O verde escuro com texto grafite daria só 4,60 e a franja de subpixel caía abaixo do mínimo. */
.formulario .botaoPrincipal[aria-disabled="true"] { background: var(--corVerdeProfundo); color: var(--corBranco); cursor: progress; transition: none; }
.campo :is(input, select, textarea) { scroll-margin-block: var(--espaco6); }

/* Estado vazio: nunca área em branco. Título, orientação e caminho de saída. */
.estadoVazio {
  display: grid;
  justify-items: start;
  gap: var(--espaco3);
  max-inline-size: var(--larguraParagrafo);
  margin-inline: auto;
  padding: var(--espaco6) var(--espaco5);
  background: var(--corBranco);
  border: 1px dashed var(--corPrata);
  border-radius: var(--raioGrande);
}
.estadoVazio > .icone { inline-size: var(--iconeVazio); block-size: var(--iconeVazio); color: var(--corVerdeProfundo); }
.estadoVazio p { text-wrap: pretty; }
.estadoVazio .secaoAcoes { margin-block-start: var(--espaco4); }

/* Cinco atendimentos numa grade de quatro colunas deixariam um card órfão. A consulta online, que atravessa os outros quatro, ocupa a linha inteira e vira leitura horizontal quando há espaço. */
.cardServicoLargo { grid-column: 1 / -1; }
@container (min-width: 66rem) {
  .cardServicoLargo {
    display: grid;
    grid-template-columns: auto minmax(0, 18rem) minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--espaco4);
  }
  .cardServicoLargo > .icone { margin-block-start: var(--espaco1); }
  .cardServicoLargo .botaoSecundario { margin-block-start: 0; align-self: start; }
}

/* Media query, e não consulta de contêiner, porque .contatoGrade é o próprio .container e já recebe container-type: um elemento não é estilizado pela consulta do contêiner que ele mesmo cria. Voltaria a ser consulta se a grade virasse filha do contêiner. */
@media (min-width: 64em) {
  .contatoGrade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* Folga do flutuante, mesma mecânica da lista de perguntas: enquanto o botão fixo está na tela, nenhum controle pode terminar embaixo dele. Vale até o tablet, porque a partir de 64em a coluna já não alcança o canto. */
@media (max-width: 63.99em) {
  .contatoFormulario,
  .estadoVazio,
  .secaoAcoes { padding-inline-end: calc(var(--tamanhoFlutuante) + var(--margemFlutuante) - var(--margemLateral)); }
  /* A folga é reservada uma vez por cartão. Quem está dentro dele não reserva de novo, senão o recuo dobra e o campo encolhe. */
  .contatoFormulario .secaoAcoes,
  .contatoFormulario .formulario,
  .estadoVazio .secaoAcoes { padding-inline-end: 0; }
}

/* Palavra sem espaço não pode furar a caixa fora dos títulos, que já estão protegidos no reset. */
.paragrafoCapsula,
.colunaLeitura p,
.contatoLista span,
.contatoLista a,
.campo label,
.campoNota,
.estadoVazio p,
.trilha a { overflow-wrap: anywhere; }

/* 19. Sprint 5: a lista de presença digital da Sobre reserva a coluna do flutuante, como o formulário de contato (seção 18), para nenhum link terminar embaixo do botão em 320. */
@media (max-width: 63.99em) {
  .presencaLista { padding-inline-end: calc(var(--tamanhoFlutuante) + var(--margemFlutuante) - var(--margemLateral)); }
}

/* 20. Sprint 6: o flutuante focado por teclado não se recolhe nem se esconde, senão o foco cai no body quando a chamada final entra na tela durante a rolagem suave (M1 do semanticsQa, sprint 5). O card de formato sem valor (trimestral e anual, pendência 2) só alinha a base com os vizinhos. */
.botaoFlutuante:focus-visible { animation-name: none; }
.planoValorTexto { font-size: var(--tamanhoDestaque); font-weight: 600; line-height: var(--alturaLinhaTitulo); color: var(--corGrafite); text-wrap: balance; }
.cardPlanoSemValor > .planoPeriodo + p { margin-block-start: var(--espaco2); text-wrap: pretty; }
.cardPlanoSemValor > .botaoSecundario { margin-block-start: auto; padding-block-start: var(--espaco3); align-self: flex-start; min-block-size: var(--alvoToque); }
/* O link do card sem valor não pode terminar embaixo do flutuante: reserva da coluna abaixo de 64em, como o formulário e a lista de presença. */
@media (max-width: 63.99em) {
  .cardPlanoSemValor { padding-inline-end: calc(var(--tamanhoFlutuante) + var(--margemFlutuante) - var(--margemLateral)); }
}
/* Acréscimos da rodada 2 do sprint 6: nome do formato balanceado (viúva em "presencial"), intro dos grupos da FAQ sem viúva, anel de foco do link do card dentro da folga do flutuante. */
.cardPlano h3 { text-wrap: balance; }
.faqGrupo > p { text-wrap: pretty; }
.cardPlanoSemValor > .botaoSecundario:focus-visible { outline-offset: 0; }

/* 21. Sprint 7: seção de formatos e valores da home reescrita por completo, (a faixa do que está incluso em todos saiu em 11 09 2026, quando as listas completas entraram nos cards). Desde o sprint 9 (11 09 2026) a grade tem três planos por duração (mensal, semestral, anual); cardFormatoContinuo e formatoValorGrupo saíram junto com o card duplo de trimestral e anual. Nos cards o marcador visual segue por hairline e peso tipográfico. Subgrid de seis linhas (o parágrafo de contexto saiu em 11 09 2026 a pedido do André) alinha nome, valor, lista e botão entre os três cards a partir de 56rem de contêiner, com recuo por flexbox em navegador sem subgrid. */
.formatosGrade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco5);
  margin-block-start: var(--espaco6);
}
.cardFormato {
  display: flex;
  flex-direction: column;
  gap: var(--espaco3);
  padding: var(--espaco5);
  background: var(--corBranco);
  border: 1px solid var(--corPrata);
  border-radius: var(--raioGrande);
}
.formatoRotulo {
  font-size: var(--tamanhoPequeno);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corVerdeProfundo);
}
.formatoNome { font-size: var(--tamanhoCorpo); font-weight: 600; text-wrap: balance; }
.formatoValorNumero {
  font-family: var(--fonteDisplay);
  font-weight: 400;
  font-size: var(--tamanhoValorFormato);
  line-height: var(--alturaLinhaDisplay);
  letter-spacing: 0.02em;
  color: var(--corGrafite);
}
.formatoSubtitulo {
  font-size: var(--tamanhoPequeno);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corGrafiteTexto);
  text-wrap: balance;
}
.formatoLista { display: flex; flex-direction: column; gap: var(--espaco2); font-size: var(--tamanhoPequeno); }
/* Tamanho na ul, não no li, para o teto em ch da seção 24 resolver na fonte pequena (typographyQa, rodada 10b). */
.formatoLista li { line-height: var(--alturaLinhaCorpo); color: var(--corGrafiteTexto); text-wrap: pretty; }
.formatoBotao { margin-block-start: auto; padding-block-start: var(--espaco2); }

/* Três cards lado a lado a partir de 56rem de contêiner, com subgrid de linhas para rótulo, nome, valor, subtítulo, lista e botão ficarem na mesma altura entre os três. Abaixo disso, empilham em coluna única. */
@container (min-width: 56rem) {
  .formatosGrade { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); }
  .cardFormato { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; gap: var(--espaco3); }
  .formatoRotulo { grid-row: 1; }
  .formatoNome { grid-row: 2; }
  .formatoValor { grid-row: 3; }
  .formatoSubtitulo { grid-row: 4; }
  .formatoLista { grid-row: 5; }
  .formatoBotao { grid-row: 6; align-self: end; }
}
@supports not (grid-template-rows: subgrid) {
  @container (min-width: 56rem) {
    .cardFormato { display: flex; flex-direction: column; }
  }
}

.formatoTransparencia {
  text-align: center;
  margin-inline: auto;
  margin-block-start: var(--espaco6);
  font-size: var(--tamanhoPequeno);
  color: var(--corGrafiteTexto);
  max-inline-size: var(--larguraParagrafo);
  text-wrap: pretty;
}

/* Correção pontual, 07 09 2026: em Quem atende, a partir de 64em a foto sem teto de largura cresce em proporção retrato 3 por 4 e passa a ser mais alta que o bloco de texto na maioria das larguras de desktop (a partir de aproximadamente 1422px). Com align items center herdado da regra base, sobrava vazio acima e abaixo do texto. Alinhar pelo topo faz o vazio sobrar só depois do botão, sem interromper a leitura. Abaixo de 64em a grade é coluna única e esta regra não tem efeito. */
@media (min-width: 64em) {
  .autoridadeGrade { align-items: start; }
}

/* 22. Sprint 9, 11 09 2026: grade de formatos com três planos por duração (mensal, semestral, anual) e acabamento novo sobre a base da seção 21. O que entra: sombra em duas camadas no hover (token sombraCamadas, só preto a 8%, a mesma opacidade da sombraSuave), marcador de lista por ícone de check desde 11 09 2026 (antes ponto de 8px), algarismos tabulares no valor, e o card anual (cardFormatoDestaque) com borda em degradê verde desenhada por duas camadas de fundo (interior branco no padding box, degradê no border box, borda transparente deixa só o anel de 1px). Transição só de translate e sombra, desligada em movimento reduzido. Nenhuma cor fora das onze. */
:root { --sombraCamadas: 0 1px 2px rgb(0 0 0 / 8%), 0 8px 24px rgb(0 0 0 / 8%); }
.cardFormato { overflow-wrap: anywhere; transition: translate var(--duracaoHover) var(--curva), box-shadow var(--duracaoHover) var(--curva); }
.cardFormato:hover { translate: 0 calc(-1 * var(--deslocamentoHover)); }
.cardFormato:hover,
.cardFormato:has(:focus-visible) { box-shadow: var(--sombraCamadas); }
.cardFormatoDestaque {
  border-color: transparent;
  background:
    linear-gradient(var(--corBranco), var(--corBranco)) padding-box,
    linear-gradient(160deg, var(--corVerdeClaro), var(--corVerde) 45%, var(--corVerdeProfundo)) border-box;
}
/* O link do card não estica até a borda do conteúdo: a área clicável fica do tamanho do texto, longe do flutuante em coluna única (recomendação do layoutGuard, sprint 9). Nas três colunas a última linha do subgrid tem a altura do próprio link, então início e fim coincidem. */
.formatoBotao { align-self: flex-start; justify-self: start; }
.formatoValorNumero { font-variant-numeric: tabular-nums; }
.formatoLista li {
  display: grid;
  grid-template-columns: var(--espaco3) minmax(0, 1fr);
  column-gap: var(--espaco2);
  align-items: start;
}
/* Marcador de check (Phosphor check, regular, desenhado por máscara para a cor sair do token): padrão de tabela de preço, diz "está incluso" sem texto (11 09 2026, listas completas nos cards). */
.formatoLista li::before {
  content: "";
  inline-size: var(--espaco3);
  block-size: var(--espaco3);
  background-color: var(--corVerdeProfundo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
  margin-block-start: calc((var(--tamanhoPequeno) * var(--alturaLinhaCorpo) - var(--espaco3)) / 2);
  justify-self: start;
}
@media (prefers-reduced-motion: reduce) {
  .cardFormato { transition: none; }
  .cardFormato:hover { translate: none; }
}

/* 23. 11 09 2026, pedido direto do André: a seção Formatos e valores da home fica escura como o hero (segunda seção escura do site; a regra 10 do CLAUDE.md passou a permitir duas). Mesmo fundo do hero (radial de corGrafiteClaro a corGrafite) e a mesma textura de pontos, sem faixa nem foto. Os cards continuam brancos, com a própria borda; o que muda de cor é só o que está direto sobre o fundo: título em degradê de prata (o mesmo do hero), texto de apoio (formatoTransparencia) em corPrata e frase formatoApoio em corPrataClara; a faixa "Em todos os planos" saiu em 11 09 2026. Rótulo e anel de foco já vêm da classe emFundoEscuro. Nenhuma cor nova. */
.secaoEscura {
  position: relative;
  isolation: isolate;
  color: var(--corPrata);
  background: radial-gradient(ellipse 80% 70% at 35% 45%, var(--corGrafiteClaro), var(--corGrafite) 75%);
}
.secaoEscura::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--corBranco) 7%, transparent) 1px, transparent 1.2px);
  background-size: var(--passoTextura) var(--passoTextura);
  pointer-events: none;
}
.secaoEscura .tituloDisplay { color: var(--corPrataClara); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .secaoEscura .tituloDisplay {
    background: var(--degradePrata);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.secaoEscura .formatoTransparencia { color: var(--corPrata); }
/* Dentro dos cards brancos o anel de foco volta a corVerdeProfundo, porque corVerde sobre branco dá 2,9 de contraste. */
.secaoEscura .cardFormato :focus-visible { outline-color: var(--corVerdeProfundo); }
/* Os links dos cards brancos voltam ao grafite; a regra do emFundoEscuro para botão secundário vale só fora dos cards. */
.secaoEscura .cardFormato .botaoSecundario { color: var(--corGrafite); }

/* 24. Sprint 10, 11 09 2026: redesenho da seção Formatos e valores da home sobre a base das seções 21 a 23, com a seção ainda escura (regra 10 do CLAUDE.md, confirmada pelo André neste sprint) e o destaque ainda no Anual (idem). Parte um, faixa "Em todos os planos você tem": cada item ganha um ícone Phosphor light inline (traço fino, monocromático, cor herdada) à esquerda, em corVerdeClaro sobre o fundo escuro; a grade passa a repeat com auto fit, com o mínimo de coluna preso em metade do contêiner menos o vão, o que trava em duas colunas no desktop e uma no celular sem depender de ponto de quebra (a consulta de contêiner de 40rem da seção 21 saiu). Parte dois, cards: nome do plano em Bebas Neue no token novo tamanhoNomeFormato (o único tamanho entre tamanhoH3 e tamanhoH2 que faltava; máximo abaixo de 2,5 vezes o mínimo), bloco do valor isolado por duas hairlines em corPrataClara com respiro de espaco3 acima e abaixo, subtítulo Como funciona com espaco2 a mais, padding vertical em espaco6 nas três colunas. Texto de apoio com text wrap pretty (a seção 21 só tinha balance no nome). hyphens none no body inteiro, por regra do sprint: nenhum navegador pode inserir hífen de quebra em texto visível. Nenhuma fonte nova (o roteiro citava Fraunces e Instrument Serif; o design system já define Bebas Neue e Inter). Nenhuma cor fora das onze. */
:root {
  --tamanhoNomeFormato: clamp(1.6rem, 1.352rem + 1.061vw, 2.2rem);
  /* Número do valor: piso maior que o do tamanhoHeroApoio para o número ser o herói do card também no celular (38px em 375 contra 26px do nome); teto igual. Razão 1,5. */
  --tamanhoValorFormato: clamp(2.4rem, 1.903rem + 2.122vw, 3.6rem);
}
body { hyphens: none; }

.cardFormato { gap: var(--espaco3); }
.formatoNome {
  font-family: var(--fonteDisplay);
  font-weight: 400;
  font-size: var(--tamanhoNomeFormato);
  line-height: var(--alturaLinhaDisplay);
  letter-spacing: 0.02em;
  color: var(--corGrafite);
}
/* Reserva do flutuante em coluna única: saiu do padding do card (que deixava as hairlines do valor curtas à direita) e passou a margem do botão, que é o único elemento que não pode terminar embaixo do flutuante; o link tem a largura do texto e alinha ao início, então a margem só limita até onde um texto longo poderia ir. */
@media (max-width: 63.99em) {
  /* A reserva desconta o padding do card, que já afasta o link da borda; espaco2 de folga (responsiveQa, rodada 10b). */
  .formatoBotao { margin-inline-end: calc(var(--tamanhoFlutuante) + var(--margemFlutuante) - var(--margemLateral) - var(--espaco5) + var(--espaco2)); }
}
@container (min-width: 56rem) {
  .formatoBotao { margin-inline-end: 0; }
}
.formatoSubtitulo { margin-block-start: var(--espaco2); line-height: var(--alturaLinhaTitulo); }
/* Tetos de medida (typographyQa, sprint 10): a lista dos cards empilhados entre 700px e 56rem chegava a 88 caracteres por linha; a frase da faixa a 77 em 1440. O teto da lista soma a coluna do marcador e o vão. */
.formatoLista { max-inline-size: calc(var(--larguraParagrafo) + var(--espaco3) + var(--espaco2)); }
@container (min-width: 56rem) {
  .cardFormato { padding-block: var(--espaco6); }
}
/* Pedido do André em 11 09 2026: o título "Quanto custa a consulta com nutricionista?" fica em uma linha no desktop. O teto de 62ch da secaoCabeca (seção 16, a partir de 64em) o partia em duas; esta cabeça fica sem teto nessa faixa. Abaixo de 64em o título quebra como qualquer outro, porque em 375 não cabe em uma linha. */
@media (min-width: 64em) {
  .secaoCabecaLarga { max-inline-size: none; }
}
/* Frase de apoio abaixo dos cards de preço (texto do André, 11 09 2026): fala do processo semanal, não de resultado. Mesmo tamanho e peso da cápsula (tamanhoDestaque, Inter 500), em corPrataClara sobre o fundo escuro, medida de 50ch como a cápsula do topo de página. */
.formatoApoio {
  text-align: center;
  margin-inline: auto;
  overflow-wrap: anywhere;
  margin-block-start: var(--espaco5);
  max-inline-size: 50ch;
  font-size: var(--tamanhoDestaque);
  font-weight: 500;
  line-height: var(--alturaLinhaCorpo);
  color: var(--corPrataClara);
  text-wrap: pretty;
}

/* 25. 11 09 2026, pedido do André ("como fazer o cliente ver melhor"), com pesquisa em páginas de preço (Figma, Uxcel, E Commerce Brasil): o número da parcela é o herói, a quantidade de parcelas vira uma etiqueta curta que se lê de relance, o total fica visível mas neutro, e os três cards seguem o mesmo formato para comparar sem esforço. Bloco: linha do montante (etiqueta em pílula, R$ pequeno, número em Bebas) e, abaixo, o total em cinza. Etiqueta em corVerdeProfundo sobre corPrataClara (contraste 4,8), o único verde do bloco; R$ e número em grafite. As regras antigas de moeda, período e total das seções 21, 22 e 24 saíram e vivem só aqui. */
.formatoValor {
  display: grid;
  max-inline-size: none;
  row-gap: var(--espaco2);
  align-content: center;
  padding-block: var(--espaco3);
  border-block: 1px solid var(--corPrataClara);
}
.formatoValorMontante {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--espaco2);
  row-gap: var(--espaco1);
}
.formatoValorParcela {
  align-self: center;
  padding-block: var(--espaco1);
  padding-inline: var(--espaco2);
  border-radius: var(--raioPilula);
  background: var(--corPrataClara);
  font-size: var(--tamanhoPequeno);
  font-weight: 600;
  line-height: var(--alturaLinhaTitulo);
  letter-spacing: 0.02em;
  color: var(--corVerdeProfundo);
  white-space: nowrap;
}
.formatoValorMoeda {
  font-size: var(--tamanhoDestaque);
  font-weight: 600;
  line-height: var(--alturaLinhaTitulo);
  color: var(--corGrafiteTexto);
}
.formatoValorTotal {
  font-size: var(--tamanhoPequeno);
  font-weight: 500;
  line-height: var(--alturaLinhaTitulo);
  color: var(--corGrafiteTexto);
}
/* Botão principal de Formatos e valores centrado (pedido do André, 11 09 2026). Abaixo de 64em a reserva do flutuante (seção 15) continua no padding direito, então o centro fica 28px à esquerda do centro da coluna; é o preço de não terminar embaixo do flutuante em 320. */
.secaoAcoesCentro { justify-content: center; }

/* 11 09 2026, pedido do André: seção Dúvidas frequentes da home centralizada. Cabeça, lista e ações centralizam; as respostas do FAQ seguem alinhadas ao início, porque texto corrido centralizado atrapalha a leitura, então só a moldura da seção centraliza. */
.secaoCentralizada .secaoCabeca { text-align: center; margin-inline: auto; }
.secaoCentralizada .faqLista { margin-inline: auto; }
.secaoCentralizada .secaoAcoes { justify-content: center; text-align: center; }