/* ==========================================================================
   Casa Brasa — manual de identidade
   Layout das pranchas. A paleta e a tipografia vêm de ../../css/tokens.css.

   1. Base  2. Prancha e cabeçalho de capítulo  3. Marca  4. Capa
   5. Antes/depois  6. Construção  7. Assinaturas  8. Paleta  9. Tipografia
   10. Aplicações  11. Social  12. Fecho  13. Motion  14. Responsivo
   ========================================================================== */

/* ---------- 1. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:clamp(64px,7vw,88px);
}

body{
  margin:0;
  background:var(--carvao);
  color:var(--creme);
  font-family:var(--fonte);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 400;
  font-size:var(--fs-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

h1,h2,h3,p,figure,ul{margin:0}
ul{list-style:none;padding:0}
h1,h2,h3{text-wrap:balance}
img{display:block;max-width:100%}
a{color:inherit}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--brasa);color:var(--branco);
  padding:12px 20px;font-size:var(--fs-ui);
}
.skip:focus{left:12px;top:12px}

:where(a,button):focus-visible{
  outline:2px solid var(--brasa-clr);
  outline-offset:3px;
}

/* ---------- 2. PRANCHA ---------- */
.pr{padding-inline:var(--pad);padding-block:var(--sect-side)}
/* width:100% não é redundante: a capa é um flex column, e lá o margin-inline
   auto encolheria a prancha em vez de centralizá-la. */
.pr__in{width:100%;max-width:var(--max);margin-inline:auto}

.pr--claro{background:var(--creme);color:var(--carvao)}
.pr--claro-2{background:var(--creme-2);color:var(--carvao)}
.pr--escuro{background:var(--carvao)}
.pr--escuro-2{background:var(--carvao-2)}
.pr--brasa{background:var(--brasa);color:var(--branco)}

/* Cabeçalho de capítulo: número + título, separados por um fio que corre
   até o fim da linha. É o mesmo registro do manual da MG Web. */
.cap{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  gap:clamp(16px,2.4vw,38px);
  padding-bottom:18px;
  border-bottom:1px solid var(--fio-escuro);
  margin-bottom:var(--sp-block);
}
.pr--claro .cap,.pr--claro-2 .cap{border-bottom-color:var(--fio-claro)}

.cap__n{
  font-size:var(--fs-rotulo);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
  letter-spacing:.18em;
  color:var(--brasa-clr);
}
.pr--claro .cap__n,.pr--claro-2 .cap__n{color:var(--brasa-esc)}

.cap__t{
  font-size:var(--fs-h2);
  font-variation-settings:"wdth" var(--wd-display),"wght" 700;
  letter-spacing:-.02em;
  line-height:1.02;
}

/* Legenda de peça: o rótulo curto embaixo de cada exemplo. */
.lg{
  font-size:var(--fs-meta);
  line-height:1.5;
  color:var(--cinza);
  margin-top:12px;
}
.pr--claro .lg,.pr--claro-2 .lg{color:var(--cinza-ink)}
.lg b{
  display:block;
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
  color:var(--creme);
}
.pr--claro .lg b,.pr--claro-2 .lg b{color:var(--carvao)}

.nota{
  font-size:var(--fs-lead);
  line-height:1.6;
  max-width:var(--measure);
  color:var(--cinza);
}
.pr--claro .nota,.pr--claro-2 .nota{color:var(--cinza-ink)}

/* ---------- 3. MARCA ---------- */
/* O símbolo é um <symbol> definido uma vez no topo do documento e chamado
   por <use> em toda a página — desenho único, nunca redesenhado à mão. */
.marca{display:block;height:auto;color:inherit}

/* Assinatura: símbolo + nome, na proporção travada. */
.assin{display:flex;align-items:center;gap:.62em}
.assin .marca{width:1.32em;flex:none}
.assin__nome{
  font-size:1em;
  font-variation-settings:"wdth" var(--wd-display),"wght" 700;
  letter-spacing:-.012em;
  line-height:1;
  text-transform:uppercase;
}
.assin__nome span{
  font-variation-settings:"wdth" var(--wd-display),"wght" 400;
  opacity:.78;
}
/* Vertical: símbolo em cima, nome embaixo. */
.assin--v{flex-direction:column;gap:.44em;text-align:center}
.assin--v .marca{width:2.1em}

