/* ==========================================================================
   style.css — Site da Ana Tereza Netto Viana, Psicóloga Clínica
   --------------------------------------------------------------------------
   Organização do arquivo (procure pelos títulos entre "====="):
     1. Reset leve
     2. Variáveis do design system (cores, fontes, espaçamentos)
     3. Base e tipografia
     4. Utilitários (.container, .eyebrow, .btn, .card, .section, .grid)
     5. Componentes (ícone em círculo, acordeão, formulários, chips)
     6. Header e menu mobile
     7. Rodapé
     8. Botão flutuante do WhatsApp
     9. Faixa de título e breadcrumb (páginas internas)
    10. Faixa CTA ("Vamos conversar?")
    11. Seções da Home (.hero, .sobre-previa, .especialidades, …)
    12. Página "Como posso te ajudar"
    13. Página "Abordagem TCC"
    14. Página "Meus ideais"
    15. Páginas Agendamento, Contato, Política e 404
    16. Animações de entrada e acessibilidade de movimento
   ========================================================================== */

/* =====[ 1. Reset leve ]=================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

ul,
ol {
  padding: 0;
}

/* =====[ 2. Variáveis do design system ]=================================== */

:root {
  /* Paleta oficial da cliente (prancha "Paleta de Cores") */
  --verde-principal: #2F4F3F;  /* logotipo, títulos, botões primários, fundo do rodapé */
  --verde-salvia:    #5C7A6B;  /* subtítulos, ícones, elementos secundários, hover dos botões */
  --verde-claro:     #A8C5B5;  /* fundos suaves, destaques, círculos atrás de ícones */
  --bege-claro:      #F5F0E8;  /* fundo de cartões e seções alternadas */
  --off-white:       #FAF8F5;  /* fundo principal do site */
  --cinza-suave:     #8A8A8A;  /* apoio decorativo — NÃO usar em texto pequeno (contraste baixo) */
  --dourado:         #B8A06A;  /* detalhes e linhas decorativas — nunca como cor de texto pequeno */
  --branco:          #FFFFFF;
  --texto:           #3D4A44;  /* derivado: verde-acinzentado escuro para o corpo de texto */
  --cinza-texto:     #6B6B6B;  /* derivado: cinza mais escuro para legendas pequenas */

  /* Tipografia */
  --fonte-titulos: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --fonte-corpo: 'Aileron', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Medidas recorrentes */
  --raio-cartao: 20px;
  --raio-campo: 12px;
  --raio-pilula: 999px;
  --sombra-cartao: 0 8px 24px rgba(47, 79, 63, 0.06);
  --borda-cartao: 1px solid rgba(47, 79, 63, 0.08);
  --espaco-secao: clamp(4rem, 8vw, 6.5rem);
  --transicao: 220ms ease;
}

/* =====[ 3. Base e tipografia ]============================================ */

html {
  scroll-behavior: smooth;
  /* Compensa o header fixo quando o navegador rola até uma âncora (#ansiedade etc.) */
  scroll-padding-top: 96px;
}

body {
  font-family: var(--fonte-corpo);
  font-size: 1.0625rem;            /* 17px */
  line-height: 1.65;
  color: var(--texto);
  background-color: var(--off-white);
  overflow-x: clip;                /* nenhuma rolagem horizontal em nenhuma largura */
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulos);
  font-weight: 500;
  color: var(--verde-principal);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.2;
}

h4 {
  font-size: 1.375rem;
  line-height: 1.3;
}

p {
  max-width: 68ch;
}

/* Links do corpo em verde-principal: o verde-sálvia não atinge o contraste
   mínimo (4,5:1) em texto pequeno sobre os fundos claros do site. */
a {
  color: var(--verde-principal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transicao);
}

a:hover {
  color: var(--verde-principal);
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 700;
}

/* Foco visível por teclado em todo o site. O verde-principal garante o
   contraste mínimo de 3:1 sobre os fundos claros; nas faixas verdes escuras
   (CTA, rodapé, menu mobile aberto), o dourado assume — ali ele contrasta. */
