/* =============================================================
   MN — Dra. Marcela Noronha
   home.css · seções da página inicial (reaproveitadas nas internas)
   ============================================================= */

/* ---------------------------------------------------------------
   HERO
   O retrato é arquitetura, não card: ocupa a coluna direita inteira
   e sangra até a borda da viewport. A fusão com o preto é feita por
   máscara — scrim opaco criaria borda reta visível.
   --------------------------------------------------------------- */

.hero{
  --pb:clamp(2rem,5vh,3.2rem);
  --luz:74% 6%;
  background-color:var(--tinta);
  background-image:
    radial-gradient(105% 78% at var(--luz),rgba(242,240,236,.075),rgba(242,240,236,0) 60%),
    var(--grao);
  background-repeat:no-repeat,repeat;
  background-size:100% 100%,180px 180px;
  color:var(--papel);
  padding-top:var(--alt-cab);
  padding-bottom:var(--pb);
  position:relative;
}

.hero__grade{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:clamp(1.5rem,3.6vw,4rem);
  /* as duas faixas 1fr absorvem a folga que a foto cria ao cruzar as linhas;
     sem elas a sobra era distribuída ENTRE título e texto, abrindo um vão */
  grid-template-rows:1fr auto auto 1fr auto;
  /* a primeira serve de reserva onde svh não existe */
  min-height:calc(100vh - var(--alt-cab) - var(--pb));
  min-height:calc(100svh - var(--alt-cab) - var(--pb));
}

.hero__cabeca{grid-area:2 / 1}
.hero__pe{grid-area:3 / 1;margin-top:clamp(1.9rem,3.4vw,2.7rem)}
.hero__creditos{grid-area:5 / 1}
.hero__midia{grid-area:1 / 2 / span 5 / span 1}

.hero .micro + h1{margin-top:clamp(1.6rem,3.4vw,2.5rem)}

.hero h1{
  font-size:clamp(2.3rem,4.9vw,4.05rem);
  line-height:1.06;
  letter-spacing:-.022em;
  max-width:24ch;
}
/* cada verso é um bloco: transform não se aplica a inline não substituído,
   então em span inline a entrada escalonada só fazia o fade */
.hero h1 span{display:block}
.hero h1 em{
  font-style:italic;
  /* a itálica da Newsreader pede um respiro à direita */
  padding-right:.06em;
}

.hero__olho{
  max-width:44ch;
  color:rgba(242,240,236,.8);
}

.hero__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem 1rem;
  margin-top:clamp(1.9rem,3.2vw,2.5rem);
}

.hero__midia{
  align-self:stretch;
  position:relative;
  margin-top:calc(var(--alt-cab) * -1);
  margin-bottom:calc(var(--pb) * -1);
  margin-right:calc(var(--bleed) * -1);
  min-height:clamp(340px,52vh,760px);
  /* máscara VERTICAL no pai … */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 84%,transparent 100%);
}
.hero__midia picture{
  display:block;
  height:100%;
  /* … e HORIZONTAL no filho: as duas se multiplicam sozinhas, sem
     depender de mask-composite (suporte irregular) */
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 9%,#000 22%);
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 9%,#000 22%);
}
.hero__midia img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:78% 22%;
}

/* legenda editorial no pé do hero */
.hero__creditos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.6rem clamp(1rem,2vw,2rem);
  padding-top:1.5rem;
  border-top:1px solid rgba(242,240,236,.19);
  position:relative;
  z-index:1;
}
.hero__creditos .micro{white-space:nowrap}

/* seta de rolagem */
.hero__rolar{
  display:none;
  align-items:center;
  gap:.7em;
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(242,240,236,.58);
  transition:color .5s var(--suave);
}
.hero__rolar:hover,.hero__rolar:focus-visible{color:var(--papel)}
.hero__rolar i{
  width:1px;height:2.1rem;
  background:currentColor;
  display:block;
  transform-origin:top;
  animation:rolar 2.6s var(--suave) infinite;
}
@keyframes rolar{
  0%,100%{transform:scaleY(.35);opacity:.45}
  50%{transform:scaleY(1);opacity:1}
}
/* só cabe na linha de créditos quando a coluna do texto é larga */
@media (min-width:1100px){.hero__rolar{display:inline-flex}}

/* ---------------------------------------------------------------
   IMPACTO
   --------------------------------------------------------------- */

