/* ============================================================
   LAYOUT 4 — "Primavera"
   Camada 3: arruma os blocos. Cor e fonte vêm do kit `primavera`.

   O que define este layout, e por quê:
   · o ARCO, duas vezes (hero e quem cuida): a forma repetida vira a
     assinatura da página — R1 da Maria Luné. Para a Avivah, o arco lê
     como janela, recomeço: "Avivah = primavera".
   · a FAIXA DE PROVA mordendo a base do hero: as três referências
     preferidas do Daniel fazem isso. Costura o hero com a página.
   · claro dominante, verde do consultório em duas pausas.
   ============================================================ */

body { --largura-pagina: 78rem; }

/* ---------- Topo ----------------------------------------- */
.topo { background: var(--creme); }
.topo-conteudo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e8);
  padding-block: var(--e4);
}
.topo-marca img { height: 52px; width: auto; }
.topo-menu { display: none; gap: var(--e8); }
.topo-menu a {
  font-size: var(--texto-micro); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tinta-fraca); text-decoration: none; font-weight: 500;
  padding-block: var(--e2);
}
.topo-menu a:hover { color: var(--turquesa); }
.topo-botao {
  border: 1px solid var(--turquesa); color: var(--turquesa);
  padding: 0.7rem 1.4rem; min-height: 44px; font-size: var(--texto-micro);
}
.topo-botao:hover { background: var(--turquesa); color: #fff; }
@media (min-width: 64rem) {
  .topo-menu { display: flex; }
  .topo-marca img { height: 60px; }
}

/* ---------- Arco (hero e quem cuida) -----------------------
   Só recorte: border-radius gigante no topo. O fio lilás é um ::before
   afastado 14px — fino e quebrado do arco, como o fio dourado da Maria
   Luné. A foto continua retângulo no disco.                            */
.arco { position: relative; margin: 0; }
.arco-foto {
  position: relative; overflow: hidden; height: 100%;
  border-radius: 999px 999px 0 0;
  background: var(--creme-fundo);
}
.arco-foto img { width: 100%; height: 100%; object-fit: cover; }
.arco::before {
  content: ""; position: absolute; inset: -14px -14px 0 -14px;
  border: 1px solid var(--lilas); border-bottom: 0;
  border-radius: 999px 999px 0 0;
  opacity: 0.7; pointer-events: none;
}

/* ---------- Hero ------------------------------------------ */
.hero-primavera { padding-top: var(--e8); }
.hero-grade { display: grid; gap: var(--e12); align-items: end; }
.hero-texto { display: flex; flex-direction: column; gap: var(--e6); padding-bottom: var(--e8); }
.hero-titulo { font-size: clamp(2.9rem, 2rem + 3.2vw, 4.75rem); }
.hero-sub { max-width: 30rem; font-size: 1.125rem; line-height: 1.65; }
.hero-acoes { margin-top: var(--e4); }

.hero-arco { width: min(86%, 26rem); aspect-ratio: 3 / 4; justify-self: center; }
@media (min-width: 56rem) { .hero-arco { width: clamp(20rem, 28vw, 26rem); } }

.selo {
  position: absolute; left: -2.5rem; bottom: 4.5rem;
  width: 7rem; height: 7rem; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  padding: var(--e4);
  background: var(--creme); border: 1px solid var(--lilas);
  font-family: var(--fonte-display); font-style: italic;
  font-size: 1rem; line-height: 1.15; color: var(--tinta);
}

/* A faixa morde a base: metade no hero, metade na seção de baixo. Quem
   abre espaço embaixo é `.hero-primavera + .pessoa`. Se a seção de baixo
   mudar, a faixa continua certa: a regra só existe com as duas juntas. */
.faixa-prova {
  list-style: none; margin: 0; padding: 0;
  position: relative; z-index: 2;
  margin-bottom: -3.5rem;
  display: grid; grid-template-columns: 1fr;
  background: var(--turquesa-apagado); color: var(--creme);
}
.faixa-prova li { padding: var(--e6) var(--e8); display: grid; gap: var(--e1); }
.faixa-prova li + li { border-top: 1px solid rgb(247 242 236 / 0.22); }
.faixa-prova strong {
  font-family: var(--fonte-display); font-weight: 500;
  font-size: 2.1rem; line-height: 1;
}
.faixa-prova span {
  font-size: var(--texto-micro); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}
.hero-primavera + .pessoa { padding-top: calc(var(--e16) + 3.5rem); }

@media (min-width: 56rem) {
  .hero-primavera { padding-top: var(--e12); }
  /* O arco tem largura própria (26rem) e o texto fica com o resto: com
     frações, o título de 76px quebrava em três linhas a 1440px. */
  .hero-grade { grid-template-columns: 1fr auto; gap: var(--e16); min-height: 34rem; }
  .hero-texto { padding-bottom: var(--e24); }
  .hero-arco { justify-self: end; margin-right: var(--e8); }
  .faixa-prova { grid-template-columns: repeat(3, 1fr); margin-bottom: -4rem; }
  .faixa-prova li + li { border-top: 0; border-left: 1px solid rgb(247 242 236 / 0.22); }
  .faixa-prova li { padding: var(--e8) var(--e8); }
  .hero-primavera + .pessoa { padding-top: calc(var(--e24) + 4rem); }
}
@media (max-width: 55.99rem) {
  .selo { left: -1rem; bottom: 2rem; width: 5.75rem; height: 5.75rem; font-size: 0.875rem; }
}

/* ---------- Fio com estrela entre seções claras -------------
   Escolhido pelo Daniel em 07/10 (opção C, entre três por print).
   Só existe onde uma seção CLARA encosta em outra clara (hoje: "como
   funciona" e "o espaço"): ali nada diz onde uma acaba. Depois do verde
   a troca de cor já separa, e depois do hero quem separa é a faixa de
   prova. Posto nos dois lugares, o fio abria um vão de 250px à toa
   (visto no print). A estrela é lilás, o lilás como detalhe.
   `grid-column: 1 / -1` porque várias .pagina são grade: sem isso o fio
   viraria o primeiro item e empurraria o conteúdo.                    */
:is(.superficie-clara, .superficie-clara-2):not(.hero-primavera) + :is(.superficie-clara, .superficie-clara-2) > .pagina::before {
  content: "✦"; display: block; grid-column: 1 / -1;
  text-align: center; color: var(--lilas); font-size: 0.8rem; line-height: 1;
  margin-bottom: var(--e12);
  background:
    linear-gradient(var(--areia), var(--areia)) left 50% / calc(50% - 1.5rem) 1px no-repeat,
    linear-gradient(var(--areia), var(--areia)) right 50% / calc(50% - 1.5rem) 1px no-repeat;
}

/* ---------- Quem cuida ------------------------------------ */
.pessoa-grade { display: grid; gap: var(--e12); align-items: center; }
.pessoa-arco { width: min(80%, 22rem); aspect-ratio: 3 / 4; justify-self: center; }
.pessoa-texto { display: flex; flex-direction: column; gap: var(--e6); max-width: 36rem; }
/* A carta: texto na cor cheia (não a fraca), entrelinha mais solta. É para
   ler devagar, como carta, e não passar o olho como ficha técnica. */
.carta { display: flex; flex-direction: column; gap: var(--e4); }
.carta p { line-height: 1.75; }
.carta p:first-child { font-size: 1.125rem; }
.assinatura { display: flex; flex-direction: column; gap: var(--e1); margin-top: var(--e2); }
.assinatura-nome {
  font-family: var(--fonte-display); font-style: italic;
  font-size: 2rem; line-height: 1; color: var(--tinta);
}
.assinatura-cargo {
  font-size: var(--texto-micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--turquesa); font-weight: 500;
}
.citacao {
  margin: var(--e2) 0; padding-left: var(--e6);
  border-left: 1px solid var(--lilas);
}
.citacao p {
  font-family: var(--fonte-display); font-style: italic;
  font-size: 1.6rem; line-height: 1.25; color: var(--tinta);
}
.citacao cite {
  display: block; margin-top: var(--e3);
  font-style: normal; font-size: var(--texto-micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--turquesa);
}
.credenciais { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--areia); }
.credenciais li {
  padding: var(--e3) 0 var(--e3) var(--e6); position: relative;
  border-bottom: 1px solid var(--areia); font-size: var(--texto-peq);
}
.credenciais li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0.5rem; height: 0.5rem; margin-top: -0.25rem;
  border: 1px solid var(--lilas); border-radius: 50%;
}
@media (min-width: 56rem) {
  /* A carta é longa: o arco acompanha a leitura, preso no topo. */
  .pessoa-grade { grid-template-columns: 0.8fr 1.2fr; gap: var(--e24); align-items: start; }
  .pessoa-arco { width: 100%; max-width: 24rem; position: sticky; top: var(--e16); }
}

