/* ==========================================================================
   INSTITUTO LIFE MIND — folha única do site
   --------------------------------------------------------------------------
   A identidade vem do espaço físico: paredes areia, letreiro e números de
   porta em dourado escovado, poltronas de couro caramelo, plantas.
   Display em Gloock (a serifa do letreiro), texto em Schibsted Grotesk.
   Se mudar cor ou fonte da marca, muda AQUI — todas as páginas leem daqui.
   ========================================================================== */

:root{
  /* --- cor ------------------------------------------------------------- */
  --creme:      #FBF8F4;   /* papel: fundo padrão */
  --areia:      #F1E8DD;   /* parede: seções alternadas */
  --areia-forte:#E6D8C7;   /* filetes e bordas sobre areia */
  --cafe:       #2A1D12;   /* texto forte e blocos escuros */
  --cafe-suave: #574538;   /* texto corrido */
  --marrom:     #6B3F16;   /* cor da marca: títulos, links */
  --bronze:     #8A5C2E;   /* acento com contraste para texto */
  --dourado:    #C69A5E;   /* letreiro: filetes, números, hover no escuro */
  --dourado-luz:#E4CBA5;   /* dourado sobre fundo escuro */
  --musgo:      #4C5A46;   /* planta: um único acento frio, usado com parcimônia */

  --linha:      rgba(42,29,18,.10);
  --linha-clara:rgba(251,248,244,.16);

  /* --- tipografia ------------------------------------------------------ */
  --display: "Gloock", "Times New Roman", Georgia, serif;
  --texto:   "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- medidas --------------------------------------------------------- */
  --wrap:     1180px;
  --leitura:  40rem;
  --cabecalho-h: 84px;
  --gutter: clamp(20px, 5vw, 44px);

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: clamp(24px, 4vw, 44px);

  --sombra-xs: 0 1px 2px rgba(42,29,18,.05), 0 8px 20px -14px rgba(42,29,18,.22);
  --sombra:    0 2px 6px rgba(42,29,18,.04), 0 24px 56px -34px rgba(42,29,18,.34);
  --sombra-lg: 0 8px 20px rgba(42,29,18,.06), 0 48px 96px -52px rgba(42,29,18,.44);

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

  /* Anel de foco. Bronze sobre café mede 2,85:1 — abaixo dos 3:1 que a WCAG 2.2
     pede em 1.4.11 — então todo bloco escuro troca a cor do anel. */
  --foco: var(--bronze);

  /* Borda de campo e de botão de filtro. Areia-forte é filete decorativo (1,3:1)
     e não faz um controle parecer um controle; este tom cumpre 3:1. */
  --borda-controle: #9C8262;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--cabecalho-h) + 20px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--creme);
  color:var(--cafe-suave);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
/* SVG inline em contêiner flex: sem isto o navegador estica a largura e o
   desenho perde a proporção. Os atributos width/height do ícone mandam. */
svg.ico{ flex:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  color:var(--cafe);
  line-height:1.08;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}
h4,h5{ font-family:var(--texto); font-weight:600; color:var(--cafe); margin:0; line-height:1.3; }

h1{ font-size:clamp(2.5rem, 6.2vw, 4.4rem); }
h2{ font-size:clamp(2rem, 4.4vw, 3.1rem); }
h3{ font-size:clamp(1.3rem, 2.2vw, 1.65rem); }

p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

strong{ color:var(--cafe); font-weight:600; }

:focus-visible{
  outline:2.5px solid var(--foco);
  outline-offset:3px;
  border-radius:4px;
}
.escuro, .chamada, .rodape, .hero{ --foco: var(--dourado-luz); }
/* no hero o anel cai sobre a foto: o halo escuro garante que ele apareça */
.hero :focus-visible{ box-shadow:0 0 0 5px rgba(42,29,18,.85); }

main:focus-visible,
#mapaCaixa:focus-visible{ outline:none; }

::selection{ background:var(--dourado-luz); color:var(--cafe); }

.so-leitor{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.pula{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cafe); color:var(--creme);
  padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
}
.pula:focus{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

/* --------------------------------------------------------------------------
   Rótulo de seção — caixa-alta estreita com um filete dourado à esquerda,
   ecoando as placas de porta do instituto
   -------------------------------------------------------------------------- */

.olho{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze); margin:0 0 18px;
}
.olho::before{
  content:""; width:28px; height:1px; background:var(--dourado); flex:none;
}
.escuro .olho{ color:var(--dourado-luz); }
.escuro .olho::before{ background:var(--dourado); }

.lead{
  font-size:clamp(1.05rem, 1.5vw, 1.2rem);
  line-height:1.62;
  color:var(--cafe-suave);
  max-width:var(--leitura);
}

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

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px;
  background:var(--marrom); color:var(--creme);
  border:1px solid var(--marrom); border-radius:999px;
  font-size:.95rem; font-weight:600; letter-spacing:.005em;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease),
             transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow:0 10px 24px -16px rgba(107,63,22,.9);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:var(--cafe); border-color:var(--cafe); transform:translateY(-2px); }
}
.btn:active{ transform:scale(.985); transition-duration:.06s; }
.btn .seta{ transition:transform .3s var(--ease); }
.btn:hover .seta{ transform:translateX(4px); }

