/* ==========================================================================
   components.css — componentes do sistema
   Botão, card, campo, badge, breadcrumb, accordion, citação, tabela,
   cabeçalho, rodapé, faixa de plantão, blog e slots de imagem.
   ========================================================================== */

/* ---------- Botão ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-toque);
  padding: 0 var(--e-4);
  font-family: var(--ff-corpo);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medio);
  line-height: var(--lh-h4);
  border: var(--borda) solid transparent;
  border-radius: var(--r-1);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}

.btn--primario { color: var(--n0); background: var(--c-grafite); border-color: var(--c-grafite); }
.btn--primario:hover { color: var(--n0); background: var(--n700); border-color: var(--n700); }

.btn--secundario { color: var(--c-sepia); background: transparent; border-color: var(--c-sepia); }
.btn--secundario:hover { color: var(--c-grafite); background: var(--n100); border-color: var(--c-grafite); }

.btn--texto { color: var(--c-ambar); background: transparent; padding: 0 var(--e-2); text-decoration: underline; }
.btn--texto:hover { color: var(--c-grafite); }

.btn--acento { color: var(--c-grafite); background: var(--c-ambar-claro); border-color: var(--c-ambar-claro); }
.btn--acento:hover { color: var(--c-grafite); background: var(--n0); border-color: var(--n0); }
/* secundário em seção escura: texto creme (16,15:1) e contorno --n400 (5,9:1 sobre grafite) */
.secao--escura .btn--secundario { color: var(--n50); border-color: var(--n400); }
.secao--escura .btn--secundario:hover { color: var(--c-grafite); background: var(--n50); border-color: var(--n50); }

.btn--plantao { color: var(--n0); background: var(--c-plantao); border-color: var(--c-plantao-acento); font-weight: var(--fw-forte); }
.btn--plantao:hover { color: var(--c-plantao); background: var(--c-plantao-acento); border-color: var(--c-plantao-acento); }

.btn--plantao-inverso { color: var(--c-plantao); background: var(--c-plantao-acento); border-color: var(--c-plantao-acento); font-weight: var(--fw-forte); }
.btn--plantao-inverso:hover { color: var(--c-plantao); background: var(--n0); border-color: var(--n0); }

.btn[disabled], .btn[aria-disabled="true"] {
  color: var(--n500);
  background: var(--n200);
  border-color: var(--n200);
  cursor: not-allowed;
}

.btn--flutuante {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  min-height: var(--altura-campo);
  border-radius: var(--r-pill);
  color: var(--c-grafite);
  background: var(--c-ambar-claro);
  border-color: var(--c-ambar-claro);
  box-shadow: var(--sombra-flutuante);
  z-index: var(--z-flutuante);
  gap: var(--e-2);
}
.btn--flutuante:hover { color: var(--c-grafite); background: var(--n0); border-color: var(--n0); }
/* abaixo de 1024px o WhatsApp já está no cabeçalho fixo */
@media (max-width: 1023px) { .btn--flutuante { display: none; } }
.btn--flutuante { transition: opacity var(--transicao), visibility var(--transicao), background var(--transicao); }
.btn--flutuante--oculto { opacity: 0; visibility: hidden; }
.btn__icone { width: var(--icone); height: var(--icone); flex: 0 0 auto; fill: currentColor; }

@media (max-width: 599px) {
  .btn--flutuante { width: var(--altura-campo); padding: 0; }
  .btn--flutuante__texto { display: none; }
}

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

.cabecalho { position: sticky; top: 0; z-index: var(--z-cabecalho); background: var(--c-grafite); border-bottom: var(--borda) solid var(--n800); }
.cabecalho__interno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding-top: var(--e-2b); padding-bottom: var(--e-2b); }

.marca { text-decoration: none; display: block; }
.marca__nome { display: block; font-family: var(--ff-titulo); font-size: var(--fs-marca); font-weight: var(--fw-forte); line-height: var(--lh-h4); color: var(--n50); }
.marca__sub { display: block; font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--c-ambar-claro); margin-top: var(--e-1); }

