@charset "UTF-8";
/* =========================================================================
   349 Para Idosos — folha única.
   Paleta amostrada do logotipo oficial. Contrastes verificados em
   direcao-de-arte.md. Nenhum valor mágico repetido, nenhuma declaração forçada.
   ========================================================================= */

@font-face{
  font-family:"Source Serif 4";
  src:url("../fonts/source-serif-4-latin-600.woff2") format("woff2");
  font-weight:200 900; 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+2000-206F,U+2122,U+2212;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight:100 900; 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+2000-206F,U+2122,U+2212;
}

/* ---------- tokens ---------- */
:root{
  /* cor, tudo do logotipo */
  --tinta:#171226;
  --tinta-2:#221A38;
  --papel:#F7F4EF;
  --papel-2:#EFE9DF;
  --marca:#553781;
  --marca-clara:#A78FD4;
  --acao:#64BD9F;
  --acao-forte:#7FD3B6;
  --acao-txt:#0A5C46;
  --btn-tinta:#0E1F1A;
  --apoio:#005F5B;
  --texto-claro:#CFC7E0;
  --suave:#4A4358;
  --borda-viva:#6B5C93;
  --borda-clara:#DED6C8;

  /* tipografia */
  --f-display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-corpo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-mini:clamp(.78rem,.74rem + .2vw,.88rem);
  --t-corpo:clamp(1.125rem,1.06rem + .32vw,1.28rem);
  --t-guia:clamp(1.25rem,1.12rem + .62vw,1.6rem);
  --t-h3:clamp(1.4rem,1.2rem + .95vw,2rem);
  --t-h2:clamp(1.85rem,1.4rem + 2.1vw,3.1rem);
  --t-h1:clamp(2.3rem,1.62rem + 3.1vw,4.35rem);
  --t-display:clamp(2.6rem,1.5rem + 5.2vw,5.5rem);
  --t-num:clamp(2.6rem,1.7rem + 4.2vw,4.6rem);

  /* espaçamento, progressão única base 4px */
  --e-1:.25rem; --e-2:.5rem;  --e-3:.75rem; --e-4:1rem;
  --e-5:1.5rem; --e-6:2rem;   --e-7:3rem;   --e-8:4.5rem; --e-9:7rem;
  --secao:clamp(3.5rem,2rem + 7vw,7.5rem);
  --envelope:min(100% - 2.5rem,68rem);
  --leitura:36rem;

  /* forma */
  --r-1:.5rem; --r-2:1rem; --r-3:2rem; --r-pill:100rem;
  --sombra:0 1.25rem 3rem rgb(15 8 30 / .28);
  --borda:1px solid var(--borda-clara);
  --dur:.24s;
  --barra-h:4.75rem;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--f-corpo);
  font-size:var(--t-corpo);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-inline-size:100%;block-size:auto;display:block}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.16}
p{margin:0}
a{color:inherit}
:target{scroll-margin-block-start:var(--e-9)}

:focus-visible{
  outline:3px solid var(--acao-forte);
  outline-offset:3px;
  border-radius:var(--r-1);
}
.pula{
  position:fixed;inset-block-start:var(--e-2);inset-inline-start:var(--e-2);z-index:80;
  transform:translateY(-160%);
  background:var(--tinta);color:var(--papel);
  padding:var(--e-3) var(--e-5);border-radius:var(--r-1);text-decoration:none;font-weight:600;
}
.pula:focus-visible{transform:none}

.envelope{inline-size:var(--envelope);margin-inline:auto}
.kicker{
  font-size:var(--t-mini);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  margin-block-end:var(--e-4);color:var(--marca-clara);
}
.kicker--marca{color:var(--marca)}
.kicker--menta{color:var(--acao)}
.chamada{font-size:var(--t-guia);max-inline-size:var(--leitura);color:var(--suave);margin-block-start:var(--e-5);text-wrap:pretty}
.rodape-secao{margin-block-start:var(--e-6)}