.btn-sm{ padding:10px 20px; font-size:.88rem; }
.btn-lg{ padding:17px 32px; font-size:1rem; }

.btn-vazado{
  background:transparent; color:var(--marrom);
  border-color:var(--areia-forte); box-shadow:none;
}
.btn-vazado:hover{ background:var(--marrom); color:var(--creme); border-color:var(--marrom); }

.btn-claro{
  background:var(--dourado-luz); color:var(--cafe); border-color:var(--dourado-luz);
  box-shadow:none;
}
.btn-claro:hover{ background:var(--creme); border-color:var(--creme); color:var(--cafe); }

.escuro .btn-vazado,
.chamada .btn-vazado{ color:var(--dourado-luz); border-color:var(--linha-clara); }
.escuro .btn-vazado:hover,
.chamada .btn-vazado:hover{ background:var(--dourado-luz); color:var(--cafe); border-color:var(--dourado-luz); }

.link-seta{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--marrom); font-weight:600; font-size:.95rem;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.link-seta:hover{ border-color:var(--dourado); gap:11px; }
.escuro .link-seta{ color:var(--dourado-luz); }

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

.progresso{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:90;
  background:var(--dourado); transform:scaleX(0); transform-origin:0 50%;
}

.cabecalho{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transition:background .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.cabecalho.solido,
.cabecalho.compacto,
html:not(.js) .cabecalho,
.cabecalho:has(+ .nav-mob.aberto){
  background:rgba(251,248,244,.92);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--linha);
}

.barra{
  max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--gutter);
  height:var(--cabecalho-h);
  display:flex; align-items:center; gap:24px;
  transition:height .35s var(--ease);
}
.cabecalho.compacto .barra{ height:68px; }

.marca{ display:flex; align-items:center; flex:none; }
.marca img{ height:44px; width:auto; transition:height .35s var(--ease), filter .35s var(--ease); }
.cabecalho.compacto .marca img{ height:38px; }
html.js .cabecalho:not(.solido):not(.compacto):not(:has(+ .nav-mob.aberto)) .marca img{ filter:brightness(0) invert(1); }