.impacto{
  --luz:8% 0%;
  padding-top:clamp(5.5rem,12vw,11rem);
  padding-bottom:clamp(3.2rem,6vw,5rem);
  overflow:hidden;
}
.impacto .fantasma{
  right:calc(var(--pad) * .3);
  top:calc(var(--sec) * .34);
  font-size:clamp(7rem,19vw,17rem);
}
.impacto__grade{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(2.4rem,6vw,6rem);
  align-items:end;
}
.impacto h2{
  font-size:clamp(2.5rem,7.4vw,5.6rem);
  line-height:1.03;
  letter-spacing:-.026em;
}
.impacto h2 span{display:block;overflow:hidden;padding-bottom:.03em}
.impacto h2 span b{display:block;font-weight:inherit}
.impacto__nota{padding-bottom:.6rem}
.impacto__nota .corpo{max-width:38ch}
.impacto .regua{margin-top:clamp(2.6rem,5vw,3.8rem)}

/* ---------------------------------------------------------------
   SOBRE
   --------------------------------------------------------------- */

.sobre{--luz:88% 12%;padding-top:clamp(3rem,7vw,6rem)}
.sobre__grade{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(2.2rem,6vw,5.5rem);
  align-items:start;
}
.sobre__midia{
  margin-left:calc(var(--bleed) * -1);
  position:relative;
  /* a proporção do arquivo é 4/5; a moldura fica um pouco mais baixa para
     sobrar curso vertical para a paralaxe */
  aspect-ratio:37 / 44;
}
.sobre__midia img{
  position:relative;
  top:-5%;              /* centra a folga: 5% de curso para cada lado */
  width:100%;height:110%;
  object-fit:cover;
  object-position:center 34%;
}
.sobre__midia figcaption{
  position:absolute;
  left:clamp(1.25rem,5vw,4.5rem);
  bottom:1.1rem;
  color:var(--papel);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
  z-index:1;
}

.sobre__texto{padding-top:clamp(.5rem,3vw,2.4rem)}
.sobre__texto h2{max-width:22ch}
.sobre__texto .olho{margin-bottom:1.5rem;max-width:50ch}

/* valores, em hairline — não é currículo, é assinatura */
.valores{
  list-style:none;
  margin:clamp(2.4rem,4.6vw,3.6rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--linha);
}
.valores li{
  padding:1.3rem clamp(1.2rem,2.4vw,2rem) 1.3rem 0;
  border-bottom:1px solid var(--linha);
  display:flex;
  align-items:baseline;
  gap:1rem;
  transition:background-color .5s var(--suave),padding-left .5s var(--mola);
}
.valores li:nth-child(2n){
  padding-left:clamp(1.2rem,2.4vw,2rem);
  padding-right:0;
  border-left:1px solid var(--linha);
}
.valores li:hover{background:var(--realce)}
.valores b{
  font-family:var(--sans);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  color:var(--texto-2);
  font-variant-numeric:tabular-nums;
  flex:none;
}
.valores span{
  font-family:var(--serif);
  font-size:1.09rem;
  line-height:1.42;
}

/* ---------------------------------------------------------------
   ÁREAS — lista editorial, sem cards
   --------------------------------------------------------------- */

.areas{--luz:84% 8%}
.areas__cabeca{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem);
  align-items:end;
  margin-bottom:clamp(2.8rem,6vw,4.6rem);
}
.areas__cabeca h2{max-width:16ch}
.areas__cabeca .corpo{max-width:42ch}

.areas__lista{isolation:isolate}

.areas__item{
  display:grid;
  grid-template-columns:3.6rem minmax(0,.92fr) minmax(0,1.08fr) auto;
  gap:clamp(.9rem,2.6vw,2.4rem);
  align-items:center;
  padding-block:clamp(1.9rem,3.6vw,2.7rem);
  border-top:1px solid var(--linha);
  position:relative;
}
.areas__item:last-child{border-bottom:1px solid var(--linha)}

/* a lavagem de fundo entra varrendo da esquerda, não por opacidade —
   o movimento é o que faz a lista parecer viva */
.areas__item::before{
  content:"";
  position:absolute;
  inset:0 calc(var(--pad) * -.62);
  background:var(--realce);
  transform:scaleX(0);
  transform-origin:left;
  z-index:-1;
  transition:transform .75s var(--mola);
}
.areas__item:hover::before,
.areas__item:focus-visible::before{transform:scaleX(1)}

/* a linha do topo engrossa e cresce da esquerda */
.areas__item::after{
  content:"";
  position:absolute;
  left:0;top:-1px;
  width:100%;height:1px;
  background:var(--texto);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s var(--mola);
}
.areas__item:hover::after,
.areas__item:focus-visible::after{transform:scaleX(1)}

.areas__num{
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  color:var(--texto-2);
  font-variant-numeric:tabular-nums;
  position:relative;
  transition:color .5s var(--suave);
}
.areas__num::after{
  content:"";
  position:absolute;
  left:0;bottom:-.7em;
  width:2.2em;height:1px;
  background:var(--texto);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--mola) .06s;
}
.areas__item:hover .areas__num{color:var(--texto)}
.areas__item:hover .areas__num::after{transform:scaleX(1)}

