/* ============================================================
   Volundr Digital - style.css
   Mobile-first. Ver specs/design.md antes de alterar cor/escala.
   ============================================================ */

:root{
  --bg:#0B0E14;
  --surface:#141B27;
  --surface-2:#101724;
  --border:#26313F;
  --text:#E6EBF2;
  --text-dim:#9FAEC2;
  --accent:#4DA3FF;
  --cta:#2E86FF;
  --cta-text:#06121F;
  --metal:#C3CBD6;

  /* Verde do WhatsApp. Texto quase-preto por cima: #25D366 com #06210F da 11,4:1,
     bem acima do AA. Branco sobre esse verde daria 2,4:1 e reprovaria. */
  --wa:#25D366;
  --wa-hover:#3DDF7C;
  --wa-text:#06210F;
  /* Tom mais claro para o verde em texto sobre fundo escuro (CTAs dos cards) */
  --wa-link:#3DDF7C;

  --wrap:1200px;
  --r:8px;

  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1rem}
a{color:var(--accent)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--cta);color:var(--cta-text);
  padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:700;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- Tipografia ---------- */

h1,h2{
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.15;
  margin:0 0 1rem;
  text-wrap:balance;
}
h1{font-size:2rem}
h2{font-size:1.6rem;text-transform:uppercase;letter-spacing:.06em}
h3{font-size:1.0625rem;font-weight:700;margin:0 0 .5rem;line-height:1.3}

h1 em{
  font-style:normal;
  background:linear-gradient(135deg,#E9EEF6 0%,#9FB0C6 45%,#C3CBD6 55%,#6C7F98 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--metal);
}

.eyebrow{
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent);margin:0 0 .75rem;
}

.lead,.section-lead{color:var(--text-dim);font-size:1.0625rem;max-width:62ch}
.lead strong{color:var(--text)}

/* ---------- Header ---------- */

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,14,20,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:68px;
}
.brand{
  display:inline-flex;align-items:center;
  text-decoration:none;min-height:44px;padding-right:4px;
  /* Sem isto o flex encolhe a marca para caber ao lado do CTA e o logo aparece
     espremido na horizontal — medido a 320px: 172x34 em vez de 190x34. */
  flex-shrink:0;
}
/* Altura fixa + width:auto preserva a proporcao 520x93 do arquivo.
   Os atributos width/height no HTML seguram o espaco e mantem o CLS em zero.

   Abaixo de ~34px o bisel metalico e a textura da arte colapsam e o wordmark vira
   borrao. Foi medido, nao chutado — ver a tira de comparacao gerada em 2026-08-08
   e o registro em memoria.md.

   Escala: 30px ate 379px de tela (so ai o logo nao cabe ao lado do CTA sem encolher),
   34px de 380 a 599, 40px a partir de 600. */
.brand img{height:30px;width:auto;display:block}

/* Rotulo curto do CTA no mobile: e o que libera largura para o logo maior caber
   ao lado do botao em 375px. Os dois rotulos existem no DOM; um fica display:none. */
.de-600{display:none}

/* ---------- Botões ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px 20px;
  background:var(--cta);color:var(--cta-text);
  font-weight:700;font-size:.9375rem;
  text-decoration:none;border-radius:6px;
  transition:background .15s ease,box-shadow .15s ease;
  box-shadow:0 0 0 rgba(46,134,255,0);
}
.btn:hover{background:var(--accent);box-shadow:0 6px 24px rgba(46,134,255,.28)}
.btn-sm{min-height:44px;padding:9px 14px;font-size:.8125rem}
.btn-lg{padding:15px 26px;font-size:1rem}
.btn-ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--border);box-shadow:none;
}
.btn-ghost:hover{background:var(--surface);border-color:var(--accent);color:var(--text);box-shadow:none}

/* Todo botao que leva ao WhatsApp usa o verde da marca do app: o usuario reconhece
   o destino antes de ler o rotulo. */
.btn-wa{background:var(--wa);color:var(--wa-text)}
.btn-wa:hover{background:var(--wa-hover);box-shadow:0 6px 24px rgba(37,211,102,.28)}
.btn-wa:focus-visible{outline-color:var(--wa-hover)}

/* ---------- Hero ---------- */