.cabecalho__acoes { display: flex; align-items: center; gap: var(--e-2); }
.botao-icone { display: inline-flex; align-items: center; justify-content: center; width: var(--altura-toque); height: var(--altura-toque); padding: 0; border: var(--borda) solid var(--n600); border-radius: var(--r-1); background: transparent; color: var(--n50); cursor: pointer; transition: background var(--transicao), border-color var(--transicao), color var(--transicao); }
.botao-icone svg { width: var(--icone); height: var(--icone); }
.botao-icone--whats { background: var(--c-ambar-claro); border-color: var(--c-ambar-claro); color: var(--c-grafite); }
.botao-icone--whats svg { fill: currentColor; }
.botao-icone--whats:hover { background: var(--n0); border-color: var(--n0); color: var(--c-grafite); }
.botao-icone--menu svg { fill: none; stroke: currentColor; stroke-width: var(--filete); }
.botao-icone--menu:hover { border-color: var(--n300); }
.icone-fechar { display: none; }
.cabecalho--aberto .icone-menu { display: none; }
.cabecalho--aberto .icone-fechar { display: block; }

/* celular e tablet: navegação em painel aberto pelo botão de menu */
.nav { display: none; flex-basis: 100%; flex-direction: column; padding: var(--e-2) 0 var(--e-4); border-top: var(--borda) solid var(--n800); }
.cabecalho--aberto .nav { display: flex; }
.nav a { display: flex; align-items: center; min-height: var(--e-7); font-family: var(--ff-titulo); font-size: var(--fs-menu); font-weight: var(--fw-medio); color: var(--n50); text-decoration: none; border-bottom: var(--borda) solid var(--n800); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-ambar-claro); }
.nav a.nav__cta { justify-content: center; min-height: var(--altura-toque); margin-top: var(--e-4); font-family: var(--ff-corpo); font-size: var(--fs-ui); color: var(--c-grafite); border-bottom: var(--borda) solid var(--c-ambar-claro); }
.nav a.nav__cta:hover { color: var(--c-grafite); border-bottom-color: var(--n0); }

@media (min-width: 1024px) {
  .cabecalho__acoes { display: none; }
  .nav { display: flex; flex-basis: auto; flex-direction: row; align-items: center; gap: var(--e-4); padding: 0; border-top: 0; }
  .nav a { min-height: var(--altura-toque); font-family: var(--ff-corpo); font-size: var(--fs-small); color: var(--n300); border-bottom: 0; }
  .nav a.nav__cta { margin: 0 0 0 var(--e-2); padding: 0 var(--e-4); }
}


/* ---------- Breadcrumb ---------- */

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--fs-small); padding-top: var(--e-3b); }
.breadcrumb__sep { color: var(--n500); }
.breadcrumb__atual { color: var(--n600); }
/* página que abre com retrato em plano: o corpo vira grafite, e cabeçalho, trilha e hero
   formam um plano só (todas as seções dessas páginas têm fundo próprio) */
body:has(main > .secao--plano:first-child) { background: var(--c-grafite); }
body:has(main > .secao--plano:first-child) .breadcrumb { --foco-cor: var(--c-ambar-claro); color: var(--n300); }
body:has(main > .secao--plano:first-child) .breadcrumb a { color: var(--c-ambar-claro); }   /* 7,61:1 */
body:has(main > .secao--plano:first-child) .breadcrumb__atual { color: var(--n300); }    /* 10,27:1 */
body:has(main > .secao--plano:first-child) .breadcrumb__sep { color: var(--n400); }     /* 5,9:1 */

/* ---------- Card ---------- */

.card {
  background: var(--n0);
  border: var(--borda) solid var(--n200);
  border-radius: var(--r-0);
  padding: var(--e-4);
}
@media (min-width: 600px) { .card { padding: var(--e-5); } }
.card--compacto { padding: var(--e-4); }

@media (min-width: 1024px) {
  .card { padding: var(--e-5b); }
  .card--compacto { padding: var(--e-5); }
}
.card--escuro { background: var(--c-grafite); border-color: var(--c-grafite); color: var(--n50); }
.card--escuro .card__texto { color: var(--n300); }
.card--escuro a:not(.btn) { color: var(--c-ambar-claro); }
.card--escuro a:not(.btn):hover { color: var(--n0); }
.card--alerta a:not(.btn) { color: var(--c-plantao-acento); }
.card--escuro h2, .card--escuro h3 { color: var(--n50); }
.card--alerta { background: var(--c-plantao); border-color: var(--c-plantao); color: var(--n0); }
.card--alerta h2 { color: var(--n0); margin-bottom: var(--e-2b); }
.card--alerta .eyebrow { color: var(--c-plantao-acento); }
.card--alerta .card__texto { color: var(--n300); }

