/* ONDE ENCONTRAR — mobile first.
   Regra do projeto: NUNCA criar scroll interno em divs. O scroll é da página. */
:root{
  --bg:#eef0f2; --surface:#fff; --surface2:#f6f7f9;
  --txt:#1a1d1f; --muted:#6f767e; --fraco:#9aa0a6;
  --borda:#e7eaef; --borda-forte:#d8dde4;
  --pri:#2d689d; --pri-esc:#245782; --pri-soft:#e8f1fa;
  --ok:#2f8f39; --ok-soft:#eaf7ea; --err:#c0392b; --err-soft:#fdeeed; --alerta:#c9740f;
  --r:16px; --r-lg:22px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
}

/* ---------- topo ---------- */
.topo{background:linear-gradient(135deg,var(--pri),var(--pri-esc));color:#fff;padding:0 16px 30px}
.topo__in{max-width:860px;margin:0 auto}
.topo__tit{margin:0 0 5px;font-size:25px;font-weight:800;letter-spacing:-.01em}
.topo__sub{margin:0;font-size:14px;opacity:.9;line-height:1.4}

/* ---------- layout ---------- */
.wrap{max-width:860px;margin:-16px auto 0;padding:0 14px 60px}
.card{background:var(--surface);border-radius:var(--r-lg);padding:18px 16px;margin-bottom:14px;
  box-shadow:0 6px 22px rgba(20,30,60,.07)}
.card__head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.card__head h2{margin:0;font-size:17px;font-weight:800}
.card__head small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.card__n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--pri-soft);color:var(--pri);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.card__cont{margin-left:auto;flex:none;font-size:11.5px;font-weight:800;color:var(--pri);
  background:var(--pri-soft);border-radius:20px;padding:4px 11px;white-space:nowrap}

/* ---------- campos ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f--2{grid-column:span 2}
.f--3{grid-column:span 3}
.f--mid{justify-content:center}
.f__l{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.f__i{width:100%;height:46px;border:1px solid var(--borda);border-radius:13px;background:var(--surface2);
  padding:0 13px;font-size:15px;color:var(--txt);font-family:inherit;-webkit-appearance:none;appearance:none}
select.f__i{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f767e' stroke-width='2.2'><path d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;padding-right:36px}
.f__i:focus{outline:none;border-color:var(--pri);background:#fff;box-shadow:0 0 0 3px var(--pri-soft)}
.f__i.is-err{border-color:var(--err);background:var(--err-soft)}
.f__hint{font-size:11.5px;color:var(--fraco);line-height:1.35}
.f__hint.is-load{color:var(--pri)} .f__hint.is-ok{color:var(--ok)}
.f__hint.is-warn{color:var(--alerta)} .f__hint.is-err{color:var(--err)}
.is-busy .f__i{background:#eef0f3;color:#aab0b7}

/* ---------- tipo (radio) ---------- */
.tipos{display:flex;flex-wrap:wrap;gap:9px}
.tipo input{position:absolute;opacity:0;pointer-events:none}
.tipo__b{display:inline-block;padding:11px 16px;border:1.5px solid var(--borda);border-radius:13px;
  background:var(--surface2);font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;transition:.12s}
