/* ==========================================================================
   ALÉM DO ESPELHO — Pri Hávila · workshop 19/09/2026

   Índice
   00 · tokens
   01 · base e utilitários
   02 · botões
   03 · sistema de movimento
   04 · hero
   05 · cenários (sticky)
   06 · compreensão
   08 · manifesto
   09 · quem conduz
   10 · método
   11 · em apenas um dia
   12 · oferta
   13 · faq
   14 · rodapé
   15 · camada de evento (marquise, chamadas, caixa)
   16 · movimento reduzido
   17 · celular
   18 · mobile (ajustes finais, isolados — nada aqui toca o desktop)

   Regra do movimento: nada se move só porque dá. Cada transição existe para
   revelar informação, criar hierarquia ou indicar transformação.
   ========================================================================== */


/* ==========================================================================
   00 · TOKENS
   ========================================================================== */

:root{
  --marrom:       #632407;
  --marrom-fundo: #4A1B05;
  --marrom-noite: #2E1002;
  --noite:        #1E0A02;

  /* grão: o que separa fundo chapado de fundo impresso. Um tile de ruído
     em SVG, sem requisição de rede, aplicado como camada de background. */
  --grao: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23g)' opacity='.07'/></svg>");
  --terracota:    #EBAD92;
  /* o verde é a cor de ação: só os botões usam, e é o único ponto da página
     que não é marrom — é isso que faz o olho achar o botão */
  --verde:        #23916A;
  --verde-fundo:  #17754F;
  --verde-brilho: rgba(35,145,106,.45);
  --pessego:      #F8DCCD;
  --creme:        #F3EFEC;
  --tinta:        #2A1004;
  --tinta-suave:  #5A4034;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --corpo:   "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --limite: 1140px;
  --ar: clamp(5rem, 9vw, 9rem);

  /* easing: saída longa, sem repique — nada pode parecer brusco */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-doce: cubic-bezier(.33, 1, .68, 1);
}


/* ==========================================================================
   01 · BASE E UTILITÁRIOS
   ========================================================================== */

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--marrom);
  color:var(--pessego);
  font-family:var(--corpo);
  font-weight:400;
  font-size:clamp(1rem, .95rem + .35vw, 1.14rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto é obrigatório junto dos atributos width/height do HTML: sem ele
   o atributo height vira dica de apresentação e o navegador aplica a altura
   natural do arquivo enquanto a largura vem do CSS — a imagem estica. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--terracota); color:var(--marrom); }
:focus-visible{ outline:2px solid var(--terracota); outline-offset:4px; border-radius:2px; }

.hero, .cenarios, .manifesto,
.quem, .metodo, .oferta, .faq, .rodape{ background-image:var(--grao); }

/* ATMOSFERA — as dobras de seda do material da marca, desenhadas em CSS.
   O deck da Pri tem esse fundo de tecido drapeado; aqui ele vira duas camadas
   de gradiente repetido em ângulos ligeiramente diferentes (o batimento entre
   os dois períodos é o que evita listra e produz vinco), mais um brilho que
   ancora o olho de um lado. Zero requisição, escala em qualquer tela. */
.atmosfera{ position:relative; isolation:isolate; overflow:hidden; }
.atmosfera::before{
  content:"";
  position:absolute; inset:-8% -4%;
  z-index:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(107deg,
      rgba(235,173,146,0)    0px,
      rgba(235,173,146,.085) 62px,
      rgba(235,173,146,0)    128px,
      rgba(0,0,0,.09)        196px,
      rgba(235,173,146,0)    272px),
    repeating-linear-gradient(97deg,
      rgba(235,173,146,0)    0px,
      rgba(235,173,146,.055) 96px,
      rgba(235,173,146,0)    228px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 74%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 74%, transparent 100%);
}
/* o brilho: um só por seção, do lado oposto ao peso do conteúdo */
.atmosfera::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(58% 62% at var(--brilho, 84%) 26%,
    rgba(235,173,146,.15), transparent 68%);
}
.atmosfera--esq{ --brilho:14%; }
.atmosfera--dir{ --brilho:86%; }
.atmosfera > *{ position:relative; z-index:1; }

.limite{ width:min(100% - 2.5rem, var(--limite)); margin-inline:auto; }
.limite--medio{ width:min(100% - 2.5rem, 900px); }
.limite--estreito{ width:min(100% - 2.5rem, 680px); }

/* cabeçalho de seção: um único device, repetido em todas elas */
.titulo{ margin:0 0 clamp(2.4rem, 5.5vh, 3.8rem); }
.titulo--centro{ text-align:center; }
.titulo--centro .titulo__h,
.titulo--centro .titulo__apoio{ margin-inline:auto; }
.titulo__h{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.9rem, 1.2rem + 3vw, 3rem);
  line-height:1.08;
  letter-spacing:-.025em;
  color:var(--pessego);
  margin:0;
  max-width:15em;      /* em do próprio título: ~2 linhas em qualquer tamanho */
}
.titulo__apoio{
  margin:1.1rem 0 0;
  max-width:46ch;
  font-size:1rem;
  color:#D9B7A3;
}

/* atalho para quem navega por teclado */
.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--terracota); color:var(--marrom);
  padding:.9rem 1.4rem; font-weight:600; text-decoration:none;
}
.pular:focus{ left:1rem; top:1rem; }


/* ==========================================================================
   02 · BOTÕES
   ========================================================================== */