.nav-desk{ display:flex; align-items:center; gap:clamp(14px, 1.8vw, 26px); margin-left:auto; }
.nav-desk a{
  position:relative; font-size:.92rem; font-weight:500; color:var(--cafe-suave);
  padding:6px 0; transition:color .25s var(--ease);
}
.nav-desk a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--dourado); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.nav-desk a:hover{ color:var(--marrom); }
.nav-desk a:hover::after,
.nav-desk a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-desk a[aria-current="page"]{ color:var(--marrom); }
html.js .cabecalho:not(.solido):not(.compacto):not(:has(+ .nav-mob.aberto)) .nav-desk a{ color:rgba(251,248,244,.86); }
html.js .cabecalho:not(.solido):not(.compacto):not(:has(+ .nav-mob.aberto)) .nav-desk a:hover,
html.js .cabecalho:not(.solido):not(.compacto):not(:has(+ .nav-mob.aberto)) .nav-desk a[aria-current="page"]{ color:#fff; }

.barra-acoes{ display:flex; align-items:center; gap:12px; margin-left:8px; }
html.js .cabecalho:not(.solido):not(.compacto):not(:has(+ .nav-mob.aberto)) .barra-acoes .btn{
  background:transparent; border-color:rgba(251,248,244,.5); color:#fff; box-shadow:none;
}
html.js .cabecalho:not(.solido):not(.compacto):not(:has(+ .nav-mob.aberto)) .barra-acoes .btn:hover{
  background:var(--creme); color:var(--cafe); border-color:var(--creme);
}

.menu-btn{
  display:none; width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--linha); border-radius:50%;
  cursor:pointer; position:relative;
}
.menu-traco{
  position:absolute; left:12px; width:20px; height:1.5px; background:var(--cafe);
  border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-traco:nth-child(1){ top:16px; }
.menu-traco:nth-child(2){ top:21px; }
.menu-traco:nth-child(3){ top:26px; }
.menu-btn[aria-expanded="true"] .menu-traco:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-traco:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .menu-traco:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
html.js .cabecalho:not(.solido):not(.compacto):not(:has(+ .nav-mob.aberto)) .menu-btn{ border-color:rgba(251,248,244,.4); }
html.js .cabecalho:not(.solido):not(.compacto):not(:has(+ .nav-mob.aberto)) .menu-traco{ background:#fff; }

.nav-mob{
  position:fixed; inset:0; z-index:79;
  background:var(--creme);
  padding:calc(var(--cabecalho-h) + 16px) var(--gutter) 40px;
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav-mob.aberto{ opacity:1; visibility:visible; transform:none; }
.nav-mob-int{ display:flex; flex-direction:column; gap:2px; max-width:var(--wrap); margin-inline:auto; }
.nav-mob a:not(.btn){
  font-family:var(--display); font-size:1.9rem; color:var(--cafe);
  padding:13px 0; border-bottom:1px solid var(--linha);
}
.nav-mob a[aria-current="page"]{ color:var(--marrom); }
.nav-mob .btn{ margin-top:26px; align-self:flex-start; }
.nav-mob-pe{ margin-top:22px; font-size:.9rem; color:var(--bronze); }

/* --------------------------------------------------------------------------
   Seções
   -------------------------------------------------------------------------- */

.secao{ padding:clamp(66px, 9vw, 122px) 0; position:relative; }
.secao--areia{ background:var(--areia); }
.secao--curta{ padding:clamp(48px, 6vw, 78px) 0; }

/* Primeira seção da página, logo abaixo do cabeçalho fixo. Antes isto era um
   estilo inline repetido em sete páginas, com quatro medidas diferentes. */
.secao--topo{ padding:calc(var(--cabecalho-h) + clamp(44px, 5vw, 62px)) 0 0; }
.secao--topo .cab-secao{ margin-bottom:0; }
.secao--segue{ padding-top:clamp(34px, 4vw, 52px); }

.escuro{ background:var(--cafe); color:rgba(251,248,244,.78); }
.escuro h1,.escuro h2,.escuro h3,.escuro h4{ color:var(--creme); }
.escuro strong{ color:var(--creme); }
.escuro .lead{ color:rgba(251,248,244,.8); }

.cab-secao{ max-width:640px; margin-bottom:clamp(36px, 5vw, 58px); }
.cab-secao--centro{ margin-inline:auto; text-align:center; }
.cab-secao--centro .olho{ justify-content:center; }
.cab-secao h1 + .lead,
.cab-secao h2 + .lead{ margin-top:22px; }

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

.hero{
  position:relative;
  min-height:min(92vh, 780px);
  display:flex; align-items:flex-end;
  padding:calc(var(--cabecalho-h) + 60px) 0 clamp(40px, 6vw, 72px);
  background:var(--cafe);
  overflow:hidden;
}
.hero-foto{
  position:absolute; inset:0; z-index:0;
}
.hero-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero-foto::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(42,29,18,.52) 0%, rgba(42,29,18,.24) 34%, rgba(42,29,18,.58) 100%),
    linear-gradient(96deg, rgba(42,29,18,.78) 0%, rgba(42,29,18,.42) 44%, rgba(42,29,18,.06) 80%);
}
.hero .wrap{ position:relative; z-index:1; }

.hero h1{ color:var(--creme); max-width:15ch; }
.hero h1 em{
  font-style:normal; color:var(--dourado-luz);
}
.hero .olho{ color:var(--dourado-luz); }
.hero .olho::before{ background:var(--dourado); }
.hero-sub{
  margin-top:24px; max-width:48ch;
  color:rgba(251,248,244,.86); font-size:clamp(1.02rem,1.4vw,1.16rem); line-height:1.62;
}

/* --------------------------------------------------------------------------
   Grades e cartões
   -------------------------------------------------------------------------- */

.grade{ display:grid; gap:clamp(16px, 2.2vw, 26px); }
.grade-2{ grid-template-columns:repeat(2,1fr); }
.grade-3{ grid-template-columns:repeat(3,1fr); }
.grade-4{ grid-template-columns:repeat(4,1fr); }

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

/* Grades que se distribuem sozinhas — servem para listas de 5 itens, em que
   um número fixo de colunas sempre deixa uma sobra feia na última linha. */
/* Lista de 5 em três colunas deixa um buraco na última linha. Quando o último
   item é o segundo da sua linha, ele ocupa o espaço que sobrou. */
.grade-preenche > *:last-child:nth-child(3n+2){ grid-column:span 2; }
@media (max-width:900px){
  .grade-preenche > *:last-child:nth-child(2n+1){ grid-column:span 2; }
}
@media (max-width:900px){
  .grade-preenche > *:last-child:nth-child(3n+2){ grid-column:auto; }
}

/* Retrato 261x454 fica enorme em coluna larga — a grade da equipe cresce em
   número de colunas, não em largura de card. */
.grade-equipe{ grid-template-columns:repeat(auto-fill, minmax(236px,1fr)); }
/* bloco com um ou dois cartões: sem esticar o retrato na largura toda */
.grade-equipe--curta{ grid-template-columns:repeat(auto-fill, minmax(236px,300px)); }

.cartao{
  background:var(--creme);
  border:1px solid var(--linha);
  border-radius:var(--r-lg);
  padding:clamp(24px, 2.8vw, 34px);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease);
}
.secao--areia .cartao{ background:var(--creme); border-color:var(--areia-forte); }
@media (hover:hover) and (pointer:fine){
  .cartao:hover{ transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--areia-forte); }
}
a.cartao:active{ transform:scale(.99); transition-duration:.06s; }
.cartao h3,
.cartao-titulo{ margin:0 0 10px; }
a.cartao{ display:flex; flex-direction:column; }
a.cartao .link-seta{ margin-top:auto; padding-top:16px; }
@media (hover:hover) and (pointer:fine){
  a.cartao:hover .link-seta .seta{ transform:translateX(4px); }
}
.cartao-titulo{ font-family:var(--display); font-weight:400; color:var(--cafe);
  font-size:clamp(1.3rem,2.2vw,1.65rem); line-height:1.08;
  letter-spacing:-.012em; text-wrap:balance; }
