/* ============================================================================
   Autor da Fé — reconstrução da prancheta "Site Autor da Fé.ai" (1920 × 9771,13)

   Escala:  html{font-size:calc(var(--vw)/192)}  →  1rem = 10 px do projeto.
   Logo `top:30.3185rem` é literalmente y = 303,185 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-(A+D))/2 + A.
   Com line-height:0 vira topo + (A-D)/2 — 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
   ========================================================================== */

/* ------------------------------------------------------------------ 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}
@font-face{font-family:Blauer;src:url(../fonts/blauer-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:block}
/* A Bold Italic instalada no Mac é OUTRA versão da Blauer Nue (larguras
   divergem em 8 dos 9 glifos usados) — esta vem do CFF embarcado no .ai. */
@font-face{font-family:BlauerAI;src:url(../fonts/blauer-bold-italic.woff2) format("woff2");font-weight:700;font-style:italic;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 4 fases                             */
  --marrom-escuro:#402020;  /* legendas dos números                          */
  --cinza:#edebec;          /* setas do carrossel da revista                 */
  --preto:#010101;
  --arte-l:1920;
  --arte-a:9771.13;
}

/* ------------------------------------------------------------------- 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}

.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}
.menu{display:none}
.conferindo .menu{display:none!important}
.defs{position:absolute;width:0;height:0}

/* ------------------------------------------------------------------ palco */
.stage{
  position:relative;
  width:192rem;
  height:977.113rem;
  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,.fases__lista,.autores,.numeros,.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>*,.fases__lista>*,.autores>*,.numeros>*,.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,.vm,.sym,.pontos,.mensagem,.rodape__pena,.autor__fade,.autor__card,
.autor__pena,.num__mais,.divisor__caixa,.bg-laranja{pointer-events:none}
.ctrl,.ico,.ico2,a,button{pointer-events:auto}
.fase{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{z-index:1}
.v--creme-autores{z-index:2}
.v--painel-chamada{z-index:3}
.autor{z-index:4}
.v--hero-creme,.v--hero-fios{z-index:5}
.v--creme-obra,.v--creme-fases,.v--ondas{z-index:6}
.v--painel-chamada-topo{z-index:7}
.v--painel-obra{z-index:7}
.obra__capa{z-index:8}
.v--cartao-editora{z-index:9}

/* 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 ══ */
.topo{position:absolute;inset:0;z-index:40;pointer-events:none}
.topo>*,.topo a{pointer-events:auto}
/* mesmo caso: nav e sociais do topo são agrupadores de palco inteiro dentro
   do .topo (z-index 40), então bloqueariam TODA a página no desktop. */
.topo>.topo__nav,.topo>.topo__social{pointer-events:none}
.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}

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

.hero__h1{position:absolute;right:27.353rem;top:0;width:0;color:var(--creme)}
.hero__t1,.hero__t2{position:absolute;right:0;display:block;white-space:nowrap;line-height:0}
.hero__t1{top:30.3185rem;font-family:Nineties;font-weight:700;font-style:italic;font-size:9.7rem;letter-spacing:.025em;margin-right:-.025em}
.hero__t2{top:38.2381rem;font-family:BlauerAI;font-weight:700;font-style:italic;font-size:5.991rem;letter-spacing:.015em;margin-right:-.015em}

.hero__p{
  right:27.353rem;width:60rem;text-align:right;
  font-weight:300;font-size:1.9rem;line-height:2.599rem;
  letter-spacing:.01em;margin-right:-.01em;color:var(--creme);
}
.hero__p strong{font-weight:700;color:var(--laranja)}
.hero__p--1{top:46.3085rem}
.hero__p--2{top:59.3065rem}

/* ═══════════════════════════════════════════════════════════════ EDITORA ══ */
.editora__h2{
  right:95.963rem;top:109.1345rem;
  font-family:Nineties;font-weight:700;font-style:italic;font-size:7.1rem;line-height:8.52rem;
  letter-spacing:.025em;margin-right:-.025em;text-align:right;color:var(--creme-quente);
}
/* As pílulas: o texto fica na origem exata do .ai e o traçado (o mesmo
   desenho nas duas pranchetas) pendura nele por um deslocamento fixo. */
.pilula{position:absolute;display:block;pointer-events:none}
.editora__pill,.hero__pill{
  left:110.875rem;top:118.7462rem;line-height:0;
  font-weight:700;font-size:2.123rem;letter-spacing:.199em;color:var(--creme-quente);white-space:nowrap;
}
.editora__pill .pilula,.hero__pill .pilula{left:-2.326rem;top:-1.7772rem;width:23.993rem;height:3.4265rem}
/* A pílula PUBLIQUE-SE é o CTA de WhatsApp. O texto fica na origem exata do
   .ai (caixa de altura zero), então a área de clique vem de um ::after do
   tamanho do traçado — com 44 px de altura mínima para o dedo. */
.pill-zap{display:block;transition:opacity .25s,transform .25s}
.pill-zap::after{
  content:"";position:absolute;left:-2.326rem;top:50%;translate:0 -50%;
  width:23.993rem;height:3.4265rem;min-height:44px;
}
.pill-zap:hover{opacity:.78}
.pill-zap:active{opacity:.62;transform:scale(.97)}
.pill-zap:focus-visible{outline:.2rem solid currentColor;outline-offset:1.6rem;border-radius:9rem}
.obra__pill .pilula{left:-1.518rem;top:-1.1645rem;width:15.5118rem;height:2.2457rem}
.hero__pill{display:none;color:var(--creme)}
/* â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}
#sobre{top:80rem}
#metodo{top:160rem}
#publique{top:660rem}

.pontos{left:129.8094rem;top:446.2926rem;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}
.mensagem{left:33.446rem;top:678.0971rem;width:125.108rem;height:43.4008rem}
/* o mockup 3D é camada solta (o carrossel troca só ele) */
.cam--revista picture:last-of-type{left:91.6752rem;top:360.0106rem;width:91.6682rem;height:91.6682rem;z-index:4}
.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)}
.publique__l--7,.publique__l--8,.publique__l--9,.publique__l--10{display:none}
.editora__p{
  left:109.487rem;top:125.7155rem;
  font-weight:500;font-size:2.367rem;line-height:4.0575rem;letter-spacing:.01em;color:var(--creme-quente);
}

