/* Site público novo (hub #201). O visual é o das postagens: as 7 paletas do tutorial #4, a Schola
   dos carrosséis, a Bricolage das VSLs, o sublinhado desenhado e os pontinhos.
   Movimento só com transform/opacity (o traço do sublinhado e o fio usam stroke-dashoffset em SVG
   pequeno) e nada disso para quem pede menos movimento. Nada de CDN. */

/* ---------- fontes (hospedadas aqui; DM Sans e Bricolage são as que o sistema já usa) ---------- */
@font-face{font-family:Schola;src:url(/assets/site/fontes/schola-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Franklin;src:url(/assets/site/fontes/franklin-italic-latin.woff2) format('woff2');font-style:italic;font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans-var.woff2?v=1) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-grotesque-var.woff2?v=1) format('woff2');font-weight:400 700;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* paletas: fundo, texto, destaque (<em>), ponto ativo — medidas nos PNG do post 013 (gerar-carrossel.js) */
  --tinta-bg:#171a1c;   --tinta-fg:#ede9e1;   --tinta-em:#c9563f;   --tinta-ponto:#2fb3a8;
  --pinho-bg:#1b2a26;   --pinho-fg:#e9e7de;   --pinho-em:#d9a24e;   --pinho-ponto:#43c9bd;
  --vinho-bg:#2c1d1e;   --vinho-fg:#efe6dd;   --vinho-em:#d08c5d;   --vinho-ponto:#2fb3a8;
  --marinho-bg:#18232f; --marinho-fg:#e7e7e1; --marinho-em:#d98c6a; --marinho-ponto:#2fb3a8;
  --papel-bg:#efe9de;   --papel-fg:#211e1b;   --papel-em:#a8322a;   --papel-ponto:#158c83;
  --argila-bg:#8c3a2b;  --argila-fg:#f6ede2;  --argila-em:#f0c36b;  --argila-ponto:#5bd3c6;
  --oliva-bg:#2e3122;   --oliva-fg:#edeadf;   --oliva-em:#c7b24a;   --oliva-ponto:#43c9bd;
  --marca:#2fb3a8; --marca-escura:#158c83;

  --f-editorial:Schola,"Century Schoolbook","Georgia",serif;   /* títulos, como nos carrosséis */
  --f-impacto:"Bricolage Grotesque","DM Sans",system-ui,sans-serif; /* frases de impacto, preço, como nas VSLs */
  --f-texto:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-apoio:Franklin,"DM Sans",sans-serif;                       /* sempre em itálico */

  --medida:1160px;
  --margem:clamp(16px,5vw,48px);
  --respiro:clamp(80px,11vw,152px);
  --raio:14px;
  --curva:cubic-bezier(.2,.75,.2,1);
}
.pal-tinta{--bg:var(--tinta-bg);--fg:var(--tinta-fg);--em:var(--tinta-em);--ponto:var(--tinta-ponto)}
.pal-pinho{--bg:var(--pinho-bg);--fg:var(--pinho-fg);--em:var(--pinho-em);--ponto:var(--pinho-ponto)}
.pal-vinho{--bg:var(--vinho-bg);--fg:var(--vinho-fg);--em:var(--vinho-em);--ponto:var(--vinho-ponto)}
.pal-marinho{--bg:var(--marinho-bg);--fg:var(--marinho-fg);--em:var(--marinho-em);--ponto:var(--marinho-ponto)}
.pal-papel{--bg:var(--papel-bg);--fg:var(--papel-fg);--em:var(--papel-em);--ponto:var(--papel-ponto)}
.pal-argila{--bg:var(--argila-bg);--fg:var(--argila-fg);--em:var(--argila-em);--ponto:var(--argila-ponto)}
.pal-oliva{--bg:var(--oliva-bg);--fg:var(--oliva-fg);--em:var(--oliva-em);--ponto:var(--oliva-ponto)}
[class*="pal-"]{background:var(--bg);color:var(--fg)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:76px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font:400 17px/1.6 var(--f-texto);background:var(--tinta-bg);color:var(--tinta-fg);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
em{font-style:normal;color:var(--em)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--ponto,var(--marca));outline-offset:3px;border-radius:4px}
.pular{position:absolute;left:12px;top:-60px;z-index:99;padding:10px 16px;background:var(--tinta-fg);color:var(--tinta-bg);border-radius:8px;font-weight:600}
.pular:focus{top:12px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.caixa{width:100%;max-width:calc(var(--medida) + 2*var(--margem));margin:0 auto;padding:0 var(--margem)}
.bloco{position:relative;padding:var(--respiro) 0;overflow:hidden;overflow:clip} /* clip: corta sem virar contêiner de rolagem, senão o palco preso (sticky) dos cinco lugares não gruda */

/* ---------- tipos ---------- */
.t-hero{font:400 clamp(46px,6.4vw,86px)/1.02 var(--f-editorial);letter-spacing:-.012em}
.t-titulo{font:400 clamp(34px,4.9vw,62px)/1.08 var(--f-editorial);letter-spacing:-.01em;max-width:18ch}
.t-impacto{font:650 clamp(30px,4.4vw,56px)/1.08 var(--f-impacto);letter-spacing:-.02em}
.t-elo{font:620 clamp(26px,3vw,38px)/1.12 var(--f-impacto);letter-spacing:-.015em}
.t-lead{font-size:clamp(18px,1.55vw,21px);line-height:1.55;max-width:34em;opacity:.86}
.t-tag{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.t-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ponto)}
.t-miuda{font:italic 400 15px/1.5 var(--f-apoio);opacity:.8}
.t-num{font:600 13px/1 var(--f-texto);letter-spacing:.12em;color:var(--ponto);font-variant-numeric:tabular-nums}

/* ---------- sublinhado desenhado (o mesmo traço das VSLs: curva que desce no meio e sobe no fim) ---------- */
.subs{white-space:normal}
.sub{position:relative;display:inline-block}
.subs-junto{white-space:nowrap} /* frase curta que não pode quebrar (ex.: "de volta.") */
.sub-traco{position:absolute;left:-.02em;right:-.02em;bottom:-.14em;width:calc(100% + .04em);height:.2em;overflow:visible;pointer-events:none}
/* sem vector-effect: com ele o Chrome mede o tracejado em px de tela e a palavra longa sai picotada.
   A altura do SVG é sempre .2em = 10 unidades, então 3.75 unidades = .075em de traço (a espessura da VSL). */