:focus-visible {
  outline: 2px solid var(--verde-principal);
  outline-offset: 3px;
  border-radius: 4px;
}

.cta :focus-visible,
.rodape :focus-visible,
.header__nav.aberto :focus-visible {
  outline-color: var(--dourado);
}

::selection {
  background-color: var(--verde-claro);
  color: var(--verde-principal);
}

/* Link "Pular para o conteúdo" — primeiro elemento do body, aparece só no foco */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background-color: var(--verde-principal);
  color: var(--off-white);
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}

.skip-link:focus {
  top: 0;
  color: var(--off-white);
}

/* =====[ 4. Utilitários ]================================================== */

.container {
  max-width: 1240px;
  padding-inline: 1.5rem;
  margin-inline: auto;
}

.section {
  padding-block: var(--espaco-secao);
}

/* Fundos alternados das seções (off-white → branco → bege) */
.section--branca {
  background-color: var(--branco);
}

.section--bege {
  background-color: var(--bege-claro);
}

/* Sobretítulo pequeno em caixa alta, com linha curta dourada (como no template) */
.eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--verde-salvia);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  margin-right: 0.75rem;
  vertical-align: middle;
  background-color: var(--dourado);
}

.eyebrow--central {
  text-align: center;
}

/* Cabeçalho de seção centralizado */
.secao-cabecalho {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.secao-cabecalho p {
  margin-inline: auto;
  margin-top: 1rem;
}

/* Botões em formato pílula */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;                /* área de toque mínima */
  padding: 0.9rem 1.75rem;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border: 1.5px solid transparent;
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}

.btn--primario {
  background-color: var(--verde-principal);
  color: var(--off-white);
}

.btn--primario:hover {
  background-color: var(--verde-salvia);
  color: var(--off-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(47, 79, 63, 0.18);
}

.btn--secundario {
  border-color: var(--verde-principal);
  color: var(--verde-principal);
}

.btn--secundario:hover {
  background-color: var(--bege-claro);
  color: var(--verde-principal);
}

/* Botões usados sobre fundo verde (faixa CTA) */
.btn--claro {
  background-color: var(--off-white);
  color: var(--verde-principal);
}

.btn--claro:hover {
  background-color: var(--bege-claro);
  color: var(--verde-principal);
  transform: translateY(-2px);
}

.btn--contorno-claro {
  border-color: var(--off-white);
  color: var(--off-white);
}

.btn--contorno-claro:hover {
  background-color: rgba(250, 248, 245, 0.14);
  color: var(--off-white);
}

/* Link terciário com seta */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--verde-principal);
  text-decoration: none;
}

.link-seta::after {
  content: "→";
  transition: transform var(--transicao);
}

.link-seta:hover::after {
  transform: translateX(4px);
}

/* Cartões */
.card {
  background-color: var(--branco);
  border-radius: var(--raio-cartao);
  border: var(--borda-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 2rem;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.card--bege {
  background-color: var(--bege-claro);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(47, 79, 63, 0.10);
}

/* Grades genéricas */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1023px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .grid--2,
  .grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Texto visível apenas para leitores de tela.
   (Utilitária de acessibilidade — mantenha disponível para usos futuros.) */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====[ 5. Componentes ]================================================== */

/* Ícone de linha dentro de um círculo suave */
.icone-circulo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--verde-claro);
  color: var(--verde-principal);
}

.icone-circulo--bege {
  background-color: var(--bege-claro);
}

.icone-circulo svg {
  width: 26px;
  height: 26px;
}

/* Caixa de ícone (grades "por que a TCC", ideais etc.) */
.caixa-icone {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.caixa-icone h3,
.caixa-icone h4 {
  font-size: 1.375rem;
}

.caixa-icone p {
  font-size: 0.9375rem;
  color: var(--texto);
}

/* Chips informativos (hero e "para quem é o atendimento") */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--raio-pilula);
  background-color: var(--bege-claro);
  border: 1px solid rgba(47, 79, 63, 0.10);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--verde-principal);
}

.chip svg {
  width: 18px;
  height: 18px;
  color: var(--verde-salvia);
}