/* ---------- botões e links de conversa ---------- */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-3);
  min-block-size:2.75rem;min-inline-size:2.75rem;
  padding:var(--e-3) var(--e-5);
  border-radius:var(--r-pill);
  font:600 1rem/1.2 var(--f-corpo);
  text-decoration:none;
  transition:transform var(--dur),background-color var(--dur),color var(--dur),box-shadow var(--dur);
}
.botao--g{padding:var(--e-4) var(--e-6);font-size:var(--t-corpo);min-block-size:3.5rem}
.botao--bloco{display:flex;inline-size:100%;max-inline-size:26rem}
.botao--menta{background:var(--acao);color:var(--btn-tinta)}
.botao--menta:hover{background:var(--acao-forte)}
.botao--menta:active{transform:scale(.97)}
.botao--vazado{border:2px solid currentColor;color:var(--papel)}
.botao--vazado:hover{background:rgb(255 255 255 / .1)}
.botao--vazado:active{transform:scale(.97)}
.ic{inline-size:1.35em;block-size:1.35em;fill:currentColor;flex:none}

.link-wa{
  display:inline-flex;align-items:center;gap:var(--e-2);
  min-block-size:2.75rem;
  color:var(--acao-txt);font-weight:600;
  text-decoration-thickness:2px;text-underline-offset:.28em;
}
.link-wa:hover{color:var(--apoio)}
/* Link de texto solto também precisa de 44px de altura de toque. Quem lê isto
   tem mais de 60 anos e vai tocar com o polegar, não clicar com um mouse. */
.rodape a,.fecho__dados a,.fecho__tel a,.topo__marca{
  display:inline-flex;align-items:center;min-block-size:2.75rem;
}
.cena__passo .link-wa,.freio .link-wa{color:var(--acao)}
.cena__passo .link-wa:hover,.freio .link-wa:hover{color:var(--acao-forte)}

/* ---------- barra de progresso de leitura (ato: todos) ---------- */
.progresso{position:fixed;inset-block-start:0;inset-inline:0;block-size:.25rem;z-index:60;pointer-events:none}
.progresso i{display:block;block-size:100%;background:var(--acao);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- topo ---------- */
.topo{
  position:sticky;inset-block-start:0;z-index:50;
  background:color-mix(in srgb,var(--papel) 92%,transparent);
  border-block-end:var(--borda);
  backdrop-filter:blur(10px);
}
.topo__interno{
  inline-size:var(--envelope);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);
  padding-block:var(--e-3);
}
.topo__marca img{block-size:2.35rem;inline-size:auto}
.topo__cta{padding-inline:var(--e-4)}
.topo__cta span{display:none}

/* ---------- ATO 1, hero ----------
   No celular a foto é uma faixa em fluxo, no formato dela. Foto de grupo em
   tela cheia vertical vira um recorte de duas pessoas e joga fora justamente a
   informação que importa aqui, que é ter turma. Do tablet para cima a tela
   é larga o bastante e a foto vira fundo sangrado com texto por cima. */
.hero{position:relative;background:var(--tinta);color:var(--papel);isolation:isolate}
.hero__foto{overflow:hidden}
/* 16/10 no celular pequeno para o botão caber na primeira dobra;
   abre para 4/3 assim que a tela permite. */
.hero__foto img{inline-size:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 42%}
.hero__texto{
  padding-block:var(--e-5) var(--secao);
  display:grid;gap:var(--e-4);
}
.hero .kicker{margin-block-end:0}
.hero .kicker strong{color:var(--acao)}
/* No celular a prova curta desce para baixo do botão. Sem isso o CTA cai fora da
   primeira dobra num aparelho de 812px de altura. A ordem do DOM não muda, então
   leitor de tela e ordem de foco continuam iguais. */
@media (max-width:29.9375rem){
  .prova-curta{order:1}
  .hero__nota{order:2}
}
@media (min-width:30rem){
  .hero__foto img{aspect-ratio:4/3}
  .hero__texto{gap:var(--e-5)}
}
.hero h1{max-inline-size:16ch}
.sustento{font-size:var(--t-guia);max-inline-size:var(--leitura);color:var(--texto-claro);text-wrap:pretty}
.sustento strong{color:var(--papel)}
/* fichas em vez de pontos separadores: quando a linha quebra, um separador
   solto no começo da linha fica esquisito. */