.btn{
  display:inline-block;
  position:relative;
  background:linear-gradient(180deg, var(--verde), var(--verde-fundo));
  color:#FFFFFF;
  font-family:var(--corpo);
  font-weight:600;
  font-size:clamp(1rem, .95rem + .3vw, 1.15rem);
  text-decoration:none;
  text-align:center;
  padding:1.1em 2.4em;
  border-radius:999px;
  /* a luz: um halo da própria cor do botão, que cresce no hover */
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 10px 30px var(--verde-brilho),
    0 2px 10px rgba(0,0,0,.2);
  transition:filter .45s var(--ease), transform .45s var(--ease),
             box-shadow .45s var(--ease);
}
.btn:hover{
  filter:brightness(1.12);
  transform:translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 18px 46px rgba(35,145,106,.6),
    0 4px 14px rgba(0,0,0,.24);
}
.btn:active{ transform:translateY(-1px); }
.btn--grande{
  padding:1.15em 3.4em;
  font-size:clamp(1.05rem, 1rem + .3vw, 1.22rem);
}
/* o botão da hero segue a caixa da referência: alto e largo */
.hero__acao .btn{ min-height:63px; min-width:min(100%, 380px); display:grid; place-items:center; }
.btn--cheio{ display:block; width:100%; }


/* ==========================================================================
   03 · SISTEMA DE MOVIMENTO
   Três mecanismos, e só três:
   [data-entra]   → entrada encenada da hero, por delay
   [data-revelar] → revelação ao entrar na viewport (IntersectionObserver)
   [data-passo]   → estado dirigido pelo progresso do scroll (sticky)
   ========================================================================== */

@keyframes entra{
  from{ opacity:0; transform:translateY(26px); filter:blur(7px); }
  to  { opacity:1; transform:none;             filter:blur(0); }
}
@keyframes sobe{
  from{ transform:translateY(108%); }
  to  { transform:translateY(0); }
}

.js [data-entra]{ --atraso:0s; }
.js [data-entra="1"]{ --atraso:.06s } .js [data-entra="2"]{ --atraso:.18s }
.js [data-entra="3"]{ --atraso:.34s } .js [data-entra="4"]{ --atraso:.46s }
.js [data-entra="5"]{ --atraso:.58s } .js [data-entra="6"]{ --atraso:.68s }
.js [data-entra="7"]{ --atraso:.90s } .js [data-entra="8"]{ --atraso:1.06s }
.js [data-entra="9"]{ --atraso:1.20s } .js [data-entra="10"]{ --atraso:1.48s }

.js .hero__logo,
.js .hero__sub,
.js .hero__acao,
.js .hero__rolar{
  animation:entra 1.15s var(--ease) both;
  animation-delay:var(--atraso);
}

.js [data-revelar]{
  opacity:0;
  transform:translateY(30px);
  filter:blur(6px);
  transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
}
.js [data-revelar].visivel{ opacity:1; transform:none; filter:blur(0); }

/* escada: filhos entram em cascata dentro de um bloco já revelado */
.js [data-escada] > *{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0ms);
}
.js [data-revelar].visivel [data-escada] > *,
.js [data-escada].visivel > *{ opacity:1; transform:none; }


/* ==========================================================================
   04 · HERO
   ========================================================================== */

.hero{
  position:relative;
  overflow:hidden;
  background-color:var(--marrom);
  isolation:isolate;
}

/* o banner é a arte inteira: a mesma proporção da dobra (~1,91:1), então
   praticamente nada é cortado no desktop */
.hero__banner{
  position:absolute;
  inset:0;
  background:url("assets/pri-banner.webp") right 18% / cover no-repeat;
  z-index:-1;
  /* parallax: --p vem do motor de scroll, 0 no topo, 1 ao sair da hero */
  transform:scale(calc(1 + var(--p, 0) * .05)) translate3d(0, calc(var(--p, 0) * 2%), 0);
  transform-origin:72% 40%;
  will-change:transform;
}
/* véu leve: a arte já entrega o lado esquerdo escuro, isto só garante o
   contraste do texto quando o corte muda de proporção */
.hero__banner::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to right,
    rgba(30,10,2,.5) 0%,
    rgba(30,10,2,.32) 26%,
    rgba(30,10,2,.1) 46%,
    transparent 62%);
}

.hero__conteudo{
  width:min(100% - 2.5rem, var(--limite));
  margin-inline:auto;
  padding:clamp(2.2rem, 4.5vw, 3.4rem) 0 clamp(2.4rem, 5vw, 3.8rem);
}
@media (min-width:900px){
  .hero{
    display:flex;
    align-items:center;
    /* "safe" impede que um conteúdo mais alto que a tela seja centralizado
       para fora do topo — com overflow:hidden isso comeria a faixa e a logo */
    align-items:safe center;
    /* banner com a proporção da referência (≈52vw), nunca maior que a tela */
    min-height:min(clamp(560px, 52vw, 800px), 100svh);
  }
  /* mesma caixa da referência: container centrado, largura fixa */
  .hero__conteudo{ width:min(100% - 2.5rem, 1240px); margin-inline:auto; }
  .hero__conteudo > *{ max-width:min(100%, 620px); }
}

/* tela baixa: a dobra inteira precisa caber dentro da tela */
@media (min-width:900px) and (max-height:820px){
  .hero__conteudo{ padding-block:1.2rem; }
  .hero__logo{ width:min(38%, 118px); margin-bottom:.75rem; }
  .hero__titulo{ font-size:clamp(1.5rem, .88rem + 1.7vw, 1.95rem); margin-bottom:.65rem; }
  .hero__sub{ margin-bottom:.95rem; font-size:.92rem; }
  .hero__nota{ margin-top:.7rem; }
  .hero__acao .btn{ padding:1em 2.3em; }
}

