/* ==========================================================================
   Viva Voz — Coprodução Digital
   Direção: "amplitude". A página é um sinal de áudio lido de cima para baixo.
   A onda de fundo começa quase reta — a voz sem estrutura — e ganha amplitude
   conforme o visitante rola. A rolagem é o amplificador. Uma única banda clara
   (creme) abre no meio: são as outras portas — as páginas para a saúde e os
   sites para marcenaria.
   Paleta e tipografia travadas no Manual de Marca da Viva Voz.
   ========================================================================== */

@font-face{
  font-family:'Jost';
  src:url('fontes/jost.woff2?v=1') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Raleway';
  src:url('fontes/raleway.woff2?v=1') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* manual de marca — travadas */
  --breu:#051320;
  --chama:#D1640D;
  --creme:#FFF0C9;
  --bruma:#D1D5DE;
  --profundo:#064789;

  /* superfícies derivadas do breu */
  --breu-alto:#0B1F31;
  --breu-carta:#0E2739;
  --breu-linha:rgba(209,213,222,.14);
  --breu-linha-forte:rgba(209,213,222,.26);
  --neblina:#8FA0B0;          /* texto terciário sobre breu — 6,9:1 */

  /* chama em variações de luminância */
  --brasa:#A94A05;
  --chama-clara:#F08A34;

  /* banda clara */
  --creme-fundo:#FFF0C9;
  --creme-carta:#FFF8E6;
  --creme-linha:rgba(5,19,32,.14);
  --tinta-suave:#3A4C5C;      /* texto secundário sobre creme — 7,8:1 */

  --display:'Jost','Segoe UI',Helvetica,Arial,sans-serif;
  --texto:'Raleway','Segoe UI',Helvetica,Arial,sans-serif;

  --limite:76rem;
  --gutter:clamp(1.25rem,5vw,3.5rem);
  --respiro:clamp(4.5rem,10vw,9rem);
  --curva:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--breu);
  color:var(--creme);
  font-family:var(--texto);
  font-size:clamp(1rem,.96rem + .22vw,1.14rem);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

:focus-visible{outline:2px solid var(--chama-clara);outline-offset:3px;border-radius:2px}

.pular{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--chama);color:#fff;padding:.75rem 1.25rem;font-weight:600;
}
.pular:focus{left:.5rem;top:.5rem}

/* ---------- a onda de fundo ------------------------------------------- */

#onda{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease .2s;
  /* horizonte: a onda nasce embaixo e nunca alcanca a altura do texto */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 38%,#000 72%);
          mask-image:linear-gradient(180deg,transparent 0,transparent 38%,#000 72%);
}
#onda.acesa{opacity:1}

/* véu que garante contraste do texto sobre a onda */
.veu{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,19,32,.30) 0%,rgba(5,19,32,0) 24%);
}

.pagina{position:relative;z-index:2}

/* ---------- tipografia ------------------------------------------------- */

h1,h2,h3,h4{font-family:var(--display);font-weight:300;margin:0;line-height:1.04;letter-spacing:-.02em}

.rotulo{
  font-family:var(--display);font-weight:500;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--chama-clara);
  margin:0 0 1.35rem;display:block;
}
.rotulo--bruma{color:var(--neblina)}
.rotulo--tinta{color:var(--brasa)}

/* o eco do logotipo: uma palavra pesada em chama, o resto leve em creme */
.acende{color:var(--chama-clara);font-weight:600}
.eco{color:var(--neblina)}

.titulo{font-size:clamp(2.1rem,5.4vw,3.9rem);letter-spacing:-.028em}
.titulo--grande{font-size:clamp(2.4rem,7vw,5.2rem);letter-spacing:-.034em;line-height:.98}

.chapeu{
  font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,2vw,1.4rem);
  letter-spacing:-.01em;line-height:1.3;margin:0 0 .6rem;
}

.prosa{max-width:44ch;color:var(--bruma);margin:0}
.prosa--larga{max-width:58ch}
.prosa + .prosa{margin-top:1.1rem}

/* ---------- estrutura -------------------------------------------------- */

