/* ============================================================
   Raphael Holanda — Psicólogo Clínico
   Folha de estilos principal
   Paleta: #FFFFF7 (marfim) · #FFFF7C (amarelo) · #1F2A24 (grafite)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Cores */
  --ivory:        #FFFFF7;
  --white:        #FFFFFF;
  --accent:       #FFFF7C;
  --accent-deep:  #F2E75C;   /* hover: amarelo levemente mais saturado */
  --accent-soft:  #FFFFC9;   /* amarelo lavado, para fundos de ícone */
  --ink:          #1F2A24;   /* títulos, texto, ícones */
  --ink-soft:     #4A574F;   /* texto de apoio */
  --ink-mute:     #78847C;   /* legendas */
  --line:         #E7E6D6;   /* bordas */
  --line-strong:  #D6D5C2;

  /* Rodapé: bege quente da mesma família do amarelo (matiz ~50°, bem lavado).
     Fecha a página sem sair da paleta clara; o contraste fica por conta do grafite. */
  --footer-bg:     #F5F1DF;
  --footer-line:   #E2DCC0;

  /* Tipografia */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Espaçamento e formas */
  --container:     1200px;
  --container-nar:  820px;
  --gutter:        clamp(1.25rem, 4vw, 2.5rem);
  --section-y:     clamp(4.5rem, 9vw, 8.5rem);
  --radius-sm:     10px;
  --radius:        16px;
  --radius-lg:     24px;
  --radius-pill:   999px;
  --header-h:      76px;

  /* Sombras discretas */
  --shadow-sm: 0 1px 2px rgba(31,42,36,.05), 0 4px 14px rgba(31,42,36,.04);
  --shadow-md: 0 2px 6px rgba(31,42,36,.06), 0 14px 40px rgba(31,42,36,.07);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;          /* 17px */
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0;
  font-variation-settings:"SOFT" 40, "WONK" 0;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }
strong{ font-weight:600; }

a{ color:inherit; text-decoration:none; }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* Foco visível e consistente */
:where(a,button,[tabindex],iframe,summary):focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}

/* Âncoras não ficam escondidas atrás do header */
[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }

/* ---------- 3. Utilitários ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:var(--container-nar); }

.section{ padding-block:var(--section-y); }
.section--alt{ background:var(--white); }

.section__head{
  max-width:44rem;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.section__title{
  font-size:clamp(2rem,4.4vw,3.1rem);
  margin-bottom:.9rem;
}
.section__lead{
  font-family:var(--font-display);
  /* A frase tem 56 caracteres e sua largura renderizada é cerca de 27x o tamanho
     da fonte. O termo do meio dimensiona a fonte pela largura disponível para que
     ela caiba em uma linha; o piso de 1.15rem impede que encolha além do legível
     em telas estreitas, onde uma linha só exigiria uns 12px. */
  font-size:clamp(1.15rem, calc((100vw - 2 * var(--gutter)) / 28), 1.6rem);
  line-height:1.3;
  font-weight:400;
  color:var(--ink);
  margin-bottom:1rem;
}
.section__intro{
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  color:var(--ink-soft);
  max-width:38rem;
}

/* Cabeçalho de seção centralizado. O traço do olho d'água acompanha,
   e a introdução precisa sobrescrever a justificação do texto corrido. */
.section__head--centro{ margin-inline:auto; text-align:center; }

/* "Localização e atendimento" é longo e quebrava em duas linhas no celular.
   A largura renderizada dele é cerca de 12x o tamanho da fonte, então o min()
   reduz a fonte apenas o necessário para caber em uma linha. Sem white-space:
   nowrap de propósito: se a fonte não carregar e a substituta for mais larga,
   é melhor quebrar a linha do que estourar a lateral da tela. */
.local__titulo{
  font-size:min(clamp(2rem,4.4vw,3.1rem), calc((100vw - 2 * var(--gutter)) / 12.4));
}
.section__head--centro .eyebrow{ justify-content:center; }
.section__head--centro .section__lead,
.section__head--centro .section__intro{ margin-inline:auto; }
.section__head--centro .section__intro{ text-align:center; }

.eyebrow{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:1rem;
}
.eyebrow::before{
  content:"";
  width:2.2rem;
  height:3px;
  border-radius:2px;
  background:var(--accent);
  flex:none;
}

.highlight{
  position:relative;
  display:inline;
  z-index:0;
  font-style:italic;
}
/* Variante do marca-texto que funciona fora de um contexto de empilhamento
   e que acompanha a quebra de linha (o ::after do .highlight não faz nem um nem outro). */
