/* ==========================================================================
   Corpo & Forma — seções 01…06
   Nenhuma regra aqui define padding-block de seção (isso mora em layout.css).
   ========================================================================== */

/* --- 01 Hero ---------------------------------------------------------------- */

.cf-hero {
  position: relative;
  background: var(--cf-linho);
  color: var(--cf-tinta);
  padding-top: var(--cf-header);
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

/* Trama de pontos do fundo — a mesma das seções claras, só que mais apagada
   (7% contra 12%) e com um clarão maior no centro, para não brigar com o
   título nem com a colagem. */
.cf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle at center, rgb(18 16 11 / 7%) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 42% 50%, transparent 30%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 42% 50%, transparent 30%, #000 100%);
  pointer-events: none;
}

/* Brasão da marca como marca d'água do fundo da seção inteira: bem apagado,
   atrás de tudo, sangrando pela direita. O SVG já traz opacity 0.3 interna —
   por isso o valor aqui parece alto e ainda assim lê como um véu. */
.cf-hero::before {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -14%;
  width: min(120%, 54rem);
  aspect-ratio: 656 / 731;
  background: url("../img/pattern-icon-logo.svg") center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* A wrap vira coluna flexível: a grade estica e a faixa de meta cola embaixo. */
.cf-hero>.cf-wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cf-hero__grid {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--cf-e-6);
  align-items: end;
  padding-top: var(--cf-e-7);
  padding-bottom: var(--cf-e-7);
  flex: 1;
  min-height: 0;
}

.cf-hero__conteudo {
  display: grid;
  gap: var(--cf-e-5);
  justify-items: start;
  padding-bottom: var(--cf-e-6);
}

.cf-hero__titulo {
  max-width: 14ch;
}

.cf-hero__lead {
  color: var(--cf-taupe);
  max-width: 38ch;
}

.cf-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cf-e-5);
}

/* --- Colagem do hero ---
   Tres retratos retos em grade de duas colunas: nenhum cobre o outro, topo e
   base alinhados. O corte entre as fotos fica em alturas diferentes em cada
   coluna — é o que mantém o ar de colagem. As linhas são frações da ALTURA
   da figura: em tela baixa a grade encolhe inteira em vez de estourar a dobra. */
.cf-hero__figura {
  position: relative;
  margin-inline: 0;
  min-height: 340px;
  aspect-ratio: 1 / 1;

  display: grid;
  grid-template-columns: minmax(0, 5.6fr) minmax(0, 6fr);
  grid-template-rows: repeat(12, minmax(0, 1fr));
  gap: var(--cf-e-3);
}

.cf-hero__foto {
  position: relative;
  margin: 0;
  min-height: 0;
  border-radius: var(--cf-r-img);
  overflow: hidden;
  background: var(--cf-areia);
  box-shadow: 0 18px 48px rgb(18 16 11 / 16%);
  rotate: var(--cf-rot, 0deg);
  transition: box-shadow var(--cf-dur-lenta) var(--cf-ease);

  /* Entrada na carga da página — não depende de JS nem de scroll: cada quadro
     sobe, ganha nitidez e assenta na inclinação final. */
  animation: cf-hero-entra 900ms var(--cf-ease) var(--cf-entrada, 0ms) both;
}

@keyframes cf-hero-entra {
  from {
    opacity: 0;
    translate: 0 30px;
    scale: 0.94;
    rotate: 0deg;
    filter: blur(7px);
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: var(--cf-rot, 0deg);
    filter: blur(0);
  }
}

/* O selo e a legenda entram depois dos quadros, senão aparecem no vazio. */
.cf-hero__selo {
  animation: cf-hero-selo 700ms var(--cf-ease) 620ms both;
}

.cf-hero__legenda {
  animation: cf-hero-legenda 700ms var(--cf-ease) 760ms both;
}

