/* ============================================================================
   Dream Books — reconstrução da prancheta "Site Dream Books.ai"
   (prancheta ÚNICA 1920 × 12070,8 — versão de 17/09/2026).

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

   Tracking: os valores em `em` vieram do próprio .ai (o Illustrator trabalha em
   1/1000 em) — medidos em `_extract/tracking.py`.

   Linha de base: com line-height explícito, baseline = topo + L/2 + (A+D)/2·F,
   com (A+D)/2 lido do hhea de cada fonte:
     GCSublime             0,292 · F
     Grift (todos)         0,300 · F
     Blauer Nue            0,340 · F
     Behind The Nineties   0,315 · F
   Por isso os `top` daqui já vêm calculados: top = baseline − L/2 − k·F.

   O `.tk` compensa o letter-spacing: o CSS acrescenta o espaço DEPOIS da última
   letra e o Illustrator não. `margin-right:calc(var(--tk)*-1)` devolve a caixa
   ao lugar — vale tanto para texto alinhado à direita quanto centralizado.

   O fundo da página é BRANCO: os cremes são chapas (#creme-topo, #creme-casa,
   #creme-meio, #creme-form) e, na mordida do círculo do formulário, o que
   aparece é o papel.
   ========================================================================== */

/* ------------------------------------------------------------------ fontes */
/* GCSublime e Grift ExtraLight Italic são os subsets embarcados no .ai (não
   existem em arquivo aqui). A Blauer Nue Bold também: a Semibold instalada
   diverge em 16 das 16 larguras usadas e desalinharia o botão da hero. */