.hero{padding:56px 0 48px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 55% at 50% 0%,rgba(46,134,255,.13) 0%,rgba(46,134,255,0) 70%);
  pointer-events:none;
}
.hero-inner{position:relative}
.hero-mark{display:flex;justify-content:center;margin-top:36px;position:relative}
/* O emblema tem 378px de largura real. Exibi-lo acima disso o deixa macio em tela
   retina, entao o teto e 300px (1,26x de densidade). Ver memoria.md. */
.mark{width:min(240px,68vw);height:auto;display:block}
.hero-mark::before{
  content:"";position:absolute;top:50%;left:50%;
  width:112%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(46,134,255,.20) 0%,rgba(46,134,255,0) 65%);
  pointer-events:none;z-index:-1;
}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.hero-actions .btn{flex:1 1 auto;min-width:180px}

.hero-seal{
  display:inline-flex;align-items:center;gap:9px;
  margin:26px 0 0;padding:9px 14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:999px;font-size:.8125rem;font-weight:600;color:var(--text);
}
.seal-icon{display:inline-flex;color:var(--accent);flex:0 0 auto}

/* ---------- Seções ---------- */

.section{padding:56px 0;border-top:1px solid var(--border)}
.section-accent{background:var(--surface-2)}
.section-cta{background:var(--surface-2);text-align:center}

/* ---------- Grid de serviços ---------- */

.grid{display:grid;gap:16px;margin-top:32px}
.grid-3{grid-template-columns:1fr}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px 20px;
  display:flex;flex-direction:column;
}
.card-lead{color:var(--text-dim);font-size:.9375rem;margin-bottom:1rem}

.ticks{margin:0 0 20px;display:grid;gap:9px}
.ticks li{
  position:relative;padding-left:24px;
  font-size:.875rem;color:var(--text-dim);line-height:1.5;
}
.ticks li::before{
  content:"";position:absolute;left:4px;top:.5em;
  width:7px;height:7px;transform:rotate(45deg);
  background:var(--accent);border-radius:1px;
}

.card-cta{
  margin-top:auto;display:inline-flex;align-items:center;
  min-height:44px;
  font-weight:700;font-size:.875rem;color:var(--accent);text-decoration:none;
}
.card-cta:hover{text-decoration:underline}
.card-cta-wa{color:var(--wa-link)}

/* ---------- Nota de parcelamento ---------- */

/* A frase inteira precisa estar dentro de UM <span>: num container flex cada no
   filho vira item flex proprio, e o texto se quebraria em pedacos separados pelo
   gap — inclusive o ponto final, que ficaria solto depois do "10x". */
.parcelamento{
  display:flex;align-items:center;gap:11px;
  margin:24px 0 0;padding:14px 18px;
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--r);
  font-size:.9375rem;color:var(--text-dim);
}
.parcelamento strong{color:var(--text)}
.parcelamento-icone{display:inline-flex;color:var(--accent);flex:0 0 auto}

/* ---------- Kit NFC ---------- */

.kit-inner{display:grid;gap:28px}
.kit-foto{margin:0}
.kit-foto img{
  width:100%;height:auto;display:block;
  border-radius:var(--r);border:1px solid var(--border);
}
.kit-texto .ticks{margin-top:20px}
.kit-texto .btn{margin-top:4px}

/* ---------- Promessas (Transparência) ---------- */

.promises{display:grid;gap:16px;margin:32px 0 28px;counter-reset:p}
.promises li{
  position:relative;
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r);padding:20px 20px 16px 20px;
  counter-increment:p;
}
.promises li::before{
  content:counter(p,decimal-leading-zero);
  display:block;font-size:.75rem;font-weight:800;
  letter-spacing:.14em;color:var(--accent);margin-bottom:6px;
}
.promises p{color:var(--text-dim);font-size:.9375rem;margin:0}

.closing{
  color:var(--text);font-size:1rem;max-width:62ch;
  padding-top:20px;border-top:1px solid var(--border);
}

/* ---------- Passos ---------- */

.steps{display:grid;gap:16px;margin-top:32px}
.steps li{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:22px 20px;
}
.step-num{
  display:block;font-size:1.5rem;font-weight:800;
  letter-spacing:.06em;color:var(--border);margin-bottom:6px;
}
.steps p{color:var(--text-dim);font-size:.9375rem;margin:0}

/* ---------- Esteira de segmentos ---------- */

/* Fica fora do .wrap de proposito: a faixa atravessa a tela inteira, que e o que
   faz parecer esteira e nao uma lista que sobrou solta dentro da coluna. */