.areas__nome{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.6vw,2.15rem);
  line-height:1.16;
  letter-spacing:-.013em;
  transition:transform .6s var(--mola);
}
.areas__item:hover .areas__nome{transform:translateX(.45rem)}

.areas__desc{
  font-size:.9375rem;
  line-height:1.7;
  color:var(--texto-2);
  max-width:44ch;
  transition:color .5s var(--suave);
}
.areas__item:hover .areas__desc{color:var(--texto)}

.areas__seta{
  width:3rem;height:3rem;
  border:1px solid var(--linha-forte);
  border-radius:50%;
  display:grid;place-items:center;
  flex:none;
  transition:border-color .55s var(--suave),background-color .55s var(--suave),
             color .55s var(--suave),transform .6s var(--mola);
}
.areas__seta svg{width:1rem;height:1rem;transition:transform .6s var(--mola)}
.areas__item:hover .areas__seta{
  border-color:var(--texto);
  background:var(--texto);
  color:var(--fundo);
  transform:scale(1.06);
}
.areas__item:hover .areas__seta svg{transform:translateX(.2rem)}

/* ---------------------------------------------------------------
   FOCO PREVIDENCIÁRIO — públicos atendidos
   --------------------------------------------------------------- */

.foco{--luz:10% 4%}
.foco__grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.foco h2{max-width:17ch}
.foco__intro{padding-top:clamp(.4rem,2vw,1.4rem)}
.foco__intro .olho{max-width:46ch}
.foco__intro .corpo{margin-top:1.4rem}

.publicos{
  list-style:none;
  margin:clamp(3.2rem,6vw,5rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--linha);
}
/* padding nos DOIS lados: com padding só à direita, o texto da coluna
   seguinte nascia encostado no filete divisor */
.publicos li{
  padding:clamp(1.7rem,3vw,2.4rem) clamp(1.1rem,2vw,1.8rem);
  border-right:1px solid var(--linha);
  display:flex;
  flex-direction:column;
  gap:.95rem;
  transition:background-color .55s var(--suave);
}
.publicos li{border-bottom:1px solid var(--linha)}
.publicos li:nth-child(3n){border-right:0;padding-right:0}
.publicos li:nth-child(3n+1){padding-left:0}
.publicos li:hover{background:var(--realce)}
.publicos b{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.14rem,1.8vw,1.45rem);
  line-height:1.22;
  letter-spacing:-.01em;
}
.publicos p{font-size:.875rem;line-height:1.68;color:var(--texto-2)}

/* ---------------------------------------------------------------
   PROCESSO — linha editorial, não cinco cards
   --------------------------------------------------------------- */

.processo{--luz:80% 4%;padding-top:clamp(4rem,9vw,7.5rem)}
.processo__cabeca{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem);
  align-items:end;
  margin-bottom:clamp(3.6rem,7vw,5.8rem);
}
.processo__cabeca h2{max-width:15ch}
.processo__cabeca .corpo{max-width:40ch}

.etapas{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,2rem);
  position:relative;
}
.etapas__linha{
  position:absolute;
  left:0;top:5px;
  width:100%;height:1px;
  background:var(--linha-forte);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.5s var(--mola) .1s;
}
[data-revela].dentro .etapas__linha{transform:scaleX(1)}

.etapas li{
  padding-top:2.3rem;
  position:relative;
}
.etapas li::before{
  content:"";
  position:absolute;
  left:0;top:1px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--fundo);
  border:1px solid var(--texto);
  transform:scale(0);
  transition:transform .6s var(--mola),background-color .45s var(--suave);
  transition-delay:calc(.35s + var(--i,0) * .13s),0s;
}
[data-revela].dentro .etapas li::before{transform:scale(1)}
.etapas li:last-child::before{background:var(--texto)}
[data-revela].dentro .etapas li:hover::before{transform:scale(1.5);background:var(--texto)}

.etapas b{
  display:block;
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  color:var(--texto-2);
  font-variant-numeric:tabular-nums;
  margin-bottom:.95rem;
}
.etapas h3{
  font-size:clamp(1.08rem,1.6vw,1.32rem);
  line-height:1.24;
  margin-bottom:.8rem;
  transition:transform .5s var(--mola);
}
.etapas li:hover h3{transform:translateX(.22rem)}
.etapas p{font-size:.875rem;line-height:1.68;color:var(--texto-2)}

/* ---------------------------------------------------------------
   DIFERENCIAL — tipografia grande e espaço negativo
   --------------------------------------------------------------- */

.pilares{--luz:16% 0%;padding-block:clamp(5.5rem,12vw,11rem)}
.pilares__cabeca{margin-bottom:clamp(3.2rem,7vw,5.5rem)}
.pilares__cabeca h2{max-width:20ch}

