/* ==========================================================================
   Lumi Espaço Terapêutico — landing page
   Valores transcritos do protótipo "Lumi Landing.dc.html" (Claude Design).
   ========================================================================== */

:root {
  /* Marca */
  --creme:        #F6F3EE;
  --branco:       #FFFFFF;
  --azul:         #6F899A;  /* primária */
  --azul-escuro:  #5C7688;  /* hover da primária */
  --azul-titulo:  #4E6B7C;
  --azul-claro:   #A2BBC9;  /* bordas, detalhes */
  --tinta:        #33454F;  /* texto base */
  --tinta-suave:  #3E525E;  /* parágrafos */
  --pessego:      #F9D5B1;
  --lilas:        #D7B9DB;
  --claro-sobre-azul:   #EAF0F3;
  --claro-sobre-azul-2: #DCE6EB;

  /* Link dentro de texto corrido. Um azul mais fundo e mais saturado que o da
     marca: o #6F899A é próximo demais da cor do parágrafo e some no meio da
     frase. Este contrasta 5,1:1 sobre o creme — acima do mínimo AA de 4,5:1. */
  --link:       #2C6E8F;
  --link-hover: #1F5570;

  /* Tipografia */
  --fonte-texto:  Poppins, "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: Quicksand, "Segoe UI", system-ui, sans-serif;
  --fonte-serif:  Cormorant, Georgia, "Times New Roman", serif;

  /* Layout */
  --largura: 1180px;
  --gutter:  24px;
}

/* --------------------------------------------------------------- Base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* ajustado em tempo real pelo main.js */
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--azul-titulo); text-decoration: none; }
a:hover { color: var(--tinta); }

img { display: block; max-width: 100%; }

/* Vários blocos aqui são flex/grid, que vencem o `hidden` do HTML. */
[hidden] { display: none !important; }

input, textarea, button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

@keyframes lumiFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Link "pular para o conteúdo" — visível apenas ao receber foco. */
.pular-conteudo {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  background: var(--azul);
  color: var(--creme);
  padding: 12px 20px;
  border-radius: 0 0 14px 14px;
  font-size: 15px;
  transition: top .15s ease;
}
.pular-conteudo:focus { top: 0; color: var(--creme); }

/* ------------------------------------------------------------ Utilitários */

.container {
  max-width: var(--largura);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--estreito { max-width: 900px; }

.secao { padding-top: 96px; padding-bottom: 96px; }
.secao--creme  { background: var(--creme); }
.secao--branca {
  background: var(--branco);
  border-top: 1px solid rgba(162, 187, 201, .35);
  border-bottom: 1px solid rgba(162, 187, 201, .35);
}
.secao--azul { background: var(--azul); color: var(--creme); }

.olho {                       /* chapéu / eyebrow das seções */
  margin: 0;
  font-family: var(--fonte-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--azul);
}
.secao--azul .olho { color: var(--pessego); }

.titulo-secao {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.2;
  color: var(--azul-titulo);
}
.secao--azul .titulo-secao { color: var(--branco); }

.texto {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--tinta-suave);
}
.secao--azul .texto { color: var(--claro-sobre-azul); }

/* --------------------------------------------------------------- Botões -- */

.btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.btn--primario {
  background: var(--azul);
  color: var(--creme);
  padding: 16px 30px;
  box-shadow: 0 10px 26px rgba(111, 137, 154, .28);
}
.btn--primario:hover,
.btn--primario:focus-visible { background: var(--azul-escuro); color: var(--branco); }

.btn--contorno {
  padding: 16px 26px;
  border: 1.5px solid var(--azul-claro);
  background: transparent;
  color: var(--azul-titulo);
}
.btn--contorno:hover,
.btn--contorno:focus-visible { background: rgba(162, 187, 201, .22); color: var(--azul-titulo); }

/* Variante compacta usada no cabeçalho. */
.btn--compacto {
  padding: 11px 22px;
  font-size: 15px;
  box-shadow: 0 6px 18px rgba(111, 137, 154, .25);
}