.chip--grande {
  padding: 0.85rem 1.5rem;
  font-size: 1.0625rem;
}

/* Acordeão de perguntas frequentes */
.acordeao {
  max-width: 800px;
  margin-inline: auto;
  display: grid;
  gap: 0.75rem;
}

.acordeao__item {
  border-radius: 14px;
  background-color: var(--bege-claro);
  border: 1px solid rgba(47, 79, 63, 0.08);
  overflow: hidden;
  transition: background-color var(--transicao);
}

.acordeao__item.aberto {
  background-color: var(--branco);
  border-bottom: 2px solid var(--dourado);
}

.acordeao__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 44px;
  padding: 1.1rem 1.5rem;
  text-align: left;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 1rem;
  color: var(--verde-principal);
}

/* Sinal de "+" que vira "×" quando o item está aberto */
.acordeao__sinal {
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--dourado);
  transition: transform var(--transicao);
}

.acordeao__item.aberto .acordeao__sinal {
  transform: rotate(45deg);
}

/* O painel fechado fica invisível E fora da tabulação/leitores de tela
   (visibility: hidden); o atraso na transição preserva a animação de fechar. */
.acordeao__painel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 250ms ease, visibility 0s linear 250ms;
}

.acordeao__item.aberto .acordeao__painel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 250ms ease;
}

.acordeao__conteudo {
  overflow: hidden;
}

.acordeao__conteudo p {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9375rem;
}

/* Campos de formulário */
.campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.campo label {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--verde-principal);
}

.campo .campo__opcional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cinza-texto);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--verde-claro);
  border-radius: var(--raio-campo);
  background-color: var(--branco);
  font-size: 1rem;
  color: var(--texto);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo textarea {
  min-height: 150px;
  resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--verde-salvia);
  box-shadow: 0 0 0 3px rgba(92, 122, 107, 0.15);
}

/* Mensagem de validação do formulário */
.form-aviso {
  display: none;
  margin-top: 1rem;
  padding: 0.9rem 1.2rem;
  border-radius: var(--raio-campo);
  background-color: var(--bege-claro);
  border-left: 3px solid var(--dourado);
  font-size: 0.9375rem;
  color: var(--verde-principal);
}

.form-aviso.visivel {
  display: block;
}

/* =====[ 6. Header e menu mobile ]========================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(250, 248, 245, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

/* Classe adicionada pelo main.js quando a página rola */
.header.rolado {
  border-bottom-color: rgba(47, 79, 63, 0.10);
  box-shadow: 0 4px 18px rgba(47, 79, 63, 0.07);
}

.header__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 80px;
  padding-block: 0.75rem;
}

.header__marca {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

.header__marca img {
  width: auto;
  height: 44px;
}

.header__nome {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.header__titulo {
  font-family: var(--fonte-titulos);
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--verde-principal);
  line-height: 1.2;
}

.header__sub {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--verde-salvia);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.header__lista {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}

.header__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}

.header__lista a:hover {
  color: var(--verde-principal);
}

/* Item ativo do menu (aria-current="page") */
.header__lista a[aria-current="page"] {
  color: var(--verde-principal);
  border-bottom-color: var(--dourado);
}

.header__hamburguer {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 10px;
}

.header__hamburguer-linha {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--verde-principal);
  transition: transform var(--transicao), opacity var(--transicao);
}