.faixa{padding:var(--respiro) var(--gutter);position:relative;background:var(--breu)}
section[id]{scroll-margin-top:5.5rem}
.centro{max-width:var(--limite);margin-inline:auto;width:100%}

.faixa--clara{background:var(--creme-fundo);color:var(--breu)}
.faixa--clara .prosa{color:var(--tinta-suave)}
.faixa--densa{background:var(--breu-alto)}
.faixa--vidro{background:transparent}

/* ---------- topo ------------------------------------------------------- */

.topo{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:1.5rem;
  padding:.85rem var(--gutter);
  transition:background .35s var(--curva),backdrop-filter .35s var(--curva),border-color .35s;
  border-bottom:1px solid transparent;
}
.topo.pousado{
  background:rgba(5,19,32,.88);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--breu-linha);
}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.marca img{height:38px;width:auto}
.menu{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0}
.menu a{
  font-family:var(--display);font-size:.86rem;font-weight:400;letter-spacing:.04em;
  text-decoration:none;color:var(--bruma);transition:color .22s;
}
.menu a:hover{color:var(--creme)}

/* ---------- botões ----------------------------------------------------- */

.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--display);font-weight:500;font-size:.95rem;letter-spacing:.03em;
  padding:.95rem 1.9rem;border-radius:999px;text-decoration:none;
  /* <button> nasce com o fundo cinza do sistema (ButtonFace): sem isto, o
     texto creme do botao fantasma fica ilegivel sobre um bloco claro */
  background:transparent;color:var(--creme);
  border:1px solid transparent;cursor:pointer;
  transition:transform .22s var(--curva),background .22s,border-color .22s,color .22s;
  min-height:48px;
}
.botao:hover{transform:translateY(-2px)}
.botao--chama{background:var(--chama);color:#fff;border-color:var(--chama)}
.botao--chama:hover{background:var(--chama-clara);border-color:var(--chama-clara)}
.botao--linha{color:var(--creme);border-color:var(--breu-linha-forte)}
.botao--linha:hover{border-color:var(--creme);background:rgba(255,240,201,.06)}
.botao--tinta{background:var(--breu);color:var(--creme);border-color:var(--breu)}
.botao--tinta:hover{background:var(--breu-carta)}
.botao--miudo{padding:.65rem 1.35rem;font-size:.86rem;min-height:42px}

.seta{width:1em;height:1em;flex:none;transition:transform .22s var(--curva)}
.botao:hover .seta{transform:translateX(3px)}

/* ---------- abertura --------------------------------------------------- */

.abertura{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(7rem,16vh,10rem);padding-bottom:clamp(3rem,8vh,5rem);
}
.abertura h1{
  font-size:clamp(2.35rem,6.4vw,5rem);
  line-height:.98;letter-spacing:-.035em;font-weight:300;
  margin:0 0 1.6rem;max-width:17ch;text-wrap:balance;
}
.abertura__sub{max-width:52ch;color:var(--bruma);font-size:clamp(1.02rem,1vw + .7rem,1.22rem);margin:0 0 2.3rem}
.abertura__acoes{display:flex;flex-wrap:wrap;gap:.85rem}
.abertura__nota{
  margin:2.6rem 0 0;font-family:var(--display);font-size:.78rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--neblina);display:flex;align-items:center;gap:.7rem;
}
.abertura__nota::before{content:"";width:2.2rem;height:1px;background:var(--chama);flex:none}

/* ---------- a chama na abertura ---------------------------------------
   Presença de marca sem disputar com a headline: a chama ocupa o vazio da
   direita, atrás do texto, num véu de opacidade baixa. Respira devagar,
   como brasa — e fica imóvel para quem pediu menos movimento.
   -------------------------------------------------------------------- */

.abertura{overflow:hidden}
.abertura > .centro{position:relative;z-index:1}