.pilares__grade{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.pilares__item{
  padding:clamp(2.2rem,4.4vw,3.6rem) clamp(1.6rem,3.4vw,3rem) clamp(2.2rem,4.4vw,3.6rem) 0;
  border-top:1px solid var(--linha);
  display:flex;
  flex-direction:column;
  gap:clamp(.95rem,2vw,1.5rem);
  position:relative;
  overflow:hidden;
  transition:background-color .55s var(--suave);
}
.pilares__item:nth-child(2n){
  padding-left:clamp(1.6rem,3.4vw,3rem);
  padding-right:0;
  border-left:1px solid var(--linha);
}
.pilares__item:nth-last-child(-n+2){border-bottom:1px solid var(--linha)}
.pilares__item:hover{background:var(--realce)}

/* numeral gigante ao fundo de cada pilar */
.pilares__item .fantasma{
  right:.06em;bottom:-.16em;
  font-size:clamp(5rem,11vw,9.5rem);
  transition:opacity .6s var(--suave),transform .8s var(--mola);
}
.pilares__item:nth-child(2n) .fantasma{right:.06em}
.pilares__item:hover .fantasma{opacity:calc(var(--fantasma-op) * 2.1);transform:translateY(-.05em)}

.pilares__item b{
  font-family:var(--sans);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  color:var(--texto-2);
  font-variant-numeric:tabular-nums;
  position:relative;z-index:1;
}
.pilares__item h3{
  font-size:clamp(2rem,4.6vw,3.3rem);
  line-height:1.04;
  letter-spacing:-.024em;
  position:relative;z-index:1;
}
.pilares__item p{
  font-size:.9375rem;
  line-height:1.72;
  color:var(--texto-2);
  max-width:34ch;
  position:relative;z-index:1;
}

/* ---------------------------------------------------------------
   POSICIONAMENTO
   --------------------------------------------------------------- */

.frase{
  --luz:70% 50%;
  padding-block:clamp(6.5rem,16vw,14rem);
  overflow:hidden;
}
.frase__grade{position:relative;z-index:1;max-width:min(100%,900px)}
.frase blockquote{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.05rem,5.6vw,4.3rem);
  line-height:1.11;
  letter-spacing:-.024em;
  text-wrap:balance;
}
.frase blockquote span{display:block;overflow:hidden;padding-bottom:.04em}
.frase blockquote span b{display:block;font-weight:inherit}
.frase blockquote em{font-style:italic;padding-right:.05em}
.frase .micro{margin-bottom:clamp(1.9rem,4vw,2.9rem)}
.frase__assina{
  margin-top:clamp(2.6rem,5vw,3.8rem);
  padding-top:1.6rem;
  border-top:1px solid var(--linha);
  display:flex;align-items:center;gap:1.2rem;
}
.frase__assina .marca{height:36px;flex:none;opacity:.92}
.frase__assina span{
  font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texto-2);
}

/* a marca como marca-d'água — é o que tira a seção do vazio */
.frase__fundo{
  position:absolute;
  right:calc(var(--bleed) * -.12);
  top:50%;
  transform:translateY(-50%) translate3d(0,var(--py,0px),0);
  width:min(48vw,600px);
  color:var(--papel);
  opacity:.055;
  z-index:0;
  pointer-events:none;
}

/* ---------------------------------------------------------------
   ATENDIMENTO + LOCALIZAÇÃO
   --------------------------------------------------------------- */

.contato{--luz:88% 6%}
.contato__cabeca{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem);
  align-items:end;
  margin-bottom:clamp(3.2rem,6.5vw,5rem);
}
.contato__cabeca h2{max-width:16ch}
.contato__cabeca .corpo{max-width:42ch}

.contato__grade{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--linha);
}
/* padding nos dois lados: sem isso o texto encostava no filete divisor */
.contato__bloco{
  padding:clamp(2.1rem,3.6vw,2.9rem) clamp(1.5rem,2.6vw,2.3rem);
  border-right:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
  transition:background-color .55s var(--suave);
}
.contato__bloco:first-child{padding-left:0}
.contato__bloco:last-child{border-right:0;padding-right:0}
.contato__bloco:hover{background:var(--realce)}
.contato__bloco h3{
  font-family:var(--sans);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texto-2);
  margin-bottom:1.5rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--linha);
  line-height:1.5;
}
.contato__bloco address,
.contato__bloco > div{
  font-style:normal;
  font-family:var(--serif);
  font-size:1.09rem;
  line-height:1.66;
}
.contato__bloco .cep{
  display:block;
  font-family:var(--sans);
  font-size:.8125rem;
  letter-spacing:.04em;
  color:var(--texto-2);
  margin-top:.6rem;
}
.contato__bloco .tel{
  font-family:var(--serif);
  font-size:clamp(1.2rem,2vw,1.55rem);
  letter-spacing:-.01em;
  display:inline-block;
}
.contato__bloco .obs{
  font-family:var(--sans);
  font-size:.875rem;
  color:var(--texto-2);
  margin-top:1rem;
  line-height:1.68;
}
.contato__acoes{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem 1rem;
  margin-top:clamp(2.8rem,5vw,4rem);
  align-items:center;
}
.zap-glifo{color:var(--zap)}

