/* AlfabetizIA :: blog SEO :: identidade azul da marca */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --azul:#3E8EFF; --azul-claro:#8CC0FF; --fundo:#060B16;
  --tinta:#16233b; --cinza:#5a6b85; --linha:#e3e9f2; --card:#f5f8fd;
  --verde:#1f9d6b; --ambar:#b8791b; --card-borda:#cfe0fb;
  --sombra:0 10px 40px rgba(15,37,71,.10);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  width:100%; max-width:100%;
  overflow-x:hidden;
  overscroll-behavior:none;
}
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  color:var(--tinta); font-size:17px; line-height:1.65;
  background:#fff; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Space Grotesk','Inter',sans-serif; line-height:1.2; }
a{ color:var(--azul); text-decoration:none; }
a:hover{ text-decoration:underline; }
img,svg{ max-width:100%; height:auto; display:block; }

.wrap{ width:100%; max-width:1140px; margin:0 auto; padding:0 22px; }
.narrow{ max-width:760px; }

/* ===== HEADER ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 22px; max-width:1140px; margin:0 auto;
}
.logo{ display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:20px; color:var(--fundo); }
.logo .dot{ color:var(--azul); }
.logo svg{ width:30px; height:30px; }
.nav-links{ display:flex; align-items:center; gap:22px; list-style:none; flex-wrap:wrap; }
.nav-links a{ color:var(--cinza); font-size:15px; font-weight:500; }
.nav-links a:hover{ color:var(--azul); text-decoration:none; }
.nav-cta{
  background:var(--azul); color:#fff !important; padding:9px 18px;
  border-radius:9px; font-weight:600; font-size:14.5px;
}
.nav-cta:hover{ background:#2d7cf0; text-decoration:none; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle svg{ width:26px; height:26px; }

/* ===== HERO ===== */
.hero{
  position:relative; color:#eaf1fb;
  background:radial-gradient(120% 90% at 20% 8%, #0f2547 0%, var(--fundo) 58%);
  overflow:hidden;
}
.hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(42% 34% at 85% 12%, rgba(62,142,255,.30), transparent 70%),
    radial-gradient(34% 26% at 8% 88%, rgba(140,192,255,.18), transparent 70%); }