.chama-marca{
  position:absolute;z-index:0;pointer-events:none;
  top:50%;right:clamp(-1rem,5vw,7rem);transform:translateY(-50%);
  width:clamp(12rem,26vw,21rem);aspect-ratio:191/313;
  display:grid;place-items:center;
}
.chama-marca::before{
  content:"";position:absolute;inset:-38%;
  /* `closest-side` faz o brilho chegar a zero exatamente na borda da caixa.
     Com o padrao (`farthest-corner`), ele ainda estava aceso ao ser cortado
     e isso desenhava um degrau retangular no fundo. */
  background:radial-gradient(ellipse closest-side,
    rgba(209,100,13,.20) 0%,rgba(209,100,13,.06) 38%,rgba(209,100,13,0) 76%);
}
.chama-marca img{
  position:relative;width:100%;height:auto;opacity:.12;
  /* nada de filter aqui: drop-shadow num elemento animado obriga o
     navegador a rasterizar o SVG de novo a cada quadro. O brilho ja vem
     do gradiente do ::before, que custa zero. */
  will-change:opacity;
}

@media (prefers-reduced-motion:no-preference){
  .chama-marca img{animation:brasa 9s ease-in-out infinite}
  /* so opacidade: escalar um SVG grande obriga a rasteriza-lo de novo a
     cada quadro, e isso apareceu como +150ms de bloqueio na medicao.
     Opacidade e trabalho de compositor, custa zero. */
  @keyframes brasa{
    0%,100%{opacity:.10}
    50%    {opacity:.17}
  }
}

/* ---------- barra de sinal (números) ----------------------------------- */

.sinal{padding-block:clamp(2.5rem,6vw,4rem)}
.sinal__grade{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--breu-linha);border-block:1px solid var(--breu-linha);
}
.sinal__grade--tres{grid-template-columns:repeat(3,1fr)}
.sinal__item{background:var(--breu);padding:1.6rem clamp(.85rem,2vw,1.6rem)}
.sinal__valor{
  font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,4.4vw,3.1rem);
  line-height:1;letter-spacing:-.03em;color:var(--creme);display:block;
}
.sinal__valor b{font-weight:600;color:var(--chama-clara)}
.sinal__rotulo{
  display:block;margin-top:.6rem;font-size:.83rem;line-height:1.45;color:var(--neblina);
  font-family:var(--texto);
}

/* ---------- manifesto -------------------------------------------------- */

.manifesto__abertura{margin-bottom:clamp(3rem,7vw,5rem)}
/* o limite tem de viver no proprio titulo: `ch` medido no container
   resolve contra a fonte do corpo, nao contra os 60px do h2. */
.manifesto__abertura .titulo{max-width:22ch;text-wrap:balance}
.principios{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.75rem)}
.principio{border-top:1px solid var(--breu-linha);padding-top:1.6rem}
.principio__marca{
  font-family:var(--display);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--chama-clara);display:block;margin-bottom:1rem;
}
.principio h3{font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:400;margin-bottom:.85rem}
.principio p{margin:0;color:var(--bruma);font-size:.98rem}

/* ---------- modelo (3 pilares) ----------------------------------------- */

.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem);margin-top:clamp(2.5rem,6vw,4rem)}
.pilar{
  background:var(--breu-carta);border:1px solid var(--breu-linha);
  border-radius:1.25rem;padding:clamp(1.6rem,3vw,2.35rem);
  display:flex;flex-direction:column;gap:.9rem;
  transition:border-color .3s,transform .3s var(--curva);
}
.pilar:hover{border-color:var(--breu-linha-forte);transform:translateY(-3px)}
.pilar h3{font-size:1.28rem;font-weight:500;letter-spacing:-.01em}
.pilar p{margin:0;color:var(--bruma);font-size:.98rem}
.pilar__icone{width:2.1rem;height:2.1rem;color:var(--chama)}

/* ---------- filtro (não é para todos) ---------------------------------- */

.filtro__grade{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2.5rem,6vw,4rem);
}
.coluna h3{
  font-size:1.35rem;font-weight:500;margin-bottom:1.5rem;
  padding-bottom:1rem;border-bottom:1px solid var(--breu-linha);
}
.coluna--sim h3{color:var(--chama-clara)}
.coluna--nao h3{color:var(--neblina)}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.lista li{display:flex;gap:.85rem;align-items:flex-start;font-size:1rem;line-height:1.6}
.lista svg{width:1.2rem;height:1.2rem;flex:none;margin-top:.28rem}
.coluna--sim svg{color:var(--chama)}
.coluna--nao{color:var(--neblina)}
.coluna--nao svg{color:var(--neblina)}