.highlight--plain{
  font-style:normal;
  background-image:linear-gradient(to top,
    transparent 0, transparent .08em,
    var(--accent) .08em, var(--accent) .52em,
    transparent .52em);
  padding:0 .14em;
  border-radius:3px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.highlight--plain::after{ display:none; }
.highlight::after{
  content:"";
  position:absolute;
  inset:auto 0 .08em 0;
  height:.42em;
  background:var(--accent);
  z-index:-1;
  border-radius:3px;
}

.prose{ color:var(--ink-soft); }
.prose p{ margin-bottom:1.2em; }
.prose--lg{ font-size:clamp(1.05rem,1.5vw,1.15rem); }

/* Texto corrido justificado.
   Justificar sem hifenização abre "rios" de espaço entre as palavras, ainda mais
   em coluna estreita. hyphens:auto + lang="pt-BR" no <html> deixa o navegador
   separar as sílabas e o espaçamento fica regular. Aplicado só a parágrafos de
   leitura: títulos, listas, cards e rodapé continuam alinhados à esquerda. */
.prose p,
.faq__panel-inner p,
.hero__text,
.section__intro,
.local__text{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  hyphens:auto;
}

/* Marcadores de conteúdo a preencher — remover ao publicar */
.placeholder{
  color:#8A6A00;
  background:rgba(255,255,124,.45);
  border-bottom:1px dashed #B99A16;
  padding:0 .2em;
  font-size:.92em;
  font-weight:500;
}
.placeholder--block{
  display:block;
  margin-top:1.25rem;
  padding:.6rem .85rem;
  border:1px dashed #B99A16;
  border-radius:var(--radius-sm);
  font-size:.85rem;
}

.icon{
  width:24px; height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
.icon--xs{ width:17px; height:17px; }
.icon--accent{ width:20px; height:20px; color:var(--ink); }

.skip-link{
  position:absolute;
  left:.75rem; top:.75rem;
  z-index:1000;
  padding:.7rem 1.1rem;
  background:var(--ink);
  color:var(--ivory);
  border-radius:var(--radius-sm);
  font-size:.9rem;
  font-weight:600;
  transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* ---------- 4. Botões ---------- */
.btn{
  --btn-py:.9rem;
  --btn-px:1.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:var(--btn-py) var(--btn-px);
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:.975rem;
  font-weight:600;
  letter-spacing:.005em;
  line-height:1.2;
  text-align:center;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s var(--ease), background-color .2s var(--ease),
             border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn .icon{ width:19px; height:19px; }

.btn--sm{ --btn-py:.62rem; --btn-px:1.15rem; font-size:.9rem; }
.btn--lg{ --btn-py:1.05rem; --btn-px:2rem; font-size:1.03rem; }

.btn--primary{
  background:var(--accent);
  color:var(--ink);
  border-color:var(--accent);
  box-shadow:var(--shadow-sm);
}
.btn--primary:hover{
  background:var(--accent-deep);
  border-color:var(--accent-deep);
  box-shadow:var(--shadow-md);
}

.btn--outline{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn--outline:hover{ background:var(--ink); color:var(--ivory); }

.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn--ghost:hover{ background:var(--white); border-color:var(--ink); }

.btn--dark{
  background:var(--ink);
  color:var(--ivory);
  border-color:var(--ink);
}
.btn--dark:hover{ background:#16201B; box-shadow:var(--shadow-md); }

/* ---------- 5. Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,247,.88);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(31,42,36,.05);
}

.header__inner{
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  flex:none;
}
.brand__mark{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--accent);
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:600;
  color:var(--ink);
  flex:none;
}
.brand__text{ display:flex; flex-direction:column; line-height:1.12; }
.brand__name{
  font-family:var(--font-display);
  font-size:1.12rem;
  font-weight:500;
  letter-spacing:-.01em;
}
.brand__role{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__list{ display:flex; align-items:center; gap:1.65rem; }
.nav__link{
  position:relative;
  font-size:.95rem;
  font-weight:500;
  color:var(--ink-soft);
  padding-block:.35rem;
  transition:color .2s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  border-radius:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after,
.nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--ink); font-weight:600; }

/* CTA compacto do header — visível apenas quando o menu vira hamburguer */
.header__cta{ display:none; white-space:nowrap; }

.menu-toggle{
  display:none;
  width:46px; height:46px;
  border-radius:12px;
  border:1.5px solid var(--line-strong);
  background:var(--white);
  place-items:center;
  flex:none;
}
.menu-toggle__bars{ display:block; width:20px; height:14px; position:relative; }
.menu-toggle__bars span{
  position:absolute; left:0;
  width:100%; height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .28s var(--ease), opacity .18s var(--ease);
}
.menu-toggle__bars span:nth-child(1){ top:0; }
.menu-toggle__bars span:nth-child(2){ top:6px; }
.menu-toggle__bars span:nth-child(3){ top:12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero{
  padding-top:clamp(2.75rem,6vw,5rem);
  padding-bottom:clamp(3.5rem,7vw,6rem);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-14rem; right:-10rem;
  width:38rem; height:38rem;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,124,.42), rgba(255,255,124,0) 68%);
  pointer-events:none;
  z-index:0;
}
.hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
.hero__title{
  font-size:clamp(2.7rem,6.4vw,4.6rem);
  line-height:1.03;
  margin-bottom:.6rem;
}
.hero__credential{
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink-soft);
  margin-bottom:1.6rem;
}
.hero__lead{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.6vw,1.95rem);
  line-height:1.3;
  font-weight:400;
  color:var(--ink);
  margin-bottom:1.25rem;
  max-width:24ch;
}
.hero__text{
  font-size:1.05rem;
  color:var(--ink-soft);
  max-width:34rem;
  margin-bottom:2rem;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-bottom:2.25rem;
}
.hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.hero__badges li{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.9rem;
  font-weight:500;
  color:var(--ink-soft);
}
.hero__badges .icon{ color:var(--ink); }

.hero__media{ position:relative; }
.hero__photo-wrap{
  position:relative;
  z-index:1;
  border-radius:clamp(20px,4vw,32px) clamp(20px,4vw,32px) clamp(90px,16vw,140px) clamp(20px,4vw,32px);
  overflow:hidden;
  background:var(--accent-soft);
  box-shadow:var(--shadow-md);
  aspect-ratio:4/5;
}
.hero__photo{
  width:100%; height:100%;
  object-fit:cover;
  /* A foto (1086x1448) é mais alta que a moldura 4/5: o corte sai mais embaixo,
     na camiseta, preservando o espaço acima do cabelo. */
  object-position:50% 25%;
}
.hero__photo-blob{
  position:absolute;
  z-index:0;
  inset:auto -1.5rem -1.5rem auto;
  width:62%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--accent);
  opacity:.55;
  filter:blur(2px);
}

/* ---------- 7. Áreas de atuação ---------- */
.areas__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:.75rem;
}
/* Cards compactos: só ícone e título, lado a lado */
.area-card{
  display:flex;
  align-items:center;
  gap:.85rem;
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:14px;
  padding:.95rem 1.1rem;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.area-card:hover{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-md);
}
.area-card__icon{
  display:grid;
  place-items:center;
  width:40px; height:40px;
  border-radius:11px;
  background:var(--accent);
  color:var(--ink);
  flex:none;
}
.area-card__icon .icon{ width:20px; height:20px; }
.area-card__title{
  font-size:1.02rem;
  line-height:1.3;
  letter-spacing:-.005em;
  margin:0;
}

/* ---------- 8. Sobre ---------- */
/* "Sobre mim" virou rótulo da seção, acima da foto e do texto */
.sobre__rotulo{ margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.sobre__titulo{ text-align:center; }

.sobre__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,5vw,5rem);
  align-items:center;
}
.sobre__media{ position:relative; }
.sobre__photo-wrap{
  position:relative;
  z-index:1;
  border-radius:clamp(90px,14vw,130px) clamp(20px,4vw,28px) clamp(20px,4vw,28px) clamp(20px,4vw,28px);
  overflow:hidden;
  background:var(--accent-soft);
  aspect-ratio:4/5;
  box-shadow:var(--shadow-md);
}
.sobre__photo{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 25%;
}
.sobre__frame{
  position:absolute;
  z-index:0;
  inset:1.75rem -1.75rem -1.75rem 1.75rem;
  border:2px solid var(--accent);
  border-radius:clamp(90px,14vw,130px) clamp(20px,4vw,28px) clamp(20px,4vw,28px) clamp(20px,4vw,28px);
}