/* ---------- 4. CAPA ---------- */
.capa{
  min-height:min(94vh,880px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--sp-block);
  padding-block:clamp(28px,5vw,64px) var(--sect-side);
}
.capa__topo{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
  font-size:var(--fs-meta);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cinza);
}
.capa__topo a{text-decoration:none;border-bottom:1px solid var(--fio-escuro);padding-bottom:2px}
.capa__topo a:hover{border-bottom-color:var(--brasa-clr)}

.capa__marca{
  font-size:var(--fs-mega);
  line-height:.86;
}
.capa__simb{width:clamp(88px,13vw,190px);color:var(--brasa)}
.capa__nome{
  margin-top:clamp(18px,2.6vw,38px);
  font-size:var(--fs-mega);
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
  letter-spacing:-.03em;
  line-height:.84;
  text-transform:uppercase;
}
.capa__nome em{
  display:block;
  font-style:normal;
  font-variation-settings:"wdth" var(--wd-display),"wght" 400;
  color:var(--cinza);
}
.capa__pe{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(20px,3vw,44px);
  padding-top:22px;
  border-top:1px solid var(--fio-escuro);
}
.capa__pe p{font-size:var(--fs-ui);color:var(--cinza);max-width:34ch}
.capa__pe p b{
  display:block;
  color:var(--creme);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
  margin-bottom:4px;
}

/* ---------- 5. ANTES / DEPOIS ---------- */
.ad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,40px)}
.ad__col{display:flex;flex-direction:column}
.ad__lb{
  font-size:var(--fs-rotulo);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
  color:var(--cinza-ink);
  padding-bottom:14px;
  border-bottom:1px solid var(--fio-claro);
  margin-bottom:22px;
}
.ad__col--depois .ad__lb{color:var(--brasa-esc)}

/* O quadro do "antes": a bagunça desenhada, não descrita. */
.quadro{
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  padding:clamp(18px,3vw,40px);
  background:var(--creme-2);
  overflow:hidden;
}
.quadro--depois{background:var(--carvao);color:var(--creme)}

/* Cada "erro" do antes é uma peça de verdade, torta de um jeito diferente. */
.bagunca{display:grid;gap:clamp(10px,1.4vw,18px);width:100%}
.bagunca__l1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(19px,3vw,34px);
  font-weight:700;
  color:#7A4A12;
  transform:scaleX(1.34);
  transform-origin:left center;
  letter-spacing:.01em;
}
.bagunca__l2{
  font-family:"Comic Sans MS","Segoe UI",cursive;
  font-size:clamp(13px,1.7vw,19px);
  color:#B0261F;
}
.bagunca__l3{
  font-size:clamp(12px,1.5vw,16px);
  font-variation-settings:"wdth" 112,"wght" 400;
  color:#3E7A46;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.bagunca__fita{display:flex;gap:6px;margin-top:4px}
.bagunca__fita i{width:34px;height:14px;display:block}

.certo{display:grid;gap:clamp(14px,2vw,24px);width:100%;justify-items:start}
.certo .assin{font-size:clamp(17px,2.8vw,36px)}
.certo__fita{display:flex;gap:0;width:100%}
.certo__fita i{height:14px;flex:1;display:block}

/* ---------- 6. CONSTRUÇÃO ---------- */
.constr{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,3.4vw,56px);align-items:start}

/* Proporções: o símbolo com as medidas que definem o encaixe do copo no B. */
/* Os três quadros deste capítulo são creme sobre a prancha creme-fechado —
   mais claros que o fundo, não mais escuros. É o inverso do capítulo 01, e é
   de propósito: aqui o quadro é mesa de trabalho, não peça acabada. */
.malha{
  position:relative;
  background:var(--creme);
  padding:clamp(20px,3vw,44px);
}
.malha svg{width:100%;height:auto;display:block}
.malha__grade{stroke:rgba(20,18,16,.16);stroke-width:.5;fill:none}
.malha__eixo{stroke:var(--brasa-esc);stroke-width:1;fill:none;stroke-dasharray:4 3}
.malha__marca{color:var(--carvao)}
.malha__cota{
  fill:var(--brasa-esc);
  font-size:5px;
  font-family:var(--fonte);
  font-variation-settings:"wdth" 100,"wght" 600;
  letter-spacing:.1em;
}

.constr__lado{display:grid;gap:clamp(20px,2.6vw,34px)}

/* Área de respiro: 26 unidades, o dobro do vão, nos quatro lados. */
.respiro{background:var(--creme);padding:clamp(18px,2.6vw,36px)}
.respiro svg{width:100%;height:auto;display:block}
.respiro__zona{fill:rgba(200,68,28,.12);stroke:var(--brasa-esc);stroke-width:.6;stroke-dasharray:3 2}