/* Menu mobile: painel em tela cheia sobre fundo verde */
@media (max-width: 1023px) {
  .header__hamburguer {
    display: flex;
  }

  .header__nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    padding: 6rem 2rem 3rem;
    background-color: var(--verde-principal);
    visibility: hidden;
    opacity: 0;
    /* A visibilidade só "some" DEPOIS do fade — e volta na hora ao abrir,
       para que o foco do teclado alcance os links imediatamente. */
    transition: opacity var(--transicao), visibility 0s linear 220ms;
  }

  .header__nav.aberto {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--transicao);
  }

  .header__lista {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }

  .header__lista a {
    font-family: var(--fonte-titulos);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--off-white);
    border-bottom: none;
  }

  .header__lista a:hover,
  .header__lista a[aria-current="page"] {
    color: var(--verde-claro);
  }

  .header__cta {
    background-color: var(--off-white);
    color: var(--verde-principal);
  }

  /* Com o menu aberto, o hambúrguer vira um "X" e fica acima do painel */
  body.menu-aberto .header__hamburguer {
    position: relative;
    z-index: 95;
  }

  body.menu-aberto .header__hamburguer-linha:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.menu-aberto .header__hamburguer-linha:nth-child(2) {
    opacity: 0;
  }

  body.menu-aberto .header__hamburguer-linha:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  body.menu-aberto .header__hamburguer-linha {
    background-color: var(--verde-principal);
  }

  /* Mantém o hambúrguer legível sobre o painel verde: fundo claro atrás dele */
  body.menu-aberto .header__hamburguer {
    background-color: var(--off-white);
    border-radius: 50%;
  }

  /* Trava a rolagem da página enquanto o menu está aberto */
  body.menu-aberto {
    overflow: hidden;
  }
}

@media (max-width: 400px) {
  .header__titulo {
    font-size: 0.875rem;
  }
}

/* =====[ 7. Rodapé ]======================================================= */

.rodape {
  position: relative;
  background-color: var(--verde-principal);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  overflow: hidden;
}

.rodape__ornamento {
  position: absolute;
  right: -60px;
  top: -40px;
  width: 300px;
  opacity: 0.08;
  pointer-events: none;
}

.rodape__grade {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 1.5rem;
}

.rodape__cartao {
  background-color: var(--bege-claro);
  border-radius: var(--raio-cartao);
  padding: 2rem;
}

.rodape__cartao--marca img {
  width: 180px;
  height: auto;
  margin-bottom: 1.25rem;
}

.rodape__tagline {
  font-family: var(--fonte-titulos);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--verde-principal);
  margin-bottom: 1rem;
}

.rodape__info {
  font-size: 0.9375rem;
  color: var(--texto);
}

.rodape__titulo {
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--verde-principal);
  margin-bottom: 1.25rem;
}

.rodape__cartao ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.rodape__cartao ul a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 32px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--texto);
  text-decoration: none;
}

.rodape__cartao ul a:hover {
  color: var(--verde-principal);
  text-decoration: underline;
}

.rodape__cartao ul a svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--verde-salvia);
}

/* Aviso de emergência (CVV / SAMU) */
.rodape__aviso {
  position: relative;
  max-width: none;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  border-radius: 14px;
  background-color: rgba(250, 248, 245, 0.10);
  border: 1px solid rgba(250, 248, 245, 0.25);
  font-size: 0.875rem;
  color: var(--off-white);
}

.rodape__aviso a {
  color: var(--off-white);
  font-weight: 700;
}

.rodape__barra {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(250, 248, 245, 0.20);
  font-size: 0.875rem;
  color: var(--off-white);
}

.rodape__barra a {
  color: var(--off-white);
}

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

  .rodape__cartao--marca {
    grid-column: 1 / -1;
  }
}

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

  .rodape__cartao--marca {
    grid-column: auto;
  }
}

/* =====[ 8. Botão flutuante do WhatsApp ]================================== */

.whatsapp-flutuante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--verde-principal);
  color: var(--off-white);
  box-shadow: 0 8px 24px rgba(47, 79, 63, 0.30);
  transition: background-color var(--transicao), transform var(--transicao);
}

.whatsapp-flutuante:hover {
  background-color: var(--verde-salvia);
  color: var(--off-white);
  transform: translateY(-2px);
}

.whatsapp-flutuante svg {
  width: 28px;
  height: 28px;
}

/* =====[ 9. Faixa de título e breadcrumb ]================================= */

.faixa-titulo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 240px;
  padding-block: 3rem;
  background-color: var(--bege-claro);
  overflow: hidden;
}

.faixa-titulo__ornamento {
  position: absolute;
  right: clamp(1rem, 8vw, 8rem);
  top: 50%;
  transform: translateY(-50%);
  width: 190px;
  opacity: 0.12;
  pointer-events: none;
}

