/* PLAY.THUART · o que é só desta página.
   A base visual (fontes, cores, nav, hero, seções, botão de vidro, FAQ, rubro, rodapé) vem do css/thuart.css,
   cópia fiel do LAB.THUART, que copia o thuart.com.br. Aqui só entram o totem, as telas dos jogos e as seções novas. */

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px}

/* ---------------- totem ---------------- */
.totem{--tb:#2b2b29;position:relative;width:100%;max-width:var(--tw,320px);margin-inline:auto}
.totem-body{background:var(--tb);border-radius:26px 26px 14px 14px;padding:12px 12px 14px}
.totem-screen{display:block;width:100%;padding:0;border:0;background:none;border-radius:10px;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.totem-screen .scr{transition:opacity .25s var(--ease)}
.totem-screen.swap .scr{opacity:0}
.totem-screen:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.totem-plate{margin-top:14px;height:clamp(64px,7vw,96px);border-radius:8px;background:var(--c,#ff4208);color:var(--on,#fff);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 14px;transition:background .5s var(--ease),color .5s}
.totem-plate span{font-weight:900;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.totem-base{width:78%;height:18px;margin:0 auto;background:var(--tb);border-radius:0 0 12px 12px;position:relative}
.totem-base::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-8px;height:8px;border-radius:999px;background:rgba(28,28,27,.12)}

/* ---------------- tela do jogo (tudo escala com a largura da tela: cqw) ---------------- */
.scr{--c:#ff4208;--on:#fff;--bg:#f2f3eb;--k:#1c1c1b;position:relative;aspect-ratio:9/16;container-type:inline-size;overflow:hidden;
  background:var(--bg);color:var(--k);text-align:left;font-family:var(--font-mundial),system-ui,sans-serif;user-select:none}
.scr *{box-sizing:border-box}
.scr-in{position:absolute;inset:0;display:flex;flex-direction:column}
.scr-top{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:5cqw 6cqw 4.4cqw;background:var(--c);color:var(--on);transition:background .5s var(--ease),color .5s}
.scr-brand{font-weight:900;font-size:6.2cqw;letter-spacing:-.02em;text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.scr-meta{flex:none;font-weight:700;font-size:4.2cqw;line-height:1;opacity:.85;white-space:nowrap}
.scr-body{flex:1;position:relative;display:flex;flex-direction:column;padding:6cqw;min-height:0}
.scr-foot{padding:4.6cqw 6cqw;text-align:center;font-weight:700;font-size:5cqw;line-height:1;background:var(--k);color:var(--bg)}
.s-k{font-weight:700;font-size:4.2cqw;line-height:1.2;opacity:.6}
.s-t{font-weight:900;font-size:8.6cqw;line-height:1;letter-spacing:-.03em}
.s-p{font-size:4.6cqw;line-height:1.35;opacity:.75}

/* roleta */
.b-roleta{align-items:center;justify-content:space-between}
.b-roleta .s-t{text-align:center;width:100%}
.rl{position:relative;width:86cqw;aspect-ratio:1;margin:4cqw auto}
.rl-w{width:100%;height:100%;display:block;transform:rotate(var(--rot,0deg));transition:transform 4.2s cubic-bezier(.12,.62,.08,1)}
.rl-w text{font-family:var(--font-mundial),sans-serif;font-weight:900;font-size:11px;letter-spacing:-.02em}
.rl-pin{position:absolute;left:50%;top:-2.5cqw;width:9cqw;height:10cqw;transform:translateX(-50%);background:var(--k);clip-path:polygon(0 0,100% 0,50% 100%);z-index:2}
.rl-hub{position:absolute;left:50%;top:50%;width:24cqw;height:24cqw;transform:translate(-50%,-50%);border-radius:50%;background:var(--k);color:var(--bg);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:4.6cqw;letter-spacing:-.01em;z-index:2}
.rl-res{position:absolute;inset:0;z-index:5;background:var(--c);color:var(--on);display:flex;flex-direction:column;justify-content:center;gap:4cqw;padding:8cqw;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.rl-res.on{opacity:1}
.rl-res .big{font-weight:900;font-size:13cqw;line-height:.95;letter-spacing:-.04em}
.rl-res .fake{margin-top:4cqw;height:12cqw;border-radius:99px;background:var(--bg);color:var(--k);display:flex;align-items:center;padding:0 5cqw;font-size:4.8cqw;opacity:.95}
.rl-res .s-p{opacity:.95}
.rl-res .s-k{opacity:.9}

/* quiz */
.qz-h{display:flex;justify-content:space-between;font-weight:700;font-size:4.4cqw}
.qz-bar{margin-top:3cqw;height:2.4cqw;border-radius:99px;background:rgba(28,28,27,.12);overflow:hidden}
.qz-bar i{display:block;height:100%;width:62%;background:var(--c);border-radius:99px;transform-origin:left;animation:qzT 6s linear infinite}
@keyframes qzT{from{transform:scaleX(1)}to{transform:scaleX(.08)}}
.qz-q{margin-top:9cqw;font-weight:900;font-size:8.4cqw;line-height:1.02;letter-spacing:-.03em;overflow-wrap:anywhere}
.qz-ops{margin-top:auto;display:grid;gap:3cqw}
.qz-ops span{display:flex;align-items:center;height:13cqw;border-radius:3cqw;padding:0 5cqw;background:#fff;font-weight:700;font-size:5cqw;box-shadow:inset 0 0 0 .5cqw rgba(28,28,27,.1)}
.qz-ops span.ok{background:var(--c);color:var(--on);box-shadow:none}

/* memória */
.mm{margin-top:auto;margin-bottom:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2.6cqw}
.mm i{aspect-ratio:3/4;border-radius:2.4cqw;background:var(--c);display:flex;align-items:center;justify-content:center;font-style:normal;
  font-weight:900;font-size:8cqw;color:var(--on);position:relative;overflow:hidden}
.mm i::before{content:"";position:absolute;inset:20%;border-radius:50%;box-shadow:inset 0 0 0 .7cqw rgba(255,255,255,.35)}
.mm i.f{background:#fff;color:var(--c);box-shadow:inset 0 0 0 .6cqw var(--c)}
.mm i.f::before,.mm i.d::before{display:none}
.mm i.d{background:rgba(28,28,27,.08)}
.mm i.d::after{content:"";position:absolute;left:38%;top:30%;width:20%;height:32%;border:solid rgba(28,28,27,.35);border-width:0 .9cqw .9cqw 0;transform:rotate(45deg)}
.mm i.p{animation:mmFlip 3.2s var(--ease) infinite}
@keyframes mmFlip{0%,40%{transform:rotateY(0)}50%,90%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}

/* caça-palavras */
.cp{margin:5cqw 0 0;display:grid;grid-template-columns:repeat(8,1fr);gap:.6cqw;font-weight:700;font-size:5.4cqw;text-align:center}
.cp b{font-weight:700;line-height:9.4cqw;border-radius:1.6cqw}
.cp b.h{background:var(--c);color:var(--on)}
.cp b.v{box-shadow:inset 0 0 0 .6cqw var(--k)}
.cp-w{margin-top:auto;display:flex;flex-wrap:wrap;gap:2cqw 4cqw;font-weight:700;font-size:4.6cqw}
.cp-w s{opacity:.45;text-decoration-thickness:.6cqw;text-decoration-color:var(--c)}

/* árvore de decisão */
.tr-ops{margin-top:6cqw;display:grid;gap:3cqw}
.tr-ops span{height:15cqw;border-radius:3cqw;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:6cqw;background:#fff;box-shadow:inset 0 0 0 .6cqw rgba(28,28,27,.12)}
.tr-ops span.on{background:var(--c);color:var(--on);box-shadow:none}
.tr-svg{margin-top:auto;width:100%;height:auto;display:block}
.tr-svg line{stroke:rgba(28,28,27,.2);stroke-width:1.4}
.tr-svg circle{fill:rgba(28,28,27,.2)}
.tr-svg .on{stroke:var(--c);fill:var(--c)}

/* match */
.mt{position:relative;margin:auto 0;display:grid;grid-template-columns:1fr 18cqw 1fr;align-items:stretch}
.mt-col{display:grid;gap:6cqw}
.mt-col span{height:14cqw;border-radius:3cqw;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:5cqw;box-shadow:inset 0 0 0 .6cqw rgba(28,28,27,.12)}
.mt-col span.on{background:var(--c);color:var(--on);box-shadow:none}
.mt svg{width:100%;height:100%;overflow:visible}
.mt svg path{fill:none;stroke-width:1.6;stroke-linecap:round}

/* click game */
.cg-h{display:flex;justify-content:space-between;align-items:baseline;font-weight:900;font-size:7cqw;letter-spacing:-.02em}
.cg-h small{font-weight:700;font-size:4.2cqw;opacity:.6;letter-spacing:0}
.cg-f{position:relative;flex:1;margin-top:4cqw;border-radius:3cqw;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 .6cqw rgba(28,28,27,.08)}
.cg-f i{position:absolute;top:var(--t,10%);width:13cqw;height:13cqw;border-radius:50%;background:var(--c);animation:cgFall 3.6s linear infinite;animation-delay:var(--d,0s)}
.cg-f i.x{background:var(--k);border-radius:2cqw;transform:rotate(45deg)}
@keyframes cgFall{from{top:-16%}to{top:104%}}
.cg-tap{position:absolute;left:52%;top:46%;width:22cqw;height:22cqw;border-radius:50%;box-shadow:0 0 0 .8cqw var(--c);opacity:0;animation:cgTap 1.8s var(--ease) infinite}
@keyframes cgTap{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.3);opacity:0}}

/* martelo */
.mr-h{display:flex;justify-content:space-between;align-items:baseline;font-weight:900;font-size:7cqw;letter-spacing:-.02em}
.mr-h small{font-weight:700;font-size:4.2cqw;opacity:.6;letter-spacing:0}
.mr{margin:auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:7cqw 4cqw}
.mr span{position:relative;aspect-ratio:1;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.mr span::after{content:"";position:absolute;left:4%;right:4%;bottom:0;height:34%;border-radius:50%;background:var(--k)}
.mr b{position:relative;z-index:1;width:64%;height:78%;margin-bottom:12%;border-radius:40% 40% 10% 10%;background:var(--c);transform:translateY(105%);animation:mrPop 2.4s var(--ease) infinite;animation-delay:var(--d,0s)}
.mr b::before,.mr b::after{content:"";position:absolute;top:30%;width:14%;height:14%;border-radius:50%;background:var(--on)}
.mr b::before{left:26%}.mr b::after{right:26%}
.mr span{-webkit-mask-image:linear-gradient(#000 86%,transparent 86%);mask-image:linear-gradient(#000 86%,transparent 86%)}
@keyframes mrPop{0%,15%{transform:translateY(105%)}30%,55%{transform:translateY(0)}70%,100%{transform:translateY(105%)}}

/* 7 erros */
.er-h{display:flex;justify-content:space-between;align-items:baseline;font-weight:900;font-size:6.4cqw;letter-spacing:-.02em}
.er-h small{font-weight:700;font-size:4.2cqw;opacity:.6;letter-spacing:0}
.er{margin-top:4cqw;flex:1;display:grid;grid-template-rows:1fr 1fr;gap:3cqw;min-height:0}
.er svg{width:100%;height:100%;display:block;border-radius:3cqw;background:#fff}
.er .ring{fill:none;stroke:var(--k);stroke-width:2.2}

/* telas do fluxo */
.b-attract{justify-content:center;gap:5cqw}
.at-b{font-weight:900;font-size:15cqw;line-height:.9;letter-spacing:-.045em;text-transform:uppercase;color:var(--c);overflow-wrap:anywhere}
.at-t{font-weight:300;font-size:7cqw;line-height:1.1}
.at-tap{margin-top:8cqw;width:26cqw;height:26cqw;border-radius:50%;background:var(--c);position:relative;animation:atP 1.8s var(--ease) infinite}
.at-tap::after{content:"";position:absolute;inset:-5cqw;border-radius:50%;box-shadow:0 0 0 .8cqw var(--c);opacity:.4}
@keyframes atP{0%,100%{transform:scale(1)}50%{transform:scale(.88)}}
.mn{margin-top:6cqw;display:grid;gap:3cqw}
.mn span{display:flex;align-items:center;gap:4cqw;height:17cqw;padding:0 5cqw;border-radius:3cqw;background:#fff;font-weight:900;font-size:6cqw;letter-spacing:-.02em;box-shadow:inset 0 0 0 .6cqw rgba(28,28,27,.1)}
.mn span i{flex:none;width:8cqw;height:8cqw;border-radius:50%;background:var(--c)}
.mn span:nth-child(2) i{border-radius:1.6cqw}
.mn span:nth-child(3) i{border-radius:1.6cqw;transform:rotate(45deg)}
.mn span.on{background:var(--c);color:var(--on);box-shadow:none}
.mn span.on i{background:var(--on)}
.cd{margin-top:6cqw;display:grid;gap:3cqw}
.cd label{display:block;font-weight:700;font-size:4cqw;opacity:.6;margin-bottom:1.2cqw}
.cd .in{height:12cqw;border-radius:99px;background:#fff;display:flex;align-items:center;padding:0 5cqw;font-size:5cqw;box-shadow:inset 0 0 0 .6cqw rgba(28,28,27,.12)}
.cd .ok{display:flex;gap:3cqw;align-items:flex-start;font-size:4cqw;line-height:1.3;margin-top:1cqw}
.cd .ok i{flex:none;width:6cqw;height:6cqw;border-radius:1.4cqw;background:var(--c);position:relative}
.cd .ok i::after{content:"";position:absolute;left:30%;top:14%;width:28%;height:52%;border:solid var(--on);border-width:0 .9cqw .9cqw 0;transform:rotate(45deg)}
.cd-btn{margin-top:auto;height:15cqw;border-radius:99px;background:var(--c);color:var(--on);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:6cqw}
.b-premio{background:var(--c);color:var(--on);justify-content:center;gap:4cqw}
.b-premio .s-k{opacity:.8}
.b-premio .big{font-weight:900;font-size:16cqw;line-height:.9;letter-spacing:-.045em}
.rk{margin-top:5cqw;list-style:none;display:grid;gap:2.4cqw}
.rk li{display:grid;grid-template-columns:8cqw 1fr auto;align-items:center;gap:3cqw;height:12.5cqw;padding:0 4cqw;border-radius:3cqw;background:#fff;font-size:5cqw;font-weight:700}
.rk li b{font-weight:900;opacity:.4}
.rk li em{font-style:normal;font-weight:900}
.rk li.on{background:var(--c);color:var(--on)}
.rk li.on b{opacity:.8}
.pl{margin-top:4cqw;border-radius:2.4cqw;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 .5cqw rgba(28,28,27,.12)}
.pl table{width:100%;border-collapse:collapse;font-size:3.7cqw;line-height:1.1}
.pl th{background:var(--k);color:var(--bg);font-weight:700;text-align:left;padding:2.4cqw 2cqw}
.pl td{padding:2.4cqw 2cqw;border-top:.4cqw solid rgba(28,28,27,.1);white-space:nowrap}
.pl tr:nth-child(even) td{background:rgba(28,28,27,.035)}
.pl td.n{font-variant-numeric:tabular-nums}
.pl-f{margin-top:auto;display:flex;justify-content:space-between;font-weight:900;font-size:5.4cqw;letter-spacing:-.02em}
.pl-f small{font-weight:700;font-size:4cqw;opacity:.6}

@media (prefers-reduced-motion:reduce){
  .scr *,.scr *::before,.scr *::after{animation:none!important}
  .rl-w{transition:none}
  .mr b{transform:none}
  .cg-tap{opacity:.6}
}

/* ---------------- hero: palco ---------------- */
.ph-hero2{position:relative;background:var(--night);color:var(--paper);overflow:hidden;
  height:clamp(700px,calc(100svh - 76px),940px);display:flex;align-items:center}
.ph-spot{position:absolute;top:0;bottom:0;right:max(0px,calc(50% - 700px));width:min(48%,700px);container-type:size;z-index:1;background:var(--night)}
/* totem de verdade (foto gerada) com a tela interativa encaixada nos cantos medidos:
   tela escura da foto = x 34,32% · y 20,75% · 31,36% x 43,75% da imagem, cantos ~22px */
.totem--photo{position:absolute;top:0;left:calc(50% - 50cqh * 1400 / 1738);height:100cqh;width:calc(100cqh * 1400 / 1738);max-width:none}
.ph-photo{display:block;width:100%;height:100%;mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(ellipse 66% 64% at 50% 47%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 66% 64% at 50% 47%,#000 62%,transparent 100%)}
.totem--photo .totem-screen{position:absolute;left:34.32%;top:20.75%;width:31.36%;height:43.75%;border-radius:3.8% / 2.2%;background:#050505;overflow:hidden}
.totem--photo .scr{position:absolute;inset:.8% 1.4%;aspect-ratio:auto;border-radius:3% / 1.7%}
.ph-glass{position:absolute;left:34.32%;top:20.75%;width:31.36%;height:43.75%;border-radius:3.8% / 2.2%;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 32%,transparent 33%,transparent 100%)}
.ph-hero2-in{position:relative;z-index:2;width:100%;pointer-events:none}
.ph-hero2-txt{pointer-events:auto}
.ph-hero2-txt{max-width:min(760px,56%)}
.ph-hero2 h1{font-size:clamp(48px,5.2vw,80px);line-height:.92}
@media (min-width:961px){.ph-hero2 h1 .ln{white-space:nowrap}}
@media (min-width:601px) and (max-width:960px){.ph-hero2 h1{font-size:64px}}
.ph-hero2 h1 .ln{display:block}
.ph-hero2 h1 .ln:last-child{margin-top:.16em}
.ph-hero2 h1 .ra{font-size:1.62em}
.ph-hero2 .lead{margin-top:32px;color:rgba(242,243,235,.78);max-width:36ch}
.ph-hero2 .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.ph-hero2 .lgb__label--paper{background:rgba(242,243,235,.1);color:var(--paper);box-shadow:inset 0 1px 0 rgba(242,243,235,.3),inset 0 0 0 1px rgba(242,243,235,.22)}
.ph-price{margin-top:28px;font-size:16px;color:rgba(242,243,235,.72)}
.ph-price b{color:var(--paper);font-weight:700}
.ph-strip .brands{margin-top:0;border-top:0}

/* entrada do palco: a luz acende, o totem sobe pra dentro dela, o título vem linha a linha */
@media (prefers-reduced-motion:no-preference){
  .js .ph-photo{opacity:0;transform:scale(1.04);transition:opacity 1.4s var(--ease),transform 1.8s var(--ease)}
  .js .totem--photo .totem-screen,.js .ph-glass{opacity:0;filter:brightness(2.2) blur(6px);transition:opacity .5s var(--ease) .75s,filter .9s var(--ease) .75s}
  .js .ph-hero2 h1 .ln,.js .ph-hero2 .lead,.js .ph-hero2 .ctas,.js .ph-price{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
  .js .ph-hero2 h1 .ln:nth-child(2){transition-delay:.07s}
  .js .ph-hero2 h1 .ln:nth-child(3){transition-delay:.14s}
  .js .ph-hero2 .lead{transition-delay:.26s}
  .js .ph-hero2 .ctas{transition-delay:.34s}
  .js .ph-price{transition-delay:.42s}
  .js .ph-hero2.on .ph-photo{opacity:1;transform:none}
  .js .ph-hero2.on .totem--photo .totem-screen,.js .ph-hero2.on .ph-glass{opacity:1;filter:none}
  .js .ph-hero2.on h1 .ln,.js .ph-hero2.on .lead,.js .ph-hero2.on .ctas,.js .ph-hero2.on .ph-price{opacity:1;transform:none}
}

/* ---------------- dores: busto vendado + cenas ---------------- */
.ph-dor-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,104px);align-items:start}
.ph-dor-fig{position:sticky;top:110px;margin:0;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:#0a1211}
.ph-dor-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ph-dor-list{list-style:none}
.ph-dor-list li{padding:30px 0;border-top:1px solid var(--rule)}
.ph-dor-list li:last-child{border-bottom:1px solid var(--rule)}
.ph-dor-list s{display:block;color:var(--ink-2);text-decoration-color:var(--red);text-decoration-thickness:2px;font-size:clamp(17px,1.4vw,20px)}
.ph-dor-list strong{display:block;margin-top:10px;font-weight:900;font-size:clamp(24px,2.5vw,36px);letter-spacing:-.025em;line-height:1.08}
.ph-dor-turn{margin-top:clamp(40px,5vw,64px);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.ph-dor-turn p{font-size:clamp(19px,1.7vw,24px);max-width:40ch}

/* ---------------- jogos: parede + totem + painel ---------------- */
.ph-jogos{background:var(--red);color:var(--ink);position:relative;overflow:hidden}
.ph-jogos>.wrap{position:relative;z-index:1}
.ph-jogos .lead{color:var(--ink)}
.ph-jogos .ra{color:var(--paper)}
.ph-studio{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);align-items:start}
.ph-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ph-tile{display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.ph-tile .scr{border-radius:6px;margin:5px;transition:transform .45s var(--ease),box-shadow .3s var(--ease)}
.ph-tile span{font-weight:700;font-size:14px;line-height:1.2;color:var(--ink)}
.ph-tile .scr{box-shadow:0 0 0 5px var(--tb,#2b2b29)}
@media (hover:hover) and (pointer:fine){.ph-tile:hover .scr{transform:translateY(-4px)}}
.ph-tile:active .scr{transform:scale(.97);transition-duration:.12s}
.ph-tile[aria-pressed="true"] .scr{box-shadow:0 0 0 5px var(--tb,#2b2b29),0 0 0 9px var(--paper)}
.ph-tile[aria-pressed="true"] span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ph-tile:focus-visible{outline:none}
.ph-tile:focus-visible .scr{box-shadow:0 0 0 5px var(--tb,#2b2b29),0 0 0 9px var(--ink)}
.ph-stage{position:sticky;top:110px}
.totem--big{--tw:340px}
.ph-panel{display:flex;flex-direction:column;gap:28px}
.ph-field label,.ph-label{display:block;font-weight:700;font-size:15px;margin-bottom:10px}
.ph-swatches{display:flex;gap:10px;flex-wrap:wrap}
.ph-sw{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(28,28,27,.12);transition:transform .3s var(--ease),box-shadow .3s}
.ph-sw:hover{transform:scale(1.08)}
.ph-sw{box-shadow:inset 0 0 0 2px rgba(28,28,27,.18)}
.ph-sw[aria-checked="true"]{box-shadow:0 0 0 3px var(--red),0 0 0 5px var(--ink)}
.ph-sw:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.ph-game{padding-top:28px;border-top:1px solid rgba(28,28,27,.25);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ph-game h3{font-weight:900;font-size:clamp(32px,3.2vw,48px);letter-spacing:-.03em;line-height:1}
.ph-game p{color:var(--ink);font-size:17px;max-width:40ch}
.ph-bom{color:var(--ink)!important}
.ph-bom b{font-weight:900;color:var(--ink)}
.ph-game .lgb{margin-top:10px}
.ph-small{font-size:15px!important}
.ph-small a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(28,28,27,.4);text-underline-offset:4px}
.ph-small a:hover{text-decoration-color:var(--ink)}

/* ---------------- como: linha que arrasta ---------------- */
.ph-row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.ph-row-head h2{font-size:clamp(36px,4.3vw,64px);max-width:18ch}
.ph-row-head .lead{margin-top:28px;max-width:42ch}
.ph-row-btns{display:flex;gap:10px;flex:none}
.ph-arrow{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),background .3s}
.ph-arrow svg{width:22px;height:10px}
.ph-arrow:hover{background:var(--red);color:#fff}
.ph-arrow:active{transform:scale(.94)}
.ph-arrow:disabled{opacity:.3;pointer-events:none}
.ph-como{padding-block:clamp(96px,11vw,168px)}
.ph-progress{margin-top:clamp(40px,5vw,64px);height:6px;border-radius:99px;background:rgba(28,28,27,.1);overflow:hidden}
.ph-progress i{display:block;height:100%;width:30%;background:var(--ink);border-radius:99px;transform-origin:left;transition:width .2s linear}
.ph-row{list-style:none;display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gut),calc(50% - 640px + var(--gut)));
  padding:40px max(var(--gut),calc(50% - 640px + var(--gut))) 8px;scrollbar-width:none;outline:none;overscroll-behavior-x:contain}
.ph-row::-webkit-scrollbar{display:none}
.ph-row li{flex:none;width:260px;scroll-snap-align:start;display:flex;flex-direction:column}
.ph-row>li>h3{font-weight:900;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.ph-row>li>p{margin-top:10px;color:var(--ink-2);font-size:16px;line-height:1.5;min-height:6em}
.ph-row .ph-shot{margin-top:var(--sp,40px)}
.ph-shot .scr{border-radius:10px;box-shadow:0 0 0 8px var(--tb,#2b2b29);margin:8px}

/* ---------------- o que vem: lista de duas pontas ---------------- */
.ph-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px clamp(40px,6vw,104px)}
.ph-inc-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:end;margin-bottom:clamp(64px,8vw,112px)}
.ph-inc-head h2{display:flex;align-items:flex-end;gap:clamp(16px,2vw,32px);font-size:clamp(36px,4.2vw,64px)}
.ph-count{flex:none;font-weight:100;font-size:clamp(150px,19vw,280px);line-height:.72;letter-spacing:-.06em;color:var(--red)}
.ph-inc-t{padding-bottom:.08em}
.ph-group h3{font-weight:900;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;margin-bottom:12px}
.ph-group ul{list-style:none}
.ph-group li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:15px 0;border-top:1px solid var(--rule-d)}
.ph-group li span{font-size:17px;line-height:1.35}
.ph-group li em{flex:none;font-style:normal;font-size:14px;color:var(--red);font-weight:700;text-align:right;max-width:13em}

/* ---------------- projetos ---------------- */
.ph-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ph-case{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:24px;padding:20px;border-radius:16px;background:#fbfbf6;box-shadow:inset 0 0 0 1px var(--rule);align-items:stretch}
.ph-case[data-placeholder]{box-shadow:inset 0 0 0 1.5px rgba(28,28,27,.22);background:#fbfbf6}
.ph-case-shot .scr{border-radius:8px}
.ph-case-txt{display:flex;flex-direction:column;min-width:0}
.ph-case-txt h3{font-weight:900;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.ph-case-txt p{margin-top:6px;font-size:15px;color:var(--ink-2)}
.ph-case-txt dl{margin-top:auto;display:grid;gap:12px;padding-top:18px}
.ph-case-txt dt{font-size:13px;color:var(--ink-2)}
.ph-case-txt dd{font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1.1}

/* ---------------- pacotes: tabela grande ---------------- */
.ph-table-wrap{overflow-x:auto;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.ph-table{width:100%;min-width:880px;border-collapse:separate;border-spacing:0;table-layout:fixed}
.ph-table col:first-child{width:28%}
.ph-table th,.ph-table td{text-align:left;vertical-align:top;padding:18px 22px;font-size:17px;line-height:1.35}
.ph-table tbody th{font-weight:700;color:var(--ink-2);font-size:16px}
.ph-table tbody tr:nth-child(odd) th,.ph-table tbody tr:nth-child(odd) td{background:rgba(28,28,27,.035)}
.ph-table thead th{padding-top:28px;padding-bottom:28px;vertical-align:bottom}
.ph-t-k{font-weight:400;font-size:15px!important;color:var(--ink-2)}
.ph-t-n{display:block;font-weight:900;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.03em;line-height:1}
.ph-t-p{display:block;margin-top:12px;font-size:15px;font-weight:300;color:var(--ink-2)}
.ph-t-p b{display:block;font-weight:300;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.ph-t-p small{display:block;margin-top:6px;font-size:14px}
.ph-table .is-rec{background:var(--red)!important;color:var(--ink)}
.ph-table thead .is-rec{border-radius:16px 16px 0 0}
.ph-table tfoot .is-rec{border-radius:0 0 16px 16px}
.ph-table .is-rec .ph-t-p,.ph-table .is-rec .ph-t-p b{color:var(--ink)}
.ph-table tbody tr:nth-child(odd) td.is-rec{background:#f53f07!important}
.ph-table tfoot td,.ph-table tfoot th{padding-top:24px;padding-bottom:28px}
.ph-table .is-rec .lgb__label--red{background:var(--ink);color:var(--paper);text-shadow:none}
.ph-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ph-note{margin-top:28px;color:var(--ink-2);max-width:66ch}

/* ---------------- botão flutuante ---------------- */
.float{display:flex;align-items:center;gap:16px;padding:8px 8px 8px 22px;border-radius:999px;background:rgba(242,243,235,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--rule),0 18px 40px -24px rgba(28,28,27,.5)}
.float-p{display:flex;flex-direction:column;line-height:1.1}
.float-p small{font-size:13px;color:var(--ink-2)}
.float-p b{font-weight:900;font-size:16px;letter-spacing:-.01em}
.float .lgb__label{height:48px;padding:0 22px;font-size:15px}

/* ---------------- fecho ---------------- */
.fecho-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------------- responsivo ---------------- */
@media (max-width:1100px){
  .ph-studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ph-wall{grid-column:1/-1;grid-template-columns:repeat(9,minmax(96px,1fr));overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
  .ph-tile{scroll-snap-align:start}
  .ph-stage{position:static}
  .ph-cases{grid-template-columns:minmax(0,1fr)}
  .ph-case{grid-template-columns:200px minmax(0,1fr)}
}
@media (max-width:960px){
  .ph-hero2{height:auto;flex-direction:column;align-items:stretch;padding-top:56px}
  .ph-hero2-in{order:-1}
  .ph-hero2-txt{max-width:640px}
  .ph-spot{position:relative;right:auto;width:100%;height:clamp(640px,165vw,860px);margin-top:0}

  .ph-dor-grid{grid-template-columns:minmax(0,1fr)}
  .ph-dor-fig{position:relative;top:0;aspect-ratio:16/10}
  .ph-inc-head{grid-template-columns:minmax(0,1fr)}
  .ph-list{grid-template-columns:minmax(0,1fr)}
  .ph-row-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:720px){
  .ph-studio{grid-template-columns:minmax(0,1fr)}
  .ph-wall{margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);grid-template-columns:repeat(9,100px);scroll-padding-inline:var(--gut)}
  .totem--big{--tw:280px}
  .ph-panel{order:-1}
  .ph-stage{order:0}
  .ph-wall{order:-1}
}
@media (max-width:600px){
  .ph-hero2{padding-top:40px}
  .ph-hero2 h1{font-size:clamp(38px,10.4vw,46px)}
  .ph-hero2 .ctas .lgb{flex:1 1 100%}
  .ph-hero2 .ctas .lgb__label{width:100%}
  .ph-count{font-size:120px}
  .ph-inc-head h2{flex-direction:column;align-items:flex-start;gap:8px}
  .ph-row-btns{display:none}
  .ph-row{gap:16px}
  .ph-row li{width:72vw}
  .ph-row .ph-shot{margin-top:calc(var(--sp,40px) * .45)}
  .ph-row>li>p{min-height:0}
  .ph-group li{flex-direction:column;gap:4px}
  .ph-group li em{text-align:left;max-width:none}
  .ph-case{grid-template-columns:110px minmax(0,1fr);gap:16px;padding:16px}
  .ph-case-txt dd{font-size:18px}
  .float{padding:8px 8px 8px 18px;justify-content:space-between}
  .float .lgb__label{padding:0 18px}
}

/* tabela no celular: cada pacote vira um bloco */
@media (max-width:760px){.ph-table-wrap{display:none}}
.ph-cards{display:none}
@media (max-width:760px){
  .ph-cards{display:grid;gap:16px}
  .ph-card{border-radius:16px;padding:28px 22px 24px;background:#fbfbf6;box-shadow:inset 0 0 0 1px var(--rule)}
  .ph-card.is-rec{background:var(--red);box-shadow:none}
  .ph-card h3{font-weight:900;font-size:32px;letter-spacing:-.03em;line-height:1}
  .ph-card .pr{margin-top:8px;font-size:15px;color:var(--ink-2)}
  .ph-card.is-rec .pr{color:var(--ink)}
  .ph-card .pr b{display:block;font-weight:300;font-size:30px;letter-spacing:-.03em;color:var(--ink)}
  .ph-card dl{margin-top:20px;display:grid;gap:14px}
  .ph-card dt{font-size:14px;color:var(--ink-2)}
  .ph-card.is-rec dt{color:rgba(28,28,27,.75)}
  .ph-card dd{font-size:17px;font-weight:700;line-height:1.3}
  .ph-card .lgb{margin-top:22px;display:block}
  .ph-card .lgb__label{width:100%}
  .ph-card.is-rec .lgb__label--red{background:var(--ink);color:var(--paper);text-shadow:none}
}

/* contraste (triagem do impeccable): texto que se lê fica na tinta cheia */
.rubro .lead{color:var(--ink)}
.rubro .contatos small{color:var(--ink)}
.faq-n{color:var(--ink-2)}
#nome-marca::placeholder{color:var(--ink-2)}
.rl-res .s-k,.b-premio .s-k{opacity:1}


/* ---------------- processo no papel ---------------- */
.ph-proc{background:#fbfbf6;border-top:1px solid var(--rule)}
.ph-proc .steps{border-top-color:var(--rule)}
.ph-proc .step+.step{border-left-color:var(--rule)}
.ph-proc .steps.six .step:nth-child(n+4){border-top-color:var(--rule)}
.ph-proc .step p{color:var(--ink-2)}
@media (max-width:960px){.ph-proc .step,.ph-proc .step+.step{border-bottom-color:var(--rule)}}

/* ---------------- escala dos títulos (mais peso) ---------------- */
.sec-head h2{font-size:clamp(40px,5vw,78px)}
.ph-row-head h2{font-size:clamp(40px,5vw,78px);max-width:16ch}
.brasa h2{font-size:clamp(40px,5vw,80px)}
.rubro h2{font-size:clamp(44px,6.4vw,104px)}
.faq-side h2{font-size:clamp(34px,3.4vw,48px)}
@media (max-width:600px){
  .sec-head h2,.ph-row-head h2,.brasa h2{font-size:clamp(32px,9vw,40px)}
  .rubro h2{font-size:clamp(36px,10vw,44px)}
}

/* ---------------- entrada em cascata (filhos de .stg) ---------------- */
.js .rv.stg{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .stg>*{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease) calc(var(--i,0) * 70ms),transform .8s var(--ease) calc(var(--i,0) * 70ms)}
  .js .stg.in>*{opacity:1;transform:none}
}

/* ---------------- toque e superfícies do navegador ---------------- */
.lgb .lgb__label{transition:transform .16s var(--ease),box-shadow .4s var(--ease)}
.lgb:active .lgb__label{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.lgb:hover .lgb__label{transform:translateY(-1px)}}
.ph-arrow{transition:transform .16s var(--ease),background .25s}
.ph-arrow:active{transform:scale(.94)}
.ph-sw:active{transform:scale(.92)}
.totem-screen{transition:transform .16s var(--ease)}
.totem-screen:active{transform:scale(.985)}
.totem-screen.swap .scr{opacity:0;filter:blur(6px)}
.totem-screen .scr{transition:opacity .3s var(--ease),filter .3s var(--ease)}
.rl-res{transform:scale(.97);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.rl-res.on{transform:none}
html{scrollbar-color:rgba(28,28,27,.35) var(--paper)}
input,textarea{caret-color:var(--red)}