@keyframes cf-hero-selo {
  from {
    opacity: 0;
    translate: -18px 0;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes cf-hero-legenda {
  from {
    opacity: 0;
    translate: 0 12px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Imagem fora do fluxo: não empurra a célula da grade — quem manda no tamanho
   é a linha/coluna, não as dimensões intrínsecas da foto. Vale para os dois
   formatos: <picture> no site estático e <img> direto no tema WordPress. */
.cf-hero__foto > picture,
.cf-hero__foto > .cf-hero__img {
  position: absolute;
  inset: 0;
  display: block;
  transform: scale(1);
  transition: transform var(--cf-dur-lenta) var(--cf-ease);
}

/* Fio de ouro na borda — mesmo overlay da colagem do manifesto. Fica abaixo
   da legenda, que vem depois no DOM com o mesmo z-index. */
.cf-hero__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(173 157 61 / 0%);
  transition: box-shadow var(--cf-dur-lenta) var(--cf-ease);
}

.cf-hero__foto:hover {
  box-shadow: 0 24px 60px rgb(18 16 11 / 26%);
}

.cf-hero__foto:hover::before {
  box-shadow: inset 0 0 0 1px rgb(173 157 61 / 34%);
}

.cf-hero__foto:hover > picture,
.cf-hero__foto:hover > .cf-hero__img {
  transform: scale(1.045);
}

.cf-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
}

/* Retrato principal: coluna direita, do topo até pouco mais da metade. É dele
   a legenda. Todas as fotos retas: topo e base das duas colunas alinhados. */
.cf-hero__foto--1 {
  grid-column: 2;
  grid-row: 1 / 8;
  --cf-entrada: 80ms;
}

.cf-hero__foto--1 .cf-hero__img {
  object-position: 50% 14%;
}

/* Retrato sentada: coluna esquerda inteira, da primeira à última linha — a
   base alinha com a foto de avaliação e o selo dos 26 anos assenta sobre o
   canto inferior, longe do rosto. */
.cf-hero__foto--2 {
  grid-column: 1;
  grid-row: 1 / 13;
  --cf-entrada: 260ms;
}

/* O quadro é mais estreito que o 4:5 do arquivo: o corte é horizontal. Puxar
   para a esquerda centraliza a Dra. no quadro e tira o excesso de cortina. */
.cf-hero__foto--2 .cf-hero__img {
  object-position: 40% 18%;
}

/* Foto de avaliação: sob o retrato principal, alta o bastante para mostrar
   rosto, frasco e o terno rosa. */
.cf-hero__foto--3 {
  grid-column: 2;
  grid-row: 8 / 13;
  --cf-entrada: 400ms;
}

.cf-hero__foto--3 .cf-hero__img {
  object-position: 50% 0%;
}

/* O véu não emenda o fundo da seção: serve só para a legenda sobre a foto. */
.cf-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgb(18 16 11 / 78%) 0%,
      rgb(18 16 11 / 30%) 18%,
      rgb(18 16 11 / 0%) 42%);
  pointer-events: none;
}

/* Legenda sobre o rodapé do retrato principal */
.cf-hero__legenda {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  display: grid;
  /* minmax(0,1fr): sem isso a coluna adota max-content e o nome longo
     vaza para fora do recorte da foto em vez de quebrar. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cf-e-1);
  padding: var(--cf-e-4) var(--cf-e-3) var(--cf-e-4);
  text-align: center;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.5;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.cf-hero__legenda-nome {
  color: var(--cf-linho-alto);
}

.cf-hero__legenda-cargo {
  color: var(--cf-ouro-claro);
}

/* Selo sobreposto: 26 anos de cuidado */
.cf-hero__selo {
  position: absolute;
  z-index: 5;
  /* Canto inferior esquerdo, sob o retrato sentada — longe de qualquer rosto. */
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--cf-e-4);
  padding: var(--cf-e-3) var(--cf-e-4);
  background: var(--cf-linho-alto);
  border-radius: var(--cf-r-img);
  box-shadow: 0 12px 32px rgb(18 16 11 / 14%);
}

.cf-hero__selo-n {
  font-family: var(--cf-destaque);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--cf-ouro-texto);
}

.cf-hero__selo-rot {
  font-size: var(--cf-t-micro);
  font-weight: 500;
  letter-spacing: var(--cf-tk-rotulo);
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--cf-tinta);
}

@media (min-width: 900px) {

  /* Altura cheia só a partir daqui. svh evita o pulo da barra de endereço. */
  .cf-hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .cf-hero::before {
    right: -4%;
    bottom: -16%;
    width: min(70%, 46rem);
  }

  .cf-hero__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: var(--cf-e-8);
    padding-top: var(--cf-e-7);
    align-items: stretch;
  }

  .cf-hero__conteudo {
    gap: var(--cf-e-5);
    align-content: center;
    /* texto centralizado na altura da colagem */
    padding-bottom: 0;
  }

  .cf-hero__figura {
    min-height: 420px;
    aspect-ratio: auto;
    gap: var(--cf-e-4);
  }

  /* Só a partir daqui a figura tem margem própria: o selo pode sair para fora
     sem criar rolagem horizontal no mobile. */
  .cf-hero__selo {
    bottom: 4%;
    transform: translateX(-30%);
    padding: var(--cf-e-5) var(--cf-e-6);
  }

  .cf-hero__selo-n {
    font-size: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .cf-hero__foto,
  .cf-hero__selo,
  .cf-hero__legenda {
    animation: none;
  }

  .cf-hero__foto > picture,
  .cf-hero__foto > .cf-hero__img,
  .cf-hero__foto:hover > picture,
  .cf-hero__foto:hover > .cf-hero__img {
    transform: none;
    transition: none;
  }
}