.sub-traco path{fill:none;stroke:var(--em);stroke-width:3.75;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .subs:not(.visivel) .sub-traco path{stroke-dashoffset:1}
.js .subs .sub-traco path{transition:stroke-dashoffset .55s var(--curva) calc(.25s + var(--i,0)*.14s)}

/* ---------- botão (o CTA é sempre o mesmo: "Começar teste de 7 dias") ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px;border-radius:999px;background:var(--fg);color:var(--bg);font:600 17px/1 var(--f-texto);text-decoration:none;transition:transform .2s var(--curva),box-shadow .2s}
.btn::after{content:"→";content:"→" / "";transition:transform .2s var(--curva)} /* a seta não entra no nome lido pelo leitor de tela */
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
.btn:hover::after{transform:translateX(4px)}
.btn-pequeno{min-height:40px;padding:0 16px;font-size:14px;gap:8px}
.link-seco{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:1.5px solid color-mix(in srgb,var(--fg) 35%,transparent);padding-bottom:2px}
.link-seco:hover{border-bottom-color:var(--fg)}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}

/* ---------- ícone da casa e selo ---------- */
.casa{width:28px;height:30px;flex:none}
.selo{margin-top:18px;text-align:center;font:500 13px/1.3 var(--f-texto);letter-spacing:.02em;opacity:.72}

/* ---------- pontinhos (como no carrossel: um por bloco, o do bloco aceso) ---------- */
.pts{position:absolute;left:0;right:0;bottom:clamp(22px,3vw,36px);display:flex;justify-content:center;gap:9px}
.pts i{display:block;width:7px;height:7px;border-radius:4px;background:var(--fg);opacity:.22}
.pts i.on{width:24px;background:var(--ponto);opacity:1}

/* ---------- celular 3D ---------- */
.cel-cena{--cel-w:clamp(230px,24vw,318px);perspective:1500px;display:flex;flex-direction:column;align-items:center}
.cel{position:relative;width:var(--cel-w);aspect-ratio:390/844;padding:calc(var(--cel-w)*.034);border-radius:calc(var(--cel-w)*.155);
  background:linear-gradient(150deg,#3a3f44 0%,#16181a 38%,#0b0c0d 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1),inset 0 2px 1px rgba(255,255,255,.14),0 50px 80px -30px rgba(0,0,0,.6),0 18px 30px -18px rgba(0,0,0,.5);
  transform:rotateY(var(--ry,-16deg)) rotateX(var(--rx,7deg)) rotateZ(var(--rz,1.5deg));transform-style:preserve-3d;will-change:transform}
.cel::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#060708;transform:translateZ(-14px);box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.cel-tela{position:relative;height:100%;padding-top:calc(var(--cel-w)*.115);border-radius:calc(var(--cel-w)*.125);overflow:hidden;background:#fff;transform:translateZ(1px)}
.cel-tela::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 34%);opacity:var(--brilho,.55);pointer-events:none}
.cel-tela picture{display:block;height:100%}
.cel-midia{width:100%;height:100%;object-fit:cover;object-position:top center}
/* a LUPA (dono, #205): um recorte próprio da captura 3x (lupas.php), do MESMO tamanho em todas (6:5), que sai da
   tela em 3D a partir do topo da parte falada (--ty, px da captura), sem cobrir o que está acima, e nunca desce até o selo. Escala final 1
   (a imagem tem 2,9x a 3x a densidade exibida: nunca ampliada além da fonte). O resto da tela escurece. */
.cel{--u:calc(var(--cel-w) * .932 / 390);--lupa-w:390px}
.cel-lupa{position:absolute;z-index:3;left:50%;width:var(--lupa-w);aspect-ratio:var(--ar,1.2);margin-left:calc(var(--lupa-w) / -2);
  top:clamp(calc(var(--cel-w) * .18),calc(var(--cel-w) * .149 + var(--ty) * var(--u) - 6px),calc(var(--cel-w) * 2.1 - var(--lupa-w) / var(--ar,1.2)));
  border-radius:12px;overflow:hidden;background:#fff;opacity:0;transform:translateZ(2px) scale(.72);pointer-events:none;
  transition:opacity .25s ease,transform .9s var(--curva) .1s,box-shadow .9s ease .1s}