.prova-curta{display:flex;flex-wrap:wrap;gap:var(--e-2);font-size:var(--t-mini);
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--acao)}
.prova-curta span{
  display:inline-flex;align-items:center;
  padding:var(--e-1) var(--e-3);
  border:1px solid color-mix(in srgb,var(--acao) 55%,transparent);
  border-radius:var(--r-pill);
}
.hero__acoes{display:flex;flex-wrap:wrap;gap:var(--e-3)}
.hero__nota{font-size:var(--t-mini);color:var(--texto-claro);max-inline-size:34ch}

/* ---------- ATO 2, escala ---------- */
.escala{background:var(--tinta);color:var(--papel);padding-block:var(--secao)}
.escala .chamada{color:var(--texto-claro)}
.numeros{display:grid;gap:var(--e-5);margin:var(--e-8) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.numeros__item{border-block-start:2px solid var(--borda-viva);padding-block-start:var(--e-4)}
.numeros dt{font-size:var(--t-mini);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-claro);order:2;margin-block-start:var(--e-3)}
.numeros dd{margin:0;font-family:var(--f-display);font-size:var(--t-num);line-height:1;color:var(--acao);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.numeros__item{display:flex;flex-direction:column}
.numeros__mais{color:var(--marca-clara)}

.tira{
  inline-size:var(--envelope);margin:var(--e-8) auto 0;
  display:grid;gap:var(--e-5);grid-template-columns:1fr;
}
.tira__item{margin:0}
.tira__item img{inline-size:100%;border-radius:var(--r-2)}
.tira figcaption{font-size:var(--t-mini);color:var(--texto-claro);margin-block-start:var(--e-3);max-inline-size:40ch}

/* ---------- ATO 3, o que inclui ---------- */
.inclui{background:var(--papel);padding-block:var(--secao);content-visibility:auto;contain-intrinsic-size:auto 78rem}
.inclui h2{max-inline-size:20ch}
.lista-inclui{list-style:none;margin:var(--e-7) 0 0;padding:0}
/* o traço vertical vem do logotipo (dígitos construídos com hastes retas).
   Fica absoluto de propósito: como grid, o nó de texto solto virava item
   anônimo de largura max-content e estourava a linha. */
.lista-inclui li{
  position:relative;
  padding-block:var(--e-4);padding-inline-start:var(--e-5);
  border-block-end:var(--borda);
  max-inline-size:52rem;
}
.lista-inclui li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:calc(var(--e-4) + .34em);
  inline-size:.2rem;block-size:1.05em;background:var(--marca);border-radius:var(--r-1);
}
.lista-inclui strong{font-weight:600}

/* ---------- ATO 3, cena travada dos passos ---------- */
.passos{background:var(--tinta-2);color:var(--papel);padding-block:var(--secao)}
.passos h2{max-inline-size:18ch}
.cena{inline-size:var(--envelope);margin:var(--e-7) auto 0}
/* fundo sólido, não gradiente: no celular o texto que passa por trás aparecia
   pela metade dentro da faixa de transparência e ficava ilegível. */
.cena__palco{
  position:sticky;inset-block-start:3.9rem;z-index:2;
  padding-block:var(--e-3);margin-block-end:var(--e-5);
  background:var(--tinta-2);
  box-shadow:0 var(--e-4) var(--e-4) calc(var(--e-4) * -1) var(--tinta-2);
}
.cena__num{display:flex;align-items:baseline;gap:var(--e-3);font-family:var(--f-display);color:var(--acao)}
.cena__num span{font-size:clamp(3rem,10vw,4.5rem);line-height:.9;font-variant-numeric:tabular-nums}
.cena__num i{font-style:normal;font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-claro);font-family:var(--f-corpo);font-weight:600}
.cena__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-7)}
.cena__passo{border-inline-start:2px solid var(--borda-viva);padding-inline-start:var(--e-5);display:grid;gap:var(--e-3)}
.cena__passo .link-wa{justify-self:start}
.cena__rot{font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--marca-clara)}
.cena__passo p:not(.cena__rot){color:var(--texto-claro);max-inline-size:var(--leitura)}