.tipo input:checked + .tipo__b{background:var(--pri);border-color:var(--pri);color:#fff}
.tipo input:focus-visible + .tipo__b{box-shadow:0 0 0 3px var(--pri-soft)}

/* ---------- checkbox ---------- */
.chk{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 0}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk__b{flex:none;width:22px;height:22px;border:1.6px solid var(--borda-forte);border-radius:7px;background:#fff;
  position:relative;transition:.12s}
.chk input:checked + .chk__b{background:var(--pri);border-color:var(--pri)}
.chk input:checked + .chk__b::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.chk__t{font-size:13.5px;color:var(--txt)}

/* ---------- linhas por marca ---------- */
.marca{border-top:1px solid var(--borda);padding-top:14px;margin-top:14px}
.marca:first-of-type{border-top:0;padding-top:0;margin-top:0}
.marca__top{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.marca__logo{height:50px;width:auto;display:block}
.marca__nome{font-size:15px;font-weight:800}
.marca__all{margin-left:auto;border:1px solid var(--borda);background:#fff;border-radius:10px;
  padding:7px 12px;font-size:11.5px;font-weight:800;color:var(--muted);cursor:pointer;font-family:inherit}
.marca__all:hover{background:var(--surface2);color:var(--pri);border-color:var(--pri)}
.linhas{display:flex;flex-wrap:wrap;gap:8px}
.linha input{position:absolute;opacity:0;pointer-events:none}
.linha__b{display:inline-block;padding:9px 13px;border:1.5px solid var(--borda);border-radius:11px;
  background:var(--surface2);font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:.12s}
.linha input:checked + .linha__b{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.linha input:focus-visible + .linha__b{box-shadow:0 0 0 3px var(--pri-soft)}

/* ---------- ações ---------- */
.acoes{margin-top:18px}
.btn{width:100%;height:52px;border:0;border-radius:14px;font-size:15.5px;font-weight:800;
  cursor:pointer;font-family:inherit;transition:.12s}
.btn--pri{background:var(--pri);color:#fff}
.btn--pri:hover{background:var(--pri-esc)}
.btn--pri:disabled{opacity:.6;cursor:progress}
.btn--ghost{background:#fff;border:1.5px solid var(--borda);color:var(--pri);margin-top:8px}
.btn--ghost:hover{background:var(--surface2)}
.msg{margin-top:12px;padding:0;border-radius:12px;font-size:13.5px;font-weight:700;display:none}
.msg.err{display:block;background:var(--err-soft);color:var(--err);padding:11px 13px}
.msg.ok{display:block;background:var(--ok-soft);color:var(--ok);padding:11px 13px}

/* ---------- sucesso ---------- */
.card--ok{text-align:center;padding:34px 20px}
.ok__ico{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:var(--ok-soft);color:var(--ok);
  display:flex;align-items:center;justify-content:center}
.ok__ico svg{width:30px;height:30px}
.ok__tit{margin:0 0 8px;font-size:21px;font-weight:800}
.ok__txt{margin:0 0 20px;color:var(--muted);font-size:14.5px;line-height:1.55}

.rodape{text-align:center;color:var(--fraco);font-size:11.5px;padding:0 16px 26px}

/* ---------- responsivo ---------- */
@media (max-width:640px){
  .topo{padding:0 14px 26px}
  .topo__tit{font-size:21px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .f--3{grid-column:span 2}
  .card{padding:16px 14px}
  .marca__logo{height:40px}
}
@media (max-width:400px){
  .grid{grid-template-columns:1fr}
  .f--2,.f--3{grid-column:span 1}
}

/* ============================================================
   HEADER: logo + menu hambúrguer
   ============================================================ */
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.2px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.menu[hidden]{display:none}
.menu{position:fixed;inset:0;z-index:1000}
.menu__back{position:absolute;inset:0;background:rgba(12,20,32,.55)}
.menu__pan{position:absolute;top:0;right:0;bottom:0;width:min(88vw,340px);background:#fff;
  padding:14px 16px 30px;overflow-y:auto;box-shadow:-10px 0 40px rgba(0,0,0,.2);
  animation:menuIn .18s ease-out}
@keyframes menuIn{from{transform:translateX(100%)}to{transform:none}}
.menu__top{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;
  border-bottom:1px solid var(--borda);margin-bottom:8px}
.menu__logo{height:24px}
.menu__x{border:0;background:var(--surface2);width:34px;height:34px;border-radius:50%;font-size:22px;
  line-height:1;color:var(--muted);cursor:pointer}
.menu__sec{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--fraco);
  padding:16px 2px 7px;text-transform:uppercase}
.menu__it{display:block;padding:12px 2px;font-size:14px;font-weight:800;color:var(--txt);
  text-decoration:none;border-bottom:1px solid var(--borda)}
.menu__it:hover{color:var(--pri)}
.menu__marca{display:flex;align-items:center;gap:10px;padding:9px 2px;text-decoration:none;
  border-bottom:1px solid var(--borda)}
.menu__marca img{height:32px;width:auto}
.menu__marca span{font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.03em}
.menu__marca:hover span{color:var(--pri)}
.menu__insta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:10px 14px;
  border:1.5px solid var(--borda);border-radius:12px;text-decoration:none;font-size:13px;
  font-weight:800;color:var(--muted)}
.menu__insta svg{width:19px;height:19px}
.menu__insta:hover{color:#c13584;border-color:#c13584}

/* ---------- campo com ícone ---------- */
.f__ico{position:relative;display:block}
.f__ico svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:19px;height:19px;
  color:var(--fraco);pointer-events:none}
.f__ico .f__i{padding-left:41px}
.f__ico:focus-within svg{color:var(--pri)}
.f__ico--insta:focus-within svg{color:#c13584}
.f__ico--face:focus-within svg{color:#1877f2}

/* ---------- pergunta e-commerce ---------- */
.ecom{margin-top:16px;padding-top:15px;border-top:1px solid var(--borda)}
.ecom__q{display:block;font-size:13.5px;font-weight:700;color:var(--txt);margin-bottom:10px}
.ecom__opts{display:flex;flex-wrap:wrap;gap:9px}

.f--4{grid-column:span 4}
@media (max-width:640px){ .f--4{grid-column:span 2} }
@media (max-width:400px){ .f--4{grid-column:span 1} }

/* ============================================================
   INTRO — por que se cadastrar
   ============================================================ */
.intro{padding:22px 18px}
.intro__tit{margin:0 0 8px;font-size:19px;font-weight:800}
.intro__txt{margin:0 0 18px;font-size:14.5px;color:var(--muted);line-height:1.6}
.intro__txt b{color:var(--txt)}
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.intro__it{display:flex;gap:12px;align-items:center}
/* grid com 1 item alinha a FAIXA pelo align-content (padrão: start) e joga o ícone
   para o topo — por isso a centralização é feita com flex. */
/* .intro__ico É um <span> dentro de .intro__it — por isso a regra de texto abaixo
   precisa ser restrita ao bloco de texto (.intro__tx), senão vence por especificidade
   e transforma a caixa do ícone em display:block (SVG colado no canto superior esquerdo). */
.intro__it > .intro__ico{flex:none;width:40px;height:40px;border-radius:12px;
  background:var(--pri-soft);color:var(--pri);
  display:flex;align-items:center;justify-content:center;line-height:0}
.intro__ico > svg{width:21px;height:21px;display:block;flex:none}
.intro__tx b{display:block;font-size:13.5px;font-weight:800;margin-bottom:2px}
.intro__tx span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}
.intro__nota{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--borda);
  font-size:12px;color:var(--fraco);line-height:1.5}
@media (max-width:640px){
  .intro{padding:18px 16px}
  .intro__tit{font-size:17px}
  .intro__grid{grid-template-columns:1fr;gap:13px}
}

/* ============================================================
   BARRA DE AÇÃO FIXA no rodapé (acompanha o scroll)
   ============================================================ */
.acoes{
  position:sticky; bottom:0; z-index:60;
  margin:18px -14px 0;                 /* cola nas bordas da .wrap */
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--borda);
  box-shadow:0 -6px 22px rgba(20,30,60,.08);
}
.acoes .btn{max-width:832px;margin:0 auto;display:block}
.acoes .msg{max-width:832px;margin:10px auto 0}
/* espaço para o conteúdo não ficar escondido atrás da barra */
.wrap{padding-bottom:16px}
.rodape{padding-bottom:14px}

/* ============================================================
   HEADER FIXO — logo + menu alinhados à largura das seções
   ============================================================ */
:root{ --nav-h:62px; --acoes-h:78px; --maxw:860px; --pad:14px; }

.topo{position:static;background:none;padding:0}

.nav{
  position:fixed; top:0; left:0; right:0; z-index:70;
  height:var(--nav-h);
  background:linear-gradient(135deg,var(--pri),var(--pri-esc));
  box-shadow:0 2px 14px rgba(20,40,70,.18);
}
.nav__in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav__logo{display:flex;align-items:center;flex:none;line-height:0}
.nav__logo img{height:27px;width:auto;display:block;filter:brightness(0) invert(1)}

/* hambúrguer alinhado à direita, na mesma margem das seções */
.nav__burger{
  flex:none; width:40px; height:40px; margin-right:-9px; padding:0;
  border:0; background:transparent; border-radius:11px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:background .15s;
}
.nav__burger:hover{background:rgba(255,255,255,.13)}
.nav__burger span{display:block;width:21px;height:2.2px;border-radius:3px;background:#fff;transition:.2s}

/* espaço para o header e para a barra de ação fixos */
.wrap{margin:0 auto;padding-top:calc(var(--nav-h) + 18px);padding-bottom:18px}
body{padding-bottom:var(--acoes-h)}

/* ============================================================
   BARRA DE AÇÃO FIXA no rodapé
   ============================================================ */
.acoes{
  position:fixed; bottom:0; left:0; width:100%; z-index:60;
  margin:0;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--borda);
  box-shadow:0 -6px 22px rgba(20,30,60,.08);
}
.acoes .btn,
.acoes .msg{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.acoes .btn{display:block}
.acoes .msg{margin-top:10px}

@media (max-width:640px){
  :root{ --nav-h:58px; }
  .nav__logo img{height:23px}
}
/* tela de sucesso: sem barra de ação fixa */
body.sem-acoes{padding-bottom:0}

/* embutido no modal do painel de aprovação: sem header fixo */
body.embed .wrap{padding-top:18px}
body.embed{background:var(--bg)}