.esteira{
  margin-top:32px;overflow:hidden;position:relative;
  /* desvanece nas pontas para o corte nao parecer um bug */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.esteira-trilho{
  display:flex;width:max-content;
  animation:esteira-anda 46s linear infinite;
}
/* pausa ao passar o mouse ou ao focar por teclado, para dar tempo de ler */
.esteira:hover .esteira-trilho,
.esteira:focus-within .esteira-trilho{animation-play-state:paused}

.esteira-lista{display:flex;gap:12px;padding-right:12px}
.esteira-lista li{
  flex:0 0 auto;white-space:nowrap;
  padding:13px 22px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);
  font-size:.9375rem;font-weight:600;color:var(--text);
}

/* -50% = a largura de exatamente uma das duas copias, o que fecha o loop sem salto */
@keyframes esteira-anda{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){
  .esteira{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .esteira-trilho{animation:none}
}

/* ---------- Perguntas frequentes ---------- */

.faq-lista{display:grid;gap:12px;margin-top:32px;max-width:820px}
.faq-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);
}
.faq-item summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;min-height:44px;
  font-weight:700;font-size:.9375rem;line-height:1.4;
}
.faq-item summary::-webkit-details-marker{display:none}
/* indicador +/x: gira o "+" 45 graus quando aberto, sem trocar de caractere */
.faq-item summary::after{
  content:"+";flex:0 0 auto;
  font-size:1.25rem;font-weight:700;color:var(--accent);
  transition:transform .18s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r)}
.faq-item p{padding:0 20px 18px;margin:0;color:var(--text-dim);font-size:.9375rem}

/* ---------- Contato ---------- */

.contato-inner .section-lead{margin-left:auto;margin-right:auto}
.contato-inner .btn{margin-top:8px}
.contato-meta{
  margin-top:20px;font-size:.9375rem;color:var(--text-dim);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
}
.contato-meta a{
  color:var(--text);text-decoration:none;font-weight:700;
  display:inline-flex;align-items:center;min-height:44px;
}
.contato-meta a:hover{color:var(--accent)}

/* ---------- Rodapé ---------- */

.site-footer{
  border-top:1px solid var(--border);
  padding:40px 0 96px;
  background:var(--bg);
}
.footer-inner{display:grid;gap:24px}
.footer-brand{height:40px;width:auto;display:block;margin:0 0 14px}
.footer-tag{color:var(--text-dim);font-size:.875rem;margin:0}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.footer-links a{
  color:var(--text-dim);text-decoration:none;font-size:.875rem;
  display:inline-flex;align-items:center;min-height:44px;
}
.footer-links a:hover{color:var(--accent)}
.footer-legal{color:var(--text-dim);font-size:.8125rem;line-height:1.7;margin:0}

/* ---------- Botão flutuante ---------- */

.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:60;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#06210F;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  transition:transform .15s ease;
}
.wa-float:hover{transform:scale(1.06)}

/* ============================================================
   Breakpoints
   ============================================================ */

@media (min-width:380px){
  .brand img{height:34px}
}

@media (min-width:600px){
  h1{font-size:2.5rem}
  h2{font-size:1.875rem}
  .hero{padding:72px 0 64px}
  .section{padding:72px 0}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .promises{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .hero-actions .btn{flex:0 0 auto}
  .brand img{height:40px}
  .ate-599{display:none}
  .de-600{display:inline}
}

@media (min-width:900px){
  .hero{padding:96px 0 84px}
  .hero-inner{
    display:grid;grid-template-columns:1.15fr .85fr;
    gap:48px;align-items:center;
  }
  .hero-mark{margin-top:0}
  .mark{width:300px}
  h1{font-size:3rem}
  .section{padding:88px 0}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .promises{grid-template-columns:repeat(4,1fr)}
  .kit-inner{grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .footer-inner{
    grid-template-columns:1fr auto;
    align-items:start;column-gap:48px;
  }
  .footer-links{justify-content:flex-end}
  .footer-legal{grid-column:1/-1;padding-top:20px;border-top:1px solid var(--border)}
  .site-footer{padding-bottom:48px}
}

@media (min-width:1100px){
  h1{font-size:3.25rem}
  /* teto de 300px: acima disso o emblema de 378px perde nitidez em retina */
}