/* ---------- rito (etapas + squad) -------------------------------------- */

.etapas{list-style:none;margin:clamp(2.5rem,6vw,4rem) 0 0;padding:0;counter-reset:etapa}
.etapa{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.25rem,3vw,2.5rem);
  padding:clamp(1.5rem,3vw,2.1rem) 0;border-top:1px solid var(--breu-linha);
  align-items:baseline;
}
.etapa:last-child{border-bottom:1px solid var(--breu-linha)}
.etapa__n{
  font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,3vw,2.2rem);
  color:var(--chama);line-height:1;min-width:2.5ch;letter-spacing:-.02em;
}
.etapa h3{font-size:clamp(1.2rem,2.2vw,1.55rem);font-weight:500;margin-bottom:.6rem}
.etapa p{margin:0;color:var(--bruma);max-width:56ch;font-size:.99rem}

.squad{
  margin-top:clamp(2.5rem,6vw,4rem);padding:clamp(1.75rem,4vw,2.75rem);
  background:var(--breu-carta);border:1px solid var(--breu-linha);border-radius:1.25rem;
}
.squad__lista{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 0;padding:0;list-style:none}
.squad__lista li{
  font-family:var(--display);font-size:.88rem;letter-spacing:.04em;
  padding:.5rem 1.1rem;border:1px solid var(--breu-linha-forte);border-radius:999px;color:var(--creme);
}

/* ---------- experts ---------------------------------------------------- */

.experts__grade{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.85rem,2vw,1.4rem);margin-top:clamp(2.5rem,6vw,4rem)}
.expert{position:relative;border-radius:1.1rem;overflow:hidden;background:var(--breu-carta);aspect-ratio:4/5}
.expert img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.expert figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.5rem 1.15rem 1.15rem;
  background:linear-gradient(180deg,rgba(5,19,32,0),rgba(169,74,5,.86) 55%,rgba(169,74,5,.96));
  font-family:var(--display);font-size:1.05rem;line-height:1.25;color:#fff;
}
.expert figcaption b{display:block;font-weight:600}

/* ---------- liderança -------------------------------------------------- */

.lideranca__grade{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.lideranca__retrato{border-radius:1.25rem;overflow:hidden;position:relative;background:var(--breu-carta)}
.lideranca__retrato img{width:100%;aspect-ratio:4/5;object-fit:cover}
.lideranca__retrato::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,19,32,0) 45%,rgba(169,74,5,.42));
}
.assinatura{
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--breu-linha);
  font-family:var(--display);letter-spacing:.02em;
}
.assinatura b{display:block;font-size:1.15rem;font-weight:500}
.assinatura span{color:var(--neblina);font-size:.88rem}

/* ---------- páginas (banda clara) -------------------------------------- */

