@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/archivo-latin.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:800 900;font-display:swap;src:url(assets/fonts/bodoni-italic-latin.woff2) format("woff2")}
:root{
  --canvas:#0a0806;--surface:#16110b;--ink:#f3ead8;--soft:#b8ac95;--ac:#e9b93a;--ac-ink:#14100a;--line:#3a2f19;
  --disp:"Bodoni Moda","Bodoni 72","Didot","Playfair Display",Georgia,"Times New Roman",serif;--txt:"Archivo","Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --g:clamp(16px,5vw,64px);--ease:cubic-bezier(.23,1,.32,1);--Z:2400;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{background:var(--canvas)}
body{background:var(--canvas);color:var(--ink);font:400 clamp(15px,1.05vw + 9px,18px)/1.6 var(--txt);overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--ac);color:var(--ac-ink)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
a{color:var(--ac);text-underline-offset:.2em}
html{scrollbar-color:var(--ac) var(--canvas)}

/* chrome */
.pular{position:fixed;left:8px;top:-60px;z-index:50;background:var(--ac);color:var(--ac-ink);padding:8px 14px;border-radius:8px}
.pular:focus{top:8px}
.marca{position:fixed;z-index:30;top:14px;left:var(--g);display:flex;gap:10px;align-items:center;font:800 .8rem var(--txt);letter-spacing:.16em;text-transform:uppercase}
.marca img{width:34px;height:34px;border-radius:8px}
.topo-cta{position:fixed;z-index:30;top:12px;right:var(--g);padding:9px 16px;border-radius:99px;background:var(--ac);color:var(--ac-ink);font:800 .78rem var(--txt);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:transform .15s var(--ease)}
.topo-cta:active{transform:scale(.97)}
.mapa{position:fixed;z-index:30;left:14px;top:50%;transform:translateY(-50%)}
.mapa ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.mapa button{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--soft);font:600 .72rem var(--txt);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:6px 4px;min-height:28px}
.mapa i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ac);flex:none;transition:background .2s var(--ease),transform .2s var(--ease)}
.mapa b{font-weight:600;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s var(--ease)}
.mapa button[aria-current=true] i{background:var(--ac);transform:scale(1.35)}
.mapa button[aria-current=true] b,.mapa button:focus-visible b{max-width:140px;color:var(--ink)}
@media(hover:hover) and (pointer:fine){.mapa button:hover b{max-width:140px;color:var(--ink)}}