/* ------------------------------------------------------------ Cabeçalho -- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 243, 238, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(162, 187, 201, .45);
}

.cabecalho__barra {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}

.cabecalho__marca { display: flex; align-items: center; flex: 0 0 auto; }
.cabecalho__marca img { height: 46px; width: auto; }

.nav-principal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  font-size: 15px;
  font-weight: 400;
  color: var(--azul-titulo);
}
.nav-principal a { padding: 6px 0; }
.nav-principal a:hover { color: var(--tinta); }
.nav-principal .btn--primario { padding: 11px 22px; }
.nav-principal .btn--primario:hover { color: var(--branco); }

/* Botão hambúrguer — só existe abaixo de 880px. */
.menu-botao {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 1.5px solid var(--azul-claro);
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
}
.menu-botao span {
  display: block;
  height: 1.5px;
  background: var(--azul-titulo);
  border-radius: 2px;
}

.menu-mobile {
  border-top: 1px solid rgba(162, 187, 201, .45);
  padding: 14px var(--gutter) 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 17px;
  color: var(--azul-titulo);
  background: var(--creme);
}
.menu-mobile a {
  padding: 14px 4px;
  border-bottom: 1px solid rgba(162, 187, 201, .3);
}
.menu-mobile a.sem-divisoria { border-bottom: none; }
.menu-mobile a.btn {
  margin-top: 10px;
  padding: 15px 22px;
  border-bottom: none;
  font-size: 16px;
}

@media (max-width: 879px) {
  .nav-principal { display: none; }
  .menu-botao { display: flex; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--creme);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='%236F899A' fill-opacity='0.13'%3E%3Cpath d='M36 10c1.6 12.4 4.6 15.4 17 17-12.4 1.6-15.4 4.6-17 17-1.6-12.4-4.6-15.4-17-17 12.4-1.6 15.4-4.6 17-17z'/%3E%3Cpath d='M132 108c1 8 3 10 11 11-8 1-10 3-11 11-1-8-3-10-11-11 8-1 10-3 11-11z'/%3E%3Cpath d='M158 34c.6 4.4 1.6 5.4 6 6-4.4.6-5.4 1.6-6 6-.6-4.4-1.6-5.4-6-6 4.4-.6 5.4-1.6 6-6z'/%3E%3Cpath d='M64 140c.6 4.4 1.6 5.4 6 6-4.4.6-5.4 1.6-6 6-.6-4.4-1.6-5.4-6-6 4.4-.6 5.4-1.6 6-6z'/%3E%3C/g%3E%3C/svg%3E");
}

.hero__anel,
.hero__brilho { position: absolute; pointer-events: none; }

.hero__anel {
  top: -160px;
  right: -190px;
  width: 520px;
  height: 520px;
  border: 1.5px solid rgba(162, 187, 201, .55);
  border-radius: 50%;
}

.hero__brilho {
  bottom: -230px;
  left: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(215, 185, 219, .35), rgba(246, 243, 238, 0) 70%);
}

.hero__grade {
  position: relative;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 72px var(--gutter) 88px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}

.hero__texto {
  flex: 1 1 380px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.hero__logo {
  width: clamp(150px, 17vw, 196px);
  height: auto;
  animation: lumiFloat 7s ease-in-out infinite;
}

.hero__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.14;
  letter-spacing: -.5px;
  color: var(--azul-titulo);
}

.hero__resumo {
  margin: 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--tinta-suave);
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero__local {
  margin: 0;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--azul);
}

.hero__midia { flex: 1 1 380px; min-width: 300px; position: relative; }

.hero__foto {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 230px 230px 36px 230px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(111, 137, 154, .22);
}

.hero__selo {
  position: absolute;
  bottom: -26px;
  left: -14px;
  background: var(--branco);
  border-radius: 22px;
  padding: 16px 20px;
  box-shadow: 0 14px 34px rgba(111, 137, 154, .18);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 290px;
}
.hero__selo img { width: 34px; height: auto; }
.hero__selo span { font-size: 14px; line-height: 1.5; color: var(--tinta-suave); }

/* O selo transborda à esquerda; em telas pequenas isso viraria scroll lateral. */
@media (max-width: 520px) {
  .hero__selo { left: 0; right: 0; bottom: -30px; max-width: none; }
  .hero__grade { padding-bottom: 110px; }
}