a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { border-color: var(--n300); box-shadow: var(--sombra-card); color: inherit; }

.card__numero { font-family: var(--ff-titulo); font-variation-settings: var(--fvs-texto); font-size: var(--fs-h3); font-weight: var(--fw-numero); color: var(--c-ambar); margin-bottom: var(--e-3); }
.card__texto { color: var(--n700); margin-bottom: var(--e-3b); max-width: var(--medida-texto); }
.card h3 { margin-bottom: var(--e-2b); }
/* links soltos (fora de parágrafo) com alvo de toque do sistema */
:is(.card, .autora__dados) > a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--altura-toque); }
.grid--cards > .card:not(.artigo-card) { display: flex; flex-direction: column; align-items: flex-start; }
.grid--cards > .card:not(.artigo-card) > a:last-child { margin-top: auto; }

.card--pendencia { border-left: var(--filete-lateral) solid var(--c-ambar); border-color: var(--n300); border-left-color: var(--c-ambar); }

/* ---------- Campo ---------- */

.campo { display: block; margin-bottom: var(--e-3b); }
.rotulo { display: block; font-size: var(--fs-small); font-weight: var(--fw-medio); color: var(--n700); margin-bottom: var(--e-2); }

.entrada, .selecao, .area-texto {
  width: 100%;
  font-family: var(--ff-corpo);
  font-size: var(--fs-body);
  color: var(--c-grafite);
  background: var(--n0);
  border: var(--borda) solid var(--n300);
  border-radius: var(--r-1);
  padding: 0 var(--e-3);
  height: var(--altura-campo);
}
.area-texto { height: auto; padding: var(--e-2b) var(--e-3); line-height: var(--lh-small); resize: vertical; }
.entrada::placeholder, .area-texto::placeholder { color: var(--n500); }
.entrada:hover, .selecao:hover, .area-texto:hover { border-color: var(--c-sepia); }
.entrada:focus, .selecao:focus, .area-texto:focus { border-color: var(--c-grafite); }
.entrada[disabled], .selecao[disabled], .area-texto[disabled] { color: var(--n500); background: var(--n100); border-color: var(--n200); cursor: not-allowed; }
.entrada[aria-invalid="true"] { border-color: var(--c-erro); }
.erro-campo { font-size: var(--fs-small); color: var(--c-erro); margin-top: var(--e-2); }

.consentimento { display: flex; gap: var(--e-2b); align-items: flex-start; font-size: var(--fs-body); line-height: var(--lh-small); color: var(--n700); margin-bottom: var(--e-3b); }
.consentimento input { width: var(--e-3b); height: var(--e-3b); margin-top: var(--e-1); flex: 0 0 auto; accent-color: var(--c-sepia); }

.aviso-form { font-size: var(--fs-body); line-height: var(--lh-small); color: var(--n600); margin: var(--e-3) 0 0; }

/* ---------- Badge e chip ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--e-2) var(--e-2b);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medio);
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
  border-radius: var(--r-1);
  border: var(--borda) solid var(--n200);
  background: var(--n100);
  color: var(--n700);
}
.badge--acento { color: var(--c-ambar); background: var(--n0); border-color: var(--c-ambar); }
.badge--solido { color: var(--n0); background: var(--c-grafite); border-color: var(--c-grafite); }
.badge--plantao { color: var(--c-plantao-acento); background: var(--c-plantao); border-color: var(--c-plantao); }

.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5b); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--altura-toque);
  padding: 0 var(--e-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medio);
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
  color: var(--n700);
  background: var(--n0);
  border: var(--borda) solid var(--n300);
  border-radius: var(--r-1);
  text-decoration: none;
}
.chip:hover { color: var(--c-grafite); border-color: var(--c-grafite); }
.chip[aria-current="true"] { color: var(--n0); background: var(--c-grafite); border-color: var(--c-grafite); }

/* ---------- Accordion ---------- */

