/* =============================================================================
   TAPETPRO — Landing de tráfego frio (Meta). Mobile-first.
   ============================================================================= */

:root{
  /* ---- azul da marca -------------------------------------------------------
     --acc      cor principal / CTA. Branco sobre ele dá 4,1:1, então serve para
                superfícies e texto grande (o botão principal é 19px bold).
     --acc-deep hover, e qualquer superfície com texto branco PEQUENO (5,8:1).
     --acc-dark o mesmo azul profundo quando é texto sobre branco (5,8:1). */
  --acc:#1677FF;
  --acc-deep:#0B5ED7;
  --acc-dark:#0B5ED7;
  --acc-bg:#EFF6FF;       /* estado selecionado e hover suave */

  /* ---- neutros ---- */
  --ink:#111111;          /* títulos */
  --graf:#252525;         /* elementos premium: rodapé, selos escuros */
  --mut:#555B63;          /* texto secundário */
  --mut2:#6A7079;         /* legendas e preço riscado; passa AA também sobre
                             os fundos tingidos (--soft e --acc-bg) */
  --line:#E2E5E9;         /* bordas de card */
  --line-2:#CFD4DB;       /* bordas de campo: precisa marcar mais presença */
  --soft:#F7F8FA;         /* fundo geral */
  --soft2:#EDEFF2;        /* chips e trilhos */

  /* ---- semânticas ---- */
  --ok:#16A765;           /* verde de sucesso: ícones e preenchimentos */
  --ok-text:#0E7A48;      /* o mesmo verde escurecido, para texto pequeno */
  --ok-bg:#E7F6EE;
  --gold:#F5A623;         /* avaliações */
  --gold-bg:#FEF5E6;
  --gold-line:#F6DFB4;
  --alert:#C0392B;
  --acc-deeper:#08489F;   /* hover sobre o azul profundo */
  --acc-claro:#6EA8FF;    /* o azul clareado, para uso sobre o grafite */
  --on-graf:#A2A8B0;      /* texto sobre o grafite do rodapé */
  --r:14px;
  --rb:10px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:#fff;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.015em}
p{margin:0}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

.shell{max-width:1120px;margin:0 auto;padding:0 18px}
.sec{padding:44px 0}
.sec--soft{background:var(--soft)}
.sec--dark{background:var(--graf);color:#fff}
.hide{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- topo ---- */
.topbar{
  /* texto branco de 12,5px: precisa do azul profundo para passar em AA */
  background:var(--acc-deep);color:#fff;text-align:center;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:8px 12px;
  text-transform:uppercase;
}
.topbar b{font-weight:800}

.head{
  position:sticky;top:0;z-index:40;background:#fff;
  border-bottom:1px solid var(--line);
  padding:10px 0;
}
.head__in{display:flex;align-items:center;justify-content:center;gap:12px}
.head__logo{height:46px;width:auto}
.head__note{
  font-size:11.5px;color:var(--mut);font-weight:600;
  display:none;
}
@media(min-width:640px){ .head__note{display:block} }

/* ---------------------------------------------------------------- hero ---- */
.hero{padding:20px 0 8px}
.hero__grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.hero__grid>*{min-width:0}
@media(min-width:940px){
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:start}
  .hero{padding:28px 0 12px}
}

.badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;
}
.pill--acc{background:var(--acc-deep);color:#fff}
.pill--ink{background:var(--graf);color:#fff}
.pill--soft{background:var(--soft2);color:var(--ink)}

h1{font-size:26px;font-weight:800;margin-bottom:8px}
@media(min-width:640px){ h1{font-size:33px} }
h1 .em{color:var(--acc-dark)}

.sub{color:var(--mut);font-size:15px;margin-bottom:12px}

.rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.stars{color:var(--gold);font-size:15px;letter-spacing:1px}
.rating__txt{font-size:13.5px;color:var(--mut)}
.rating__txt b{color:var(--ink)}

/* ------------------------------------------------------------- galeria ---- */
.gal__main{
  position:relative;background:var(--soft);border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);
}
.gal__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gal__track::-webkit-scrollbar{display:none}
.gal__track img{min-width:100%;scroll-snap-align:center;aspect-ratio:1/1;object-fit:cover}
.gal__tag{
  position:absolute;left:10px;top:10px;z-index:2;
  background:var(--acc-deep);color:#fff;font-size:12px;font-weight:800;
  padding:5px 10px;border-radius:8px;letter-spacing:.03em;
}
.gal__count{
  position:absolute;right:10px;bottom:10px;z-index:2;
  background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700;
  padding:4px 9px;border-radius:999px;
}
.gal__thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.gal__thumbs::-webkit-scrollbar{display:none}
.gal__thumbs button{
  flex:0 0 60px;height:60px;padding:0;border:2px solid transparent;border-radius:9px;
  overflow:hidden;background:var(--soft);cursor:pointer;
}
.gal__thumbs button[aria-current="true"]{border-color:var(--acc)}
.gal__thumbs img{width:100%;height:100%;object-fit:cover}

/* --------------------------------------------------------------- preço ---- */
.buy{margin-top:4px}

.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price__old{color:var(--mut2);text-decoration:line-through;font-size:16px}
.price__now{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1}
.price__off{
  background:var(--ok-text);color:#fff;font-size:12.5px;font-weight:800;
  padding:4px 8px;border-radius:7px;
}
.price__inst{font-size:13.5px;color:var(--mut);margin-top:5px}
.price__inst b{color:var(--ink)}

/* ------------------------------------------------------------------ kit ---- */
.block__label{
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);margin:20px 0 9px;
}
.kits{display:grid;gap:9px}
.kit{
  position:relative;display:flex;gap:11px;align-items:center;text-align:left;
  width:100%;padding:11px;border:2px solid var(--line);border-radius:var(--rb);
  background:#fff;cursor:pointer;transition:border-color .12s,background .12s;
}
.kit:hover{border-color:var(--line-2)}
.kit[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-bg)}
.kit__img{flex:0 0 54px;height:54px;border-radius:8px;background:var(--soft);object-fit:cover}
.kit__body{flex:1;min-width:0}
.kit__name{font-size:14px;font-weight:700;display:block}
.kit__desc{font-size:12.5px;color:var(--mut);display:block;margin-top:1px}
.kit__price{font-size:14px;font-weight:800;white-space:nowrap;text-align:right}
.kit__price s{display:block;font-size:11.5px;font-weight:500;color:var(--mut2)}
.kit__flag{
  position:absolute;top:-8px;right:10px;background:var(--graf);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 7px;border-radius:5px;
}

