/* =====================================================================
   Bárbara Vilardi · Psicóloga
   ZAVYRA — 2026
   Sem framework. Sem build. Sem dependência externa.
   Ornamento é desenhado aqui dentro (SVG inline e data URI):
   nenhuma biblioteca de ícone, nenhuma fonte de terceiro, nenhum CDN.
   ===================================================================== */

/* ---------------------------------------------------------- TOKENS -- */
:root{
  /* cor — paleta quente e baixa em saturação.
     Deliberadamente longe do azul-clínico e do rosa-pastel de nicho. */
  --paper:      #faf7f2;
  --paper-warm: #f3ede4;
  --paper-deep: #ece3d6;
  --ink:        #23201d;
  --ink-soft:   #55504a;
  --ink-faint:  #8a827a;
  --line:       #e3dbd0;
  --accent:     #3f5347;   /* verde-oliva profundo */
  --accent-deep:#2c3b32;
  --accent-dim: #6d8375;
  --clay:       #b98e6e;

  /* tipografia fluida — sem media query para tamanho de fonte */
  --f-xs:   clamp(.78rem, .76rem + .1vw,  .84rem);
  --f-sm:   clamp(.9rem,  .87rem + .15vw, .98rem);
  --f-base: clamp(1.02rem, .98rem + .2vw, 1.15rem);
  --f-lede: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --f-h3:   clamp(1.1rem, 1.02rem + .4vw, 1.3rem);
  --f-h2:   clamp(1.7rem, 1.35rem + 1.6vw, 2.7rem);
  --f-h1:   clamp(2.3rem, 1.6rem + 3.2vw, 4.4rem);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* ritmo */
  --gut:  clamp(1.25rem, 4vw, 2.5rem);
  --sec:  clamp(4rem, 9vw, 8.5rem);
  --max:  76rem;
  --measure: 34rem;

  --r:     14px;
  --r-lg:  clamp(18px, 2.4vw, 30px);
  /* arco do retrato. Domo suave, NÃO semicírculo: com raio maior o corte
     lateral come o cabelo, porque nesta foto a cabeça começa a ~2% da
     altura do quadro. Trocar a foto obriga a revisar este valor. */
  --arco:  40% 40% 16px 16px / 18% 18% 5px 5px;

  --sombra:    0 18px 46px -26px rgba(35,32,29,.45);
  --sombra-sm: 0 8px 24px -14px rgba(35,32,29,.35);

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

  /* flor da marca, em CSS, para os divisores ornamentais */
  --flor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d8375'%3E%3Cellipse cx='12' cy='12' rx='1.7' ry='5.4'/%3E%3Cellipse cx='12' cy='12' rx='1.7' ry='5.4' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='1.7' ry='5.4' transform='rotate(120 12 12)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------- RESET -- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,p,ul,ol,figure,dl,dd{ margin:0; }
ul[class],ol[class]{ list-style:none; padding:0; }
img,picture,svg{ display:block; max-width:100%; }
button,input,textarea,select{ font:inherit; color:inherit; }
:where(a){ color:inherit; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--f-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Textura de papel. feTurbulence gerado na hora pelo próprio navegador —
   nenhuma imagem baixada. Fica em 3,5%: some se você procurar, mas tira
   o aspecto de "tela plana" das áreas grandes de cor chapada. */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* biblioteca de símbolos: fora do fluxo, sem virar um retângulo de 0px
   que o Safari às vezes ainda desenha */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* foco visível de verdade — acessibilidade não é enfeite */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:50%; top:-4rem; transform:translateX(-50%);
  z-index:100; background:var(--ink); color:var(--paper);
  padding:.7rem 1.2rem; border-radius:0 0 var(--r) var(--r);
  text-decoration:none; transition:top .2s var(--ease);
}
.skip:focus{ top:0; }

/* ----------------------------------------------------------- LAYOUT -- */
.wrap{
  width:min(100% - (var(--gut) * 2), var(--max));
  margin-inline:auto;
}
.narrow{ max-width:46rem; margin-inline:auto; }
.center{ text-align:center; }
.center .lede,
.center p{ margin-inline:auto; }

.section{ padding-block:var(--sec); position:relative; }
.section--alt{ background:var(--paper-warm); }

/* ------------------------------------------------------------ ÍCONE -- */
/* Um único componente para todos os símbolos. currentColor faz o traço
   herdar a cor do contexto, então o mesmo ícone serve no creme e no verde. */
.ico{
  width:1.5rem; height:1.5rem;
  flex:none;
  color:var(--accent-dim);
}
.ico--sm{ width:1.05rem; height:1.05rem; }
.ico--md{ width:1.9rem; height:1.9rem; }

/* ------------------------------------------------------ TIPOGRAFIA -- */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.015em;
  text-wrap:balance;
}
/* a margem colapsa com a do .orn quando ele vem em seguida, então este
   valor só aparece nos títulos que NÃO têm divisor embaixo */