.accordion { border-top: var(--borda) solid var(--n200); counter-reset: pergunta; }
.accordion details { border-bottom: var(--borda) solid var(--n200); counter-increment: pergunta; }
.accordion summary {
  list-style: none;
  display: grid;
  grid-template-columns: var(--pergunta-colunas);
  align-items: center;
  gap: var(--e-3);
  min-height: var(--e-7);
  padding: var(--e-3) 0;
  font-family: var(--ff-titulo);
  font-size: var(--fs-pergunta);
  font-weight: var(--fw-medio);
  line-height: var(--lh-h3);
  color: var(--c-grafite);
  cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before { content: counter(pergunta, decimal-leading-zero); font-family: var(--ff-mono); font-size: var(--fs-caption); font-weight: var(--fw-medio); letter-spacing: var(--ls-chip); color: var(--c-ambar); }
.accordion summary::after {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--e-5b);
  height: var(--e-5b);
  border: var(--borda) solid var(--n300);
  border-radius: var(--r-circulo);
  font-family: var(--ff-corpo);
  font-size: var(--fs-h4);
  line-height: var(--lh-display);
  color: var(--c-grafite);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.accordion summary:hover::after { border-color: var(--c-grafite); }
.accordion details[open] summary::after { content: "\2212"; background: var(--c-grafite); border-color: var(--c-grafite); color: var(--n0); }
.accordion__resposta { padding: 0 0 var(--e-4) calc(var(--pergunta-numero) + var(--e-3)); color: var(--n700); max-width: var(--medida-texto); }

/* ---------- Citação ---------- */

:is(.citacao, .prosa blockquote) {
  margin: var(--e-5) 0;
  border-left: var(--filete) solid var(--c-ambar);
  padding: var(--e-2) 0 var(--e-2) var(--e-5);
  max-width: var(--medida-texto);
}
:is(.citacao, .prosa blockquote) p { font-family: var(--ff-titulo); font-variation-settings: var(--fvs-texto); font-size: var(--fs-h3); line-height: var(--lh-h4); font-weight: var(--fw-leve); margin-bottom: var(--e-2b); }
.citacao footer { font-size: var(--fs-small); color: var(--n600); }

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

.tabela-wrap { border: var(--borda) solid var(--n200); background: var(--n0); overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.tabela th {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-forte);
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
  color: var(--n600);
  background: var(--n100);
  border-bottom: var(--borda) solid var(--n200);
}
.tabela td { padding: var(--e-3) var(--e-4); color: var(--n700); border-bottom: var(--borda) solid var(--n200); }
.tabela tbody tr:nth-child(even) { background: var(--n50); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela--simples td { padding: var(--e-2) 0; }
.tabela--simples td:last-child { text-align: right; }
.tabela + p { margin-top: var(--e-3); }
/* cabeçalho de linha: nome do item, não rótulo de coluna */
.tabela tbody th { text-transform: none; letter-spacing: 0; font-family: var(--ff-titulo); font-size: var(--fs-h4); color: var(--c-grafite); background: transparent; vertical-align: top; }
.tabela td { vertical-align: top; }
/* dentro do artigo a tabela usa a largura toda da coluna, não a medida de leitura */
.prosa > .tabela-wrap { max-width: none; margin-bottom: var(--e-4); }

/* celular: cada linha vira um bloco, com o rótulo da coluna acima de cada dado (data-rotulo) */
@media (max-width: 599px) {
  .tabela--empilha thead { position: absolute; width: var(--borda); height: var(--borda); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabela--empilha, .tabela--empilha tbody, .tabela--empilha tr, .tabela--empilha th, .tabela--empilha td { display: block; width: 100%; }
  .tabela--empilha tbody tr { padding: var(--e-3) var(--e-4); border-bottom: var(--borda) solid var(--n200); }
  .tabela--empilha tbody tr:last-child { border-bottom: 0; }
  .tabela--empilha tbody th { padding: 0 0 var(--e-2); border-bottom: 0; }
  .tabela--empilha td { padding: var(--e-2) 0; border-bottom: 0; }
  .tabela--empilha td::before { content: attr(data-rotulo); display: block; font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: var(--fw-medio); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--c-ambar); }
}

/* ---------- Blog ---------- */

.card.artigo-card { padding: 0; }
.artigo-card__corpo { padding: var(--e-4); }

/* card de artigo em faixa horizontal: sempre que ocupa a largura toda */
@media (min-width: 768px) and (max-width: 1279px) {
  .grid--cards > .artigo-card { display: grid; grid-template-columns: var(--artigo-card-colunas); align-items: center; }
}
@media (min-width: 1024px) {
  .artigo-card__corpo { padding: var(--e-5b); }
}
@media (min-width: 1280px) {
  .grid--cards > .artigo-card:last-child:nth-child(odd) { display: grid; grid-template-columns: var(--artigo-card-colunas); align-items: center; }
}
.artigo-card__cat { font-size: var(--fs-caption); font-weight: var(--fw-medio); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--c-ambar); margin-bottom: var(--e-2b); }
.artigo-card h2, .artigo-card h3 { font-family: var(--ff-corpo); font-size: var(--fs-h4); font-weight: var(--fw-forte); line-height: var(--lh-h4); margin-bottom: var(--e-2b); color: var(--c-grafite); }
.artigo-card__meta { font-size: var(--fs-small); color: var(--n600); }

.sumario { background: var(--n0); border: var(--borda) solid var(--n200); padding: var(--e-4); margin-bottom: var(--e-5b); }
.sumario__titulo { font-size: var(--fs-caption); font-weight: var(--fw-forte); letter-spacing: var(--ls-chip); text-transform: uppercase; color: var(--n600); margin-bottom: var(--e-3); }
.sumario ul { margin: 0; font-size: var(--fs-body); }

.prosa > * { max-width: var(--medida-texto); }
.prosa p { line-height: var(--lh-prosa); color: var(--n700); }
.prosa h2 { font-size: var(--fs-h2-int); margin: var(--e-5b) 0 var(--e-3b); }
.prosa ul { color: var(--n700); }
.prosa > .lead { font-size: var(--fs-body-lg); line-height: var(--lh-body); }

.autora { border-top: var(--borda) solid var(--n200); border-bottom: var(--borda) solid var(--n200); padding: var(--e-5) 0; margin: var(--e-5b) 0; display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; }
/* seletor reforçado: a regra genérica .slot { width: 100% } vem depois e esticava a foto */
.autora .autora__foto { width: var(--e-8); height: var(--e-8); flex: 0 0 auto; object-fit: cover; object-position: 50% 0; filter: none; }
.autora__dados { flex: 1 1 var(--coluna-min-sm); }
.autora__nome { font-weight: var(--fw-forte); font-size: var(--fs-h4); margin-bottom: var(--e-2); }

.paginacao { display: flex; gap: var(--e-2); margin-top: var(--e-5b); }
.paginacao a, .paginacao span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--altura-toque); min-height: var(--altura-toque);
  padding: 0 var(--e-3b);
  font-size: var(--fs-ui); font-weight: var(--fw-medio);
  border-radius: var(--r-1); text-decoration: none;
}
.paginacao a { color: var(--n700); background: var(--n0); border: var(--borda) solid var(--n300); }
.paginacao a:hover { border-color: var(--c-grafite); color: var(--c-grafite); }
.paginacao span[aria-current="page"] { color: var(--n0); background: var(--c-grafite); }

