/* ==========================================================================
   Página /tratamentos — o que é só desta página
   --------------------------------------------------------------------------
   Usa o site.css para tudo o que é comum (cabeçalho, rodapé, contato,
   botões, títulos). Aqui ficam:
     1. O painel com os procedimentos (cartões com foto)
     2. O depoimento em vídeo ("Section / UGC" no Framer)
     3. O que cada tratamento trata (linha no cartão) e o link do cartão
     4. Faixa "Como começa / Quem cuida de você / Onde estamos"
   Os valores dos itens 1 e 2 saíram do CSS do Framer em
   copia-exata/tratamentos/index.html.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Recursos OpenType do Inter que o Framer liga em todos os estilos de texto
   ("blwf", "cv03", "cv04", "cv09", "cv11": o "a" de um andar, o 3 de topo
   reto, o 6 e o 9 abertos). Sem eles o título do topo cabe em 3 linhas no
   celular; no site no ar são 4. Vale para a página toda, como no Framer.
   -------------------------------------------------------------------------- */
body {
  font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11";
}

/* Espaço de 64 px que não diminui no celular (depois do contato) */
.espaco-64.espaco-fixo {
  height: 64px;
}


/* ==========================================================================
   1. Painel com os procedimentos
   <div class="painel servicos">
     <div class="servicos__conteudo">
       <ul class="servicos__grade"> <li class="servico">…</li> … </ul>
       <a class="botao botao--escuro">Agende seu horário</a>
     </div>
   </div>
   ========================================================================== */

/* O painel (#fafafa, raio 32, recuo 40) já vem de .painel. No Framer há um
   espaçador no fim do painel: 24 px no computador e 16 px no tablet e no
   celular. Ele entra aqui como recuo de baixo. */
.servicos {
  padding-bottom: 64px;           /* 40 do painel + 24 do espaçador */
}

/* Coluna: grade de cartões e, embaixo, o botão centralizado */
.servicos__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
}

/* Duas colunas com 30 px entre os cartões */
.servicos__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  grid-auto-rows: min-content;
  justify-content: center;
  gap: 30px;
  width: 100%;
  list-style: none;
}

/* Cartão branco do procedimento: foto, nome, frase e "Saiba mais" */
.servico {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;              /* cada cartão com a altura do próprio conteúdo */
  gap: 24px;
  width: 100%;
  max-width: 800px;
  padding: 24px;
  border-radius: 24px;            /* no Framer fica 24 px também no celular */
  background: var(--cor-branco);
  box-shadow: var(--sombra-cartao);
}

/* Foto 4:3 com cantos de 16 px (3:2 no celular) */
.servico__imagem {
  --proporcao: 4 / 3;
}

.servico__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* O Framer corta o nome em 3 linhas e a frase em 2 */
.servico__titulo,
.servico__resumo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow: clip;
}

.servico__titulo { -webkit-line-clamp: 3; line-clamp: 3; }
.servico__resumo { -webkit-line-clamp: 2; line-clamp: 2; }

/* No hover a foto fica meio transparente, como no Framer */
.servico__imagem {
  transition: opacity 0.3s var(--curva-suave);
}

.servico__imagem:hover {
  opacity: 0.5;
}

/* Os cartões só aparecem (opacidade, 0,3 s), sem subir como os textos.
   Um depois do outro: 0 / 0,2 / 0,4 / 0,6 s (data-atraso no HTML). */
.servico[data-surgir] {
  --duracao-entrada: 0.3s;
}

.js-surgir .servico[data-surgir] {
  transform: none;
}

@media (max-width: 1199.98px) {
  .servicos {
    padding-bottom: 56px;         /* 40 + 16 */
  }

  .servicos__conteudo {
    gap: 56px;
  }
}

@media (max-width: 767.98px) {
  .servicos {
    padding-bottom: 40px;         /* 24 + 16 */
  }

  .servicos__conteudo {
    gap: 48px;
  }

  /* Um cartão por linha */
  .servicos__grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .servico__imagem {
    --proporcao: 3 / 2;
  }
}


/* ==========================================================================
   2. Depoimento em vídeo ("Section / UGC" no Framer)
   Painel verde-claro: à esquerda as aspas, a frase e o nome; à direita o
   vídeo em pé (67 % da coluna) com o botão de "play" desenhado por cima.
   No tablet e no celular as duas partes ficam uma embaixo da outra.
   ========================================================================== */

