/* ==========================================================================
   Páginas de cada tratamento
   /tratamentos/preenchimento-facial-porto-alegre
   /tratamentos/toxina-botulinica-porto-alegre
   /tratamentos/bioestimulador-colageno-porto-alegre
   /tratamentos/tratamento-pele-porto-alegre
   /tratamentos/emagrecimento-porto-alegre
   --------------------------------------------------------------------------
   As cinco usam o mesmo modelo (gerado por _ferramentas/gerar_tratamentos.py).
   Carregue depois do /css/site.css. Os valores saíram do CSS do Framer na
   cópia exata (componente "Section / Hero", "Service Card" e "Section / Team").

   Índice
     1. Recuo da página (40 px até o tablet, 20 px no celular)
     2. Painel grande e espaços internos
     3. Topo: foto + cartão com título, aplicações e botões
     4. Cartões das aplicações (empilham ao rolar)
     5. Resultados de pacientes (galeria)
     6. Ampliação das fotos (<dialog> criado pelo site.js)
     7. Equipe
     8. Entrada só com esmaecimento
   ========================================================================== */


/* ==========================================================================
   1. Recuo da página
   Nestas páginas o Framer mantém 40 px de recuo também no tablet (na inicial
   é 20 px). No celular volta a 20 px. O rodapé acompanha, como no Framer.
   ========================================================================== */

.pagina-tratamento .principal {
  --margem-lateral: 40px;
}

@media (max-width: 767.98px) {
  .pagina-tratamento .principal {
    --margem-lateral: 20px;
  }
}


/* ==========================================================================
   2. Painel grande (#fafafa, r 32, recuo 40; no celular r 24, recuo 24)
   Ele guarda o topo, os cartões e a galeria. Fica com overflow visível para
   os cartões conseguirem grudar no topo ao rolar (position: sticky não
   funciona dentro de um pai com overflow: hidden).
   ========================================================================== */

.tratamento {
  overflow: visible;
}

.tratamento__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: clip;           /* "clip" corta sem quebrar o sticky (como no Framer) */
  overflow-clip-margin: 0px;
}

/* Espaço entre os blocos do painel: 40 px ("P40–0"); 24 px no celular ("P24") */
.tratamento__espaco {
  flex: none;
  width: 100%;
  height: 40px;
}

@media (max-width: 767.98px) {
  .tratamento__espaco {
    height: 24px;
  }
}


/* ==========================================================================
   3. Topo da página
   <section class="tratamento-topo">
     <div class="cartao tratamento-topo__foto"> <div class="imagem"><img></div> </div>
     <div class="cartao tratamento-topo__texto"> … </div>
   </section>
   Computador: lado a lado (foto quadrada, flex 1,35 : 1). Tablet e celular:
   um embaixo do outro, foto em 3:2.
   ========================================================================== */