/* ---------------------------------------------------------------
   MAPA — contido, monocromático, e só carrega ao chegar perto
   --------------------------------------------------------------- */

.mapa{
  position:relative;
  overflow:hidden;
  border:1px solid var(--linha);
  background:var(--realce);
  aspect-ratio:21 / 9;
  margin-top:clamp(2.6rem,5vw,4rem);
}
.mapa iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  filter:grayscale(1) contrast(1.05) brightness(.99);
  transition:filter .7s var(--suave);
}
.mapa:hover iframe{filter:grayscale(.25) contrast(1) brightness(1)}
/* no escuro, invertido: vira mapa noturno em vez de mancha branca */
[data-fundo="escuro"] .mapa iframe,
[data-fundo="escuro-2"] .mapa iframe{
  filter:grayscale(1) invert(.91) contrast(.92) brightness(1.06);
}
[data-fundo="escuro"] .mapa:hover iframe,
[data-fundo="escuro-2"] .mapa:hover iframe{
  filter:grayscale(.6) invert(.91) contrast(.92) brightness(1.06);
}
.mapa__rotulo{
  position:absolute;
  left:0;bottom:0;
  z-index:2;
  background:var(--fundo);
  padding:.85rem 1.1rem;
  border-top:1px solid var(--linha);
  border-right:1px solid var(--linha);
}

/* ---------------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------------- */

@media (max-width:1080px){
  .publicos{grid-template-columns:1fr 1fr}
  .publicos li:nth-child(3n),
  .publicos li:nth-child(3n+1){padding-left:clamp(1.1rem,2vw,1.8rem);padding-right:clamp(1.1rem,2vw,1.8rem);border-right:1px solid var(--linha)}
  .publicos li:nth-child(2n){border-right:0;padding-right:0}
  .publicos li:nth-child(2n+1){padding-left:0}

  .etapas{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(2.2rem,4vw,3rem)}
  .etapas__linha{display:none}
  .etapas li{padding-top:2rem}

  .contato__grade{grid-template-columns:1fr 1fr}
  .contato__bloco:nth-child(2n){border-right:0;padding-right:0}
  .contato__bloco:nth-child(2n+1){padding-left:0}
  .contato__bloco:last-child{grid-column:1 / -1;border-bottom:0;padding-right:0}
  .mapa{aspect-ratio:16 / 9}
}

@media (max-width:900px){
  /* hero: retrato vira faixa full-bleed com a proporção do arquivo,
     então o `cover` não sobra em nenhum eixo e o rosto nunca é cortado */
  .hero{padding-bottom:clamp(2.4rem,6vw,3.4rem)}
  .hero__grade{
    display:flex;
    flex-direction:column;
    min-height:0;
    padding-top:clamp(2.4rem,7vw,3.4rem);
  }
  .hero__cabeca,.hero__pe,.hero__midia,.hero__creditos{grid-area:auto}
  .hero__creditos{margin-top:clamp(2.2rem,6vw,2.8rem)}
  .hero__midia{
    margin:clamp(2.2rem,6vw,3rem) calc(var(--bleed) * -1);
    min-height:0;
    aspect-ratio:4 / 5;
    /* alfa parcial no topo: opaco criava borda reta visível contra o preto */
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.22) 0,#000 7%,#000 84%,transparent 100%);
            mask-image:linear-gradient(to bottom,rgba(0,0,0,.22) 0,#000 7%,#000 84%,transparent 100%);
  }
  .hero__midia picture{
    -webkit-mask-image:none;
            mask-image:none;
  }
  .hero__midia img{object-position:center 18%}
  .hero__pe{margin-top:0}
  .hero h1{max-width:none}
  .hero__rolar{display:none}

  .impacto__grade,
  .sobre__grade,
  .areas__cabeca,
  .foco__grade,
  .processo__cabeca,
  .contato__cabeca{grid-template-columns:1fr}
  .impacto__grade{gap:clamp(2rem,5vw,2.8rem)}
  .impacto__nota{padding-bottom:0}
  .foco__intro{padding-top:0}

  .sobre__midia{
    margin-left:calc(var(--bleed) * -1);
    margin-right:calc(var(--bleed) * -1);
    aspect-ratio:4 / 5;
  }
  .sobre__texto{padding-top:0}

  .areas__item{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "num  seta"
      "nome seta"
      "desc desc";
    row-gap:.85rem;
    align-items:start;
  }
  .areas__num{grid-area:num}
  .areas__nome{grid-area:nome}
  .areas__desc{grid-area:desc;margin-top:.5rem}
  .areas__seta{grid-area:seta;align-self:center}
  .areas__item:hover .areas__nome{transform:none}

  .pilares__grade{grid-template-columns:1fr}
  .pilares__item,
  .pilares__item:nth-child(2n){
    padding-left:0;
    padding-right:0;
    border-left:0;
  }
  .pilares__item:nth-last-child(-n+2):not(:last-child){border-bottom:0}
}

