/* V2 — mobile first. Tudo é escrito pra 375px; o desktop entra em @media (min-width:900px). */
:root{
  --noite:#0b1240; --noite-2:#14206b; --roxo:#482e85;
  --rosa:#f0268f; --rosa-claro:#f7adff; --ouro:#f5b014; --turquesa:#12baa1;
  --creme:#fff8ef; --tinta:#1b1740; --tinta-2:#3b3763; --branco:#fff;
  --asfalto:#24204a;
  --creme-papel:#f6efe6;          /* creme com a textura de papel por cima (cor média), usado no rasgo que abre o mural */
  --f-sans:'Montserrat',system-ui,sans-serif;
  --f-serif:'Fraunces',Georgia,serif;
  --gutter:20px;
  --papel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-sans);font-size:16px;line-height:1.6;color:var(--tinta);background:var(--creme);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1120px,100% - var(--gutter)*2);margin-inline:auto}
h1,h2,h3{line-height:1.08;font-weight:800;letter-spacing:-.015em;text-wrap:balance} /* sem palavra sozinha na última linha */
h2{font-size:clamp(1.85rem,7.4vw,3.1rem)}
.so-desktop{display:none} /* quebra de linha que só vale em tela larga */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- destaques tipográficos (no máximo 2 por título) ---------- */
.t-serif{font-family:var(--f-serif);font-weight:900;letter-spacing:-.01em}
.t-contorno{
  font-family:var(--f-serif);font-weight:900;display:inline-block;color:var(--rosa);
  -webkit-text-stroke:.15em var(--contorno,#fff);paint-order:stroke fill;
  margin-inline:.075em; /* o contorno vaza meia espessura pra fora: isso alinha a letra com o resto do texto */
}
.t-adesivo{
  display:inline-block;background:var(--cor,var(--turquesa));color:var(--texto-adesivo,#fff);
  border:3px solid #fff;border-radius:999px;padding:.08em .5em .14em;
  transform:rotate(var(--giro,-3deg));box-shadow:4px 5px 0 var(--sombra,var(--noite));
}
.t-marca{background:linear-gradient(transparent 12%,var(--cor,var(--rosa)) 12%,var(--cor,var(--rosa)) 92%,transparent 92%);padding:0 .18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- botões: grandes, largura total no celular ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;min-height:58px;
  padding:16px 22px;border-radius:16px;border:3px solid var(--tinta);
  background:var(--rosa);color:#fff;font:800 1rem/1.2 var(--f-sans);text-transform:uppercase;letter-spacing:.02em;
  text-decoration:none;text-align:center;box-shadow:5px 6px 0 var(--tinta);
  transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 8px 0 var(--tinta)}
.btn:active{transform:translate(3px,4px);box-shadow:2px 2px 0 var(--tinta)}
.btn.ouro{background:var(--ouro);color:var(--tinta)}
.btn.no-escuro{border-color:#fff;box-shadow:5px 6px 0 var(--rosa)}
.btn .seta{font-size:1.2em;line-height:1}

/* ---------- elementos de corrida ---------- */
.quadriculado{--q:12px;background:conic-gradient(var(--tinta) 25%,#fff 0 50%,var(--tinta) 0 75%,#fff 0) 0 0/calc(var(--q)*2) calc(var(--q)*2)}
.etiqueta{
  display:inline-flex;align-items:center;gap:8px;font:800 .78rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.14em;
  padding:8px 14px 8px 8px;border-radius:999px;background:#fff;color:var(--tinta);border:2px solid var(--tinta);
}
.etiqueta .quadriculado{--q:5px;width:20px;height:20px;border-radius:50%;border:2px solid var(--tinta)}

/* ---------- rasgo de papel ---------- */
.rasgo{position:absolute;left:0;right:0;bottom:-1px;height:34px;width:100%;color:var(--creme);pointer-events:none;z-index:3}
.rasgo .fibra{fill:#fff}
.rasgo .face{fill:currentColor}
.com-papel{background-image:var(--papel)}

/* ---------- topo + barra de progresso da página ---------- */
.topo{position:sticky;top:0;z-index:50;background:var(--noite);color:#fff}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.marca{font-weight:800;font-size:.95rem;letter-spacing:-.01em}
.marca b{font-family:var(--f-serif);font-weight:900;color:var(--ouro)}
.topo .btn{width:auto;min-height:40px;padding:8px 14px;font-size:.72rem;border-width:2px;border-color:#fff;box-shadow:3px 3px 0 var(--rosa);border-radius:12px}
.progresso{position:relative;height:6px;background:rgba(255,255,255,.12)}
.progresso i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:linear-gradient(90deg,var(--rosa),var(--ouro))}
.progresso i::after{content:'';position:absolute;right:-6px;top:50%;width:12px;height:12px;border-radius:50%;background:var(--rosa);border:2px solid #fff;transform:translateY(-50%)}
.progresso .progresso-fim{position:absolute;right:0;top:0;bottom:0;width:18px;--q:3px}

/* ---------- 1. HERO / LARGADA ---------- */
.hero{position:relative;color:#fff;padding:26px 0 72px;overflow:hidden;
  background:radial-gradient(520px 420px at 85% 30%,rgba(72,46,133,.9),transparent 70%),radial-gradient(400px 300px at 0% 100%,rgba(240,38,143,.25),transparent 70%),linear-gradient(180deg,var(--noite),var(--noite-2))}
.ceu{position:absolute;inset:0;pointer-events:none;opacity:.85;background-image:
  radial-gradient(2px 2px at 12% 14%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 74% 8%,#fff 60%,transparent),
  radial-gradient(2px 2px at 92% 46%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 30% 62%,#fff 60%,transparent),
  radial-gradient(2.5px 2.5px at 56% 22%,var(--ouro) 60%,transparent),radial-gradient(1.5px 1.5px at 6% 48%,var(--ouro) 60%,transparent),
  radial-gradient(1.5px 1.5px at 84% 78%,#fff 60%,transparent),radial-gradient(2px 2px at 44% 90%,var(--rosa-claro) 60%,transparent)}
.hero-grid{position:relative;display:grid;grid-template-areas:"titulo" "frase" "visual" "texto" "cta";gap:18px}
.hero h1{grid-area:titulo;font-size:clamp(2.6rem,13vw,4.6rem);line-height:.98;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.06em} /* centralizado no celular */
.h1-a{font-size:.52em;font-weight:800;letter-spacing:.01em}
.h1-b{color:var(--rosa);font-size:1em;transform:rotate(-2deg)}
.h1-c{color:var(--turquesa);font-size:.84em;transform:rotate(-2deg);margin-top:.02em}
.hero .frase{grid-area:frase;font-size:1.13rem;line-height:1.45;font-weight:700;color:#fff;max-width:30ch;justify-self:center;text-align:center}
.hero .frase .t-marca{--cor:rgba(240,38,143,.55)}
.hero .texto{grid-area:texto;color:#dfe2ff}
.hero .cta{grid-area:cta}
.hero .cta .btn{background:var(--rosa)}

/* composição: arco com o castelo + Gaby recortada saindo da moldura */
.hero-visual{grid-area:visual;position:relative;height:clamp(380px,112vw,460px);margin:6px 0 4px}
.arco{position:absolute;left:2%;top:4%;width:58%;height:72%;border-radius:999px 999px 26px 26px;overflow:hidden;border:4px solid #fff;
  box-shadow:0 0 0 4px var(--ouro),10px 12px 0 4px var(--rosa);transform:rotate(-3deg)}
.arco img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.recorte-hero{position:absolute;right:-3%;bottom:0;height:78%;width:auto;max-width:none;z-index:1;
  filter:drop-shadow(0 14px 18px rgba(5,8,40,.45));
  /* a perna some no fundo em vez de terminar num corte seco */
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 97%);mask-image:linear-gradient(180deg,#000 72%,transparent 97%)}
.selo{position:absolute;right:0;top:0;width:96px;height:96px;z-index:2}
.selo .gira{transform-box:view-box;transform-origin:50% 50%}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){.selo .gira{animation:gira 24s linear infinite}}
.selo text{font:800 10.5px var(--f-sans);letter-spacing:.16em;text-transform:uppercase;fill:var(--tinta)}
.selo .miolo{font:900 19px var(--f-serif);fill:var(--rosa);letter-spacing:0;text-transform:none}
.hero-pilula{position:absolute;left:3%;bottom:15%;z-index:2;--cor:var(--rosa);--giro:5deg;font:800 .78rem/1.2 var(--f-sans);text-transform:uppercase;letter-spacing:.04em;padding:.5em .9em}

/* faixa quadriculada da largada */
.largada-faixa{position:absolute;left:0;right:0;bottom:30px;height:16px;--q:8px;opacity:.9;transform:skewY(-1.2deg)}
/* a faixa corre de lado em loop; um ciclo anda exatamente um padrão (2 quadradinhos), então não dá pulo */
@keyframes faixa-corre{to{background-position:calc(var(--q)*-2) 0}}
@media (prefers-reduced-motion:no-preference){.largada-faixa{animation:faixa-corre .9s linear infinite}}

/* ---------- 2. BASTIDOR ---------- */
.bastidor{position:relative;background-color:var(--rosa);color:#fff;padding:44px 0 90px;overflow:hidden}
.bastidor h2{--sombra:var(--noite);max-width:16ch;margin-inline:auto;text-align:center} /* centralizado só no celular */
.bastidor h2 .t-contorno{color:var(--turquesa)}
.bastidor-vis{position:relative;margin:22px auto 0;height:clamp(360px,108vw,470px);max-width:420px}
.bastidor-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 14px 18px rgba(11,18,64,.3))}
.solta{position:absolute;z-index:2;font:800 .78rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em;
  padding:9px 12px;border-radius:10px;background:#fff;color:var(--tinta);border:2px solid var(--tinta);box-shadow:3px 3px 0 var(--tinta)}
.solta:nth-of-type(1){left:0;top:4%;transform:rotate(-7deg);background:var(--ouro)}
.solta:nth-of-type(2){right:2%;top:2%;transform:rotate(6deg)}
.solta:nth-of-type(3){left:0;top:42%;transform:rotate(4deg);background:var(--turquesa);color:#fff}
.solta:nth-of-type(4){right:0;top:40%;transform:rotate(-5deg);background:var(--noite);color:#fff;border-color:#fff;box-shadow:3px 3px 0 var(--tinta)}
.solta:nth-of-type(5){left:30%;top:60%;transform:rotate(-3deg)}
.papel-colado{position:relative;z-index:3;margin-top:-96px;background:var(--creme) var(--papel);color:var(--tinta-2);
  padding:30px 22px 24px;border-radius:4px;transform:rotate(-1.4deg);box-shadow:0 18px 30px rgba(11,18,64,.28)}
.papel-colado p+p{margin-top:14px}
.papel-colado strong{color:var(--tinta)}
.fita{position:absolute;top:-14px;width:96px;height:28px;background:rgba(255,255,255,.78);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.fita.e{left:-10px;transform:rotate(-12deg)} .fita.d{right:-10px;transform:rotate(9deg);background:rgba(18,186,161,.6)}

/* ---------- 3. PERCURSO ---------- */
.percurso{position:relative;padding:56px 0 0;background-color:var(--creme);
  background-image:radial-gradient(rgba(27,23,64,.13) 1.2px,transparent 1.7px);background-size:22px 22px}
.percurso-topo{text-align:center;max-width:720px;margin:0 auto}
.percurso h2{font-size:clamp(1.75rem,7vw,3rem)}
.percurso h2 .t-contorno{--contorno:var(--tinta);color:var(--rosa);font-size:1.25em;line-height:1;-webkit-text-stroke-width:.1em}
.percurso h2 .t-adesivo{--cor:var(--ouro);--texto-adesivo:var(--tinta);--sombra:var(--tinta);--giro:3deg}

.trilha{position:relative;margin-top:34px;padding-bottom:20px;--estrada:40px}
.estrada{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.estrada path{fill:none;stroke-linecap:butt;stroke-linejoin:round} /* ponta reta: dois trechos se encostam sem emenda aparente */
.estrada .borda{stroke:var(--roxo);stroke-width:calc(var(--estrada) + 10px)}
.estrada .asfalto{stroke:var(--asfalto);stroke-width:var(--estrada)}
.estrada .faixa{stroke:#fff;stroke-width:2.5px;stroke-dasharray:10 12;opacity:.85}
.estrada .feito{stroke:var(--ouro);stroke-width:5px}
.estrada .corredor{fill:var(--rosa);stroke:#fff;stroke-width:4px}
.estrada .corredor-halo{fill:var(--rosa);opacity:.25}

.portico{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:0;margin:0 auto 40px;width:min(280px,82%)}
.portico .banda{width:100%;height:26px;--q:8px;border:3px solid var(--tinta);border-radius:6px}
.portico span{margin-top:-14px;background:var(--rosa);color:#fff;font:900 1.15rem/1 var(--f-serif);padding:8px 18px 10px;border:3px solid var(--tinta);border-radius:999px;transform:rotate(-2deg);box-shadow:3px 4px 0 var(--tinta)}
.portico i{display:block;width:4px;height:22px} /* só marca o ponto da estrada, sem desenho */

.checkpoints{position:relative;z-index:1;list-style:none;display:grid;gap:78px}
.cp{position:relative;padding-top:30px}
.cp-pino{position:absolute;top:0;left:14px;z-index:2;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:4px solid var(--asfalto);color:var(--roxo);box-shadow:0 0 0 4px var(--creme);transition:background .3s,color .3s,transform .3s}
.cp:nth-child(even) .cp-pino{left:auto;right:14px}
.cp-pino svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp.passou .cp-pino{background:var(--ouro);color:var(--tinta);transform:scale(1.08)}
.cp-card{--cor:var(--rosa);position:relative;background:#fff;border:3px solid var(--tinta);border-radius:20px;padding:42px 22px 22px;
  box-shadow:7px 8px 0 var(--cor);transform:rotate(var(--giro,-.8deg))}
.cp:nth-child(even) .cp-card{--giro:.9deg}
.cp:nth-child(6n+2) .cp-card{--cor:var(--turquesa)} .cp:nth-child(6n+3) .cp-card{--cor:var(--ouro)}
.cp:nth-child(6n+4) .cp-card{--cor:var(--roxo)} .cp:nth-child(6n+5) .cp-card{--cor:var(--rosa-claro)} .cp:nth-child(6n) .cp-card{--cor:var(--turquesa)}
.cp-card h3{font-size:1.3rem;margin-bottom:8px;color:var(--tinta)}
.cp-card p{color:var(--tinta-2)}
.percurso-cta{position:relative;z-index:1;margin-top:64px;padding-bottom:30px}

/* sem JS: linha tracejada simples no lugar da estrada */
.trilha:not(.tem-estrada) .checkpoints{border-left:4px dashed var(--roxo);padding-left:16px}

.ponto-inicio{position:absolute;left:50%;top:0;width:0;height:0}

/* ---------- 4. POSTO DE APOIO ---------- */
.posto{position:relative;padding:0 0 10px;background-color:var(--creme);
  background-image:radial-gradient(rgba(27,23,64,.13) 1.2px,transparent 1.7px);background-size:22px 22px}
.posto .trilha{margin-top:0;padding:70px 0 70px}
.tenda{position:relative;z-index:1;background:#fff;border:3px solid var(--tinta);border-radius:22px;overflow:hidden;box-shadow:7px 8px 0 var(--turquesa)}
.toldo{position:relative;height:38px;background:repeating-linear-gradient(90deg,var(--rosa) 0 28px,#fff 28px 56px);border-bottom:2px solid rgba(27,23,64,.15)}
.toldo::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px;
  background:radial-gradient(circle at 14px 0,var(--rosa) 13.5px,transparent 14px) 0 0/56px 14px repeat-x}
.tenda-corpo{padding:34px 22px 26px}
.placa{display:inline-block;background:var(--tinta);color:var(--ouro);font:800 .78rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.14em;padding:8px 12px;border-radius:8px;margin-bottom:14px;transform:rotate(-2deg)}
.tenda h2{font-size:clamp(1.7rem,6.6vw,2.6rem);margin-bottom:14px}
.tenda h2 .t-marca{--cor:var(--rosa-claro)}
.tenda p{color:var(--tinta-2)}
.posto .checkpoints{margin-top:78px}
.cp-bonus .cp-card{padding-top:50px;overflow:hidden}
.cp-bonus .cp-card::before{content:'';position:absolute;left:0;right:0;top:0;height:14px;border-bottom:2px solid var(--tinta);
  background:repeating-linear-gradient(90deg,var(--rosa) 0 18px,#fff 18px 36px)}
.bonus-tag{display:inline-block;background:var(--turquesa);color:#fff;font:800 .7rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.14em;padding:6px 10px;border-radius:999px;margin-bottom:10px}
.cp-bonus:nth-child(2) .bonus-tag{background:var(--rosa)}
.posto-fecho{position:relative;z-index:1;margin-top:72px;background:var(--creme) var(--papel);border:3px solid var(--tinta);border-radius:20px;padding:22px 20px 24px;text-align:center;box-shadow:6px 7px 0 var(--ouro)}
.posto-fecho p{font-weight:700;font-size:1.05rem;margin-bottom:18px}

/* ---------- 5. PÓDIO ---------- */
.podio{position:relative;z-index:1;overflow:hidden;color:#fff;padding:56px 0 100px;
  background:radial-gradient(500px 400px at 100% 0,rgba(240,38,143,.3),transparent 70%),linear-gradient(165deg,var(--roxo),var(--noite) 78%)}
.podio-grid{position:relative;display:grid;gap:22px;grid-template-areas:"titulo" "foto" "texto"}
.podio h2{grid-area:titulo;text-align:center} /* no celular o título fica centralizado; no desktop volta pra esquerda */
.podio h2 .t-contorno{display:block;width:fit-content;margin-inline:auto;color:var(--rosa);font-size:1.18em;line-height:1;margin-top:.06em;transform:rotate(-2deg)} /* mesmo peso do hero: a palavra de destaque é maior que o resto */
.podio-foto{grid-area:foto;position:relative;width:min(300px,80%);margin:8px auto 36px}
.moldura{border:5px solid #fff;border-radius:999px 999px 24px 24px;overflow:hidden;aspect-ratio:3/4.3;box-shadow:10px 12px 0 var(--turquesa);transform:rotate(2deg)}
.moldura img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.peito{position:absolute;left:-14%;bottom:-26px;width:148px;background:#fff;color:var(--tinta);border:2px solid var(--tinta);border-radius:10px;
  padding:16px 10px 12px;text-align:center;transform:rotate(-8deg);box-shadow:5px 6px 0 var(--rosa)}
.peito b{display:block;font:900 2.3rem/1 var(--f-serif);color:var(--rosa);margin:2px 0}
.peito small{display:block;font:800 .6rem/1.3 var(--f-sans);text-transform:uppercase;letter-spacing:.16em}
.furo{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--roxo)}
.furo:nth-child(1){left:7px;top:7px} .furo:nth-child(2){right:7px;top:7px} .furo:nth-child(3){left:7px;bottom:7px} .furo:nth-child(4){right:7px;bottom:7px}
.podio-texto{grid-area:texto}
.podio-texto p{color:#e6e4ff;font-size:1.05rem}
.podio-texto p+p{margin-top:14px}
.medalhas{display:flex;justify-content:center;gap:24px;margin:26px 0 30px}
.medalha,.medalha-preco{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0}
.fita-medalha{display:block;width:62px;height:66px;clip-path:polygon(12% 0,88% 0,70% 100%,30% 100%);
  background:repeating-linear-gradient(90deg,var(--rosa) 0 11px,var(--ouro) 11px 16px,var(--turquesa) 16px 27px)}
.m2 .fita-medalha{background:repeating-linear-gradient(90deg,var(--roxo) 0 11px,#fff 11px 16px,var(--rosa-claro) 16px 27px)}
.disco{width:128px;height:128px;margin-top:-6px;border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--tinta);
  background:radial-gradient(circle at 35% 28%,#ffe39a,var(--ouro) 55%,#c98600);border:4px solid #fff;
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.3),inset 0 0 0 9px rgba(140,88,0,.35),6px 8px 0 rgba(0,0,0,.28)}
.disco b{font:900 2.7rem/1 var(--f-serif)}
.disco small{font:800 .7rem/1.2 var(--f-sans);text-transform:uppercase;letter-spacing:.12em}

/* ---------- 6. MURAL DA TORCIDA ---------- */
.mural{position:relative;background-color:var(--creme);padding:56px 0 72px}
.mural h2{text-align:center;margin-bottom:38px}
.mural h2 .t-adesivo{--cor:var(--rosa);--giro:-2deg}
.mural-grade{display:flex;flex-direction:column;max-width:520px;margin:0 auto}
.mural-grade>*+*{margin-top:-12px}
.polaroid{position:relative;background:#fff;padding:10px 10px 30px;border-radius:4px;transform:rotate(var(--g,-1.5deg));
  box-shadow:0 10px 24px rgba(11,18,64,.16),0 1px 2px rgba(11,18,64,.2)}
.mural-grade>:nth-child(even){--g:1.6deg}
.polaroid img{width:100%;border-radius:2px}
.polaroid .fita{left:50%;top:-12px;width:84px;height:24px;transform:translateX(-50%) rotate(-4deg)}
.mural-grade>:nth-child(3n) .fita{background:rgba(245,176,20,.7)}
.mural-grade>:nth-child(3n+1) .fita{background:rgba(18,186,161,.55)}
.par-fotos{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:1;padding:4px 4px 0}
.par-fotos .polaroid{--g:-4deg} .par-fotos .polaroid+.polaroid{--g:3deg;margin-top:18px}
.polaroid.foto img{aspect-ratio:4/5;object-fit:cover}
.polaroid.solo{width:70%;align-self:center;z-index:1}

/* ---------- 7. LINHA DE CHEGADA ---------- */
.chegada{position:relative;overflow:hidden;color:#fff;text-align:center;padding:0 0 72px;
  background:radial-gradient(600px 420px at 50% 34%,rgba(72,46,133,.95),transparent 70%),var(--noite)}
.trilha-chegada{margin:0 auto;padding:0;height:200px;display:flex;align-items:flex-end;justify-content:center}
.portico-chegada{margin:0 auto;width:min(320px,88%)}
.portico-chegada span{background:var(--ouro);color:var(--tinta);font-size:1.4rem;margin-top:-16px}
.chegada-conteudo{position:relative;max-width:720px;margin:34px auto 0}
.chegada h2 .t-contorno{color:var(--rosa);display:block;text-wrap:balance;margin-top:.12em;font-size:1.08em;line-height:1.05}
.chegada .lead{color:#dfe1ff;margin-top:16px}
/* medalha premium com o preço gravado na face */
.medalha-preco{position:relative;width:min(360px,92vw);margin:10px auto 14px}
.medalha-preco img{width:100%;filter:drop-shadow(0 18px 26px rgba(0,0,0,.45))}
.gravado{position:absolute;left:49.6%;top:57.6%;width:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;
  color:#7a5205;text-shadow:0 1.5px 0 rgba(255,240,190,.9),0 -1px 0 rgba(90,56,0,.55)}
.gravado .rs{font:900 1.15rem/1 var(--f-serif);letter-spacing:.04em}
.gravado b{font:900 clamp(2.4rem,12vw,3.3rem)/1 var(--f-serif);letter-spacing:-.01em;white-space:nowrap}
.gravado .moeda{font-size:.42em;margin-right:.12em;vertical-align:.95em} /* "R$" pequeno no alto, o valor da parcela é o que aparece */
.gravado small{margin-top:8px;padding-top:8px;border-top:1.5px solid rgba(122,82,5,.45);box-shadow:0 -1px 0 rgba(255,240,190,.7);
  font:800 .66rem/1.35 var(--f-sans);text-transform:uppercase;letter-spacing:.1em;max-width:16ch}
.btn.grande{min-height:64px;font-size:1.06rem}
/* selos de compra + bandeiras, o padrão de checkout */
.selos-compra{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px auto 0;max-width:520px}
.selos-compra li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;font-weight:700;line-height:1.25;color:#dfe1ff}
.selos-compra svg{width:26px;height:26px;fill:none;stroke:var(--turquesa);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bandeiras{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:16px auto 0}
.bandeiras span{display:grid;place-items:center;width:46px;height:30px;border-radius:5px;background:#fff;font:900 .72rem/1 var(--f-sans);letter-spacing:.02em}
.b-visa{color:#1a1f71;font-style:italic;font-size:.82rem!important}
.b-master{grid-template-columns:auto auto}
.b-master i{display:block;width:16px;height:16px;border-radius:50%;background:#eb001b}
.b-master i+i{background:#f79e1b;margin-left:-6px;mix-blend-mode:multiply}
.b-elo{background:#111!important;color:#fff;font-size:.86rem!important;text-transform:lowercase}
.b-amex{background:#1f72cd!important;color:#fff;font-size:.62rem!important}
.b-pix{color:#32bcad;font-size:.86rem!important}
.b-boleto{color:var(--tinta);font-size:.62rem!important}
.chegada .fecha{margin-top:32px;color:#dfe1ff}

/* ---------- 8. FAQ + rodapé ---------- */
.faq{background:var(--creme);padding:56px 0 72px}
.faq h2{text-align:center;margin-bottom:28px}
.faq h2 .t-marca{--cor:var(--rosa-claro)}
.faq-lista{max-width:760px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:2.5px solid var(--tinta);border-radius:16px;box-shadow:4px 5px 0 var(--tinta)}
.faq summary{min-height:60px;padding:16px 18px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;width:30px;height:30px;border-radius:50%;background:var(--rosa);color:#fff;display:grid;place-items:center;font-size:1.3rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 18px 18px;color:var(--tinta-2)}
.faq-cta{margin-top:36px;display:flex;justify-content:center}
.rodape{background:var(--noite);color:#aab0ee;text-align:center;padding:26px 20px 34px;font-size:.82rem}

/* ---------- revelação ao rolar (só com JS) ----------
   usa a propriedade translate (e não transform) pra não apagar os giros de cada peça */
@media (prefers-reduced-motion:no-preference){
  .js .rev{opacity:0;translate:0 22px;transition:opacity .6s,translate .6s}
  .js .rev.on{opacity:1;translate:0 0}
  .js .medalhas.on .medalha,.js .medalha-preco.on{animation:balanca 1.8s ease-out}
  .js .medalhas.on .m2{animation-delay:.15s}
}
@keyframes balanca{0%{transform:rotate(-12deg)}35%{transform:rotate(8deg)}65%{transform:rotate(-4deg)}85%{transform:rotate(2deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .selo .gira{animation:none!important}
  .cp-pino{transition:none}
}

/* =================== DESKTOP (depois) =================== */
@media (min-width:900px){
  :root{--gutter:40px}
  .so-desktop{display:inline}
  .btn{width:auto;min-width:320px;padding:18px 34px}
  .rasgo{height:54px}
  .topo .btn{min-width:0}
  .marca{font-size:1.05rem}

  .hero{padding:56px 0 120px}
  .hero-grid{grid-template-columns:1.05fr .95fr;grid-template-areas:"titulo visual" "frase visual" "texto visual" "cta visual";column-gap:56px;row-gap:20px;align-items:start}
  .hero h1{font-size:clamp(3.8rem,6.4vw,5.6rem);align-items:flex-start;text-align:left}
  .hero .frase{justify-self:start;text-align:left}
  .hero-visual{height:600px;align-self:center;margin:0}
  .selo{width:132px;height:132px;right:5%;top:3%} /* um pouco mais perto das fotos, sem encostar na cabeça */
  .largada-faixa{bottom:50px;height:22px;--q:11px}

  .bastidor{padding:80px 0 130px}
  .bastidor-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:0 40px;align-items:center}
  .bastidor-vis{grid-row:1/3;height:620px;max-width:none;margin:0}
  .bastidor h2{align-self:end;max-width:none;margin-inline:0;text-align:left}
  .papel-colado{margin:28px 0 0;max-width:490px;padding:40px 36px 34px;align-self:start;transform:rotate(-1deg)}

  .percurso{padding:90px 0 0}
  .trilha{--estrada:52px;max-width:1000px;margin:50px auto 0}
  .checkpoints{gap:0}
  .cp{width:46%;padding-top:34px}
  .cp+.cp{margin-top:36px}
  .cp:nth-child(even){margin-left:auto}
  .cp:nth-child(odd) .cp-pino{left:-22px}
  .cp:nth-child(even) .cp-pino{right:-22px}
  .cp-card{padding:30px 30px 26px}
  .percurso-cta{display:flex;justify-content:center}

  .posto .trilha{padding:90px 0 90px}
  .tenda{max-width:720px;margin:0 auto}
  .tenda-corpo{padding:40px 40px 34px}
  .posto-fecho{max-width:680px;margin:80px auto 0;padding:30px 36px}
  .posto-fecho .btn{margin:0 auto}

  .podio{padding:90px 0 140px}
  .podio-grid{grid-template-columns:.8fr 1.2fr;grid-template-areas:"foto titulo" "foto texto";grid-template-rows:auto 1fr;column-gap:80px;row-gap:22px;align-items:start}
  .podio h2{align-self:end;font-size:clamp(2.4rem,3.6vw,3.2rem);text-align:left}
  .podio h2 .t-contorno{margin-inline:.075em}
  .podio-texto{max-width:560px}
  .podio-foto{align-self:center}
  .medalhas{justify-content:flex-start;gap:28px}
  .medalha .disco{width:150px;height:150px}
  .medalha .disco b{font-size:3.2rem}
  .medalha .fita-medalha{width:70px;height:74px}
  .podio-foto{width:100%;max-width:400px;margin:0 auto}
  .medalhas{justify-content:flex-start}

  .mural{padding:90px 0 110px}
  .mural-grade{display:block;max-width:none;columns:3;column-gap:30px}
  .mural-grade>*{break-inside:avoid;margin:0 0 30px!important;display:inline-block;width:100%;vertical-align:top}
  .mural-grade>.par-fotos{display:inline-grid}
  .polaroid.solo{width:100%}

  .trilha-chegada{height:260px}
  .chegada{padding-bottom:100px}
  .faq{padding:90px 0 100px}
}