/* ==========================================================================
   Peças da passada de SEO nas páginas de tratamento (27/10/2026)
   /tratamentos, /tratamentos/preenchimento-facial-porto-alegre,
   /tratamentos/toxina-botulinica-porto-alegre
   --------------------------------------------------------------------------
   Carregue depois do /css/site.css (e do /css/paginas/tratamento.css, nas
   páginas de cada tratamento). São as peças novas pedidas pelo plano de SEO
   e dois ajustes para o texto novo caber sem desalinhar (fim da seção 1 e
   seção 6). As outras páginas de tratamento podem usar este arquivo também.

   Índice
     1. Migalha visível (Início › Tratamentos › …) — plano 2.4
     2. Frase do local e links dentro do texto — plano 2.14 e 2.5
     3. Legenda dos casos de antes e depois — plano 2.7 (CFO-196)
     4. "Leia também" — plano 2.5
     5. (vaga: a abertura da /tratamentos saiu em 28/10/2026)
     6. Cartões da lista de /tratamentos com a mesma altura na linha
     7. Resumo dos cartões da lista de /tratamentos inteiro
     8. Página de um tratamento só (preenchimento labial e bruxismo): o caso
        sozinho, os passos, as perguntas frequentes e as fontes
   ========================================================================== */


/* ==========================================================================
   1. Migalha visível
   <nav class="migalha" aria-label="Você está aqui">
     <ol>
       <li><a href="/">Início</a></li>
       <li><a href="/tratamentos">Tratamentos</a></li>
       <li aria-current="page">Preenchimento labial e facial</li>
     </ol>
   </nav>
   Fica no alto do cartão do título, acima do H1. Texto de 12 px, cinza.
   ========================================================================== */

.migalha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-legenda);
  line-height: 1.3;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-texto);
}

.migalha li + li::before {
  content: "›";
  margin: 0 8px;
  color: var(--cor-cinza-medio);
}

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