.tratamento-topo {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

/* Cartão da foto: quadrado no computador. min-height: 0 faz a proporção
   mandar na altura (senão a foto, que é vertical, esticaria o cartão). */
.tratamento-topo__foto {
  flex: 1.35 0 0;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  gap: 40px;
}

.tratamento-topo__foto .imagem {
  height: 100%;
}

/* Cartão do texto: estica até a altura da foto, no mínimo 540 px */
.tratamento-topo__texto {
  flex: 1 0 0;
  align-self: stretch;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  min-width: 0;
  min-height: 540px;
  padding: 32px 24px 24px;
}

/* O bloco de texto ocupa a largura do cartão (o título vai até 640 px, a frase até 400) */
.tratamento-topo__texto > .pilha {
  width: 100%;
}

.tratamento-topo__titulo {
  text-align: left;
}

/* Botão "Agendar consulta" e "← Voltar" */
.tratamento-topo__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* O ícone do botão é #fafafa no Framer (o texto é branco) */
.tratamento-topo__acoes .botao__icone {
  color: var(--cor-fundo-suave);
}

@media (max-width: 1199.98px) {
  .tratamento-topo {
    flex-direction: column;
  }

  .tratamento-topo__foto {
    flex: none;
    width: 100%;
    aspect-ratio: 1.5;
  }

  .tratamento-topo__texto {
    flex: none;
    align-self: auto;
    width: 100%;
    min-height: 0;
  }
}

@media (max-width: 767.98px) {
  .tratamento-topo__foto .imagem {
    border-radius: 8px;
  }

  .tratamento-topo__acoes {
    justify-content: center;
  }
}


/* ==========================================================================
   4. Cartões das aplicações (o "Service Card" do Framer)
   <article class="cartao cartao--fixo aplicacao" id="service-card-1">
     <div class="aplicacao__conteudo">            (+ .aplicacao__conteudo--direita)
       <div class="imagem aplicacao__foto"><img></div>
       <div class="aplicacao__texto"> h2 + parágrafos + "Agende sua consulta →" </div>
     </div>
   </article>
   Os cartões grudam a 40 px do topo e se empilham ao rolar (no celular não).
   A foto fica à esquerda ou à direita como no Framer; no celular, sempre em
   cima. Os ids "service-card-N" são os mesmos do site no ar.
   ========================================================================== */

.aplicacoes {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.aplicacao {
  z-index: 1;
  width: 100%;
  scroll-margin-top: 40px;
}

.aplicacao__conteudo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 80px 40px;
  width: 100%;
}

/* Foto em 4:3 */
.aplicacao__foto {
  flex: 1.35 0 0;
  min-width: 320px;
  aspect-ratio: 4 / 3;
}

.aplicacao__texto {
  display: flex;
  flex: 1.25 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 335px;
  padding: 16px 16px 16px 0;
  overflow: hidden;
}

.aplicacao__cabeca {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* Foto à direita */
.aplicacao__conteudo--direita .aplicacao__foto {
  order: 1;
}

.aplicacao__conteudo--direita .aplicacao__texto {
  padding: 16px 0 16px 16px;
}

/* Tablet: foto menor (mín. 260 px), texto ocupa 1,5 */
@media (max-width: 1199.98px) {
  .aplicacao__conteudo {
    gap: 32px;
  }

  .aplicacao__foto {
    flex: 1 0 0;
    min-width: 260px;
  }

  .aplicacao__texto,
  .aplicacao__conteudo--direita .aplicacao__texto {
    flex: 1.5 0 0;
    min-width: 0;
    padding: 0;
  }
}

/* Celular: foto em cima (3:2), cartões não grudam */
@media (max-width: 767.98px) {
  .aplicacao.cartao--fixo {
    position: relative;
    top: auto;
  }

  .aplicacao__conteudo {
    gap: 20px;
  }

  .aplicacao__foto {
    min-width: 200px;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
  }

  .aplicacao__conteudo--direita .aplicacao__foto {
    order: 0;
  }

  .aplicacao__texto,
  .aplicacao__conteudo--direita .aplicacao__texto {
    flex: 1.25 0 0;
    min-width: 240px;
  }
}


/* ==========================================================================
   5. Resultados de pacientes
   Título no estilo do h1 de artigo (40 / 32 / 25,6 px, 800, -0,04em) e
   cartões de 4:3 (3 por linha no computador, 2 no tablet, 1 no celular).
   Cada foto é um link para a imagem grande; com JavaScript ela abre na
   ampliação (seção 6).
   ========================================================================== */

.titulo-resultados {
  font-size: var(--fs-artigo-h1);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--ls-justo);
  color: var(--cor-titulo);
  text-align: center;
}

.titulo-resultados strong {
  font-weight: 900;
}

.galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  list-style: none;
}

.galeria__item {
  z-index: 1;
  flex: 1 0 0;
  min-width: 300px;
  padding: 16px;
  border-radius: var(--raio-cartao);
  background: var(--cor-branco);
  box-shadow: var(--sombra-cartao);
}

.galeria__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-imagem);
  overflow: hidden;
  cursor: zoom-in;
}