/* ------------------------------------------ Espaços de foto (image-slot) -- */
/* No protótipo estes blocos eram <image-slot>: áreas onde a Leticia solta as
   fotos reais. Aqui basta trocar o conteúdo de .foto por <img>; sem arquivo,
   aparece um placeholder na identidade da marca com a descrição da foto.    */

.foto {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(162, 187, 201, .18);
}
.foto > img { width: 100%; height: 100%; object-fit: cover; }

.foto__vazia {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  background: repeating-linear-gradient(
    45deg,
    rgba(162, 187, 201, .14) 0 14px,
    rgba(162, 187, 201, .06) 14px 28px
  );
  color: var(--azul-titulo);
}
.foto__vazia img { width: 38px; height: auto; opacity: .55; }
.foto__vazia span { font-size: 14px; line-height: 1.6; max-width: 26ch; }

/* ---------------------------------------------------------------- Sobre -- */

.sobre__grade {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: center;
}

.sobre__midia { flex: 1 1 320px; min-width: 280px; position: relative; }

.sobre__retrato {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(111, 137, 154, .2);
}

.sobre__submarca {
  position: absolute;
  bottom: -18px;
  right: 6px;
  width: 120px;
  height: auto;
  opacity: .85;
}

.sobre__texto {
  flex: 1 1 420px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.credenciais {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.credenciais li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta-suave);
}
.credenciais .ponto {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 7px;
}
.ponto--pessego { background: var(--pessego); }
.ponto--lilas   { background: var(--lilas); }
.ponto--azul    { background: var(--azul-claro); }

/* -------------------------------------------------- Terapia ocupacional -- */

.intro-secao {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cartoes {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  gap: 22px;
}

.cartao {
  background: var(--creme);
  border-radius: 26px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cartao__icone {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
}
.cartao__icone--pessego { background: var(--pessego); }
.cartao__icone--lilas   { background: var(--lilas); }
.cartao__icone--azul    { background: var(--azul-claro); }

.cartao h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 21px;
  color: var(--azul-titulo);
}
.cartao p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta-suave);
}

/* -------------------------------------------------------- Como funciona -- */

.como__intro { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }

.etapas {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.etapa {
  background: rgba(246, 243, 238, .12);
  border: 1px solid rgba(246, 243, 238, .28);
  border-radius: 26px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.etapa__numero {
  font-family: var(--fonte-serif);
  font-size: 40px;
  line-height: 1;
  color: var(--pessego);
}
.etapa h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 20px;
  color: var(--branco);
}
.etapa p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--claro-sobre-azul);
}

/* Atalho de agendamento, no fim de "Como funciona". Sem título e sem fundo
   sólido de propósito: é a porta secundária, não concorre com o WhatsApp. */
.agenda-atalho {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(246, 243, 238, .28);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}
.agenda-atalho p {
  margin: 0;
  flex: 1 1 320px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--claro-sobre-azul);
}

.btn--contorno-claro {
  padding: 14px 26px;
  border: 1.5px solid rgba(246, 243, 238, .55);
  background: transparent;
  color: var(--creme);
}
.btn--contorno-claro:hover,
.btn--contorno-claro:focus-visible {
  background: rgba(246, 243, 238, .14);
  color: var(--branco);
}

/* --------------------------------------------------------------- Espaço -- */

/* Menos respiro que as outras seções (96px). Esta carrega o título em três
   linhas mais a galeria de três fotos, e no compasso padrão a faixa branca
   ficava alta demais para o que tem dentro.                                */
.secao--compacta { padding-top: 72px; padding-bottom: 72px; }

.espaco__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 28px;
  row-gap: 20px;
}
/* O chapéu ocupa a linha inteira e empurra título e parágrafo para a linha
   de baixo. Não é enfeite: o `align-items` do flex alinha item por LINHA,
   então, com o chapéu fora do caminho, `center` passa a significar
   "centrado em Brincar / Descobrir / Conquistar" — que é o alinhamento
   pedido — em vez de centrado no conjunto chapéu + título.

   Foi por isso que o <div class="espaco__titulo-bloco"> saiu do HTML. Com
   ele, o parágrafo só chegaria nessa altura com um `margin-top` calculado
   à mão a partir da altura do chapéu mais o gap, que quebraria em silêncio
   no dia em que qualquer um dos dois mudasse — e que ainda precisaria de
   media query para sumir quando os blocos empilham no celular.           */