/* --- 02 Manifesto ------------------------------------------------------------- */

.cf-manifesto {
  display: grid;
  gap: var(--cf-e-8);
  justify-items: center;
  text-align: center;
}

.cf-manifesto__titulo {
  max-width: 26ch;
}

.cf-manifesto__corpo {
  display: grid;
  gap: var(--cf-e-6);
  text-align: left;
  max-width: 100%;
}

.cf-manifesto__corpo .cf-p {
  max-width: 54ch;
}

.cf-manifesto__acao {
  display: grid;
  gap: var(--cf-e-5);
  justify-items: center;
}

.cf-manifesto__fecho {
  font-size: var(--cf-t-rotulo);
  font-weight: 500;
  letter-spacing: var(--cf-tk-rotulo);
  text-transform: uppercase;
  color: var(--cf-ouro-texto);
}

@media (min-width: 800px) {
  .cf-manifesto__corpo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--cf-e-9);
    width: 100%;
  }
}

/* --- Colagem de retratos (manifesto) --------------------------------------------- */

.cf-colagem {
  display: grid;
  /* Dois por linha no mobile; os quatro lado a lado a partir de 800px. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cf-e-4);
  width: 100%;
}

.cf-colagem__foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--cf-r-img);
  /* Placeholder: a caixa já tem cor e proporção antes da imagem chegar,
     então a colagem não pula de altura durante o carregamento. */
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(135deg,
      rgb(18 16 11 / 3%) 0 2px,
      transparent 2px 14px),
    var(--cf-areia);
  /* --cf-py vem do JS (parallax); a rotação é fixa por foto. */
  transform: translate3d(0, var(--cf-py, 0px), 0) rotate(var(--cf-rot, 0deg));
  will-change: transform;

  /* Só a sombra transiciona aqui: pôr transição no transform faria o
     parallax arrastar atrás do scroll. */
  box-shadow: 0 0 0 rgb(18 16 11 / 0%);
  transition: box-shadow var(--cf-dur-lenta) var(--cf-ease);
}

/* Fio de ouro na borda, em overlay — inset box-shadow no próprio quadro
   ficaria atrás da imagem. O ::after já é do brilho do placeholder. */
.cf-colagem__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(173 157 61 / 0%);
  transition: box-shadow var(--cf-dur-lenta) var(--cf-ease);
}

.cf-colagem__foto:hover {
  box-shadow: 0 16px 38px rgb(18 16 11 / 15%);
}

.cf-colagem__foto:hover::before {
  box-shadow: inset 0 0 0 1px rgb(173 157 61 / 34%);
}

/* Respiro no placeholder enquanto a foto não carrega. */
.cf-colagem__foto:not(.is-carregada)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
      transparent 20%,
      rgb(251 250 247 / 45%) 50%,
      transparent 80%);
  animation: cf-brilho 1.9s var(--cf-ease-suave) infinite;
}

@keyframes cf-brilho {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.cf-colagem__foto picture {
  display: block;
  height: 100%;
  transform: scale(1);
  transition: transform var(--cf-dur-lenta) var(--cf-ease);
}

.cf-colagem__foto:hover picture {
  transform: scale(1.045);
}

.cf-colagem__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(0.92) contrast(1.01);

  /* Entrada: a foto surge com um leve avanço de escala quando entra em vista. */
  opacity: 0;
  transform: scale(1.09);
  transition:
    opacity 900ms var(--cf-ease) var(--cf-atraso, 0ms),
    transform 1400ms var(--cf-ease) var(--cf-atraso, 0ms),
    filter var(--cf-dur-media) var(--cf-ease);
}

.cf-colagem__foto.is-carregada.is-vista .cf-colagem__img {
  opacity: 1;
  transform: scale(1);
}

.cf-colagem__foto:hover .cf-colagem__img {
  filter: saturate(1) contrast(1.03);
}