.cartao p{ font-size:.97rem; }

.cartao-ico{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
  background:var(--areia); color:var(--marrom);
  margin-bottom:20px;
}
.secao--areia .cartao-ico{ background:var(--areia); }

/* foco clínico: lista com filete dourado à esquerda */
.foco{
  padding:22px 0 22px 26px;
  border-left:1px solid var(--linha);
  position:relative;
  transition:border-color .3s var(--ease);
}
.foco::before{
  content:""; position:absolute; left:-1px; top:22px; width:2px; height:26px;
  background:var(--dourado); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .35s var(--ease);
}
.foco:hover::before{ transform:scaleY(1); }
.foco h3{ font-family:var(--texto); font-size:1.05rem; font-weight:600; margin-bottom:8px; }
.foco p{ font-size:.94rem; margin:0; }

/* --------------------------------------------------------------------------
   Equipe
   -------------------------------------------------------------------------- */

.filtros{
  display:flex; flex-wrap:wrap; gap:9px;
  margin-bottom:clamp(28px, 3.5vw, 40px);
}
.filtro{
  padding:9px 18px;
  background:transparent; border:1px solid var(--borda-controle); border-radius:999px;
  font-size:.88rem; font-weight:500; color:var(--cafe-suave);
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.filtro:hover{ border-color:var(--bronze); color:var(--marrom); }
.filtro[disabled]{
  opacity:.4; cursor:not-allowed; border-style:dashed;
}
.filtro[disabled]:hover{ border-color:var(--borda-controle); color:var(--cafe-suave); }

.filtro[aria-pressed="true"]{
  background:var(--marrom); border-color:var(--marrom); color:var(--creme);
}
.filtros-grupo{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.filtros-rotulo{
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze); margin-right:4px;
}

.pessoa{
  display:flex; flex-direction:column;
  background:var(--creme);
  border:1px solid var(--linha);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* no toque o :hover fica grudado até o próximo toque em outro lugar — numa
   grade de oito retratos, um card ficaria levantado sem motivo */
@media (hover:hover) and (pointer:fine){
  .pessoa:hover{ transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--areia-forte); }
  .pessoa:hover .pessoa-foto img{ transform:scale(1.035); }
  .insta-item:hover img{ transform:scale(1.05); filter:brightness(.92); }
  .post-cartao:hover{ transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--areia-forte); }
  .post-destaque:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
  a.canal:hover{ transform:translateY(-3px); box-shadow:var(--sombra-xs); border-color:var(--areia-forte); }
}
.pessoa[hidden]{ display:none; }