.cel-lupa picture,.cel-lupa img{display:block;width:100%;height:auto}
.cel-tela::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(12,14,16,.5);opacity:0;transition:opacity .6s ease;pointer-events:none}
.destacar .cel-tela::before{opacity:1}
.destacar .cel-lupa{opacity:1;transform:translateZ(60px) scale(1);box-shadow:0 0 0 2px var(--em),0 28px 60px -18px rgba(0,0,0,.65)}
.cel-ilha{position:absolute;top:calc(var(--cel-w)*.03);left:50%;width:30%;height:calc(var(--cel-w)*.075);transform:translateX(-50%);border-radius:999px;background:#0b0c0d}

/* ---------- cartão (os cinco lugares) ---------- */
.cartoes{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:clamp(40px,6vw,72px) 0;perspective:1200px}
.cartao{position:relative;padding:22px 20px 24px;border-radius:12px;background:#fbf8f2;color:#211e1b;border:1px solid rgba(33,30,27,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 34px -22px rgba(33,30,27,.55);transform:rotate(var(--rz,0deg))}
.cartao svg{width:46px;height:46px;margin-bottom:16px;fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.cartao h3{font:620 21px/1.15 var(--f-impacto);margin-bottom:8px}
.cartao p{font-size:15px;line-height:1.5;opacity:.82}
.js [data-pf-grupo] .cartao{opacity:0;transform:translate3d(0,-90px,60px) rotateX(62deg) rotate(calc(var(--rz,0deg)*4))}
.js [data-pf-grupo].visivel .cartao{opacity:1;transform:rotate(var(--rz,0deg));transition:transform 1s var(--curva) calc(var(--i,0)*.11s),opacity .45s ease calc(var(--i,0)*.11s)}

/* ---------- os cinco lugares puxados pelo fio (M2). Sem .ativo (sem JS, menos movimento): página corrida ---------- */
.lugares-palco{position:relative}
.lugares-palco>.cel-cena,.lugares-fios{display:none}
.lugares-trilho.ativo{height:260vh} /* dono (#205): o fio começa a puxar em menos de 1 tela de rolagem depois que a cena prende */
.lugares:has(.lugares-trilho.ativo){padding-top:0}
.lugares-trilho.ativo .lugares-palco{container:palco/size;position:sticky;top:68px;height:calc(100vh - 68px - var(--pf-aviso,0px));height:calc(100svh - 68px - var(--pf-aviso,0px))} /* --pf-aviso: altura do aviso de cookies (site.js) */
.lugares-trilho.ativo .cartoes{position:absolute;inset:0 var(--margem);margin:0;display:block;z-index:2} /* acima do fio: ele chega na borda do cartão e não risca o texto */
/* anel em volta do título (dono, #205: "mais perto do centro"): cada cartão a partir do centro do palco,
   centrado pela margem (o transform é do JS, que puxa o cartão) */
.lugares-trilho.ativo .cartao{--cw:clamp(150px,19vw,232px);--ch:95px;position:absolute;left:calc(50% + var(--dx));top:calc(46% + var(--dy));width:var(--cw);margin:calc(var(--ch) * -1) 0 0 calc(var(--cw) / -2);will-change:transform,opacity}
/* três à esquerda e dois à direita, fora da coluna do meio, onde o celular aparece */
.lugares-trilho.ativo .l1{--dx:-26%;--dy:-26%}
.lugares-trilho.ativo .l2{--dx:-28%;--dy:8%}
.lugares-trilho.ativo .l5{--dx:-20%;--dy:38%}
.lugares-trilho.ativo .l3{--dx:26%;--dy:-26%}
.lugares-trilho.ativo .l4{--dx:27%;--dy:14%}
.lugares-trilho.ativo .lugares-cap{position:absolute;left:50%;top:46%;width:min(360px,calc(100% - 2*var(--margem)));margin:0;padding:0;text-align:center;transform:translate(-50%,-50%);z-index:4;max-width:none;pointer-events:none}
.lugares-trilho.ativo .lugares-cap.virada,.lugares-trilho.ativo .lugares-cap.t-titulo{font-size:clamp(26px,2.8vw,38px)}
.lugares-trilho.ativo .lugares-cap.t-lead{font-size:clamp(17px,1.4vw,19px);opacity:1}
.lugares-trilho.ativo .lugares-fios{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.lugares-fios path{fill:none;stroke:var(--em);stroke-width:3;stroke-linecap:round;opacity:0}
.lugares-trilho.ativo .lugares-palco>.cel-cena{display:flex;position:absolute;left:50%;top:47%;--cel-w:clamp(150px,15vw,200px);transform:translate(-50%,-50%);z-index:3;opacity:0}

/* ---------- setinha para baixo (dono, #205): no topo (fixa, some ao rolar) e na cena presa ---------- */
.seta{position:fixed;left:50%;bottom:calc(var(--pf-aviso,0px) + 18px);z-index:40;display:grid;place-items:center;width:46px;height:46px;margin-left:-23px;border-radius:50%;color:var(--tinta-fg);background:rgba(23,26,28,.6);border:1px solid rgba(237,233,225,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-decoration:none;transition:opacity .35s}
.seta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:pf-seta 1.8s ease-in-out infinite}
@keyframes pf-seta{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.seta-topo{bottom:calc(var(--pf-aviso,0px) + 16px)} /* no pé da 1ª tela; o site.js esconde se encostar em texto */
.hero .pts{display:none} /* no topo, a seta faz o papel dos pontinhos */
.seta-topo.bate{opacity:0;pointer-events:none}
.seta.some{opacity:0;pointer-events:none}
html:not(.js) .seta,.seta-cena{display:none}
.lugares-trilho.ativo .seta-cena{display:grid;position:absolute;bottom:16px;z-index:5;color:var(--fg);background:color-mix(in srgb,var(--bg) 85%,transparent);border-color:color-mix(in srgb,var(--fg) 22%,transparent)}

/* ---------- revelar (texto que entra) ---------- */
/* só o estado ESCONDIDO é definido: ao aparecer, cada texto volta à opacidade do próprio desenho (.t-lead .86 etc.) */
.js .revela{transition:opacity .7s ease,transform .8s var(--curva)}
.js .revela:not(.visivel){opacity:0;transform:translateY(22px)}

/* ---------- navegação ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;color:var(--tinta-fg);transition:background .3s,box-shadow .3s}
html:not(.js) .nav,.nav.rolou,.nav.fixa{background:rgba(23,26,28,.88);box-shadow:0 1px 0 rgba(255,255,255,.07);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav .caixa{display:flex;align-items:center;gap:22px;height:68px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 21px/1 var(--f-editorial)}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px}
.nav-links a{text-decoration:none;opacity:.8}
.nav-links a:hover{opacity:1}
.nav-direita{display:flex;align-items:center;gap:18px;margin-left:26px;font-size:15px}
.nav-direita a:not(.btn){text-decoration:none;opacity:.85}
.nav .btn{--fg:var(--tinta-fg);--bg:var(--tinta-bg)}

/* ---------- blocos da landing ---------- */
.hero{padding-top:calc(68px + clamp(40px,4.5vw,64px));min-height:min(100svh,940px)}
.hero .caixa{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:clamp(32px,5vw,72px)}
.hero-texto>*+*{margin-top:24px}
.hero-texto .t-hero{margin-top:22px}
.hero .cel-cena{position:relative;--cel-w:min(clamp(230px,21vw,282px),calc((100vh - 200px) * .462))} /* menor que os elos: o selo 'tela real · dados de exemplo' tem de caber na 1ª tela (1280x800) */
.hero .cel-cena::before{content:"";position:absolute;width:140%;aspect-ratio:1;left:-20%;top:4%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ponto) 22%,transparent),transparent);z-index:-1}

.cabeca>*+*{margin-top:22px}
.virada{margin-top:clamp(40px,6vw,72px);max-width:22ch}

.fio{position:relative;margin-top:clamp(48px,7vw,96px)}
.fio-linha{position:absolute;left:calc(50% - 5px);top:0;width:10px;height:100%;overflow:visible}
.fio-linha path{fill:none;stroke-width:3;stroke-linecap:butt} /* 10 px de largura = 10 unidades: 3 unidades = 3 px */
.fio-base{stroke:color-mix(in srgb,var(--fg) 18%,transparent)}
.fio-feito{stroke:var(--em);stroke-dasharray:1;stroke-dashoffset:1}
.elo{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,8vw,120px);padding:clamp(20px,2.5vw,36px) 0}
.elo .cel-cena{--cel-w:clamp(200px,19vw,252px)}
.elo-texto{max-width:26em}
.elo-texto>*+*{margin-top:14px}
.elo:nth-child(odd of .elo) .elo-texto{justify-self:end;text-align:right}
.elo:nth-child(even of .elo) .elo-texto{order:2}
.elo-ponto{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--bg);border:3px solid color-mix(in srgb,var(--fg) 30%,transparent);transition:border-color .3s,background .3s,transform .3s var(--curva)}
.elo-ponto.on{border-color:var(--em);background:var(--em);transform:scale(1.15)}
.ical{display:flex;gap:16px;align-items:flex-start;margin:clamp(40px,6vw,72px) auto 0;max-width:40em;padding:22px 26px;border-radius:var(--raio);background:color-mix(in srgb,var(--fg) 7%,transparent);font-size:17px}
.ical .casa{color:var(--ponto);margin-top:2px}