/* -------------------------------------------------------------- veículo ---- */
.veic{
  border:2px solid var(--line);border-radius:var(--rb);padding:14px;background:var(--soft);
  scroll-margin-top:80px;transition:border-color .2s,box-shadow .2s;
}
.veic.is-flash{border-color:var(--acc);box-shadow:0 0 0 4px rgba(22,119,255,.18)}
.veic__ttl{font-size:15px;font-weight:800;margin-bottom:2px}
.veic__sub{font-size:12.5px;color:var(--mut);margin-bottom:11px}
.veic__fields{display:grid;gap:8px}
.veic__fields>*{min-width:0}
@media(min-width:520px){ .veic__fields{grid-template-columns:1fr 1fr 90px} }
.veic__f label{
  display:block;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);margin-bottom:4px;
}
.veic select,.veic input[type=text]{
  /* 16px é obrigatório: abaixo disso o iOS Safari dá zoom sozinho ao focar
     o campo e não desfaz depois, empurrando a barra de compra para fora da tela */
  width:100%;height:44px;padding:0 32px 0 11px;font-size:16px;font-family:inherit;
  border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--ink);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555B63' d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;
}
.veic input[type=text]{background-image:none;padding-right:11px}
.veic select:disabled{background-color:var(--soft2);color:var(--mut2);cursor:not-allowed}
/* autocomplete de marca e modelo */
.ac{position:relative}
.ac__list{
  /* acima do header sticky (40) e da barra fixa de compra (50): uma lista
     aberta nunca pode ficar por baixo da moldura da página */
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:60;
  margin:0;padding:4px;list-style:none;
  background:#fff;border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  max-height:238px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.ac__opt{
  display:flex;align-items:baseline;gap:8px;
  padding:12px;border-radius:7px;font-size:14.5px;cursor:pointer;
  min-height:44px;                  /* alvo de toque confortável no mobile */
  align-content:center;flex-wrap:wrap;
}
.ac__opt:hover{background:var(--acc-bg)}
/* a opção ativa pelo teclado precisa de mais que um fundo claro: sem o contorno
   ela ficava em ~1,1:1 contra as vizinhas e a navegação por seta ficava cega */