.hero-inner{ position:relative; z-index:2; padding:56px 0 60px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hero-photo{
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid rgba(140,192,255,.25);
  background:linear-gradient(140deg,#123059,#0a1a33);
  min-height:280px; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; min-height:280px; }
.badge{
  display:inline-block; font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--azul-claro); border:1px solid rgba(140,192,255,.4);
  padding:6px 15px; border-radius:40px; margin-bottom:22px;
}
.hero h1{ font-size:clamp(28px,5vw,44px); font-weight:700; letter-spacing:-.5px; }
.hero h1 .hl{ color:var(--azul-claro); }
.hero .lead{ margin-top:18px; font-size:clamp(16px,2.2vw,19px); color:#c3d2e9; max-width:44ch; }
.hero-cta{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* ===== BOTOES ===== */
.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px;
  padding:14px 26px; border-radius:11px; cursor:pointer; border:0; text-align:center;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn-primary{ background:var(--azul); color:#fff; box-shadow:0 8px 24px rgba(62,142,255,.35); }
.btn-primary:hover{ background:#2d7cf0; box-shadow:0 12px 30px rgba(62,142,255,.45); }
.btn-ghost{ background:transparent; color:#eaf1fb; border:1px solid rgba(140,192,255,.45); }
.btn-ghost:hover{ background:rgba(140,192,255,.10); }
.btn-outline{ background:#fff; color:var(--azul); border:1.5px solid var(--azul); }
.btn-outline:hover{ background:#eef5ff; }
.btn-sub{ display:block; font-size:12.5px; font-weight:500; color:#c3d2e9; margin-top:7px; }

/* ===== CONTEUDO / ARTIGO ===== */
.article{ padding:52px 0 20px; }
.article .narrow > p{ margin-bottom:16px; }
.article h2{ font-size:clamp(23px,3.6vw,30px); color:var(--fundo); letter-spacing:-.4px;
  margin:38px 0 14px; padding-bottom:12px; border-bottom:3px solid var(--azul); }
.article h3{ font-size:clamp(19px,2.6vw,22px); color:var(--fundo); margin:30px 0 10px; }
.article strong{ color:var(--fundo); }
.article .intro{ font-size:clamp(18px,2.4vw,20.5px); color:var(--tinta); line-height:1.6; }
.article ul{ margin:6px 0 18px; list-style:none; }
.article ul li{ margin-bottom:10px; padding-left:26px; position:relative; }
.article ul li::before{ content:""; position:absolute; left:0; top:10px; width:9px; height:9px;
  background:var(--azul); border-radius:3px; }

/* imagens ilustrativas dentro do artigo */
figure.ill{ margin:30px 0; }
figure.ill .frame{
  background:var(--card); border:1px solid var(--linha); border-radius:16px;
  padding:26px; box-shadow:var(--sombra);
}
figure.ill figcaption{ margin-top:11px; font-size:14px; color:var(--cinza); text-align:center; }
figure.ill svg{ width:100%; height:auto; }

/* card com frase da marca */
.quote-card{
  background:radial-gradient(120% 120% at 15% 0%, #123059 0%, var(--fundo) 70%);
  color:#eaf1fb; border-radius:16px; padding:34px 30px; margin:34px 0;
  text-align:center; box-shadow:0 16px 44px rgba(6,11,22,.35);
}
.quote-card p{ font-family:'Space Grotesk',sans-serif; font-size:clamp(19px,3vw,25px);
  font-weight:600; margin:0; line-height:1.35; }
.quote-card .hl{ color:var(--azul-claro); }

/* callout tese gratuito */
.callout{ background:#eef5ff; border:1px solid var(--card-borda); border-left:4px solid var(--azul);
  border-radius:12px; padding:20px 22px; margin:26px 0; }
.callout h4{ color:var(--fundo); font-size:17px; margin-bottom:6px; }
.callout p{ margin:0; color:var(--tinta); }

/* ===== CTA BLOCO ===== */
.cta-block{
  background:radial-gradient(120% 130% at 80% 0%, #123059 0%, var(--fundo) 65%);
  color:#eaf1fb; border-radius:20px; padding:44px 34px; margin:44px 0 10px;
  text-align:center; position:relative; overflow:hidden; box-shadow:0 20px 60px rgba(6,11,22,.4);
}
.cta-block::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 60% at 15% 20%, rgba(62,142,255,.25), transparent 70%); }
.cta-block > *{ position:relative; z-index:1; }
.cta-block h2{ border:0; color:#fff; margin:0 0 12px; font-size:clamp(22px,3.6vw,30px); padding:0; }
.cta-block p{ color:#c9d7ec; max-width:60ch; margin:0 auto 24px; font-size:17px; }
.cta-block .price{ color:var(--azul-claro); font-weight:600; }

/* ===== FOOTER ===== */
.site-footer{ background:var(--fundo); color:#9fb2ce; padding:52px 0 30px; margin-top:56px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; }
.foot-brand .logo{ color:#fff; margin-bottom:12px; }
.foot-brand p{ font-size:14.5px; color:#8397b6; max-width:38ch; }
.site-footer h5{ font-family:'Space Grotesk',sans-serif; color:#eaf1fb; font-size:14px;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.site-footer ul{ list-style:none; }
.site-footer ul li{ margin-bottom:9px; }
.site-footer ul a{ color:#9fb2ce; font-size:14.5px; }
.site-footer ul a:hover{ color:var(--azul-claro); text-decoration:none; }
.foot-tese{ margin-top:34px; padding-top:22px; border-top:1px solid rgba(140,192,255,.14);
  font-size:14px; color:#7d90ae; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot-tese .tese{ color:#aebfda; font-style:italic; max-width:60ch; }

/* ===== links internos inline ===== */
.article a{ font-weight:600; border-bottom:1px solid rgba(62,142,255,.3); }
.article a:hover{ border-bottom-color:var(--azul); text-decoration:none; }

/* ===== RESPONSIVO ===== */
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:26px; }
  .hero-photo{ order:-1; min-height:210px; }
  .hero-photo img{ min-height:210px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:680px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#fff; border-bottom:1px solid var(--linha); padding:8px 22px 16px;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:11px 0; width:100%; }
  .nav-toggle{ display:block; }
  .hero-inner{ padding:40px 0 44px; }
  .article{ padding:38px 0 10px; }
  .foot-grid{ grid-template-columns:1fr; }
  .cta-block, .quote-card{ padding:30px 22px; }
  body{ font-size:16px; }
}