@font-face{font-family:Sublime;src:url(../fonts/gcsublime.woff2) format("woff2");font-weight:400;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-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}
@font-face{font-family:Grift;src:url(../fonts/grift-semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:Grift;src:url(../fonts/grift-extrabold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:Grift;src:url(../fonts/grift-extralight-italic.woff2) format("woff2");font-weight:200;font-style:italic;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}

/* ------------------------------------------------------------------ tokens */
:root{
  --navy:#171162;         /* azul da marca (chapas, títulos, botão da hero)   */
  --navy-2:#181157;       /* o mesmo azul, 1/255 diferente, nos cartões       */
  --rosa:#fb017e;
  --rosa-2:#fc057f;
  --rosa-texto:#e83075;   /* números das etapas e os destaques do Trivium     */
  --roxo:#940f88;
  --ciano:#1dcbe5;
  --ciano-esc:#038dba;
  --creme:#fffaf1;        /* chapas de fundo e a marca sobre cor              */
  --creme-2:#fbecdd;      /* títulos sobre o cartão navy                      */
  --creme-3:#fdede0;      /* marca sobre a foto da faixa                      */
  --creme-4:#fcf8e5;      /* números dos cartões e o TRIVIUM do rodapé        */
  --marrom:#402020;       /* corpo dos cartões e rótulos do formulário        */
  --preto:#000;
  --arte-l:1920;
  --arte-a:12070.8;
}

/* -------------------------------------------------------------------- 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:#fff;
  color:var(--preto);
  font-family:Grift,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
  /* testado: SEM o antialiased a conferência piora (3,39 contra 3,07/255) — o
     traço fica mais grosso que o do render da arte. Fica. */
  -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}
b{font-weight:800}

.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:-12rem;z-index:99;background:var(--rosa);color:#fff;padding:.9rem 1.6rem;border-radius:.6rem;font-size:1.6rem;font-weight:600;transition:top .2s}
.pular:focus{top:1rem}
:focus-visible{outline:.3rem solid var(--rosa);outline-offset:.4rem;border-radius:.3rem}

/* ------------------------------------------------------------------- palco */
.stage{
  position:relative;
  width:192rem;
  height:1207.08rem;
  margin:0 auto;
  overflow:hidden;
  isolation:isolate;
}
/* Cada seção é uma camada do tamanho do palco; os filhos ficam nas coordenadas
   absolutas da arte. Nenhuma .cam tem z-index — assim o `--z` que o montar.py
   carimba em cada chapa (o índice de PINTURA no .ai) vale para a página
   inteira, e a ordem no DOM pode ser a ordem de LEITURA. */
.cam,main{position:absolute;inset:0}
/* 🚨 `inset:0` faz cada seção cobrir o PALCO INTEIRO — sem isto a última do DOM
   (ou o cabeçalho, que sobe de z-index) engole todo clique da página. Os filhos
   voltam a receber evento logo abaixo. */
.cam,main{pointer-events:none}
.cam>*{position:absolute;z-index:200;pointer-events:auto}
/* agrupadores: cobrem o palco só para os filhos herdarem as coordenadas da arte.
   🚨 sem pointer-events:none o último deles no DOM engole todo clique da página. */
.etapas,.quadros,.form,.vitrine,.topo__social,.rodape__social{
  position:absolute;inset:0;z-index:200;pointer-events:none;
}
.etapas>*,.quadros>*,.form>*,.vitrine>*,.topo__social>*,.rodape__social>*{pointer-events:auto}
.etapa,.quadro,.campo,.livro{position:static}
/* chapas e enfeites nunca pegam clique */
.v,.sym,.quadro__sombra,.quadro__forma,.quadro__canto,.campo__linha{pointer-events:none}
a,button,input,label{pointer-events:auto}

/* 🚨 Âncoras. Cada .cam cobre o PALCO INTEIRO (inset:0), então `#contato` na
   seção levaria a rolagem para y=0. Estes marcadores de 1 px de largura, sem
   pintura nenhuma, ficam no y de verdade de cada trecho e são eles que carregam
   o id (e que o espião da navegação observa). */
.ancora{position:absolute;left:0;width:1px;pointer-events:none;z-index:0}
.ancora--inicio  {top:0;height:129rem}
.ancora--sobre   {top:129rem;height:121rem}
.ancora--como    {top:250rem;height:190rem}
.ancora--caminhos{top:543.6rem;height:257rem}
.ancora--trivium {top:800.6rem;height:139.9rem}
.ancora--contato {top:940.5rem;height:266.6rem}

/* chapa em coordenadas da prancheta */
.v{
  position:absolute;
  left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  z-index:var(--z);
  display:block;
}
/* símbolo normalizado: quem posiciona e dimensiona é a regra do dono */
.sym{position:absolute;inset:0;width:100%;height:100%;display:block;fill:currentColor}
.tk{margin-right:calc(var(--tk) * -1)}

/* ═════════════════════════════════════════════════════════ CABEÇALHO ═══ */
.cam--topo{z-index:300}
.cam--topo>*{z-index:300}   /* acima das chapas da hero (z 18 a 40) */
.topo__logo{left:83.1069rem;top:3.0151rem;width:25.7948rem;height:3.5986rem;color:var(--creme)}
/* A arte NÃO tem menu (o designer entregou só marca + redes). Este é um
   acréscimo nosso, pedido junto com as âncoras: mora na faixa vazia à esquerda
   da marca, sobre o navy da hero. Ver README → "o que foi acrescentado". */
.topo__nav{
  left:18rem;top:3.4rem;height:2.8rem;
  display:flex;align-items:center;gap:2.6rem;
  font-family:Blauer;font-weight:500;font-size:1.5rem;letter-spacing:.02em;
  color:var(--creme);
}
.topo__nav a{opacity:.82;transition:opacity .25s,color .25s}
.topo__nav a:hover,.topo__nav a:focus-visible,.topo__nav a[aria-current]{opacity:1;color:var(--ciano)}
.topo__social{color:var(--creme)}
.topo__social .ico{display:block;transition:transform .25s,color .25s}
.topo__social .ico:hover{transform:translateY(-.3rem);color:var(--ciano)}
/* 🚨 A posição vem por VARIÁVEL, não por regra `:nth-child ... {left:}`. Assim o
   reset do celular (um seletor de classe só) consegue vencer — com o left/top
   escrito direto na regra do nth-child, a especificidade maior os arrastava
   para as coordenadas da prancheta dentro do layout fluido. Vale para todas as
   listas repetidas daqui: ícones, cartões, etapas, campos e capas. */
.topo__social li:nth-child(1) .ico{--x:150.3072rem;--y:3.9033rem;--w:1.3073rem;--h:2.4409rem}
.topo__social li:nth-child(2) .ico{--x:154.6845rem;--y:3.9865rem;--w:2.2744rem;--h:2.2744rem}
.topo__social li:nth-child(3) .ico{--x:159.5672rem;--y:4.2438rem;--w:2.5140rem;--h:1.7599rem}
.topo__social li:nth-child(4) .ico{--x:164.7208rem;--y:3.9904rem;--w:2.2610rem;--h:2.2666rem}
.topo__social .ico{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h)}