.paginas__topo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:end;margin-bottom:clamp(2.5rem,6vw,4rem)}
.paginas__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.75rem)}
.caso{
  background:var(--creme-carta);border:1px solid var(--creme-linha);
  border-radius:1rem;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--curva),box-shadow .3s;
  position:relative; /* ancora o link esticado abaixo */
}
.caso:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(5,19,32,.5)}
.antesdepois{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--creme-linha)}
.antesdepois figure{margin:0;position:relative;background:#fff}
.antesdepois img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top}
.antesdepois figcaption{
  position:absolute;top:.5rem;left:.5rem;
  font-family:var(--display);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.28rem .55rem;border-radius:.3rem;
}
.antesdepois .antes figcaption{background:rgba(5,19,32,.82);color:var(--bruma)}
.antesdepois .depois figcaption{background:var(--chama);color:#fff}
.vazio{
  aspect-ratio:8/5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;background:repeating-linear-gradient(45deg,#F1E6C8,#F1E6C8 8px,#EADFC0 8px,#EADFC0 16px);
  color:var(--tinta-suave);text-align:center;padding:1rem;
}
.vazio b{font-family:var(--display);font-size:.95rem;font-weight:500;color:var(--breu)}
.vazio span{font-size:.75rem;line-height:1.35}
.caso__pe{padding:1.1rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.caso__nome{font-family:var(--display);font-size:1.02rem;font-weight:500;color:var(--breu);line-height:1.25}
.caso__nota{font-size:.83rem;color:var(--tinta-suave);line-height:1.5;flex:1}
.caso__link{
  font-family:var(--display);font-size:.82rem;font-weight:500;letter-spacing:.06em;
  color:var(--brasa);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;
}
.caso__link:hover{text-decoration:underline}
/* O cartão inteiro leva ao site no ar. No Clarity, 15 toques caíam na imagem
   do antes-e-depois esperando que ela abrisse — e não abria. O link continua
   o mesmo; só a área de toque passa a ser o cartão todo. */
.caso__link::after{content:"";position:absolute;inset:0;z-index:3}
.paginas__chamada{
  margin-top:clamp(2.5rem,6vw,4rem);padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--creme-linha);
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;
}
.paginas__chamada p{margin:0;max-width:46ch;color:var(--tinta-suave)}

/* ---------- as outras duas portas: saúde e marcenaria -------------------
   Duas ofertas na mesma faixa. A antiga era texto à esquerda e um botão à
   direita; com dois destinos isso vira uma escolha, não um aviso — então
   cada porta ganha o seu cartão.
   -------------------------------------------------------------------- */

.faixa--fino{padding-block:clamp(2.25rem,5vw,3.25rem)}
.aparte{
  padding-block:clamp(1.5rem,3.5vw,2.25rem);
  border-block:1px solid var(--breu-linha);
}
.aparte .rotulo{margin-bottom:.7rem}
.aparte__texto{margin:0;max-width:60ch;color:var(--bruma);font-size:1rem}
.aparte__texto b{color:var(--creme);font-weight:600}

.aparte__portas{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.75rem);
  margin-top:clamp(1.75rem,4vw,2.5rem);
}
.porta{
  display:flex;flex-direction:column;gap:.6rem;text-decoration:none;
  background:var(--breu-carta);border:1px solid var(--breu-linha);
  border-radius:1rem;padding:clamp(1.35rem,2.6vw,1.9rem);
  transition:border-color .3s,transform .3s var(--curva);
}
.porta:hover{border-color:var(--breu-linha-forte);transform:translateY(-3px)}
.porta b{
  font-family:var(--display);font-size:1.18rem;font-weight:500;
  letter-spacing:-.012em;color:var(--creme);line-height:1.25;
}
.porta span{color:var(--bruma);font-size:.96rem;line-height:1.6;flex:1}
.porta em{
  font-style:normal;font-family:var(--display);font-size:.85rem;font-weight:500;
  letter-spacing:.04em;color:var(--chama-clara);
  /* o CTA virou frase inteira e quebra em duas linhas no celular. Em
     flex, a seta virava item proprio e ficava encalhada na primeira
     linha, longe do texto. Em fluxo inline ela segue a ultima palavra. */
  display:block;margin-top:.4rem;line-height:1.4;
}
.porta em .seta{display:inline-block;vertical-align:-.12em;margin-left:.4rem}
.porta em .seta{transition:transform .22s var(--curva)}
.porta:hover em .seta{transform:translateX(3px)}

/* ---------- interlúdio: a dobra em que a onda toma conta --------------- */

.interludio{
  min-height:78svh;display:flex;align-items:flex-start;justify-content:center;
  text-align:center;padding-top:clamp(4.5rem,14vh,8rem);padding-bottom:0;
  overflow:hidden;
}
.interludio p{
  margin:0 auto;font-family:var(--display);font-weight:300;
  font-size:clamp(2rem,5.6vw,4.2rem);line-height:1.06;letter-spacing:-.03em;
  max-width:16ch;
}
.interludio small{
  display:block;margin-top:1.5rem;
  font-family:var(--display);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--neblina);
}

/* ---------- chamada final ---------------------------------------------- */

.chamada{text-align:center}
.chamada .titulo{max-width:18ch;margin-inline:auto}
.chamada .prosa{margin:1.75rem auto 2.5rem;text-align:center}
.chamada__acoes{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}