/* notebook de 13": o último aperto para a dobra fechar dentro da tela */
@media (min-width:900px) and (max-height:700px){
  .hero__conteudo{ padding-block:.5rem; }
  .hero__logo{ width:min(32%, 88px); margin-bottom:.55rem; }
  .hero__titulo{ font-size:clamp(1.4rem, .85rem + 1.4vw, 1.75rem); margin-bottom:.45rem; }
  .hero__sub{ line-height:1.48; font-size:.88rem; margin-bottom:.65rem; }
  .hero__nota{ margin-top:.6rem; font-size:.92rem; }
}

.hero__logo{ width:min(58%, 250px); margin:0 0 clamp(1.1rem, 2.2vw, 1.6rem); }

.hero__titulo{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:clamp(1.8rem, 1.05rem + 2.5vw, 2.75rem);
  line-height:1.16;
  letter-spacing:-.022em;
  margin:0 0 1.15rem;
  color:var(--pessego);
}
/* cada linha é uma janela; o texto sobe por dentro dela */
.hero__titulo .linha{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__titulo .linha > span{ display:block; }
.js .hero__titulo .linha > span{
  animation:sobe 1.25s var(--ease) both;
  animation-delay:var(--atraso);
}
.hero__titulo .linha--destaque > span{ color:var(--terracota); }

.hero__sub{
  font-size:clamp(1rem, .9rem + .5vw, 1.18rem);
  line-height:1.42;
  color:#E4C3AE;
  margin:0 0 1.7rem;
  max-width:52ch;
}
.hero__sub p{ margin:0; }
/* o trio de "talvez" é uma anáfora: as três hipóteses precisam começar na
   mesma altura para a leitora achar a dela na lista. Por isso as quebras são
   escritas no HTML, e não deixadas ao acaso da largura. */
.hero__talvez{ margin-bottom:.9rem !important; color:var(--pessego); }

.hero__nota{ margin:.95rem 0 0; font-size:1rem; color:rgba(235,173,146,.95); }

/* indicador de rolagem: uma linha que desce e reinicia */
.hero__rolar{
  position:absolute;
  left:50%; bottom:1.8rem;
  width:1px; height:3.2rem;
  background:rgba(235,173,146,.28);
  overflow:hidden;
}
.hero__rolar span{
  position:absolute; inset:0;
  background:var(--terracota);
  animation:desce 2.4s var(--ease-doce) infinite;
}
@keyframes desce{
  0%  { transform:translateY(-100%); }
  55% { transform:translateY(0); }
  100%{ transform:translateY(100%); }
}

@media (max-width:899px){
  .hero__banner{
    position:relative; inset:auto; width:100%;
    height:min(74vw, 430px);
    background-position:74% 4%;
    z-index:0;
    transform:none;
  }
  .hero__banner::after{
    background:linear-gradient(to bottom,
      rgba(99,36,7,.05) 0%, rgba(99,36,7,.12) 58%,
      rgba(99,36,7,.7) 86%, var(--marrom) 100%);
  }
  .hero__conteudo{ padding-top:1.5rem; }
  .hero__rolar{ display:none; }
}


/* ==========================================================================
   05 · CENÁRIOS — seis blocos, cada um revelado quando chega
   ========================================================================== */

.cenarios{ background-color:var(--noite); padding:var(--ar) 0; }

.cartoes{ display:grid; gap:clamp(.9rem, 1.8vw, 1.3rem); }
.cartoes--segunda{ margin-top:clamp(.9rem, 1.8vw, 1.3rem); }
@media (min-width:700px){ .cartoes{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1040px){ .cartoes{ grid-template-columns:repeat(3, 1fr); } }
/* a segunda fileira tem dois blocos, não três: sem isto eles esticariam para
   as duas primeiras colunas e deixariam um buraco à direita */
@media (min-width:1040px){
  .cartoes--dois{
    grid-template-columns:repeat(2, 1fr);
    /* dois blocos com a mesma largura que teriam se fossem três: duas colunas
       de (100% - 2 gaps)/3, mais o gap entre elas */
    max-width:calc((100% - 2 * clamp(.9rem, 1.8vw, 1.3rem)) / 3 * 2 + clamp(.9rem, 1.8vw, 1.3rem));
    margin-inline:auto;
  }
}

/* superfície comum dos blocos escuros: luz vindo do alto à esquerda, sombra
   projetada em três camadas e um fio claro na borda de cima — é o conjunto
   que tira o bloco do plano do fundo. */
.cartao, .pilar{
  position:relative;
  background-color:rgba(46,16,2,.42);
  background-image:linear-gradient(158deg,
    rgba(235,173,146,.13) 0%,
    rgba(235,173,146,.035) 45%,
    rgba(0,0,0,.22) 100%);
  border:1px solid rgba(235,173,146,.2);
  border-radius:16px;
  box-shadow:
    0 1px 0 rgba(255,224,208,.13) inset,
    0 2px 4px rgba(0,0,0,.2),
    0 12px 26px rgba(0,0,0,.26),
    0 34px 60px rgba(0,0,0,.28);
}
/* o brilho de borda superior, que só aparece de perto */
.cartao::after, .pilar::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(235,173,146,.12), transparent 22%);
  opacity:.9;
}

.cartao{
  display:grid; justify-items:center; gap:.85rem;
  z-index:0;
  padding:clamp(1.7rem, 3vw, 2.3rem) clamp(1.2rem, 2.6vw, 1.8rem);
  text-align:center;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.cartao:hover{
  border-color:rgba(235,173,146,.45);
  transform:translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,224,208,.2) inset,
    0 4px 8px rgba(0,0,0,.22),
    0 18px 34px rgba(0,0,0,.3),
    0 44px 74px rgba(0,0,0,.32);
}
.cartao > *{ position:relative; z-index:1; }
.cartao__marca{
  width:1.9rem; height:1.9rem;
  fill:none; stroke:var(--terracota); stroke-width:1.15;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.9;
}
.cartao h3{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.1rem, 1.02rem + .4vw, 1.32rem);
  line-height:1.22;
  letter-spacing:-.01em;
  color:var(--pessego);
}
.cartao p{
  margin:0;
  font-size:.95rem;
  line-height:1.55;
  color:#D3AF9B;
}