.faixa-titulo .container {
  position: relative;
  width: 100%;
}

.breadcrumb {
  margin-top: 1rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 600;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 0.6rem;
  color: var(--verde-salvia);
}

.breadcrumb a {
  color: var(--verde-principal);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--texto);
}

@media (max-width: 767px) {
  .faixa-titulo {
    min-height: 180px;
    padding-block: 2.25rem;
  }

  .faixa-titulo__ornamento {
    width: 130px;
    right: 0.5rem;
  }
}

/* =====[ 10. Faixa CTA ]=================================================== */

.cta {
  position: relative;
  background-color: var(--verde-principal);
  padding-block: var(--espaco-secao);
  overflow: hidden;
}

.cta__ornamento {
  position: absolute;
  left: -50px;
  bottom: -60px;
  width: 280px;
  opacity: 0.10;
  pointer-events: none;
}

.cta__conteudo {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.cta__conteudo h2 {
  color: var(--off-white);
}

.cta__conteudo p {
  color: var(--bege-claro);
  max-width: 55ch;
}

.cta__botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* =====[ 11. Seções da Home ]============================================== */

/* --- Hero --- */
.hero {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.hero__grade {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__texto p {
  margin-block: 1.5rem;
  font-size: 1.125rem;
}

.hero__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Painel da foto da Tereza: a imagem tem fundo transparente e é exibida
   sobre o verde-claro, ancorada no topo (o corte inferior fica fora do quadro) */
.hero__imagem {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sombra-cartao);
  background-color: var(--verde-claro);
}

.hero__imagem img {
  width: 100%;
  height: clamp(320px, 42vw, 520px);
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 1023px) {
  .hero__grade {
    grid-template-columns: 1fr;
  }

  /* No mobile a imagem fica abaixo do texto */
  .hero__imagem img {
    height: clamp(260px, 55vw, 420px);
  }
}

/* --- Prévia "Sobre mim" (texto + mosaico com citação) --- */
.sobre-previa__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.sobre-previa__texto p {
  margin-block: 1.25rem 1.5rem;
}

.sobre-previa__mosaico {
  position: relative;
  padding-bottom: 3.5rem;
}

.sobre-previa__mosaico > img {
  width: min(100%, 420px);
  margin-left: auto;
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
}

/* Cartão de citação sobreposto ao retrato */
.cartao-citacao {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 340px;
  background-color: var(--branco);
  border-radius: var(--raio-cartao);
  border-left: 3px solid var(--dourado);
  box-shadow: 0 14px 30px rgba(47, 79, 63, 0.12);
  padding: 1.5rem 1.75rem;
}

.cartao-citacao p {
  font-family: var(--fonte-titulos);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--verde-principal);
}

.cartao-citacao cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--fonte-corpo);
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cinza-texto);
}

@media (max-width: 1023px) {
  .sobre-previa__grade {
    grid-template-columns: 1fr;
  }

  .sobre-previa__mosaico > img {
    margin-inline: auto;
  }

  .cartao-citacao {
    position: static;
    margin: -3rem auto 0;
  }

  .sobre-previa__mosaico {
    padding-bottom: 0;
  }
}

/* --- Grade de especialidades (prévia na Home) --- */
.especialidade-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: var(--texto);
}

.especialidade-card h3 {
  font-size: 1.5rem;
  transition: color var(--transicao);
}

.especialidade-card:hover h3 {
  color: var(--verde-salvia);
}

.especialidade-card p {
  font-size: 0.9375rem;
  color: var(--texto);
}

.especialidade-card .link-seta {
  margin-top: auto;
}

.especialidades__rodape {
  text-align: center;
  margin-top: 2.5rem;
}