/* ---------- Tratamentos (verde) --------------------------- */
.tratamentos-topo { display: flex; flex-direction: column; gap: var(--e6); max-width: 40rem; }
.tratamentos-grupos { display: grid; gap: var(--e12); margin-top: var(--e16); }
.grupo-nome {
  font-family: var(--fonte-display); font-weight: 400; font-style: italic;
  font-size: 2rem; line-height: 1;
  padding-bottom: var(--e4); border-bottom: 1px solid var(--lilas-claro);
}
.grupo-lista { list-style: none; margin: 0; padding: 0; }
.grupo-lista li { padding: var(--e4) 0; border-bottom: 1px solid var(--fio-no-verde); }
.grupo-lista h4 { font-size: var(--texto-base); font-weight: 500; margin: 0; }
.grupo-lista p { font-size: var(--texto-peq); color: var(--sobre-verde-fraco); margin-top: var(--e1); }
.tratamentos-acao { margin-top: var(--e16); }
@media (min-width: 56rem) {
  .tratamentos-grupos { grid-template-columns: repeat(3, 1fr); gap: var(--e12); }
}

/* ---------- Como funciona --------------------------------- */
.passos-grade { display: grid; gap: var(--e12); }
.passos-foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raio-m); }
.passos-foto img { width: 100%; height: 100%; object-fit: cover; }
.passos-texto { display: flex; flex-direction: column; gap: var(--e8); }
.passos-texto > div { display: flex; flex-direction: column; gap: var(--e6); }
.passos-lista { list-style: none; margin: 0; padding: 0; }
.passos-lista li {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--e4);
  padding: var(--e6) 0; border-top: 1px solid var(--areia);
}
.passo-num {
  font-family: var(--fonte-display); font-size: 1.9rem; line-height: 1;
  color: var(--turquesa);
}
.passos-lista h3 { font-size: var(--texto-md); font-weight: 500; font-family: var(--fonte-corpo); }
.passos-lista p { color: var(--tinta-fraca); margin-top: var(--e1); }
@media (min-width: 56rem) {
  .passos-grade { grid-template-columns: 1fr 1fr; gap: var(--e24); align-items: center; }
}