/* palco único */
.stage{position:fixed;inset:0;overflow:hidden;perspective:900px;perspective-origin:50% 44%;background:radial-gradient(120% 90% at 50% 40%,#17110a 0,var(--canvas) 70%)}
#poeira{position:absolute;inset:0;width:100%;height:100%}
.piso{position:absolute;left:-30%;right:-30%;bottom:-6%;height:50%;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,#e9b93a30 0 1px,transparent 1px 90px),repeating-linear-gradient(0deg,#e9b93a30 0 1px,transparent 1px 90px);
  -webkit-mask-image:linear-gradient(to top,#000 0,transparent 88%);mask-image:linear-gradient(to top,#000 0,transparent 88%)}
.world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.grp{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;transform:translateZ(calc(var(--leg) * var(--Z) * -1px))}
.o{position:absolute;left:50%;top:50%;pointer-events:none;
  transform:translate3d(calc(var(--x,0) * 1vw),calc(var(--y,0) * var(--u,1vh)),calc(var(--z,0) * 1px)) translate(-50%,-50%) rotate(calc(var(--r,0) * 1deg))}
.gigante{font:italic 900 calc(var(--s) * 1vw)/.82 var(--disp);letter-spacing:-.035em;white-space:nowrap;user-select:none}
.cheio{color:var(--ink)}.cheio.dim{color:#2a2113}
.tracado{color:transparent;-webkit-text-stroke:1.5px var(--ac)}
.letra{font:italic 900 calc(var(--s) * 1vw)/.8 var(--disp);color:#e9b93a1c}
.fio{width:1px;height:calc(var(--h) * var(--u,1vh));background:linear-gradient(transparent,var(--ac),transparent)}
.fio.h{width:calc(var(--w) * 1vw);height:1px;background:linear-gradient(90deg,transparent,var(--ac),transparent)}
.plano{width:calc(var(--w) * 1vw);height:auto;border-radius:6%;box-shadow:0 24px 48px #000a}
.nozinho{width:calc(var(--w) * 1vw);height:auto;color:var(--ac);overflow:visible}
.selo-wrap{position:relative;display:inline-block;margin:clamp(40px,10vh,90px) 0 clamp(40px,10vh,90px)}
.selo{position:absolute;left:50%;top:50%;width:200%;height:auto;color:var(--ac);transform:translate(-50%,-50%) rotate(var(--rot,0deg));pointer-events:none}

/* anel de capas 3D */
.anel{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.cc{--cw:clamp(190px,min(22vw,36vh),270px);position:absolute;left:calc(var(--cw) / -2);top:calc(var(--cw) * -.665);width:var(--cw);height:calc(var(--cw) * 1.33);padding:0;border:1px solid var(--ac);background:var(--surface);color:var(--ink);
  text-align:left;font:inherit;cursor:pointer;overflow:hidden;backface-visibility:hidden;box-shadow:0 24px 50px #000b;display:block;pointer-events:auto}
.cc{opacity:var(--ro,1)}
.cc img,.cc .sem{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.cc .sem{background:linear-gradient(150deg,#241b0b,#0e0a05)}
.cc .mast{position:absolute;top:0;left:0;right:0;padding:8px 10px;font:800 .62rem var(--txt);letter-spacing:.2em;text-transform:uppercase;color:var(--ac);background:linear-gradient(#0a0806e6,transparent)}
.cc .leg-txt{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 12px;background:linear-gradient(transparent,#0a0806f2 38%)}
.cc h3{font:italic 800 1.35rem/1 var(--disp)}
.cc p{margin-top:6px;font-size:.78rem;line-height:1.35;color:var(--soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.capa-vazia{--cw:clamp(190px,min(22vw,36vh),270px);width:var(--cw);height:calc(var(--cw) * 1.33);border:2px dashed var(--ac);display:grid;place-content:center;text-align:center;padding:18px;gap:10px;font:italic 800 1.4rem/1.1 var(--disp)}
.capa-vazia span{font:600 .8rem var(--txt);color:var(--soft)}


/* cópia: camada fixa dentro do mundo */
.copy{position:absolute;inset:0;pointer-events:none}
.leg{position:absolute;inset:0;display:flex;padding:clamp(64px,11vh,110px) var(--g) clamp(64px,9vh,96px) clamp(44px,calc(var(--g) + 36px),110px);opacity:0;will-change:opacity,transform}
.leg .it{width:100%}
.leg:not([inert]) :is(input,button,a,.it a){pointer-events:auto}
h1,h2{font-family:var(--disp);font-style:italic;font-weight:800;line-height:.98;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(2rem,5.2vw,4.4rem)}
.kick{font:800 .8rem var(--txt);letter-spacing:.24em;text-transform:uppercase;color:var(--ac);margin-bottom:14px}
.lide{color:var(--soft);max-width:46ch;font-size:clamp(1rem,1.3vw,1.25rem)}
.l0{align-items:flex-end}
.l0 h1{font-size:clamp(2.1rem,5.4vw,5rem);max-width:15ch}
.l0 .lide{margin-top:16px}
.l1{justify-content:flex-end;align-items:center}
.l1 .it{max-width:min(780px,100%)}
.l1 h2{margin-bottom:20px}
.cols{columns:2 260px;column-gap:32px;color:var(--ink);font-size:clamp(.98rem,1.15vw,1.12rem)}
.capitular::first-letter{float:left;font:italic 900 4.6em/.8 var(--disp);color:var(--ac);padding:.05em .1em 0 0}
.assina{margin-top:18px;font:800 .75rem var(--txt);letter-spacing:.2em;text-transform:uppercase;color:var(--ac)}
.l2{align-items:center}
.l2 h2{margin-bottom:24px}
.dados{display:grid;grid-template-columns:repeat(12,1fr);gap:18px 24px;max-width:1100px}
.dados>div{grid-column:span 6;border-top:1px solid var(--ac);padding-top:10px}
.dados>div:first-child{grid-column:span 12}
.dados dt{font:800 .72rem var(--txt);letter-spacing:.2em;text-transform:uppercase;color:var(--ac)}
.dados dd{font:italic 900 clamp(2rem,4.6vw,4.2rem)/.95 var(--disp)}
.dados>div:first-child dd{font-size:clamp(4rem,15vw,13rem)}
.l3 .it{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.l3 .lide{align-self:center;text-align:center}
.l4{justify-content:flex-end;align-items:center}
.l4 .it{max-width:min(460px,100%)}
.l4 h2{font-size:clamp(1.8rem,3.6vw,3.2rem);margin-bottom:18px}
.passos{list-style:none;padding:0;display:grid;gap:12px;color:var(--soft)}
.passos li{border-top:1px solid var(--line);padding-top:10px}
.passos b{color:var(--ink);font:italic 800 1.25rem var(--disp)}
.l5{align-items:center;justify-content:center;text-align:center}
.l5 h2{font-size:clamp(1.8rem,4.6vw,3.8rem);max-width:16ch;margin:0 auto}
.medalha{display:inline-grid;place-content:center;width:clamp(150px,18vw,210px);aspect-ratio:1;border-radius:50%;background:var(--ac);color:var(--ac-ink);font:italic 900 clamp(1.05rem,1.8vw,1.5rem)/1.05 var(--disp);text-decoration:none;text-align:center;padding:18px;transition:transform .15s var(--ease);box-shadow:0 18px 40px #000a}
.medalha:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.medalha:hover{transform:scale(1.04)}}
.contato{margin-top:22px;display:flex;gap:6px 22px;justify-content:center;flex-wrap:wrap;color:var(--soft)}
.rodape{margin-top:12px;font-size:.78rem;color:var(--soft)}

/* modal */
dialog{margin:auto;width:min(640px,92vw);max-height:90vh;overflow:auto;padding:0;border:1px solid var(--ac);border-radius:14px;background:var(--surface);color:var(--ink)}
dialog::backdrop{background:#000c}
dialog img{width:100%;height:60vh;object-fit:cover;object-position:top center;display:block;background:#000}
.mcorpo{padding:20px}.mcorpo h3{font:italic 800 1.7rem/1.05 var(--disp);margin-bottom:8px}.mcorpo p{white-space:pre-wrap}
.fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#000a;color:var(--ink);cursor:pointer}

@media(max-width:760px){
  .grp[data-leg="0"] .plano{--x:0!important;--y:-33!important;--w:22!important}
  .grp[data-leg="1"] .o:nth-child(1){--y:12!important}.grp[data-leg="1"] .o:nth-child(2){--y:26!important}
  .dados>div{grid-column:span 12}.dados dd{font-size:clamp(1.9rem,9vw,2.6rem)}.dados>div:first-child dd{font-size:clamp(3.4rem,20vw,5rem)}
  .l2{align-items:center}
  .selo{width:170%}.selo-wrap{margin:70px 0}
  body{font-size:15px}
  .marca span{display:none}
  .mapa{left:50%;top:auto;bottom:10px;transform:translateX(-50%);background:#0a0806d9;border:1px solid var(--line);border-radius:99px;padding:2px 8px}
  .mapa ol{flex-direction:row;gap:2px}
  .mapa button{padding:8px 5px}
  .mapa button[aria-current=true] b,.mapa button:focus-visible b{max-width:110px}
  .leg{padding:64px var(--g) 76px}
  .l1,.l4{justify-content:flex-start}
  .l1{align-items:flex-start;padding-top:84px}.cols{columns:1;font-size:.95rem}
  .l4{align-items:flex-end}
  .dados dd{font-size:clamp(2.2rem,10vw,3rem)}
  .l3 .lide{font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.medalha,.topo-cta{transition:none}}

.mini{margin-left:6px;min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--ac);background:none;color:var(--ac);cursor:pointer;font-size:.9rem}
.mini:active{transform:scale(.97)}

/* legibilidade: Bodoni italic só em manchetes grandes (>40px); todo o resto em sans, sem caixa-alta espaçada */
body{font-size:clamp(16px,.35vw + 15px,18px);line-height:1.6}
.pular{font:600 1rem var(--txt)}
.marca,.topo-cta{font:600 .95rem var(--txt);letter-spacing:0;text-transform:none}
.mapa button{font:500 .95rem var(--txt);letter-spacing:0;text-transform:none}
.kick{font:600 1rem var(--txt);letter-spacing:0;text-transform:none}
.assina{font:600 1rem/1.55 var(--txt);letter-spacing:0;text-transform:none}
.cols{font-size:1.06rem;line-height:1.65}
.rodape{font-size:.9rem;line-height:1.55}
.dados dt{font:600 1rem var(--txt);letter-spacing:0;text-transform:none}
.passos{font-size:1rem;line-height:1.6}.passos b{font:700 1.1rem var(--txt)}
.medalha{font:800 1.15rem/1.2 var(--txt)}
.cc .mast{font:600 .9rem var(--txt);letter-spacing:0;text-transform:none}
.cc h3{font:700 1.2rem/1.25 var(--txt)}
.cc p{font-size:.9rem;line-height:1.5}
.capa-vazia{font:700 1.2rem/1.35 var(--txt)}.capa-vazia span{font:400 .95rem/1.5 var(--txt)}
.mcorpo h3{font:700 1.5rem/1.25 var(--txt)}.mcorpo p{font-size:1rem;line-height:1.65}
@media(max-width:1100px){.l4 h2{font-family:var(--txt);font-style:normal;font-weight:800;letter-spacing:-.01em}}
@media(max-width:760px){
  h1,h2{font-family:var(--txt);font-style:normal;font-weight:800;letter-spacing:-.01em;line-height:1.15}
  .dados>div:not(:first-child) dd{font:800 1.9rem/1.2 var(--txt)}
  .cols{font-size:1rem}
  .l0 h1{font-size:2.1rem}
}
.fechar{font-size:1.1rem}

/* modal: desktop em duas colunas (imagem inteira em retrato + texto) */
dialog{width:min(900px,94vw);max-height:90vh;overflow:hidden}
dialog[open]{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
dialog:has(#mImg[hidden]){grid-template-columns:1fr;width:min(640px,94vw)}
dialog img{width:100%;height:100%;max-height:90vh;object-fit:contain;object-position:center;background:#0d0a06}
.mcorpo{overflow:auto;max-height:90vh;padding:28px 24px}
.fechar{width:44px;height:44px;z-index:2}

/* celular: textos menores, alvos de toque 44px, margens 16-20px */
@media(max-width:760px){
  body{font-size:15px}
  .topo-cta{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;top:6px;font-size:.9rem}
  .marca{top:10px}
  .mapa button{min-height:44px;min-width:30px;padding:0 5px}
  .mapa{bottom:8px}
  .leg{padding:64px var(--g) 88px}
  .l0 h1{font-size:2.2rem}
  .lide,.cols,.passos,.contato,.l0 .lide{font-size:15px;line-height:1.6}
  h2,.l5 h2{font-size:1.9rem}
  .l4 h2{font-size:1.7rem}
  .dados>div:first-child dd{font-size:3.4rem}
  .dados>div:not(:first-child) dd{font-size:1.6rem}
  .dados dt,.kick,.assina{font-size:.9rem}
  .passos b{font-size:1rem}
  .erro button{min-height:44px}
  .medalha{font-size:1.05rem}
  .rodape{font-size:.85rem}
  .cc h3{font-size:1.05rem}
  /* modal: coluna única, imagem inteira sem dominar a tela */
  dialog{width:min(92vw,440px);max-height:92vh;overflow:auto}
  dialog[open]{display:block}
  dialog img{height:auto;max-height:44vh;width:100%}
  .mcorpo{max-height:none;overflow:visible;padding:18px 16px 22px}
  .mcorpo h3{font-size:1.3rem}
}
@media(max-width:760px){
  .cc{--cw:clamp(220px,62vw,280px)}.capa-vazia{--cw:clamp(220px,62vw,280px)}
  .cc p{-webkit-line-clamp:2}
  .grp[data-leg="0"] .plano{--x:0!important;--y:-33!important;--w:22!important}
}
@media(max-width:760px){.grp[data-leg="5"] .gigante{display:none}}

/* cartão do anel: div com botão principal + link "Ver projeto" */
.cc-main{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cc .leg-txt{padding-bottom:62px}
.ver{position:absolute;left:12px;bottom:10px;z-index:2;min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:99px;background:var(--ac);color:var(--ac-ink);font:700 .95rem var(--txt);text-decoration:none;pointer-events:auto;transition:transform .15s var(--ease)}
.ver:active{transform:scale(.97)}
.ver-modal{position:static;margin-top:16px}
/* imagem do modal inteira, sem cortar, em qualquer proporção */
dialog img{width:auto;height:auto;max-width:100%;max-height:90vh;justify-self:center;align-self:center;margin:0 auto}
@media(max-width:760px){dialog img{max-height:44vh}}

/* texto só para leitores de tela e buscadores */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}