/* ---------- ATO 4, freios ---------- */
.freios{background:var(--papel-2);padding-block:var(--secao);content-visibility:auto;contain-intrinsic-size:auto 105rem}
.freios h2{max-inline-size:22ch}
.freio{margin-block-start:var(--e-7);max-inline-size:52rem}
.freio__fala{
  font-family:var(--f-display);font-size:var(--t-h3);line-height:1.24;color:var(--marca);
  border-inline-start:.2rem solid var(--marca);padding-inline-start:var(--e-4);text-wrap:pretty;
}
.freio__resp{margin-block-start:var(--e-4);padding-inline-start:calc(var(--e-4) + .2rem);color:var(--suave);text-wrap:pretty}
.freio .rodape-secao{padding-inline-start:calc(var(--e-4) + .2rem)}
.freio__foto{margin:var(--e-5) 0 0;overflow:hidden;border-radius:var(--r-2)}
.freio__foto img{inline-size:100%}

/* ---------- ATO 4, virada ---------- */
.virada{background:var(--tinta);color:var(--papel);padding-block:clamp(5rem,16vw,11rem);text-align:center}
.virada__frase{
  font-family:var(--f-display);font-size:var(--t-display);line-height:1.04;letter-spacing:-.02em;
  inline-size:var(--envelope);margin-inline:auto;text-wrap:balance;
}

/* ---------- prova social desligada (quando ligar) ---------- */
.vozes{background:var(--papel);padding-block:var(--secao)}
.voz{margin:var(--e-7) 0 0;padding-inline-start:var(--e-5);border-inline-start:.2rem solid var(--acao);max-inline-size:52rem}
.voz p{font-family:var(--f-display);font-size:var(--t-h3);line-height:1.28}
.voz cite{display:block;margin-block-start:var(--e-3);font-size:var(--t-mini);font-style:normal;color:var(--suave);letter-spacing:.04em}

/* ---------- ATO 5, FAQ ---------- */
.faq{background:var(--papel);padding-block:var(--secao);content-visibility:auto;contain-intrinsic-size:auto 85rem}
.q{border-block-end:var(--borda);max-inline-size:52rem}
.q:first-of-type{border-block-start:var(--borda)}
.q summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);
  padding-block:var(--e-5);min-block-size:2.75rem;
  font-family:var(--f-display);font-size:var(--t-guia);line-height:1.3;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:"";flex:none;inline-size:.85rem;block-size:.85rem;
  border-inline-end:2px solid var(--marca);border-block-end:2px solid var(--marca);
  transform:rotate(45deg) translate(-.15rem,-.15rem);transition:transform var(--dur);
}
.q[open] summary::after{transform:rotate(225deg) translate(-.2rem,-.2rem)}
.q summary:hover{color:var(--marca)}
.q__corpo{padding-block-end:var(--e-5);color:var(--suave);max-inline-size:var(--leitura);display:grid;gap:var(--e-4)}

/* ---------- ponte antes do fecho: a casa nao e so deste publico ---------- */
.familia{background:var(--papel-2);padding-block:var(--secao);content-visibility:auto;contain-intrinsic-size:auto 46rem}
.familia__grade{display:grid;gap:var(--e-6)}
.familia h2{max-inline-size:16ch}
.familia__foto{margin:0;border-radius:var(--r-2);overflow:hidden}
.familia__foto img{inline-size:100%;aspect-ratio:3/2;object-fit:cover}
@media (min-width:56rem){
  .familia__grade{grid-template-columns:1fr 34rem;align-items:center;gap:var(--e-8)}
}