.ac__opt[aria-selected="true"]{
  background:var(--acc-bg);
  outline:2px solid var(--acc);outline-offset:-2px;
}
/* quando não cabe embaixo (teclado do celular ocupa metade da tela), sobe */
.ac__list--cima{top:auto;bottom:calc(100% + 5px)}
.ac__opt mark{background:none;color:var(--acc-dark);font-weight:800;padding:0}
.ac__opt small{margin-left:auto;color:var(--mut2);font-size:12px;white-space:nowrap;flex:0 0 auto}
.ac__vazio{padding:10px 11px;font-size:13.5px;color:var(--mut)}

.veic__msg{font-size:13px;margin-top:10px;display:flex;gap:7px;align-items:flex-start}
.veic__msg--wait{color:var(--mut)}
.veic__msg--ok{color:var(--ok-text);background:var(--ok-bg);padding:9px 11px;border-radius:8px;font-weight:600}
.veic__hint{font-size:12px;color:var(--mut);margin-top:7px}

/* ----------------------------------------------------------------- cta ---- */
.cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:56px;margin-top:14px;padding:14px 18px;
  background:var(--acc);color:#fff;border:0;border-radius:11px;
  font-size:19px;font-weight:800;letter-spacing:.01em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;text-align:center;
  box-shadow:0 4px 14px rgba(22,119,255,.30);
  transition:transform .08s,background .15s;
}
.cta:hover{background:var(--acc-deep)}
.cta:active{transform:translateY(1px)}
.cta[data-locked="true"]{
  background:var(--line);color:var(--mut);box-shadow:none;cursor:pointer;
}
.cta--ghost{
  /* botão secundário: 19px é peso do CTA principal. Aqui pode ser menor sem
     custo de contraste — é texto azul escuro sobre branco (5,8:1 em qualquer tamanho) */
  background:#fff;color:var(--acc-dark);border:2px solid var(--acc);box-shadow:none;
  font-size:15.5px;min-height:50px;
}
.cta--ghost:hover{background:var(--acc-bg)}
.cta__sub{
  text-align:center;font-size:12.5px;color:var(--mut);margin-top:8px;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
}