.vsl{position:relative;margin-top:clamp(36px,5vw,56px);border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#000;box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.vsl video{width:100%;height:100%;object-fit:cover}
/* o botão fica embaixo, para não tampar o título do poster; os controles nativos só aparecem depois do clique (site.js) */
.vsl-play{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:flex-start;padding:clamp(16px,3vw,32px);background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55));color:#fff;font:600 17px/1.2 var(--f-texto);text-align:left}
.js .vsl-play{display:flex}
.vsl-botao{display:flex;align-items:center;gap:14px}
.vsl-circulo{flex:none;display:grid;place-items:center;width:clamp(56px,7vw,76px);height:clamp(56px,7vw,76px);border-radius:50%;background:var(--fg);color:var(--bg);font-size:24px;padding-left:4px;transition:transform .25s var(--curva)}
.vsl-play:hover .vsl-circulo{transform:scale(1.06)}
.vsl.tocando .vsl-play{display:none}
.depois-vsl{margin-top:32px;display:flex;justify-content:center}

.passos{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,88px);align-items:center;margin-top:clamp(40px,6vw,72px)}
.passos ol{list-style:none;counter-reset:p;display:grid;gap:26px}
.passos li{counter-increment:p;display:grid;grid-template-columns:44px 1fr;gap:4px 16px}
.passos li::before{content:"0" counter(p);grid-row:span 2;font:600 15px/1.9 var(--f-texto);color:var(--ponto);letter-spacing:.08em}
.passos li b{font:620 21px/1.25 var(--f-impacto)}
.passos li span{opacity:.84}
.exemplo{margin-top:30px;padding:20px 22px;border-radius:var(--raio);border:1.5px dashed color-mix(in srgb,var(--fg) 35%,transparent)}
.exemplo small{display:block;font:600 12px/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:10px}
.exemplo p{font:italic 400 18px/1.5 var(--f-apoio)}

.duas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:center}