/* ---------- rodapé ----------------------------------------------------- */

.rodape{
  background:var(--breu-alto);border-top:1px solid var(--breu-linha);
  padding:clamp(3rem,6vw,4.5rem) var(--gutter) clamp(2rem,4vw,3rem);
  position:relative;z-index:2;
}
.rodape__grade{
  max-width:var(--limite);margin-inline:auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(1.75rem,4vw,3rem);
}
.rodape h3{font-family:var(--display);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--neblina);font-weight:500;margin-bottom:1.1rem}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.rodape a{color:var(--bruma);text-decoration:none;font-size:.94rem;transition:color .2s}
.rodape a:hover{color:var(--creme)}
.rodape__marca img{height:52px;width:auto;margin-bottom:1.2rem}
.rodape__marca p{margin:0;color:var(--neblina);font-size:.92rem;max-width:34ch}
.rodape__base{
  max-width:var(--limite);margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  padding-top:1.5rem;border-top:1px solid var(--breu-linha);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  color:var(--neblina);font-size:.82rem;
}

/* ---------- barra fixa do celular (só a partir da 2ª dobra) ------------ */

.barra-fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(5,19,32,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--breu-linha);
  transform:translateY(110%);visibility:hidden;
  transition:transform .4s var(--curva),visibility 0s linear .4s;
}
.barra-fixa.visivel{transform:translateY(0);visibility:visible;transition-delay:0s,0s}
.barra-fixa .botao{width:100%}

/* ---------- revelação -------------------------------------------------- */

.revela{opacity:0;transform:translateY(22px);transition:opacity .7s var(--curva),transform .7s var(--curva)}
.revela.dentro{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  .botao:hover,.pilar:hover,.caso:hover{transform:none}
  .barra-fixa{transition:none}
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width:62em){
  .principios,.pilares{grid-template-columns:1fr 1fr}
  .experts__grade{grid-template-columns:1fr 1fr}
  .paginas__grade{grid-template-columns:1fr 1fr}
  .lideranca__grade{grid-template-columns:1fr;gap:2rem}
  .lideranca__retrato{max-width:22rem}
  .paginas__topo{grid-template-columns:1fr;align-items:start}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .rodape__marca{grid-column:1/-1}
  .menu{display:none}
}

@media (max-width:46em){
  .principios,.pilares,.filtro__grade,.paginas__grade{grid-template-columns:1fr}
  .sinal__grade,.sinal__grade--tres{grid-template-columns:1fr 1fr}
  /* tres numeros em duas colunas deixam a quarta celula vazia, e o fio da
     grade transforma esse vao num bloco solto: o ultimo ocupa a linha toda */
  .sinal__grade--tres > :last-child{grid-column:1 / -1}
  .abertura{min-height:auto;padding-top:clamp(6.5rem,22vh,9rem)}
  /* no celular ela aparece inteira e centrada, fechando a dobra abaixo
     dos botoes — cortada na borda parecia acidente, nao marca */
  .chama-marca{
    top:auto;bottom:clamp(2rem,6vh,3.5rem);right:auto;left:50%;
    transform:translateX(-50%);width:clamp(6.5rem,26vw,9.5rem);
  }
  /* o brilho tem de caber na folga que sobra ate o fim da dobra: a secao
     tem overflow:hidden e cortaria o gradiente ainda aceso */
  .chama-marca::before{inset:-30%}
  .chama-marca img{opacity:.11}
  .abertura__texto{max-width:none}
  .abertura__acoes .botao{flex:1 1 100%}
  .barra-fixa{display:block}
  .topo .botao--chama{display:none}
  .etapa{grid-template-columns:1fr;gap:.5rem}
  .etapa__n{font-size:1.15rem}
  .paginas__chamada{flex-direction:column;align-items:flex-start}
  .aparte__portas{grid-template-columns:1fr}
  .rodape__grade{grid-template-columns:1fr}
  /* espaco para a barra fixa nao cobrir a ultima linha do rodape */
  .rodape{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}
}

@media (max-width:30em){
  .experts__grade{gap:.7rem}
  .expert figcaption{font-size:.92rem;padding:1.1rem .8rem .8rem}
}