/* ═════════════════════════════════════════════════════════════════ FASES ══ */
.fases__lead{
  right:95.963rem;top:170.4761rem;text-align:right;
  font-weight:500;font-size:3.071rem;line-height:3.6055rem;color:var(--marrom);
}
.fases__k{color:var(--laranja)}
.fase__n{position:absolute;font-family:Nineties;font-weight:500;font-size:13.484rem;line-height:0;letter-spacing:.025em;color:var(--laranja)}
.fase__t{position:absolute;left:118.253rem;font-family:Nineties;font-weight:500;font-size:3.071rem;line-height:3.6055rem;color:var(--marrom)}
.fase--1 .fase__n{left:109.129rem;top:176.3895rem}
.fase--1 .fase__t{top:171.8599rem}
.fase--2 .fase__n{left:106.8rem;top:193.8775rem}
.fase--2 .fase__t{top:189.3479rem}
.fase--3 .fase__n{left:106.692rem;top:211.2025rem}
.fase--3 .fase__t{top:206.6729rem}
.fase--4 .fase__n{left:106.679rem;top:229.1845rem}
.fase--4 .fase__t{top:224.6549rem}

/* ══════════════════════════════════════════════════════════════════ OBRA ══ */
.obra__capa{
  left:59.6167rem;top:253.8293rem;width:45.666rem;height:62.1371rem;
  border-radius:2.777rem;
  box-shadow:0 1.6rem 3.2rem rgba(60,22,8,.22);
}
.obra__aspas{left:108.5715rem;top:275.662rem;width:3.214rem;height:2.284rem;color:var(--creme-quente)}
.obra__pill{
  left:127.187rem;top:270.1815rem;line-height:0;
  font-weight:700;font-size:1.369rem;letter-spacing:.1893em;color:var(--creme-quente);white-space:nowrap;
}
.obra__h3{
  left:125.866rem;top:274.2036rem;
  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:285.7505rem;
  font-weight:100;font-size:2.367rem;line-height:4.0575rem;letter-spacing:.01em;color:var(--creme-quente);
}
.obra__logo{left:125.719rem;top:305.017rem;width:23.422rem;height:3.777rem;color:var(--creme-quente)}