/* ---------- O espaço -------------------------------------- */
/* Vem logo depois do "como funciona", também claro: sem isto, os dois
   respiros somam e abre um buraco entre as seções. */
.passos + .espaco { padding-top: 0; }
.espaco-topo { display: flex; flex-direction: column; gap: var(--e6); max-width: 38rem; }
.espaco-fotos { display: grid; gap: var(--e4); margin-top: var(--e12); }
.espaco-fotos figure { margin: 0; overflow: hidden; border-radius: var(--raio-m); }
.espaco-fotos img { width: 100%; height: 100%; object-fit: cover; }
.espaco-larga { aspect-ratio: 4 / 3; }
.espaco-alta { aspect-ratio: 4 / 5; }
@media (min-width: 56rem) {
  .espaco-fotos { grid-template-columns: 1.6fr 1fr; gap: var(--e6); height: 34rem; }
  .espaco-larga, .espaco-alta { aspect-ratio: auto; }
}

/* ---------- Avaliações (verde) ---------------------------- */
.avaliacoes-topo { display: flex; flex-direction: column; gap: var(--e6); max-width: 38rem; }
/* Colunas de jornal, não grade: as avaliações vêm na íntegra, e uma longa
   (a da Suzana tem 110 palavras) esticava a linha inteira da grade e
   deixava as vizinhas com um buraco embaixo. Em colunas, cada card tem a
   altura do próprio texto. */