/* ---------- ATO 5, fecho ---------- */
.fecho{background:var(--tinta);color:var(--papel);padding-block:var(--secao)}
.fecho h2{max-inline-size:18ch}
.fecho .chamada{color:var(--texto-claro)}
.fecho .botao{margin-block-start:var(--e-6)}
.fecho__tel{margin-block-start:var(--e-4);font-size:var(--t-mini);color:var(--texto-claro)}
.fecho__tel a{color:var(--acao);font-weight:600}
.fecho__dados{
  margin-block-start:var(--e-8);padding-block-start:var(--e-6);border-block-start:2px solid var(--borda-viva);
  display:grid;gap:var(--e-6);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.fecho__dados h3{font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;font-family:var(--f-corpo);color:var(--marca-clara);margin-block-end:var(--e-3)}
.fecho__dados p{color:var(--texto-claro);font-size:1rem}
.fecho__dados p+p{margin-block-start:var(--e-3)}
.fecho__dados a{color:var(--acao);font-weight:600}

/* ---------- rodapé ---------- */
.rodape{background:var(--papel-2);padding-block:var(--e-8);border-block-start:var(--borda)}
.rodape__logo{block-size:2.6rem;inline-size:auto;margin-block-end:var(--e-6)}
.rodape picture{display:block}
.rodape__cols{display:grid;gap:var(--e-6);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.rodape h2{font-family:var(--f-corpo);font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--marca);margin-block-end:var(--e-3)}
.rodape p{font-size:1rem;color:var(--suave)}
.rodape p+p{margin-block-start:var(--e-3)}
.rodape a{color:var(--apoio);font-weight:600}
.rodape__legal{margin-block-start:var(--e-7);font-size:var(--t-mini);color:var(--suave)}

/* ---------- barra fixa de conversa ---------- */
.barra{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:55;
  padding:var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--tinta) 88%,transparent);
  backdrop-filter:blur(10px);
  border-block-start:1px solid var(--borda-viva);
  transition:transform .32s ease;
}
.barra .botao{inline-size:100%}
.botao--barra{font-size:1.0625rem;min-block-size:3.25rem}
/* sem JS a barra simplesmente fica visível. Com JS ela entra depois do ato 1. */
.js .barra{transform:translateY(115%)}
.js .barra.mostra{transform:none}
.js .barra.recolhe{transform:translateY(115%)}
main{padding-block-end:var(--barra-h)}

/* =========================================================================
   MOVIMENTO
   Tudo dentro de prefers-reduced-motion: no-preference.
   Os estados iniciais moram dentro de @supports, então navegador sem suporte
   e usuário com movimento reduzido veem o conteúdo no estado final.
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){

  @supports (animation-timeline:scroll()){
    .progresso i{
      animation:barra-progresso linear both;
      animation-timeline:scroll(root block);
    }
  }
  @keyframes barra-progresso{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* Toda faixa termina dentro da fase `entry`, nunca em `cover`. Um bloco no pé
     da página pode nunca completar a fase `cover`, porque o scroll acaba antes,
     e ficaria parado em meia opacidade para sempre. Terminando em `entry`, o
     estado final chega assim que o bloco acaba de entrar na tela. */
  @supports (animation-timeline:view()){
    /* efeito 3, revelação por bloco (atos 2, 3 e 4) */
    .revela{
      animation:sobe linear both;
      animation-timeline:view();
      animation-range:entry 5% entry 70%;
    }
    /* efeito 6, a água aparece na hora da objeção do joelho (ato 4) */
    .freio__foto img{
      animation:agua linear both;
      animation-timeline:view();
      animation-range:entry 8% entry 85%;
    }
    /* efeito 7, a frase de virada (ato 4) */
    .virada__frase{
      animation:virada linear both;
      animation-timeline:view();
      animation-range:entry 15% entry 80%;
    }
  }
  @keyframes sobe{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}
  @keyframes agua{
    from{clip-path:inset(0 0 92% 0);transform:scale(1.05)}
    to{clip-path:inset(0 0 0 0);transform:scale(1)}
  }
  /* a frase de virada nunca cai para opacidade baixa: se por qualquer motivo a
     animacao parar no meio, ela ainda precisa ser legivel. */
  @keyframes virada{from{opacity:.55;transform:translateY(1.75rem) scale(.985)}to{opacity:1;transform:none}}

  /* efeito 2, zoom lento do hero, teto 1,06 */
  @supports (animation-timeline:view()){
    .hero__foto img{
      animation:hero-zoom linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
  }
  @keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.06)}}
}