.pessoa-foto{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--areia);
}
.pessoa-foto img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  transition:transform .6s var(--ease);
}
.pessoa-reg{
  position:absolute; left:14px; bottom:14px;
  padding:6px 12px; border-radius:999px;
  background:rgba(42,29,18,.72); color:var(--dourado-luz);
  font-size:.72rem; font-weight:600; letter-spacing:.06em;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.pessoa-corpo{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; gap:9px; }
.pessoa-corpo h2,
.pessoa-corpo h3{ font-size:1.32rem; }
.pessoa-cargo{ font-size:.86rem; color:var(--bronze); font-weight:600; margin:0; }
.pessoa-abordagem{ font-size:.92rem; margin:0; }
.pessoa-publico{
  display:inline-flex; align-self:flex-start; align-items:center; gap:6px;
  font-size:.78rem; color:var(--cafe-suave);
  padding:5px 11px; border:1px solid var(--linha); border-radius:999px;
}
.pessoa-acoes{ margin-top:auto; padding-top:18px; }
.pessoa-acoes .btn{ width:100%; padding:12px 16px; font-size:.85rem; white-space:nowrap; }

.pessoa-credencial{
  display:flex; align-items:flex-start; gap:7px;
  margin:2px 0 0; font-size:.82rem; color:var(--bronze); font-weight:600; line-height:1.4;
}
.pessoa-credencial .verificado{ width:16px; height:16px; margin-top:2px; color:var(--bronze); }

.pessoa-bio{ margin-top:14px; }
.pessoa-bio summary{
  cursor:pointer; list-style:none; font-size:.9rem; font-weight:600; color:var(--marrom);
  display:inline-flex; align-items:center; gap:6px;
}
.pessoa-bio summary::-webkit-details-marker{ display:none; }
.pessoa-bio summary .chev{ transition:transform .3s var(--ease); }
.pessoa-bio[open] summary .chev{ transform:rotate(90deg); }
.pessoa-bio p{ font-size:.94rem; margin-top:12px; }
.pessoa-bio blockquote{
  margin:14px 0 0; padding-left:16px; border-left:2px solid var(--dourado);
  font-style:italic; font-size:.94rem;
}

.vazio-filtro{
  grid-column:1/-1; padding:44px; text-align:center;
  border:1px dashed var(--areia-forte); border-radius:var(--r-lg);
  color:var(--cafe-suave);
}

/* --------------------------------------------------------------------------
   Duas colunas com foto
   -------------------------------------------------------------------------- */

.duas{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px, 5vw, 68px); align-items:center; }
.duas--inverso .duas-midia{ order:-1; }
.duas-midia img{ border-radius:var(--r-xl); box-shadow:var(--sombra); }
@media (max-width:620px){
  /* uma tira de 133px não mostra assunto nenhum */
  .duas-midia img{ aspect-ratio:16/10; object-fit:cover; object-position:center 55%; }
}
.duas-texto h2{ margin-bottom:20px; }
.servico-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; }

/* faixa com foto larga */
.faixa-foto{ position:relative; overflow:hidden; }
.faixa-foto img{ width:100%; height:clamp(240px, 38vw, 420px); object-fit:cover; }

/* --------------------------------------------------------------------------
   Passos (como começar) — numeração real de etapas
   -------------------------------------------------------------------------- */

/* Fluxo de etapas: cartões ligados por seta. No celular a seta aponta para
   baixo, porque a coluna é única; a partir de 780px a leitura vira horizontal
   e a seta gira. O conector é decorativo — a ordem real é a do documento. */
.fluxo{
  display:grid; gap:clamp(30px, 4vw, 26px);
  grid-template-columns:1fr;
}
.fluxo-passo{
  position:relative;
  padding:clamp(24px, 2.6vw, 30px);
  border:1px solid var(--linha);
  border-radius:var(--r-lg);
  background:var(--creme);
}
.escuro .fluxo-passo{
  background:rgba(251,248,244,.045);
  border-color:var(--linha-clara);
}
.fluxo-n{
  display:grid; place-items:center;
  width:38px; height:38px; margin-bottom:16px;
  border-radius:50%;
  background:var(--dourado); color:var(--cafe);
  font-family:var(--display); font-size:1.15rem; line-height:1;
}
.fluxo-passo h3{ font-family:var(--texto); font-size:1.06rem; font-weight:600; margin-bottom:8px; }
.fluxo-passo p{ font-size:.97rem; margin:0; }