/* --- "Por que a TCC" (caixas 2×2 + texto) --- */
.porque-tcc__grade {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.porque-tcc__caixas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.porque-tcc__texto p {
  margin-block: 1.25rem 1.5rem;
}

/* No desktop, o texto (que vem primeiro no HTML, pela ordem correta dos
   títulos) é exibido à direita; as caixas ocupam a primeira coluna. */
@media (min-width: 1024px) {
  .porque-tcc__texto {
    order: 2;
  }
}

@media (max-width: 1023px) {
  .porque-tcc__grade {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .porque-tcc__caixas {
    grid-template-columns: 1fr;
  }
}

/* --- Passos numerados ("Como funciona" / "Como é uma sessão") --- */
.passos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  counter-reset: passo;
}

.passo {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: var(--raio-cartao);
  background-color: var(--branco);
  border: var(--borda-cartao);
}

.passo__numero {
  font-family: var(--fonte-titulos);
  font-size: 3.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--verde-claro);
}

.passo h3 {
  font-size: 1.375rem;
  margin-bottom: 0.35rem;
}

.passo p {
  font-size: 0.9375rem;
}

.section--bege .passo,
.section--branca .passo {
  background-color: var(--off-white);
}

@media (max-width: 767px) {
  .passos {
    grid-template-columns: 1fr;
  }
}

/* =====[ 12. Página "Como posso te ajudar" ]=============================== */

.bloco-especialidade {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  /* Compensa o header fixo ao chegar por âncora (#ansiedade etc.) */
  scroll-margin-top: 96px;
}

.bloco-especialidade + .bloco-especialidade {
  border-top: 1px solid rgba(47, 79, 63, 0.10);
}

/* Alterna o lado do painel ilustrado, como nos cards do template */
.bloco-especialidade:nth-of-type(even) .bloco-especialidade__painel {
  order: 2;
}

.bloco-especialidade__painel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  border-radius: 24px;
  background-color: var(--bege-claro);
  padding: 3rem;
}

.bloco-especialidade:nth-of-type(odd) .bloco-especialidade__painel {
  background-color: var(--verde-claro);
}

.bloco-especialidade__painel img {
  width: min(60%, 240px);
  opacity: 0.9;
}

.bloco-especialidade__cabecalho {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bloco-especialidade__texto p {
  margin-bottom: 1rem;
}

.bloco-especialidade__texto .btn {
  margin-top: 0.75rem;
}

@media (max-width: 1023px) {
  .bloco-especialidade {
    grid-template-columns: 1fr;
  }

  .bloco-especialidade:nth-of-type(even) .bloco-especialidade__painel {
    order: 0;
  }

  .bloco-especialidade__painel {
    min-height: 220px;
    padding: 2rem;
  }
}

/* Faixa "para quem é o atendimento" */
.publico__chips {
  justify-content: center;
  margin-block: 2rem 1.5rem;
}

.publico__notas {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  color: var(--texto);
}

/* =====[ 13. Página "Abordagem TCC" ]====================================== */

.tcc-intro__grade {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.tcc-intro__texto p {
  margin-bottom: 1rem;
}

.tcc-intro__painel {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background-color: var(--bege-claro);
  padding: 3rem;
}

.tcc-intro__painel img {
  width: min(70%, 280px);
  border-radius: 50%;
}

@media (max-width: 1023px) {
  .tcc-intro__grade {
    grid-template-columns: 1fr;
  }
}

/* =====[ 14. Página "Meus ideais" ]======================================== */

.ideais-intro {
  max-width: 720px;
}

.ideais-intro p {
  margin-top: 1.25rem;
}

/* Citação em destaque */
.citacao-destaque {
  position: relative;
  padding-block: var(--espaco-secao);
  overflow: hidden;
}

.citacao-destaque__ornamento {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 80vw);
  opacity: 0.10;
  pointer-events: none;
}

.citacao-destaque blockquote {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.citacao-destaque blockquote p {
  font-family: var(--fonte-titulos);
  font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.35;
  color: var(--verde-principal);
  max-width: none;
}

.citacao-destaque cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--fonte-corpo);
  font-style: normal;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--cinza-texto);
}

/* =====[ 15. Agendamento, Contato, Política e 404 ]======================== */

/* --- Agendamento --- */
.calendly-area {
  max-width: 900px;
  margin-inline: auto;
}