h2{ font-size:var(--f-h2); margin-bottom:1.1rem; }
h3{ font-size:var(--f-h3); line-height:1.25; margin-bottom:.5rem; }

p{ text-wrap:pretty; max-width:var(--measure); }

.eyebrow{
  font-family:var(--sans);
  font-size:var(--f-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-dim);
  margin-bottom:1rem;
}

.lede{
  font-size:var(--f-lede);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:32rem;
}

.note{
  font-size:var(--f-sm);
  color:var(--ink-faint);
  border-left:2px solid var(--line);
  padding-left:1.1rem;
  margin-top:2.5rem;
  max-width:36rem;
}

.link-quiet{
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color .22s var(--ease), border-color .22s var(--ease);
}
.link-quiet:hover{ color:var(--accent); border-color:var(--accent); }

/* --------------------------------------------- CABEÇA DE SEÇÃO + ORN -- */
.cabeca{ max-width:44rem; }
.cabeca--center{ margin-inline:auto; text-align:center; }
.cabeca--center .lede,
.cabeca--center p{ margin-inline:auto; }

/* divisor ornamental: dois fios que somem nas pontas e a flor da marca
   no meio. É o elemento que amarra todas as seções visualmente. */
.orn{
  display:flex; align-items:center; justify-content:center;
  gap:.85rem;
  margin:1.35rem 0 1.6rem;
}
.orn span{
  width:clamp(2.2rem, 6vw, 3.6rem);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-dim));
}
.orn span:last-child{
  background:linear-gradient(90deg, var(--accent-dim), transparent);
}
.orn i{
  width:15px; height:15px;
  background:var(--flor) center/contain no-repeat;
  opacity:.85;
}
.orn--left{ justify-content:flex-start; }

/* ------------------------------------------------------------ BOTÃO -- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--accent);
  color:#fff;
  font-size:var(--f-sm);
  font-weight:500;
  letter-spacing:.01em;
  text-decoration:none;
  padding:.95em 1.9em;
  border-radius:999px;
  box-shadow:var(--sombra-sm);
  transition:background .24s var(--ease), transform .24s var(--ease),
             box-shadow .24s var(--ease);
}
.btn:hover{ background:#334539; box-shadow:var(--sombra); }
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:.6em 1.3em; font-size:var(--f-xs); box-shadow:none; }
.btn--lg{ padding:1.05em 2.2em; font-size:var(--f-base); }
.btn .ico{ width:1.2em; height:1.2em; color:currentColor; }

/* ---------------------------------------------------------- TOPBAR -- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.topbar.is-stuck{ border-bottom-color:var(--line); }

.topbar__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:4.6rem;
}

.brand{
  display:flex; align-items:center; gap:.65rem;
  text-decoration:none; line-height:1.15;
}
.brand__mark{
  width:1.7rem; height:1.7rem;
  color:var(--accent);
  transition:transform .5s var(--ease);
}
.brand:hover .brand__mark{ transform:rotate(60deg); }
.brand__name{
  display:block;
  font-family:var(--serif);
  font-size:1.12rem;
  letter-spacing:-.01em;
}
.brand__crp{
  display:block;
  font-size:.66rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:.15rem;
}

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__list{ display:flex; gap:1.75rem; }
.nav__list a{
  font-size:var(--f-xs);
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--ink-soft);
  position:relative;
  padding-bottom:3px;
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__list a:hover{ color:var(--ink); }
.nav__list a:hover::after{ transform:scaleX(1); transform-origin:left; }

.burger{
  display:none;
  background:none; border:0; cursor:pointer;
  padding:.6rem; margin-right:-.6rem;
}
.burger__box{ display:block; width:22px; height:14px; position:relative; }
.burger__bar,
.burger__bar::before,
.burger__bar::after{
  content:""; position:absolute; left:0;
  width:22px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger__bar{ top:6px; }
.burger__bar::before{ top:-6px; }
.burger__bar::after{ top:6px; }
.burger[aria-expanded="true"] .burger__bar{ transform:rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::before{ opacity:0; }
.burger[aria-expanded="true"] .burger__bar::after{ transform:rotate(-90deg) translateX(-6px); }

/* ----------------------------------------------------------- PAINEL -- */
/* A seção deixa de ser "texto solto no fundo" e passa a ter uma peça
   com borda e canto arredondado. É o que dá o acabamento gráfico. */
