/* ============================================================
   LP Alysson Neves · Polo Track — Design System
   Fonte: Brandbook v1 ("A Conta na Mesa" / painel de instrumentos)
   Regras duras: âmbar máx. 1 momento/tela · verde #25D366 EXCLUSIVO
   de WhatsApp · azul VW proibido · disclaimers ≥12px
   ============================================================ */

:root{
  --preto-instrumento:#15171C;
  --branco:#FFFFFF;
  --off-white:#F7F7F5;
  --ambar:#F2A93B;
  --ambar-escuro:#B87A16;
  --grafite:#5B6472;
  --linha-fio:#E4E4E0;
  --creme:#FFF6E8;
  --wa-verde:#25D366;         /* exclusivo WhatsApp */
  --card-destaque-bg:#FFFCF6;
  --sombra-card:0 8px 24px rgba(21,23,28,.08);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.55;color:var(--preto-instrumento);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.numero-conta,.btn{font-family:'Instrument Sans','Inter',sans-serif;}
h1{font-weight:700;font-size:60px;line-height:1.05;letter-spacing:-.02em;}
h2{font-weight:700;font-size:34px;line-height:1.15;letter-spacing:-.01em;margin-bottom:20px;}
h3{font-weight:700;font-size:24px;line-height:1.25;}
p{margin-bottom:14px;}
p:last-child{margin-bottom:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}
em{font-style:italic;}
small{font-size:.82em;color:var(--grafite);}

.container{max-width:1200px;margin:0 auto;padding:0 120px;}
.container-estreito{max-width:880px;}
section,footer.rodape{padding:88px 0;}

/* ---------- tipografia utilitária ---------- */
.eyebrow{
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:rgba(255,255,255,.75);margin-bottom:18px;
}
.eyebrow-escuro{color:var(--grafite);}
.eyebrow-ambar{
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ambar);margin-bottom:10px;
}
.numero-conta{font-weight:700;font-size:44px;line-height:1;letter-spacing:-.01em;}
.disclaimer{font-size:12.5px;line-height:1.5;color:var(--grafite);}
.disclaimer-inline{font-size:12.5px;color:var(--grafite);}
.microcopy{font-size:13px;color:var(--grafite);margin-top:10px;}
.rotulo{
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:var(--grafite);margin-bottom:6px;
}

/* ---------- botões (um dominante por tela; par sempre na mesma ordem) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;
  padding:16px 26px;border-radius:10px;border:none;
  transition:transform .2s ease-out,box-shadow .2s ease-out;
  min-height:44px;
}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--ambar-escuro);outline-offset:2px;
}
.btn-ambar{background:var(--ambar);color:var(--preto-instrumento);}          /* sobre escuro */
.btn-ambar-claro{background:var(--preto-instrumento);color:var(--branco);}   /* seção clara: preto vira o dominante */
.btn-preto{background:var(--preto-instrumento);color:var(--branco);}
.btn-wa{background:var(--wa-verde);color:var(--branco);}                     /* EXCLUSIVO WhatsApp */
.btn-grande{font-size:18px;padding:18px 32px;}
.ic-wa{width:22px;height:22px;flex:0 0 auto;}

.link-wa-sec,.btn-wa-sec{
  display:inline-flex;align-items:center;font-size:15px;font-weight:600;
  color:inherit;text-decoration:underline;text-underline-offset:4px;
  min-height:44px;align-self:center;
}
.btn-ghost-claro{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:14px 22px;border:1px solid rgba(255,255,255,.4);border-radius:10px;
  color:var(--branco);font-weight:600;font-size:15px;text-decoration:none;
}
.cta-par{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:26px;}
.cta-par-central{justify-content:center;}

/* ---------- cards e callouts ---------- */
.card-conta{
  background:var(--branco);border:1px solid var(--linha-fio);border-radius:14px;
  padding:28px;flex:1;
}
.card-conta.card-polo{border:2px solid var(--ambar);background:var(--card-destaque-bg);}
.callout-escuro{
  background:var(--preto-instrumento);color:var(--branco);
  border-radius:14px;padding:32px;margin:36px 0 20px;
}
.callout-creme{
  background:var(--creme);border:1px solid var(--ambar);border-radius:14px;
  padding:24px 28px;margin-top:32px;
}
.callout-titulo{
  display:flex;align-items:center;gap:10px;font-weight:700;
  font-family:'Instrument Sans',sans-serif;font-size:18px;margin-bottom:8px;
  color:var(--ambar-escuro);
}

/* ---------- ícones de traço ---------- */
.ic{width:24px;height:24px;flex:0 0 auto;color:var(--grafite);}

/* ---------- placeholders de produção ---------- */
.foto-placeholder{
  background:repeating-linear-gradient(45deg,#ECECEA,#ECECEA 12px,#F5F5F3 12px,#F5F5F3 24px);
  border:1px dashed var(--grafite);border-radius:14px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--grafite);font-size:14px;line-height:1.5;min-height:180px;padding:16px;
}
.pendente-nota{font-size:12.5px;color:var(--grafite);}

/* ---------- listas ---------- */
.lista-check li{
  position:relative;padding:10px 0 10px 32px;border-bottom:1px solid var(--linha-fio);
  font-size:16px;
}
.lista-check li:last-child{border-bottom:none;}
.lista-check li::before{
  content:"";position:absolute;left:4px;top:16px;width:14px;height:8px;
  border-left:2px solid var(--grafite);border-bottom:2px solid var(--grafite);
  transform:rotate(-45deg);
}

/* ---------- página de privacidade ---------- */
.pagina-privacidade{background:var(--branco);}
.privacidade{padding:72px 0;}
.privacidade .titulo-privacidade{font-size:40px;color:var(--preto-instrumento);margin-bottom:12px;}
.privacidade h2{font-size:22px;margin:34px 0 10px;}
.voltar{font-size:15px;font-weight:600;color:var(--grafite);text-decoration:none;}
.voltar-wrap{margin-top:44px;}

/* ---------- acessibilidade / movimento ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;animation:none !important;}
}

/* ---------- responsivo base ---------- */
@media (max-width:1280px){ .container{padding:0 48px;} }
@media (max-width:768px){
  body{font-size:16px;}
  .container{padding:0 20px;}
  section,footer.rodape{padding:56px 0;}
  h1{font-size:40px;}
  h2{font-size:26px;}
  h3{font-size:20px;}
  .numero-conta{font-size:38px;}
  .btn{width:100%;}
  .cta-par{gap:16px;}
  .link-wa-sec{align-self:flex-start;}
}