.espaco__topo > .olho { flex: 1 0 100%; }
.espaco__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  /* Menor que o clamp anterior (32-54px). Empilhado, o título ganha altura
     em vez de largura, e 54px faziam "Conquistar" disputar espaço com o
     parágrafo ao lado. Neste teto a linha mais larga cabe inteira mesmo no
     container de 360px, então nenhuma das três palavras quebra em duas.   */
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.2;
  color: var(--azul-titulo);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lema__linha {
  display: flex;
  align-items: center;
  gap: .4em;
}
/* Tudo em `em`: a estrela acompanha o clamp do título sem media query. */
.estrela {
  width: .5em;
  height: .5em;
  flex: none;
  fill: currentColor;
}
.lema__linha--brincar    .estrela { color: var(--lilas); }
.lema__linha--descobrir  .estrela { color: var(--pessego); }
.lema__linha--conquistar .estrela { color: var(--azul); }
.lema__linha--conquistar { font-weight: 600; }

/* O `max-width` é medida de leitura, não decoração. Quando o título encolheu
   para a largura das palavras, o parágrafo herdou toda a folga e chegou a
   837px — cerca de 72 caracteres por linha, acima do confortável, e resolvia
   o texto em só 4 linhas, o que deixava o bloco baixo e largo demais ao lado
   de um título alto. Em 660px ele fica com ~58 caracteres e 5 linhas.
   O `flex-basis` menor existe para o parágrafo não quebrar para a linha de
   baixo no tablet: com 380px ele ainda cabe ao lado do título a 768px.    */
.espaco__descricao {
  flex: 1 1 380px;
  max-width: 660px;
  min-width: 280px;
}

.espaco__galeria {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.espaco__quadro { height: 340px; overflow: hidden; }
.espaco__quadro--arco-cima  { border-radius: 200px 200px 28px 28px; }
.espaco__quadro--reto       { border-radius: 28px; }
.espaco__quadro--arco-baixo { border-radius: 28px 28px 200px 200px; }

/* -------------------------------------------------------------- Dúvidas -- */

.faq__cabecalho {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}
.faq__titulo { font-size: clamp(28px, 3.4vw, 40px); }

.faq__lista { display: flex; flex-direction: column; gap: 14px; }

.faq__item {
  background: var(--branco);
  border-radius: 22px;
  padding: 22px 26px;
  border: 1px solid rgba(162, 187, 201, .4);
}
.faq__item > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 19px;
  color: var(--azul-titulo);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq__item > summary::-webkit-details-marker { display: none; }

.faq__sinal {
  color: var(--azul-claro);
  font-size: 22px;
  line-height: 1;
  transition: transform .2s ease;
}
.faq__item[open] .faq__sinal { transform: rotate(45deg); }

.faq__item p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--tinta-suave);
}

/* -------------------------------------------------------------- Contato -- */

.contato {
  background: var(--branco);
  border-top: 1px solid rgba(162, 187, 201, .35);
}
.contato__grade {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}

.contato__texto {
  flex: 1 1 380px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contato__texto .btn--primario { align-self: flex-start; }

.contato__dados {
  display: grid;
  gap: 10px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta-suave);
}
.contato__dados strong { font-weight: 600; color: var(--azul-titulo); }

/* <address> vem em itálico por padrão do navegador — aqui é endereço postal
   corrido, não assinatura, então volta ao normal. */
.contato__endereco {
  font-style: normal;
  line-height: 1.7;
}
/* Cor e sublinhado vêm da regra de link em texto (ver "Links em texto"). */
.contato__mapa {
  justify-self: start;
  font-size: 15px;
}

.contato__nota {
  margin-top: 6px;
  background: var(--creme);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.contato__nota img { width: 36px; height: auto; }
.contato__nota p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tinta-suave); }

.contato__coluna-form { flex: 1 1 400px; min-width: 300px; }