/* ---------- Slots de imagem ---------- */

.slot {
  width: 100%;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-small);
  color: var(--n500);
  background: var(--n100);
  border: var(--borda) solid var(--n300);
  display: block;
}
.slot--3x4  { aspect-ratio: 3 / 4; }
.slot--1x1  { aspect-ratio: 1 / 1; }
.slot--16x9 { aspect-ratio: 16 / 9; }
.slot--16x10 { aspect-ratio: 16 / 10; }
.slot--4x5 { aspect-ratio: 4 / 5; }
/* retrato de apresentação: no celular vira quadrado ancorado no topo (cabeça e ombros) */
@media (max-width: 599px) { .foto--perfil { aspect-ratio: 1 / 1; object-position: 50% 0; } }
.slot--21x9 { aspect-ratio: 21 / 9; }

.foto { border: 0; object-fit: cover; filter: var(--filtro-retrato); }

/* ---------- Retrato como plano de fundo ---------- */
/* a foto deixa de ser um quadro e vira o fundo da seção. As duas fotos têm fundo escuro
   e quente (estante, luz dourada); a seção é grafite, e máscaras de alfa dissolvem a foto
   nesse grafite. Nenhuma cor nova: a máscara só controla transparência */
.secao--plano { position: relative; isolation: isolate; overflow: hidden; }
.plano .foto { display: block; width: 100%; filter: none; }
.plano--centro { --plano-dissolve: var(--plano-dissolve-centro); }   /* cor original da foto da cliente, sem o tratamento quente */