/* ---------------------------------------------------------- vídeo ------- */
.vid{background:var(--graf);color:#fff}
.vid__in{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);align-items:center}
.vid__in>*{min-width:0}
@media(min-width:860px){ .vid__in{grid-template-columns:1fr minmax(0,300px);gap:52px} }
.vid .eyebrow{color:var(--acc-claro)}   /* o azul da marca some no grafite */
.vid h2{color:#fff}
.vid__txt p{color:#C6CBD2;font-size:15px;margin-bottom:18px}
.vid__txt .cta{max-width:320px}

.vid__box{position:relative;justify-self:center;width:100%;max-width:300px}
.vid__box video{
  /* height:auto é obrigatório: os atributos width/height do <video> viram
     dica de apresentação e anulariam o aspect-ratio, esticando a caixa */
  display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;
  background:#000;border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.vid__som{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:rgba(0,0,0,.68);color:#fff;border:0;border-radius:999px;
  padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.vid__som:hover{background:rgba(0,0,0,.85)}

/* --------------------------------------------- desconto de motorista ---- */
.drv{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  margin-top:12px;padding:12px;border:2px solid var(--line);border-radius:var(--rb);
  background:#fff;cursor:pointer;transition:border-color .15s,background .15s;
}
.drv:hover{border-color:var(--line-2)}
.drv[aria-checked="true"]{border-color:var(--acc);background:var(--acc-bg)}
.drv__ico{flex:0 0 38px;height:38px;border-radius:9px;background:var(--soft2);
  display:grid;place-items:center;color:var(--mut);transition:background .15s,color .15s}
.drv[aria-checked="true"] .drv__ico{background:var(--acc);color:#fff}
.drv__body{flex:1;min-width:0}
.drv__ttl{display:block;font-size:14.5px;font-weight:800}
.drv__sub{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
.drv[aria-checked="true"] .drv__sub{color:var(--acc-dark);font-weight:600}
.drv__sw{
  flex:0 0 44px;height:26px;border-radius:99px;background:var(--line-2);
  position:relative;transition:background .15s;
}
.drv[aria-checked="true"] .drv__sw{background:var(--acc)}
.drv__sw i{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .15s;
}
.drv[aria-checked="true"] .drv__sw i{transform:translateX(18px)}

.drv__eco{
  display:flex;align-items:center;gap:6px;margin-top:6px;
  font-size:13px;font-weight:700;color:var(--ok-text);
}

/* ------------------------------------------------------------ urgência ---- */
.urg{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin-top:13px;padding:10px 12px;border-radius:9px;
  background:var(--gold-bg);border:1px solid var(--gold-line);
}
.urg__i{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.urg__i time{font-variant-numeric:tabular-nums;font-weight:800}
.stock{width:100%}
.stock__bar{display:block;height:5px;border-radius:99px;background:var(--gold-line);overflow:hidden;margin-top:5px}
.stock__fill{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .4s}

/* ---------------------------------------------------------- confiança ---- */
.trust{display:grid;gap:8px;margin-top:16px}
.trust>*{min-width:0}
@media(min-width:520px){ .trust{grid-template-columns:1fr 1fr} }
.trust__i{
  display:flex;gap:9px;align-items:flex-start;
  padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;
}
.trust__i svg{flex:0 0 20px;margin-top:1px;color:var(--acc-dark)}
.trust__i b{display:block;font-size:13.5px}
.trust__i span{font-size:12.5px;color:var(--mut)}

.pay{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:12px}
.pay__c{
  font-size:10.5px;font-weight:700;color:var(--mut);background:#fff;
  border:1px solid var(--line);border-radius:5px;padding:4px 7px;letter-spacing:.02em;
}
.pay__t{font-size:12px;color:var(--mut2);width:100%;margin-bottom:2px}

/* ------------------------------------------------------------- seções ---- */
.head2{max-width:640px;margin:0 auto 26px;text-align:center}
.eyebrow{
  font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acc-dark);margin-bottom:7px;
}
h2{font-size:23px;font-weight:800;margin-bottom:8px}
@media(min-width:640px){ h2{font-size:28px} }
.head2 p:not(.eyebrow){color:var(--mut);font-size:15px}

/* problema */
.prob{display:grid;gap:10px}
.prob>*{min-width:0}
@media(min-width:760px){ .prob{grid-template-columns:repeat(3,1fr)} }
.prob__i{
  background:#fff;border:1px solid var(--line);border-radius:var(--rb);padding:16px;
}
.prob__i b{display:block;font-size:15px;margin-bottom:5px}
.prob__i p{font-size:14px;color:var(--mut)}
.prob__x{color:var(--alert);font-weight:800;margin-right:5px}

/* split imagem + texto */
.split{display:grid;gap:20px;align-items:center;grid-template-columns:minmax(0,1fr)}
.split>*{min-width:0}
@media(min-width:860px){
  .split{grid-template-columns:1fr 1fr;gap:44px}
  .split--rev .split__media{order:2}
}
.split + .split{margin-top:48px}
.split__media img{border-radius:var(--r);width:100%;aspect-ratio:1/1;object-fit:cover}
.split h3{font-size:21px;font-weight:800;margin-bottom:10px}
.split p:not(.eyebrow){color:var(--mut);font-size:15px;margin-bottom:14px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ticks li{display:flex;gap:9px;font-size:14.5px;align-items:flex-start}
.ticks svg{flex:0 0 19px;margin-top:2px;color:var(--ok)}

/* passos */
.steps{display:grid;gap:12px;counter-reset:s}
.steps>*{min-width:0}
@media(min-width:760px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{background:#fff;border:1px solid var(--line);border-radius:var(--rb);padding:16px}
.step__n{
  width:28px;height:28px;border-radius:8px;background:var(--acc-deep);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px;margin-bottom:9px;
}
.step b{display:block;font-size:14.5px;margin-bottom:4px}
.step p{font-size:13.5px;color:var(--mut)}

/* reviews */
.rev__top{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:16px;text-align:center;
}
.rev__score{font-size:36px;font-weight:800;line-height:1}
.rev__bars{flex:1;min-width:180px;max-width:280px;display:grid;gap:3px}
.rev__bar{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mut)}
.rev__bar i{flex:1;height:6px;background:var(--soft2);border-radius:99px;overflow:hidden;font-style:normal}
.rev__bar i b{display:block;height:100%;background:var(--gold);border-radius:99px}

.rev__list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.rev__list::-webkit-scrollbar{display:none}
.rev{
  flex:0 0 268px;scroll-snap-align:start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
}
.rev__photo{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--soft)}
.rev__in{padding:13px}
.rev__who{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.rev__who img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 34px}
.rev__who b{font-size:13.5px;display:block;line-height:1.25}
.rev__who span{font-size:11.5px;color:var(--ok-text);font-weight:700;display:flex;align-items:center;gap:3px}
.rev__stars{color:var(--gold);font-size:13px;letter-spacing:1px;margin-bottom:5px}
.rev__txt{font-size:14px;color:var(--ink)}
.rev__nav{display:flex;justify-content:center;gap:8px;margin-top:14px}
.rev__nav button{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:#fff;cursor:pointer;display:grid;place-items:center;
}
.rev__nav button:hover{border-color:var(--line-2)}

/* faq */
.faq{max-width:760px;margin:0 auto;display:grid;gap:8px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--rb);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;padding:14px 42px 14px 15px;position:relative;
  font-weight:700;font-size:14.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{padding:0 15px 15px;font-size:14px;color:var(--mut)}

/* garantia */
.guar{
  max-width:720px;margin:0 auto;text-align:center;background:#fff;
  border:2px dashed var(--acc);border-radius:var(--r);padding:26px 20px;
}
.guar__seal{
  width:64px;height:64px;margin:0 auto 12px;border-radius:50%;
  background:var(--acc-deep);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:15px;line-height:1;
}
.guar__seal small{display:block;font-size:9px;font-weight:700;letter-spacing:.05em}
.guar p{color:var(--mut);font-size:15px;margin-top:8px}

/* cta final */
.final{text-align:center;max-width:560px;margin:0 auto}
.final .price{justify-content:center;margin:14px 0 4px}
.final .cta{max-width:420px;margin-left:auto;margin-right:auto}

/* rodapé */
.foot{background:var(--graf);color:var(--on-graf);font-size:13px;padding:34px 0 96px}
.foot__grid{display:grid;gap:20px}
.foot__grid>*{min-width:0}
@media(min-width:760px){ .foot__grid{grid-template-columns:1.2fr 1fr 1fr} }
.foot h4{color:#fff;font-size:12px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 9px}
/* o logo tem preto, azul e uma foto do produto — inverter para branco destruiria
   a marca. Sobre o grafite ele vai numa placa branca, como um selo. */
.foot img{
  height:36px;width:auto;margin-bottom:12px;
  background:#fff;padding:7px 10px;border-radius:9px;
}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.foot a{color:var(--on-graf);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__legal{
  border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:16px;
  font-size:11.5px;color:#8B9199;
}

/* ------------------------------------------------------- barra fixa ---- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(0,0,0,.10);
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:11px;
  transform:translateY(110%);transition:transform .22s ease;
}
.sticky.is-on{transform:translateY(0)}
.sticky__p{flex:0 0 auto;line-height:1.15}
.sticky__p b{display:block;font-size:18px;font-weight:800}
.sticky__p s{font-size:11.5px;color:var(--mut2)}
/* o botão da barra fixa é pequeno demais para o azul claro: usa o profundo */
.sticky .cta{margin:0;flex:1;min-height:48px;font-size:15px;padding:12px 14px;background:var(--acc-deep)}
.sticky .cta:hover{background:var(--acc-deeper)}
@media(min-width:940px){ .sticky{display:none} }

/* ------------------------------------------------------- páginas legais ---- */
.doc{max-width:760px;margin:0 auto;padding:36px 18px 60px}
.doc h1{font-size:26px;margin-bottom:6px}
.doc .doc__upd{color:var(--mut2);font-size:13px;margin-bottom:26px}
.doc h2{font-size:18px;margin:26px 0 8px}
.doc p,.doc li{font-size:15px;color:#2F343B;margin-bottom:10px}
.doc ul{padding-left:20px}
.doc a{color:var(--acc-dark)}
.doc__back{display:inline-block;margin-bottom:22px;font-size:14px;font-weight:700;color:var(--acc-dark);text-decoration:none}

/* ═══════════════════════════════════════════════════════════ checkout ═══ */
.ck-body{background:var(--soft)}
.ck{display:grid;gap:20px;padding:22px 18px 40px;align-items:start}
.ck>*{min-width:0}
@media(min-width:900px){
  .ck{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:34px;padding-top:30px}
  .ck__resumo{order:2;position:sticky;top:78px}
  .ck__form{order:1}
}

.ck__h1{font-size:24px;font-weight:800;margin-bottom:16px}
.ck__h{font-size:15.5px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.ck__h i{
  flex:0 0 24px;height:24px;border-radius:7px;background:var(--acc-deep);color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:12.5px;font-weight:800;
}

/* ---- resumo ---- */
.ck__resumo{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.ck__item{display:flex;gap:11px;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--line)}
.ck__item img{flex:0 0 64px;height:64px;border-radius:9px;object-fit:cover;background:var(--soft)}
.ck__item b{display:block;font-size:14px;line-height:1.3}
.ck__item span{display:block;font-size:12.5px;color:var(--mut);margin-top:3px}
.ck__linhas{margin:13px 0 0;display:grid;gap:7px}
.ck__linhas>div{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.ck__linhas dt{color:var(--mut)}
.ck__linhas dd{margin:0;font-weight:600}
.ck__gratis{color:var(--ok-text);font-weight:800}
.ck__total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:13px;padding-top:13px;border-top:1px solid var(--line);
}
.ck__total span{font-size:14px;font-weight:700}
.ck__total b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.ck__parc{font-size:12.5px;color:var(--mut);text-align:right;margin-top:3px}
.ck__voltar{display:inline-block;margin-top:14px;font-size:13px;color:var(--acc-dark);text-decoration:none;font-weight:600}
.ck__voltar:hover{text-decoration:underline}

/* ---- formulário ---- */
.ck__form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 16px}
@media(min-width:640px){ .ck__form{padding:26px 24px} }
.ck__bloco{margin-bottom:26px}
.ck__linha2{display:grid;gap:12px}
@media(min-width:520px){ .ck__linha2{grid-template-columns:1fr 1fr} }
.ck__linha2>*{min-width:0}

.ck__campo{margin-bottom:12px}
.ck__campo label{display:block;font-size:12.5px;font-weight:700;color:var(--mut);margin-bottom:5px}
.ck__opc{font-weight:500;color:var(--mut2)}
.ck__campo input,.ck__campo select{
  width:100%;height:48px;padding:0 12px;font-size:16px;font-family:inherit;
  border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--ink);
}
.ck__campo select{
  appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555B63' d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;
}
.ck__campo input:focus,.ck__campo select:focus{border-color:var(--acc);outline:2px solid var(--acc-bg)}
.ck__campo.is-erro input,.ck__campo.is-erro select{border-color:var(--alert)}
.ck__erro{display:none;font-size:12px;color:var(--alert);font-weight:600;margin-top:4px}
.ck__campo.is-erro .ck__erro{display:block}
.ck__dica{display:block;font-size:12px;color:var(--mut);margin-top:4px}

/* ---- pagamento ---- */
.ck__pgs{display:grid;gap:9px}
.ck__pg{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:13px 12px;border:2px solid var(--line);border-radius:var(--rb);
  background:#fff;cursor:pointer;transition:border-color .12s,background .12s;
}
.ck__pg:hover{border-color:var(--line-2)}
.ck__pg[aria-checked="true"]{border-color:var(--acc);background:var(--acc-bg)}
.ck__pgIco{
  flex:0 0 38px;height:38px;border-radius:9px;background:var(--soft2);color:var(--mut);
  display:grid;place-items:center;
}
.ck__pg[aria-checked="true"] .ck__pgIco{background:var(--acc);color:#fff}
.ck__pgTxt{flex:1;min-width:0}
.ck__pgTxt b{display:block;font-size:14.5px}
.ck__pgTxt small{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
.ck__pgFlag{
  flex:0 0 auto;background:var(--ok-text);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.05em;padding:3px 7px;border-radius:5px;text-transform:uppercase;
}

.ck__cartao{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:var(--rb);background:var(--soft)}
.ck__seg{display:flex;gap:7px;align-items:flex-start;font-size:12px;color:var(--mut);margin-top:11px}
.ck__seg svg{flex:0 0 13px;margin-top:2px}
.ck__aviso{
  font-size:13.5px;color:var(--warn,#8A5A00);background:var(--gold-bg);
  border:1px solid var(--gold-line);border-radius:9px;padding:11px 12px;
}

.ck__msg{
  font-size:13.5px;font-weight:700;color:#fff;background:var(--alert);
  border-radius:9px;padding:12px 14px;margin-bottom:12px;
}
.ck__enviar{margin-top:4px}

/* ---- PIX ---- */
.ck__modal{
  position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.62);
  display:grid;place-items:center;padding:18px;overflow-y:auto;
}
.ck__modalIn{
  background:#fff;border-radius:var(--r);padding:24px 20px;max-width:400px;width:100%;
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.ck__modalIn h2{font-size:20px;font-weight:800;margin-bottom:8px}
.ck__pixSub{font-size:14px;color:var(--mut);margin-bottom:16px}
.ck__modalIn img{width:240px;height:240px;margin:0 auto 16px;border-radius:10px;background:var(--soft)}
.ck__pixLabel{display:block;font-size:12.5px;font-weight:700;color:var(--mut);margin-bottom:5px;text-align:left}
#pixCodigo{
  width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  border:1px solid var(--line-2);border-radius:9px;padding:10px;resize:none;margin-bottom:11px;
  color:var(--ink);background:var(--soft);
}
.ck__pixNota{font-size:12.5px;color:var(--mut);margin-top:13px}