.painel{
  position:relative;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 88% 0%,
      color-mix(in srgb, var(--clay) 12%, transparent), transparent 62%),
    linear-gradient(168deg, var(--paper-warm), var(--paper) 78%);
  padding:clamp(1.6rem, 4vw, 3.4rem);
}
.painel--hero{ padding-block:clamp(2rem, 5vw, 4rem); }

.painel--contato{
  overflow:hidden;
  background:
    radial-gradient(90% 120% at 50% 0%,
      color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
    linear-gradient(180deg, var(--paper-warm), var(--paper));
  padding-block:clamp(2.75rem, 7vw, 5rem);
}
/* flor grande e apagada no canto: assinatura, não enfeite gritante */
.painel__flor{
  position:absolute;
  right:-4.5rem; bottom:-4.5rem;
  width:17rem; height:17rem;
  color:var(--accent);
  opacity:.06;
  transform:rotate(18deg);
  pointer-events:none;
}

/* ---------------------------------------------------------- RETRATO -- */
/* A foto tratada como peça gráfica: painel de eco atrás, moldura em arco,
   lavagem de cor por cima e o selo da marca sobreposto. */
/* O próprio figure é a passe-partout: uma borda de cor em volta da foto,
   como uma gravura montada. Foi assim que o retrato deixou de parecer
   "imagem colada na página". */
.retrato{
  position:relative;
  margin:0;
  padding:.85rem;
  border-radius:var(--arco);
  background:color-mix(in srgb, var(--accent) 26%, var(--paper-warm));
  isolation:isolate;
}
/* fio de eco deslocado. É LINHA, não mancha: preenchido, virava um borrão
   cinza que qualquer um leria como sombra mal renderizada. */
.retrato__eco{
  position:absolute;
  inset:1.6rem -1.1rem -1.1rem 1.6rem;
  border-radius:var(--arco);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  z-index:-1;
}
.retrato__moldura{
  position:relative;
  border-radius:var(--arco);
  overflow:hidden;
  box-shadow:var(--sombra);
}
.retrato__moldura img{
  width:100%; height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  background:var(--paper-warm);
}
/* lavagem: puxa a base da foto para o verde da paleta, para o retrato não
   parecer recortado de outro lugar. Fica em .18 e começa em 58%: acima
   disso o jaleco marinho encardia e vira verde-lodo. */
.retrato__moldura::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(63,83,71,0) 58%,
    rgba(63,83,71,.18) 100%);
  box-shadow:inset 0 0 0 1px rgba(35,32,29,.08);
  pointer-events:none;
}
.retrato__flor{
  position:absolute;
  left:-1rem; bottom:1.8rem;
  width:3.5rem; height:3.5rem;
  padding:.9rem;
  border-radius:50%;
  background:var(--accent);
  color:var(--paper);
  box-shadow:var(--sombra-sm);
}