/* o conector */
.fluxo-passo:not(:last-child)::after{
  content:''; position:absolute; z-index:1;
  width:11px; height:11px;
  border-right:1.6px solid var(--dourado);
  border-bottom:1.6px solid var(--dourado);
  left:50%; bottom:-22px; transform:translateX(-50%) rotate(45deg);
}
@media (min-width:780px){
  .fluxo{ grid-template-columns:repeat(3, 1fr); }
  .fluxo-passo:not(:last-child)::after{
    left:auto; bottom:auto;
    right:calc(var(--gap-fluxo, 26px) * -1 - 5px); top:50%;
    transform:translateY(-50%) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   Perguntas frequentes
   -------------------------------------------------------------------------- */

.faq{ max-width:var(--leitura); margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--linha); }
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:flex-start; gap:18px;
  padding:24px 0;
  font-size:clamp(1.02rem,1.5vw,1.12rem); font-weight:600; color:var(--cafe);
  transition:color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--marrom); }
.faq-item summary .mais{ margin-left:auto; flex:none; color:var(--bronze); transition:transform .3s var(--ease); }
.faq-item[open] summary .mais{ transform:rotate(45deg); }
.faq-resposta{ padding:0 42px 26px 0; }
.faq-resposta p{ font-size:1rem; }

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

.contato-grade{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; }

.contato-canais{ display:grid; gap:14px; }
.canal{
  display:flex; gap:16px; align-items:flex-start;
  padding:22px 24px;
  background:var(--creme); border:1px solid var(--linha); border-radius:var(--r-lg);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.canal .ico{ color:var(--bronze); flex:none; margin-top:3px; }
.canal-titulo{ font-family:var(--texto); font-size:1rem; font-weight:600;
  color:var(--cafe); line-height:1.3; margin:0 0 3px; }
.canal p{ margin:0; font-size:.95rem; }
.canal .dica{ font-size:.85rem; color:var(--bronze); margin-top:5px; }

.mapa{
  border:0; width:100%; height:100%; min-height:340px;
  border-radius:var(--r-xl); filter:saturate(.72) contrast(1.02);
}
.mapa-caixa{ border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sombra); background:var(--areia); }
.mapa-pe{ margin:0; padding:16px; text-align:center; background:var(--creme); }
.mapa-pe .btn-vazado{ border-color:var(--areia-forte); }

/* formulário que monta a mensagem do WhatsApp */
.form-zap{
  background:var(--creme); border:1px solid var(--linha);
  border-radius:var(--r-xl); padding:clamp(24px,3vw,36px);
}
.campo{ margin-bottom:18px; }
.campo label{
  display:block; font-size:.82rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bronze); margin-bottom:7px;
}
.campo input,.campo select,.campo textarea{
  width:100%; padding:13px 15px;
  background:var(--creme); color:var(--cafe);
  border:1px solid var(--borda-controle); border-radius:var(--r-sm);
  font-family:var(--texto); font-size:1rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.campo textarea{ min-height:120px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--bronze);
  box-shadow:0 0 0 2px rgba(138,92,46,.10);
}
.form-nota{ font-size:.85rem; color:var(--cafe-suave); margin-top:14px; }

/* --------------------------------------------------------------------------
   Vitrine do Instagram — miniaturas estáticas, servidas daqui
   -------------------------------------------------------------------------- */

.insta-grade{
  display:grid; grid-template-columns:repeat(6,1fr); gap:10px;
}
.insta-item{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r); background:var(--areia);
  aspect-ratio:1;
}
.insta-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .4s var(--ease);
}

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

/* --------------------------------------------------------------------------
   Chamada final
   -------------------------------------------------------------------------- */