/* Reduções: o símbolo em quatro tamanhos reais, alinhados pela base. */
.redu{
  display:flex;
  align-items:flex-end;
  gap:clamp(16px,2.6vw,36px);
  flex-wrap:wrap;
  padding:clamp(18px,2.6vw,34px);
  background:var(--creme);
}
.redu figure{display:grid;gap:10px;justify-items:center}
.redu .marca{color:var(--carvao)}
/* Escopo em "figure figcaption": só as etiquetas de tamanho. A legenda do
   bloco é filha direta de .redu e fica com o estilo de .lg. */
.redu figure figcaption{
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--cinza-ink);
  font-variation-settings:"wdth" 100,"wght" 600;
}
.redu__min figcaption{color:var(--brasa-esc)}

/* ---------- 7. ASSINATURAS ---------- */
.assins{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(14px,2vw,26px)}
.assins figure{margin:0}
.assins__cx{
  aspect-ratio:5/4;
  display:grid;
  place-items:center;
  padding:clamp(16px,2.4vw,32px);
}
.cx--creme{background:var(--creme);color:var(--carvao)}
/* Carvão sobre a prancha carvão: o fio é o que dá borda à peça. Sem ele a
   assinatura negativa parece impressa direto na página. */
.cx--carvao{background:var(--carvao);color:var(--creme);box-shadow:inset 0 0 0 1px var(--fio-escuro)}
.cx--brasa{background:var(--brasa);color:var(--branco)}
/* O símbolo sozinho, na cor de marca sobre o escuro — é literalmente o avatar.
   Leva fio porque o fundo da caixa é quase o mesmo da prancha. */
.cx--foto{
  background:var(--carvao-2);
  color:var(--brasa);
  border:1px solid var(--fio-escuro);
}
.assins .assin{font-size:clamp(14px,1.7vw,21px)}

/* ---------- 8. PALETA ---------- */
.paleta{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:clamp(10px,1.4vw,18px)}
.sw{display:flex;flex-direction:column}
.sw__cor{height:clamp(100px,11vw,168px);border:1px solid var(--fio-claro)}
.sw__txt{padding-top:14px}
.sw__nome{
  font-size:var(--fs-ui);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
}
.sw__hex{
  font-size:var(--fs-meta);
  letter-spacing:.08em;
  color:var(--cinza-ink);
  margin-top:2px;
}
.sw__uso{font-size:var(--fs-meta);color:var(--cinza-ink);margin-top:8px;line-height:1.45}

/* Prova de contraste: cada par medido, mostrado do jeito que é usado. */
.prova{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(10px,1.4vw,16px);
  margin-top:var(--sp-block);
}
.prova__cx{padding:clamp(16px,2vw,24px);min-height:118px;display:flex;flex-direction:column;justify-content:space-between}
.prova__ex{font-size:15px;line-height:1.4}
.prova__ex--g{font-size:26px;font-variation-settings:"wdth" var(--wd-display),"wght" 700;letter-spacing:-.02em;line-height:1.05}
.prova__n{font-size:10.5px;letter-spacing:.14em;opacity:.75;margin-top:14px}

/* ---------- 9. TIPOGRAFIA ---------- */
.tipo{display:grid;gap:var(--sp-block)}
.espec{
  font-size:clamp(88px,19vw,300px);
  line-height:.78;
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
  letter-spacing:-.035em;
  color:var(--brasa);
}
.eixo{display:grid;gap:clamp(8px,1.2vw,14px)}
.eixo__l{
  font-size:clamp(24px,4.6vw,64px);
  line-height:1.02;
  letter-spacing:-.025em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* A escala vive numa prancha escura, então o fio e o texto de apoio saem das
   variantes de fundo escuro. As regras .pr--claro logo abaixo cobrem o caso
   de a tabela ser reaproveitada numa prancha clara. */
.escala{width:100%;border-collapse:collapse;text-align:left}
.escala th,.escala td{
  border-top:1px solid var(--fio-escuro);
  padding:15px 14px 15px 0;
  vertical-align:baseline;
}
.escala th{
  font-size:var(--fs-rotulo);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cinza);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
}
.escala td:last-child{color:var(--cinza);font-size:var(--fs-meta);width:1%;white-space:nowrap}