/* ==========================================================================
   06 · CRENÇAS — o argumento de um lado, as frases do outro
   Duas colunas no desktop: à esquerda o que a Pri afirma, à direita as frases
   que a leitora reconhece como suas. As frases é que carregam o peso — por
   isso elas ficam em Fraunces, e o argumento fica no tamanho de título comum.
   O fio à esquerda da lista amarra as cinco como uma coisa só: não são cinco
   itens, é uma ladainha.
   ========================================================================== */

.crencas{
  background-color:var(--marrom);
  background-image:var(--grao);
  padding:var(--ar) 0;
}

.crencas__grade{
  display:grid;
  gap:clamp(2.2rem, 5vw, 3rem);
  align-items:start;
}
@media (min-width:900px){
  .crencas__grade{
    grid-template-columns:1fr 1fr;
    gap:clamp(3rem, 6vw, 5.5rem);
    align-items:center;
  }
}

/* o título aqui não tem a margem inferior padrão: quem separa é o gap do grid */
.crencas__argumento{ margin:0; }
.crencas__argumento .titulo__h{ text-wrap:balance; }
/* aqui o apoio não é legenda: é a segunda metade do argumento, e a frase da
   direita só faz sentido depois dele. Por isso maior e mais claro que o padrão. */
.crencas__argumento .titulo__apoio{
  margin-top:1.4rem;
  max-width:40ch;
  font-size:clamp(1.02rem, .95rem + .35vw, 1.2rem);
  line-height:1.5;
  color:#E4C3AE;
}

.crencas__lista{
  list-style:none;
  margin:0;
  padding:0 0 0 clamp(1.1rem, 2.4vw, 1.7rem);
  border-left:1px solid rgba(235,173,146,.28);
  display:grid;
  gap:clamp(.85rem, 2vw, 1.25rem);
}
.crencas__lista li{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:500;
  font-style:italic;
  font-size:clamp(1.15rem, .95rem + 1.1vw, 1.75rem);
  line-height:1.25;
  letter-spacing:-.012em;
  color:var(--pessego);
}
/* as aspas são de citação, não de ênfase: entram pelo CSS para não virarem
   texto que o leitor de tela soletra */
.crencas__lista li::before{ content:"\201C"; }
.crencas__lista li::after{ content:"\201D"; }

/* o que vem depois das frases: primeiro a consequência, em corpo de leitura,
   depois a sentença — que é a tese da página inteira e por isso volta ao
   display, um degrau abaixo do tamanho de um título de seção */
.crencas__fecho{
  margin:clamp(1.6rem, 3.5vw, 2.2rem) 0 0;
  max-width:46ch;
  font-size:clamp(1rem, .95rem + .3vw, 1.12rem);
  line-height:1.55;
  color:#E4C3AE;
}
.crencas__sentenca{
  margin:clamp(1.1rem, 2.5vw, 1.5rem) 0 0;
  max-width:30ch;
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem);
  line-height:1.22;
  letter-spacing:-.018em;
  color:var(--pessego);
}
.crencas__sentenca em{ font-style:italic; color:var(--terracota); }


/* ==========================================================================
   08 · MANIFESTO — o espelho
   A assinatura da página: a frase e o seu reflexo. O reflexo entra em foco
   conforme a seção chega ao centro da tela (--c vem do motor) — é a única
   peça da página que se comporta assim, e é de propósito.
   ========================================================================== */

.manifesto{
  position:relative;
  overflow:hidden;
  background-color:var(--noite);
  padding:clamp(4.5rem, 10vw, 8rem) 0;
}
.manifesto__foto{
  position:absolute;
  inset:0 0 0 auto;
  width:min(54%, 760px);
  background:url("assets/pri-renda.webp") center 28% / cover no-repeat;
  opacity:.42;
  transform:scale(1.06) translate3d(0, calc(var(--p, .5) * -4%), 0);
  will-change:transform;
}
.manifesto__foto::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    var(--noite) 6%, rgba(30,10,2,.92) 26%, rgba(30,10,2,.55) 58%, rgba(30,10,2,.35) 100%);
}
.manifesto__corpo{ position:relative; }

/* a lista do que a imersão responde: sem marcador redondo, com um fio curto
   no lugar — os itens são continuação da frase que abre com dois-pontos */
/* "Espelho" ficava sozinho na segunda linha do título desta seção */
.manifesto .titulo__h{ text-wrap:balance; max-width:22ch; }

.manifesto__pontos{
  list-style:none;
  margin:clamp(1.1rem, 2.6vw, 1.5rem) 0 0;
  padding:0;
  max-width:52ch;
  display:grid;
  gap:.6rem;
}
.manifesto__pontos li{
  position:relative;
  padding-left:1.5rem;
  font-size:clamp(1.02rem, .95rem + .35vw, 1.18rem);
  line-height:1.45;
  color:var(--pessego);
}
.manifesto__pontos li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:.75rem; height:1px;
  background:var(--terracota);
}

.manifesto__porque{
  margin:clamp(1.8rem, 4vw, 2.6rem) 0 clamp(2rem, 4.5vw, 3rem);
  max-width:50ch;
  font-size:clamp(1.02rem, .95rem + .35vw, 1.18rem);
  line-height:1.55;
  color:#E4C3AE;
}