/* --- Quadro vazio: reserva para as fotos de procedimento -------------------
   Bloco preto com ícone de imagem. Sem <img> dentro, o JS nunca marca
   .is-carregada — por isso o brilho do placeholder é desligado aqui. */
.cf-colagem__foto--vazio {
  background: var(--cf-tinta);
  box-shadow: inset 0 0 0 1px rgb(251 250 247 / 8%);
}

.cf-colagem__foto--vazio:not(.is-carregada)::after {
  content: none;
}

.cf-colagem__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--cf-e-3);
  padding: var(--cf-e-4);
  text-align: center;
  color: rgb(251 250 247 / 55%);
}

.cf-colagem__ph-icone {
  width: clamp(28px, 4.5vw, 44px);
  height: auto;
}

.cf-colagem__ph-rot {
  font-size: var(--cf-t-micro);
  font-weight: 500;
  letter-spacing: var(--cf-tk-rotulo);
  text-transform: uppercase;
  line-height: 1.3;
  color: rgb(251 250 247 / 42%);
}

/* Desalinho vertical: a colagem não pode ler como três células iguais. */
.cf-colagem__foto--1 {
  --cf-rot: -1.5deg;
  margin-top: var(--cf-e-7);
}

.cf-colagem__foto--2 {
  --cf-rot: 1deg;
}

.cf-colagem__foto--3 {
  --cf-rot: -0.75deg;
  margin-top: var(--cf-e-8);
}

.cf-colagem__foto--4 {
  --cf-rot: 1.25deg;
  margin-top: var(--cf-e-5);
}

/* A sala com mural: o interesse está no centro do quadro, não no topo. */
.cf-colagem__foto--4 .cf-colagem__img {
  object-position: 50% 45%;
}

@media (min-width: 800px) {
  .cf-colagem {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cf-e-6);
  }

  .cf-colagem__foto--1 {
    margin-top: var(--cf-e-9);
  }

  .cf-colagem__foto--3 {
    margin-top: var(--cf-e-10);
  }

  .cf-colagem__foto--4 {
    margin-top: var(--cf-e-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-colagem__foto {
    transform: rotate(var(--cf-rot, 0deg));
  }

  .cf-colagem__foto picture,
  .cf-colagem__foto:hover picture {
    transform: none;
    transition: none;
  }

  .cf-colagem__foto:not(.is-carregada)::after {
    animation: none;
  }

  .cf-colagem__img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- 04 Índice ----------------------------------------------------------------- */

.cf-index-cab {
  display: grid;
  gap: var(--cf-e-6);
  margin-bottom: var(--cf-e-7);
}

@media (min-width: 800px) {
  .cf-index-cab {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--cf-e-8);
  }
}

/* --- 05 A Profissional ------------------------------------------------------------ */

.cf-prof__grid {
  display: grid;
  gap: var(--cf-e-8);
  align-items: start;
}

.cf-prof__figura {
  position: relative;
}

/* No mobile o retrato inteiro (4:5) come quase uma tela; aqui ele vira quadrado
   com o corte puxado para o alto, para não perder o rosto. No desktop a coluna
   é estreita e a proporção original volta. */
.cf-prof__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--cf-r-img);
  filter: saturate(0.9);
}

.cf-prof__legenda {
  margin-top: var(--cf-e-3);
  font-size: var(--cf-t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(251 250 247 / 55%);
}

.cf-prof__conteudo {
  display: grid;
  gap: var(--cf-e-6);
}

.cf-prof__nome {
  max-width: 18ch;
}

.cf-prof__cargo {
  font-size: var(--cf-t-rotulo);
  font-weight: 500;
  letter-spacing: var(--cf-tk-rotulo);
  text-transform: uppercase;
  color: var(--cf-ouro-claro);
}

/* Sem caixa: a página inteira estrutura com fio, não com moldura. */
.cf-prof__missao {
  padding-top: var(--cf-e-6);
  border-top: 1px solid var(--cf-fio-inv);
}

.cf-prof__fecho {
  position: relative;
  display: grid;
  gap: var(--cf-e-8);
  margin-top: var(--cf-e-9);
  padding-top: var(--cf-e-8);
  border-top: 1px solid var(--cf-fio-inv);
  justify-items: center;
}

@media (min-width: 900px) {
  .cf-prof__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--cf-e-9);
  }

  .cf-prof__figura {
    position: sticky;
    top: calc(var(--cf-header-min) + var(--cf-e-6));
  }

  .cf-prof__img {
    aspect-ratio: auto;
    object-fit: fill;
  }
}

