/* =========================================================
   HOME — estilos complementares
   (compatível com o global; não altera layout base)
   ========================================================= */

/* ---------- HERO ---------- */
.home-hero{
  grid-area: center; /* mantém no centro do grid global */
  border:1px solid var(--grayscale-color-100);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(1200px 420px at 50% -260px, var(--main-color-light-hover), transparent),
    #fff;
  box-shadow: var(--shadow-soft);
  padding: 28px 16px 18px;
}
.home-hero .hero-body{ max-width: var(--center-fixed, 660px); margin: 0 auto; text-align: center; }
.home-hero .hero-logo img{ width:64px; height:64px; border-radius:10px; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.home-hero .ad-slot.ad-inline { margin-bottom:0; }
.home-hero h1{ margin:.5rem 0 .25rem; line-height:1.2; color:var(--text-color-1); letter-spacing:.2px; }
.home-hero h1 .sub{ display:block; font-weight:700; margin-top:.25rem; color:var(--text-color-1); }
.hero-sub{ margin:.25rem 0 1rem; color:var(--text-color-2); }
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom: 32px; }
.hero-cta .btn{ min-height:44px; border-radius:999px; padding:.65rem 1rem; }
/* Mantém o primário como está */
.hero-cta .btn-primary{
  background: var(--main-color);
  color:#fff;
  border:1px solid transparent;
}
.hero-cta .btn-primary:is(:hover,:focus){
  background: var(--main-color-hover);
}
.hero-cta .btn-ghost{
  background: var(--cta-bg-color);
  color: var(--cta-text-color);
  border: 1px solid var(--cta-border-color, var(--grayscale-color-100));
  box-shadow: var(--shadow-soft);
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:600; font-size:14px;
  padding:.65rem 1rem; min-height:44px; border-radius:999px;
  transition: background-color .15s ease, color .15s ease,
              transform .06s ease, box-shadow .15s ease;
}

.hero-cta .btn-ghost:hover{
  background: var(--cta-bg-hover, #e2e2e2);
}

.hero-cta .btn-ghost:active{
  transform: translateY(1px);
}

.hero-cta .btn-ghost:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,110,255,.18); /* pode trocar por var(--focus-ring) */
}

/* garante sublinhado off nos CTAs do herói */
.hero-cta a{ text-decoration:none; }
.home-hero .ad-inline{ margin-top:14px; }
.hero-cta a{ text-decoration: none; }

/* ---------- LIVE STATS (home) ---------- */
.home-hero .live-stats{
  margin:14px auto 0;
  display:inline-flex; align-items:center; gap:8px;
  padding:.45rem .75rem; border-radius:999px; border:1px solid var(--grayscale-color-100);
  background:#fff; color:var(--text-color-2); box-shadow: var(--shadow-soft);
  font-size:.95rem;
}
.live-stats__dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:ping 1.8s infinite cubic-bezier(0,0,.2,1); }
.live-stats__sep{ opacity:.6; }
.live-stats__note{ color: var(--grayscale-color-200); }
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.6); transform:scale(1) }
  70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); transform:scale(1.05) }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); transform:scale(1) }
}