/* ---------- 9. Banner de CTA ---------- */
.cta-banner{
  background:var(--accent);
  padding-block:clamp(3rem,6vw,4.5rem);
}
/* Frase e botão centralizados, um sob o outro */
.cta-banner__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(1.6rem,3.5vw,2.25rem);
}
.cta-banner__title{
  font-size:clamp(1.75rem,4vw,2.85rem);
  font-weight:400;
  line-height:1.2;
  max-width:36ch;
  margin:0;
  text-wrap:balance;
}
/* O peso maior no fim da frase faz o contraste do modelo,
   sem precisar carregar um peso novo da fonte. */
.cta-banner__title strong{ font-weight:600; }

/* ---------- 10. Abordagem ---------- */
/* Texto em coluna única, centrado, com medida de leitura confortável */
.abordagem__grid{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.abordagem__texto{ max-width:46rem; }

/* ---------- 11. Localização ---------- */
.local__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}
.local__block{
  padding-bottom:1.6rem;
  margin-bottom:1.6rem;
  border-bottom:1px solid var(--line);
}
.local__title{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:1.15rem;
  margin-bottom:.7rem;
}
.local__text{ color:var(--ink-soft); font-size:1rem; margin:0; }
.local__link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:.6rem;
  font-size:.95rem;
  font-weight:600;
  color:var(--ink);
  border-bottom:2px solid var(--accent);
  padding-bottom:1px;
  transition:background-color .2s var(--ease);
}
.local__link:hover{ background:var(--accent); }

