/* =========================================================
   credfacy – styles.css (tema claro)
   ========================================================= */

:root{
  --bg:#ffffff;
  --surface:#f8fafc;
  --surface-2:#eef2f7;
  --text:#0f172a;
  --muted:#475569;
  --brand:#2563eb;     /* azul principal */
  --brand-2:#16a34a;   /* verde auxiliar */
  --accent:#0ea5e9;    /* azul claro usado no botão Comprar */
  --border:#e2e8f0;
  --card:#ffffff;
}

/* Base & utilidades */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block }
.container{ width:min(1100px,92%); margin-inline:auto }
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }
h1,h2,h3{ color:#0f172a }
p{ color:#334155; line-height:1.55 }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.brand-blue{ color:var(--brand) } /* Para destacar "CPF" e "CNPJ" */

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 0;
}
.logo img{ height:36px }
.nav a{ color:#0f172a; opacity:.9; margin-left:18px }
.nav a:hover{ opacity:1; text-decoration:none }

/* Botões */
.btn{
  display:inline-block; background:var(--brand); color:#fff;
  text-decoration:none; padding:.8rem 1.1rem; border-radius:12px;
  font-weight:600; border:1px solid transparent; transition:.2s;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px) }
.btn.outline{ background:transparent; border-color:var(--brand); color:var(--brand) }
.btn.ghost{ background:transparent; border-color:transparent; color:#0f172a }
.btn.sm{ padding:.5rem .9rem }
.btn.lg{ padding:1rem 1.3rem }
.btn.xl{ padding:1.05rem 1.4rem; font-size:1.05rem }

/* Botão Comprar padronizado */
.btn.buy{ background:var(--accent); color:#fff }
.btn.buy:hover{ filter:brightness(1.05) }

/* Hero */
.hero{
  background:var(--surface);
  padding:56px 0 28px;
  border-bottom:1px solid var(--border);
}
.hero__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
}
.hero__art{
  min-height:220px; border-radius:22px; border:1px solid var(--border);
  background:url('../assets/img/hero-bg.jpg') center/cover no-repeat;
}

/* Título +2px e subtítulo +2px */
.hero__copy h1{
  font-size:calc(clamp(1.6rem, 2.2vw + 1rem, 2.4rem) + 2px);
  line-height:1.2; margin:0 0 8px;
}
.hero__copy .lead{
  font-size:calc(1rem + 2px);
}

/* Formulário do hero */
.hero-form{
  display:flex; gap:10px;
  margin-bottom:3px; /* +3px para afastar dos badges */
}
.hero-form input{
  flex:1; background:#fff; color:#0f172a;
  border:1px solid var(--border); border-radius:12px; padding:14px; outline:none;
}
.hero-form input:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* Badges */
.hero__badges{
  display:flex; gap:10px; flex-wrap:wrap;
  color:#475569; font-size:.9rem;
}
.hero__badges span{
  background:#fff; padding:6px 10px; border-radius:999px; border:1px solid var(--border);
}

/* Seções */
.section{ padding:44px 0 }
.section.alt{ background:var(--surface-2) }
.section__head h2{ margin:0 0 8px }
.section__head p{ margin:0 0 8px; color:#475569 }

/* Cards de produtos */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.card{
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  padding:18px; display:flex; flex-direction:column; gap:10px;
}
.card h3{ margin:0 }
.card p{ margin:0; color:#475569 }
.price{ font-size:1.2rem; font-weight:700; margin-top:4px; color:#0f172a }
.bullets{ margin:8px 0 0 16px; color:#475569 }
.cta-row{ margin-top:18px }

/* Sobre / listas */
.about{ display:grid; grid-template-columns:1fr; gap:8px }
.about__list{ margin:8px 0 0 16px; color:#475569 }

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  background:#ffffff; padding:24px 0; margin-top:20px;
}
.footer__grid{
  display:flex; justify-content:space-between; gap:20px; align-items:flex-start; flex-wrap:wrap;
}
.footer__copy{ color:#64748b; text-align:center; margin:12px 0 0 }
.footer-social{ display:flex; gap:12px; align-items:center }
.footer-social img{ width:24px; height:24px }

/* FAQ em grade */
.faq{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.faq details{
  border:1px solid var(--border); border-radius:14px; background:#fff; padding:12px;
}
.faq summary{ cursor:pointer; font-weight:600; color:#0f172a }
.faq p{ margin:.6rem 0 0; color:#334155 }

/* Responsivo */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .faq{ grid-template-columns:1fr }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr }
  .nav a.btn{ display:none } /* esconde CTA extras no mobile, se necessário */
}
/* Header: manter Login (sólido) com texto branco
   e Criar conta (outline) em azul */
.nav a.btn:not(.outline){
  color:#fff;            /* só o botão sólido (Login) */
}
.nav a.btn.outline{
  color:var(--brand);    /* Criar conta em azul */
  border-color:var(--brand);
  background:transparent;
}
.nav a.btn:hover{ text-decoration:none; }

/* =========================================================
   Complemento – Resultado/Copy
   (adicionado sem alterar regras existentes)
   ========================================================= */

/* Cabeçalho do resultado com botão ao lado */
.resultado-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.resultado-head h2{ margin:0 }
.resultado-head .btn{ margin-left:auto }

/* Mensagem "Copiado!" */
.copy-ok{
  display:none;
  margin-left:8px;
  color:var(--brand-2);
  font-weight:600;
}

/* Destacar APENAS os valores (e seus filhos, ex.: links) em verde */
.cpf-list .value,
.cpf-list .value *,
.cpf-mini .value,
.cpf-mini .value *{
  color:var(--brand-2) !important;
  font-weight:600;
  text-decoration:none;
}

/* Blocos da consulta (caso não tenha no seu CSS) */
.cpf-card{border:1px solid var(--border);border-radius:16px;padding:18px;background:#fff}
.cpf-group{margin-top:18px}
.cpf-list{list-style:disc;margin:8px 0 0 1.2rem;padding:0}
.cpf-list li{margin:6px 0}
.cpf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.cpf-mini{border:1px solid var(--border);border-radius:12px;padding:10px;background:#fafafa}