@media (max-width:640px){
  .valores{grid-template-columns:1fr}
  .valores li,
  .valores li:nth-child(2n){padding-left:0;padding-right:0;border-left:0}
  .publicos{grid-template-columns:1fr}
  .publicos li,
  .publicos li:nth-child(2n+1),
  .publicos li:nth-child(2n),
  .publicos li:nth-child(3n),
  .publicos li:nth-child(3n+1){padding-left:0;padding-right:0;border-right:0}
  .etapas{grid-template-columns:1fr;row-gap:0}
  .etapas li{
    padding:1.5rem 0 1.5rem 2rem;
    border-top:1px solid var(--linha);
  }
  .etapas li::before{top:1.95rem;transform:scale(1)}
  .etapas li:last-child{border-bottom:1px solid var(--linha)}
  .etapas b{margin-bottom:.55rem}
  .contato__grade{grid-template-columns:1fr}
  .contato__bloco,
  .contato__bloco:nth-child(2n),
  .contato__bloco:nth-child(2n+1){padding-left:0;padding-right:0;border-right:0}
  .contato__acoes .btn{width:100%;justify-content:center}
  .mapa{aspect-ratio:5 / 4}
  .frase__fundo{width:78vw;opacity:.045}
}

/* ---------------------------------------------------------------
   FORMULÁRIO — fichas de escolha + prévia da mensagem

   Sem back-end de propósito: o site é estático, e um formulário que
   finge enviar e-mail é pior que não ter formulário. Este monta a
   mensagem e abre a conversa no WhatsApp já escrita — e mostra
   exatamente o que vai ser mandado, antes de mandar.

   Sem JavaScript o `action` do próprio form leva o campo de recado
   para o wa.me, e a prévia (que não teria como funcionar) desaparece.
   --------------------------------------------------------------- */

.formulario{--luz:18% 4%}
.formulario__grade{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.2rem,6vw,5.5rem);
  align-items:start;
}
.formulario__texto{position:sticky;top:calc(var(--alt-cab) + 2.4rem)}
.formulario__texto h2{max-width:17ch}

.garantias{
  list-style:none;
  margin:clamp(2rem,4vw,2.8rem) 0 0;
  padding:0;
  border-top:1px solid var(--linha);
}
.garantias li{
  padding:.95rem 0;
  border-bottom:1px solid var(--linha);
  font-size:.875rem;
  line-height:1.6;
  color:var(--texto-2);
  display:flex;
  align-items:baseline;
  gap:.9rem;
}
.garantias li::before{
  content:"";
  flex:none;
  width:.95rem;height:1px;
  background:var(--linha-forte);
  transform:translateY(-.38em);
}

/* ---- o formulário ---- */

.fala{
  display:flex;
  flex-direction:column;
  gap:clamp(1.9rem,3.4vw,2.7rem);
}
.fala__grupo{border:0;margin:0;padding:0;min-width:0}
.fala__grupo legend{
  display:flex;
  align-items:baseline;
  gap:1.15rem;
  width:100%;
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texto-2);
  padding:0 0 1.05rem;
  margin-bottom:1.35rem;
  border-bottom:1px solid var(--linha);
}
.fala__grupo legend .n{
  color:var(--texto);
  font-variant-numeric:tabular-nums;
  flex:none;
}

/* fichas: radio de verdade, aparência editorial */
.fichas{display:flex;flex-wrap:wrap;gap:.55rem}
.ficha{position:relative;cursor:pointer;display:block}
.ficha input{
  position:absolute;
  width:1px;height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}
.ficha span{
  display:block;
  font-size:.8125rem;
  letter-spacing:.015em;
  line-height:1.2;
  padding:.9em 1.15em;
  border:1px solid var(--linha-forte);
  color:var(--texto-2);
  transition:color .45s var(--suave),border-color .45s var(--suave),
             background-color .45s var(--suave),transform .5s var(--mola);
}
.ficha:hover span{border-color:var(--texto);color:var(--texto)}
.ficha input:checked + span{
  background:var(--texto);
  border-color:var(--texto);
  color:var(--fundo);
}
.ficha input:focus-visible + span{
  outline:2px solid currentColor;
  outline-offset:3px;
}
.ficha:active span{transform:scale(.98)}

