/* ============================================================================
   Autor da Fé — reconstrução da prancheta "Site Autor da Fé.ai" (1920 × 14400,
   versão de 17/09/2026: prancheta ÚNICA, com a copy definitiva).

   Escala:  html{font-size:calc(var(--vw)/192)}  →  1rem = 10 px do projeto.
   `top:91.2735rem` é literalmente y = 912,735 da arte.

   Tracking: os valores em em vieram do próprio .ai (Illustrator usa 1/1000 em).
   Linha de base: com line-height explícito, baseline = topo + L/2 + (A-D)/2·F.
   Com line-height:0 vira topo + (A-D)/2·F — daí os "top" já calculados aqui:
     Behind The Nineties  Bd/Md/Rg  (A-D)/2 = 0,315 · F
     Behind The Nineties  Bd-It                0,295 · F
     Blauer Nue (todas)                        0,340 · F
     Grift                                     0,300 · F

   O mobile (a partir de `PALCO DO MOBILE`, lá embaixo) é ADAPTAÇÃO nossa: esta
   versão do .ai não trouxe prancheta de celular, então o reflow segue o layout
   da prancheta 2 antiga — mesmo palco de 72rem, mesmas peças, uma coluna.
   ========================================================================== */

/* ------------------------------------------------------------------ fontes */
@font-face{font-family:Nineties;src:url(../fonts/nineties-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:Nineties;src:url(../fonts/nineties-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:Nineties;src:url(../fonts/nineties-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:Nineties;src:url(../fonts/nineties-bold-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:block}
@font-face{font-family:Blauer;src:url(../fonts/blauer-thin.woff2) format("woff2");font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:Blauer;src:url(../fonts/blauer-light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:Blauer;src:url(../fonts/blauer-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:Blauer;src:url(../fonts/blauer-medium-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:block}
/* a Bold é o subset do .ai (201 glifos) — não existe em arquivo aqui */
@font-face{font-family:Blauer;src:url(../fonts/blauer-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:Grift;src:url(../fonts/grift-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:block}

/* ------------------------------------------------------------------ tokens */
:root{
  --creme:#fcf8e5;          /* fundo da página e textos sobre foto           */
  --creme-quente:#fef6e7;   /* textos sobre laranja                          */
  --creme-nome:#faf0c8;     /* nomes dos autores                             */
  --laranja:#f74714;        /* destaque, números, ícones                     */
  --laranja-2:#fa4616;      /* formas (cartões, painéis)                     */
  --laranja-escuro:#bc2e0d; /* PUBLIQUE-SE do rodapé                         */
  --marrom:#6e3e26;         /* texto das 3 etapas                            */
  --marrom-escuro:#402020;  /* corpo de texto sobre creme                    */
  --cinza:#edebec;          /* setas do carrossel da revista                 */
  --preto:#010101;
  --arte-l:1920;
  --arte-a:14400;
}

/* ------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{
  /* --vw é escrito pelo JS com a largura do documento (sem barra de rolagem);
     sem JS o fallback é 100vw. */
  font-size:calc(var(--vw,100vw)/192);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:var(--creme);
  color:var(--marrom-escuro);
  font-family:Blauer,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
p,h1,h2,h3{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit;color:inherit}

.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pular{position:fixed;left:1rem;top:-10rem;z-index:99;background:var(--laranja);color:#fff;padding:.8rem 1.4rem;border-radius:.6rem;font-size:1.6rem;transition:top .2s}
.pular:focus{top:1rem}
.defs{position:absolute;width:0;height:0}
.menu{display:none}
.conferindo .menu{display:none!important}

/* ------------------------------------------------------------------ palco */
.stage{
  position:relative;
  width:192rem;
  height:1440rem;
  margin:0 auto;
  overflow:hidden;
  isolation:isolate;
}
/* cada seção é uma camada do tamanho do palco; os filhos ficam nas
   coordenadas absolutas da arte. A ordem no DOM é a ordem de pintura. */
.cam,main{position:absolute;inset:0}
.cam>*{position:absolute;z-index:10}
/* listas/grupos são camadas do tamanho do palco: assim os filhos absolutos
   usam as coordenadas da arte E herdam o nível de empilhamento certo. */
.topo__nav,.topo__social,.etapas,.autores,.numeros,.quadros,.form,.livros,.publique,
.rodape__social,.rodape__marca{position:absolute;inset:0;z-index:10;pointer-events:none}
/* 🚨 esses agrupadores cobrem o PALCO INTEIRO (inset:0) só para os filhos
   herdarem as coordenadas da arte. Sem `pointer-events:none` o último deles no
   DOM engole todo clique da página — era por isso que as setas do carrossel
   não respondiam a um toque de verdade (só ao .click() do console). Os filhos
   voltam a receber evento, e o evento ainda BORBULHA para o agrupador, então o
   arrasto dos trilhos continua funcionando. */
.topo__nav>*,.topo__social>*,.etapas>*,.autores>*,.numeros>*,.quadros>*,.form>*,
.livros>*,.publique>*,.rodape__social>*,.rodape__marca>*{pointer-events:auto}
/* .rodape__social também é agrupador E é filho de .rodape__marca — a regra
   de cima o reativaria e ele voltaria a cobrir a página inteira. */
.rodape__marca>.rodape__social{pointer-events:none}
/* chapas e enfeites nunca pegam clique */
.v,.sym,.pontos,.mensagem,.rodape__pena,.autor__fade,.autor__card,.autor__pena,
.num__mais,.divisor__caixa,.bg-laranja,.quadro__forma,.quadro__canto,
.quadro__sombra,.campo__linha{pointer-events:none}
.ctrl,.ico,.ico2,a,button,input,label{pointer-events:auto}
.etapa,.quadro{position:static}

/* Ordem de pintura (a mesma do .ai, que intercala fundos e fotos entre as
   seções). Como nenhuma .cam tem z-index, a escala abaixo vale para a página
   inteira e não só dentro de cada seção. */
.bg-laranja,.cam--hero picture,.cam--revista>picture:first-of-type{z-index:1}
/* 🚨 o creme do topo (#4) é pintado ANTES da foto da hero, não depois: quem
   corta a foto em y 806 é o recorte dela mesma, e nas bordas (x<177 e x>1723)
   a foto aparece ATÉ 806 — com o creme por cima ela sumia a partir de 723. */
.v--creme-topo{z-index:0}
.v--creme-form{z-index:2}
.v--painel-chamada{z-index:3}
.autor,.quadro,.revista__mock{z-index:4}
.v--hero-fios,.v--fio-topo{z-index:5}
.v--creme-obra,.v--ondas{z-index:6}
.v--painel-chamada-topo,.v--painel-obra{z-index:7}
.obra__capa{z-index:8}
.v--cartao-legado{z-index:9}
/* a caixa creme do divisor é pintada DEPOIS dos fios: é ela que abre o vão
   branco no meio das duas linhas para o logo entrar */
.v--fio-divisor-1,.v--fio-divisor-2{z-index:8}
.divisor__caixa{z-index:9}

/* Chapas que só existem no celular (o .ai não tem prancheta de 720): o véu
   escuro que continua a foto da hero e os painéis laranja sangrados. */
.m-chapa{display:none;position:absolute;pointer-events:none}
.m-veu{background:linear-gradient(to bottom,rgba(42,16,8,0) 26rem,rgba(42,16,8,.86) 52rem,#2a1008 62rem,#2a1008 100%)}
.m-legado{background:var(--laranja-2);border-radius:0 0 6rem 6rem}
.m-entalhe--legado{color:var(--laranja-2)}
.m-obra,.m-revista{background:var(--laranja-2)}

/* SVG posicionado pelas coordenadas do .ai (style inline vem do montar.py) */
.v{position:absolute;display:block;overflow:visible;
   left:var(--l);top:var(--t);width:var(--w);height:var(--h)}
/* SVG normalizado, escalado pelo elemento que o contém */
.sym{display:block;width:100%;height:100%;overflow:visible}

/* ══════════════════════════════════════════════════════════════════ TOPO ══
   🚨 O .ai de 17/09 arrastou o cabeçalho para FORA da prancheta: logo, ícones
   e o fio estão em y NEGATIVO, exatamente 118 px acima do lugar. Aqui ele
   volta — as coordenadas abaixo são as da arte + 118, iguais às da versão de
   14/09. Quem cedeu espaço foi a HERO: o bloco de título/parágrafo/botão desce
   90 px e fica centrado na foto, deixando a faixa do cabeçalho livre (na arte
   nova ele começava em y 85, encostando no menu).

   Os rótulos do menu são acréscimo nosso: esta versão da arte não os traz.
   Para seguir a arte ao pé da letra, é só esconder o `.topo`.              */
.topo{position:absolute;inset:0;z-index:40;pointer-events:none}
.topo>*,.topo a{pointer-events:auto}
/* nav e sociais são agrupadores de palco inteiro DENTRO do .topo (z-index 40):
   sem isto eles bloqueariam a página toda no desktop. */
.topo>.topo__nav,.topo>.topo__social{pointer-events:none}
/* o fio é chapa do .ai: o SVG traz --t da arte (y negativo) e aqui desce 118 */
.v--fio-topo{top:10.943rem;z-index:41}
.topo__logo{left:27.072rem;top:4.704rem;width:30.1rem;height:4.854rem;position:absolute;color:var(--creme)}
.nav__item{
  position:absolute;top:7.7019rem;
  font-weight:100;font-size:1.762rem;line-height:0;
  letter-spacing:.016em;color:var(--creme);white-space:nowrap;
  transition:color .25s;
}
.nav__item:hover,.nav__item:focus-visible{color:var(--laranja)}
.nav__item--1{left:74.896rem}
.nav__item--2{left:87.583rem}
.nav__item--3{left:103.441rem}
.nav__item--4{left:122.471rem}
.topo__social{color:var(--laranja)}
.ico{position:absolute;transition:opacity .25s,transform .25s}
.ico:hover{opacity:.72;transform:translateY(-.2rem)}
.ico--face{left:149.6256rem;top:6.528rem;width:.9614rem;height:1.7949rem}
.ico--insta{left:152.8445rem;top:6.5891rem;width:1.6724rem;height:1.6725rem}
.ico--tube{left:156.435rem;top:6.7783rem;width:1.8487rem;height:1.2942rem}
.ico--zap{left:160.2246rem;top:6.5921rem;width:1.6627rem;height:1.6667rem}
/* âncoras do menu: pontos invisíveis na altura real de cada seção */
.ancora{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:2rem}
#home{top:0}
#metodo{top:200rem}
#sobre{top:560rem}
#publique{top:940rem}

/* ══════════════════════════════════════════════════════════════════ HERO ══ */
.cam--hero picture{position:absolute;left:0;top:0;width:192rem;height:80.644rem;display:block}
.hero__foto{position:static;width:100%;height:100%;object-fit:cover}

.hero__h1{
  right:27.353rem;top:17.3015rem;text-align:right;
  font-family:Nineties;font-weight:700;font-style:italic;font-size:5.3rem;line-height:6.36rem;
  letter-spacing:.025em;margin-right:-.025em;color:var(--creme);
}
.hero__p{
  right:27.353rem;top:44.2095rem;text-align:right;
  font-weight:300;font-size:2.4rem;line-height:2.599rem;
  letter-spacing:.015em;margin-right:-.015em;color:var(--creme);
}
/* Botões: o traçado (ou a chapa) vem do .ai e o texto fica na origem exata
   dele. As letras espaçadas do .ai são espaços literais com avanço reduzido —
   aqui viram letter-spacing, que é o mesmo desenho e lê direito no leitor. */
.hero__cta{left:129.723rem;top:58.87rem;width:34.923rem;height:4.359rem;display:block;color:var(--laranja)}
.hero__cta span{
  position:absolute;left:2.2rem;top:2.1969rem;line-height:0;white-space:nowrap;
  font-weight:500;font-size:1.759rem;letter-spacing:.1929em;color:var(--creme-quente);
}
.zap{transition:opacity .25s,transform .25s}
.zap:hover{opacity:.82}
.zap:active{transform:scale(.98)}
.zap:focus-visible{outline:.2rem solid currentColor;outline-offset:.8rem;border-radius:9rem}
/* alvo de toque de 44 px mesmo quando o desenho da arte é menor */
.hero__cta::after,.legado__pill::after,.form__cta::after,.chamada__btn::after{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:100%;height:100%;min-height:44px;
}

/* ════════════════════════════════════════════════════════════════ LEGADO ══ */
.legado__h2{
  right:93.962rem;top:91.2735rem;text-align:right;
  font-family:Nineties;font-weight:700;font-style:italic;font-size:7.1rem;line-height:8.52rem;
  letter-spacing:.025em;margin-right:-.025em;color:var(--creme-quente);
}
/* A pílula: o texto fica na origem exata do .ai e o traçado pendura nele por
   um deslocamento fixo. */
.pilula{position:absolute;display:block;pointer-events:none}
.legado__pill{
  left:111.387rem;top:95.669rem;line-height:0;display:block;
  font-weight:700;font-size:2.6rem;letter-spacing:.2em;color:var(--creme-quente);white-space:nowrap;
}
.legado__pill .pilula{left:-2.838rem;top:-2.165rem;width:29.362rem;height:4.174rem}
.legado__p{
  left:109.487rem;width:47rem;
  font-weight:500;font-size:2.367rem;line-height:4.0575rem;
  letter-spacing:.01em;color:var(--creme-quente);
}
.legado__p--1{top:102.9985rem}
.legado__p--2{top:131.4035rem}

/* ═════════════════════════════════════════════════════════════════ ALTAR ══ */
.altar__h2{
  right:93.963rem;top:207.8705rem;text-align:right;
  font-family:Nineties;font-weight:700;font-style:italic;font-size:7.1rem;line-height:8.52rem;
  letter-spacing:.025em;margin-right:-.025em;color:var(--marrom-escuro);
}
.altar__p{
  left:109.487rem;top:220.7585rem;width:46rem;
  font-weight:500;font-size:2.367rem;line-height:4.0575rem;
  letter-spacing:.01em;color:var(--marrom-escuro);
}

/* ═══════════════════════════════════════════════════════════════ ETAPAS ══ */
.etapa__n{
  position:absolute;line-height:0;white-space:nowrap;
  font-family:Nineties;font-weight:500;font-size:13.484rem;color:var(--laranja);
}
.etapa__t{
  position:absolute;left:118.253rem;line-height:0;white-space:nowrap;
  font-family:Nineties;font-weight:500;font-size:3.071rem;color:var(--marrom);
}
.etapa__s{
  position:absolute;left:118.253rem;
  font-family:Nineties;font-weight:400;font-size:2.2rem;line-height:3.605rem;
  letter-spacing:.05em;color:var(--marrom);
}
.etapa--1 .etapa__n{left:109.129rem;top:256.0625rem}
.etapa--1 .etapa__t{top:253.3346rem}
.etapa--1 .etapa__s{top:255.4115rem}
.etapa--2 .etapa__n{left:106.8rem;top:273.5495rem}
.etapa--2 .etapa__t{top:270.8226rem}
.etapa--2 .etapa__s{top:272.8995rem}
.etapa--3 .etapa__n{left:106.692rem;top:290.8755rem}
.etapa--3 .etapa__t{top:288.1476rem}
.etapa--3 .etapa__s{top:290.2245rem}

/* ══════════════════════════════════════════════════════════════════ QUEM ══ */
.quem__h2{
  left:30.664rem;top:329.7295rem;line-height:0;white-space:nowrap;
  font-family:Nineties;font-weight:500;font-size:13.484rem;color:var(--laranja);
}
.quem__p{
  left:118.211rem;top:342.0055rem;
  font-weight:500;font-size:2.367rem;line-height:4.0575rem;
  letter-spacing:.01em;color:var(--marrom-escuro);
}

/* ═══════════════════════════════════════════════════════════════ AUTORES ══ */
.autor{position:absolute;top:379.822rem;width:35.71rem;height:32.865rem}
.autor--1{left:17.611rem}
.autor--2{left:68.408rem}
.autor--3{left:119.173rem}
.autor--4{left:169.891rem}
.autor__card{position:absolute;inset:0;color:var(--laranja-2)}
.autor__foto{
  position:absolute;left:-4.932rem;top:-14.105rem;width:47.129rem;height:46.97rem;
  overflow:hidden;
  clip-path:url(#recorte-autor);
}
/* max-width:none: a 4ª foto é MAIOR que a caixa de recorte e o reset
   global (img{max-width:100%}) a achatava. */
.autor__foto img{position:absolute;left:0;top:-8.2rem;width:47.129rem;height:70.694rem;max-width:none}
.autor--3 .autor__foto img{left:-2.001rem;top:-2.198rem}
.autor--4 .autor__foto img{left:-7.6748rem;top:-10.8919rem;width:60.078rem;height:60.078rem}
/* o degradê do nome é uma máscara no .ai: começa em 64,74% do card e chega a
   ~92% de preto no pé; recortado pela silhueta do cartão. */
.autor__fade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 64.74%,rgba(0,0,0,.92) 100%);
  clip-path:url(#recorte-card);
}
.autor__pena{position:absolute;left:27.429rem;top:6.515rem;width:8.77rem;height:4.959rem;color:var(--creme)}
.autor__nome{position:absolute;left:0;top:0;width:100%;color:var(--creme-nome)}
.autor__nome em{
  position:absolute;left:7.002rem;top:24.8388rem;line-height:0;font-style:italic;
  font-family:Nineties;font-weight:700;font-size:3.333rem;letter-spacing:.025em;
}
.autor__nome span{
  position:absolute;left:17.855rem;top:24.8866rem;line-height:0;
  font-weight:700;font-size:1.666rem;letter-spacing:.006em;
}
.ctrl--aut-esq{left:3.226rem;top:393.222rem;width:5.015rem;height:5.219rem;color:var(--laranja-2)}

/* ═══════════════════════════════════════════════════════════════ NÚMEROS ══ */
.num{position:absolute;top:0;width:0}
.num--1{left:44.4865rem}
.num--2{left:79.2115rem}
.num--3{left:113.694rem}
.num--4{left:149.233rem}
.num__mais{position:absolute;left:-3.077rem;top:432.9rem;width:6.154rem;height:1.953rem;color:var(--laranja)}
.num__v{
  position:absolute;left:0;top:443.0327rem;transform:translateX(-50%);line-height:0;
  font-family:Nineties;font-weight:700;font-size:15.439rem;letter-spacing:.025em;color:var(--laranja);
  white-space:nowrap;
}
.num__l{
  position:absolute;left:0;top:451.0645rem;transform:translateX(-50%);text-align:center;
  font-weight:700;font-size:3.356rem;line-height:4.027rem;letter-spacing:.05em;color:var(--marrom-escuro);
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════ QUADROS ══ */
.quadro{position:absolute;top:478.268rem;width:40.609rem;height:60.859rem}
.quadro--1{left:24.306rem}
.quadro--2{left:75.643rem}
.quadro--3{left:127.385rem}
.quadro__sombra{position:absolute;left:-3.006rem;top:-3.029rem;width:52.7rem;height:72.9rem;max-width:none}
.quadro__forma{position:absolute;inset:0;color:var(--creme)}
.quadro--3 .quadro__forma{color:var(--laranja-2)}
.quadro__canto{position:absolute;left:33.799rem;top:54.049rem;width:6.81rem;height:6.81rem;color:var(--laranja-2)}
.quadro__n{
  position:absolute;left:37.16rem;top:57.6353rem;transform:translateX(-50%);line-height:0;
  font-family:Nineties;font-weight:700;font-size:3.707rem;color:var(--creme);
}
.quadro__t{
  position:absolute;top:10.4rem;
  font-family:Nineties;font-weight:700;font-size:4.8rem;line-height:5.76rem;
  letter-spacing:.025em;color:var(--marrom-escuro);
}
.quadro__p{
  position:absolute;top:26.1915rem;
  font-weight:500;font-size:2.367rem;line-height:4.0575rem;
  letter-spacing:.01em;color:var(--marrom-escuro);
}
.quadro--1 .quadro__t,.quadro--1 .quadro__p{left:4.832rem}
.quadro--2 .quadro__t,.quadro--2 .quadro__p{left:5.755rem}
.quadro--3 .quadro__t,.quadro--3 .quadro__p{left:5.666rem;color:var(--creme)}

/* ══════════════════════════════════════════════════════════════════ ZELO ══ */
.zelo__h2{
  left:0;top:561.9875rem;width:192rem;text-align:center;
  font-family:Nineties;font-weight:500;font-size:13.484rem;line-height:15.83rem;color:var(--laranja);
}
.zelo__p{
  left:81.398rem;width:70rem;
  font-weight:500;font-size:2.367rem;line-height:4.0575rem;
  letter-spacing:.01em;color:var(--marrom-escuro);
}
.zelo__p strong{font-weight:700}
.zelo__p--1{top:616.4005rem}
.zelo__p--2{top:632.6325rem}
.zelo__p--3{top:648.8655rem}
.zelo__p--4{top:669.1555rem}

/* ══════════════════════════════════════════════════════════════════ OBRA ══ */
.legados__h2{
  left:81.398rem;top:706.3455rem;line-height:0;white-space:nowrap;
  font-family:Nineties;font-weight:500;font-size:13.484rem;color:var(--laranja);
}
.obra__capa{
  left:59.617rem;top:726.445rem;width:45.666rem;height:62.137rem;
  border-radius:2.777rem;
  box-shadow:0 1.6rem 3.2rem rgba(60,22,8,.22);
}
.obra__aspas{left:108.5715rem;top:748.278rem;width:3.214rem;height:2.284rem;color:var(--creme-quente)}
.obra__pill{
  left:125.719rem;top:742.7975rem;line-height:0;white-space:nowrap;
  font-weight:700;font-size:1.369rem;letter-spacing:.2002em;color:var(--creme-quente);
}
.obra__pill .pilula{left:-1.518rem;top:-1.1645rem;width:15.511rem;height:2.246rem}
.obra__h3{
  left:125.866rem;top:746.8196rem;
  font-family:Nineties;font-weight:700;font-style:italic;font-size:4.215rem;line-height:5.058rem;
  letter-spacing:.025em;color:var(--creme-quente);
}
.obra__p{
  left:125.719rem;top:758.3665rem;
  font-weight:100;font-size:2.367rem;line-height:4.0575rem;
  letter-spacing:.01em;color:var(--creme-quente);
}
.obra__logo{left:125.719rem;top:777.633rem;width:23.422rem;height:3.777rem;color:var(--creme-quente)}

/* ═══════════════════════════════════════════════════════════════ REVISTA ══ */
.cam--revista>picture:first-of-type{position:absolute;left:0;top:816.749rem;width:192rem;height:116.278rem;display:block}
.revista__foto{position:static;width:100%;height:100%;object-fit:cover}
/* o mockup 3D é camada solta (o carrossel troca só ele) */
.cam--revista>picture.revista__mock{position:absolute;left:91.675rem;top:832.627rem;width:91.668rem;height:91.668rem;display:block}
.revista__livro{width:100%;height:100%;display:block;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s}
.revista__livro.troca{opacity:0;transform:translateX(calc(var(--dir,1) * -7rem)) scale(.96)}
.chamada__pena{left:17.758rem;top:816.649rem;width:4.959rem;height:8.769rem;color:var(--creme)}
.chamada__h2{
  left:18.07rem;top:845.1805rem;
  font-family:Nineties;font-weight:700;font-style:italic;font-size:7.1rem;line-height:8.52rem;
  letter-spacing:.025em;color:var(--creme-quente);
}
.chamada__p{
  left:17.767rem;top:882.207rem;
  font-weight:500;font-style:italic;font-size:2.6rem;line-height:5.4rem;
  letter-spacing:.006em;color:var(--creme-quente);
}
.chamada__btn{
  left:17.667rem;top:907.79rem;width:37.922rem;height:4.558rem;
  display:block;color:var(--creme-quente);
}
.chamada__btn span{
  position:absolute;left:2.299rem;top:2.2969rem;line-height:0;white-space:nowrap;
  font-weight:500;font-size:1.759rem;letter-spacing:.1921em;
}
.chamada__btn .sym path{transition:stroke-width .25s}
.chamada__btn:hover .sym path{stroke-width:4}
.pontos{left:129.809rem;top:918.909rem;width:15.4rem;height:2.575rem;color:var(--cinza)}
/* a bolinha cheia marca a obra atual; o resto é só contorno */
.ponto{fill:none;transition:fill .3s}
.ponto--on{fill:currentColor}

/* Controles do carrossel ---------------------------------------------------
   A arte desenha setas de 50 px — no celular isso vira pouco mais de 20 px de
   tela, que ninguém acerta com o dedo. O DESENHO fica do tamanho do .ai; quem
   cresce é a área de toque, num ::after invisível de no mínimo 44 px. Nas
   setas que ficam lado a lado (as dos livros), a área cresce só para FORA. */
.ctrl{
  position:absolute;color:var(--cinza);touch-action:manipulation;
  --sx:0;transition:opacity .25s,transform .25s;
}
.ctrl::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:44px;height:44px;min-width:100%;min-height:100%;
}
.ctrl:hover{opacity:.7;transform:translateX(var(--sx))}
.ctrl:active{opacity:.55;transform:translateX(var(--sx)) scale(.9)}
.ctrl:focus-visible{outline:.2rem solid currentColor;outline-offset:.8rem;border-radius:.4rem}
/* as setas da revista ficam inertes enquanto houver só uma obra (ver README) */
.ctrl[aria-disabled="true"]{cursor:default;opacity:.5}
.ctrl[aria-disabled="true"]:hover,.ctrl[aria-disabled="true"]:active{opacity:.5;transform:none}
.ctrl--rev-esq,.ctrl--aut-esq,.ctrl--liv-esq{--sx:-.4rem}
.ctrl--rev-dir,.ctrl--liv-dir{--sx:.4rem}
.ctrl--liv-esq::after{left:auto;right:0;translate:0 -50%}
.ctrl--liv-dir::after{left:0;right:auto;translate:0 -50%}
.ctrl--rev-esq{left:100.281rem;top:875.155rem;width:5.115rem;height:5.319rem}
.ctrl--rev-dir{left:169.243rem;top:875.14rem;width:5.115rem;height:5.319rem}

/* ══════════════════════════════════════════════════════════════════ FORM ══ */
.form__h2{
  left:20.037rem;top:949.648rem;
  font-family:Nineties;font-weight:500;font-size:10rem;line-height:11.7rem;color:var(--laranja);
}
.form__p{
  left:19.987rem;top:1003.9532rem;
  font-weight:500;font-size:2.6rem;line-height:4.0575rem;
  letter-spacing:.01em;color:var(--marrom-escuro);
}
/* Campos: a arte desenha só o sublinhado com o gancho na ponta e o rótulo em
   cima dele. O rótulo é o placeholder: sobe e encolhe quando o campo recebe
   foco ou texto. */
.campo{position:absolute;left:95.003rem;width:97.047rem;height:7.575rem;margin:0}
.campo--1{top:997.959rem}
.campo--2{top:1008.959rem}
.campo--3{top:1020.959rem}
.campo__linha{position:absolute;inset:0;color:var(--preto)}
.campo input{
  position:absolute;left:7.396rem;top:2.2rem;width:54.4rem;height:5rem;
  background:none;border:0;padding:0;outline:0;
  font-weight:500;font-size:2.8rem;letter-spacing:.005em;color:var(--marrom-escuro);
}
.campo label{
  position:absolute;left:7.396rem;line-height:0;transform-origin:0 50%;
  font-weight:500;font-size:2.8rem;letter-spacing:.005em;color:var(--marrom-escuro);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),color .25s;
}
.campo--1 label{top:4.213rem}
.campo--2 label{top:4.657rem}
.campo--3 label{top:4.871rem}
.campo input:focus+label,
.campo input:not(:placeholder-shown)+label{transform:translateY(-3.4rem) scale(.68);color:var(--laranja)}
.campo:focus-within .campo__linha path{stroke:var(--laranja);stroke-width:2}
.campo__linha path{transition:stroke .25s,stroke-width .25s}
.form__cta{
  position:absolute;left:95.271rem;top:1037.399rem;width:44.022rem;height:4.458rem;
  display:block;color:var(--laranja);
}
.form__cta span{
  position:absolute;left:2.249rem;top:2.2469rem;line-height:0;white-space:nowrap;
  font-weight:500;font-size:1.759rem;letter-spacing:.1931em;color:var(--laranja);
}
.form__cta .sym path{transition:stroke-width .25s}
.form__cta:hover .sym path{stroke-width:2}
.form__aviso{
  position:absolute;left:95.271rem;top:1043.6rem;width:60rem;
  font-weight:500;font-size:1.7rem;line-height:2.4rem;color:var(--laranja);
}

/* ═══════════════════════════════════════════════════════════════ DIVISOR ══ */
.bg-laranja{left:0;top:1089.916rem;width:192rem;height:346.935rem;background:var(--laranja)}
.divisor__caixa{left:63.414rem;top:1067.724rem;width:65.172rem;height:20.942rem;background:var(--creme)}
.divisor__logo{left:69.006rem;top:1075.411rem;width:53.988rem;height:8.705rem;color:#000}

/* ══════════════════════════════════════════════════════════════ MENSAGEM ══ */
.mensagem{left:33.446rem;top:1141.342rem;width:125.127rem;height:43.043rem}
.livro{
  position:absolute;top:1205.925rem;width:37.238rem;height:55.101rem;
  border-radius:1.791rem;overflow:hidden;
}
.livro:nth-child(1){left:-14.741rem}
.livro:nth-child(2){left:31.497rem}
.livro:nth-child(3){left:77.381rem}
.livro:nth-child(4){left:122.711rem}
.livro:nth-child(5){left:168.949rem}
.livro img{width:100%;height:100%;object-fit:cover}
.ctrl--liv-esq{left:89.573rem;top:1268.652rem;width:5.015rem;height:5.219rem;color:var(--creme)}
.ctrl--liv-dir{left:97.412rem;top:1268.638rem;width:5.015rem;height:5.219rem;color:var(--creme)}

/* ════════════════════════════════════════════════════════════════ RODAPÉ ══ */
.publique{color:var(--laranja-escuro);transition:color .3s}
.publique:hover{color:#a8280b}
.publique__l{
  position:absolute;left:30.698rem;line-height:0;white-space:nowrap;
  font-family:Nineties;font-weight:400;font-size:19.137rem;letter-spacing:.049em;
}
.publique__l b{font-weight:700}
.publique__l--1{top:1301.4398rem}
.publique__l--2{top:1324.1358rem}
.publique__l--3{top:1347.3928rem}
.publique__l--4{top:1370.0888rem}
.publique__l--5{top:1390.8138rem}
.publique__l--6{top:1410.8948rem}
.publique__l--7,.publique__l--8{display:none}
.rodape__pena{position:absolute;left:45.449rem;top:1315.157rem;width:101.102rem;height:116.893rem}
.rodape__logo{position:absolute;left:68.554rem;top:1402.195rem;width:54.892rem;height:8.852rem;color:var(--laranja)}
.rodape__social{color:var(--laranja)}
.ico2{position:absolute;transition:opacity .25s,transform .25s}
.ico2:hover{opacity:.72;transform:translateY(-.2rem)}
.ico2--insta{left:83.595rem;top:1413.811rem;width:2.356rem;height:2.356rem}
.ico2--face{left:89.714rem;top:1413.811rem;width:1.262rem;height:2.356rem}
.ico2--zap{left:94.722rem;top:1413.818rem;width:2.554rem;height:2.329rem}
.ico2--tiktok{left:100.543rem;top:1413.862rem;width:1.999rem;height:2.289rem}
.ico2--tube{left:105.994rem;top:1414.098rem;width:2.411rem;height:1.781rem}
.barra{left:0;top:1432.05rem;width:192rem;height:7.95rem;background:#000}
.barra__txt{
  position:absolute;left:78.608rem;top:3.7003rem;line-height:0;white-space:nowrap;
  font-family:Grift;font-weight:500;font-size:1.819rem;letter-spacing:.002em;color:var(--creme);
}
.barra__tri{position:absolute;left:96.302rem;top:2.604rem;width:17.09rem;height:2.223rem;color:var(--creme)}

/* ══════════════════════════════════════════════════════════════ MOVIMENTO ══
   Tudo aqui vive sob `html.mov`, ligado pelo main.js. Sem JS, com
   prefers-reduced-motion ou com `?estatico=1`, a página fica parada e
   inteira — idêntica à arte.                                              */

.mov .rev{
  opacity:0;transform:translateY(2.6rem);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             transform .8s cubic-bezier(.22,.61,.36,1) var(--d,0s);
  will-change:opacity,transform;
}
.mov .rev.on{opacity:1;transform:none}
/* as letras de MENSAGEM são <path>: precisam de caixa própria para o transform */
.mov .letra{transform-box:fill-box;transform-origin:50% 100%}
.mov .letra.rev{transform:translateY(1.8rem) scaleY(.94)}
.mov .letra.rev.on{transform:none}
/* linhas do PUBLIQUE-SE entram deslizando de lado, como uma esteira */
.mov .publique__l.rev{transform:translateX(-4rem)}
.mov .publique__l.rev.on{transform:none}
/* capas e cards entram com um respiro de escala */
.mov .obra__capa.rev,.mov .livro.rev,.mov .quadro.rev{transform:translateY(3.2rem) scale(.965)}
.mov .obra__capa.rev.on,.mov .livro.rev.on,.mov .quadro.rev.on{transform:none}

/* ---- abertura da hero: foto → título → parágrafo → botão ---- */
.mov .topo__logo,.mov .nav__item,.mov .ico,
.mov .hero__h1,.mov .hero__p,.mov .hero__cta{opacity:0;transform:translateY(1.8rem)}
.mov .cam--hero picture{transform:scale(1.045);transform-origin:50% 42%}
.mov.pronto .topo__logo,.mov.pronto .nav__item,.mov.pronto .ico,
.mov.pronto .hero__h1,.mov.pronto .hero__p,.mov.pronto .hero__cta{
  opacity:1;transform:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1) var(--i,0s),
             transform .9s cubic-bezier(.22,.61,.36,1) var(--i,0s);
}
.mov.pronto .cam--hero picture{transform:none;transition:transform 2.2s cubic-bezier(.22,.61,.36,1)}
.mov .topo__logo{--i:.05s}
.mov .nav__item--1{--i:.18s}
.mov .nav__item--2{--i:.24s}
.mov .nav__item--3{--i:.3s}
.mov .nav__item--4{--i:.36s}
.mov .ico--face{--i:.42s}
.mov .ico--insta{--i:.47s}
.mov .ico--tube{--i:.52s}
.mov .ico--zap{--i:.57s}
.mov .hero__h1{--i:.25s}
.mov .hero__p{--i:.5s}
.mov .hero__cta{--i:.68s}

/* ---- carrosséis ---- */
.livros,.autores{cursor:grab;touch-action:pan-y}
.livros{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev,.letra,.publique__l{opacity:1!important;transform:none!important}
}

/* ═══════════════════════════════════════════════════ PALCO DO MOBILE ══
   >>> MOBILE (gerado por _extract/mobile.py — não editar à mão)

   Esta versão do .ai não trouxe prancheta de celular, então o mobile é
   ADAPTAÇÃO nossa seguindo o layout da prancheta 2 antiga: palco de 72rem
   (1rem = 10 px de arte, como no desktop), uma coluna, chapas laranja
   sangrando de ponta a ponta e o entalhe de livro no topo do cartão.

   Diferença deliberada: o corpo de texto SOBE. A prancheta antiga repetia os
   23,67 px do desktop num palco de 720 e o texto chegava a ~12,8 px num
   iPhone de 390; aqui o corpo é 30 px de arte (~16 px de tela).
   Altura do palco: 1437.2rem.                                     */

@media (max-width:1179px){
  html{font-size:calc(min(100vw,720px)/72)}
  .stage{width:72rem;height:1437.2rem}

  /* as chapas do desktop (entalhes, painéis e cremes com as ondas da arte)
     são desenhadas para 1920 — no palco de 720 elas não servem. Só ficam as
     que continuam legíveis esticadas: as ondas e os fios do divisor. */
  .v--creme-topo,.v--cartao-legado,.v--creme-obra,.v--painel-obra,
  .v--painel-chamada,.v--painel-chamada-topo,.v--creme-form,
  .v--hero-fios,.v--fio-topo{display:none}
  .m-chapa{display:block}
  .m-veu{z-index:2}
  .m-legado,.m-entalhe--legado{z-index:9}
  .m-obra{z-index:7}
  .m-revista{z-index:3}
  .bg-laranja{z-index:1}

  /* no celular os parágrafos refluem: as quebras do <br> são as da prancheta
     de 1920 e não valem para 62rem de coluna. Os títulos mantêm as suas. */
  .hero__p br,.legado__p br,.altar__p br,.quem__p br,.zelo__p br,
  .quadro__p br,.obra__p br,.chamada__p br,.form__p br,.etapa__s br{display:none}

  /* --------------------------------------------------------- cabeçalho --- */
  .v--fio-topo{display:none}
  .topo__logo{left:20.95rem;top:4.7rem;width:30.1rem;height:4.854rem}
  .topo__nav{position:fixed;inset:0;z-index:61;background:#2b1108;display:none;align-content:center;justify-items:center;gap:4rem}
  .topo.aberto .topo__nav{display:grid;pointer-events:auto}
  .nav__item{position:relative;left:auto;top:auto;font-size:3.4rem;letter-spacing:.06em;line-height:1}
  .nav__item--1,.nav__item--2,.nav__item--3,.nav__item--4{left:auto}
  .menu{display:grid;gap:0.8rem;position:fixed;right:3.4rem;top:3.2rem;width:7.6rem;height:7.6rem;place-content:center;z-index:62;border-radius:50%;transition:background .3s}
  .topo.solido .menu{background:rgba(43,17,8,.82);backdrop-filter:blur(8px)}
  .menu span{display:block;width:4.2rem;height:0.4rem;background:var(--creme);border-radius:0.2rem;transition:transform .3s,opacity .3s}
  .topo.aberto .menu span:nth-child(1){transform:translateY(1.2rem) rotate(45deg)}
  .topo.aberto .menu span:nth-child(2){opacity:0}
  .topo.aberto .menu span:nth-child(3){transform:translateY(-1.2rem) rotate(-45deg)}
  .topo__social{position:fixed;left:0;right:0;bottom:10rem;top:auto;z-index:62;display:flex;justify-content:center;align-items:center;gap:1rem;opacity:0;pointer-events:none;transition:opacity .3s}
  .topo.aberto .topo__social{opacity:1;pointer-events:auto}
  .topo__social li{padding:1.6rem}
  .ico{position:relative;left:auto;top:auto;display:block}
  .ico--face{width:2.4rem;height:4.48rem}
  .ico--insta{width:4.18rem;height:4.18rem}
  .ico--tube{width:4.62rem;height:3.24rem}
  .ico--zap{width:4.16rem;height:4.17rem}

  /* -------------------------------------------------------------- hero --- */
  .cam--hero picture{left:0rem;top:0rem;width:72rem;height:72rem}
  .hero__h1{top:78rem;font-size:4.8rem;line-height:5.8rem;left:5rem;right:auto;text-align:left}
  .hero__p{top:105rem;font-size:3rem;line-height:4.6rem;left:5rem;right:auto;text-align:left;width:62rem}
  .hero__cta{left:5rem;top:128rem;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;line-height:1;white-space:nowrap;padding:2.4rem 3.0213rem 2.4rem 3.6rem;border-radius:9rem;font-size:3rem;letter-spacing:0.1929em;background:var(--laranja);border:0;color:var(--creme-quente)}
  .hero__cta .sym,.hero__cta .pilula{display:none}
  .hero__cta span{position:static;left:auto;top:auto;transform:none;line-height:1;font-size:3rem;letter-spacing:0.1929em}
  .m-veu{left:0rem;top:0rem;width:72rem;height:142.8rem}

  /* ------------------------------------------------------------ legado --- */
  .m-entalhe--legado{left:0rem;top:142.8rem;width:72rem;height:9.6rem}
  .legado__pill{left:5rem;top:157.8rem;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;line-height:1;white-space:nowrap;padding:1.5rem 2.08rem 1.5rem 2.6rem;border-radius:9rem;font-size:2.6rem;letter-spacing:0.2000em;border:0.2rem solid currentColor;background:none;color:var(--creme-quente)}
  .legado__pill .sym,.legado__pill .pilula{display:none}
  .legado__pill span{position:static;left:auto;top:auto;transform:none;line-height:1;font-size:2.6rem;letter-spacing:0.2000em}
  .legado__h2{top:166.8rem;font-size:5.8rem;line-height:7rem;left:5rem;right:auto;text-align:left}
  .legado__p--1{top:205.8rem;font-size:3rem;line-height:4.8rem;left:5rem;width:62rem}
  .legado__p--2{top:238rem;font-size:3rem;line-height:4.8rem;left:5rem;width:62rem}
  .m-legado{left:0rem;top:152.3rem;width:72rem;height:136.9rem}

  /* ------------------------------------------------------------- altar --- */
  .altar__h2{top:298.8rem;font-size:5.8rem;line-height:7rem;left:5rem;right:auto;text-align:left}
  .altar__p{top:330.4rem;font-size:3rem;line-height:4.8rem;left:5rem;width:62rem}
  .etapa--1 .etapa__n{left:5rem;top:360.8rem;font-size:8.8rem}
  .etapa--1 .etapa__t{left:16rem;top:362rem;font-size:3rem}
  .etapa--1 .etapa__s{left:16rem;top:366rem;width:51rem;font-size:2.4rem;line-height:3.4rem}
  .etapa--2 .etapa__n{left:5rem;top:375.8rem;font-size:8.8rem}
  .etapa--2 .etapa__t{left:16rem;top:377rem;font-size:3rem}
  .etapa--2 .etapa__s{left:16rem;top:381rem;width:51rem;font-size:2.4rem;line-height:3.4rem}
  .etapa--3 .etapa__n{left:5rem;top:394.2rem;font-size:8.8rem}
  .etapa--3 .etapa__t{left:16rem;top:395.4rem;font-size:3rem}
  .etapa--3 .etapa__s{left:16rem;top:399.4rem;width:51rem;font-size:2.4rem;line-height:3.4rem}

  /* -------------------------------------------------------------- quem --- */
  .quem__h2{top:419.8rem;font-size:5.6rem;left:5rem;white-space:nowrap}
  .quem__p{top:429.8rem;font-size:3rem;line-height:4.8rem;left:5rem;width:62rem}
  .autor{top:463.2rem;width:32.8532rem;height:30.2358rem}
  .autor--1{left:6.2rem}
  .autor--2{left:52.8992rem}
  .autor--3{left:99.5984rem}
  .autor--4{left:146.2976rem}
  .autor__foto{left:-4.5374rem;top:-12.9766rem;width:43.3587rem;height:43.2124rem}
  .autor__foto img{left:0rem;top:-7.544rem;width:43.3587rem;height:65.0385rem}
  .autor--3 .autor__foto img{left:-1.8409rem;top:-2.0222rem}
  .autor--4 .autor__foto img{left:-7.0608rem;top:-10.0205rem;width:55.2718rem;height:55.2718rem}
  .autor__pena{left:25.2347rem;top:5.9938rem;width:8.0684rem;height:4.5623rem}
  .autor__nome em{left:6.4418rem;top:22.8517rem;font-size:3.4rem}
  .autor__nome span{left:17.363rem;top:22.9632rem;font-size:2rem}
  .ctrl--aut-esq{left:0.6rem;top:475.6179rem;width:4.784rem;height:4.968rem}
  .num--1{left:20rem}
  .num--2{left:47rem}
  .num--3{left:20rem}
  .num--4{left:47rem}
  .num__v{font-size:10.8rem}
  .num__l{font-size:2.8rem;line-height:3.4rem}
  .num--1 .num__v{top:512.0358rem}
  .num--1 .num__l{top:517.6518rem}
  .num--1 .num__mais{top:504.9726rem}
  .num--2 .num__v{top:512.0358rem}
  .num--2 .num__l{top:517.6518rem}
  .num--2 .num__mais{top:504.9726rem}
  .num--3 .num__v{top:533.0358rem}
  .num--3 .num__l{top:538.6518rem}
  .num--3 .num__mais{top:525.9726rem}
  .num--4 .num__v{top:533.0358rem}
  .num--4 .num__l{top:538.6518rem}
  .num--4 .num__mais{top:525.9726rem}
  .num__mais{left:-2.4rem;width:4.8rem;height:1.52rem}

  /* ----------------------------------------------------------- quadros --- */
  .quadro{left:5rem;width:62rem}
  .quadro--1{top:555.0518rem;height:48rem}
  .quadro--1 .quadro__t{top:5.4rem;left:4.8rem}
  .quadro--1 .quadro__p{top:18.4rem;left:4.8rem}
  .quadro--1 .quadro__canto{left:55.19rem;top:41.19rem}
  .quadro--1 .quadro__n{left:58.6rem;top:44rem}
  .quadro--2{top:607.0518rem;height:48rem}
  .quadro--2 .quadro__t{top:5.4rem;left:4.8rem}
  .quadro--2 .quadro__p{top:18.4rem;left:4.8rem}
  .quadro--2 .quadro__canto{left:55.19rem;top:41.19rem}
  .quadro--2 .quadro__n{left:58.6rem;top:44rem}
  .quadro--3{top:659.0518rem;height:48rem}
  .quadro--3 .quadro__t{top:5.4rem;left:4.8rem}
  .quadro--3 .quadro__p{top:18.4rem;left:4.8rem}
  .quadro--3 .quadro__canto{left:55.19rem;top:41.19rem}
  .quadro--3 .quadro__n{left:58.6rem;top:44rem}
  .quadro__t{font-size:4rem;line-height:4.8rem}
  .quadro__p{font-size:3rem;line-height:4.6rem;width:52.4rem}
  .quadro__canto{width:6.81rem;height:6.81rem}
  .quadro__n{font-size:3.707rem}
  .quadro__sombra{display:none}
  .quadro__forma{display:none}
  .quadro{background:var(--creme);border-radius:3.8rem;box-shadow:0 1.2rem 3.2rem rgba(60,22,8,.10)}
  .quadro--3{background:var(--laranja-2);box-shadow:none}

  /* -------------------------------------------------------------- zelo --- */
  .zelo__h2{top:718.0518rem;font-size:5.6rem;line-height:6.8rem;left:0;width:72rem;text-align:center}
  .zelo__p--1{top:744.0518rem;font-size:3rem;line-height:4.8rem;left:5rem;width:62rem}
  .zelo__p--2{top:767.2518rem;font-size:3rem;line-height:4.8rem;left:5rem;width:62rem}
  .zelo__p--3{top:790.4518rem;font-size:3rem;line-height:4.8rem;left:5rem;width:62rem}
  .zelo__p--4{top:818.4518rem;font-size:3rem;line-height:4.8rem;left:5rem;width:62rem}

  /* -------------------------------------------------------------- obra --- */
  .legados__h2{top:848.6518rem;font-size:5.6rem;left:5rem;white-space:nowrap}
  .v--ondas{left:-2rem;top:864.8518rem;width:42rem;height:24rem}
  .obra__capa{left:21rem;top:860.8518rem;width:30rem;height:40.8205rem;border-radius:1.8rem}
  .obra__aspas{left:5rem;top:908.2723rem;width:2.6rem;height:1.85rem}
  .obra__pill{left:9.6rem;top:907.2723rem;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;line-height:1;white-space:nowrap;padding:1.2rem 1.7195rem 1.2rem 2.2rem;border-radius:9rem;font-size:2.4rem;letter-spacing:0.2002em;border:0.2rem solid currentColor;background:none;color:var(--creme-quente)}
  .obra__pill .sym,.obra__pill .pilula{display:none}
  .obra__pill span{position:static;left:auto;top:auto;transform:none;line-height:1;font-size:2.4rem;letter-spacing:0.2002em}
  .obra__h3{top:916.0723rem;font-size:3.8rem;line-height:4.6rem;left:5rem}
  .obra__p{top:927.4723rem;font-size:2.8rem;line-height:4.4rem;left:5rem;width:62rem}
  .obra__logo{left:5rem;top:949.0723rem;width:19rem;height:3.06rem}
  .m-obra{left:0rem;top:890.6723rem;width:72rem;height:68.46rem;border-radius:3.6rem}

  /* ----------------------------------------------------------- revista --- */
  .cam--revista>picture:first-of-type{left:0rem;top:968.7323rem;width:72rem;height:77.5187rem}
  .cam--revista>picture.revista__mock{left:8rem;top:974.7323rem;width:56rem;height:56rem}
  .ctrl--rev-esq{left:1.8rem;top:1000.0323rem;width:5.115rem;height:5.319rem}
  .ctrl--rev-dir{left:65.085rem;top:1000.0323rem;width:5.115rem;height:5.319rem}
  .pontos{left:28.3rem;top:1040.251rem;width:15.4rem;height:2.575rem}
  .chamada__pena{left:5rem;top:1054.851rem;width:4rem;height:7.07rem}
  .chamada__h2{top:1065.251rem;font-size:5.4rem;line-height:6.6rem;left:5rem}
  .chamada__p{top:1095.051rem;font-size:3rem;line-height:5rem;left:5rem;width:62rem}
  .chamada__btn{left:5rem;top:1119.651rem;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;line-height:1;white-space:nowrap;padding:2.2rem 2.8621rem 2.2rem 3.4rem;border-radius:9rem;font-size:2.8rem;letter-spacing:0.1921em;border:0.2rem solid currentColor;background:none;color:var(--creme-quente)}
  .chamada__btn .sym,.chamada__btn .pilula{display:none}
  .chamada__btn span{position:static;left:auto;top:auto;transform:none;line-height:1;font-size:2.8rem;letter-spacing:0.1921em}
  .m-revista{left:0rem;top:1050.251rem;width:72rem;height:85.2rem}

  /* -------------------------------------------------------------- form --- */
  .form__h2{top:1146.451rem;font-size:5.6rem;line-height:6.8rem;left:5rem}
  .form__p{top:1177.051rem;font-size:3rem;line-height:4.6rem;left:5rem;width:62rem}
  .campo--1{left:5rem;top:1202.051rem;width:62rem;height:4.8394rem}
  .campo--1 label{top:2.6394rem}
  .campo--2{left:5rem;top:1211.2904rem;width:62rem;height:4.8394rem}
  .campo--2 label{top:2.6394rem}
  .campo--3{left:5rem;top:1220.5298rem;width:62rem;height:4.8394rem}
  .campo--3 label{top:2.6394rem}
  .campo input{left:1rem;top:-0.5606rem;width:38.44rem;height:4.6rem;font-size:3rem}
  .campo label{left:1rem;font-size:3rem}
  .campo input:focus+label,.campo input:not(:placeholder-shown)+label{transform:translateY(-3.8rem) scale(.7)}
  .form__cta{left:5rem;top:1232.3692rem;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;line-height:1;white-space:nowrap;padding:2.4rem 3.1957rem 2.4rem 3.4rem;border-radius:9rem;font-size:3rem;letter-spacing:0.0681em;border:0.2rem solid currentColor;background:none;color:var(--laranja)}
  .form__cta .sym,.form__cta .pilula{display:none}
  .form__cta span{position:static;left:auto;top:auto;transform:none;line-height:1;font-size:3rem;letter-spacing:0.0681em}
  .form__aviso{left:5rem;top:1241.9692rem;width:62rem;font-size:2.4rem;line-height:3.2rem}

  /* ----------------------------------------------------------- divisor --- */
  .v--fio-divisor-1{left:0rem;top:1252.1692rem;width:72rem;height:2.8rem}
  .divisor__caixa{left:15rem;top:1249.5692rem;width:42rem;height:13.2rem}
  .divisor__logo{left:19rem;top:1252.3692rem;width:34rem;height:5.48rem}
  .v--fio-divisor-2{left:0rem;top:1260.1692rem;width:72rem;height:2.8rem}

  /* ---------------------------------------------------------- mensagem --- */
  .mensagem{left:5rem;top:1278.9692rem;width:62rem;height:21.3277rem}
  .livro{top:1309.4969rem;width:28rem;height:41.4315rem;border-radius:1.3rem}
  .livro:nth-child(1){left:-38.08rem}
  .livro:nth-child(2){left:-3.36rem}
  .livro:nth-child(3){left:31.36rem}
  .livro:nth-child(4){left:66.08rem}
  .livro:nth-child(5){left:100.8rem}
  .ctrl--liv-esq{left:30.2rem;top:1355.5284rem;width:5.115rem;height:5.319rem}
  .ctrl--liv-dir{left:36.7rem;top:1355.5284rem;width:5.115rem;height:5.319rem}

  /* ------------------------------------------------------------ rodapé --- */
  .publique__l{left:7.9608rem;font-size:8.4rem}
  .publique__l--7,.publique__l--8{display:block}
  .publique__l--1{top:1369.8474rem}
  .publique__l--2{top:1379.5914rem}
  .publique__l--3{top:1389.3354rem}
  .publique__l--4{top:1399.0794rem}
  .publique__l--5{top:1408.8234rem}
  .publique__l--6{top:1418.5674rem}
  .publique__l--7{display:none}
  .publique__l--8{display:none}
  .publique__l--9{display:none}
  .publique__l--10{display:none}
  .rodape__pena{left:12.5rem;top:1373.8474rem;width:47rem;height:54.3409rem}
  .rodape__logo{left:23.25rem;top:1414.277rem;width:25.5rem;height:4.1122rem}
  .ico2--insta{left:22.0572rem;top:1419.7111rem;width:3.1806rem;height:3.1806rem}
  .ico2--face{left:28.6378rem;top:1419.7111rem;width:1.7037rem;height:3.1806rem}
  .ico2--zap{left:33.7415rem;top:1419.7293rem;width:3.4479rem;height:3.1442rem}
  .ico2--tiktok{left:40.5893rem;top:1419.7563rem;width:2.6986rem;height:3.0902rem}
  .ico2--tube{left:46.688rem;top:1420.0992rem;width:3.2549rem;height:2.4043rem}
  .bg-laranja{left:0rem;top:1269.3692rem;width:72rem;height:158.8191rem}
  .barra{left:0rem;top:1428.1883rem;width:72rem;height:9rem}
  .ico2::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:44px;height:44px}
  .barra__txt{left:17.4165rem;top:4.2rem;font-size:2.2rem}
  .barra__tri{left:39.5535rem;top:3.6rem;width:15.03rem;height:1.96rem}

  /* --------------------------------------------------- âncoras do menu --- */
  #home{top:0}
  #metodo{top:294.8rem}
  #sobre{top:714.0518rem}
  #publique{top:1142.451rem}
}
/* <<< MOBILE */