/* ---------- GRID DE FERRAMENTAS ---------- */
.tools-grid.container{ padding-top: 4px; }
.tools-grid h2{ margin:0 0 .6rem; color:var(--text-color-1); text-align:left; }
.cards-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px; margin-top:12px; list-style:none; padding:0;
}
.tool-card{ position:relative; }
.tool-card__link{
  text-decoration: none;
  display:block; height:100%;
  padding:18px; border:1px solid var(--grayscale-color-100); border-radius:16px;
  background:#fff; box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tool-card__link:is(:hover,:focus){ outline:none; transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.10); border-color: var(--main-light-color); }
.tool-card__icon{
  width:72px; height:72px; border-radius:14px; margin-bottom:12px;
  display:grid; place-items:center; background:linear-gradient(180deg,#fafbff 0,#f4f7ff 100%);
  border:1px solid var(--grayscale-color-100); overflow:hidden;
}
.tool-card__title{ display:flex; align-items:center; gap:8px; margin:0 0 6px 0; color:var(--text-color-1); }
.tool-card__desc{ margin:0; color:var(--text-color-2); font-size:.96rem; }
.badge{
  font: 600 .72rem/1 'Segoe UI', system-ui, -apple-system, sans-serif;
  padding:.15rem .45rem; border-radius:.5rem;
  border:1px dashed var(--grayscale-color-100); color:var(--text-color-2); background:transparent;
}
.tool-card__link.is-disabled{ pointer-events:none; opacity:.85; filter:grayscale(.2); cursor:not-allowed; }
.tool-card__title{ position:relative; }
.tool-card__title .badge{ position:absolute; top:-10px; right:-6px; transform:translateY(-100%); }

/* ---------- COMO FUNCIONA ---------- */
.how-it-works h2{ color:var(--text-color-1); }
.how-steps{ display:grid; gap:8px; margin:10px 0 14px; padding-left:0; list-style:none; }
.how-steps li{
  display:flex; align-items:center; gap:8px;
  color:var(--text-color-1); background:#fff; border:1px solid var(--grayscale-color-100);
  border-radius:12px; padding:.6rem .8rem; box-shadow: var(--shadow-soft);
}
.how-steps .muted{ color:var(--text-color-2); }
.how-note{ color:var(--text-color-2); margin-top:8px; }

/* ---------- SEO COPY ---------- */
.seo-content h2,.seo-content h3{ color:var(--text-color-1); }
.seo-content ul{ display:grid; gap:6px; margin:.5rem 0 1rem 1rem; }
.seo-content li{ color:var(--text-color-1); }

/* =========================================================
   CTA Final — Chamada para a Ação
   ========================================================= */
.final-cta{
  /* fundo claro padrão */
  --final-cta-bg: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  /* herda suas vars globais de texto/borda/sombra */
  text-align:center;
  padding:20px 16px;
  background: var(--final-cta-bg);
  border:1px solid var(--grayscale-color-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.final-cta h2{ margin:0 0 .35rem; color:var(--text-color-1) }
.final-cta p{ margin:0 0 .8rem;  color:var(--text-color-2) }

.final-cta .cta-actions{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}

.final-cta .cta-actions a{
  /* CTA usa vars de tema (já definidas no :root) */
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:600; font-size:14px;
  padding:.65rem 1rem; min-height:44px; border-radius:999px;
  background: var(--cta-bg-color);
  color: var(--cta-text-color);
  border: 1px solid var(--cta-border-color, var(--grayscale-color-100));
  box-shadow: var(--shadow-soft);
  transition: background-color .15s ease, color .15s ease, transform .06s ease, box-shadow .15s ease;
}

.final-cta .cta-actions a:hover{
  background: var(--cta-bg-hover, #e2e2e2);
}

.final-cta .cta-actions a:active{
  transform: translateY(1px);
}

.final-cta .cta-actions a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,110,255,.18);
}

/* Utilitário (mantido) */
.final-cta .btn{ min-height:44px; border-radius:999px; padding:.65rem 1rem; }

/* ===== Dark mode overrides ===== */
:root[data-theme="dark"] .final-cta,
body[data-theme="dark"] .final-cta{
  /* gradiente escuro alinhado às suas surfaces */
  --final-cta-bg: linear-gradient(180deg, var(--surface-01) 0%, var(--surface-02) 100%);
  border-color: var(--grayscale-color-100);
  box-shadow: var(--shadow-soft-dark);
}

/* CTAs já herdam as vars de tema:
   --cta-bg-color, --cta-text-color, --cta-bg-hover, --cta-border-color
   (defina/ajuste essas no :root e no [data-theme="dark"]) */

/* =========================================================
   SEO / Chamada para a ação
   ========================================================= */

/* Override no Dark Mode */
:root[data-theme="dark"],
body[data-theme="dark"] {
  --cta-bg-color: var(--surface-02);        /* #0e141e */
  --cta-text-color: var(--text-color-1);    /* #e7ebf2 */
  --cta-bg-hover: #182233;                  /* hover no escuro (um pouco mais claro) */
  --cta-border-color: var(--grayscale-color-100);
}

/* Container opcional (layout) */
.cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* AQUI é onde você troca a regra antiga */
.cta-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;

  background: var(--cta-bg-color);
  color: var(--cta-text-color);
  border: 1px solid var(--cta-border-color);
  box-shadow: var(--shadow-soft);
  transition: background-color .15s ease, transform .06s ease, color .15s ease, box-shadow .15s ease;
}

.cta-actions a:hover {
  background: var(--cta-bg-hover);
}

.cta-actions a:active {
  transform: translateY(1px);
}

.cta-actions a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,110,255,.18); /* usa sua --focus-ring se preferir */
}