/* ══════════════════════════════════════════════════════════════ HERO ═══ */
.hero__blocos{position:absolute;inset:0;z-index:36}
.hero__marca{left:27.2870rem;top:25.5868rem;width:49.9487rem;height:35.2817rem;color:var(--creme);z-index:123}
.hero__h1{
  top:23.048rem;right:25.473rem;width:80rem;
  font-family:Sublime;font-weight:400;font-size:8rem;line-height:8rem;
  --tk:.472rem;letter-spacing:.059em;text-align:right;
  color:var(--creme-2);
}
.hero__p{
  top:66.472rem;right:25.218rem;width:60rem;
  font-family:Blauer;font-weight:500;font-size:2rem;line-height:3.5rem;
  --tk:.02rem;letter-spacing:.01em;text-align:right;
  color:var(--creme);
}
/* pílula vazada — o traçado é o do .ai, o texto vai centrado nele */
.hero__cta{
  left:123.6083rem;top:92.8649rem;width:43.4235rem;height:5.5524rem;
  display:grid;place-items:center;
  color:var(--navy);
  font-family:Blauer;font-weight:700;font-size:2rem;line-height:5.5524rem;
  letter-spacing:.003em;white-space:nowrap;
  transition:transform .25s;
}
.hero__cta .sym{fill:none;stroke:currentColor}
.hero__cta span{grid-area:1/1;position:relative}
.hero__cta::before{
  content:"";position:absolute;inset:0;border-radius:2.8rem;background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.hero__cta:hover{color:var(--creme)}
.hero__cta:hover::before{transform:scaleX(1)}
.hero__cta:active{transform:scale(.985)}

/* ═════════════════════════════════════════════════════════ A EDITORA ═══ */
.ideia__marca{left:136.1069rem;top:204.5610rem;width:23.1174rem;height:16.3301rem;color:var(--rosa);z-index:147}
.ideia__h2{
  top:145.017rem;left:18.339rem;width:70rem;
  font-family:Sublime;font-weight:400;font-size:9rem;line-height:9rem;
  letter-spacing:.059em;color:var(--creme);
}
.ideia__p{
  left:18.515rem;width:72rem;
  font-family:Blauer;font-weight:500;font-size:2rem;line-height:3.5rem;
  letter-spacing:.01em;color:var(--creme);
}
.ideia__p--1{top:196.171rem}
.ideia__p--2{top:217.171rem}

/* ═══════════════════════════════════════════════════ COMO FAZEMOS ═══ */
.uni__formas{position:absolute;inset:0;z-index:32}
.uni__foto{left:95.1400rem;top:259.6870rem;width:60.8700rem;height:79.4443rem;z-index:26}
.uni__b{left:41.4030rem;top:286.4415rem;width:4.6345rem;height:4.8rem;color:var(--creme-2);z-index:67}
.uni__h2{
  top:294.2213rem;left:41.403rem;width:50rem;
  font-family:Sublime;font-weight:400;font-size:6.1rem;line-height:6.899rem;
  letter-spacing:.059em;color:var(--creme-2);
}
.uni__p{
  top:348.0775rem;left:41.403rem;width:50rem;
  font-weight:600;font-size:2.7rem;line-height:3.299rem;letter-spacing:.04em;
}
.etapa__n{position:absolute;left:var(--nx);top:var(--ny);width:var(--nw);height:var(--nh);color:var(--rosa-texto)}
.etapa--1{--nx:26.5727rem;--ny:376.8443rem;--nw:3.3440rem;--nh:10.6561rem;--tt:379.7234rem;--ts:384.3655rem}
.etapa--2{--nx:24.7964rem;--ny:394.9642rem;--nw:5.2320rem;--nh:10.7520rem;--tt:394.6394rem;--ts:399.2815rem}
.etapa--3{--nx:24.8767rem;--ny:412.1778rem;--nw:5.0880rem;--nh:10.8639rem;--tt:411.9654rem;--ts:416.6075rem}
.etapa__t{
  position:absolute;left:41.403rem;top:var(--tt);width:60rem;
  font-family:Sublime;font-weight:400;font-size:4.8rem;line-height:4.8rem;
  letter-spacing:.059em;
}
.etapa__s{
  position:absolute;left:41.403rem;top:var(--ts);width:60rem;
  font-weight:600;font-size:2.7rem;line-height:3.299rem;letter-spacing:.04em;
}

/* ═══════════════════════════════════════════════════════════ FAIXA ═══ */
.cam--faixa picture{position:absolute;inset:0;z-index:1}
.faixa__foto{position:absolute;left:44.8150rem;top:425.4240rem;width:146.8850rem;height:148.8720rem;object-fit:cover}
.faixa__marca{left:112.7300rem;top:511.1000rem;width:23.1200rem;height:16.3300rem;color:var(--creme-3);z-index:135}

/* ════════════════════════════════════════════════════════ CAMINHOS ═══ */
.casa__h2{
  top:568.008rem;left:40.794rem;width:70rem;
  font-family:Sublime;font-weight:400;font-size:9rem;line-height:9rem;
  letter-spacing:.059em;color:var(--navy);
}
.casa__p{
  top:616.2145rem;left:40.817rem;width:50rem;
  font-weight:600;font-size:2.7rem;line-height:3.299rem;letter-spacing:.04em;
}
/* vitrine de capas — no .ai são 5 cópias da mesma peça, com o passo irregular
   (462,4 / 458,8 / 453,3 / 462,4 — folga de 90 pt em duas e 86/81 nas outras).
   As posições aqui são as EXATAS da arte; quem uniformiza é o carrossel, que
   desloca todas juntas e recoloca no outro extremo — assim a folga que o
   designer desenhou anda junto em vez de virar um solavanco. */
.vitrine{z-index:21}   /* quem recorta as capas que passeiam é o overflow do .stage */
.livro{position:absolute;left:var(--x);top:642.8603rem;width:37.2384rem;height:55.1009rem;
       border-radius:1.79rem;overflow:hidden}
.livro__fita{position:absolute;inset:0;display:block}
.livro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
           transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .4s}