.avaliacoes-grade { display: block; margin-top: var(--e12); columns: 1; column-gap: var(--e6); }
@media (min-width: 40rem) { .avaliacoes-grade { columns: 2; } }
@media (min-width: 64rem) { .avaliacoes-grade { columns: 3; } }
.avaliacao {
  margin: 0 0 var(--e6); padding: var(--e8); break-inside: avoid;
  background: var(--verde-card); border-radius: var(--raio-m);
  display: flex; flex-direction: column; gap: var(--e4);
}
.avaliacao-estrelas { color: var(--lilas-claro); letter-spacing: 0.2em; font-size: var(--texto-peq); }
.avaliacao p:not(.avaliacao-estrelas) { font-size: var(--texto-base); line-height: 1.6; }
.avaliacao cite {
  font-style: normal; font-size: var(--texto-micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sobre-verde-medio);
}
.avaliacoes-nota { margin-top: var(--e8); font-size: var(--texto-peq); color: var(--sobre-verde-medio); max-width: 40rem; }

/* ---------- Onde fica ------------------------------------- */
.onde-grade { display: grid; gap: var(--e12); }
.onde-dados { display: flex; flex-direction: column; gap: var(--e6); }
.onde-dados dl { margin: 0; display: grid; gap: var(--e6); }
.onde-dados dt {
  font-size: var(--texto-micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--turquesa); font-weight: 500;
}
.onde-dados dd { margin: var(--e1) 0 0; }
.onde-mapa { display: flex; flex-direction: column; gap: var(--e4); align-items: flex-start; }
.onde-mapa iframe { width: 100%; height: 22rem; border: 0; border-radius: var(--raio-m); filter: saturate(0.75); }
@media (min-width: 56rem) {
  .onde-grade { grid-template-columns: 0.8fr 1.2fr; gap: var(--e16); align-items: start; }
}

/* ---------- Final e rodapé -------------------------------- */
.final-conteudo {
  display: flex; flex-direction: column; align-items: center; gap: var(--e6);
  text-align: center; max-width: 44rem;
}
.final .titulo { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); }
.rodape { padding-block: var(--e12) var(--e16); border-top: 1px solid var(--fio-no-verde); font-size: var(--texto-peq); }
.rodape-conteudo { display: grid; gap: var(--e8); }
.rodape p + p { margin-top: var(--e2); }
.rodape strong { font-weight: 500; }  /* Jost só tem 400 e 500 carregados: 700 sairia em negrito falso */
.rodape-marca { font-family: var(--fonte-display); font-size: 1.75rem; line-height: 1; margin-bottom: var(--e3); }
.rodape-cnpj, .rodape-exemplo { color: var(--sobre-verde-fraco); }
.rodape-exemplo { margin-top: var(--e8); font-size: var(--texto-micro); }
@media (min-width: 48rem) {
  .rodape-conteudo { grid-template-columns: repeat(3, 1fr); }
}
/* O balão não pode cobrir a última linha do rodapé no celular. */
@media (max-width: 47.99rem) { .rodape { padding-bottom: 6.5rem; } }