/* ---------- ADS (placeholders da home) ---------- */
.ad-slot{ color:var(--grayscale-color-200); }
.ad-inline{ margin-top:8px; }
.ad-inline .ad-inline-text{ font-size:12px; color:var(--grayscale-color-200); user-select:none; }

/* ---------- FOCUS / A11Y ---------- */
:where(.home-hero a,.tool-card__link,.final-cta a):focus-visible{
  outline:none; box-shadow: var(--focus-ring); border-color: var(--main-light-color);
}

/* ---------- REDUZIR MOVIMENTO ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* =========================================================
   DARK MODE — segue o esquema do global (data-theme="dark")
   ========================================================= */
:root[data-theme="dark"] .home-hero,
body[data-theme="dark"] .home-hero{
  background:
    radial-gradient(1200px 420px at 50% -260px, var(--main-color-light-hover), transparent),
    var(--surface-01);
  border-color: var(--grayscale-color-100);
  box-shadow: var(--shadow-soft-dark);
}
:root[data-theme="dark"] .hero-sub,
body[data-theme="dark"] .hero-sub{ color: var(--text-color-2); }

:root[data-theme="dark"] .home-hero .live-stats,
body[data-theme="dark"] .home-hero .live-stats{
  background: var(--surface-01); color: var(--text-color-2);
  border-color: var(--grayscale-color-100);
  box-shadow: var(--shadow-soft-dark);
}

:root[data-theme="dark"] .tool-card__link,
body[data-theme="dark"] .tool-card__link{
  background: var(--surface-01);
  border-color: var(--grayscale-color-100);
  box-shadow: var(--shadow-soft-dark);
}
:root[data-theme="dark"] .tool-card__icon,
body[data-theme="dark"] .tool-card__icon{
  background: var(--surface-02);
  border-color: var(--grayscale-color-100);
}

:root[data-theme="dark"] .how-steps li,
body[data-theme="dark"] .how-steps li{
  background: var(--surface-01);
  border-color: var(--grayscale-color-100);
  box-shadow: var(--shadow-soft-dark);
}
:root[data-theme="dark"] .final-cta,
body[data-theme="dark"] .final-cta{
  background: linear-gradient(180deg, var(--surface-01) 0%, var(--surface-02) 100%);
  border-color: var(--grayscale-color-100);
  box-shadow: var(--shadow-soft-dark);
}
:root[data-theme="dark"] .ad-popup__inner,
body[data-theme="dark"] .ad-popup__inner{
  background: var(--surface-01);
  border-color: var(--grayscale-color-100);
  box-shadow: var(--shadow-soft-dark);
}
:root[data-theme="dark"] .ad-popup__close,
body[data-theme="dark"] .ad-popup__close{
  background: var(--surface-01); color: var(--text-color-2); border-color: var(--grayscale-color-100);
}