/* ═══════════════════════════════════════════════════════════════ REVISTA ══ */
.cam--revista picture{position:absolute;left:0;top:344.133rem;width:192rem;height:116.278rem;display:block}
.revista__foto{position:static;width:100%;height:100%}
.chamada__pena{left:17.7577rem;top:344.0333rem;width:4.959rem;height:8.7692rem;color:var(--creme)}
.chamada__h2{
  left:18.07rem;top:372.5645rem;
  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:409.5907rem;
  font-weight:500;font-style:italic;font-size:2.6rem;line-height:5.4005rem;color:var(--creme-quente);
}
.chamada__btn{
  left:17.6666rem;top:435.1736rem;width:37.9229rem;height:4.5588rem;
  display:block;color:var(--creme-quente);
}
.chamada__btn span{
  position:absolute;left:2.2994rem;top:2.2973rem;line-height:0;
  font-weight:500;font-size:1.759rem;letter-spacing:.192em;white-space:nowrap;
}
.chamada__btn .sym path{transition:stroke-width .25s,fill .25s}
.chamada__btn:hover .sym path{stroke-width:4}

/* Controles do carrossel ---------------------------------------------------
   A arte desenha setas de 50 px (desktop) e 30 px (mobile) — no celular isso
   vira 16 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, senão uma cobre a outra. */
.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}
/* par de setas coladas: a da esquerda cresce para a esquerda e vice-versa */
.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:402.539rem;width:5.115rem;height:5.3189rem}
.ctrl--rev-dir{left:169.2435rem;top:402.5243rem;width:5.115rem;height:5.3189rem}
.ponto{transition:fill .3s}

/* ═══════════════════════════════════════════════════════════════ AUTORES ══ */
.autor{
  position:absolute;top:487.0237rem;width:35.71rem;height:32.8643rem;
}
.autor--1{left:17.6109rem}
.autor--2{left:68.4079rem}
.autor--3{left:119.1729rem}
.autor--4{left:169.8909rem}
.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.969rem;
  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.1995rem;width:47.129rem;height:70.693rem;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}