/* o fecho não é mais a manchete da seção — agora existe um título acima dele,
   então ele desce um degrau de tamanho para não disputar */
.espelho{ margin:0 0 clamp(2rem, 5vh, 3.2rem); }
.espelho__frase,
.espelho__reflexo{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.75rem, 1rem + 3.2vw, 3.1rem);
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--pessego);
}
.espelho__frase em,
.espelho__reflexo em{ font-style:italic; font-weight:500; color:var(--terracota); }

/* o reflexo: mesma frase, virada, esmaecendo conforme se afasta da linha */
.espelho__reflexo{
  margin-top:-.06em;
  transform:scaleY(-1);
  opacity:calc(.12 + var(--c, 0) * .34);
  filter:blur(calc((1 - var(--c, 0)) * 7px));
  -webkit-mask-image:linear-gradient(to bottom, transparent 6%, rgba(0,0,0,.9) 100%);
          mask-image:linear-gradient(to bottom, transparent 6%, rgba(0,0,0,.9) 100%);
  transition:opacity .5s linear, filter .5s linear;
  pointer-events:none;
}

.manifesto__nota{
  margin:0;
  /* 52ch e não 44: o texto novo é uma frase inteira da Pri, e a 44ch ele
     quebrava em cinco linhas curtas demais para o corpo maior */
  max-width:52ch;
  font-size:clamp(1.05rem, .95rem + .5vw, 1.3rem);
  line-height:1.5;
  color:#E4C3AE;
}

/* ==========================================================================
   09 · QUEM CONDUZ
   ========================================================================== */

.quem{ background-color:var(--marrom-fundo); padding:var(--ar) 0; overflow:hidden; }
.quem__grade{ display:grid; gap:clamp(2.2rem, 5vw, 4rem); align-items:center; }
@media (min-width:880px){ .quem__grade{ grid-template-columns:.92fr 1.08fr; } }

.quem__foto{ position:relative; margin:0; overflow:hidden; border-radius:12px; }

.quem__marca{
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
  margin:-1.2rem 0 1.9rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid rgba(235,173,146,.22);
}
.quem__marca strong{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem, 1.3rem + 2.4vw, 3rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--terracota);
}
.quem__marca span{ font-size:.95rem; color:#DCBCA9; }
.quem__foto img{
  width:100%;
  transform:scale(1.08) translate3d(0, calc(var(--p, .5) * -3%), 0);
  will-change:transform;
}

.quem__nome{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.2rem, 1.4rem + 3.2vw, 3.4rem);
  line-height:1;
  letter-spacing:-.02em;
  margin:0 0 2rem;
  color:var(--pessego);
}

.credenciais{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
@media (min-width:620px){ .credenciais{ grid-template-columns:repeat(2,1fr); column-gap:2.2rem; } }
.credenciais li{
  position:relative;
  padding-left:1.5rem;
  font-size:1rem;
  color:var(--pessego);
}
.credenciais li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:.45rem; height:.45rem;
  border-radius:50%;
  background:var(--terracota);
}


/* ==========================================================================
   10 · MÉTODO — três blocos
   ========================================================================== */

.metodo{ background-color:var(--marrom); padding:var(--ar) 0; }
.metodo__foto{
  position:absolute;
  inset:0 0 0 auto;
  width:min(48%, 680px);
  background:url("assets/pri-camisa.webp") center 16% / cover no-repeat;
  opacity:.26;
  transform:scale(1.05) translate3d(0, calc(var(--p, .5) * -3.5%), 0);
  will-change:transform;
}
.metodo__foto::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(96deg,
    var(--marrom) 4%, rgba(99,36,7,.94) 24%, rgba(99,36,7,.62) 58%, rgba(99,36,7,.42) 100%);
}

.pilares{ display:grid; gap:clamp(.9rem, 1.8vw, 1.4rem); }
@media (min-width:860px){ .pilares{ grid-template-columns:repeat(3, 1fr); } }

.pilar{
  padding:clamp(1.5rem, 3vw, 2.1rem);
  border:1px solid rgba(235,173,146,.2);
  border-radius:14px;
  background:rgba(46,16,2,.3);
}
.pilar__n{
  font-family:var(--display);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.26em;
  color:rgba(235,173,146,.7);
  margin:0 0 .8rem;
}
.pilar__verbo{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--terracota);
  margin:0 0 1rem;
}
.pilar__texto{
  margin:0;
  font-size:.99rem;
  line-height:1.55;
  color:#E4C6B4;
}

/* ==========================================================================
   11 · EM APENAS UM DIA — sequência editorial
   ========================================================================== */

/* ==========================================================================
   FALA — a sequência que a Pri diz, uma frase somando à outra
   As sete ficam no mesmo palco, e a rolagem vai acendendo mais uma. A frase
   que já foi dita NÃO some: o bloco se escreve na tela, e no fim as sete
   estão lá juntas. Usa o motor de cena (data-cena/data-passo), com uma leitura
   própria de "passado": aqui não é o que ficou para trás, é a frase que
   continua dita.
   Sem JS a seção é uma lista de sete frases em fluxo, legível do mesmo jeito.
   ========================================================================== */

.fala{ background:var(--creme); color:var(--tinta); padding:var(--ar) 0; }

.fala__pilha{ display:grid; gap:clamp(.85rem, 2vw, 1.35rem); }

.fala__frase{
  margin:0;
  text-align:center;
  text-wrap:balance;
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:600;
  /* menor que um título de seção: as sete precisam caber juntas numa tela */
  font-size:clamp(1.05rem, .88rem + .95vw, 1.7rem);
  line-height:1.28;
  letter-spacing:-.018em;
  color:var(--marrom);
}