.pr--claro .escala th,.pr--claro .escala td,
.pr--claro-2 .escala th,.pr--claro-2 .escala td{border-top-color:var(--fio-claro)}
.pr--claro .escala th,.pr--claro .escala td:last-child,
.pr--claro-2 .escala th,.pr--claro-2 .escala td:last-child{color:var(--cinza-ink)}

/* ---------- 10. APLICAÇÕES ---------- */
.aplic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.aplic figure{margin:0}
.ap-6{grid-column:span 6}
.ap-4{grid-column:span 4}
.ap-8{grid-column:span 8}
.ap-3{grid-column:span 3}

/* Caixa de hambúrguer: tampa, lateral e a marca centralizada. */
.caixa{
  aspect-ratio:4/3;
  background:var(--brasa);
  color:var(--branco);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.caixa::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:26%;
  background:rgba(20,18,16,.22);
}
.caixa .assin{font-size:clamp(15px,2.2vw,28px);position:relative;z-index:1;margin-bottom:9%}

/* Papel de hambúrguer: a marca repetida em diagonal. */
/* Papel e cardápio são creme sobre uma prancha creme: sem o fio, a peça
   perde a borda e o desenho parece solto na página. */
.papel{
  aspect-ratio:4/3;
  background:var(--creme);
  box-shadow:inset 0 0 0 1px var(--fio-claro);
  color:var(--carvao);
  overflow:hidden;
  display:grid;
  place-items:center;
  position:relative;
}
.papel__t{
  display:grid;
  gap:clamp(10px,1.6vw,20px);
  transform:rotate(-24deg) scale(1.5);
  opacity:.32;
}
.papel__t div{
  display:flex;
  gap:clamp(12px,1.8vw,22px);
  font-size:clamp(9px,1.2vw,15px);
  white-space:nowrap;
}
.papel__t div:nth-child(even){margin-left:clamp(18px,3vw,40px)}

/* Fachada: letreiro sobre o carvão, com a luz da brasa por trás. */
.fachada{
  aspect-ratio:16/9;
  background:var(--carvao-2);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.fachada::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(58% 78% at 50% 108%,rgba(200,68,28,.5),transparent 70%);
}
.fachada .assin{
  position:relative;
  font-size:clamp(17px,3.4vw,52px);
  color:var(--creme);
}
.fachada__base{
  position:absolute;left:0;right:0;bottom:0;height:16%;
  background:var(--carvao);
}

/* Cardápio: chapéu de brasa, itens com preço tabular. */
.cardapio{
  aspect-ratio:3/4;
  background:var(--creme);
  box-shadow:inset 0 0 0 1px var(--fio-claro);
  color:var(--carvao);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.cardapio__top{
  background:var(--brasa);
  color:var(--branco);
  padding:clamp(12px,1.8vw,22px);
  display:grid;
  place-items:center;
}
.cardapio__top .assin{font-size:clamp(11px,1.5vw,19px)}
.cardapio__lista{padding:clamp(12px,1.8vw,22px);display:grid;gap:clamp(7px,1vw,13px);align-content:start}
.cardapio__it{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:clamp(9.5px,1.1vw,14px);
  border-bottom:1px solid var(--fio-claro);
  padding-bottom:clamp(6px,.8vw,10px);
}
.cardapio__it b{font-variation-settings:"wdth" var(--wd-texto),"wght" 600}
.cardapio__it span{color:var(--brasa-esc);font-variation-settings:"wdth" var(--wd-texto),"wght" 600}

/* Uniforme e cartão. */
.uniforme{
  aspect-ratio:1/1;
  background:var(--carvao);
  display:grid;
  place-items:center;
  position:relative;
}
.uniforme__peito{
  width:34%;
  color:var(--brasa-clr);
}
.cartao{
  aspect-ratio:1.7/1;
  background:var(--creme-2);
  color:var(--carvao);
  padding:clamp(12px,1.6vw,22px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.cartao .assin{font-size:clamp(11px,1.4vw,18px)}
.cartao p{font-size:clamp(8.5px,.85vw,12px);color:var(--cinza-ink);line-height:1.5}

/* Sacola de delivery. */
.sacola{
  aspect-ratio:4/5;
  background:var(--creme-2);
  color:var(--carvao);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.sacola::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:14%;
  background:rgba(20,18,16,.10);
}
.sacola .marca{width:38%;color:var(--brasa-esc)}

/* ---------- 11. SOCIAL ---------- */
.social{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(18px,2.8vw,44px);align-items:start}

.perfil{background:var(--creme);color:var(--carvao);padding:clamp(16px,2.2vw,28px)}
.perfil__topo{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px)}
.perfil__av{
  width:clamp(52px,7vw,84px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--brasa);
  color:var(--branco);
  display:grid;
  place-items:center;
  flex:none;
}
.perfil__av .marca{width:56%}
.perfil__nome{font-variation-settings:"wdth" var(--wd-texto),"wght" 700;font-size:var(--fs-ui)}
.perfil__bio{font-size:var(--fs-meta);color:var(--cinza-ink);line-height:1.5;margin-top:3px}
.perfil__n{display:flex;gap:clamp(14px,2vw,26px);margin-top:clamp(14px,2vw,22px);padding-top:14px;border-top:1px solid var(--fio-claro)}
.perfil__n div{font-size:var(--fs-meta);color:var(--cinza-ink)}
.perfil__n b{display:block;color:var(--carvao);font-size:var(--fs-ui);font-variation-settings:"wdth" var(--wd-texto),"wght" 700}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,.8vw,12px)}
.post{aspect-ratio:1;display:grid;place-items:center;padding:clamp(10px,1.4vw,20px);text-align:center;overflow:hidden}
.post--a{background:var(--brasa);color:var(--branco)}
/* O post escuro é carvão sobre uma prancha carvão: sem o fio ele vira um buraco
   na grade e o símbolo parece solto. O fio é da página, não da peça. */