/* celular e tablet: foto de borda a borda logo abaixo do cabeçalho, base dissolvida,
   e o texto sobe por cima do degradê, como se a foto fosse o fundo da página */
@media (max-width: 1023px) {
  .secao.secao--plano { padding-top: 0; }
  .secao--plano .plano { order: -1; max-width: none; margin-inline: calc(-1 * var(--e-4)); }
  .secao--plano .plano .foto {
    aspect-ratio: 5 / 4;
    object-position: 50% 0;   /* ancorada no topo: a cabeça nunca sai do quadro */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--n900) var(--e-3), var(--n900) 48%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, var(--n900) var(--e-3), var(--n900) 48%, transparent 100%);
  }
  .secao--plano .plano + div { position: relative; margin-top: calc(-1 * var(--e-7)); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .secao--plano .plano .foto { aspect-ratio: 16 / 9; object-position: 50% 0; }
}
/* celular e tablet, fotos verticais (hero e "Quem atende"): quadro vertical com o corpo,
   base dissolvida a partir de 58% e o texto subindo sobre o esmaecido */
@media (max-width: 1023px) {
  .secao--plano .plano--centro .foto {
    aspect-ratio: var(--plano-proporcao-mob);
    max-height: var(--plano-altura-mob);
    object-position: 50% 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--n900) var(--e-3), var(--n900) 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, var(--n900) var(--e-3), var(--n900) 58%, transparent 100%);
  }
}

/* desktop: a foto começa no meio da seção, com uma faixa de grafite acima da cabeça e
   ancorada pelo topo; em tela larga para de crescer (--plano-largura-max) e a borda
   externa também se dissolve. Três máscaras cruzadas: topo, laterais e base */
@media (min-width: 1024px) {
  .secao--plano > .container { min-height: calc(var(--plano-altura) - 2 * var(--secao-y-lg)); align-items: center; }
  .secao--plano .plano {
    position: absolute;
    z-index: -1;
    top: var(--plano-respiro);
    bottom: 0;
    left: var(--plano-inicio);
    width: min(var(--plano-largura), var(--plano-largura-max));
    max-width: none;
  }
  .secao--plano .plano .foto {
    height: 100%;
    aspect-ratio: auto;
    object-position: 62% 0;   /* ancorada no topo: a cabeça nunca sai do quadro */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, var(--n900) var(--plano-topo)),
      linear-gradient(to right, transparent 0%, var(--n900) var(--plano-dissolve), var(--n900) calc(100% - var(--plano-borda)), transparent 100%),
      linear-gradient(to top, transparent 0%, var(--n900) var(--plano-base));
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 0%, var(--n900) var(--plano-topo)),
      linear-gradient(to right, transparent 0%, var(--n900) var(--plano-dissolve), var(--n900) calc(100% - var(--plano-borda)), transparent 100%),
      linear-gradient(to top, transparent 0%, var(--n900) var(--plano-base));
    mask-composite: intersect;
  }
  /* foto à esquerda ("Quem atende"): espelha o dissolve e mantém o texto na coluna da direita */
  .secao--plano-esq .plano { left: auto; right: var(--plano-inicio); }
  .secao--plano-esq .plano .foto {
    object-position: 38% 0;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, var(--n900) var(--plano-topo)),
      linear-gradient(to left, transparent 0%, var(--n900) var(--plano-dissolve), var(--n900) calc(100% - var(--plano-borda)), transparent 100%),
      linear-gradient(to top, transparent 0%, var(--n900) var(--plano-base));
    mask-image:
      linear-gradient(to bottom, transparent 0%, var(--n900) var(--plano-topo)),
      linear-gradient(to left, transparent 0%, var(--n900) var(--plano-dissolve), var(--n900) calc(100% - var(--plano-borda)), transparent 100%),
      linear-gradient(to top, transparent 0%, var(--n900) var(--plano-base));
  }
  .secao--plano-esq .grid > div { grid-column: 2; }
}
/* fotos verticais com o rosto no centro: a caixa segue a proporção da foto (altura da seção,
   largura pela proporção), então o recorte mostra o corpo em vez de ampliar o rosto */
