/* =====================================================================================
   Thalidelidade · landing (site/). Direção P10 Plaquinha + hero do P01 Balcão + preço do P03 Recibo (curadoria 13/10/2026).
   Cores, fontes e escala vêm do kit de marca (tokens.css e fontes.css, cópias de packages/ui; contraste documentado lá).
   Aqui só os apelidos curtos usados nesta folha e as cores das lojas de demonstração.
   Lojas de demonstração (texto branco por cima): café #6F4E37 = 7,4:1 · brasa #B4321F = 6,2:1 · açaí #5B2A86 = 9,9:1.
   ===================================================================================== */
:root{
  --fundo:var(--cor-fundo);
  --fundo-2:var(--cor-fundo-2);
  --superficie:var(--cor-superficie);
  --tinta:var(--cor-texto);
  --apagado:var(--cor-texto-suave);
  --filete:var(--cor-borda);
  --marca:var(--cor-marca);
  --marca-tinta:var(--cor-marca-tinta);
  --marca-texto:var(--cor-marca-texto);
  --marca-vidro:var(--cor-marca-vidro);
  --c-cafe:#6F4E37;
  --c-brasa:#B4321F;
  --c-acai:#5B2A86;
  --f-display:var(--fonte-titulo);
  --f-corpo:var(--fonte-texto);
  --larg:1280px;
  --gutter:clamp(16px, 4vw, 48px);
  --raio:var(--raio-md);
  --sombra-objeto:18px 26px 40px -18px rgba(17,24,39,.30), 48px 60px 80px -40px rgba(17,24,39,.22);
  --sombra-leve:8px 12px 24px -12px rgba(17,24,39,.22);
  --ease:var(--curva);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font-family:var(--f-corpo);
  font-size:clamp(16px, 1.05vw + 11px, 18px);
  line-height:1.55;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1.02;margin:0}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 6px rgba(14,165,233,.45)}

.pular{
  position:absolute;left:16px;top:-80px;z-index:100;
  background:var(--tinta);color:#fff;padding:12px 18px;border-radius:10px;
  font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;
}
.pular:focus{top:12px}

.miolo{max-width:var(--larg);margin:0 auto;padding:0 var(--gutter)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;border-radius:999px;
  font-family:var(--f-corpo);font-weight:600;font-size:1rem;text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
  white-space:nowrap;
}
.btn-marca{
  background:var(--marca);color:var(--marca-tinta);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 6px 10px 22px -10px rgba(3,105,161,.65);
}
.btn-marca:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 10px 16px 28px -12px rgba(3,105,161,.7)}
.btn-marca svg{transition:transform .2s var(--ease)}
.btn-marca:hover svg{transform:translateX(3px)}
.btn-linha{background:var(--superficie);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--filete), var(--sombra-leve)}
.btn-linha:hover{box-shadow:inset 0 0 0 1.5px var(--tinta), var(--sombra-leve)}
.btn-g{min-height:56px;padding:0 30px;font-size:1.0625rem}

.link-sub{color:var(--marca-texto);font-weight:600;text-underline-offset:3px}
.link-sub:hover{color:var(--tinta)}

/* ---------- wordmark ---------- */
.wm{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);min-height:44px}
.wm-glifo{width:28px;height:28px;flex:none;filter:drop-shadow(2px 3px 2px rgba(17,24,39,.18))}
.wm-nome{font-family:var(--f-display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em}

/* ---------- header ---------- */
.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(238,241,246,.94);
  border-bottom:1px solid rgba(213,219,229,.8);
}
.topo-in{display:flex;align-items:center;gap:24px;min-height:72px}
.topo nav{margin-left:auto}
.topo nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.topo nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;
  text-decoration:none;font-weight:500;font-size:.95rem;color:var(--apagado);transition:color .2s, background-color .2s;
}
.topo nav a:hover{color:var(--tinta);background:rgba(255,255,255,.7)}
.topo-acoes{display:flex;align-items:center;gap:8px}
.topo-entrar{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-weight:600;text-decoration:none;border-radius:10px}
.topo-entrar:hover{background:rgba(255,255,255,.7)}
.topo .btn{min-height:44px;padding:0 18px;font-size:.95rem}
@media (max-width:1080px){ .topo nav{display:none} .topo-acoes{margin-left:auto} }
@media (max-width:440px){
  .topo-in{gap:8px}
  .topo-entrar{display:none}
  .wm-nome{font-size:1.12rem}
  .topo .btn{padding:0 14px;font-size:.9rem}
  .so-largo{display:none}
}

/* ---------- rótulos de estúdio ---------- */
.foto-rot{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--apagado);margin:0 0 18px;
}
.foto-rot::before{content:"";width:22px;height:2px;background:var(--marca);border-radius:2px}
.secao{padding:clamp(80px, 10vw, 140px) 0;position:relative}
.secao h2{font-size:clamp(36px, 4.6vw, 68px);max-width:16ch}
.lead{font-size:clamp(17px, 1.2vw + 10px, 21px);color:var(--apagado);max-width:56ch;margin-top:20px}
.nota-demo{font-size:.85rem;color:var(--apagado);margin:18px 0 0}

/* ---------- reveal ---------- */
.js .rv{opacity:0;translate:0 26px;transition:opacity .7s var(--ease), translate .7s var(--ease)}
.js .rv.visto{opacity:1;translate:0 0}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

/* =====================================================================================
   CICLORAMA — o fundo de estúdio que se curva em piso, sem linha de horizonte
   ===================================================================================== */