/* degradê que escurece o pé do card para o nome ler (é uma máscara no .ai) */
/* o degradê do nome é uma máscara no .ai: começa em y 5083 (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) 66.26%,rgba(0,0,0,.92) 100%);
  clip-path:url(#recorte-card);
}
.autor__pena{position:absolute;left:27.43rem;top:6.5142rem;width:8.7692rem;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.0021rem;top:24.8381rem;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.8551rem;top:24.8869rem;line-height:0;
  font-weight:700;font-size:1.666rem;letter-spacing:.0025em;
}
.ctrl--aut-esq{left:3.2261rem;top:499.2052rem;width:5.015rem;height:5.2189rem;color:var(--laranja-2)}

/* ═══════════════════════════════════════════════════════════════ NÚMEROS ══ */
.num{position:absolute;top:0;width:0}
.num--1{left:44.487rem}
.num--2{left:79.21rem}
.num--3{left:113.694rem}
.num--4{left:149.233rem}
.num__mais{position:absolute;left:-3.0769rem;top:543.1015rem;width:6.1537rem;height:1.9525rem;color:var(--laranja)}
.num__v{
  position:absolute;left:0;top:553.2337rem;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:561.265rem;transform:translateX(-50%);text-align:center;
  font-weight:700;font-size:3.356rem;line-height:4.028rem;letter-spacing:.05em;color:var(--marrom-escuro);
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════ DIVISOR ══ */
.bg-laranja{left:0;top:601.1047rem;width:192rem;height:376.0083rem;background:var(--laranja)}
.divisor__caixa{left:63.4139rem;top:601.1047rem;width:65.1722rem;height:20.9417rem;background:var(--creme)}
.divisor__logo{left:69.006rem;top:608.7909rem;width:53.988rem;height:8.7055rem;color:#000}

/* ══════════════════════════════════════════════════════════════ MENSAGEM ══ */
.livro{
  position:absolute;top:746.0381rem;width:37.2384rem;height:55.10106rem;
  border-radius:1.791rem;overflow:hidden;
}
.livro:nth-child(1){left:-14.7411rem}
.livro:nth-child(2){left:31.4973rem}
.livro:nth-child(3){left:77.3808rem}
.livro:nth-child(4){left:122.7111rem}
.livro:nth-child(5){left:168.9495rem}
.livro img{width:100%;height:100%;object-fit:cover}
.ctrl--liv-esq{left:89.5734rem;top:805.7655rem;width:5.015rem;height:5.2189rem;color:var(--creme)}
.ctrl--liv-dir{left:97.4116rem;top:805.7509rem;width:5.015rem;height:5.2189rem;color:var(--creme)}

/* ════════════════════════════════════════════════════════════════ RODAPÉ ══ */
.publique{color:var(--laranja-escuro)}
.publique__l{
  position:absolute;left:30.698rem;line-height:0;white-space:nowrap;
  font-family:Nineties;font-weight:400;font-size:19.138rem;letter-spacing:.049em;
}
.publique__l b{font-weight:700}
.publique__l--1{top:838.5565rem}
.publique__l--2{top:861.2535rem}
.publique__l--3{top:884.5055rem}
.publique__l--4{top:907.2025rem}
.publique__l--5{top:927.9285rem}
.publique__l--6{top:948.0035rem}
.rodape__pena{position:absolute;left:45.4487rem;top:849.3041rem;width:101.1026rem;height:119.8589rem}
.rodape__logo{position:absolute;left:68.554rem;top:939.308rem;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.5951rem;top:950.9236rem;width:2.3562rem;height:2.3562rem}
.ico2--face{left:89.7143rem;top:950.9236rem;width:1.2619rem;height:2.3561rem}
.ico2--zap{left:94.7223rem;top:950.9311rem;width:2.554rem;height:2.3292rem}
.ico2--tiktok{left:100.5426rem;top:950.975rem;width:1.9994rem;height:2.2886rem}
.ico2--tube{left:105.9937rem;top:951.2111rem;width:2.4112rem;height:1.7811rem}
.barra{left:0;top:969.163rem;width:192rem;height:7.95rem;background:#000}
.barra__txt{
  position:absolute;left:78.608rem;top:3.7003rem;line-height:0;
  font-family:Grift;font-weight:500;font-size:1.819rem;letter-spacing:.0045em;color:var(--creme);
}
.barra__tri{position:absolute;left:96.3024rem;top:2.6035rem;width:17.0896rem;height:2.2234rem;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{transform:translateY(3.2rem) scale(.965)}
.mov .obra__capa.rev.on,.mov .livro.rev.on{transform:none}

/* ---- abertura da hero: logo → foto → título → parágrafo ---- */
.mov .topo__logo,.mov .nav__item,.mov .ico,
.mov .hero__t1,.mov .hero__t2,.mov .hero__p,.mov .hero__pill{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__t1,.mov.pronto .hero__t2,.mov.pronto .hero__p,.mov.pronto .hero__pill{
  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__t1{--i:.5s}
.mov .hero__t2{--i:.66s}
.mov .hero__p--1{--i:.82s}
.mov .hero__p--2{--i:.94s}
.mov .hero__pill{--i:.7s}

/* ---- 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 ══
   A prancheta 2 do .ai (720 × 10608,6) é um desenho PRÓPRIO, não o desktop
   reempacotado: a hero não tem título, as 4 fases invertem número e texto, o
   mockup 3D avança sobre o painel laranja. Por isso o mobile é um segundo
   palco exato, com as mesmas regras do desktop — muda só o divisor da escala
   (72 em vez de 192) e o conjunto de chapas (.vm em vez de .v).

   ⚠️ O corpo de texto segue os tamanhos do .ai: 23,67 px numa tela de 720.
   Num iPhone de 390 isso vira ~12,8 px. Se quiser 16 px, é o designer subir o
   tamanho na prancheta (ou pedir um piso só no corpo de texto).          */

.vm{display:none}

@media (max-width:1179px){
  /* acima de 720 px o desenho fica no tamanho nativo, centrado no creme */
  html{font-size:calc(min(100vw,720px)/72)}
  .v{display:none}
  .vm{display:block;position:absolute;overflow:visible;
      left:var(--l);top:var(--t);width:var(--w);height:var(--h)}
  .stage{width:72rem;height:1060.86rem}
  #sobre{top:92rem}
  #metodo{top:210rem}
  #publique{top:800rem}

  /* ordem de pintura da prancheta 2 (creme nº1 … laranja nº70 … texto) */
  .vm--creme-fases{z-index:1}
  .cam--hero picture,.cam--revista picture{z-index:2}
  .vm--painel-obra,.vm--painel-chamada{z-index:3}
  .revista__livro,.obra__capa{z-index:4}
  .vm--ondas,.vm--hero-fios{z-index:5}
  .vm--cartao-editora{z-index:6}
  .vm--bg-laranja{z-index:7}
  .autor{z-index:8}

  /* ------------------------------------------------------------- topo ---- */
  .topo__logo{left:20.9499rem;top:4.7086rem;width:30.1002rem;height:4.8537rem}
  .topo__nav{
    position:fixed;inset:0;z-index:61;background:#2b1108;
    display:grid;align-content:center;justify-items:center;gap:3.6rem;
    transform:translateY(-101%);transition:transform .45s cubic-bezier(.22,.61,.36,1);
  }
  .topo.aberto .topo__nav{transform:none;pointer-events:auto}
  .nav__item{position:relative;left:auto;top:auto;font-size:2.8rem;letter-spacing:.06em;line-height:1}
  .nav__item--1,.nav__item--2,.nav__item--3,.nav__item--4{left:auto}
  /* a arte não traz botão de menu nem ícones sociais no topo — o botão é
     acréscimo meu (são 4 links que precisam caber em algum lugar) e os
     sociais aparecem dentro da gaveta. */
  /* o botão fica FIXO para a navegação continuar ao alcance depois que a
     arte da hero sai da tela (a prancheta não prevê barra fixa). */
  .menu{
    display:grid;gap:.6rem;position:fixed;right:3.2rem;top:3.1rem;
    width:5.4rem;height:5.4rem;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:3.4rem;height:.3rem;background:var(--creme);
             border-radius:.2rem;transition:transform .3s,opacity .3s}
  .topo.aberto .menu span:nth-child(1){transform:translateY(1rem) rotate(45deg)}
  .topo.aberto .menu span:nth-child(2){opacity:0}
  .topo.aberto .menu span:nth-child(3){transform:translateY(-1rem) rotate(-45deg)}
  .topo__social{
    position:fixed;left:0;right:0;bottom:8rem;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.4rem}
  .ico{position:relative;left:auto;top:auto;display:block}
  .ico--face{width:2.2rem;height:4.11rem}
  .ico--insta{width:3.83rem;height:3.83rem}
  .ico--tube{width:4.23rem;height:2.96rem}
  .ico--zap{width:3.81rem;height:3.82rem}

  /* ------------------------------------------------------------- hero ---- */
  .cam--hero picture{left:0;top:0;width:72rem;height:133.816rem}
  /* a hero do mobile não tem título nem parágrafo: some da tela, mas fica
     para leitores de tela e busca. */
  .hero__h1,.hero__p{position:absolute!important;width:1px;height:1px;margin:-1px;
                     overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hero__pill{display:block;left:9.403rem;top:88.5742rem}

  /* ---------------------------------------------------------- editora ---- */
  .editora__h2{right:14.139rem;top:123.4253rem;line-height:8.5205rem}
  .editora__pill{left:36.144rem;top:162.3452rem}
  .editora__p{left:auto;right:14.139rem;top:169.2785rem;text-align:right;margin-right:-.01em}

  /* ------------------------------------------------------------ fases ---- */
  .fases__lead{right:14.239rem;top:221.2881rem}
  /* no mobile o número vai para a DIREITA e o texto para a esquerda dele */
  .fase__t{left:auto;right:27.073rem;text-align:right}
  .fase--1 .fase__t{top:249.1199rem}
  .fase--2 .fase__t{top:266.6069rem}
  .fase--3 .fase__t{top:283.9319rem}
  .fase--4 .fase__t{top:301.9139rem}
  .fase--1 .fase__n{left:54.205rem;top:253.6495rem}
  .fase--2 .fase__n{left:51.877rem;top:271.1365rem}
  .fase--3 .fase__n{left:51.769rem;top:288.4625rem}
  .fase--4 .fase__n{left:51.756rem;top:306.4445rem}

  /* ------------------------------------------------------------- obra ---- */
  .obra__capa{left:22.4055rem;top:338.5108rem;width:36.0064rem;height:48.9938rem;border-radius:2.777rem}
  .obra__aspas{left:9.3174rem;top:394.932rem;width:2.535rem;height:1.802rem;color:var(--creme)}
  .obra__pill{left:25.505rem;top:395.4749rem;font-size:1.368rem}
  .obra__h3{left:24.154rem;top:400.6654rem;font-size:3.324rem;line-height:3.988rem}
  .obra__p{left:24.038rem;top:409.7696rem;font-size:1.866rem;line-height:3.2rem}
  .obra__logo{left:24.0379rem;top:423.6147rem;width:18.4677rem;height:2.9779rem}

  /* ---------------------------------------------------------- revista ---- */
  .cam--revista picture{left:0;top:437.97rem;width:72rem;height:84.017rem}
  .cam--revista picture:last-of-type{left:0;top:466.283rem;width:72rem;height:79.809rem;z-index:4}
  .chamada__pena{display:none}
  .chamada__h2{left:17.813rem;top:541.9305rem}
  .chamada__p{left:17.509rem;top:578.958rem}
  .chamada__btn{left:17.4092rem;top:604.5402rem;width:37.9228rem;height:4.5588rem}
  .chamada__btn span{left:2.2998rem;top:2.2967rem}
  .ctrl--rev-esq{left:5.9827rem;top:501.1312rem;width:5.115rem;height:5.3189rem}
  .ctrl--rev-dir{left:60.9023rem;top:501.1165rem;width:5.115rem;height:5.3189rem}
  .pontos{left:28.3rem;top:466.9353rem;width:15.3999rem;height:2.575rem;z-index:9}

  /* ---------------------------------------------------------- autores ---- */
  /* o card é o MESMO desenho do desktop a 0,873 da escala */
  .autor{top:653.9213rem;width:31.1784rem;height:28.6937rem}
  .autor--1{left:13.6775rem}
  .autor--2{left:53.9966rem}
  .autor--3{left:94.3157rem}
  .autor--4{left:134.6348rem}
  .autor__foto{left:-4.3067rem;top:-12.3151rem;width:41.148rem;height:41.0089rem}
  .autor__foto img{left:.001rem;top:-7.159rem;width:41.148rem;height:61.7222rem}
  .autor--3 .autor__foto img{left:-1.747rem;top:-1.92rem;width:41.145rem;height:61.714rem}
  .autor--4 .autor__foto img{left:-6.7rem;top:-9.509rem;width:52.448rem;height:52.448rem}
  .autor__pena{left:23.9485rem;top:5.6878rem;width:7.6563rem;height:4.3297rem}
  .autor__nome em{left:6.113rem;top:21.6865rem;font-size:2.91rem}
  .autor__nome span{left:15.5889rem;top:21.7283rem;font-size:1.455rem}
  .ctrl--aut-esq{left:1.4684rem;top:664.5442rem;width:4.4039rem;height:4.582rem}

  /* ---------------------------------------------------------- números ---- */
  .num--1{left:20.4rem}
  .num--2{left:50.09rem}
  .num--3{left:19.53rem}
  .num--4{left:50.01rem}
  .num__v{font-size:14.979rem}
  .num__l{font-size:3.256rem;line-height:3.908rem}
  .num--1 .num__v,.num--2 .num__v{top:714.3386rem}
  .num--1 .num__l,.num--2 .num__l{top:722.13rem}
  .num--3 .num__v,.num--4 .num__v{top:745.9216rem}
  .num--3 .num__l,.num--4 .num__l{top:753.713rem}
  .num__mais{left:-2.9857rem;width:5.9704rem;height:1.8944rem}
  .num--2 .num__mais{top:704.5077rem}
  .num--3 .num__mais,.num--4 .num__mais{top:736.091rem}

  /* ---------------------------------------------------------- divisor ---- */
  .bg-laranja{display:none}
  .divisor__caixa{left:16.9227rem;top:774.3979rem;width:38.1546rem;height:13.1587rem}
  .divisor__logo{left:18.7133rem;top:779.2275rem;width:34.5735rem;height:5.4702rem}

  /* --------------------------------------------------------- mensagem ---- */
  .mensagem{left:5.8908rem;top:835.6234rem;width:59.006rem;height:20.4697rem}
  .livro{top:878.0056rem;width:28.071rem;height:41.5363rem;border-radius:1.791rem}
  .livro:nth-child(1){left:-12.415rem}
  .livro:nth-child(2){left:22.173rem}
  .livro:nth-child(3){left:56.344rem}
  .livro:nth-child(4){left:90.515rem}
  .livro:nth-child(5){left:124.686rem}
  .ctrl--liv-esq{left:32.1857rem;top:925.287rem;width:3.0268rem;height:3.1466rem}
  .ctrl--liv-dir{left:36.7875rem;top:925.2784rem;width:3.0268rem;height:3.1466rem}

  /* ----------------------------------------------------------- rodapé ---- */
  .publique__l{left:5.133rem;font-size:9.24rem}
  .publique__l--1{top:947.7444rem}
  .publique__l--2{top:958.7034rem}
  .publique__l--3{top:969.9304rem}
  .publique__l--4{top:980.8894rem}
  .publique__l--5{top:990.8964rem}
  .publique__l--6{top:1000.5894rem}
  .publique__l--7{top:1010.6894rem}
  .publique__l--8{top:1021.6484rem}
  .publique__l--9{top:1032.8754rem}
  .publique__l--10{top:1043.8344rem}
  .rodape__pena{left:-5.5934rem;top:955.6888rem;width:83.1953rem;height:98.6293rem}
  .rodape__logo{left:13.4198rem;top:1029.7515rem;width:45.1689rem;height:7.2834rem}
  .ico2--insta{left:25.7965rem;top:1039.3093rem;width:1.9388rem;height:1.9388rem}
  .ico2--face{left:30.8318rem;top:1039.3093rem;width:1.0384rem;height:1.9388rem}
  .ico2--zap{left:34.9529rem;top:1039.3154rem;width:2.1016rem;height:1.9166rem}
  .ico2--tiktok{left:39.7422rem;top:1039.3516rem;width:1.6453rem;height:1.8832rem}
  .ico2--tube{left:44.2278rem;top:1039.546rem;width:1.9842rem;height:1.4655rem}
  .barra{left:0;top:1054.3181rem;width:72rem;height:6.5419rem}
  .barra__txt{left:21.693rem;top:3.0448rem;font-size:1.497rem}
  .barra__tri{left:36.2531rem;top:2.1424rem;width:14.0627rem;height:1.8295rem}
}