.chamada{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--cafe); color:rgba(251,248,244,.82);
  padding:clamp(40px, 6vw, 76px);
  text-align:center;
}
.chamada::after{
  content:""; position:absolute; left:50%; top:-40%; width:min(620px,90%); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(198,154,94,.24), transparent 66%);
  pointer-events:none;
}
.chamada > *{ position:relative; }
.chamada h2{ color:var(--creme); max-width:20ch; margin-inline:auto; }
.chamada p{ max-width:52ch; margin:20px auto 0; }
.chamada .acoes{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* --------------------------------------------------------------------------
   Aviso / nota ética
   -------------------------------------------------------------------------- */

.nota{
  border-left:2px solid var(--dourado);
  padding:4px 0 4px 20px;
  font-size:.92rem; color:var(--cafe-suave);
  max-width:var(--leitura);
}

/* --------------------------------------------------------------------------
   Infoblog
   -------------------------------------------------------------------------- */

.blog-hero{ padding:calc(var(--cabecalho-h) + 66px) 0 clamp(36px,5vw,58px); background:var(--areia); }
.blog-hero h1{ max-width:18ch; }
.blog-hero .lead{ margin-top:20px; }

.post-destaque{
  display:grid; grid-template-columns:1.4fr .6fr; gap:clamp(24px,4vw,48px);
  align-items:center;
  padding:clamp(28px,3.4vw,44px);
  background:var(--creme); border:1px solid var(--linha); border-radius:var(--r-xl);
  margin-bottom:clamp(20px,2.6vw,30px);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post-destaque h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin:14px 0 12px; }
.post-contagem{ text-align:center; color:var(--bronze); }
.post-contagem .n{ display:block; font-family:var(--display); font-size:clamp(3rem,7vw,5rem); color:var(--bronze); line-height:1; }
.post-contagem .k{ display:block; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-top:8px; }

.post-cartao{
  display:flex; flex-direction:column; gap:10px;
  padding:clamp(22px,2.6vw,30px);
  background:var(--creme); border:1px solid var(--linha); border-radius:var(--r-lg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.post-cartao h3{ font-size:1.22rem; }
.post-cartao p{ font-size:.95rem; margin:0; }
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:.8rem; color:var(--bronze);
}
.selo{
  padding:4px 11px; border:1px solid var(--areia-forte); border-radius:999px;
  font-weight:600; letter-spacing:.04em;
}
.ponto{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }
.ler{ margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:7px; color:var(--marrom); font-weight:600; font-size:.9rem; }
.post-cartao:hover .ler .seta{ transform:translateX(4px); }

.artigo{ padding:calc(var(--cabecalho-h) + 52px) 0 clamp(50px,7vw,86px); }
.artigo-wrap{ width:100%; max-width:calc(var(--leitura) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }
.migalhas{ display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--bronze); margin-bottom:26px; flex-wrap:wrap; }
.migalhas a:hover{ color:var(--marrom); border-bottom:1px solid var(--dourado); }
.artigo-cab h1{ font-size:clamp(2rem,4.4vw,3rem); }
.artigo-cab .lead{ margin:18px 0 16px; }

.prosa{ margin-top:36px; font-size:1.06rem; line-height:1.78; }
.prosa h2{ font-size:clamp(1.5rem,2.6vw,1.95rem); margin:44px 0 16px; }
.prosa h3{ font-size:1.22rem; font-family:var(--texto); font-weight:600; margin:32px 0 12px; }
.prosa ul,.prosa ol{ margin:0 0 1.2em; padding-left:1.3em; }
.prosa ul{ list-style:disc; }
.prosa ol{ list-style:decimal; }
.prosa li{ margin-bottom:.5em; }
.prosa li::marker{ color:var(--bronze); }
.prosa a{ color:var(--marrom); border-bottom:1px solid var(--dourado); }
.prosa blockquote{
  margin:28px 0; padding:4px 0 4px 22px; border-left:2px solid var(--dourado);
  font-size:1.08rem; color:var(--cafe);
}
.prosa hr{ border:0; border-top:1px solid var(--linha); margin:36px 0; }
.prosa code{
  font-size:.92em; background:var(--areia); padding:2px 6px; border-radius:5px;
}

.relacionados{ padding-bottom:clamp(50px,7vw,86px); }
.relacionados h2{ font-size:1.5rem; margin-bottom:22px; }

/* estado do Infoblog sem nenhum artigo publicado */
.vazio{
  padding:52px; text-align:center; color:var(--cafe-suave);
  border:1px dashed var(--areia-forte); border-radius:var(--r-xl);
}

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

.rodape{ background:var(--cafe); color:rgba(251,248,244,.7); padding:clamp(56px,7vw,88px) 0 44px; }
.rodape-titulo{
  font-family:var(--texto); font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dourado-luz);
  margin:0 0 18px;
}
.rodape-topo{
  display:grid; grid-template-columns:1.5fr 1fr 1.2fr 1.2fr; gap:clamp(26px,4vw,52px);
  padding-bottom:40px; border-bottom:1px solid var(--linha-clara);
}
.rodape-marca img{ height:66px; width:auto; margin-bottom:20px; }
.rodape-marca p{ font-size:.94rem; max-width:34ch; }
.rodape-social{ display:flex; gap:10px; margin-top:22px; }
.rodape-social a{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--linha-clara); border-radius:50%;
  color:rgba(251,248,244,.8);
  transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.rodape-social a:hover{ background:var(--dourado-luz); color:var(--cafe); border-color:var(--dourado-luz); }

.rodape-col{ min-width:0; }
.rodape-nav li{ margin-bottom:9px; }
.rodape-nav a{ font-size:.94rem; transition:color .25s var(--ease); }
.rodape-nav a:hover{ color:var(--dourado-luz); }

.rodape-lista li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:.94rem; }
.rodape-lista .ico{ color:var(--dourado); flex:none; margin-top:3px; }
.rodape-lista a:hover{ color:var(--dourado-luz); }