.fala__saida{ margin-top:clamp(1.6rem, 4vw, 2.4rem); text-align:center; }

/* --- com JS: o palco gruda e as frases se somam --- */
.js .fala{
  padding:0;
  /* uma faixa de rolagem por frase, mais uma tela para a primeira entrar */
  height:calc(100vh + 7 * 38vh);
}
.js .fala__palco{
  position:sticky;
  top:0;
  height:100vh;
  display:grid;
  align-content:center;
}
/* cada frase já ocupa o lugar dela desde o começo, invisível. É isso que
   impede o bloco de crescer a cada passo e empurrar as anteriores para cima. */
.js .fala__frase{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .7s var(--ease-doce), transform .7s var(--ease-doce);
}
/* dita uma vez, dita para sempre: "ativo" e "passado" pintam igual */
.js .fala__frase[data-estado="ativo"],
.js .fala__frase[data-estado="passado"]{ opacity:1; transform:none; }

/* o botão entra junto com a última frase — antes dela a fala ainda está
   sendo dita, e um botão no meio interrompe */
.js .fala__saida{
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .6s var(--ease-doce), transform .6s var(--ease-doce);
}
.js .fala.fechada .fala__saida{ opacity:1; transform:none; pointer-events:auto; }

/* sem movimento, abrirTudo() marca todos os passos como "passado" — que aqui
   já significa visível. Só é preciso desfazer o palco grudado. */
@media (prefers-reduced-motion: reduce){
  .js .fala{ height:auto; padding:var(--ar) 0; }
  .js .fala__palco{ position:static; height:auto; display:block; }
  .js .fala__frase{ opacity:1; transform:none; }
  .js .fala__saida{ opacity:1; transform:none; pointer-events:auto; }
}

/* rótulo que só o leitor de tela usa: a seção precisa de um nome, mas na tela
   quem nomeia é a primeira frase */
.visualmente-oculto{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* o único bloco claro da página: o título troca de cor, o device não muda */
.titulo--claro .titulo__h{ color:var(--marrom); }

/* o programa do dia: lista de itens, como se lê um roteiro de evento */
.programa{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
  border-top:1px solid rgba(99,36,7,.16);
}
@media (min-width:820px){
  .programa{ grid-template-columns:repeat(2, 1fr); column-gap:clamp(2rem, 4vw, 4rem); }
}
.programa li{
  display:flex; align-items:flex-start; gap:.95rem;
  padding:1.25rem .2rem;
  border-bottom:1px solid rgba(99,36,7,.16);
  font-size:clamp(1rem, .96rem + .3vw, 1.1rem);
  line-height:1.5;
  color:var(--tinta);
}
.pilar:nth-child(2){ --d:80ms }
.pilar:nth-child(3){ --d:160ms }

.programa li:nth-child(2){ --d:60ms }
.programa li:nth-child(3){ --d:120ms }
.programa li:nth-child(4){ --d:180ms }
.programa li:nth-child(5){ --d:240ms }
.programa li:nth-child(6){ --d:300ms }
.programa li:nth-child(7){ --d:360ms }
.programa .ico{
  width:1.25rem; height:1.25rem;
  margin-top:.22em;
  stroke-width:2;
  color:#8A3D14;
}



/* ==========================================================================
   12 · OFERTA — a decisão
   ========================================================================== */

.oferta{
  background-color:var(--noite);
  background-image:
    var(--grao),
    radial-gradient(80% 60% at 50% 0%, rgba(235,173,146,.14), transparent 65%);
  padding:var(--ar) 0;
}

.caixa{
  /* a âncora dos botões é a caixa, não a seção: assim o clique cai com o
     preço dentro da tela, e não com ele logo abaixo da dobra */
  scroll-margin-top:clamp(1rem, 4vh, 2.5rem);
  max-width:680px;
  margin-inline:auto;
  background:var(--creme);
  color:var(--tinta);
  border-radius:18px;
  padding:clamp(1.9rem, 4.5vw, 3.2rem);
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.js .caixa[data-revelar]{ transform:translateY(38px) scale(.975); }
.js .caixa[data-revelar].visivel{ transform:none; }

.caixa__topo{
  display:inline-block;
  margin:0 0 1.3rem;
  background:var(--marrom);
  color:var(--pessego);
  font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.5em 1.1em;
  border-radius:999px;
}
.caixa__titulo{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 1.7rem;
  color:var(--marrom);
}
.caixa__inclui{
  list-style:none; margin:0 0 2.2rem; padding-block:1.6rem; padding-inline:0;
  display:grid; gap:.8rem;
  border-top:1px solid rgba(99,36,7,.18);
  border-bottom:1px solid rgba(99,36,7,.18);
}
.caixa__inclui li{
  position:relative;
  padding-left:1.9rem;
  font-size:1rem;
}
.caixa__inclui li::before{
  content:"";
  position:absolute; left:0; top:.42em;
  width:.95rem; height:.5rem;
  border-left:2px solid var(--marrom);
  border-bottom:2px solid var(--marrom);
  transform:rotate(-45deg);
}

.caixa__preco{ margin:0 0 2rem; text-align:center; }
.caixa__label{
  display:block;
  font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-suave);
  margin-bottom:.35rem;
}
/* a ancoragem: o "de" riscado vive no próprio <s>, porque quem pinta o risco
   é o elemento pai — um filho não consegue tirá-lo depois */
.caixa__de{ margin:0 0 .1rem; }
.caixa__de s{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.1rem, 1rem + .6vw, 1.4rem);
  color:var(--tinta-suave);
  text-decoration-thickness:1.5px;
  text-decoration-color:rgba(138,61,20,.75);
}
.caixa__valor{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(3.4rem, 2rem + 6vw, 5.6rem);
  line-height:1;
  letter-spacing:-.045em;
  color:var(--marrom);
  margin:0 0 .8rem;
}
.caixa__obs{ margin:0 auto; max-width:46ch; font-size:.95rem; color:var(--tinta-suave); }
.caixa__rodape{ margin:1.2rem 0 0; text-align:center; font-size:.88rem; color:var(--tinta-suave); }