.migalha a:hover {
  color: var(--cor-oliva);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.migalha [aria-current="page"] {
  color: var(--cor-titulo);
}

/* No computador, a foto do topo é quadrada e o cartão do texto estica até a
   altura dela. Com o H1 do plano (mais longo) e a migalha, o texto pode passar
   do quadrado: aí a foto estica junto (a imagem é "cover"), para os dois
   cartões continuarem com a mesma altura. Quando o texto cabe, nada muda. */
@media (min-width: 1200px) {
  .tratamento-topo__foto {
    align-self: stretch;
  }
}


/* ==========================================================================
   2. Frase do local e links dentro do texto
   <p class="texto texto-com-links">Atendemos na Av. Nilo Peçanha, em frente
     ao Shopping Iguatemi. <a href="/como-chegar">Veja como chegar</a>.</p>
   Os links do texto ficam sublinhados (não só pela cor) e ficam oliva no hover.
   ========================================================================== */

.texto-com-links a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.texto-com-links a:hover {
  color: var(--cor-oliva);
}


/* ==========================================================================
   3. Legenda dos casos (antes e depois)
   <li class="galeria__item">
     <a class="galeria__link" …><img …></a>
     <p class="legenda cor-texto galeria__legenda">Caso da Dra. … Imagem
       publicada com autorização da paciente.</p>
   </li>
   ========================================================================== */

.galeria__legenda {
  margin-top: 12px;
}


/* ==========================================================================
   4. "Leia também"
   <section class="secao leia-tambem" aria-labelledby="leia-tambem-titulo">
     <div class="cabeca-secao"> h2 + frase </div>
     <ul class="leia-tambem__lista">
       <li class="cartao leia-tambem__cartao">
         <p class="legenda cor-texto">Artigo</p>
         <a class="leia-tambem__link titulo-nome" href="/blog/…">Título do artigo</a>
         <span class="link-seta" aria-hidden="true"><strong>Ler o artigo</strong></span>
       </li>
     </ul>
   </section>
   O cartão inteiro abre o artigo (o ::after do link cobre o cartão), mas o
   texto do link é só o título. Três por linha no computador e no tablet,
   um por linha no celular.
   ========================================================================== */

.leia-tambem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.leia-tambem__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leia-tambem__lista--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.leia-tambem__cartao {
  justify-content: space-between;
  gap: 16px;
  transition: box-shadow 0.3s var(--curva-suave);
}

.leia-tambem__cartao > .pilha {
  gap: 12px;
}

.leia-tambem__link {
  color: var(--cor-titulo);
  text-decoration: none;
}

.leia-tambem__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.leia-tambem__link:focus-visible {
  outline: none;
}

.leia-tambem__cartao:has(.leia-tambem__link:focus-visible) {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
}

/* No hover a seta corre como no "Saiba mais" */
.leia-tambem__cartao:hover .leia-tambem__link {
  color: var(--cor-oliva);
}

.leia-tambem__cartao:hover .link-seta::before,
.leia-tambem__cartao:has(.leia-tambem__link:focus-visible) .link-seta::before {
  margin-left: 0;
}

.leia-tambem__cartao:hover .link-seta::after,
.leia-tambem__cartao:has(.leia-tambem__link:focus-visible) .link-seta::after {
  margin-right: -19px;
}

@media (max-width: 1199.98px) {
  .leia-tambem__lista--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* No tablet, três cartões por linha deixam o título com uns 175 px, e
   palavras longas ("Microagulhamento", "Rejuvenescimento") passavam da
   borda do cartão. Aqui elas quebram com hífen (ou, sem dicionário de
   hifenização, no fim da linha), sem mudar nada no computador e no celular. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .leia-tambem__link {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* Crédito das fotos de banco, logo abaixo dos cartões (só na página de
   emagrecimento, pela regra do CFM). A seção põe 40 px entre as partes;
   o crédito sobe para ficar 16 px abaixo dos cartões. */
.leia-tambem__credito {
  width: 100%;
  margin-top: -24px;
  text-align: center;
}

@media (max-width: 767.98px) {
  .leia-tambem__lista,
  .leia-tambem__lista--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==========================================================================
   5. (Vaga) A abertura em texto corrido da /tratamentos saiu em 28/10/2026,
   a pedido da dona, e a regra .tratamentos-abertura foi junto. O número
   fica, para as seções 6 a 8 continuarem com o mesmo número citado no
   COMPONENTES.md.
   ========================================================================== */


/* ==========================================================================
   6. Cartões da lista de /tratamentos com a mesma altura na linha
   Com "Bioestimulador de colágeno" (no lugar de "Estímulo de Colágeno") o nome
   quebra em duas linhas no tablet. Os cartões da mesma linha esticam juntos e
   o link fica no pé do cartão, para a grade continuar alinhada.
   ========================================================================== */

.servicos__grade .servico {
  align-self: stretch;
}

.servicos__grade .servico > .link-seta {
  margin-top: auto;
}


/* ==========================================================================
   7. Resumo dos cartões da lista de /tratamentos inteiro
   O Framer cortava a frase em 2 linhas com "…" (css/tratamentos.css). No
   celular e no tablet isso escondia o fim do texto da clínica ("…preservando
   movimento e naturalidade.", "…com segurança e acompanhamento."). Aqui a
   frase aparece inteira; os cartões da linha continuam com a mesma altura
   (seção 6).
   ========================================================================== */

.servicos__grade .servico__resumo {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}


/* ==========================================================================
   8. Página de um tratamento só (/tratamentos/preenchimento-labial-porto-alegre)
   O topo, os cartões que empilham, o caso, a equipe e o contato são os das
   outras páginas de tratamento. Aqui ficam as três peças novas:
     a. o caso sozinho, sem esticar até a largura do painel
     b. "Como é o tratamento": quatro passos numerados, em cartões
     c. "Perguntas frequentes": o título à esquerda e as perguntas
        (.perguntas, do site.css) à direita; no tablet e no celular, um
        embaixo do outro (a mesma conta das páginas /lp/)
     d. o aviso de que as fotos são ilustrativas, embaixo dos cartões
     e. as fontes, embaixo das perguntas (página do bruxismo)
   ========================================================================== */

/* a. Um caso só: o cartão fica com até 420 px, no meio */
.galeria--um .galeria__item {
  flex: 0 1 420px;
  min-width: 0;
}

/* b. Passos
   <section class="secao passos">
     <div class="cabeca-secao"> h2 + frase </div>
     <ol class="passos__lista" role="list">
       <li class="cartao passos__cartao">
         <span class="passos__numero" aria-hidden="true">1</span>
         <h3 class="passos__titulo">Avaliação</h3>
         <p class="texto">…</p>
       </li>
     </ol>
   </section>
   Quatro por linha no computador, dois no tablet e um no celular. O número
   fica num círculo cinza de 44 px, como os ícones da "Sobre a clínica" da
   inicial. A ordem já vem do <ol> para quem usa leitor de tela; o
   role="list" fica no <ol> porque o Safari tira a semântica de lista
   quando há list-style: none. */
.passos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.passos__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passos__cartao {
  gap: 16px;
  padding: 32px;
}

.passos__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cor-cinza-claro);
  color: var(--cor-oliva);
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1;
}

.passos__titulo {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-titulo);
}

.passos__cartao .texto {
  text-wrap: pretty;
}

@media (max-width: 1199.98px) {
  .passos__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .passos__lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .passos__cartao {
    padding: 24px;
  }
}

/* c. Perguntas frequentes */
.tratamento-perguntas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 64px;
}

.tratamento-perguntas__cabeca {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tratamento-perguntas__cabeca .texto {
  max-width: 400px;
}

@media (max-width: 1199.98px) {
  .tratamento-perguntas {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* d. Aviso das fotos ilustrativas, logo abaixo dos cartões (no meio) */
.tratamento__credito {
  width: 100%;
  margin-top: 24px;
  text-align: center;
}

/* e. Fontes, embaixo das perguntas (página do bruxismo)
   <div class="tratamento-perguntas__corpo">
     <div class="perguntas"> … </div>
     <div class="tratamento-fontes">
       <p class="legenda cor-texto" id="fontes-titulo"><strong>Fontes</strong></p>
       <ul class="tratamento-fontes__lista" aria-labelledby="fontes-titulo">
         <li><a href="…" target="_blank" rel="noopener">Título</a>. Autor, revista, ano (em inglês).</li>
       </ul>
     </div>
   </div>
   O corpo ocupa a coluna da direita (ou fica embaixo da cabeça, no tablet e
   no celular). Letra de legenda, com marcador, e o título do estudo
   sublinhado. URLs e títulos longos quebram sem passar da borda. */
.tratamento-perguntas__corpo {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.tratamento-fontes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tratamento-fontes__lista {
  padding-left: 18px;
  list-style: disc;
  font-size: var(--fs-legenda);
  line-height: 1.5;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-texto);
  overflow-wrap: anywhere;
}

.tratamento-fontes__lista li + li {
  margin-top: 6px;
}

.tratamento-fontes__lista a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tratamento-fontes__lista a:hover {
  color: var(--cor-oliva);
}