.local__hours{ display:grid; gap:.5rem; }
.local__hours li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  font-size:.98rem;
  color:var(--ink-soft);
  border-bottom:1px dotted var(--line-strong);
  padding-bottom:.4rem;
}
.local__hours strong{ color:var(--ink); }
.local__note{
  margin-top:.85rem;
  font-size:.88rem;
  color:var(--ink-mute);
}
/* O .btn é inline-flex, então margem automática sozinha não centraliza.
   width:fit-content o torna um bloco do tamanho do conteúdo, aí a margem centra. */
.local__cta{
  display:flex;
  width:fit-content;
  margin-inline:auto;
}

.local__map{
  position:sticky;
  top:calc(var(--header-h) + 1.5rem);
}
.local__map iframe{
  width:100%;
  height:clamp(340px,52vw,560px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  filter:saturate(.85);
}
.local__map-note{
  margin-top:.75rem;
  font-size:.85rem;
  text-align:center;
}

/* ---------- 12. FAQ ---------- */
.faq{ display:grid; gap:.75rem; }
.faq__item{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq__item.is-open{
  border-color:var(--accent-deep);
  box-shadow:var(--shadow-sm);
}
.faq__heading{ margin:0; font-size:inherit; }
.faq__trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  padding:1.15rem clamp(1.1rem,2.5vw,1.6rem);
  text-align:left;
  font-family:var(--font-display);
  font-size:clamp(1.02rem,1.9vw,1.18rem);
  font-weight:500;
  line-height:1.35;
  color:var(--ink);
}
.faq__trigger:hover{ background:var(--accent-soft); }
.faq__chevron{
  position:relative;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
  transition:transform .3s var(--ease);
}
.faq__chevron::before,
.faq__chevron::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:12px; height:2px;
  border-radius:2px;
  background:var(--ink);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq__chevron::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__trigger[aria-expanded="true"] .faq__chevron::after{
  transform:translate(-50%,-50%) rotate(0deg);
  opacity:0;
}

.faq__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .32s var(--ease);
}
.faq__panel[data-open="true"]{ grid-template-rows:1fr; }
.faq__panel-inner{
  overflow:hidden;
  padding-inline:clamp(1.1rem,2.5vw,1.6rem);
  color:var(--ink-soft);
  font-size:1rem;
}
.faq__panel[data-open="true"] .faq__panel-inner{
  padding-bottom:1.45rem;
}

.faq__footer{
  margin-top:2.25rem;
  text-align:center;
  color:var(--ink-soft);
}
.faq__footer a{
  font-weight:600;
  color:var(--ink);
  border-bottom:2px solid var(--accent);
  transition:background-color .2s var(--ease);
}
.faq__footer a:hover{ background:var(--accent); }

/* ---------- 13. Footer ---------- */
.footer{
  background:var(--footer-bg);
  color:var(--ink-soft);
  border-top:1px solid var(--footer-line);
  padding-top:clamp(3rem,6vw,4.5rem);
  font-size:.96rem;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.15fr 1fr;
  gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
.brand--footer{ margin-bottom:1rem; }
.brand--footer .brand__name{ color:var(--ink); }
.brand--footer .brand__role{ color:var(--ink-soft); }
.footer__crp{ font-size:.9rem; color:var(--ink-soft); margin-bottom:.75rem; }
.footer__tagline{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-style:italic;
  color:var(--ink);
  max-width:26ch;
  margin:0;
}
/* Título de coluna com o mesmo traço amarelo das seções */
.footer__title{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:1.1rem;
}
.footer__title::before{
  content:"";
  width:1.4rem;
  height:3px;
  border-radius:2px;
  background:var(--accent);
  flex:none;
}
.footer__list{ display:grid; gap:.6rem; }
.footer__list li{ color:var(--ink-soft); line-height:1.5; }
.footer__list a{ transition:color .2s var(--ease), background-color .2s var(--ease); }
.footer__list a:hover{ color:var(--ink); background:var(--accent); }
.footer__cta{ margin-top:1.25rem; }

.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:0;
  padding-block:1.5rem;
  border-top:1px solid var(--footer-line);
  font-size:.85rem;
  color:var(--ink-soft);
}
.footer__copy{ margin:0; }
.footer__legal{ display:flex; flex-wrap:wrap; gap:1.25rem; }
.footer__legal a{ transition:color .2s var(--ease); }
.footer__legal a:hover{ color:var(--ink); text-decoration:underline; }