.caixa .btn,
.fala__saida .btn{
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 12px 32px rgba(35,145,106,.34),
    0 2px 10px rgba(0,0,0,.1);
}
.caixa .btn:hover,
.fala__saida .btn:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 20px 48px rgba(35,145,106,.5),
    0 4px 14px rgba(0,0,0,.14);
}


/* ==========================================================================
   13 · FAQ — título de um lado, perguntas em cápsulas do outro
   ========================================================================== */

.faq{ background-color:var(--marrom); padding:var(--ar) 0; }

.faq__grade{ display:grid; gap:clamp(2rem, 5vw, 4rem); }
@media (min-width:900px){
  .faq__grade{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); align-items:start; }
}

.faq__titulo{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem, 1.3rem + 2.8vw, 3.2rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--pessego);
  margin:0;
  text-transform:uppercase;
}
.faq__titulo em{ font-style:normal; color:var(--terracota); }

.faq__lista{ display:grid; gap:.75rem; }

.faq details{
  background:rgba(30,10,2,.55);
  border:1px solid rgba(235,173,146,.16);
  border-radius:14px;
  padding:0 clamp(1.1rem, 2.4vw, 1.6rem);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.faq details[open]{ border-color:rgba(235,173,146,.32); background:rgba(30,10,2,.72); }

.faq summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding:1.25rem 2.6rem 1.25rem 0;
  font-family:var(--corpo);
  font-weight:600;
  font-size:clamp(1rem, .96rem + .3vw, 1.1rem);
  line-height:1.35;
  color:var(--pessego);
  transition:color .4s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--terracota); }

/* o sinal gira de + para – ao abrir */
.faq summary::before,
.faq summary::after{
  content:"";
  position:absolute; right:.15rem; top:50%;
  width:.85rem; height:1.5px;
  background:var(--terracota);
  transition:transform .5s var(--ease);
}
.faq summary::before{ transform:translateY(-50%); }
.faq summary::after{ transform:translateY(-50%) rotate(90deg); }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(180deg); }

.faq__corpo{ overflow:hidden; }
.faq__corpo p{
  margin:0 0 1.4rem;
  max-width:58ch;
  color:#DDBBA7;
  font-size:1rem;
}

/* ==========================================================================
   14 · RODAPÉ E CTA FLUTUANTE
   ========================================================================== */

.rodape{
  background-color:var(--noite);
  border-top:1px solid rgba(235,173,146,.15);
  padding:3.5rem 1.5rem 4rem;
  text-align:center;
}
.rodape__topo{
  display:inline-block;
  margin-top:1.6rem;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(235,173,146,.75);
  text-decoration:none;
  border-bottom:1px solid rgba(235,173,146,.3);
  padding-bottom:.25rem;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.rodape__topo:hover{ color:var(--pessego); border-color:var(--pessego); }
.rodape__logo{ width:150px; margin:0 auto 1.4rem; opacity:.85; }
.rodape p{ margin:0; font-size:.9rem; color:var(--terracota); }
.rodape__mini{ margin-top:.5rem !important; font-size:.78rem; color:rgba(235,173,146,.55) !important; }

/* ==========================================================================
   15 · CAMADA DE EVENTO
   O que faz a página se ler como ingresso e não como manifesto: data à vista
   em todo lugar, ficha técnica, contagem e a barra sempre à mão.
   ========================================================================== */

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
  width:1.05em; height:1.05em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico--grande{ width:1.7rem; height:1.7rem; stroke-width:1.25; }

/* --- chamadas no meio do caminho (as duas caem em fundo creme) --- */
.chamada{
  margin:clamp(3rem, 8vh, 5.5rem) 0 0;
  text-align:center;
}
.chamada__nota{
  margin:1.05rem 0 0;
  font-size:.88rem;
  color:rgba(235,173,146,.85);
}

/* --- ficha técnica do evento --- */
.evento__abre{ text-align:center; margin-bottom:clamp(2.2rem, 5vh, 3.4rem); }
.evento__titulo{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem, 1.3rem + 3vw, 3.2rem);
  line-height:1.06;
  letter-spacing:-.025em;
  color:var(--pessego);
  margin:0;
}