.fala__par{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1rem,2.4vw,1.6rem);
}
.fala__par + .campo{margin-top:clamp(1.3rem,2.6vw,1.8rem)}

.campo{display:flex;flex-direction:column;gap:.5rem}
.campo label{
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texto-2);
}
.campo label em{
  font-style:normal;
  text-transform:none;
  letter-spacing:.03em;
  opacity:.66;
}
.campo input,
.campo textarea{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:400;
  line-height:1.6;
  color:var(--texto);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--linha-forte);
  border-radius:0;
  padding:.7rem 0;
  transition:border-color .45s var(--suave);
}
.campo input::placeholder,
.campo textarea::placeholder{color:var(--texto-2);opacity:.7}
.campo input:hover,
.campo textarea:hover,
.campo input:focus,
.campo textarea:focus{border-bottom-color:var(--texto)}
.campo textarea{resize:vertical;min-height:5.6rem}
/* :user-invalid só marca depois que a pessoa mexeu — :invalid marcaria
   o campo vazio desde o primeiro paint */
.campo input:user-invalid,
.campo textarea:user-invalid{border-bottom-color:#C2564A}

/* ---- prévia ---- */

.previa{
  border:1px solid var(--linha);
  background:var(--realce);
  padding:clamp(1.15rem,2.2vw,1.6rem);
}
.previa__rotulo{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
  padding-bottom:.8rem;
  border-bottom:1px solid var(--linha);
}
.previa__texto{
  font-family:var(--serif);
  font-size:1.03rem;
  line-height:1.62;
  white-space:pre-line;
  color:var(--texto);
  min-height:5.4em;
  margin:0;
}
.previa__texto:empty::before{
  content:"Escolha ao menos um assunto e escreva o seu nome — a mensagem aparece aqui.";
  color:var(--texto-2);
  font-style:italic;
}
html:not(.js) .previa{display:none}

.fala > .btn{align-self:start}
.fala__nota{
  font-size:.8125rem;
  line-height:1.65;
  color:var(--texto-2);
  max-width:54ch;
}

@media (max-width:900px){
  .formulario__grade{grid-template-columns:1fr}
  .formulario__texto{position:static}
}
@media (max-width:560px){
  .fala__par{grid-template-columns:1fr}
  .fala > .btn{width:100%;justify-content:center}
  .fichas{gap:.45rem}
  .ficha span{padding:.85em 1em;font-size:.78rem}
}

/* ---------------------------------------------------------------
   DUAS FRENTES — as duas áreas principais em peso idêntico

   Mesma largura, mesma tipografia, mesmo número de itens, mesmo
   link. O equilíbrio aqui é estrutural: não dá para uma parecer
   maior que a outra porque a grade não permite.
   --------------------------------------------------------------- */

.frentes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:clamp(2.8rem,5.5vw,4.2rem);
  border-top:1px solid var(--linha);
}
.frente{
  display:flex;
  flex-direction:column;
  padding:clamp(2.1rem,4vw,3.2rem) clamp(1.6rem,3.2vw,2.8rem);
  border-bottom:1px solid var(--linha);
  transition:background-color .55s var(--suave);
}
.frente:first-child{
  padding-left:0;
  border-right:1px solid var(--linha);
}
.frente:last-child{padding-right:0}
.frente:hover{background:var(--realce)}

.frente__num{
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  color:var(--texto-2);
  font-variant-numeric:tabular-nums;
  position:relative;
  padding-bottom:1.1rem;
}
.frente__num::after{
  content:"";
  position:absolute;
  left:0;bottom:.5rem;
  width:2.2em;height:1px;
  background:var(--linha-forte);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s var(--mola);
}
.frente:hover .frente__num::after{transform:scaleX(1)}

.frente h3{
  font-size:clamp(1.5rem,2.9vw,2.25rem);
  line-height:1.1;
  letter-spacing:-.017em;
  max-width:16ch;
}
.frente__desc{
  margin-top:clamp(1rem,2vw,1.35rem);
  font-size:.9375rem;
  line-height:1.7;
  color:var(--texto-2);
  max-width:40ch;
}

.frente__itens{
  list-style:none;
  margin:clamp(1.6rem,3vw,2.2rem) 0 0;
  padding:0;
  border-top:1px solid var(--linha);
}
.frente__itens li{
  display:flex;
  align-items:baseline;
  gap:.85rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--linha);
  font-family:var(--serif);
  font-size:1.02rem;
  line-height:1.42;
}
.frente__itens li::before{
  content:"";
  flex:none;
  width:.75rem;height:1px;
  background:var(--linha-forte);
  transform:translateY(-.4em);
}

/* margin-top auto alinha os dois links na mesma altura, mesmo com
   colunas de alturas diferentes */
.frente__elo{margin-top:auto;padding-top:clamp(1.7rem,3vw,2.3rem)}