.depoimento-video {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--raio-secao);
  background: var(--cor-verde-claro);
  overflow: hidden;
}

/* Coluna do texto (1,5 parte da largura) */
.depoimento-video__texto {
  display: flex;
  flex: 1.5 0 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  min-width: 0;
  padding: 64px 0 64px 40px;
}

/* Aspas ao lado da frase */
.depoimento-video__citacao {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

.depoimento-video__aspas {
  flex: none;
  width: 64px;
  height: 61px;
  margin-top: 7px;
  fill: var(--cor-oliva);
  overflow: visible;
}

.depoimento-video__frase {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.depoimento-video__autor {
  max-width: 392px;
}

/* Coluna do vídeo (1,25 parte da largura) */
.depoimento-video__midia {
  display: flex;
  flex: 1.25 0 0;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 40px;
}

.depoimento-video__caixa {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
}

/* O vídeo é vertical (720 × 1280) e aparece inteiro, em pé, com 67 % da
   largura. No Framer a caixa pede 1:1, mas assim que o vídeo carrega ela
   cresce até a proporção dele (9:16): é o que a paciente vê no site no ar,
   com a legenda de baixo inteira. Aqui a proporção vem fixa, sem pulo. */
.depoimento-video__video {
  width: 67%;
  height: auto;
  aspect-ratio: 720 / 1280;
  transition: opacity 0.3s var(--curva-suave);
}

/* Ao passar o mouse o vídeo fica meio transparente, como no Framer */
.depoimento-video__video:hover {
  opacity: 0.5;
}

/* Círculo de vidro fosco com o triângulo de "play" (só enfeite: o toque
   passa por ele e vai para o vídeo). No computador o vídeo toca sozinho,
   sem som, quando aparece na tela; no celular e no tablet só com um toque,
   e enquanto toca o círculo some (site.css, "Vídeo em laço"). */
.depoimento-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  border-radius: 120px;
  background: rgba(84, 77, 64, 0.35);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.depoimento-video__play svg {
  position: absolute;
  top: 37px;
  left: 43px;
  width: 40px;
  height: 45px;
  fill: var(--cor-branco);
  overflow: visible;
}

/* Tablet: texto em cima, vídeo embaixo */
@media (max-width: 1199.98px) {
  .depoimento-video {
    flex-direction: column;
  }

  .depoimento-video__texto {
    flex: none;
    justify-content: center;
    align-self: auto;
    width: 100%;
    padding: 56px 40px 40px;
  }

  .depoimento-video__midia {
    flex: none;
    width: 100%;
    padding: 0 40px 40px;
  }
}

/* Celular: as aspas sobem para cima da frase; recuos menores */
@media (max-width: 767.98px) {
  .depoimento-video {
    gap: 0;
  }

  .depoimento-video__texto {
    padding: 40px 24px 24px;
  }

  .depoimento-video__citacao {
    flex-direction: column;
    gap: 24px;
  }

  .depoimento-video__frase {
    flex: none;
    width: 100%;
  }

  .depoimento-video__midia {
    padding: 24px;
  }

  .depoimento-video__caixa {
    border-radius: 16px;
  }

  .depoimento-video__play {
    width: 100px;
    height: 100px;
  }

  .depoimento-video__play svg {
    top: 31px;
    left: 36px;
    width: 34px;
    height: 39px;
  }
}


/* ==========================================================================
   3. O que cada tratamento trata, e o link do cartão
   <p class="servico__nota">Lábios, bigode chinês, queixo e mandíbula.</p>
   Fica entre a frase e o link: uma linha de texto cinza, com um fio em cima
   (o mesmo das listas da seção "Sobre a clínica" da página inicial), para
   separar o detalhe da frase sem chamar mais atenção do que ela.
   ========================================================================== */

.servico__nota {
  width: 100%;
  margin-top: -8px;               /* 16 px até a frase, em vez dos 24 do cartão */
  padding-top: 12px;
  border-top: 1px solid var(--cor-borda);
  font-size: var(--fs-texto);
  line-height: 1.45;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-texto);
  text-wrap: pretty;
}

/* O link do cartão traz o nome completo do tratamento e, no celular e no
   tablet, pode ocupar duas linhas. Por isso ele é um bloco de texto (e não
   uma linha flexível): a seta vem logo depois da última palavra, em vez de
   ficar solta na borda do cartão, e o bloco tem a largura do texto.
   Fica só a seta da direita, que anda um pouco no hover e no foco (como
   nas listas da página inicial): a troca de setas do .link-seta só funciona
   numa linha. A seta é desenhada no fundo de um espaço que não quebra
   (\00a0), então ela desce junto com a última palavra e nunca fica
   sozinha numa linha. 44 px de altura para o dedo. */
.servicos__grade .servico > .link-seta {
  --seta-direita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath transform='rotate(-90 6 6)' d='M6 .75a.75.75 0 0 1 .75.75v7.19l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3.75 3.75a.75.75 0 0 1-1.06 0L1.72 7.28a.75.75 0 0 1 1.06-1.06l2.47 2.47V1.5A.75.75 0 0 1 6 .75Z'/%3E%3C/svg%3E");
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 9px 0;
  overflow: visible;
}

.servicos__grade .servico > .link-seta::before {
  display: none;
}

/* O espaço (uns 4 px) até a seta, os 12 px da seta e 3 px para ela andar:
   19 px, o mesmo que a seta e o vão ocupam num .link-seta, então o texto
   quebra no mesmo lugar e a seta não encosta no anel do foco */
.servicos__grade .servico > .link-seta::after {
  content: "\00a0";
  display: inline;
  margin: 0;
  padding: 0 15px 0 0;
  -webkit-mask: var(--seta-direita) right 3px center / 12px 12px no-repeat;
  mask: var(--seta-direita) right 3px center / 12px 12px no-repeat;
  transform: none;
  transition: -webkit-mask-position 0.4s var(--curva-suave), mask-position 0.4s var(--curva-suave);
}

.servicos__grade .servico > .link-seta:hover::after,
.servicos__grade .servico > .link-seta:focus-visible::after {
  margin-right: 0;
  -webkit-mask-position: right 0 center;
  mask-position: right 0 center;
}


/* ==========================================================================
   4. Faixa "Como começa / Quem cuida de você / Onde estamos"
   <div class="secao tratamentos-info">
     <div class="cartao tratamentos-info__cartao">
       <div class="tratamentos-info__topo"> ícone + h2 </div>
       <div class="tratamentos-info__texto"> p.texto </div>
       <div class="tratamentos-info__links"> a.link-seta </div>
     </div> …
   </div>
   Painel cinza a 24 px dos procedimentos, com três cartões brancos, como a
   seção "Sobre a clínica" da página inicial.
     computador: os três lado a lado
     tablet:     "Como começa" na largura toda, os outros dois lado a lado
     celular:    um embaixo do outro
   ========================================================================== */

.tratamentos-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
  padding: 40px;
  border-radius: var(--raio-secao);
  background: var(--cor-fundo-suave);
}