.precos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(40px,6vw,64px);perspective:1400px}
.preco{color:#211e1b;--fg:#211e1b;--bg:#fbf8f2;display:flex;flex-direction:column;gap:10px;padding:28px 24px;border-radius:16px;background:#fbf8f2;border:1px solid rgba(33,30,27,.1);box-shadow:0 20px 40px -28px rgba(33,30,27,.6)}
.preco h3{font:600 13px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.preco .valor{opacity:1;font:650 42px/1 var(--f-impacto);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.preco .valor small{font:500 16px/1 var(--f-texto);letter-spacing:0;opacity:.7}
.preco p{font-size:15px;opacity:.82;flex:1}
.preco .btn{margin-top:14px;justify-content:center;min-height:48px;padding:0 14px;gap:6px;font-size:14px;white-space:nowrap} /* cabe numa linha no cartão de 1/4 da largura */
.js [data-pf-grupo] .preco{opacity:0;transform:rotateY(-78deg) translateZ(-30px);transform-origin:left center}
.js [data-pf-grupo].visivel .preco{opacity:1;transform:none;transition:transform .9s var(--curva) calc(var(--i,0)*.12s),opacity .4s ease calc(var(--i,0)*.12s)}
.depois-precos{margin-top:28px;text-align:center}

.perguntas{margin-top:clamp(36px,5vw,56px);max-width:52em}
.perguntas details{border-top:1px solid color-mix(in srgb,var(--fg) 16%,transparent)}
.perguntas details:last-child{border-bottom:1px solid color-mix(in srgb,var(--fg) 16%,transparent)}
.perguntas summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font:400 clamp(20px,2vw,24px)/1.3 var(--f-editorial);cursor:pointer}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";font:300 28px/1 var(--f-texto);color:var(--em);transition:transform .25s var(--curva)}
.perguntas details[open] summary::after{transform:rotate(45deg)}
.perguntas details p{padding:0 0 24px;max-width:42em;opacity:.86}

.final{text-align:center}
.final .t-titulo{margin:0 auto;max-width:16ch}
.final .acoes{justify-content:center;margin-top:34px}
.final p{margin:22px auto 0;max-width:30em}

.rodape{padding:64px 0 48px;font-size:15px;background:#111315;color:#cfcbc3}
.rodape .caixa{display:grid;gap:28px}
.rodape nav{display:flex;flex-wrap:wrap;gap:12px 26px}
.rodape a{text-decoration:none;opacity:.85}
.rodape a:hover{opacity:1;text-decoration:underline}
.rodape .redes{display:flex;gap:16px}
.rodape .redes svg{width:22px;height:22px}
.rodape .legal{font-size:14px;opacity:.75}
.pf-cookies-link{font:inherit;color:inherit;text-decoration:underline;opacity:.85}

/* ---------- demonstração (M3): topo curto e atalhos para os módulos ---------- */
.hero-curto{min-height:0;padding-bottom:clamp(56px,7vw,96px)}
.hero-curto .caixa{display:block}
.hero-curto .t-hero{max-width:14ch}
.atalhos{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.atalhos a{padding:9px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--fg) 28%,transparent);text-decoration:none;font-size:14px;opacity:.9}
.atalhos a:hover{border-color:var(--fg);opacity:1}
/* tour compacto: os celulares se alternam de lado, então cada elo sobe por cima do fim do anterior
   (sem encolher o celular); no celular 390, que empilha, só o respiro diminui */
.pagina-demo{--respiro:clamp(56px,7vw,100px)} /* demonstração: menos respiro entre os blocos */
.pagina-demo .fio{margin-top:clamp(32px,4vw,56px)}
.fio-compacto .elo{padding:8px 0}
.fio-compacto .elo+.elo{margin-top:calc(clamp(200px,19vw,252px) * -.72)} /* --cel-w mora no .cel-cena, não aqui */
.fio-compacto .elo .cel-cena{--cel-w:clamp(200px,19vw,252px)}

/* ---------- cadastro e formulários (M3) ---------- */
.nav-pergunta{opacity:.7}
.marca+.nav-direita{margin-left:auto} /* páginas sem os links de seção: o 'Entrar' vai para a direita */
.cadastro{min-height:100vh;padding:calc(68px + clamp(28px,5vw,64px)) 0 clamp(48px,7vw,96px)}
.cadastro-grade{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:start}
.cadastro-form>*+*{margin-top:18px}
.cadastro-form .t-titulo{max-width:14ch}
.form{display:grid;gap:22px;margin-top:28px}
.form fieldset{border:0;display:grid;gap:14px}
.form legend{font:600 12px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:12px}
.campo{display:grid;gap:6px}
.campo>span:first-child,.campo>label{font:600 14px/1.3 var(--f-texto)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=password]{width:100%;height:52px;padding:0 14px;border:1.5px solid rgba(33,30,27,.22);border-radius:10px;background:#fff;color:#211e1b;font:400 16px/1 var(--f-texto)}
.form input:focus-visible{outline:3px solid var(--ponto);outline-offset:1px;border-color:transparent}
.form input::placeholder{color:rgba(33,30,27,.45)}
.campos-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.senha{position:relative;display:block}
.senha input{padding-right:52px}
.ver-senha{position:absolute;right:6px;top:50%;width:40px;height:40px;margin-top:-20px;display:grid;place-items:center;border-radius:8px;color:#211e1b;opacity:.65}
.ver-senha:hover,.ver-senha[aria-pressed=true]{opacity:1}
.ver-senha svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.planos-pagos{border-top:1px solid rgba(33,30,27,.14);padding-top:14px}
.planos-pagos summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
.planos-pagos summary::-webkit-details-marker{display:none}
.planos-pagos summary::before{content:"+";font:300 22px/1 var(--f-texto);color:var(--em)}
.planos-pagos[open] summary::before{content:"−"}
.ciclo{display:flex;gap:18px;margin:16px 0 12px;font-size:15px}
.ciclo label,.aceite{display:flex;align-items:center;gap:8px;cursor:pointer}
.planos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plano{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1.5px solid rgba(33,30,27,.18);border-radius:12px;background:#fbf8f2;cursor:pointer}
.plano:has(input:checked){border-color:var(--em);box-shadow:0 0 0 1px var(--em)}
.plano input,.aceite input,.ciclo input{width:20px;height:20px;accent-color:var(--em);flex:none;margin-top:2px}
.plano span{display:grid;gap:3px;font-size:14px}
.plano b{font:620 17px/1.2 var(--f-impacto)}
.plano em{color:inherit;font-weight:600}
.plano small{opacity:.75}
.aceite{align-items:flex-start;font-size:15px;line-height:1.5}
.aceite a{font-weight:600}
.btn-cheio{width:100%;justify-content:center;min-height:56px}
.aviso-erro{padding:14px 16px;border-radius:10px;background:#fbe9e7;border-left:4px solid #a8322a;color:#5c1712;font-size:15px}
.aviso-erro a{font-weight:600}
.cadastro-lado{border-radius:22px;padding:clamp(24px,3vw,40px);position:sticky;top:92px}
.passos-lista{list-style:none;counter-reset:p;display:grid;gap:18px;margin:18px 0 28px}
.passos-lista li{counter-increment:p;display:grid;grid-template-columns:36px 1fr;gap:2px 12px}
.passos-lista li::before{content:"0" counter(p);grid-row:span 2;font:600 14px/1.6 var(--f-texto);color:var(--ponto)}
.passos-lista b{font:620 18px/1.3 var(--f-impacto)}
.passos-lista span{opacity:.84;font-size:15px}
.recorte{margin:0}
.recorte picture,.recorte img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 2px var(--em),0 24px 50px -24px rgba(0,0,0,.6)}
.rodape-curto{padding:28px 0}

/* ---------- entrar (M3) ---------- */
.entrar{min-height:100vh;padding:calc(68px + clamp(32px,6vw,80px)) 0 clamp(48px,7vw,96px)}
.entrar-caixa{display:grid;place-items:center}
.entrar-cartao{width:100%;max-width:460px}
.entrar-cartao>*+*{margin-top:18px}
.entrar-cartao .t-titulo{max-width:none}
.aviso-ok{padding:14px 16px;border-radius:10px;background:#e7f4ef;border-left:4px solid #158c83;color:#0f4a43;font-size:15px}
.entrar-links{font-size:15px}
.entrar-links a{font-weight:600}
.entrar-nota{font:italic 400 14px/1.5 var(--f-apoio);opacity:.8}

/* ---------- artigo (/cinco-lugares e o modelo dos artigos de SEO): cabeça escura com o título, corpo claro
   numa coluna de leitura, telas reais nos celulares do site ---------- */
.artigo-coluna{max-width:calc(720px + 2 * var(--margem))}
.artigo-topo{padding:calc(68px + clamp(48px,8vw,112px)) 0 clamp(48px,7vw,88px)}
.artigo-topo .t-titulo{max-width:none;font-size:clamp(34px,4.6vw,56px)}
.artigo-topo .t-lead{margin-top:24px}
.artigo-corpo{padding:clamp(48px,7vw,88px) 0 var(--respiro);font-size:19px;line-height:1.72}
.artigo-corpo p{margin:0 0 20px}
.artigo-corpo h2{font:400 clamp(28px,3.4vw,38px)/1.18 var(--f-editorial);letter-spacing:-.005em;margin:64px 0 20px}
.artigo-corpo ol,.artigo-corpo ul{margin:0 0 24px;padding-left:24px}
.artigo-corpo li{margin-bottom:10px}
.artigo-corpo li::marker{color:var(--em);font-weight:700}
.artigo-corpo em{font-family:var(--f-apoio)}
.artigo-lugares{list-style:none;padding:0!important;counter-reset:lugar}
.artigo-lugares li{counter-increment:lugar;position:relative;padding-left:58px;min-height:44px;margin-bottom:16px}
.artigo-lugares li::before{content:counter(lugar);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font:400 22px/1 var(--f-editorial);color:var(--em);border:1.5px solid color-mix(in srgb,var(--em) 55%,transparent)}
.artigo-checklist{list-style:none;padding:0!important;display:grid;gap:10px}
.artigo-checklist li{margin:0}
.artigo-checklist label{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-radius:var(--raio);line-height:1.5;cursor:pointer;
  background:color-mix(in srgb,var(--fg) 5%,transparent);border:1px solid color-mix(in srgb,var(--fg) 10%,transparent);transition:background .2s,border-color .2s}
.artigo-checklist input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--ponto)}
.artigo-checklist label:has(input:checked){background:color-mix(in srgb,var(--ponto) 12%,transparent);border-color:color-mix(in srgb,var(--ponto) 45%,transparent)}
.artigo-checklist input:focus-visible{outline:3px solid var(--ponto);outline-offset:2px}
.artigo-telas{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:48px 0 40px;justify-items:center}
.artigo-telas .cel-cena{--cel-w:clamp(200px,24vw,262px)}
.artigo-legenda{text-align:center;font-weight:600;font-size:16px;margin:0 0 18px!important}
.artigo-nota{text-align:center;font-size:15px;opacity:.72}
.artigo-cta{margin-top:36px!important}
@media (max-width:560px){
  .artigo-corpo{font-size:18px}
  .artigo-telas{grid-template-columns:1fr;gap:40px}
  .artigo-telas .cel-cena{--cel-w:70vw}
}

/* ---------- política e termos (includes/site-juridico.php): o texto jurídico é o de antes, sem classes;
   a aparência sai toda da estrutura dele (título, aviso, índice, seções, fecho) ---------- */
.juridico{padding:calc(68px + clamp(32px,6vw,72px)) 0 clamp(56px,8vw,112px);font-size:17px;line-height:1.7}
.juridico-texto{max-width:1080px;margin:0 auto}
.juridico-texto>div{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(40px,5vw,72px)} /* minmax: a tabela larga rola dentro dela, não alarga a coluna */
.juridico-texto>div>div:first-child{padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid color-mix(in srgb,var(--fg) 16%,transparent)}
.juridico-texto>div>div:first-child>div{font:600 13px/1.4 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--ponto);margin-bottom:10px}
.juridico-texto>div>div:first-child p{font-size:15px;opacity:.75;margin:4px 0 0}
.juridico h1{font:400 clamp(38px,5.4vw,64px)/1.05 var(--f-editorial);letter-spacing:-.01em;margin:0 0 16px}
.juridico-texto>div>div:nth-child(2):not(:has(nav)){background:color-mix(in srgb,var(--fg) 6%,transparent);border-left:4px solid var(--em);border-radius:0 var(--raio) var(--raio) 0;padding:18px 22px;margin-bottom:32px}
.juridico-texto>div>div:nth-child(2):not(:has(nav)) h3{margin-top:0}
.juridico-texto>div>div:nth-child(2):not(:has(nav)) p:last-child{margin-bottom:0}
.juridico-texto>div>div:has(>nav){background:color-mix(in srgb,var(--fg) 5%,transparent);border-radius:var(--raio);padding:20px 22px;margin-bottom:44px}
.juridico-texto>div>div:has(>nav) h2{font:600 13px/1.4 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin:0 0 10px}
.juridico nav{display:grid;gap:0 24px;font-size:15px;line-height:1.4}
.juridico nav a{text-decoration:none;padding:6px 0;opacity:.82}
.juridico nav a:hover{opacity:1;text-decoration:underline}
.juridico section+section{margin-top:48px}
.juridico h2{font:400 clamp(26px,3vw,34px)/1.2 var(--f-editorial);margin:0 0 16px}
.juridico h3{font:700 18px/1.35 var(--f-texto);margin:28px 0 10px}
.juridico h4{font:700 16px/1.4 var(--f-texto);margin:18px 0 6px}
.juridico p{margin:0 0 14px}
.juridico ul{margin:0 0 16px;padding-left:22px}
.juridico li{margin-bottom:6px}
.juridico li::marker{color:var(--em)}
.juridico a{color:inherit;text-decoration-color:color-mix(in srgb,var(--em) 75%,transparent);text-underline-offset:3px}
.juridico table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:15px;line-height:1.5}
.juridico th,.juridico td{padding:10px 12px;border-bottom:1px solid color-mix(in srgb,var(--fg) 14%,transparent);text-align:left;vertical-align:top}
.juridico th{font-weight:700;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.juridico section div{margin:16px 0}
.juridico section div:not(:has(>div)){background:color-mix(in srgb,var(--fg) 5%,transparent);border-radius:var(--raio);padding:16px 20px}
.juridico section div:not(:has(>div))>:first-child{margin-top:0}
.juridico section div:not(:has(>div))>:last-child{margin-bottom:0}
.juridico section div:has(>div){display:grid;gap:12px}
.juridico section div>div{margin:0}
.juridico-texto>div>div:last-child{margin-top:56px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--fg) 16%,transparent);font-size:15px;opacity:.75}
.nav-botao{background:none;border:0;padding:0;color:inherit;font:inherit;opacity:.85;cursor:pointer}
.nav-botao:hover{opacity:1}
html:not(.js) [data-pf-imprimir]{display:none}
@media (min-width:640px){
  .juridico nav{grid-template-columns:1fr 1fr}
  .juridico section div:has(>div:nth-child(2)):not(:has(>div:nth-child(3))){grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){ /* o índice vira coluna fixa ao lado do texto */
  .juridico-texto>div{grid-template-columns:240px minmax(0,1fr)}
  .juridico-texto>div>div{grid-column:2}
  .juridico-texto>div>div:has(>nav){grid-column:1;grid-row:1/span 9;align-self:start;position:sticky;top:92px;max-height:calc(100vh - 112px);overflow:auto;margin:0}
  .juridico nav{grid-template-columns:1fr}
}
@media (max-width:560px){
  .juridico{font-size:16px}
  .juridico table{display:block;overflow-x:auto} /* no celular toda tabela rola dentro dela mesma; a página não (a de 3 colunas passava 1 px em 360) */
  .juridico table:has(th:nth-child(4)) :is(th,td){min-width:190px}
}
@media print{
  .nav,.rodape,.pular,.pf-cookies{display:none!important}
  .juridico{padding:0;background:#fff;color:#000}
  .juridico-texto>div{display:block}
  .juridico-texto>div>div:has(>nav){position:static;max-height:none;overflow:visible}
}

/* ---------- aviso de cookies (includes/cookies-consentimento.php) no visual novo: só a aparência; o comportamento
   é o do include (nada de terceiros antes do Aceitar). "html" na frente vence o <style> do include, que vem depois. ---------- */
html .pf-cookies{background:#fbf8f2;color:#211e1b;border-radius:18px;padding:18px 20px;max-width:620px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55),0 0 0 1px rgba(33,30,27,.1);font:15px/1.55 var(--f-texto)}
html .pf-cookies a{color:#211e1b;text-decoration-color:#a8322a;text-underline-offset:3px}
html .pf-cookies-botoes button{border:1.5px solid #211e1b;color:#211e1b;border-radius:999px;font:600 15px/1 var(--f-texto)}
html .pf-cookies-botoes button:hover{background:rgba(33,30,27,.08)}
html .pf-cookies-botoes button:focus-visible{outline:3px solid #158c83}

/* ---------- o cartão "Instalar Pousada Flow" do js/pwa-prompt.js (login, só no celular) ----------
   O script é o mesmo do login atual e monta o cartão com classes do Tailwind, que o site novo não carrega:
   sem estas regras, o ícone sai no tamanho natural e cobre a tela. Só as classes que ele usa, presas ao cartão. */
#pf-pwa-popup{font-family:var(--f-texto);color:#211e1b}
#pf-pwa-popup .bg-white{background:#fbf8f2}
#pf-pwa-popup .rounded-2xl{border-radius:18px}
#pf-pwa-popup .shadow-2xl{box-shadow:0 24px 60px -20px rgba(0,0,0,.55),0 0 0 1px rgba(33,30,27,.08)}
#pf-pwa-popup .p-5{padding:20px}
#pf-pwa-popup .p-4{padding:16px}
#pf-pwa-popup .p-1{padding:4px}
#pf-pwa-popup .flex{display:flex}
#pf-pwa-popup .items-start{align-items:flex-start}
#pf-pwa-popup .items-center{align-items:center}
#pf-pwa-popup .justify-center{justify-content:center}
#pf-pwa-popup .gap-2{gap:8px}
#pf-pwa-popup .gap-3{gap:12px}
#pf-pwa-popup .gap-4{gap:16px}
#pf-pwa-popup .flex-1{flex:1}
#pf-pwa-popup .flex-shrink-0{flex-shrink:0}
#pf-pwa-popup .w-14{width:56px}
#pf-pwa-popup .h-14{height:56px}
#pf-pwa-popup .w-7{width:28px}
#pf-pwa-popup .h-7{height:28px}
#pf-pwa-popup .rounded-xl{border-radius:12px}
#pf-pwa-popup .rounded-full{border-radius:999px}
#pf-pwa-popup .font-bold{font-weight:700}
#pf-pwa-popup .font-medium{font-weight:500}
#pf-pwa-popup .text-base{font-size:16px}
#pf-pwa-popup .text-sm{font-size:14px}
#pf-pwa-popup .text-xs{font-size:12px}
#pf-pwa-popup .text-center{text-align:center}
#pf-pwa-popup .underline{text-decoration:underline}
#pf-pwa-popup .mt-1{margin-top:4px}
#pf-pwa-popup .mt-3{margin-top:12px}
#pf-pwa-popup .mt-4{margin-top:16px}
#pf-pwa-popup .space-y-3>*+*{margin-top:12px}
#pf-pwa-popup .py-2\.5{padding-top:10px;padding-bottom:10px}
#pf-pwa-popup .border{border:1px solid rgba(33,30,27,.18)}
#pf-pwa-popup .text-gray-500,#pf-pwa-popup .text-gray-600,#pf-pwa-popup .text-gray-400{color:#5b5650}
#pf-pwa-popup .text-gray-700,#pf-pwa-popup .text-gray-900{color:#211e1b}
#pf-pwa-popup .bg-blue-50{background:#efe9de}
#pf-pwa-popup .bg-blue-100{background:#e3dccf}
#pf-pwa-popup .text-blue-700{color:#211e1b}
#pf-pwa-popup .bg-blue-600{background:#211e1b}
#pf-pwa-popup .text-white{color:#fbf8f2}
#pf-pwa-popup .fa-times::before{content:"×";font-style:normal;font-size:22px;line-height:1}
#pf-pwa-popup .fa-download::before{content:"↓";font-style:normal}
#pf-pwa-popup .fa-arrow-up::before{content:"↑";font-style:normal;font-weight:700}
#pf-pwa-popup .fas{font-style:normal}

/* ---------- guia visual (/landing-nova-guia) ---------- */
.amostras{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:28px}
.amostra{border-radius:12px;padding:18px 16px 16px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.amostra b{font:400 30px/1 var(--f-editorial)}
.amostra code{font:12px/1.5 ui-monospace,monospace;opacity:.85}

@media (max-width:1100px){.nav-links{display:none}.nav-direita{margin-left:auto}}
/* cartão compacto no tablet e em palco baixo (notebook 1366x657, ou qualquer tela com o aviso de cookies aberto):
   medido no próprio palco (container), senão os de cima encostam nos de baixo e cobrem o texto */
@container palco (max-width:820px) or (max-height:690px){
  .lugares-trilho.ativo .cartao{--cw:clamp(150px,24vw,200px);--ch:72px;padding:14px 14px 16px}
  .lugares-trilho.ativo .cartao svg{width:32px;height:32px;margin-bottom:8px}
  .lugares-trilho.ativo .cartao h3{font-size:17px;margin-bottom:4px}
  .lugares-trilho.ativo .cartao p{font-size:13px;line-height:1.4}
}
@media (max-width:900px){ /* tablet: as duas colunas nas bordas, o meio fica para o celular */
  .lugares-trilho.ativo .l1,.lugares-trilho.ativo .l2,.lugares-trilho.ativo .l5{--dx:-33%}
  .lugares-trilho.ativo .l3,.lugares-trilho.ativo .l4{--dx:33%}
}

/* ---------- celular (≤ 960 px) ---------- */
@media (max-width:960px){
  .hero .caixa,.passos,.duas,.cadastro-grade{grid-template-columns:1fr}
  .cadastro-lado{position:static}
  .hero{min-height:0}
  .cartoes{grid-template-columns:repeat(2,1fr)}
  .cartoes .cartao:last-child{grid-column:1/-1;max-width:calc(50% - 9px);justify-self:center}
  .precos{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .nav-direita{margin-left:auto}
  .fio-linha{left:6px}
  .elo{grid-template-columns:1fr;gap:28px;padding-left:40px}
  .elo .elo-texto,.elo:nth-child(odd of .elo) .elo-texto,.elo:nth-child(even of .elo) .elo-texto{justify-self:start;text-align:left;order:0}
  .elo-ponto{left:11px;top:40px}
  .cel-cena{--cel-w:clamp(210px,58vw,270px)}
  .cel{--lupa-w:360px}
}
@media (max-width:560px){
  .lugares-trilho.ativo .cartao{--cw:44%;margin:0}
  /* duas fileiras (em cima e embaixo), um no meio à esquerda; o celular fica no meio, à direita */
  .lugares-trilho.ativo .l1{left:0;top:4%}
  .lugares-trilho.ativo .l2{left:auto;right:0;top:5%}
  .lugares-trilho.ativo .l3{left:1%;top:auto;bottom:6%}
  .lugares-trilho.ativo .l4{left:auto;right:0;top:auto;bottom:5%}
  .lugares-trilho.ativo .l5{left:0;top:39%}
  .lugares-trilho.ativo .lugares-palco>.cel-cena{left:72%;top:52%;--cel-w:118px}
  .lugares-trilho.ativo .lugares-palco>.cel-cena .selo{font-size:11px;margin-top:10px}
  .lugares-trilho.ativo .lugares-cap{top:50%;padding:18px;border-radius:12px;background:#fbf8f2;border:1px solid rgba(33,30,27,.1);box-shadow:0 18px 34px -22px rgba(33,30,27,.55)} /* no celular a frase passa por cima dos cartões: vira um cartão também */
  body{font-size:16px}
  .cartoes,.precos{grid-template-columns:1fr}
  .cartoes .cartao:last-child{max-width:none}
  .nav .marca span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* some da vista, fica para o leitor de tela */
  .nav .caixa{gap:14px}
  .nav-direita{gap:14px}
  .btn{min-height:50px;padding:0 20px;font-size:16px}
  .nav .btn{min-height:40px;padding:0 14px;font-size:14px}
  .campos-2,.planos{grid-template-columns:1fr}
  .nav-pergunta{display:none}
  .cel-cena,.hero .cel-cena{--cel-w:86vw}
  .cel{--ry:-4deg;--rx:3deg;--rz:0deg;--lupa-w:min(344px,calc(100vw - 2 * var(--margem)))} /* inclina pouco no celular; a lupa cabe na largura */
  .elo{padding-left:28px}
  .elo-ponto{left:5px}
  .elo .cel-cena{--cel-w:min(86vw,calc(100vw - 2 * var(--margem) - 28px))}
  .fio-compacto .elo+.elo{margin-top:clamp(8px,4vw,20px)}
  .fio-compacto .elo{gap:16px;padding:12px 0 12px 28px}
  .fio-compacto .elo .cel-cena{--cel-w:70vw} /* demo no 390: a leitura é da lupa (344 px, letra ≥12); o celular diminui */
  .fio-compacto .cel-lupa{margin-left:calc(var(--lupa-w) / -2 - 10px)} /* o celular fica à direita do fio: a lupa volta ao meio da tela */
  .vsl-botao>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* vídeo baixo: só o círculo; o texto fica para o leitor de tela */
  .t-titulo{max-width:none}
}


/* ---------- menos movimento: tudo parado e visível ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .revela:not(.visivel),.js [data-pf-grupo] .cartao,.js [data-pf-grupo] .preco{opacity:1!important;transform:none!important}
  .js [data-pf-grupo] .cartao{transform:rotate(var(--rz,0deg))!important}
  .js .subs .sub-traco path{stroke-dashoffset:0!important}
  .fio-feito{stroke-dashoffset:0!important}
  .cel{transform:rotateY(var(--ry,-10deg)) rotateX(var(--rx,4deg))}
}