.post--b{background:var(--carvao);color:var(--creme);box-shadow:inset 0 0 0 1px var(--fio-escuro)}
.post--c{background:var(--creme-2);color:var(--carvao)}
.post__ch{
  font-size:clamp(13px,2vw,30px);
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
  letter-spacing:-.025em;
  line-height:.94;
  text-transform:uppercase;
}
.post .marca{width:34%}
.post__pre{font-size:clamp(11px,1.5vw,22px);font-variation-settings:"wdth" var(--wd-display),"wght" 700}

.story{
  aspect-ratio:9/16;
  background:var(--carvao);
  color:var(--creme);
  padding:clamp(12px,1.6vw,22px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  max-width:230px;
}
.story .marca{width:26%;color:var(--brasa-clr)}
.story__ch{
  font-size:clamp(15px,2vw,28px);
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
  line-height:.96;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.story__pe{font-size:clamp(9px,1vw,12px);color:var(--cinza);letter-spacing:.1em;text-transform:uppercase}

/* ---------- 12. FECHO ---------- */
.fecho{display:grid;gap:var(--sp-block);justify-items:start}
.fecho__h{
  font-size:var(--fs-h1);
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
  letter-spacing:-.028em;
  line-height:.98;
  text-transform:uppercase;
  max-width:16ch;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:16px 28px;
  font-size:var(--fs-ui);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
  text-decoration:none;
  background:var(--carvao);
  color:var(--creme);
  transition:background-color 180ms var(--e),color 180ms var(--e);
}
.btn:hover{background:var(--brasa);color:var(--branco)}
.btn--claro{background:var(--creme);color:var(--carvao)}
.btn--claro:hover{background:var(--brasa);color:var(--branco)}

.rod{
  padding:var(--sect-side) var(--pad);
  background:var(--carvao);
  border-top:1px solid var(--fio-escuro);
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  font-size:var(--fs-meta);
  color:var(--cinza);
}
.rod a{text-decoration:none;border-bottom:1px solid var(--fio-escuro);padding-bottom:2px}
.rod a:hover{border-bottom-color:var(--brasa-clr)}

/* ---------- 13. MOTION ---------- */
.rv{opacity:1;transform:none;transition:opacity 560ms var(--e),transform 560ms var(--e)}
.rv.pre{opacity:0;transform:translateY(16px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv.pre{opacity:1;transform:none;transition:none}
}

/* ---------- 14. RESPONSIVO ---------- */
@media (max-width:1000px){
  .constr{grid-template-columns:1fr}
  .social{grid-template-columns:1fr}
  .ap-6,.ap-4,.ap-8{grid-column:span 12}
  .ap-3{grid-column:span 6}
  .story{max-width:none}
}

@media (max-width:620px){
  .ad{grid-template-columns:1fr;gap:34px}
  .ap-3{grid-column:span 12}
  .posts{gap:6px}
  .capa__nome,.capa__marca{line-height:.9}
  .escala td:last-child{white-space:normal}
  .redu{gap:18px}
}