.cic{
  position:absolute;inset:0;border-radius:clamp(18px,3cqw,36px);overflow:hidden;
  background:
    radial-gradient(120% 70% at 12% 8%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 55% at 50% 100%, rgba(203,213,227,.55) 0%, rgba(203,213,227,0) 70%),
    linear-gradient(180deg, #F7F9FC 0%, #EEF1F6 42%, #E4E9F1 62%, #DDE4EE 100%);
  box-shadow:inset 0 0 0 1px rgba(213,219,229,.7);
}
.cic::after{ /* brilho do piso perto da luz */
  content:"";position:absolute;left:-10%;right:30%;top:58%;height:30%;
  background:radial-gradient(60% 50% at 30% 40%, rgba(255,255,255,.65), rgba(255,255,255,0) 70%);
}

/* =====================================================================================
   PLACA 3D — bloco de acrílico com encarte A6, faces reais em preserve-3d
   --w controla tudo; o encarte é container e escala o texto por cqi.
   ===================================================================================== */
.placa3d{
  --w:300px;
  --t:calc(var(--w) * .075);
  position:absolute;width:var(--w);aspect-ratio:105/148;
  transform-style:preserve-3d;
}
.pf{position:absolute;backface-visibility:visible}
.pf-frente{
  inset:0;transform:translateZ(calc(var(--t) / 2));border-radius:calc(var(--w) * .022);
  background:
    linear-gradient(112deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.08) 18%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 58%, rgba(255,255,255,.32) 62%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(224,242,254,.10), rgba(186,230,253,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), inset 2px 0 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(14,165,233,.25);
  pointer-events:none;
}
.pf-tras{
  inset:0;transform:translateZ(calc(var(--t) / -2)) rotateY(180deg);border-radius:calc(var(--w) * .022);
  background:linear-gradient(180deg, rgba(186,230,253,.30), rgba(125,211,252,.22));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.pf-esq,.pf-dir{
  top:0;bottom:0;width:var(--t);left:calc(var(--t) / -2);
  transform:rotateY(-90deg);
  background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(186,230,253,.85) 40%, rgba(125,211,252,.75));
}
.pf-dir{left:auto;right:calc(var(--t) / -2);transform:rotateY(90deg);background:linear-gradient(90deg, rgba(56,189,248,.55), rgba(125,211,252,.4))}
.pf-topo{
  left:0;right:0;height:var(--t);top:calc(var(--t) / -2);transform:rotateX(90deg);
  background:linear-gradient(90deg, rgba(255,255,255,.98), rgba(186,230,253,.8));
}
.pf-base{ /* pé de acrílico deitado no tampo */
  left:-9%;right:-9%;height:calc(var(--w) * .34);top:calc(100% - var(--w) * .17);
  transform:rotateX(90deg);
  border-radius:calc(var(--w) * .03);
  background:linear-gradient(90deg, rgba(255,255,255,.75), rgba(186,230,253,.45) 45%, rgba(125,211,252,.35));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85), inset 0 0 0 3px rgba(14,165,233,.12);
}
.encarte{
  position:absolute;inset:4.5% 5.5% 5%;
  transform:translateZ(calc(var(--t) * -.05));
  background:#FFFFFF;border-radius:calc(var(--w) * .01);
  container-type:inline-size;
  box-shadow:0 0 0 .5px rgba(17,24,39,.08);
  overflow:hidden;
}
.enc{
  height:100%;display:flex;flex-direction:column;
  padding:7cqi 7cqi 0;color:var(--tinta);
}
.enc-loja{display:flex;align-items:center;gap:2.6cqi;font-weight:600;font-size:5cqi}
.enc-loja i{width:7cqi;height:7cqi;border-radius:50%;background:var(--c-cafe);color:#fff;font-style:normal;font-family:var(--f-display);font-weight:800;font-size:4.2cqi;display:grid;place-items:center}
.enc-regra{font-family:var(--f-display);font-weight:800;font-size:11.4cqi;line-height:.98;letter-spacing:-.03em;margin:5cqi 0 0}
.enc-selos{display:flex;gap:1.6cqi;margin:4.6cqi 0 0}
.enc-selos b{width:6.4cqi;height:6.4cqi;border-radius:50%;box-shadow:inset 0 0 0 .55cqi var(--tinta)}
.enc-selos b:last-child{background:var(--marca);box-shadow:inset 0 0 0 .55cqi var(--tinta)}
.enc-diga{font-weight:600;font-size:6.6cqi;line-height:1.15;margin:4.6cqi 0 0}
.enc-qr{display:flex;align-items:flex-end;gap:4cqi;margin:auto 0 0}
.enc-qr svg{width:34cqi;height:34cqi;flex:none;color:var(--tinta)}
.enc-qr span{font-size:4.1cqi;line-height:1.25;color:var(--apagado);padding-bottom:1cqi}
.enc-pe{
  display:flex;align-items:center;gap:2cqi;margin:5cqi -7cqi 0;padding:3.2cqi 7cqi;
  background:var(--marca);color:var(--marca-tinta);
}
.enc-pe svg{width:5.4cqi;height:5.4cqi;flex:none}
.enc-pe .wm-nome{font-size:4.4cqi}
.enc-pe small{margin-left:auto;font-size:3.4cqi;font-weight:600}

/* =====================================================================================
   CELULAR — moldura parametrizada por --fw; a tela é container (1u = 1px em 230px de tela)
   ===================================================================================== */
.fone{
  --fw:248px;
  position:relative;flex:none;
  width:var(--fw);max-width:100%;aspect-ratio:9/19.5;
  border-radius:calc(var(--fw) * .15);
  padding:calc(var(--fw) * .035);
  background:linear-gradient(118deg, #4a5468 0%, #1d2330 18%, #0b0f17 60%, #1a202c 100%);
  box-shadow:
    inset 1.5px 0 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.08),
    var(--sombra-objeto);
}
.fone-tela{
  position:relative;height:100%;overflow:hidden;
  border-radius:calc(var(--fw) * .115);
  background:#F7F9FC;
  container-type:inline-size;
}
.fone-tela::before{ /* ilha da câmera */
  content:"";position:absolute;z-index:3;top:2.6%;left:50%;width:30%;height:3.2%;translate:-50% 0;
  background:#0b0f17;border-radius:99px;
}
.fone-tela::after{ /* reflexo de luz vindo da esquerda */
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 26%);
}
.ft{
  --u:calc(100cqi / 230);
  position:absolute;inset:0;padding:calc(40 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  font-size:calc(12 * var(--u));line-height:1.35;color:var(--tinta);
  display:flex;flex-direction:column;gap:calc(9 * var(--u));
}
.ft b{font-weight:600}
.ft-cab{display:flex;align-items:center;justify-content:space-between;gap:calc(6 * var(--u))}
.ft-tit{font-family:var(--f-display);font-weight:800;font-size:calc(19 * var(--u));letter-spacing:-.02em;line-height:1.1}
.ft-mini{font-size:calc(10 * var(--u));color:var(--apagado)}
.ft-chip{font-size:calc(9.5 * var(--u));font-weight:600;padding:calc(3 * var(--u)) calc(7 * var(--u));border-radius:99px;background:#E7EEF7;color:var(--tinta)}

/* balcão */
.tb-topo{display:flex;align-items:center;gap:calc(7 * var(--u));font-weight:600;font-size:calc(11.5 * var(--u))}
.tb-topo i{width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;background:var(--c-cafe);color:#fff;font-style:normal;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:calc(10 * var(--u))}
.tb-topo .ft-chip{margin-left:auto}
.tb-campo{background:#fff;border-radius:calc(12 * var(--u));padding:calc(9 * var(--u)) calc(12 * var(--u));box-shadow:inset 0 0 0 calc(1.5 * var(--u)) var(--marca)}
.tb-campo small{display:block;font-size:calc(9.5 * var(--u));color:var(--apagado)}
.tb-campo strong{font-family:var(--f-display);font-weight:800;font-size:calc(20 * var(--u));letter-spacing:.01em}
.tb-achado{display:flex;align-items:center;gap:calc(8 * var(--u));background:#fff;border-radius:calc(12 * var(--u));padding:calc(8 * var(--u)) calc(10 * var(--u));box-shadow:0 0 0 calc(1 * var(--u)) var(--filete)}
.tb-achado i{width:calc(24 * var(--u));height:calc(24 * var(--u));border-radius:50%;background:#E7EEF7;font-style:normal;display:grid;place-items:center;font-weight:600}
.tb-achado span:last-child{margin-left:auto;font-family:var(--f-display);font-weight:800;font-size:calc(14 * var(--u))}
.tb-tecla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(5 * var(--u));margin-top:auto}
.tb-tecla span{display:grid;place-items:center;height:calc(30 * var(--u));border-radius:calc(9 * var(--u));background:#fff;font-family:var(--f-display);font-weight:700;font-size:calc(14 * var(--u));box-shadow:0 calc(1 * var(--u)) 0 var(--filete)}
.tb-dar{display:grid;place-items:center;height:calc(44 * var(--u));border-radius:calc(12 * var(--u));background:var(--marca);color:var(--marca-tinta);font-weight:600;font-size:calc(15 * var(--u))}
.tb-feito{
  position:absolute;left:calc(12 * var(--u));right:calc(12 * var(--u));top:calc(178 * var(--u));z-index:2;
  display:flex;align-items:center;gap:calc(8 * var(--u));
  background:var(--tinta);color:#fff;border-radius:calc(12 * var(--u));padding:calc(10 * var(--u)) calc(12 * var(--u));
  box-shadow:0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-8 * var(--u)) rgba(17,24,39,.5);
}
.tb-feito svg{width:calc(18 * var(--u));height:calc(18 * var(--u));flex:none;color:var(--marca)}
.tb-feito strong{font-family:var(--f-display);font-weight:800;font-size:calc(15 * var(--u))}
.tb-feito span{font-size:calc(11 * var(--u));opacity:.85}

/* carteira */
.cw-cartao{border-radius:calc(14 * var(--u));padding:calc(10 * var(--u)) calc(11 * var(--u));background:#fff;box-shadow:0 0 0 calc(1 * var(--u)) var(--filete), 0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-8 * var(--u)) rgba(17,24,39,.25)}
.cw-linha{display:flex;align-items:center;gap:calc(8 * var(--u))}
.cw-linha i{width:calc(24 * var(--u));height:calc(24 * var(--u));border-radius:calc(7 * var(--u));color:#fff;font-style:normal;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:calc(12 * var(--u));flex:none}
.cw-linha b{font-size:calc(11.5 * var(--u))}
.cw-linha em{margin-left:auto;font-style:normal;font-family:var(--f-display);font-weight:800;font-size:calc(13 * var(--u))}
.cw-selos{display:flex;flex-wrap:wrap;gap:calc(4 * var(--u));margin:calc(8 * var(--u)) 0 calc(4 * var(--u))}
.cw-selos s{width:calc(12 * var(--u));height:calc(12 * var(--u));border-radius:50%;box-shadow:inset 0 0 0 calc(1.4 * var(--u)) var(--cor);text-decoration:none}
.cw-selos s.c{background:var(--cor)}
.cw-premio{font-size:calc(10 * var(--u));color:var(--apagado)}
.cw-destaque{background:var(--c-acai);color:#fff;box-shadow:0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-10 * var(--u)) rgba(91,42,134,.7)}
.cw-destaque .cw-premio{color:rgba(255,255,255,.88)}
.cw-destaque .cw-selos s{box-shadow:inset 0 0 0 calc(1.4 * var(--u)) #fff;background:#fff}
.cw-destaque i{background:#fff!important;color:var(--c-acai)!important}
.cw-tag{display:inline-flex;align-items:center;gap:calc(4 * var(--u));margin-top:calc(6 * var(--u));background:var(--marca);color:var(--marca-tinta);font-weight:600;font-size:calc(10 * var(--u));padding:calc(3 * var(--u)) calc(8 * var(--u));border-radius:99px}

/* mensagem */
.mg{background:#E9EEF5;padding-top:0}
.mg-cab{display:flex;align-items:center;gap:calc(8 * var(--u));background:#fff;margin:0 calc(-14 * var(--u));padding:calc(40 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u));box-shadow:0 1px 0 var(--filete)}
.mg-cab i{width:calc(28 * var(--u));height:calc(28 * var(--u));border-radius:50%;background:var(--c-cafe);color:#fff;font-style:normal;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:calc(12 * var(--u))}
.mg-cab small{display:block;font-size:calc(9.5 * var(--u));color:var(--apagado)}
.mg-dia{align-self:center;font-size:calc(9.5 * var(--u));color:var(--apagado);background:#fff;border-radius:99px;padding:calc(2 * var(--u)) calc(9 * var(--u));margin-top:calc(8 * var(--u))}
.mg-bolha{
  position:relative;align-self:flex-start;max-width:88%;
  background:#fff;border-radius:calc(4 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  padding:calc(9 * var(--u)) calc(11 * var(--u)) calc(7 * var(--u));
  font-size:calc(12 * var(--u));line-height:1.4;
  box-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(17,24,39,.08);
}
.mg-bolha u{color:var(--marca-texto);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.mg-hora{display:flex;justify-content:flex-end;align-items:center;gap:calc(3 * var(--u));font-size:calc(9.5 * var(--u));color:var(--apagado);margin-top:calc(3 * var(--u))}
.mg-hora svg{width:calc(15 * var(--u));height:calc(10 * var(--u));color:var(--marca-texto)}
.mg-link{align-self:flex-start;max-width:88%;background:#fff;border-radius:calc(14 * var(--u));overflow:hidden;box-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(17,24,39,.08)}
.mg-link div{background:var(--c-cafe);color:#fff;padding:calc(10 * var(--u));font-family:var(--f-display);font-weight:800;font-size:calc(13 * var(--u))}
.mg-link p{margin:0;padding:calc(8 * var(--u)) calc(10 * var(--u));font-size:calc(10.5 * var(--u));color:var(--apagado)}

/* resgate */
.rg-cartao{background:var(--c-acai);color:#fff;border-radius:calc(16 * var(--u));padding:calc(14 * var(--u));display:flex;flex-direction:column;gap:calc(6 * var(--u))}
.rg-cartao .cw-tag{align-self:flex-start;margin:0}
.rg-codigo{background:#fff;border-radius:calc(16 * var(--u));padding:calc(14 * var(--u));text-align:center;box-shadow:0 0 0 calc(1 * var(--u)) var(--filete)}
.rg-codigo small{display:block;font-size:calc(10 * var(--u));color:var(--apagado)}
.rg-codigo strong{display:block;font-family:var(--f-display);font-weight:800;font-size:calc(34 * var(--u));letter-spacing:.06em;line-height:1.1;margin:calc(4 * var(--u)) 0}
.rg-codigo svg{width:calc(84 * var(--u));height:calc(84 * var(--u));color:var(--tinta);margin-top:calc(6 * var(--u))}

/* editor do dono */
.ed-campo{background:#fff;border-radius:calc(10 * var(--u));padding:calc(7 * var(--u)) calc(10 * var(--u));box-shadow:0 0 0 calc(1 * var(--u)) var(--filete)}
.ed-campo small{display:block;font-size:calc(9 * var(--u));color:var(--apagado)}
.ed-campo span{font-weight:600}
.ed-cores{display:flex;gap:calc(6 * var(--u));margin-top:calc(4 * var(--u))}
.ed-cores s{width:calc(18 * var(--u));height:calc(18 * var(--u));border-radius:50%;background:var(--cor)}
.ed-cores s.sel{box-shadow:0 0 0 calc(2 * var(--u)) #fff, 0 0 0 calc(3.5 * var(--u)) var(--tinta)}
.ed-meta{display:flex;align-items:center;justify-content:space-between}
.ed-meta b{display:flex;align-items:center;gap:calc(8 * var(--u))}
.ed-meta b span{width:calc(24 * var(--u));height:calc(24 * var(--u));border-radius:50%;display:grid;place-items:center;background:#E7EEF7;font-size:calc(14 * var(--u))}
.ed-meta strong{font-family:var(--f-display);font-weight:800;font-size:calc(18 * var(--u))}
.ed-previa{border-radius:calc(12 * var(--u));background:var(--c-cafe);color:#fff;padding:calc(10 * var(--u))}
.ed-previa .cw-selos s{box-shadow:inset 0 0 0 calc(1.4 * var(--u)) #fff}
.ed-previa .cw-selos s.c{background:#fff}
.ed-btns{display:grid;gap:calc(6 * var(--u));margin-top:auto}
.ed-btns span{display:grid;place-items:center;height:calc(36 * var(--u));border-radius:calc(10 * var(--u));font-weight:600}
.ed-btns span:first-child{background:var(--marca);color:var(--marca-tinta)}
.ed-btns span:last-child{background:#fff;box-shadow:inset 0 0 0 calc(1.2 * var(--u)) var(--filete)}

/* equipe / PIN */
.eq-item{display:flex;align-items:center;gap:calc(9 * var(--u));background:#fff;border-radius:calc(12 * var(--u));padding:calc(9 * var(--u)) calc(10 * var(--u));box-shadow:0 0 0 calc(1 * var(--u)) var(--filete)}
.eq-item i{width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;background:#E7EEF7;font-style:normal;display:grid;place-items:center;font-weight:600}
.eq-item small{display:block;font-size:calc(9.5 * var(--u));color:var(--apagado)}
.eq-pin{margin-left:auto;display:flex;gap:calc(3 * var(--u))}
.eq-pin s{width:calc(7 * var(--u));height:calc(7 * var(--u));border-radius:50%;background:var(--tinta)}
.eq-conv{display:grid;place-items:center;height:calc(36 * var(--u));border-radius:calc(10 * var(--u));box-shadow:inset 0 0 0 calc(1.2 * var(--u)) var(--tinta);font-weight:600;margin-top:auto}

/* painel no celular */
.pn-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(6 * var(--u))}
.pn-kpis div{background:#fff;border-radius:calc(10 * var(--u));padding:calc(8 * var(--u));box-shadow:0 0 0 calc(1 * var(--u)) var(--filete)}
.pn-kpis strong{display:block;font-family:var(--f-display);font-weight:800;font-size:calc(22 * var(--u));line-height:1.05}
.pn-kpis small{font-size:calc(9 * var(--u));color:var(--apagado);line-height:1.2;display:block}
.pn-barras{display:flex;align-items:flex-end;gap:calc(5 * var(--u));height:calc(70 * var(--u));background:#fff;border-radius:calc(10 * var(--u));padding:calc(8 * var(--u));box-shadow:0 0 0 calc(1 * var(--u)) var(--filete)}
.pn-barras s{flex:1;border-radius:calc(3 * var(--u)) calc(3 * var(--u)) 0 0;background:#BAE6FD;height:var(--h)}
.pn-barras s:last-child{background:var(--marca)}

/* =====================================================================================
   HERO: a cena do balcão (P01) fotografada no estúdio do P10. Parede de ciclorama, tampo de madeira,
   a plaquinha de acrílico em pé, e o celular do atendente digitando o número até o selo cair.
   ===================================================================================== */
.hero-moldura{max-width:1360px;margin:16px auto 0;padding:0 clamp(0px,1.2vw,16px)}
.hero{
  --tampo-h:clamp(150px,23%,210px);
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:28px 28px 0 0;
  min-height:clamp(660px,calc(100svh - 150px),860px);
}
.bx-cena{position:absolute;inset:0;z-index:0;pointer-events:none}
.bx-parede{position:absolute;inset:0;background:
  radial-gradient(120% 70% at 14% 6%,rgba(255,255,255,.95),rgba(255,255,255,0) 58%),
  linear-gradient(180deg,#F7F9FC 0%,#EEF1F6 50%,#E4E9F1 100%)}
.bx-parede::before{ /* fatias de luz da janela, à esquerda */
  content:"";position:absolute;inset:-10% 20% 30% -10%;
  background:repeating-linear-gradient(68deg,rgba(255,255,255,.7) 0 70px,rgba(255,255,255,0) 70px 170px);
  -webkit-mask:linear-gradient(160deg,#000 10%,transparent 72%);mask:linear-gradient(160deg,#000 10%,transparent 72%);
}
.bx-azulejo{position:absolute;left:0;right:0;bottom:calc(var(--tampo-h) - 18px);height:32%;
  background-color:#F3F6FA;
  background-image:linear-gradient(#D9E0EA 1.5px,transparent 1.5px),linear-gradient(90deg,#D9E0EA 1.5px,transparent 1.5px);
  background-size:56px 28px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 35%);mask:linear-gradient(180deg,transparent,#000 35%)}
.bx-luminaria{position:absolute;top:0;width:120px}
.bx-luminaria.l1{left:60%}
.bx-luminaria.l2{right:3%;width:96px}
.bx-maquina{position:absolute;bottom:calc(var(--tampo-h) - 26px);left:46%;width:clamp(200px,19vw,270px)}
.bx-maquina .vapor{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:0}
.js .bx-maquina .vapor{animation:vapor 3.2s ease-in-out infinite}
.js .bx-maquina .vapor.v2{animation-delay:1.4s}
@keyframes vapor{0%{opacity:0;transform:translateY(8px)}35%{opacity:.75}100%{opacity:0;transform:translateY(-22px)}}
.bx-tampo{position:absolute;left:0;right:0;bottom:0;height:var(--tampo-h);width:100%;display:block}
.bx-xicara{position:absolute;bottom:calc(var(--tampo-h) - 64px);left:39%;width:90px;z-index:1}
/* a plaquinha em pé no tampo, à direita do celular */
.bx-placa{position:absolute;right:1.4%;bottom:calc(var(--tampo-h) - 30px);width:clamp(104px,8.6vw,128px);aspect-ratio:105/148;perspective:900px;z-index:1}
.bx-placa .placa3d{--w:clamp(104px,8.6vw,128px);left:0;top:0;transform:rotateY(-24deg) rotateX(-2deg)}
.bx-placa-sombra{position:absolute;right:-1%;bottom:calc(var(--tampo-h) - 44px);width:clamp(150px,14vw,210px);height:22px;
  background:radial-gradient(60% 60% at 20% 50%,rgba(17,24,39,.32),rgba(17,24,39,0) 72%);filter:blur(4px);transform:skewX(-40deg)}

.hero-grade{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);min-height:inherit;padding:clamp(40px,5vw,64px) clamp(20px,4.5vw,64px) 0}
.hero-txt{max-width:600px;padding-bottom:calc(var(--tampo-h) + 44px);align-self:center}
.hero-rot{
  display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:99px;
  background:var(--superficie);box-shadow:inset 0 0 0 1px var(--filete), var(--sombra-leve);
  font-weight:600;font-size:.9rem;margin:0 0 24px;
}
.hero-rot svg{width:20px;height:20px}
.hero h1{font-weight:800;letter-spacing:-.035em}
.hero h1 .h1-a{display:block;font-size:clamp(42px,4.6vw,72px);line-height:.98}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap;z-index:0}
.hero h1 em::after{ /* filete de acrílico sob a palavra; a cor da marca nunca vira cor de texto */
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.04em;height:.22em;z-index:-1;
  background:linear-gradient(90deg,rgba(14,165,233,.6),rgba(14,165,233,.28));border-radius:.06em;
}
.hero h1 .h1-b{display:block;margin-top:14px;font-size:clamp(22px,2.2vw,34px);font-weight:700;line-height:1.12;color:#2B3341;letter-spacing:-.02em}
.hero-sub{margin:22px 0 0;font-size:clamp(16.5px,1.2vw,19px);max-width:50ch;color:#3B4452}
.hero-sub strong{color:var(--tinta);font-weight:600}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-micro{margin:16px 0 0;font-size:.92rem;color:#4A5361;display:flex;flex-wrap:wrap;gap:6px 18px}
.hero-micro span{display:inline-flex;align-items:center;gap:6px}
.hero-micro svg{width:18px;height:18px;color:var(--marca-texto)}
@keyframes sobe{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes surge{from{opacity:0}to{opacity:1}}
.hero-txt > *{animation:sobe .8s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}

/* palco: celular do balcão + bolha da mensagem + carimbo */
.bx-palco{position:relative;display:flex;justify-content:center;align-items:flex-start;padding-top:clamp(8px,2vw,28px);min-width:0}
.bx-palco .bx-fone{--fw:clamp(250px,21vw,300px);margin-left:14%;transform:perspective(1600px) rotateY(-14deg) rotateX(5deg) rotate(-7deg);transform-origin:50% 80%}
.js .bx-palco .bx-fone{animation:entraFone 1s var(--ease) .25s both}
@keyframes entraFone{from{opacity:0;transform:perspective(1600px) rotateY(-14deg) rotateX(5deg) rotate(-2deg) translateY(60px)}to{opacity:1}}
.bx-palco .bolha{position:absolute;left:-6%;top:34%;z-index:3;max-width:250px}
.bx-legenda{position:absolute;left:-6%;top:calc(34% - 40px);font-size:13px;font-weight:600;color:#3B4452;z-index:3;background:var(--superficie);padding:5px 12px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--filete),var(--sombra-leve)}

.bx-fone{position:relative;width:var(--fw,260px);container-type:inline-size;flex:none}
.bx-corpo{position:relative;border-radius:15cqw;padding:3.2cqw;
  background:linear-gradient(118deg,#4a5468 0%,#1d2330 18%,#0b0f17 60%,#1a202c 100%);
  box-shadow:inset 1.5px 0 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.08),28px 36px 60px -22px rgba(17,24,39,.55)}
.bx-corpo::before{content:"";position:absolute;top:5.6cqw;left:50%;width:22cqw;height:5.4cqw;margin-left:-11cqw;background:#0b0f17;border-radius:99px;z-index:4}
.bx-tela{position:relative;aspect-ratio:9/18.8;border-radius:12cqw;background:#F7F9FC;overflow:hidden;display:flex;flex-direction:column;color:var(--tinta);font-family:var(--f-corpo)}
.bx-tela::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 26%)}
.bx-status{display:flex;justify-content:space-between;align-items:center;padding:4.6cqw 8cqw 2cqw;font:600 3.8cqw/1 var(--f-corpo)}
.bx-status svg{width:12cqw;height:3.6cqw}
.bx-topo{display:flex;align-items:center;gap:3cqw;padding:3.6cqw 5.5cqw;background:var(--c-cafe);color:#fff;font:600 4.5cqw/1.15 var(--f-corpo)}
.bx-topo .ini{flex:none;width:8.5cqw;height:8.5cqw;border-radius:50%;background:#fff;color:var(--c-cafe);display:grid;place-items:center;font:800 4.2cqw/1 var(--f-display)}
.bx-topo .pin{margin-left:auto;font-size:3.3cqw;opacity:.92;display:flex;align-items:center;gap:1.2cqw}
.bx-topo .pin svg{width:3.6cqw;height:3.6cqw}
.bx-miolo{flex:1;display:flex;flex-direction:column;gap:2.8cqw;padding:4cqw 5.5cqw 5.5cqw}
.bx-rot{font:600 3.3cqw/1.2 var(--f-corpo);color:var(--apagado);text-transform:uppercase;letter-spacing:.08em}
.bx-campo{display:flex;align-items:center;gap:.6cqw;min-height:13.5cqw;padding:2.6cqw 4cqw;border-radius:3.6cqw;background:#fff;box-shadow:inset 0 0 0 .7cqw var(--marca);font:800 6.2cqw/1 var(--f-display);letter-spacing:.02em;white-space:nowrap}
.bx-campo [data-campo]:empty::before{content:"Celular do cliente";color:#8A93A1;font:400 5cqw/1 var(--f-corpo)}
.bx-campo .caret{width:.6cqw;height:6.4cqw;background:var(--marca-texto);flex:none}
.js .bx-campo .caret{animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.bx-alt{font-size:3.2cqw;color:var(--apagado);line-height:1.3}
.bx-res{position:relative;background:#fff;box-shadow:0 0 0 .4cqw var(--filete);border-radius:4cqw;padding:3.4cqw 4cqw 3.6cqw;transition:opacity .35s ease,transform .35s ease}
.bx-res-linha{font:600 4.9cqw/1.2 var(--f-corpo)}
.bx-res-linha .sep{color:var(--apagado);padding:0 .6cqw}
.bx-res-linha strong{font-weight:600}
.fr-antes{display:none}
.fr-depois b{color:var(--marca-texto);font-weight:600}
.bx-pontos{display:flex;flex-wrap:wrap;gap:1.6cqw;margin-top:2.4cqw}
.bx-pt{width:5.4cqw;height:5.4cqw;border-radius:50%;border:.7cqw solid var(--c-cafe);background:transparent;flex:none}
.bx-pt.c{background:var(--c-cafe)}
.bx-selo{position:absolute;right:-2cqw;top:-10cqw;width:31cqw;height:31cqw;z-index:3;transition:opacity .4s ease}
.bx-selo-in{width:100%;height:100%;transform:rotate(-12deg);filter:drop-shadow(0 .8cqw .6cqw rgba(3,105,161,.28))}
.bx-selo-in svg{width:100%;height:100%;display:block}
.bx-onda{position:absolute;inset:8%;border-radius:50%;border:.8cqw solid var(--marca);opacity:0}
.bx-teclado{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw}
.bx-tk{height:12.4cqw;border-radius:3.2cqw;background:#fff;box-shadow:0 .5cqw 0 var(--filete);display:grid;place-items:center;font:700 6.4cqw/1 var(--f-display);transition:background-color .12s ease,transform .12s ease}
.bx-tk svg{width:6.4cqw;height:6.4cqw}
.bx-tk.on{background:var(--marca);color:var(--marca-tinta);transform:scale(.93)}
.bx-dar{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:2cqw;min-height:15cqw;border-radius:4cqw;background:var(--marca);color:var(--marca-tinta);font:800 5.6cqw/1 var(--f-display);letter-spacing:-.01em;box-shadow:0 1cqw 0 var(--marca-texto)}
.bx-dar svg{width:6.4cqw;height:6.4cqw}

/* ciclo de ~8 s do hero (só com JS e sem movimento reduzido) */
.bx-palco.anim .bx-res{opacity:0;transform:translateY(3cqw)}
.bx-palco.anim.f-res .bx-res{opacity:1;transform:none}
.bx-palco.anim .bx-selo{opacity:0}
.bx-palco.anim.f-selo .bx-selo{opacity:1;transition:none}
.bx-palco.anim.f-selo .bx-selo-in{animation:carimbar .62s cubic-bezier(.3,1.35,.55,1) both}
.bx-palco.anim.f-selo .bx-onda{animation:onda .7s ease-out .32s both}
.bx-palco.anim .pt-novo{background:transparent;transition:background-color .2s ease .3s}
.bx-palco.anim.f-selo .pt-novo{background:var(--c-cafe)}
.bx-palco.anim .fr-antes{display:inline}
.bx-palco.anim .fr-depois{display:none}
.bx-palco.anim.f-selo .fr-antes{display:none}
.bx-palco.anim.f-selo .fr-depois{display:inline}
.bx-palco.anim.f-pulso .bx-dar{animation:pulso .62s ease-in-out 2}
.bx-palco.anim.f-selo .bx-dar{transform:scale(.97);filter:saturate(.85)}
.bx-palco.anim.f-selo .bx-corpo{animation:tranco .32s ease-out .3s}
.bx-palco.anim .bolha{opacity:0;transform:translateY(14px) scale(.96)}
.bx-palco.anim .bx-legenda{opacity:0}
.bx-palco.anim.f-msg .bolha,.bx-palco.anim.f-msg .bx-legenda{opacity:1;transform:none;transition:opacity .45s ease,transform .45s var(--ease)}
.bx-palco.anim.f-sai .bx-res,.bx-palco.anim.f-sai .bx-selo,.bx-palco.anim.f-sai .bolha,.bx-palco.anim.f-sai .bx-legenda,.bx-palco.anim.f-sai [data-campo]{opacity:0;transition:opacity .5s ease}
@keyframes carimbar{
  0%{opacity:0;transform:translateY(-14cqw) scale(1.6) rotate(-34deg)}
  55%{opacity:1;transform:translateY(0) scale(.92) rotate(-9deg)}
  78%{transform:scale(1.04) rotate(-13deg)}
  100%{opacity:1;transform:scale(1) rotate(-12deg)}}
@keyframes onda{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.9)}}
@keyframes pulso{0%,100%{transform:scale(1);box-shadow:0 1cqw 0 var(--marca-texto),0 0 0 0 rgba(14,165,233,.55)}50%{transform:scale(1.035);box-shadow:0 1cqw 0 var(--marca-texto),0 0 0 3.4cqw rgba(14,165,233,0)}}
@keyframes tranco{0%{translate:0 0}40%{translate:0 1.2cqw}100%{translate:0 0}}

/* bolha de mensagem */
.bolha{background:var(--superficie);border-radius:20px 20px 20px 6px;padding:14px 16px 10px;box-shadow:0 18px 40px -18px rgba(17,24,39,.45),0 0 0 1px rgba(17,24,39,.06);font-size:15px;line-height:1.45;color:var(--tinta)}
.bolha-de{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--apagado);margin-bottom:6px}
.bolha-de .ini{width:22px;height:22px;border-radius:50%;background:var(--c-cafe);color:#fff;display:grid;place-items:center;font:800 11px/1 var(--f-display)}
.bolha .lnk{color:var(--marca-texto);font-weight:600;overflow-wrap:anywhere}
.bolha-meta{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:4px;font-size:12px;color:var(--apagado)}
.bolha-meta svg{width:18px;height:11px;color:var(--marca-texto)}

/* frente do balcão: placas de acrílico com os números */
.frente{max-width:1360px;margin:0 auto;padding:0 clamp(0px,1.2vw,16px)}
.frente-in{position:relative;background:linear-gradient(180deg,#8E7458 0%,#7E6750 100%);border-radius:0 0 28px 28px;padding:22px clamp(16px,4vw,48px) 30px;box-shadow:0 30px 50px -36px rgba(17,24,39,.6)}
.frente-in::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 calc(25% - 2px),rgba(0,0,0,.14) calc(25% - 2px) 25%);pointer-events:none}
.placas{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,28px)}
.placa{position:relative;border-radius:12px;padding:14px 20px;color:var(--tinta);
  background:linear-gradient(112deg,rgba(255,255,255,.98) 0%,#F4F9FD 40%,#E6F3FB 100%);
  box-shadow:inset 2px 0 0 #fff,inset 0 -2px 0 rgba(14,165,233,.28),0 0 0 3px rgba(186,230,253,.55),0 8px 14px -8px rgba(0,0,0,.55)}
.placa::before,.placa::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#9AA6B6);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.placa::before{left:7px}.placa::after{right:7px}
.placa b{display:block;font:800 clamp(22px,2.4vw,34px)/1 var(--f-display);letter-spacing:-.02em}
.placa span{display:block;margin-top:6px;font-size:14px;font-weight:600;color:#3B4452;line-height:1.3}

@media (max-width:960px){
  .hero{min-height:0;--tampo-h:150px}
  .hero-grade{grid-template-columns:minmax(0,1fr);padding:36px 20px 0;gap:8px}
  .hero-txt{padding-bottom:0;max-width:none}
  .bx-palco{flex-direction:column;align-items:center;padding:4px 0 70px}
  .bx-palco .bx-fone{--fw:min(250px,66vw);margin-left:0}
  .bx-palco .bolha{position:relative;left:auto;top:auto;align-self:flex-start;max-width:min(300px,88%);margin-bottom:14px;order:-1}
  .bx-legenda{position:static;order:-2;align-self:flex-start;margin-bottom:6px}
  .bx-maquina{left:-2%;width:170px}
  .bx-luminaria.l1{left:auto;right:6%;width:90px;top:-30px}
  .bx-luminaria.l2,.bx-xicara,.bx-placa,.bx-placa-sombra{display:none}
  .placas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frente-in::before{display:none}
}
@media (max-width:600px){
  .bx-luminaria{display:none}
  .hero-ctas .btn{width:100%}
  .placa{padding:12px 14px 12px 20px}
  .placa span{font-size:13px}
}

/* =====================================================================================
   ATRÁS DA PLAQUINHA — a plaquinha abre como porta ao rolar (só desktop, com JS e movimento)
   ===================================================================================== */
.atras{position:relative;background:linear-gradient(180deg, var(--fundo) 0%, #E6EBF2 100%)}
.palco{padding:clamp(80px,9vw,120px) 0}
.palco-cab{max-width:var(--larg);margin:0 auto;padding:0 var(--gutter)}
.palco-cab .lead{max-width:48ch}
.etapas{
  max-width:var(--larg);margin:56px auto 0;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);
  list-style:none;
}
.etapa{margin:0;display:flex;flex-direction:column;align-items:center;gap:24px}
.etapa figcaption{max-width:34ch;text-align:left;align-self:stretch}
.etapa-n{font-family:var(--f-display);font-weight:800;font-size:.85rem;letter-spacing:.14em;color:var(--marca-texto)}
.etapa h3{font-size:clamp(24px,2.2vw,34px);margin:6px 0 10px}
.etapa p{color:var(--apagado);margin:0}
.etapa .fone{--fw:min(248px, 74vw)}
.porta,.palco-passos,.palco-dica{display:none}
.tb-feito{animation:none}
@media (max-width:980px){
  .etapas{grid-template-columns:minmax(0,1fr);gap:64px}
  .etapa figcaption{max-width:40ch;align-self:center}
}

/* modo vivo: ativado por JS em telas largas sem prefers-reduced-motion */
.atras.palco-vivo{height:380svh;--hf:min(540px, calc(100svh - 360px))}
.palco-vivo .palco{position:sticky;top:0;height:100svh;padding:96px 0 32px;display:flex;flex-direction:column}
.palco-vivo .palco-cab{width:100%}
.palco-vivo .palco-cab h2{font-size:clamp(34px,3.6vw,54px);max-width:none}
.palco-vivo .palco-cab .lead{margin-top:12px}
.palco-vivo .etapas{position:relative;display:block;flex:1;width:100%;margin-top:20px;min-height:0}
.palco-vivo .etapa{
  position:absolute;inset:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:40px;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease), visibility .5s;
}
.palco-vivo .etapa figcaption{grid-column:1;grid-row:1;max-width:30ch;align-self:center}
.palco-vivo .etapa h3{font-size:clamp(30px,3vw,44px)}
.palco-vivo .etapa figcaption p{font-size:1.1rem}
.palco-vivo .etapa .fone{
  grid-column:2;grid-row:1;justify-self:center;
  --fw:auto;height:var(--hf);width:auto;
  filter:blur(calc((1 - var(--abre, 1)) * 7px));
}
.palco-vivo .etapa .fone{border-radius:38px;padding:9px}
.palco-vivo .etapa .fone-tela{border-radius:29px}
.palco-vivo[data-etapa="1"] .etapa:nth-child(1),
.palco-vivo[data-etapa="2"] .etapa:nth-child(2),
.palco-vivo[data-etapa="3"] .etapa:nth-child(3){opacity:1;visibility:visible}
.palco-vivo[data-etapa="1"] .tb-feito{animation:sobe .5s .4s var(--ease) both}

/* troca de etapa: o celular que sai gira para a esquerda, o que entra vem da direita; a legenda sobe em cascata */
.palco-vivo .etapa .fone{
  transform:perspective(1400px) translateX(90px) rotateY(-30deg) scale(.92);
  transition:transform .8s var(--ease);
}
.palco-vivo .etapa figcaption > *{opacity:0;transform:translateY(26px);transition:opacity .5s var(--ease), transform .6s var(--ease)}
.palco-vivo[data-etapa="2"] .etapa:nth-child(1) .fone,
.palco-vivo[data-etapa="3"] .etapa:nth-child(-n+2) .fone{transform:perspective(1400px) translateX(-90px) rotateY(26deg) scale(.92)}
.palco-vivo[data-etapa="2"] .etapa:nth-child(1) figcaption > *,
.palco-vivo[data-etapa="3"] .etapa:nth-child(-n+2) figcaption > *{transform:translateY(-22px)}
.palco-vivo[data-etapa="1"] .etapa:nth-child(1) .fone,
.palco-vivo[data-etapa="2"] .etapa:nth-child(2) .fone,
.palco-vivo[data-etapa="3"] .etapa:nth-child(3) .fone{transform:perspective(1400px) translateX(0) rotateY(0) scale(1)}
.palco-vivo[data-etapa="1"] .etapa:nth-child(1) figcaption > *,
.palco-vivo[data-etapa="2"] .etapa:nth-child(2) figcaption > *,
.palco-vivo[data-etapa="3"] .etapa:nth-child(3) figcaption > *{opacity:1;transform:none}
.palco-vivo .etapa figcaption > :nth-child(2){transition-delay:.08s}
.palco-vivo .etapa figcaption > :nth-child(3){transition-delay:.16s}
/* a plaquinha aberta sai de cena quando a primeira tela vai embora */
.palco-vivo .porta{transition:opacity .5s var(--ease)}
.palco-vivo:not([data-etapa="1"]) .porta{opacity:0}

/* etapa 2: os cartões entram um a um, o cartão cheio carimba os 10 selos e o prêmio aparece */
@keyframes cartaoEntra{from{opacity:0;transform:translateY(calc(34 * var(--u))) scale(.95)}to{opacity:1;transform:none}}
@keyframes seloCarimba{0%{background:transparent;transform:scale(.5)}60%{background:#fff;transform:scale(1.3)}100%{background:#fff;transform:scale(1)}}
@keyframes estala{0%{opacity:0;transform:scale(.6)}65%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes brilho{from{translate:-120% 0}to{translate:120% 0}}
.palco-vivo[data-etapa="2"] .cw-cartao{animation:cartaoEntra .6s var(--ease) both}
.palco-vivo[data-etapa="2"] .cw-cartao:nth-child(2){animation-delay:.3s}
.palco-vivo[data-etapa="2"] .cw-cartao:nth-child(3){animation-delay:.45s}
.palco-vivo[data-etapa="2"] .cw-cartao:nth-child(4){animation-delay:.6s}
.cw-selos s:nth-child(2){--k:1}.cw-selos s:nth-child(3){--k:2}.cw-selos s:nth-child(4){--k:3}.cw-selos s:nth-child(5){--k:4}
.cw-selos s:nth-child(6){--k:5}.cw-selos s:nth-child(7){--k:6}.cw-selos s:nth-child(8){--k:7}.cw-selos s:nth-child(9){--k:8}
.cw-selos s:nth-child(10){--k:9}
.palco-vivo[data-etapa="2"] .cw-destaque .cw-selos s{animation:seloCarimba .35s var(--ease) both;animation-delay:calc(.85s + var(--k, 0) * 70ms)}
.palco-vivo[data-etapa="2"] .cw-destaque .cw-tag{animation:estala .45s 1.65s var(--ease) both;transform-origin:left center}
.palco-vivo .cw-destaque{position:relative;overflow:hidden}
.palco-vivo .cw-destaque::after{
  content:"";position:absolute;inset:0;pointer-events:none;translate:-120% 0;
  background:linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 70%);
}
.palco-vivo[data-etapa="2"] .cw-destaque::after{animation:brilho .9s 1.9s ease-in-out both}

/* etapa 3: a notificação desce no topo da tela, some, e a conversa aparece com a mensagem e o link */
.mg-notif{display:none}
.palco-vivo .mg-notif{
  display:flex;align-items:center;gap:calc(8 * var(--u));
  position:absolute;z-index:2;top:calc(38 * var(--u));left:calc(8 * var(--u));right:calc(8 * var(--u));
  padding:calc(8 * var(--u)) calc(10 * var(--u));border-radius:calc(14 * var(--u));
  background:rgba(255,255,255,.94);box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(17,24,39,.22);
  font-size:calc(10.5 * var(--u));line-height:1.3;opacity:0;
}
.mg-notif i{width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:calc(7 * var(--u));flex:none;background:var(--c-cafe);color:#fff;font-style:normal;display:grid;place-items:center;font-family:var(--f-display);font-weight:800}
.mg-notif span{display:block;color:var(--apagado)}
.mg-notif small{margin-left:auto;align-self:flex-start;font-size:calc(9 * var(--u));color:var(--apagado)}
@keyframes notifPassa{
  0%{opacity:0;transform:translateY(-140%)}
  14%,72%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-140%)}
}
@keyframes bolhaChega{from{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
@keyframes lida{from{color:var(--apagado)}to{color:var(--marca-texto)}}
.palco-vivo[data-etapa="3"] .mg-notif{animation:notifPassa 1.9s .3s var(--ease) both}
.palco-vivo[data-etapa="3"] .mg-dia{animation:surge .4s 1.5s both}
.palco-vivo[data-etapa="3"] .mg-bolha{animation:bolhaChega .5s 1.7s var(--ease) both;transform-origin:0 0}
.palco-vivo[data-etapa="3"] .mg-hora svg{animation:lida .3s 2.7s both}
.palco-vivo[data-etapa="3"] .mg-link{animation:cartaoEntra .5s 2.2s var(--ease) both}
.palco-vivo .porta{
  display:block;position:absolute;top:0;bottom:0;left:calc(var(--gutter) + (100% - 2 * var(--gutter) - 40px) * .4651 + 40px);right:var(--gutter);
  perspective:1400px;perspective-origin:30% 40%;pointer-events:none;z-index:3;
}
.porta-giro{
  position:absolute;left:50%;top:50%;width:calc(var(--hf) * .58);aspect-ratio:105/148;
  translate:-50% -46%;
  transform-style:preserve-3d;transform-origin:0 50%;
  transform:rotateY(calc(var(--abre, 0) * -84deg)) translateZ(calc(var(--abre, 0) * 30px));
}
.porta-giro .placa3d{--w:calc(var(--hf) * .58);left:0;top:0}
.porta-sombra{
  position:absolute;left:50%;top:50%;width:min(320px, 30vw);height:60%;translate:-40% -40%;
  background:radial-gradient(closest-side, rgba(17,24,39,.22), rgba(17,24,39,0));filter:blur(14px);
  opacity:calc(1 - var(--abre, 0));
}
.palco-vivo .palco-passos{
  display:flex;gap:10px;align-items:center;max-width:var(--larg);margin:0 auto;padding:12px var(--gutter) 0;width:100%;
  list-style:none;font-size:.88rem;color:var(--apagado);
}
.palco-passos li{display:flex;align-items:center;gap:8px}
.palco-passos li::before{content:"";width:28px;height:4px;border-radius:2px;background:var(--filete);transition:background-color .3s}
.palco-vivo[data-etapa="1"] .palco-passos li:nth-child(1),
.palco-vivo[data-etapa="2"] .palco-passos li:nth-child(2),
.palco-vivo[data-etapa="3"] .palco-passos li:nth-child(3){color:var(--tinta);font-weight:600}
.palco-vivo[data-etapa="1"] .palco-passos li:nth-child(1)::before,
.palco-vivo[data-etapa="2"] .palco-passos li:nth-child(2)::before,
.palco-vivo[data-etapa="3"] .palco-passos li:nth-child(3)::before{background:var(--marca)}
.palco-vivo .palco-dica{
  display:inline-flex;margin-left:auto;align-items:center;gap:8px;
  opacity:calc(1 - var(--abre, 0) * 2);
}

/* =====================================================================================
   COMO FUNCIONA — três objetos fotografados
   ===================================================================================== */
.passos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);margin-top:64px}
.passo{grid-column:span 4;display:flex;flex-direction:column}
.passo-foto{
  position:relative;aspect-ratio:4/4.6;border-radius:24px;overflow:hidden;
  display:grid;place-items:center;
  container-type:inline-size;
}
.passo-foto .cic{border-radius:24px}
.passo-foto > .fone{--fw:min(184px, 48cqw);z-index:1}
.passo-n{
  position:absolute;left:18px;top:16px;z-index:2;
  font-family:var(--f-display);font-weight:800;font-size:clamp(56px,7cqw,88px);line-height:1;color:#fff;
  text-shadow:0 1px 0 rgba(17,24,39,.08);
  -webkit-text-stroke:1.5px var(--filete);
}
.passo-tempo{
  position:absolute;right:16px;top:16px;z-index:2;
  font-weight:600;font-size:.85rem;background:var(--superficie);border-radius:99px;padding:6px 12px;
  box-shadow:inset 0 0 0 1px var(--filete);
}
.passo h3{font-size:clamp(24px,2vw,30px);margin:24px 0 10px}
.passo p{color:var(--apagado);margin:0}
.passo-1 .fone{rotate:-4deg;translate:-4% 4%}
.passo-3 .fone{rotate:4deg;translate:4% 4%}
.passo-2-cena{position:relative;width:100%;height:100%;perspective:120cqw;perspective-origin:30% 20%}
.passo-2-cena .placa3d{--w:40cqw;left:12cqw;top:20cqw;transform:rotateY(22deg)}
.passo-2-cena .fone{position:absolute;right:9cqw;top:14cqw;--fw:38cqw;rotate:7deg}
.passo-2-cena .sombra-p{position:absolute;left:22cqw;top:76cqw;width:56cqw;height:9cqw;background:radial-gradient(70% 60% at 10% 50%, rgba(17,24,39,.3), rgba(17,24,39,0) 70%);transform:skewX(-50deg);filter:blur(6px)}
@media (max-width:980px){
  .passo{grid-column:span 12}
  .passo-foto{aspect-ratio:auto;height:min(460px, 118vw)}
  .passo-foto > .fone{--fw:min(190px, 50vw)}
}

/* =====================================================================================
   A DOR — display vazio e cartão de papel amassado
   ===================================================================================== */
.dor{background:linear-gradient(180deg, #E6EBF2 0%, var(--fundo) 100%)}
.dor-grade{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.dor-foto{position:relative;aspect-ratio:1/0.86;container-type:inline-size;perspective:140cqw;perspective-origin:40% 25%}
.dor-foto .placa3d{--w:30cqw;left:12cqw;top:10cqw;transform:rotateY(24deg)}
.papel{
  position:absolute;left:38cqw;top:47cqw;width:56cqw;
  rotate:-9deg;filter:drop-shadow(1.4cqw 2cqw 1.4cqw rgba(17,24,39,.28));
}
.papel svg{width:100%;height:auto;display:block}
.dor-sombra{position:absolute;left:24cqw;top:51cqw;width:40cqw;height:8cqw;background:radial-gradient(70% 60% at 10% 50%, rgba(17,24,39,.3), rgba(17,24,39,0) 70%);transform:skewX(-50deg);filter:blur(1cqw)}
.defeitos{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0}
.defeitos li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--filete)}
.defeitos li:last-child{border-bottom:1px solid var(--filete)}
.defeitos svg{width:28px;height:28px;color:var(--marca-texto);margin-top:2px}
.defeitos strong{display:block;font-weight:600}
.defeitos span{color:var(--apagado)}
@media (max-width:900px){ .dor-grade{grid-template-columns:minmax(0,1fr)} .dor-foto{max-width:560px;width:100%;margin:0 auto} }

/* =====================================================================================
   O KIT — flatlay sobre o tampo + ficha técnica
   ===================================================================================== */
.kit{background:var(--fundo)}
.kit-cab{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end}
.kit-pdf{
  display:flex;gap:16px;align-items:flex-start;background:var(--superficie);border-radius:var(--raio);
  padding:20px 22px;box-shadow:inset 0 0 0 1px var(--filete), var(--sombra-leve);
}
.kit-pdf svg{width:36px;height:36px;flex:none;color:var(--marca-texto)}
.kit-pdf strong{display:block;font-family:var(--f-display);font-weight:800;font-size:1.25rem;line-height:1.15;margin-bottom:4px}
.kit-pdf p{margin:0;color:var(--apagado);font-size:.95rem}
.mesa{
  position:relative;margin-top:56px;border-radius:28px;
  padding:clamp(28px,4vw,64px);
  background:
    radial-gradient(90% 70% at 10% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #F4F6FA 0%, #E4E9F1 100%);
  box-shadow:inset 0 0 0 1px rgba(213,219,229,.8);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(16px,2vw,28px);align-items:start;
}
.obj{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.obj figcaption{display:flex;align-items:baseline;gap:8px;font-size:.92rem;text-align:left;max-width:30ch}
.obj figcaption b{font-family:var(--f-display);font-weight:800;color:var(--marca-texto);font-size:.95rem}
.obj figcaption span{color:var(--apagado)}
.obj figcaption strong{color:var(--tinta);font-weight:600}
.obj-placa{grid-column:1 / span 3}
.obj-guia{grid-column:4 / span 3;padding-top:24px}
.obj-pin{grid-column:7 / span 3}
.obj-cart{grid-column:10 / span 3;padding-top:30px}
.obj-painel{grid-column:3 / span 8}
.flat-placa{
  width:100%;max-width:240px;aspect-ratio:105/148;position:relative;rotate:-3deg;
  border-radius:8px;background:#fff;
  box-shadow:inset 3px 0 0 rgba(255,255,255,.9), 0 0 0 6px rgba(186,230,253,.45), 0 0 0 7px rgba(255,255,255,.9), var(--sombra-objeto);
}
.flat-placa .encarte{inset:0;transform:none;border-radius:8px}
.flat-guia{
  width:100%;max-width:230px;aspect-ratio:210/297;rotate:2.5deg;background:#fff;border-radius:3px;
  padding:9% 9%;box-shadow:var(--sombra-objeto);container-type:inline-size;
  display:flex;flex-direction:column;gap:4cqi;
}
.flat-guia .g-cab{display:flex;align-items:center;gap:3cqi;padding-bottom:4cqi;border-bottom:.6cqi solid var(--tinta)}
.flat-guia .g-cab svg{width:8cqi;height:8cqi;flex:none}
.flat-guia .g-cab span{font-family:var(--f-display);font-weight:800;font-size:7.4cqi;line-height:1}
.flat-guia ol{margin:0;padding:0;list-style:none;display:grid;gap:4.4cqi;counter-reset:g}
.flat-guia li{display:grid;grid-template-columns:8cqi minmax(0,1fr);gap:3cqi;font-size:5cqi;line-height:1.3;counter-increment:g}
.flat-guia li::before{content:counter(g);width:8cqi;height:8cqi;border-radius:50%;background:var(--marca);color:var(--marca-tinta);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:4.6cqi}
.flat-guia .g-linhas{margin-top:auto;display:grid;gap:2.4cqi}
.flat-guia .g-linhas i{height:1.6cqi;border-radius:2px;background:#E5E9F0}
.flat-guia .g-linhas i:nth-child(2){width:80%}.flat-guia .g-linhas i:nth-child(3){width:60%}
.obj .fone{--fw:150px}
.obj-pin .fone{rotate:-3deg}
.obj-cart .fone{rotate:4deg}
.tablet{
  width:100%;position:relative;border-radius:22px;padding:12px;
  background:linear-gradient(118deg, #4a5468 0%, #1d2330 14%, #0b0f17 60%, #1a202c 100%);
  box-shadow:inset 1.5px 0 0 rgba(255,255,255,.35), var(--sombra-objeto);
}
.tablet-tela{border-radius:12px;background:#F7F9FC;overflow:hidden;position:relative}
.tablet-tela::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 26%)}
.obj-painel .tablet{rotate:-1.5deg}

.ficha{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,64px)}
.ficha h3{font-size:clamp(28px,2.6vw,40px)}
.ficha h3 + p{color:var(--apagado);margin-top:14px}
.ficha dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(20px,3vw,40px)}
.ficha dl div{padding:18px 0;border-top:1px solid var(--filete)}
.ficha dt{font-weight:600}
.ficha dd{margin:4px 0 0;color:var(--apagado)}
@media (max-width:1080px){
  .obj-placa{grid-column:1 / span 4}
  .obj-guia{grid-column:5 / span 4;padding-top:0}
  .obj-pin{grid-column:9 / span 4}
  .obj-cart{grid-column:1 / span 4;padding-top:0}
  .obj-painel{grid-column:5 / span 8}
}
@media (max-width:760px){
  .kit-cab,.ficha{grid-template-columns:minmax(0,1fr)}
  .ficha dl{grid-template-columns:minmax(0,1fr)}
  .mesa{grid-template-columns:repeat(2,minmax(0,1fr));padding:28px 18px}
  .obj-placa,.obj-guia,.obj-pin,.obj-cart{grid-column:span 1;padding-top:0}
  .obj-painel{grid-column:1 / -1}
  .obj figcaption{font-size:.86rem;flex-wrap:wrap;gap:4px}
  .obj .fone{--fw:140px}
}

/* =====================================================================================
   CONTROLE DO DONO — o painel num tablet sobre o tampo
   ===================================================================================== */
.controle{background:linear-gradient(180deg, var(--fundo), #E3E9F1)}
.ctrl-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(32px,5vw,72px);align-items:center}
.ctrl-lista{list-style:none;margin:36px 0 0;padding:0}
.ctrl-lista li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--filete)}
.ctrl-lista li:last-child{border-bottom:1px solid var(--filete)}
.ctrl-lista svg{width:26px;height:26px;color:var(--marca-texto);margin-top:2px}
.ctrl-lista strong{display:block;font-weight:600}
.ctrl-lista span{color:var(--apagado);font-size:.97rem}
.ctrl-foto{position:relative;padding:clamp(28px,4vw,56px) clamp(16px,3vw,44px) clamp(48px,6vw,80px);border-radius:28px;overflow:hidden}
.ctrl-foto .cic{border-radius:28px}
.ctrl-3d{position:relative;perspective:1600px;perspective-origin:30% 0%}
.ctrl-3d .tablet{transform:rotateX(16deg) rotateY(-8deg) rotateZ(.5deg);transform-origin:50% 100%;box-shadow:inset 1.5px 0 0 rgba(255,255,255,.35), 30px 50px 60px -30px rgba(17,24,39,.45), 80px 90px 100px -60px rgba(17,24,39,.3)}
.ctrl-sombra{position:absolute;left:20%;right:-10%;bottom:6%;height:16%;background:radial-gradient(60% 60% at 30% 40%, rgba(17,24,39,.25), rgba(17,24,39,0) 70%);transform:skewX(-40deg);filter:blur(12px)}
/* painel (tablet) */
.pn{padding:18px 20px 20px;display:grid;gap:14px;font-size:14px;color:var(--tinta)}
.pn-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pn-topo i{width:28px;height:28px;border-radius:8px;background:var(--c-cafe);color:#fff;font-style:normal;display:grid;place-items:center;font-family:var(--f-display);font-weight:800}
.pn-topo strong{font-family:var(--f-display);font-weight:800;font-size:18px}
.pn-topo span{margin-left:auto;font-size:12px;color:var(--apagado)}
.pn-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pn-4 div{background:#fff;border-radius:12px;padding:12px;box-shadow:0 0 0 1px var(--filete)}
.pn-4 strong{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(24px,2.4vw,34px);line-height:1;letter-spacing:-.02em}
.pn-4 small{display:block;margin-top:6px;font-size:12px;color:var(--apagado);line-height:1.25}
.pn-meio{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px}
.pn-card{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 0 0 1px var(--filete)}
.pn-card h4{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--apagado)}
.pn-graf{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:end;height:120px}
.pn-graf div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:11px;color:var(--apagado)}
.pn-graf s{width:100%;max-width:26px;border-radius:5px 5px 2px 2px;background:#BAE6FD;height:var(--h);text-decoration:none}
.pn-graf div:last-child s{background:var(--marca)}
.pn-graf div:last-child{color:var(--tinta);font-weight:600}
.pn-graf em{font-style:normal;font-size:10.5px;color:var(--tinta);font-weight:600}
.pn-at{display:grid;gap:10px}
.pn-at div{display:grid;grid-template-columns:52px minmax(0,1fr) 28px;align-items:center;gap:8px;font-size:13px}
.pn-at s{height:10px;border-radius:5px;background:#BAE6FD;width:var(--w);text-decoration:none}
.pn-at b{font-family:var(--f-display);font-weight:800;text-align:right}
.pn-ult{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 0 0 1px var(--filete);font-size:13px}
.pn-ult span{color:var(--apagado)}
.pn-ult b{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--tinta);font-weight:600;font-size:12px}
@media (max-width:980px){ .ctrl-grade{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
  .pn{padding:12px;gap:10px}
  .pn-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-meio{grid-template-columns:minmax(0,1fr)}
  .pn-graf{height:96px}
  .ctrl-3d .tablet{transform:none}
  .tablet{padding:8px;border-radius:16px}
}

/* =====================================================================================
   PREÇO — etiqueta pendurada
   ===================================================================================== */
.preco{background:linear-gradient(180deg, #E3E9F1, var(--fundo))}
.preco-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;margin-top:48px}
.arara{position:relative;padding-top:16px;display:flex;justify-content:center}
.arara::before{ /* barra cromada da arara */
  content:"";position:absolute;top:0;left:4%;right:4%;height:12px;border-radius:6px;
  background:linear-gradient(180deg, #fff 0%, #C9D2DE 45%, #9AA6B6 100%);
  box-shadow:0 8px 14px -6px rgba(17,24,39,.35);
}
.etq-pend{position:relative;width:min(380px, 100%);transform-origin:50% 0;rotate:-3deg;padding-top:64px}
.etq-pend svg.fio{position:absolute;top:2px;left:50%;width:60px;height:72px;translate:-50% 0;overflow:visible}
.etq-sombra{filter:drop-shadow(16px 26px 22px rgba(17,24,39,.28)) drop-shadow(40px 50px 40px rgba(17,24,39,.14))}
.etq{
  position:relative;background:var(--superficie);
  clip-path:polygon(18% 0, 82% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
  padding:56px 32px 28px;text-align:center;
  background-image:linear-gradient(112deg, rgba(14,165,233,.06), rgba(255,255,255,0) 40%);
}
.etq-furo{position:absolute;top:18px;left:50%;width:18px;height:18px;translate:-50% 0;border-radius:50%;background:#E3E9F1;box-shadow:inset 2px 3px 4px rgba(17,24,39,.35)}
.etq-plano{font-family:var(--f-display);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;color:var(--apagado)}
.etq-valor{display:flex;justify-content:center;align-items:flex-start;gap:4px;margin:10px 0 4px;font-family:var(--f-display);font-weight:800;line-height:.9;letter-spacing:-.04em}
.etq-valor small{font-size:clamp(24px,2.4vw,34px);margin-top:.35em}
.etq-valor span{font-size:clamp(88px,10vw,136px)}
.etq-valor em{font-style:normal;font-size:clamp(20px,2vw,26px);align-self:flex-end;margin-bottom:.5em;color:var(--apagado)}
.etq-sem{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin:14px 0 0;padding:16px 0 0;border-top:2px dashed var(--filete);list-style:none;font-weight:600}
.etq-sem li{display:inline-flex;align-items:center;gap:6px}
.etq-sem li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--marca);margin-right:4px}
.etq-ano{margin:14px 0 0;color:var(--apagado);font-size:.95rem}
.etq-barras{display:flex;justify-content:center;margin-top:18px}
.etq-barras svg{width:180px;height:44px;color:var(--tinta)}
.etq-dia{display:inline-block;margin-top:6px;font-size:.8rem;letter-spacing:.08em;color:var(--apagado)}
@keyframes balanca{0%{rotate:-8deg}35%{rotate:3deg}65%{rotate:-4.5deg}85%{rotate:-2deg}100%{rotate:-3deg}}
.js .etq-pend.visto{animation:balanca 1.6s var(--ease) both}
.inclui h3{font-size:clamp(26px,2.4vw,36px)}
.inclui ul{list-style:none;margin:20px 0 0;padding:0}
.inclui li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:13px 0;border-top:1px solid var(--filete)}
.inclui li:last-child{border-bottom:1px solid var(--filete)}
.inclui li svg{width:22px;height:22px;color:var(--marca-texto);margin-top:2px}
.inclui .btn{margin-top:32px}
.inclui .pag{margin:14px 0 0;font-size:.93rem;color:var(--apagado)}
@media (max-width:900px){ .preco-grade{grid-template-columns:minmax(0,1fr)} }
@media (max-width:420px){ .etq{padding:52px 18px 24px} .etq-pend{width:calc(100% - 28px)} .ctrl-sombra{right:0} }

/* =====================================================================================
   COMPARAÇÃO — duas etiquetas de gôndola
   ===================================================================================== */
.comparacao{background:var(--fundo)}
.cmp-wrap{margin-top:48px;border-radius:24px;background:var(--superficie);box-shadow:inset 0 0 0 1px var(--filete), var(--sombra-objeto);overflow:hidden}
.cmp{width:100%;border-collapse:collapse;table-layout:fixed}
.cmp caption{text-align:left;padding:0}
.cmp th,.cmp td{padding:20px clamp(14px,2.4vw,32px);text-align:left;vertical-align:top;border-top:1px solid var(--filete)}
.cmp thead th{border-top:0;font-family:var(--f-display);font-weight:800;font-size:clamp(16px,1.5vw,22px);line-height:1.15;padding-top:26px;padding-bottom:22px}
.cmp thead th:first-child{color:var(--apagado);font-family:var(--f-corpo);font-weight:600;font-size:.9rem}
.cmp tbody th{font-weight:600}
.cmp thead th:first-child{width:28%}
.cmp td{color:var(--apagado)}
.cmp .nosso{background:var(--marca-vidro);color:var(--tinta)}
.cmp thead .nosso{background:var(--marca);color:var(--marca-tinta)}
.cmp td.nosso strong{font-family:var(--f-display);font-weight:800;font-size:clamp(20px,2vw,28px);display:block;line-height:1.1}
.cmp td strong{font-family:var(--f-display);font-weight:800;font-size:clamp(18px,1.8vw,24px);display:block;line-height:1.15;color:var(--tinta)}
.cmp-nota{font-size:.88rem;color:var(--apagado);margin-top:16px}
@media (max-width:640px){
  .cmp th,.cmp td{padding:14px 10px;font-size:.88rem}
  .cmp thead th:first-child{width:26%}
  .cmp td strong,.cmp td.nosso strong{font-size:17px}
  .cmp thead th{font-size:14px}
}

/* =====================================================================================
   FAQ
   ===================================================================================== */
.faq-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,5vw,80px);align-items:start}
.faq-lista{border-top:1px solid var(--filete)}
.faq-lista details{border-bottom:1px solid var(--filete)}
.faq-lista summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;padding:16px 0;font-family:var(--f-display);font-weight:700;font-size:clamp(18px,1.5vw,22px);line-height:1.25;
}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary .mais{
  width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--superficie);box-shadow:inset 0 0 0 1px var(--filete);transition:background-color .2s, transform .25s var(--ease);
}
.faq-lista summary .mais svg{width:16px;height:16px}
.faq-lista summary:hover .mais{background:var(--marca)}
.faq-lista details[open] .mais{transform:rotate(45deg);background:var(--marca)}
.faq-lista details p{margin:0 0 22px;color:var(--apagado);max-width:60ch}
@media (max-width:900px){ .faq-grade{grid-template-columns:minmax(0,1fr)} }

/* =====================================================================================
   CTA FINAL
   ===================================================================================== */
.final{padding:clamp(56px,7vw,96px) 0 clamp(80px,9vw,120px)}
.final-caixa{
  position:relative;border-radius:32px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:24px;
  padding:clamp(36px,5vw,72px);
}
.final-caixa .cic{border-radius:32px}
.final-txt{position:relative;z-index:1}
.final h2{font-size:clamp(40px,5.4vw,80px);max-width:12ch}
.final .lead{margin-bottom:32px}
.final-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.final-foto{position:relative;aspect-ratio:1/1;container-type:inline-size;perspective:130cqw;perspective-origin:40% 20%}
.final-foto .placa3d{--w:46cqw;left:20cqw;top:6cqw;transform:rotateY(24deg) rotateX(-1deg)}
.final-foto .s{position:absolute;left:30cqw;top:64cqw;width:60cqw;height:12cqw;background:radial-gradient(70% 60% at 15% 50%, rgba(17,24,39,.3), rgba(17,24,39,0) 70%);transform:skewX(-40deg);transform-origin:left center;filter:blur(1.2cqw)}
@media (max-width:860px){ .final-caixa{grid-template-columns:minmax(0,1fr)} .final-foto{max-width:420px;width:100%;margin:0 auto} }

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--filete);padding:40px 0 48px}
.rodape-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.rodape nav ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.rodape nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--apagado);text-decoration:none;border-radius:8px;font-weight:500}
.rodape nav a:hover{color:var(--tinta);background:rgba(255,255,255,.7)}
.rodape-meta{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--apagado);font-size:.9rem;padding-top:16px;border-top:1px solid var(--filete)}
.rodape-meta p{margin:0}
.rodape-suporte{width:100%;display:flex;flex-wrap:wrap;gap:4px 24px;align-items:center;color:var(--apagado);font-size:.95rem}
.rodape-suporte p{margin:0}
.rodape-suporte strong{color:var(--tinta)}
.rodape-suporte a{display:inline-block;line-height:44px;color:var(--tinta);font-weight:600}
.em-breve{font-weight:500;opacity:.85}
.faq-mais{margin:20px 0 0}
.faq-mais a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--tinta)}
.faq-pagina h1{max-width:18ch}
.faq-pagina .faq-lista{margin-top:36px;max-width:760px}
.faq-lista details{scroll-margin-top:96px}
.faq-lista details p a{color:var(--tinta);font-weight:600}
.faq-falar{margin-top:48px;max-width:760px;padding:24px 28px;border:1px solid var(--filete);border-radius:20px;background:rgba(255,255,255,.7)}
.faq-falar h2{margin:0 0 6px;font-size:1.4rem}
.faq-falar p{margin:0 0 16px;color:var(--apagado)}
.falar-canais{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;list-style:none;margin:0;padding:0}
.falar-email{font-weight:600}
.falar-email a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta)}

/* =====================================================================================
   MOVIMENTO REDUZIDO — tudo visível, tudo parado
   ===================================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1!important;translate:none!important}
  .cena{transform:none!important}
  .hero-txt > *,.bx-palco .bx-fone{opacity:1!important;translate:none!important}
  .btn:hover,.btn-marca:hover svg{transform:none}
  .etq-pend{rotate:-3deg}
}

/* =====================================================================================
   PÁGINAS INTERNAS: preço (recibo do P03), quero testar (formulário), termos e privacidade
   ===================================================================================== */
.interna{position:relative;padding:clamp(28px,3.4vw,52px) 0 clamp(56px,7vw,96px)}
.interna-fundo{position:absolute;inset:16px clamp(0px,1.2vw,16px) 0;max-width:1360px;margin:0 auto;border-radius:28px;overflow:hidden;z-index:-1}
.interna h1{font-size:clamp(38px,5vw,72px);letter-spacing:-.035em;line-height:.98;max-width:14ch}
.interna .lead{margin-top:18px}

/* ---------- preço: a conta impressa ---------- */
.preco-tela h1{font-size:clamp(34px,3.6vw,54px);max-width:16ch}
.preco-tela{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(32px,6vw,96px);align-items:center}
.preco-num{display:flex;align-items:flex-start;gap:6px;margin:18px 0 6px;font-family:var(--f-display);font-weight:800;line-height:.86;letter-spacing:-.05em}
.preco-num small{font-size:clamp(26px,2.6vw,38px);margin-top:.3em}
.preco-num span{font-size:clamp(88px,9vw,136px)}
.preco-num em{font-style:normal;font-size:clamp(20px,2vw,28px);align-self:flex-end;margin-bottom:.45em;color:var(--apagado);letter-spacing:-.01em}
.preco-ou{font-size:clamp(18px,1.4vw,21px);color:var(--apagado);margin:0}
.preco-ou strong{color:var(--tinta)}
.preco-sem{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.preco-sem li{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:99px;background:var(--superficie);box-shadow:inset 0 0 0 1px var(--filete);font-weight:600;font-size:.95rem}
.preco-sem svg{width:18px;height:18px;color:var(--marca-texto)}
.preco-acao{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.preco-acao p{margin:0;color:var(--apagado);font-size:.95rem}

.cupom{position:relative;width:min(100%,460px);justify-self:center;filter:drop-shadow(16px 26px 22px rgba(17,24,39,.22)) drop-shadow(2px 3px 2px rgba(17,24,39,.12))}
.cupom-papel{--dente:9px;position:relative;padding:var(--dente) 0}
.cupom-papel::before,.cupom-papel::after{content:"";position:absolute;left:0;right:0;height:var(--dente);background-repeat:repeat-x;background-size:calc(var(--dente)*2) calc(var(--dente)*2)}
.cupom-papel::before{top:0;background-image:linear-gradient(45deg,#fff 25%,transparent 25%),linear-gradient(315deg,#fff 25%,transparent 25%);background-position:0 calc(var(--dente)*-1)}
.cupom-papel::after{bottom:0;background-image:linear-gradient(135deg,#fff 25%,transparent 25%),linear-gradient(225deg,#fff 25%,transparent 25%)}
.cupom-corpo{background:#fff;background-image:linear-gradient(180deg,rgba(17,24,39,.03),transparent 40px);padding:18px clamp(18px,3vw,30px) 18px;font-size:.92rem;line-height:1.5;font-variant-numeric:tabular-nums}
.cupom-cab{text-align:center;margin:0}
.cupom-cab .wm-nome{display:block;font-size:1.4rem}
.cupom-cab small{display:block;color:var(--apagado);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-top:2px}
.cupom-tr{height:1.4em;background:linear-gradient(90deg,var(--tinta) 55%,transparent 0) 0 50%/9px 1.5px repeat-x;opacity:.45}
.cupom-tr2{height:1.4em;background:linear-gradient(var(--tinta),var(--tinta)) 0 calc(50% - 2px)/100% 1.5px no-repeat,linear-gradient(var(--tinta),var(--tinta)) 0 calc(50% + 2px)/100% 1.5px no-repeat}
.cupom-itens{list-style:none;margin:0;padding:0}
.cupom-it{display:flex;align-items:baseline;gap:.5ch;padding:2px 0}
.cupom-it .it{min-width:0}
.cupom-it .pt{flex:1 1 2ch;min-width:2ch;border-bottom:2px dotted var(--filete);transform:translateY(-.3em)}
.cupom-it .vl{white-space:nowrap;font-weight:600}
.cupom-total{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(20px,2vw,26px);padding:4px 0}
.cupom-total .vl{font-weight:800}
.cupom-nota{text-align:center;color:var(--apagado);font-size:.88rem;margin:4px 0 0}
.cupom-carimbo{display:flex;justify-content:center;padding:10px 0 2px}
.cupom-carimbo span{display:inline-block;padding:8px 16px 7px;border:3px solid var(--marca-texto);border-radius:8px;color:var(--marca-texto);font-family:var(--f-display);font-weight:800;font-size:1rem;line-height:1.2;text-transform:uppercase;letter-spacing:.06em;text-align:center;rotate:-5deg}
.cupom-barras{display:block;width:72%;height:34px;margin:8px auto 0;color:var(--tinta)}
.js .cupom-papel{animation:imprime 1.4s steps(14,end) .2s both}
.js .cupom-carimbo span{animation:carimba .38s cubic-bezier(.3,1.6,.5,1) 1.7s both}
@keyframes imprime{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes carimba{0%{opacity:0;scale:1.7}70%{opacity:1;scale:.96}100%{opacity:1;scale:1}}
@media (max-width:900px){
  .preco-tela{grid-template-columns:minmax(0,1fr)}
}

/* ---------- quero testar: formulário ---------- */
.qt-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(32px,6vw,96px);align-items:start}
.qt-passos{list-style:none;margin:32px 0 0;padding:0;counter-reset:qt}
.qt-passos li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--filete);counter-increment:qt}
.qt-passos li:last-child{border-bottom:1px solid var(--filete)}
.qt-passos li::before{content:counter(qt);width:32px;height:32px;border-radius:50%;background:var(--marca);color:var(--marca-tinta);display:grid;place-items:center;font-family:var(--f-display);font-weight:800}
.qt-passos strong{display:block;font-weight:600}
.qt-passos span{color:var(--apagado)}
.cartao-form{background:var(--superficie);border-radius:24px;padding:clamp(22px,3vw,36px);box-shadow:inset 0 0 0 1px var(--filete),var(--sombra-objeto)}
.cartao-form h2{font-size:clamp(26px,2.4vw,34px);margin-bottom:6px}
.cartao-form > p{color:var(--apagado);margin:0 0 20px}
.campo{display:grid;gap:6px;margin-bottom:16px}
.campo label{font-weight:600}
.campo input{
  min-height:52px;padding:0 16px;border-radius:14px;border:0;background:#F7F9FC;
  box-shadow:inset 0 0 0 1.5px var(--filete);font:inherit;font-size:1.05rem;color:var(--tinta);width:100%;
}
.campo input:hover{box-shadow:inset 0 0 0 1.5px #9AA6B6}
.campo input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--tinta),0 0 0 5px rgba(14,165,233,.35);background:#fff}
.campo input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--cor-erro)}
.campo .ajuda{font-size:.88rem;color:var(--apagado)}
.campo .erro-campo{font-size:.9rem;color:var(--cor-erro);font-weight:600;display:flex;gap:6px;align-items:flex-start}
.campo .erro-campo:empty{display:none}
.campo .erro-campo::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:var(--cor-erro);color:#fff;display:grid;place-items:center;font-size:12px;margin-top:2px}
.isca{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.cartao-form .btn{width:100%;margin-top:6px;border:0;cursor:pointer;font-family:var(--f-corpo)}
.cartao-form .btn[disabled]{opacity:.7;cursor:progress}
.qt-lgpd{font-size:.86rem;color:var(--apagado);margin:14px 0 0}
.aviso{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;border-radius:16px;padding:16px 18px;margin:0 0 18px;font-size:.98rem}
.aviso svg{width:26px;height:26px}
.aviso strong{display:block;font-weight:600}
.aviso p{margin:4px 0 0}
.aviso-erro{background:#FEF2F2;box-shadow:inset 0 0 0 1.5px #FCA5A5;color:#7F1D1D}
.aviso-erro svg{color:var(--cor-erro)}
.aviso a{color:inherit;font-weight:600}
.aviso [data-pendente]{font-weight:600}
.feito{text-align:left}
.feito-icone{width:64px;height:64px;border-radius:50%;background:var(--marca);color:var(--marca-tinta);display:grid;place-items:center;margin-bottom:18px}
.feito-icone svg{width:34px;height:34px}
.feito h2:focus{outline:none}
.feito p{color:var(--apagado)}
@media (max-width:900px){ .qt-grade{grid-template-columns:minmax(0,1fr)} }

/* ---------- termos e privacidade ---------- */
.legal{max-width:760px}
.legal-aviso{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;background:var(--superficie);border-radius:16px;padding:16px 18px;margin:28px 0 8px;box-shadow:inset 0 0 0 1px var(--filete)}
.legal-aviso svg{width:24px;height:24px;color:var(--marca-texto)}
.legal-aviso p{margin:0}
.legal-sumario{margin:24px 0 8px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.legal-sumario a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:99px;background:var(--superficie);box-shadow:inset 0 0 0 1px var(--filete);text-decoration:none;font-weight:500;font-size:.95rem}
.legal-sumario a:hover{box-shadow:inset 0 0 0 1.5px var(--tinta)}
.legal section{padding:28px 0 4px;border-bottom:1px solid var(--filete)}
.legal h2{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em}
.legal section p{color:var(--apagado);margin:10px 0 0}
.legal section ul{color:var(--apagado);margin:10px 0 0;padding-left:1.2em}
.legal section li,.legal-resumo li{margin:6px 0 0}
.legal-versao{margin:14px 0 0;color:var(--apagado);font-size:.95rem}
.legal-resumo{margin:8px 0 0;padding-left:1.3em}

@media (prefers-reduced-motion: reduce){
  .js .cupom-papel{clip-path:none!important}
  .js .cupom-carimbo span{opacity:1!important;scale:1!important}
}