/* --- marquise: a fita que corre entre a hero e a primeira dobra --- */
.marquise{
  overflow:hidden;
  background-color:var(--terracota);
  color:var(--marrom);
  padding:.75rem 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 18px 40px rgba(0,0,0,.22);
}
.marquise__pista{ display:flex; width:max-content; }
.marquise__fita{
  display:flex; align-items:center;
  flex:none;
  animation:correr 42s linear infinite;
}
.marquise__fita span{
  font-size:.78rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  white-space:nowrap;
}
.marquise__ponto{
  width:5px; height:5px; margin:0 clamp(1rem, 2.4vw, 1.9rem);
  border-radius:50%;
  background:rgba(74,27,5,.45);
  flex:none;
}
@keyframes correr{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* --- detalhes da caixa --- */
.caixa__rotulo{
  margin:0;
  font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.caixa__rotulo + .caixa__inclui{ margin-top:.9rem; }
.caixa__seguro{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin:1.1rem 0 0;
  font-size:.82rem;
  color:var(--tinta-suave);
}
.caixa__seguro .ico{ color:var(--marrom); }

/* a escada precisa de um atraso por item — sem isso todos entram juntos */
.caixa__inclui li:nth-child(2){ --d:70ms }
.caixa__inclui li:nth-child(3){ --d:140ms }
.caixa__inclui li:nth-child(4){ --d:210ms }
.caixa__inclui li:nth-child(5){ --d:280ms }
.caixa__inclui li:nth-child(6){ --d:350ms }
.caixa__rodape{ margin-top:.5rem; }


/* ==========================================================================
   16 · MOVIMENTO REDUZIDO
   Tudo visível, nada se move. A narrativa vira empilhamento simples.
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  .js [data-entra],
  .js .hero__titulo .linha > span,
  .js [data-revelar],
  .js [data-escada] > *,
  .js .pilar[data-revelar] .pilar__n,
  .js .pilar[data-revelar] .pilar__verbo,
  .js .pilar[data-revelar] .pilar__texto{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }

  .hero__banner, .quem__foto img, .manifesto__foto, .metodo__foto{ transform:none !important; }
  .marquise__fita{ animation:none !important; }

  .espelho__reflexo{ opacity:.22 !important; filter:none !important; transition:none !important; }
  .hero__rolar{ display:none; }
  .btn{ transition:background .2s linear; }
  .btn:hover{ transform:none; box-shadow:none; }

}


/* ==========================================================================
   17 · CELULAR — mesma narrativa, menos curso de rolagem
   ========================================================================== */

@media (max-width:700px){
  .manifesto__foto{
    width:100%;
    opacity:.3;
    background-position:60% 22%;
  }
  .manifesto__foto::after{
    background:linear-gradient(180deg,
      rgba(30,10,2,.5) 0%, rgba(30,10,2,.82) 45%, var(--noite) 100%);
  }
  .espelho__reflexo{ opacity:calc(.1 + var(--c, 0) * .26); }
}


/* ==========================================================================
   18 · MOBILE
   Bloco fechado: tudo aqui vive dentro de media query de largura máxima, e
   o desktop (>= 1000px) não enxerga nenhuma destas regras. Vem por último de
   propósito — em empate de especificidade, quem chega depois ganha.
   ========================================================================== */

/* --- hero: a arte vertical, só onde ela é a arte certa --- */
/* A vertical (1080x1440) é feita para celular em retrato. Acima de 560px a caixa
   fica larga e baixa, o "cover" amplia a arte pela largura e o corte come a testa
   dela — por isso a fronteira. De 561 a 899px continua valendo a arte horizontal
   do bloco 04, que nessa proporção corta bem melhor. */
@media (max-width:560px){
  /* Uma arte só, a vertical. Empilhar a horizontal embaixo como reserva fazia o
     navegador baixar as duas em toda visita de celular (+200K) para cobrir um
     caso — arquivo sumido da pasta — que o preload do <head> já denunciaria. */
  .hero__banner{
    background-image:url("assets/pri-banner-vertical.webp");
    /* 6% e não 18%: a cabeça dela começa a 5,7% da altura da arte, e a 18% a
       janela abria justo em cima do cabelo. A 6% sobram ~20px de respiro. */
    background-position:center 6%;
    background-size:cover;
    background-repeat:no-repeat;
    /* caixa em retrato: é a proporção em que a arte vertical cabe quase
       inteira, sem o corte que uma faixa baixa imporia */
    height:min(95vw, 380px);
  }
}

/* --- hero: a emenda entre o banner e o fundo da página --- */
/* A .hero inteira tem o grão por baixo (bloco 03), mas o banner é opaco e o
   esconde. O véu do banner fechava em --marrom puro, e logo abaixo dele o mesmo
   --marrom aparecia COM grão — #632407 encostando em #66290e, um degrau de cor
   na largura da tela. A correção é o véu terminar na mesma receita do fundo:
   grão por cima do marrom, e não o marrom sozinho. */
@media (max-width:899px){
  .hero__banner::after{
    background-image:
      var(--grao),
      linear-gradient(to bottom,
        rgba(99,36,7,.05) 0%, rgba(99,36,7,.12) 58%,
        rgba(99,36,7,.7) 86%, var(--marrom) 100%);
  }
}

/* --- hero: tudo centralizado e o caminho até o botão mais curto --- */
@media (max-width:899px){
  .hero__conteudo{ padding-top:.7rem; padding-bottom:2rem; text-align:center; }
  .hero__logo{ width:min(48%, 190px); margin:0 auto .7rem; }
  .hero__titulo{ font-size:clamp(1.6rem, 1.15rem + 1.9vw, 2rem); margin-bottom:.7rem; }
  .hero__sub{ font-size:.95rem; line-height:1.5; margin:0 auto 1.1rem; text-wrap:pretty; }
  /* o rótulo da hero é longo e quebra em duas linhas no celular; sem balance
     sobra "Espelho" sozinho embaixo */
  .hero__acao .btn{ min-height:58px; text-wrap:balance; line-height:1.3; }
  /* balance evita o "Vagas / limitadas." pendurado sozinho na segunda linha */
  .hero__nota{ font-size:.9rem; margin-top:.7rem; text-wrap:balance; }
}

/* --- manifesto: o reflexo fica como sugestão, sem comer meia tela --- */
@media (max-width:700px){
  .espelho__reflexo{ max-height:2.4em; overflow:hidden; }
  .caixa__topo{ font-size:.68rem; letter-spacing:.12em; }
  .rodape__topo{ padding:.6rem 0; }
}