/* -------------------------------------------------------------- HERO -- */
.hero{ padding-block:clamp(2rem, 5vw, 4.5rem) var(--sec); }
.hero__in{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem, 6vw, 4.5rem);
  align-items:center;
}
.hero__title{
  font-size:var(--f-h1);
  margin-bottom:1.5rem;
}
.hero__title em{
  font-style:italic;
  color:var(--accent);
}
.hero__actions{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:1.5rem; margin-top:2.4rem;
}

/* ------------------------------------------------------ CREDENCIAIS -- */
/* O que um visitante confere antes de confiar, em uma linha só. */
.credenciais{
  margin-top:1.5rem;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper);
  overflow:hidden;
}
.credenciais li{
  padding:1.15rem 1.1rem;
  text-align:center;
  border-left:1px solid var(--line);
}
.credenciais li:first-child{ border-left:0; }
.credenciais strong{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.05rem;
  line-height:1.2;
}
.credenciais span{
  display:block;
  margin-top:.3rem;
  font-size:var(--f-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ------------------------------------------------------------ CARDS -- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(15rem,100%), 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-top:3.5rem;
}
.card{
  background:var(--paper);
  padding:2rem 1.75rem;
  transition:background .3s var(--ease);
}
/* teto de 3 colunas: são 6 cards, e 3x2 fecha certinho.
   auto-fit sozinho abriria 5 colunas em tela larga e deixaria um órfão. */
@media (min-width:56rem){
  .cards{ grid-template-columns:repeat(3, 1fr); }
}

.card:hover{ background:var(--paper-warm); }
.card .ico{
  width:1.8rem; height:1.8rem;
  margin-bottom:1.1rem;
  transition:transform .35s var(--ease), color .35s var(--ease);
}
.card:hover .ico{ color:var(--accent); transform:translateY(-2px); }
.card h3{ font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:-.005em; }
.card p{ font-size:var(--f-sm); color:var(--ink-soft); max-width:none; }

/* ------------------------------------------------------------ SOBRE -- */
.sobre{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem, 7vw, 5.5rem);
  align-items:center;
}
/* O `p` global não tem margem nenhuma (linha 153) e isso é de propósito:
   quase todo parágrafo da página é único dentro do seu bloco e já ganha
   espaçamento do container. O #sobre é a exceção — é o único lugar com
   dois parágrafos corridos, e sem isto eles se colam e viram um bloco só.
   Por isso a regra é `p + p` e mora aqui, e não lá em cima: se virar
   margem global, ela vaza para o painel de contato e para o rodapé. */
.sobre__text p + p{ margin-top:1.05em; }

.retrato--sobre{ max-width:24rem; }
/* espelhado: no #sobre a foto fica à esquerda do texto, então o eco cai
   para o lado de fora, longe da coluna de leitura */
.retrato--sobre .retrato__eco{ inset:1.6rem 1.6rem -1.1rem -1.1rem; }
.retrato--sobre .retrato__flor{ left:auto; right:-1rem; }