.livro:nth-child(1){--x:-14.4830rem}
.livro:nth-child(2){--x:31.7553rem}
.livro:nth-child(3){--x:77.6389rem}
.livro:nth-child(4){--x:122.9692rem}
.livro:nth-child(5){--x:169.2076rem}
.ctrl{z-index:210;color:var(--navy-2);transition:transform .25s,opacity .25s;opacity:.85}
.ctrl:hover{opacity:1}
.ctrl[disabled]{opacity:.45;cursor:default}
.ctrl[disabled]:hover{transform:none}
.ctrl--esq{left:89.6234rem;top:703.8622rem;width:4.9150rem;height:5.1189rem}
.ctrl--dir{left:97.4616rem;top:703.8475rem;width:4.9150rem;height:5.1189rem}
.ctrl--esq:hover{transform:translateX(-.4rem)}
.ctrl--dir:hover{transform:translateX(.4rem)}
.ctrl .sym{fill:none;stroke:currentColor}

/* cartões dos caminhos editoriais */
.quadro__sombra{position:absolute;left:var(--sombra);top:714.9240rem;width:46.8rem;height:86.4rem;
  background:url(../img/card-sombra.webp) center/100% 100% no-repeat}
.quadro__forma{position:absolute;left:var(--forma);top:718.0171rem;width:34.6843rem;height:74.2955rem;color:var(--creme)}
.quadro--4 .quadro__forma{color:var(--navy-2)}
.quadro__canto{position:absolute;left:var(--canto);top:786.4959rem;width:5.8166rem;height:5.8167rem;color:var(--navy-2)}
.quadro__n{
  position:absolute;left:var(--num);top:789.5597rem;
  font-family:Nineties;font-weight:700;font-size:3.166rem;line-height:0;
  color:var(--creme-4);
}
.quadro__t{
  position:absolute;left:var(--tit);top:732.0094rem;width:34rem;
  font-family:Sublime;font-weight:400;font-size:4.8rem;line-height:4.8rem;
  letter-spacing:.059em;
}
.quadro__t--4l{top:727.2094rem}     /* o cartão 1 tem 4 linhas e sobe uma */
.quadro__p{
  position:absolute;left:var(--txt);top:751.03rem;width:32rem;
  font-weight:600;font-size:2.2rem;line-height:3.466rem;letter-spacing:.01em;
  color:var(--marrom);
}
.quadro--4 .quadro__t,.quadro--4 .quadro__p{color:var(--creme)}
.quadro--1{--sombra:13.80rem;--forma:16.8843rem;--canto:45.7519rem;--num:48.042rem;--tit:21.011rem;--txt:21.011rem}
.quadro--2{--sombra:57.70rem;--forma:60.7308rem;--canto:89.5985rem;--num:91.556rem;--tit:65.647rem;--txt:65.647rem}
.quadro--3{--sombra:97.50rem;--forma:100.5811rem;--canto:129.4488rem;--num:131.406rem;--tit:105.459rem;--txt:104.708rem}
.quadro--4{--forma:140.4314rem;--num:171.246rem;--tit:145.271rem;--txt:145.103rem}

/* ════════════════════════════════════════════════════ GRUPO TRIVIUM ═══ */
.trivium__h2{
  top:812.0814rem;left:0;right:0;
  font-family:Sublime;font-weight:400;font-size:16.8rem;line-height:15.826rem;
  --tk:1.68rem;letter-spacing:.1em;text-align:center;
  color:var(--navy-2);
}
.trivium__texto{left:95.135rem;top:867.6615rem;width:70rem;
  font-weight:600;font-size:2.7rem;line-height:3.599rem;letter-spacing:.04em}