.calendly-inline-widget {
  min-width: 320px;
  height: 760px;
  border-radius: var(--raio-cartao);
  overflow: hidden;
  border: var(--borda-cartao);
  background-color: var(--branco);
}

/* Cartão exibido enquanto o Calendly não está configurado */
.calendly-fallback {
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem);
}

.calendly-fallback h3 {
  margin-bottom: 0.75rem;
}

.calendly-fallback p {
  margin-inline: auto;
  margin-bottom: 1.5rem;
}

.lista-checagem {
  list-style: none;
  display: grid;
  gap: 1rem;
  max-width: 640px;
}

.lista-checagem li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.lista-checagem svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.2rem;
  color: var(--verde-salvia);
}

/* --- Contato --- */
.canais-grade {
  grid-template-columns: repeat(4, 1fr);
}

.canal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.canal h3 {
  font-size: 1.375rem;
}

.canal p,
.canal a {
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.canal .canal__pendente {
  color: var(--cinza-texto);
}

@media (max-width: 1023px) {
  .canais-grade {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 639px) {
  .canais-grade {
    grid-template-columns: 1fr;
  }
}

.formulario-contato {
  max-width: 640px;
  margin-inline: auto;
}

.formulario-contato .btn {
  width: 100%;
}

.formulario-contato__nota {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--cinza-texto);
  text-align: center;
}

/* --- Política de privacidade (texto corrido) --- */
.texto-legal {
  max-width: 760px;
}

.texto-legal h2 {
  font-size: 1.75rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.texto-legal p,
.texto-legal li {
  margin-bottom: 0.75rem;
}

.texto-legal ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.texto-legal .texto-legal__atualizacao {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--cinza-texto);
}

/* --- Página 404 --- */
.pagina-404 {
  position: relative;
  text-align: center;
  padding-block: clamp(4rem, 10vw, 7rem);
  overflow: hidden;
}

.pagina-404__ornamento {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, 70vw);
  opacity: 0.08;
  pointer-events: none;
}

.pagina-404 .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.pagina-404 p {
  max-width: 50ch;
}

.pagina-404__botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* --- Página "Sobre mim" --- */
.sobre-grade {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.retrato-moldura {
  position: relative;
}

/* Ornamento "folha" atrás do retrato */
.retrato-moldura__ornamento {
  position: absolute;
  left: -32px;
  top: -32px;
  width: 150px;
  opacity: 0.15;
  pointer-events: none;
}

.retrato-moldura__foto {
  position: relative;
  width: min(100%, 420px);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
}

.sobre-texto p {
  margin-bottom: 1rem;
}

@media (max-width: 1023px) {
  .sobre-grade {
    grid-template-columns: 1fr;
  }

  .retrato-moldura {
    justify-self: center;
  }
}

/* Lista de checagem centralizada (formação, preparação para a sessão) */
.lista-checagem--central {
  margin-inline: auto;
}

/* =====[ 16. Animações de entrada e movimento reduzido ]=================== */

/* A classe .animar é adicionada pelo main.js apenas quando o navegador
   suporta IntersectionObserver — sem JavaScript, tudo fica visível. */
.animar {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 450ms ease, transform 450ms ease;
}

.animar.visivel {
  opacity: 1;
  transform: none;
}

/* Respeita quem prefere menos movimento: as entradas suaves são desativadas
   (o main.js também deixa de ativá-las) e as transições ficam instantâneas. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .animar,
  .animar.visivel {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .acordeao__painel,
  .acordeao__sinal,
  .btn,
  .link-seta::after,
  .whatsapp-flutuante,
  .card,
  .header,
  .header__nav {
    transition: none;
  }

  .btn--primario:hover,
  .btn--claro:hover,
  .whatsapp-flutuante:hover,
  .card:hover,
  .link-seta:hover::after {
    transform: none;
  }
}

/* =====[ 17. Regra final de segurança ]==================================== */

/* O atributo hidden deve sempre vencer qualquer display definido acima
   (fica por último de propósito, para ganhar no desempate de origem). */
[hidden] {
  display: none;
}