/* ---------- 14. WhatsApp flutuante ---------- */
.wa-float{
  position:fixed;
  right:clamp(1rem,3vw,1.75rem);
  bottom:clamp(1rem,3vw,1.75rem);
  z-index:90;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.75rem 1.15rem .75rem .85rem;
  border-radius:var(--radius-pill);
  background:#1FA855;
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  box-shadow:0 10px 30px rgba(31,42,36,.22);
  transition:transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-float svg{ width:26px; height:26px; fill:currentColor; flex:none; }
.wa-float:hover{
  transform:translateY(-3px);
  background:#17914A;
  box-shadow:0 14px 36px rgba(31,42,36,.28);
}
.wa-float:focus-visible{ outline-color:var(--ink); }

/* ---------- 15. Animações de entrada ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-visible{
  opacity:1;
  transform:none;
}

/* ---------- 16. Responsivo ---------- */
@media (max-width:1080px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:960px){
  .hero__grid,
  .sobre__grid,
  .local__grid{ grid-template-columns:1fr; }

  /* No celular a foto entra logo depois da frase de propósito. Em vez de duplicar a
     imagem, o wrapper do texto deixa de gerar caixa (display:contents) e seus
     filhos viram itens da própria grade, o que permite reordená-los.
     A grade zera o gap: o espaçamento volta a ser o das margens de cada item. */
  .hero__grid{ gap:0; }
  .hero__content{ display:contents; }
  .hero__content > .eyebrow{ order:1; }
  .hero__title{ order:2; }
  .hero__credential{ order:3; }
  .hero__lead{
    order:4;
    max-width:none;
    text-align:center;
    text-wrap:balance;
    /* A 22,4px a frase quebrava em três linhas no celular. O piso de 1.2rem
       a mantém em duas até 360px de largura, sem encolher em telas maiores. */
    font-size:clamp(1.2rem,3.5vw,1.4rem);
  }
  .hero__media{
    order:5;
    max-width:26rem;
    width:100%;
    margin:.5rem auto 2rem;
  }
  .hero__text{ order:6; }
  .hero__actions{ order:7; }
  .hero__badges{ order:8; }

  .sobre__media{ order:-1; max-width:24rem; }
  .sobre__frame{ display:none; }

  .local__map{ position:static; }
}

/* Menu mobile */
@media (max-width:1024px){
  .menu-toggle{ display:grid; }
  .header__cta{ display:inline-flex; }

  .nav{
    position:fixed;
    inset:var(--header-h) 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:1.25rem var(--gutter) 2rem;
    background:var(--ivory);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(31,42,36,.1);
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
  }
  .nav.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }
  .nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .nav__list li + li{ border-top:1px solid var(--line); }
  .nav__link{
    display:block;
    padding:.95rem .25rem;
    font-size:1.05rem;
  }
  .nav__link::after{ display:none; }
  .nav__link.is-active{ color:var(--ink); }
  .nav__cta{
    margin-top:1.25rem;
    width:100%;
    --btn-py:.95rem;
    font-size:1rem;
  }

  body.is-menu-open{ overflow:hidden; }
}

@media (max-width:640px){
  body{ font-size:1rem; }
  :root{ --header-h:68px; }

  .header__inner{ gap:.75rem; }
  .header__cta{ display:none; }   /* no celular o CTA fica no botão flutuante */
  .brand__mark{ width:36px; height:36px; font-size:1.2rem; }
  .brand__name{ font-size:1.02rem; }

  .hero__actions .btn{ width:100%; }
  .hero__badges{ gap:.55rem 1.1rem; }


  .cta-banner__inner .btn{ width:100%; }

  .footer__grid{ grid-template-columns:1fr; gap:2.25rem; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }

  .wa-float__label{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .wa-float{ padding:.85rem; }
}

/* ---------- 17. Preferências do usuário ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
}

@media print{
  .site-header,.wa-float,.local__map,.cta-banner .btn{ display:none !important; }
  body{ background:#fff; font-size:11pt; }
  .js [data-reveal]{ opacity:1; transform:none; }
}