@media (min-width: 1024px) {
  .secao--plano .plano--centro { width: auto; aspect-ratio: var(--plano-proporcao); }
  .secao--plano .plano--centro .foto { object-position: 50% 0; }
  /* foto à esquerda: recua uma faixa para o início do texto ficar sobre o grafite liso */
  .secao--plano-esq .plano--centro { right: calc(var(--plano-inicio) + var(--e-6)); }
}

/* capas são fotos reais: o mesmo tratamento quente dos retratos unifica fontes diferentes */
.capa { border: 0; object-fit: cover; filter: var(--filtro-retrato); }
.container--texto > .capa { margin: var(--e-4) 0 var(--e-5); }


/* ---------- Seção dividida: introdução à esquerda, conteúdo à direita ---------- */

.dividida { display: grid; gap: var(--e-5); }
.dividida__intro > :last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .dividida { grid-template-columns: var(--colunas-intro); gap: var(--e-7); align-items: start; }
  .dividida__intro { position: sticky; top: var(--e-5); }
}

.secao__cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--e-3) var(--e-6); margin-bottom: var(--e-5); }
.secao__cabecalho h2 { margin-bottom: 0; }
.secao__cabecalho > p { margin: 0; max-width: var(--medida-curta); }

/* ---------- Etapas numeradas ---------- */

.etapas { list-style: none; margin: 0; padding: 0; line-height: var(--lh-body); border-top: var(--borda) solid var(--n200); }
.etapa { display: grid; grid-template-columns: var(--etapa-colunas); gap: var(--e-4); margin: 0; padding: var(--e-5) 0; border-bottom: var(--borda) solid var(--n200); }
.etapa__numero { padding-top: var(--e-2); font-family: var(--ff-mono); font-size: var(--fs-small); font-weight: var(--fw-medio); letter-spacing: var(--ls-chip); color: var(--c-ambar); }
.etapa h3 { margin-bottom: var(--e-2); }
.etapa p { margin: 0; color: var(--n700); max-width: var(--medida-texto); }

/* ---------- Blocos de texto com filete ---------- */

.blocos { border-top: var(--borda) solid var(--n200); }
.bloco { padding: var(--e-5) 0; border-bottom: var(--borda) solid var(--n200); }
.bloco h3 { margin-bottom: var(--e-2); }
.bloco p { margin: 0; color: var(--n700); max-width: var(--medida-texto); }
/* o link de cada bloco ganha linha própria: não se perde no fim do parágrafo */
.bloco .bloco__acao { margin-top: var(--e-3); }


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

.rodape { background: var(--n900); color: var(--n300); padding: var(--e-6) 0 var(--e-5); }
.rodape__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); }
.rodape__atendimento { grid-column: 1 / -1; }
.rodape h3 { font-family: var(--ff-corpo); font-size: var(--fs-micro); font-weight: var(--fw-forte); line-height: var(--lh-body); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--c-ambar-claro); margin-bottom: var(--e-3); }
/* rodapé é texto auxiliar: 15px com contraste alto (n300 sobre n900, 10,27:1), não corpo de leitura */
.rodape p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--n300); }
.rodape a { color: var(--c-ambar-claro); text-underline-offset: var(--e-1); }
.rodape a:hover { color: var(--n0); }
/* em lista de navegação o contexto já diz que é link: sem sublinhado, cor clara, âmbar no hover */
.rodape__lista a { color: var(--n300); text-decoration: none; }
.rodape__lista a:hover { color: var(--c-ambar-claro); text-decoration: underline; }
/* canais de contato com ícone: o ícone fica em âmbar-claro (8,16:1 sobre o rodapé) para o canal
   ser reconhecido de relance; o texto segue em --n300 */