/* O formulário perdeu o cartão para o .canais__painel que o envolve — senão
   ficariam dois cartões aninhados. Aqui sobrou só o empilhamento. */
.formulario {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ------------------------------------------------------ Canais (abas) --- */

.canais__abas {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.canais__aba {
  flex: 1 1 auto;
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--azul-claro);
  background: transparent;
  color: var(--azul-titulo);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.canais__aba:hover { background: rgba(162, 187, 201, .22); }
.canais__aba[aria-selected="true"] {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}

/* O cartão que antes era do formulário. Os dois painéis o herdam, então
   trocar de aba não muda a moldura — só o conteúdo dentro dela. */
.canais__painel {
  background: var(--creme);
  border: 1px solid rgba(162, 187, 201, .5);
  border-radius: 26px;
  padding: 32px;
}
/* O painel recebe tabindex="0" para o leitor de tela entrar nele, mas não é
   um controle: não deve ganhar anel de foco ao ser revelado por clique. */
.canais__painel:focus { outline: none; }
.canais__painel:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

#painel-falar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#painel-falar h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 22px;
  color: var(--azul-titulo);
}
.canais__texto {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 15.5px;
  line-height: 1.6;
}
.canais__agenda {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* "ou" com um fio de cada lado: separa WhatsApp do Cal.com sem sugerir que
   são equivalentes — o de cima é primário, o de baixo é contorno. */
.canais__ou {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 0;
  color: var(--azul-titulo);
  font-size: 13px;
  text-transform: lowercase;
}
.canais__ou::before,
.canais__ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(162, 187, 201, .55);
}
.formulario h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 22px;
  color: var(--azul-titulo);
}
.formulario label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--azul-titulo);
}
.formulario input,
.formulario textarea {
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--azul-claro);
  background: var(--branco);
  color: var(--tinta);
  font-weight: 400;
}
.formulario textarea { resize: vertical; }
.formulario .btn--primario { padding: 16px 24px; }

/* Consentimento: caixa e texto lado a lado, texto com peso normal (o `label`
   dos outros campos é 500, pesado demais para um parágrafo corrido).

   O seletor precisa ser `.formulario .consentimento`, e não só `.consentimento`:
   `.formulario label` acima vale mais na cascata (uma classe + um elemento) e
   venceria, empurrando a caixa para cima do texto. */
.formulario .consentimento {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tinta-suave);
  cursor: pointer;
}
.formulario .consentimento input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;      /* alinha a caixa com a primeira linha do texto */
  padding: 0;
  border-radius: 4px;
  accent-color: var(--azul);
  cursor: pointer;
}

/* Honeypot: fora da tela, nunca display:none (robô nenhum cai nessa). */
.campo-armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formulario__lgpd {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #5E7382;
}
.formulario__aviso {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #8F4A46;
}

/* Como o .formulario, a confirmação perdeu o cartão para o .canais__painel
   que a envolve. Ela tinha fundo, borda e raio idênticos aos do painel, e o
   resultado era a mensagem de agradecimento aparecendo dentro de duas
   molduras aninhadas. Aqui sobrou só o empilhamento. */
.confirmacao {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.confirmacao img { width: 44px; height: auto; }
.confirmacao h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 24px;
  color: var(--azul-titulo);
}
.confirmacao p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--tinta-suave); }

/* ------------------------------------------------- Páginas de documento -- */
/* Política de privacidade e afins: uma coluna, texto corrido, sem cartões. */

.documento {
  max-width: 760px;              /* ~70 caracteres por linha */
  margin: 0 auto;
  padding: 64px var(--gutter) 88px;
}

.documento__voltar {
  display: inline-block;
  margin-bottom: 32px;
  font-size: 15px;
  font-weight: 500;
  color: var(--link);
}
.documento__voltar:hover { color: var(--link-hover); }

.documento h1 {
  margin: 0 0 12px;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  color: var(--azul-titulo);
  text-wrap: balance;
}

.documento__data {
  margin: 0 0 40px;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--azul);
}

.documento h2 {
  margin: 48px 0 14px;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.3;
  color: var(--azul-titulo);
}