.rodape-acessibilidade{ margin:24px 0 0; }
.rodape-acessibilidade a{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border:1px solid var(--linha-clara); border-radius:999px;
  font-size:.85rem; color:var(--dourado-luz);
  transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.rodape-acessibilidade a:hover{
  background:var(--dourado-luz); color:var(--cafe); border-color:var(--dourado-luz);
}

.rodape-legal{
  margin:18px 0 0; font-size:.83rem; color:rgba(251,248,244,.68); line-height:1.7;
}
.rodape-legal .sep{ opacity:.45; margin:0 4px; }

/* --------------------------------------------------------------------------
   Botão flutuante do WhatsApp
   -------------------------------------------------------------------------- */

.zap-flutua{
  position:fixed; right:18px; bottom:18px; z-index:70;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 20px 13px 15px;
  background:#1f8a4c; color:#fff;
  border-radius:999px;
  box-shadow:0 12px 30px -12px rgba(31,138,76,.8);
  font-size:.92rem; font-weight:600;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.zap-flutua svg{ width:22px; height:22px; flex:none; }
.zap-flutua:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -14px rgba(31,138,76,.9); }

/* --------------------------------------------------------------------------
   Revelação no scroll
   -------------------------------------------------------------------------- */

.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.visivel{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) var(--d,0ms), transform .7s var(--ease) var(--d,0ms);
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width:1180px){
  .rodape-topo{ grid-template-columns:1.4fr 1fr 1fr; }
  .rodape-marca{ grid-row:span 2; }
}

@media (max-width:1060px){
  .nav-desk{ display:none; }
  .menu-btn{ display:block; }
  .barra-acoes .btn{ display:none; }
  /* a .nav-desk é que carregava o margin-left:auto; sem ela, o botão do menu
     encostava na logo em vez de ir para o canto */
  .barra-acoes{ margin-left:auto; margin-right:0; }
  .rodape-topo{ grid-template-columns:1fr 1fr; }
  .rodape-marca{ grid-column:1/-1; grid-row:auto; }
}

@media (max-width:900px){
  .grade-4{ grid-template-columns:repeat(2,1fr); }
  .grade-3{ grid-template-columns:repeat(2,1fr); }
  .duas{ grid-template-columns:1fr; }
  .duas--inverso .duas-midia{ order:0; }
  .contato-grade{ grid-template-columns:1fr; }
  .post-destaque{ grid-template-columns:1fr; }
  .post-contagem{ display:none; }
}

@media (max-width:620px){
  :root{ --cabecalho-h:72px; }
  body{ font-size:16.5px; }
  .marca img{ height:36px; }
  .cabecalho.compacto .marca img{ height:32px; }
  .grade-2,.grade-3,.grade-4{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding-top:calc(var(--cabecalho-h) + 52px); }
  /* A cena é panorâmica (2,63:1). No retrato, enquadra a parede lisa e a planta:
     no celular o texto ocupa a largura toda, e o letreiro ficaria por baixo dele. */
  .hero-foto img{ object-position:26% 45%; }
  .hero-foto::after{
    background:
      linear-gradient(180deg, rgba(42,29,18,.58) 0%, rgba(42,29,18,.40) 40%, rgba(42,29,18,.62) 100%);
  }
  .rodape-topo{ grid-template-columns:1fr; }
  .faq-resposta{ padding-right:0; }
  .zap-flutua span{ display:none; }
  .zap-flutua{ padding:15px; right:14px; bottom:14px; }
  /* o botão flutuante cobria a última linha do aviso legal */
  .rodape{ padding-bottom:100px; }
  .passo{ grid-template-columns:1fr; gap:8px; }
  .passo::before{ font-size:1.2rem; }
}

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

@media print{
  .cabecalho,.nav-mob,.zap-flutua,.progresso,.rodape-social{ display:none !important; }
  body{ background:#fff; color:#000; }
}