.galeria__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ao passar o mouse: véu branco de 50% e a lupa num círculo preto de 48 px */
.galeria__lupa {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.galeria__lupa::before {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background: var(--cor-preto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.galeria__link:hover .galeria__lupa,
.galeria__link:focus-visible .galeria__lupa {
  opacity: 1;
}

.galeria__link:focus-visible {
  border-radius: var(--raio-imagem);
}

/* No tablet a foto tem no mínimo 280 px, como no Framer: em telas perto de
   810 px ela passa uns pixels do recuo direito do cartão (igual ao site no ar). */
@media (max-width: 1199.98px) {
  .galeria__item {
    min-width: 280px;
  }

  .galeria__link {
    min-width: 280px;
  }
}

@media (max-width: 767.98px) {
  .galeria__item {
    min-width: 100%;
  }

  .galeria__link {
    min-width: 0;
    border-radius: 8px;
  }
}


/* ==========================================================================
   6. Ampliação das fotos (o "Lightbox" do Framer)
   O site.js cria um <dialog class="ampliacao"> quando a página tem
   [data-galeria]. Fundo verde-escuro a 97%, foto no centro (até 85% da
   altura), setas nas laterais, fechar no canto e zoom embaixo.
   ========================================================================== */

.ampliacao {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(38, 41, 36, 0.97);
  color: var(--cor-branco);
  overflow: hidden;
}

.ampliacao::backdrop {
  background: transparent;
}

.ampliacao[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ampliacao-entra 0.25s ease both;
}

@keyframes ampliacao-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Com a ampliação aberta a página atrás não rola */
html.ampliacao-aberta,
html.ampliacao-aberta body {
  overflow: hidden;
}

/* Palco: rola quando a foto está com zoom. A foto fica no meio pela margem
   automática (e não por justify-content), para dar para rolar até as bordas. */
.ampliacao__palco {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.ampliacao__foto {
  flex: none;
  max-width: calc(90vw - 100px);
  max-height: 85vh;
  margin: auto;
  border-radius: 10px;
  object-fit: contain;
  user-select: none;
}

/* Com zoom a largura vem do site.js e os limites saem */
.ampliacao__foto[data-zoom] {
  max-width: none;
  max-height: none;
}

.ampliacao__botao {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #4d4d4d;
  color: var(--cor-branco);
  cursor: pointer;
}

.ampliacao__botao svg {
  width: 16px;
  height: 16px;
}

.ampliacao__botao[hidden] {
  display: none;
}

/* Sem efeito no momento (zoom no mínimo ou no máximo): fica a meia-luz */
.ampliacao__botao[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

.ampliacao__botao:focus-visible {
  outline-color: var(--cor-branco);
  border-radius: 50%;
}

.ampliacao__fechar {
  top: 20px;
  right: 20px;
}

.ampliacao__anterior,
.ampliacao__proxima {
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
}

.ampliacao__anterior svg,
.ampliacao__proxima svg {
  width: 20px;
  height: 20px;
}

.ampliacao__anterior { left: 30px; }
.ampliacao__proxima { right: 30px; }

.ampliacao__zoom {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 1;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.ampliacao__zoom .ampliacao__botao {
  position: static;
}

@media (max-width: 767.98px) {
  .ampliacao__anterior { left: 12px; }
  .ampliacao__proxima { right: 12px; }
}


/* ==========================================================================
   7. Equipe ("Section / Team", fundo lavanda)
   Recuo 64/40/40 no computador, 56/40/40 no tablet e 40/24/24 no celular;
   64 px entre o título e os cartões (40 no celular).
   ========================================================================== */

.equipe {
  padding: 64px 40px 40px;
}

.equipe__linhas {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.equipe .cabeca-secao > .titulo-secao {
  max-width: 480px;
}

.equipe .cartao-equipe .imagem {
  border-radius: var(--raio-imagem);
}

@media (max-width: 1199.98px) {
  .equipe {
    padding: 56px 40px 40px;
  }

  .equipe .cartao-equipe {
    max-width: 400px;
  }
}

@media (max-width: 767.98px) {
  .equipe {
    padding: 40px 24px 24px;
  }

  .equipe__linhas {
    gap: 40px;
  }

  .equipe .cartao-equipe {
    justify-self: start;
    width: 100%;
    max-width: 360px;
  }
}


/* ==========================================================================
   8. Entrada só com esmaecimento
   As fotos dos cartões e os cartões da equipe aparecem sem subir (no Framer
   eles só mudam a opacidade). Use data-surgir="esmaecer".
   ========================================================================== */

.js-surgir [data-surgir="esmaecer"] {
  transform: none;
}