.facts{
  margin-top:2.5rem;
  border-top:1px solid var(--line);
}
.facts li{
  display:flex; gap:1rem; flex-wrap:wrap;
  padding:.85rem 0;
  border-bottom:1px solid var(--line);
  font-size:var(--f-sm);
  color:var(--ink-soft);
}
.facts strong{
  min-width:7.5rem;
  font-weight:500;
  color:var(--ink-faint);
  font-size:var(--f-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  padding-top:.2em;
}

/* ------------------------------------------------------ COMPROMISSOS -- */
/* Bloco escuro entre duas seções claras. Serve de respiro visual e
   carrega o que a lei permite afirmar (sigilo), sem prometer resultado. */
.compromissos{
  background:var(--accent-deep);
  color:#cfd8d1;
  padding-block:clamp(3rem, 7vw, 5.5rem);
}
.promessas{
  display:grid;
  gap:clamp(2rem, 5vw, 3.5rem);
}
/* três colunas ou uma. Duas deixam o terceiro item órfão, e órfão de
   três é a coisa mais visível que existe num grid. */
@media (min-width:56rem){
  .promessas{ grid-template-columns:repeat(3, 1fr); }
}
.promessa .ico{
  color:var(--paper);
  opacity:.85;
  margin-bottom:1.1rem;
}
.promessa h3{ color:var(--paper); margin-bottom:.6rem; }
.promessa p{
  font-size:var(--f-sm);
  color:#aab5ad;
  max-width:none;
  line-height:1.75;
}

/* ----------------------------------------------------------- LINHA -- */
/* Timeline em zigue-zague. O fio central só existe onde há espaço para
   duas colunas; abaixo disso vira uma pilha comum, sem gambiarra. */
.linha{
  position:relative;
  margin-top:3.5rem;
  display:grid;
  gap:1.75rem;
}
.linha__item{ position:relative; }
.linha__card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem, 3vw, 2.25rem);
  box-shadow:var(--sombra-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.linha__card:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.linha__n{
  font-family:var(--serif);
  font-size:1.6rem;
  line-height:1;
  color:var(--accent-dim);
  margin-bottom:.75rem;
}
.linha__card p{ color:var(--ink-soft); font-size:var(--f-sm); max-width:none; }

@media (min-width:56rem){
  .linha{ gap:0; }
  .linha::before{
    content:"";
    position:absolute; left:50%; top:0; bottom:0;
    width:1px;
    background:linear-gradient(180deg,
      transparent, var(--line) 10%, var(--line) 90%, transparent);
  }
  .linha__item{
    display:grid;
    grid-template-columns:1fr 1fr;
    padding-block:1.25rem;
  }
  .linha__item::after{           /* o ponto sobre o fio */
    content:"";
    position:absolute; left:50%; top:3rem;
    width:13px; height:13px;
    margin-left:-6.5px;
    border-radius:50%;
    background:var(--paper-warm);
    box-shadow:0 0 0 1px var(--line), inset 0 0 0 3.5px var(--accent-dim);
  }
  .linha__item:nth-child(odd) .linha__card{
    grid-column:1; margin-right:3.25rem;
  }
  .linha__item:nth-child(even) .linha__card{
    grid-column:2; margin-left:3.25rem;
  }
}

/* ----------------------------------------------------------- LOCAIS -- */
.locais{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-top:3rem;
}
.local{
  background:var(--paper);
  padding:2rem 1.75rem;
}
.local .ico{ margin-bottom:1.1rem; }
.local h3{ font-family:var(--sans); font-size:1.05rem; font-weight:600; }
.local p,
.local address{
  font-size:var(--f-sm);
  color:var(--ink-soft);
  font-style:normal;
  line-height:1.7;
  max-width:none;
}

/* -------------------------------------------------------------- FAQ -- */
.faq{
  margin-top:2.5rem;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--paper);
  overflow:hidden;
}
.faq details{ border-bottom:1px solid var(--line); }
.faq details:last-child{ border-bottom:0; }
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:1.35rem 3.25rem 1.35rem 1.6rem;
  position:relative;
  font-size:var(--f-h3);
  font-family:var(--serif);
  line-height:1.3;
  transition:color .22s var(--ease), background .22s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); background:var(--paper-warm); }