/* Cartão: ícone e título em cima, o texto e, no pé, o link com seta */
.tratamentos-info__cartao {
  gap: 20px;
  padding: 32px;
}

/* Só esmaece ao entrar na tela, como os cartões dos procedimentos */
.tratamentos-info__cartao[data-surgir] {
  --duracao-entrada: 0.3s;
}

.js-surgir .tratamentos-info__cartao[data-surgir] {
  transform: none;
}

.tratamentos-info__topo {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* O mesmo traço dos ícones do contato, num círculo cinza de 44 px */
.tratamentos-info__icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cor-cinza-claro);
  color: var(--cor-oliva);
}

.tratamentos-info__icone svg {
  width: 20px;
  height: 20px;
}

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

.tratamentos-info__texto .texto {
  text-wrap: pretty;
}

/* O link desce para o pé do cartão (os da mesma linha ficam alinhados) e
   ganha 44 px de altura para o dedo; se o texto não couber (tela de 320 px
   ou letra do sistema aumentada), quebra dentro do cartão */
.tratamentos-info__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
}

.tratamentos-info__links > .link-seta {
  max-width: 100%;
  min-height: 44px;
}

.tratamentos-info__links > .link-seta strong {
  text-wrap: balance;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .tratamentos-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 32px;
  }

  .tratamentos-info__cartao--largo {
    grid-column: 1 / -1;
  }
}

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

  .tratamentos-info__cartao {
    gap: 16px;
    padding: 20px;
  }

  .tratamentos-info__titulo {
    font-size: 1.125rem;
  }
}