.rodape__canal { display: inline-flex; align-items: center; gap: var(--e-2); vertical-align: top; }   /* top: sem a folga da linha de base, mesmo ritmo das outras colunas */
.icone-canal { width: var(--e-3); height: var(--e-3); flex: 0 0 auto; fill: var(--c-ambar-claro); }
.icone-canal--traco { fill: none; stroke: var(--c-ambar-claro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icone-canal__ponto { fill: var(--c-ambar-claro); }

/* listas: mesmo ritmo para link e texto, linha a linha */
.rodape__lista { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--n300); }
.rodape__lista li { margin: 0; padding: var(--e-1) 0; white-space: nowrap; }

/* no celular, Atendimento usa a mesma grade de Navegação e Contato */
.rodape__atendimento .rodape__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: var(--e-4); }
@media (max-width: 374px) {
  .rodape__atendimento .rodape__lista { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .rodape__lista li { white-space: normal; }
}

.rodape__legal { border-top: var(--borda) solid var(--n800); margin-top: var(--e-5); padding-top: var(--e-4); }
.rodape__legal p { margin: 0; font-size: var(--fs-caption); color: var(--n400); max-width: var(--medida-texto); }
/* nome completo e OAB: obrigatórios no rodapé (Provimento 205/2021), um degrau acima do aviso */
.rodape__legal .rodape__oab { font-size: var(--fs-small); color: var(--n300); margin-bottom: var(--e-2); }

/* tablet: marca em linha própria e três colunas distribuídas */
@media (min-width: 600px) {
  .rodape__grid { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .rodape__atendimento { grid-column: auto; }
  .rodape__atendimento .rodape__lista { display: block; }
}
/* desktop: marca e três colunas numa linha, distribuídas pela largura do conteúdo */
@media (min-width: 1024px) {
  .rodape { padding-top: var(--e-7); }
  .rodape__grid { grid-template-columns: var(--rodape-colunas-lg); column-gap: var(--e-6); }
  .rodape__legal { margin-top: var(--e-6); }
  .rodape__legal p { max-width: none; }
}

/* ---------- Rótulos em mono (mesma família das sobrancelhas) ---------- */

:is(.artigo-card__cat, .rodape h3, .sumario__titulo, .badge) { font-family: var(--ff-mono); }
.artigo-card h2, .artigo-card h3 { font-family: var(--ff-titulo); font-size: var(--fs-pergunta); line-height: var(--lh-h3); }

/* ---------- Escala tipográfica no celular ---------- */
/* abaixo de 600px os títulos de terceiro nível descem de 24px para 20px: em 24px cada
   pergunta do FAQ ocupava de 3 a 5 linhas e cada título de card, 2 a 3. O corpo fica em
   17px, que é o tamanho de texto padrão do iOS e o mínimo do projeto para o público 50+ */
@media (max-width: 599px) {
  h3,
  .accordion summary,
  .artigo-card h2,
  .artigo-card h3 { font-size: var(--fs-h4); }
  .lead,
  .prosa > .lead { font-size: var(--fs-body); line-height: var(--lh-body); }
}

/* ---------- Crédito da agência (NewStyle Marketing) ---------- */
/* mesmo desenho dos outros sites da agência: logo, caixa alta pequena e nome em laranja */
.rodape__credito { margin-top: var(--e-4); padding-top: var(--e-3); border-top: var(--borda) solid var(--n800); }
.rodape .credito { display: inline-flex; align-items: center; gap: var(--e-2); padding: var(--e-1) 0; font-size: var(--fs-micro); font-weight: var(--fw-medio); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--n400); text-decoration: none; }
.rodape .credito:hover { color: var(--n300); }
.credito span { color: var(--ns-laranja); }
.credito__marca { flex: 0 0 auto; }
.credito__laranja { fill: var(--ns-laranja); }
.credito__branco { fill: var(--n0); }

/* ---------- Coluna de leitura dos artigos ---------- */
/* a partir de 768px, texto, quadros, capa e chamada usam a mesma coluna de 720px, e o corpo
   sobe para 19px: deixa de ficar espremido em 515px ao lado de blocos de 820px */
@media (min-width: 768px) {
  article.secao > .container--texto > * { max-width: var(--coluna-artigo); }
  article.secao .prosa > * { max-width: none; }
  article.secao .prosa :is(p, li) { font-size: var(--fs-body-lg); }
}