.documento h3 {
  margin: 28px 0 10px;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 18px;
  color: var(--azul-titulo);
}

.documento p,
.documento li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--tinta-suave);
}
.documento p { margin: 0 0 16px; }
.documento ul { margin: 0 0 16px; padding-left: 22px; }
.documento li { margin-bottom: 8px; }
.documento strong { font-weight: 600; color: var(--azul-titulo); }

/* -------------------------------------------------------- Links em texto -- */
/* Link em meio a texto: cor destacada + sublinhado. O sublinhado não é enfeite —
   é o que identifica o link para quem não distingue as duas cores, e para quem
   navega por teclado ou toque, que nunca vê um :hover.

   Não se aplica aos links que já são obviamente navegação (menu, rodapé) nem
   aos botões — ali a forma já diz o que são. */
.documento a,
.consentimento a,
.contato__mapa {
  color: var(--link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(44, 110, 143, .45);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.documento a:hover,
.documento a:focus-visible,
.consentimento a:hover,
.consentimento a:focus-visible,
.contato__mapa:hover,
.contato__mapa:focus-visible {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

/* Resumo em linguagem simples, antes do texto formal. */
.documento__resumo {
  background: var(--branco);
  border: 1px solid rgba(162, 187, 201, .5);
  border-radius: 24px;
  padding: 28px 30px;
  margin-bottom: 8px;
}
.documento__resumo h2 { margin-top: 0; font-size: 20px; }
.documento__resumo ul { margin-bottom: 0; }

/* Trechos que o responsável precisa completar antes de publicar. */
.documento__pendente {
  background: #F9D5B1;
  color: #5A3E1E;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: .95em;
  font-weight: 500;
}

.documento__tabela {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 15px;
}
.documento__tabela th,
.documento__tabela td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid rgba(162, 187, 201, .4);
  line-height: 1.6;
  color: var(--tinta-suave);
}
.documento__tabela th {
  font-weight: 600;
  color: var(--azul-titulo);
  white-space: nowrap;
}

/* --------------------------------------------------------------- Rodapé -- */

.rodape { background: var(--azul); color: var(--claro-sobre-azul); }

/* Grid, não flex com space-between.

   Antes eram quatro colunas de largura fixa (260/220/200/240), somando
   ~1052px dentro dos 1180px do container. A folga de ~128px era distribuída
   pelo space-between, e o vão entre as colunas mudava conforme a janela —
   ora grudadas, ora com um buraco no meio. Era o item 2 do BACKLOG.

   Com grid em frações, a proporção é a mesma em qualquer largura. A marca
   leva 1.4fr porque carrega o logotipo; as duas colunas de texto ficam
   iguais entre si. */
.rodape__grade {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 64px var(--gutter) 34px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 44px;
}

/* Tablet: a marca passa a ocupar a linha inteira e as duas colunas de texto
   dividem a de baixo. Sem isto, com três itens em duas colunas, a terceira
   cairia sozinha embaixo da primeira. */
@media (max-width: 880px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .rodape__grade { grid-template-columns: 1fr; gap: 36px; }
}

.rodape__marca { display: flex; flex-direction: column; gap: 16px; }
.rodape__marca img {
  width: 132px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .95;
}
.rodape__marca p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--claro-sobre-azul); }

.rodape__coluna { display: flex; flex-direction: column; gap: 12px; }

.rodape__coluna h3 {
  margin: 0;
  font-family: var(--fonte-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pessego);
}
.rodape__coluna a,
.rodape__coluna span { font-size: 15px; color: var(--claro-sobre-azul); }
.rodape__coluna a:hover { color: var(--branco); }
/* O bloco de credencial é texto corrido com <br>, não uma lista de links —
   precisa de mais entrelinha que os itens clicáveis. */
.rodape__coluna span { line-height: 1.7; }

.rodape__base { border-top: 1px solid rgba(246, 243, 238, .28); }
.rodape__base > div {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--claro-sobre-azul-2);
}
/* Era um style inline no HTML. Mesmo resultado, num lugar onde dá para
   encontrar e alterar. */
.rodape__link-legal {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rodape__link-legal:hover { color: var(--branco); }

/* ------------------------------------------------- Movimento reduzido ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}