/* ---------- respiro para quem pediu menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .botao,.barra,.q summary::after{transition:none}
  .progresso{display:none}
}

/* =========================================================================
   BREAKPOINTS: 40rem, 56rem, 72rem
   ========================================================================= */
@media (min-width:40rem){
  .topo__cta span{display:inline}
  /* as duas fotos têm proporção diferente na origem. Alinhar por altura evita
     uma legenda flutuando no meio do nada ao lado da outra. */
  .tira{grid-template-columns:1fr 1fr;gap:var(--e-6);align-items:start}
  .tira__item{display:flex;flex-direction:column}
  .tira__item img{aspect-ratio:3/2;object-fit:cover}
  .barra{padding-inline:var(--e-6)}
  .barra .botao{inline-size:auto;min-inline-size:22rem;margin-inline:auto;display:flex}
}

@media (min-width:56rem){
  :root{--barra-h:0rem}
  .topo__marca img{block-size:2.9rem}

  /* foto vira fundo sangrado com véu escuro por cima. O véu é diagonal: escurece
     a coluna do texto e deixa respirar o lado direito, onde estão os rostos. */
  .hero__foto{position:absolute;inset:0;z-index:-2}
  .hero__foto img{block-size:100%;aspect-ratio:auto;object-position:50% 62%}
  .hero::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:
      linear-gradient(96deg,rgb(23 18 38 / .93) 0%,rgb(23 18 38 / .84) 34%,rgb(23 18 38 / .42) 66%,rgb(23 18 38 / .5) 100%),
      linear-gradient(180deg,rgb(23 18 38 / .3) 0%,rgb(23 18 38 / 0) 26%,rgb(23 18 38 / .62) 76%,var(--tinta) 100%);
  }
  .hero__texto{
    padding-block:clamp(4rem,7vw,6rem) var(--e-7);
    max-inline-size:min(100% - 4rem,40rem);margin-inline:0;
    gap:var(--e-4);
  }
  .hero__texto{padding-inline-start:max(2rem,calc((100vw - var(--envelope)) / 2))}
  .hero h1{max-inline-size:14ch}

  /* cena travada em duas colunas: número fixo à esquerda, passos subindo à direita */
  .cena{display:grid;grid-template-columns:12rem 1fr;gap:var(--e-8);align-items:start}
  /* toda medida em vh vem com teto: numa tela muito alta, 38vh viraria um vão
     absurdo entre um passo e o seguinte. */
  .cena__palco{
    position:sticky;inset-block-start:min(34vh,20rem);margin:0;padding:0;
    background:none;box-shadow:none;block-size:0;
  }
  .cena__num{flex-direction:column;align-items:flex-start;gap:var(--e-2)}
  .cena__num span{font-size:clamp(5rem,9vw,7.5rem)}
  .cena__lista{gap:min(34vh,19rem);padding-block:var(--e-7) min(28vh,16rem)}
  .cena__passo{border:0;padding:0}

  .freio{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  .freio__foto{margin-block-start:var(--e-6)}

  /* a barra fixa é de celular. No desktop o CTA do topo e das seções resolve. */
  .barra{display:none}
}

@media (min-width:72rem){
  :root{--envelope:min(100% - 4rem,74rem)}
  .cena{grid-template-columns:16rem 1fr}
}

/* ---------- impressão: não precisa ser bonita, mas não pode quebrar ---------- */
@media print{
  .progresso,.barra,.topo__cta,.hero__acoes{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .hero,.escala,.passos,.virada,.fecho{background:#fff;color:#000}
  .hero::after,.hero__foto{display:none}
  .hero__texto{padding-block:var(--e-5)}
  .sustento,.chamada,.numeros dt,.cena__passo p,.fecho__dados p,.hero__nota{color:#000}
  .numeros dd,.cena__num,.virada__frase{color:#000}
  .q__corpo{display:block}
  .q[open] summary::after,.q summary::after{display:none}
  main{padding-block-end:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}