.trivium__texto p+p{margin-top:3.602rem}
.rosa{color:var(--rosa-texto)}

/* ═════════════════════════════════════════════════════════ CONTATO ═══ */
.form__foto{left:49.70rem;top:976.22rem;width:71.79rem;height:89.20rem;z-index:43}
.form__h2{
  top:972.4922rem;left:102.325rem;width:40rem;
  font-family:Sublime;font-weight:400;font-size:5.9rem;line-height:5.9rem;
  letter-spacing:.059em;color:#fff;
}
.campo__linha{position:absolute;left:10.5011rem;top:var(--linha);width:140.63rem;height:.1rem;color:var(--navy)}
.campo__linha .sym{stroke:currentColor;fill:none}
.campo--1{--linha:1079.1413rem;--rot:1075.879rem;--cx:1074.7rem}
.campo--2{--linha:1090.1413rem;--rot:1087.323rem;--cx:1085.7rem}
.campo--3{--linha:1102.1413rem;--rot:1099.537rem;--cx:1097.7rem}
/* O rótulo é o texto da arte; vira placeholder de verdade e sobe quando o
   campo tem conteúdo. */
.campo__l{
  position:absolute;left:70.164rem;top:var(--rot);
  font-family:Blauer;font-weight:500;font-size:2.8rem;line-height:0;
  color:var(--marrom);pointer-events:none;
  transform-origin:left center;transition:transform .25s,opacity .25s,color .25s;
}
.campo__i{
  position:absolute;left:10.5011rem;top:var(--cx);width:140.63rem;height:4.4rem;
  background:none;border:0;padding:0 .4rem;
  font-family:Blauer;font-weight:500;font-size:2.8rem;color:var(--navy);
}
.campo__i:focus{outline:0}
.campo__i:focus~.campo__linha,.campo--ok .campo__linha{color:var(--rosa)}
.campo__i:focus~.campo__l,.campo--ok .campo__l{
  transform:translate(-59.66rem,-3.3rem) scale(.62);color:var(--rosa);
}
.campo--erro .campo__linha{color:var(--rosa)}
.form__aviso{
  position:absolute;left:10.5011rem;top:1110rem;width:140.63rem;
  font-family:Blauer;font-weight:500;font-size:1.8rem;text-align:center;color:var(--ciano);
  min-height:2.4rem;
}
/* 🚨 é NETO do .cam (mora dentro do <form>), então `.cam>*{position:absolute}`
   não o alcança — sem isto ele nasce estático e vai parar no topo da página. */
.form__cta{
  position:absolute;
  left:66.4807rem;top:1120.9354rem;width:59.0386rem;height:5.3224rem;
  display:grid;place-items:center;color:#fff;
  font-family:Blauer;font-weight:500;font-size:2.108rem;line-height:5.3224rem;
  --tk:.4215rem;letter-spacing:.2em;white-space:nowrap;
  transition:transform .25s,color .25s;
}
.form__cta .sym{fill:none;stroke:currentColor}
.form__cta span{grid-area:1/1;position:relative;margin-right:-.4215rem}
.form__cta::before{
  content:"";position:absolute;inset:0;border-radius:2.7rem;background:var(--rosa);
  transform:scale(.6);opacity:0;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s;
}
.form__cta:hover::before{transform:scale(1);opacity:1}
.form__cta:active{transform:scale(.985)}

/* ══════════════════════════════════════════════════════════ RODAPÉ ═══ */
.rodape__marca{left:66.0752rem;top:1146.9876rem;width:59.7853rem;height:20.0713rem;color:var(--creme);z-index:111}
.rodape__slogan{
  top:1172.5258rem;left:0;right:0;
  font-family:Grift;font-weight:200;font-style:italic;font-size:4.194rem;line-height:0;
  --tk:.2315rem;letter-spacing:.0552em;text-align:center;color:#fff;
}
.rodape__social{color:var(--creme)}
.rodape__social .ico2{position:absolute;display:block;transition:transform .25s,color .25s;
  left:var(--x);top:var(--y);width:var(--w);height:var(--h)}