@media (max-width:820px){
  .frentes{grid-template-columns:1fr}
  .frente,
  .frente:first-child,
  .frente:last-child{
    padding-left:0;
    padding-right:0;
    border-right:0;
  }
}

/* ---------------------------------------------------------------
   AVALIAÇÕES — o que os clientes escreveram no Google

   Sem cards e sem parede de estrelinhas: a voz das pessoas é que
   sustenta a seção. Uma citação em destaque, o resto em grade de
   filetes. A marca do Google entra como selo de procedência —
   é o ativo oficial, não um desenho nosso.
   --------------------------------------------------------------- */

.avaliacoes{--luz:76% 6%;overflow:hidden}
.avaliacoes .fantasma{
  right:calc(var(--pad) * .4);
  top:calc(var(--sec) * .5);
  font-size:clamp(9rem,26vw,24rem);
  line-height:.62;
}

.avaliacoes__cabeca{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.8rem,4vw,4rem);
  align-items:end;
  margin-bottom:clamp(2.6rem,5.5vw,4rem);
}
.avaliacoes__cabeca h2{max-width:15ch}

/* selo: o G oficial + rótulo */
.selo-google{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:clamp(1.1rem,2.2vw,1.6rem);
}
.selo-google img{
  width:22px;height:22px;
  flex:none;
}
.selo-google span{
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texto-2);
  line-height:1;
}

.avaliacoes__acoes{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem 1rem;
  padding-bottom:.4rem;
}
/* o G dentro do botão fica em disco claro: o glifo colorido some
   contra o preto, e a marca não pode ser recolorida */
.btn__g{
  width:1.35em;height:1.35em;
  flex:none;
  border-radius:50%;
  background:#fff;
  padding:.16em;
  box-sizing:border-box;
}

/* ---- citação em destaque ---- */

.avaliacao--destaque{
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
  padding-block:clamp(2.4rem,5vw,3.8rem);
  position:relative;
}
.avaliacao--destaque blockquote{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.55rem,3.6vw,2.85rem);
  line-height:1.2;
  letter-spacing:-.018em;
  max-width:26ch;
  text-wrap:balance;
}
.avaliacao__quem{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.55rem .9rem;
  margin-top:clamp(1.4rem,2.6vw,2rem);
}
.avaliacao__quem b{
  font-family:var(--sans);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texto);
}
.avaliacao__quem span{
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texto-2);
}
.avaliacao__quem i{
  width:1.6em;height:1px;
  background:var(--linha-forte);
  display:block;flex:none;
}

/* ---- grade das demais ---- */

.avaliacoes__grade{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}
.avaliacao{
  padding:clamp(1.8rem,3.2vw,2.6rem) clamp(1.4rem,2.6vw,2.2rem);
  border-right:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
  display:flex;
  flex-direction:column;
  transition:background-color .55s var(--suave);
}
.avaliacao:nth-child(3n){border-right:0;padding-right:0}
.avaliacao:nth-child(3n+1){padding-left:0}
.avaliacao:hover{background:var(--realce)}
.avaliacao blockquote{
  margin:0;
  font-family:var(--serif);
  font-size:1.09rem;
  line-height:1.5;
}
/* o nome desce para o pé da célula: as citações têm alturas diferentes
   e sem isto as assinaturas ficariam desalinhadas */
.avaliacao .avaliacao__quem{margin-top:auto;padding-top:clamp(1.3rem,2.4vw,1.8rem)}

.avaliacoes__nota{
  margin-top:clamp(1.8rem,3.4vw,2.6rem);
  font-size:.8125rem;
  line-height:1.7;
  color:var(--texto-2);
  max-width:62ch;
}
.avaliacoes__nota a{text-decoration:underline;text-underline-offset:.22em}

@media (max-width:900px){
  .avaliacoes__cabeca{grid-template-columns:1fr}
  .avaliacoes__acoes{padding-bottom:0}
  .avaliacoes__grade{grid-template-columns:1fr 1fr}
  .avaliacao:nth-child(3n),
  .avaliacao:nth-child(3n+1){
    padding-left:clamp(1.4rem,2.6vw,2.2rem);
    padding-right:clamp(1.4rem,2.6vw,2.2rem);
    border-right:1px solid var(--linha);
  }
  .avaliacao:nth-child(2n){border-right:0;padding-right:0}
  .avaliacao:nth-child(2n+1){padding-left:0}
}

@media (max-width:600px){
  .avaliacoes__grade{grid-template-columns:1fr}
  .avaliacao,
  .avaliacao:nth-child(2n),
  .avaliacao:nth-child(2n+1),
  .avaliacao:nth-child(3n),
  .avaliacao:nth-child(3n+1){
    padding-left:0;
    padding-right:0;
    border-right:0;
  }
  .avaliacoes__acoes .btn{width:100%;justify-content:center}
}