/* --- 06 Agendar + rodapé: banner, card sobreposto ---------------------------------- */

/* O fundo é o mesmo do rodapé: abaixo do banner, a faixa que sobra ao lado do
   card emenda com o rodapé em vez de abrir uma tira clara. */
.cf-fim {
  position: relative;
  background: var(--cf-linho);
  padding-top: var(--cf-secao);
}

/* A foto do banner só entra no desktop: no mobile o card cobre quase toda a
   imagem e sobra um recorte de rosto cortado atrás do formulário. */
.cf-fim__banner {
  display: none;
  height: clamp(340px, 38vw, 580px);
  overflow: hidden;
}

.cf-fim__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 28%;
  /* mantém o rosto à direita, campo livre à esquerda */
}

.cf-fim__wrap {
  position: relative;
  z-index: 2;
  /* o card passa por cima do banner e do rodapé */
  display: grid;
  gap: var(--cf-e-8);
  justify-items: center;
}

/* Marca no bloco escuro, ao lado do card — como na referência.
   No mobile ela cai abaixo do card e passa a ler como parte do rodapé:
   alinha na mesma margem do texto e ganha respiro em cima. */
.cf-fim__marca {
  display: grid;
  place-items: center start;
  justify-self: stretch;
  margin-top: var(--cf-e-8);
}

.cf-fim__marca-link {
  display: block;
  width: clamp(200px, 24vw, 340px);
  max-width: 100%;
  /* nunca escapa da coluna */
  color: var(--cf-tinta);
  transition: color var(--cf-dur-media) var(--cf-ease);
}

.cf-fim__marca-link:hover {
  color: var(--cf-ouro-texto);
}

.cf-fim__marca-link svg {
  display: block;
  width: 100%;
  height: auto;
}

/* O arquivo vem com fill branco fixo; aqui ele passa a seguir a cor do link. */
.cf-fim__marca-link svg .cls-1 {
  fill: currentColor;
}

@media (min-width: 1000px) {
  .cf-fim__wrap {
    grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--cf-e-9);
    justify-items: stretch;
  }

  /* A coluna estica pela linha inteira e a marca se centra dentro dela —
     sem margem negativa, não há como vazar para fora do bloco. */
  .cf-fim__marca {
    place-items: center;
    align-self: stretch;
    margin-top: 0;
    margin-bottom: calc(var(--cf-sobrepor) * -1);
    padding-block: var(--cf-e-7);
    padding-right: clamp(24px, 7vw, 110px);
    /* puxa a marca para a esquerda */
  }
}

.cf-agendar {
  display: grid;
  gap: var(--cf-e-3);
  max-width: 640px;
  padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(20px, 2.2vw, 32px);
  background: var(--cf-linho-alto);
  border: 1px solid var(--cf-fio);
  border-radius: var(--cf-r-img);
  box-shadow: 0 24px 60px rgb(18 16 11 / 10%);

  /* Desce sobre o rodapé. A subida sobre o banner só existe no desktop. */
  margin-bottom: calc(var(--cf-sobrepor) * -1);
}

@media (min-width: 900px) {
  .cf-fim {
    padding-top: 0;
  }

  .cf-fim__banner {
    display: block;
  }

  .cf-agendar {
    margin-top: calc(clamp(230px, 30vw, 480px) * -1);
  }
}

.cf-agendar__titulo {
  max-width: 18ch;
}

.cf-agendar__lead {
  font-size: var(--cf-t-peq);
  color: var(--cf-taupe);
  max-width: 46ch;
}

.cf-agendar .cf-form {
  gap: var(--cf-e-4);
  margin-top: var(--cf-e-5);
  padding: var(--cf-e-6) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--cf-fio);
  /* mesmo fio da referência, sob a chamada */
}

.cf-agendar__acoes {
  display: grid;
  gap: var(--cf-e-4);
  justify-items: start;
  align-items: center;
}

.cf-agendar__wpp {
  font-size: var(--cf-t-peq);
  color: var(--cf-ouro-texto);
  border-bottom: 1px solid var(--cf-fio-forte);
  transition: border-color var(--cf-dur-rapida) var(--cf-ease);
}

.cf-agendar__wpp:hover {
  border-bottom-color: var(--cf-ouro);
}

@media (min-width: 560px) {
  .cf-agendar__acoes {
    grid-template-columns: auto auto;
    gap: var(--cf-e-6);
  }
}