.rodape__social .ico2:hover{transform:translateY(-.3rem);color:var(--ciano)}
.rodape__social li:nth-child(1) .ico2{--x:83.6003rem;--y:1180.8906rem;--w:2.3562rem;--h:2.3562rem}
.rodape__social li:nth-child(2) .ico2{--x:89.7195rem;--y:1180.8906rem;--w:1.2619rem;--h:2.3561rem}
.rodape__social li:nth-child(3) .ico2{--x:94.7275rem;--y:1180.8980rem;--w:2.5540rem;--h:2.3292rem}
.rodape__social li:nth-child(4) .ico2{--x:100.5478rem;--y:1180.9420rem;--w:1.9994rem;--h:2.2886rem}
.rodape__social li:nth-child(5) .ico2{--x:105.9988rem;--y:1181.1781rem;--w:2.4113rem;--h:1.7811rem}
.rodape__trivium{left:0;top:0;width:192rem;height:1207.08rem;z-index:210;pointer-events:none}
.rodape__empresa{
  position:absolute;left:78.613rem;top:1202.8303rem;pointer-events:auto;
  font-weight:500;font-size:1.819rem;line-height:0;letter-spacing:.0045em;color:var(--creme-4);
}
.rodape__logo{
  position:absolute;left:96.3076rem;top:1201.7335rem;width:17.0896rem;height:2.2234rem;
  pointer-events:auto;color:var(--creme-4);
}

/* ═══════════════════════════════════════════════════════ ANIMAÇÕES ═══ */
/* A classe `.mov` é ligada pelo JS. Sem JS, sem prefers-reduced-motion e com
   `?estatico=1` a página fica parada e tudo aparece — é assim que o
   `conferir.py` compara com o render da arte. */