.faq summary::after{
  content:""; position:absolute; right:1.6rem; top:50%;
  width:11px; height:11px;
  border-right:1.5px solid var(--accent-dim);
  border-bottom:1.5px solid var(--accent-dim);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq__body{ padding:0 3.25rem 1.6rem 1.6rem; }
.faq__body p{ font-size:var(--f-sm); color:var(--ink-soft); max-width:none; }
.faq details[open] .faq__body{ animation:fadeIn .34s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------- CONTATO -- */
.contato{ padding-block:calc(var(--sec) * 1.05); }
.contato .btn{ margin-top:2.25rem; }
/* aviso de tempo de resposta: vem logo abaixo do botão, por isso a
   margem é curta — é continuação do botão, não um bloco novo */
.contato__espera{
  margin:1.4rem auto 0;
  max-width:26rem;
  font-size:var(--f-sm);
  line-height:1.5;
  color:var(--ink-faint);
}

.contato__alt{
  margin-top:1.75rem;
  font-size:var(--f-sm);
  color:var(--ink-faint);
}
.contato__alt a{
  display:inline-flex; align-items:center; gap:.5em;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color .22s var(--ease), border-color .22s var(--ease);
}
.contato__alt a:hover{ color:var(--accent); border-color:var(--accent); }
.contato__alt .ico{ color:currentColor; }

/* ----------------------------------------------------------- RODAPÉ -- */
.foot{
  background:var(--ink);
  color:#c9c2b9;
  padding-block:clamp(3rem, 6vw, 4.5rem);
  font-size:var(--f-sm);
  position:relative;
}
.foot__in{ display:grid; gap:2rem; }
.foot__mark{
  width:1.6rem; height:1.6rem;
  color:var(--accent-dim);
  margin-bottom:.7rem;
}
.foot__id{ color:var(--paper); font-size:var(--f-base); line-height:1.5; }
.foot__id strong{ font-family:var(--serif); font-weight:400; }
.foot__aviso{
  max-width:40rem;
  line-height:1.7;
  color:#a49d94;
  font-size:var(--f-xs);
}
.foot__aviso strong{ color:var(--paper); }
.foot__cred{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  border-top:1px solid #3a3631;
  padding-top:1.5rem;
  max-width:none;
  font-size:var(--f-xs);
  color:#857e76;
}
.foot__cred a{
  text-decoration:none;
  letter-spacing:.14em;
  transition:color .22s var(--ease);
}
.foot__cred a:hover{ color:var(--paper); }

/* ------------------------------------------------- CONVERSÃO FIXA -- */
/* Bolha no desktop. Só aparece depois que o topo sai da tela: quem
   acabou de chegar já tem o botão grande do topo, e a bolha em cima
   dele seria ruído. Quem rolou perdeu o botão de vista. */
.fab{
  position:fixed;
  right:clamp(1rem, 3vw, 2rem);
  bottom:clamp(1rem, 3vw, 2rem);
  z-index:60;
  display:grid; place-items:center;
  width:3.5rem; height:3.5rem;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  box-shadow:var(--sombra);
  text-decoration:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.9);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             visibility .3s, background .24s var(--ease);
}
.fab.is-on{ opacity:1; visibility:visible; transform:none; }
.fab:hover{ background:#334539; }
.fab .ico{ color:currentColor; }

/* Barra no celular: com o polegar na base da tela, a bolha perde para
   uma barra rotulada. Uma OU outra, nunca as duas. */
.barra{ display:none; }

/* --------------------------------------------------------- REVEAL -- */
/* Só escondemos se o JS confirmou que está vivo (classe .js no <html>,
   posta por um script inline no <head>). Sem essa trava, um erro de JS
   ou um bloqueador deixaria a página inteira invisível — falha grave
   demais para o benefício de um fade. */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* escada leve na timeline: os três passos entram em sequência */
.js .linha__item:nth-child(2){ transition-delay:.09s; }
.js .linha__item:nth-child(3){ transition-delay:.18s; }

/* ---------------------------------------------------- RESPONSIVO -- */
@media (max-width:60rem){
  .hero__in,
  .sobre{ grid-template-columns:1fr; }
  .hero__title{ margin-top:.5rem; }

  .retrato{ order:-1; max-width:22rem; margin-inline:auto; }
  .retrato--sobre{ max-width:20rem; }
  /* eco mais curto: com o retrato centralizado ele encosta na borda */
  .retrato__eco{ inset:1.2rem -.8rem -.8rem 1.2rem; }
  .retrato--sobre .retrato__eco{ inset:1.2rem 1.2rem -.8rem -.8rem; }

  .credenciais{ grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); }
  .credenciais li{ background:var(--paper); border-left:0; }
}

@media (max-width:48rem){
  .burger{ display:block; }

  /* No celular a foto vem antes do título. Em 4:5 cheia ela empurraria a
     frase pra fora da primeira tela — o rosto é sinal de confiança, mas
     a frase é a mensagem. Estreitando, os dois cabem juntos. */
  .hero{ padding-block:1.5rem var(--sec); }
  .retrato{ max-width:min(100%, 17rem); padding:.6rem; }
  .retrato__flor{ width:2.9rem; height:2.9rem; padding:.72rem; bottom:1.2rem; }
  .hero__actions{ gap:1.1rem; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .painel{ padding-inline:1.25rem; }

  .nav{
    position:fixed; inset:4.6rem 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:1rem var(--gut) 2rem;
    /* fecha por padrão sem tirar do fluxo de leitores de tela */
    clip-path:inset(0 0 100% 0);
    opacity:0;
    pointer-events:none;
    transition:clip-path .38s var(--ease), opacity .25s var(--ease);
  }
  .nav.is-open{
    clip-path:inset(0 0 0 0);
    opacity:1;
    pointer-events:auto;
  }
  /* trava o fundo enquanto o menu está aberto */
  html.is-locked, html.is-locked body{ overflow:hidden; }

  .nav__list{ flex-direction:column; gap:0; width:100%; }
  .nav__list a{
    display:block;
    padding:1rem 0;
    font-size:1.05rem;
    border-bottom:1px solid var(--line);
  }
  .nav__list a::after{ display:none; }
  .nav__cta{ margin-top:1.5rem; }

  /* as quebras manuais dos títulos são para tela grande; no celular
     elas criam órfãs. text-wrap:balance resolve melhor sozinho. */
  h2 br{ display:none; }

  .faq summary{ font-size:1.05rem; padding-inline:1.15rem 2.8rem; }
  .faq summary::after{ right:1.15rem; }
  .faq__body{ padding-inline:1.15rem 2.8rem; }

  /* bolha some, barra assume — e o rodapé ganha folga para não ficar
     por baixo dela */
  .fab{ display:none; }
  body{ padding-bottom:4.4rem; }
  .barra{
    display:block;
    position:fixed; left:0; right:0; bottom:0;
    z-index:60;
    padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter:saturate(1.4) blur(12px);
    border-top:1px solid var(--line);
    transform:translateY(110%);
    transition:transform .32s var(--ease);
  }
  .barra.is-on{ transform:none; }
  .barra__cta{
    display:flex; align-items:center; justify-content:center; gap:.6em;
    width:100%;
    padding:.85em 1.2em;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    font-size:var(--f-sm);
    font-weight:500;
    text-decoration:none;
  }
  .barra__cta .ico{ width:1.2em; height:1.2em; color:currentColor; }
}

/* telas bem estreitas: 4 credenciais em 2 colunas ainda cabem, mas o
   painel de contato não aguenta a flor gigante */
@media (max-width:26rem){
  .painel__flor{ width:9rem; height:9rem; right:-2.5rem; bottom:-2.5rem; }
}

/* ------------------------------------------ ACESSIBILIDADE / MOTION -- */
@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 .reveal{ opacity:1; transform:none; }
  .js .linha__item{ transition-delay:0s !important; }
}

/* ---------------------------------------------------------- IMPRESSÃO -- */
@media print{
  .reveal,.js .reveal{ opacity:1 !important; transform:none !important; }
  .topbar,.nav,.burger,.fab,.barra,.painel__flor,.retrato__flor,
  .retrato__eco,.orn,.sprite{ display:none !important; }
  body{ background:#fff; color:#000; padding-bottom:0; }
  body::before{ display:none; }
  .painel,.linha__card,.faq,.cards,.locais,.credenciais{
    border-color:#ccc; background:#fff; box-shadow:none;
  }
  .compromissos{ background:#fff; color:#000; }
  .promessa h3,.promessa p,.promessa .ico{ color:#000; }
  .retrato__moldura{ box-shadow:none; }
  .retrato__moldura::after{ display:none; }
  .foot{ background:#fff; color:#000; }
  .foot__id,.foot__aviso,.foot__aviso strong,.foot__cred{ color:#000; }
}