.mov .rev{
  opacity:0;
  transform:translateY(3.2rem);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0s);
  will-change:opacity,transform;
}
.mov .rev.on{opacity:1;transform:none}
.mov .quadro.rev{transform:translateY(4.5rem) scale(.97)}
.mov .quadro.rev.on{transform:none}
.mov .hero__marca.rev{transform:scale(.94)}
.mov .hero__marca.rev.on{transform:none}
.mov .uni__foto.rev,.mov .form__foto.rev{transform:translateY(3.2rem) scale(.97)}
.mov .uni__foto.rev.on,.mov .form__foto.rev.on{transform:none}
.mov .v--marca-b,.mov .v--casa-b,.mov .v--balao-rosa{
  opacity:0;transform:scale(.9);transform-origin:center;
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
.mov .v--marca-b.on,.mov .v--casa-b.on,.mov .v--balao-rosa.on{opacity:1;transform:none}

/* `?estatico=1&faixa=Y`: some com o que NÃO está na prancheta, para o
   conferir.py comparar maçã com maçã. */
.conferindo .topo__nav,.conferindo .pular{display:none}
.conferindo .stage{position:relative}

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

/* ════════════════════════════════════════════════════════ FLUIDO ═══ */
/* Até 1179 px a página sai do posicionamento absoluto e volta a FLUIR numa
   coluna só. 🚨 Todo filho que no desktop é `position:absolute` precisa voltar
   a `static` — inclusive os filhos dos filhos —, senão o bloco colapsa e o
   texto vaza. As chapas viram blocos de cor (.v some) e os `<br>` da arte são
   desligados, por isso todo `<br>` de texto corrido leva um espaço antes. */
@media (max-width:1179px){
  html{font-size:calc(var(--vw,100vw)/72)}   /* 1rem = 10 px num palco de 720 */
  .stage{width:72rem;height:auto;overflow:visible}
  .cam,main,.cam>*,.etapas,.quadros,.form,.vitrine,.topo__social,.rodape__social,
  .etapa>*,.quadro>*,.campo>*,.livro,.rodape__trivium>*,.ancora,
  .topo__social .ico,.rodape__social .ico2,.faixa__foto,.form__aviso,.form__cta,
  .rodape__empresa,.rodape__logo{
    position:static;inset:auto;left:auto;top:auto;right:auto;bottom:auto;
    width:auto;height:auto;transform:none;
  }
  /* as variáveis de posição da prancheta não valem no fluido */
  .quadro,.etapa,.campo,.livro,.topo__social .ico,.rodape__social .ico2{
    --x:auto;--y:auto;--w:auto;--h:auto;
    --sombra:auto;--forma:auto;--canto:auto;--num:auto;--tit:auto;--txt:auto;
    --nx:auto;--ny:auto;--nw:auto;--nh:auto;--tt:auto;--ts:auto;
    --linha:auto;--rot:auto;--cx:auto;
  }
  .cam{padding:0 3rem;position:relative}
  .v,.faixa__marca,.quadro__sombra,.quadro__canto,.campo__linha{display:none}
  /* a âncora vira um marcador de altura zero no início da seção */
  .ancora{display:block;height:0}
  .tk{margin-right:0}
  br{display:none}
  main{display:block}

  /* --- cabeçalho --- */
  .cam--topo{background:var(--navy);padding:2.4rem 3rem 2rem;display:flex;
             flex-direction:column;align-items:center;gap:1.8rem}
  .topo__logo{display:block;width:26rem;height:3.63rem;position:relative}
  .topo__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 2.2rem;font-size:1.9rem}
  .topo__social{display:flex;gap:3rem;align-items:center;justify-content:center}
  .topo__social li{display:block}
  .topo__social .ico{position:relative;display:block;width:2.8rem;height:2.8rem}
  .topo__social li:nth-child(1) .ico{width:1.6rem}
  .topo__social .sym{position:relative}

  /* --- hero --- */
  .cam--hero{background:var(--navy);padding:0 0 5rem;text-align:center}
  /* 🚨 z-index:0: no desktop as chapas herdam o índice de PINTURA do .ai (36) e
     ficariam por cima da marca que vai centrada nelas. */
  .hero__blocos{display:block;height:34rem;position:relative;overflow:hidden;z-index:0;
    background:linear-gradient(135deg,var(--roxo) 0 38%,var(--ciano-esc) 38% 100%)}
  .hero__blocos::before{content:"";position:absolute;right:-8rem;top:-10rem;
    width:44rem;height:44rem;border-radius:50%;background:var(--rosa)}
  .hero__blocos::after{content:"";position:absolute;left:4rem;top:9rem;
    width:30rem;height:22rem;border-radius:4rem;background:var(--ciano)}
  /* 🚨 centrada por margin, não por translate: `.mov .hero__marca.rev.on`
     define `transform:none` com especificidade maior e apagaria o translate. */
  .hero__marca{position:absolute;left:0;right:0;margin:0 auto;top:5rem;
    width:34rem;height:24rem;z-index:5;color:var(--creme)}
  .hero__marca .sym{position:absolute}
  .hero__h1{font-size:5.4rem;line-height:5.6rem;text-align:center;padding:4.4rem 3rem 0;width:auto}
  .hero__p{font-size:2.4rem;line-height:3.6rem;text-align:center;padding:2.6rem 3rem 0;width:auto}
  .hero__cta{display:inline-grid;margin:3.4rem auto 0;width:auto;min-width:46rem;height:6.4rem;
    padding:0 3rem;font-size:2.2rem;line-height:6.4rem;white-space:normal;
    background:var(--creme);border-radius:3.2rem;color:var(--navy)}
  .hero__cta .sym{display:none}

  /* --- a editora --- */
  .cam--ideia{background:var(--roxo);padding:6rem 3rem 6.5rem;color:var(--creme)}
  .ideia__h2{font-size:5.2rem;line-height:5.6rem;width:auto}
  .ideia__p{font-size:2.4rem;line-height:3.7rem;width:auto;margin-top:3rem}
  .ideia__marca{position:relative;display:block;width:22rem;height:15.6rem;
    margin:5rem auto 0;color:var(--creme)}
  .ideia__marca .sym{position:absolute}

  /* --- como fazemos --- */
  .cam--uni{background:var(--creme);padding:6rem 3rem 6rem}
  .uni__formas{display:none}
  .uni__foto{display:block;width:100%;height:auto;border-radius:3.6rem 12rem 3.6rem 3.6rem;margin-bottom:4rem}
  .uni__b{display:none}
  .uni__h2{font-size:4.6rem;line-height:5.2rem;color:var(--navy);width:auto}
  .uni__p{font-size:2.4rem;line-height:3.4rem;margin-top:3rem;width:auto}
  .etapas{display:flex;flex-direction:column;gap:3.4rem;margin-top:5rem}
  .etapa{display:grid;grid-template-columns:7rem 1fr;gap:0 2rem;align-items:start}
  .etapa__n{display:block;grid-row:span 2;width:5.4rem;height:auto;aspect-ratio:1/2.6;
    color:var(--rosa-texto);position:relative}
  .etapa__n .sym{position:absolute}
  .etapa__t{font-size:3.4rem;line-height:3.6rem;width:auto}
  .etapa__s{font-size:2.2rem;line-height:3rem;margin-top:.6rem;width:auto}

  /* --- faixa --- */
  .cam--faixa{padding:0}
  .cam--faixa picture{display:block;position:relative}
  /* o recorte de celular (m-banda) é vertical; 27% é a altura do rosto dela
     dentro dele — com 50% a foto corta no queixo. */
  .faixa__foto{position:relative;width:100%;height:60rem;object-fit:cover;object-position:50% 27%}

  /* --- caminhos --- */
  .cam--casa{background:var(--creme);padding:6rem 3rem 6rem}
  .casa__h2{font-size:5rem;line-height:5.4rem;width:auto}
  .casa__p{font-size:2.4rem;line-height:3.4rem;margin-top:2.6rem;width:auto}
  .vitrine{display:block;position:relative;margin:4.5rem -3rem 0;overflow:hidden;clip-path:none}
  .vitrine__trilho{display:flex;gap:2.4rem;padding:0 3rem;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .vitrine__trilho::-webkit-scrollbar{display:none}
  .livro{position:relative;flex:0 0 26rem;height:38.5rem;overflow:hidden;
    border-radius:1.4rem;scroll-snap-align:center}
  .livro__fita{position:absolute;inset:0}
  .livro img{position:absolute;inset:0;width:100%;height:100%}
  .ctrl{display:none}
  .quadros{display:flex;flex-direction:column;gap:3rem;margin-top:5rem}
  .quadro{position:relative;background:var(--creme);border-radius:3.6rem;
    padding:4rem 3.4rem 5.6rem;box-shadow:0 1.2rem 3.4rem rgba(23,17,98,.12)}
  .quadro--4{background:var(--navy-2)}
  .quadro__forma{display:none}
  .quadro__t{font-size:3.6rem;line-height:4rem;width:auto}
  .quadro__p{font-size:2.2rem;line-height:3.2rem;margin-top:2rem;width:auto}
  .quadro__n{display:block;position:absolute;right:0;bottom:0;
    width:5.6rem;height:5.6rem;line-height:5.6rem;text-align:center;
    font-size:2.8rem;background:var(--navy-2);color:var(--creme-4);
    border-radius:3.6rem 0 3.6rem 0}
  .quadro--4 .quadro__n{background:transparent}

  /* --- grupo trivium --- */
  .cam--trivium{background:var(--creme);padding:5rem 3rem 6rem}
  .trivium__h2{font-size:5.6rem;line-height:5.8rem;text-align:center;width:auto}
  .trivium__texto{font-size:2.3rem;line-height:3.2rem;margin-top:4rem;width:auto}
  .trivium__texto p+p{margin-top:2.6rem}

  /* --- contato --- */
  .cam--form{background:var(--navy);padding:0 0 6rem}
  .cam--form::before{content:"";display:block;height:9rem;background:var(--creme);
    border-radius:0 0 50% 50%/0 0 100% 100%}
  .form__foto{display:block;width:40rem;margin:-4rem auto 0;height:auto;position:relative;z-index:2}
  .form__h2{font-size:4.6rem;line-height:5rem;text-align:center;padding:0 3rem;width:auto;
    margin-top:-2rem;position:relative;z-index:3}
  .form{display:block;padding:4.5rem 3rem 0}
  .campo{position:relative;margin-bottom:4.6rem}
  .campo__l{position:absolute;left:.4rem;top:3rem;line-height:0;font-size:2.4rem;color:#cfcbe6}
  .campo__i{position:relative;width:100%;height:6rem;font-size:2.4rem;color:#fff;
    border-bottom:.1rem solid rgba(255,255,255,.55)}
  .campo__i:focus~.campo__l,.campo--ok .campo__l{transform:translateY(-3rem) scale(.72);color:var(--rosa)}
  .campo__i:focus{border-bottom-color:var(--rosa)}
  .form__aviso{position:relative;width:auto;font-size:1.9rem;margin-bottom:2rem}
  .form__cta{display:grid;width:100%;height:6.4rem;line-height:6.4rem;font-size:1.9rem;
    letter-spacing:.12em;border:.1rem solid #fff;border-radius:3.2rem;white-space:normal}
  .form__cta .sym{display:none}
  .form__cta span{margin-right:0}

  /* --- rodapé --- */
  .cam--rodape{background:var(--navy);padding:2rem 3rem 0;text-align:center}
  .rodape__marca{display:block;position:relative;width:46rem;height:15.4rem;margin:0 auto;color:var(--creme)}
  .rodape__marca .sym{position:absolute}
  .rodape__slogan{font-size:2.8rem;line-height:1;margin-top:1rem;text-align:center;width:auto}
  .rodape__social{display:flex;gap:3.4rem;justify-content:center;margin-top:3.4rem}
  .rodape__social li{display:block}
  .rodape__social .ico2{position:relative;display:block;width:2.8rem;height:2.8rem}
  .rodape__social li:nth-child(2) .ico2{width:1.5rem}
  .rodape__social .sym{position:relative}
  .rodape__trivium{display:flex;align-items:center;justify-content:center;gap:1rem;
    margin:4rem -3rem 0;padding:2rem;background:var(--navy);
    border-top:.1rem solid rgba(255,255,255,.12);pointer-events:auto}
  .rodape__empresa{position:relative;font-size:1.9rem;line-height:1}
  .rodape__logo{position:relative;display:block;width:17.1rem;height:2.23rem}
  .rodape__logo .sym{position:absolute}
}