/* ===== LegislaIA — Institucional: estilos customizados ===== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---- Animações ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse-slow {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

.animate-fade-in-up  { animation: fadeInUp 0.65s ease forwards; }
.animate-fade-in     { animation: fadeIn  0.4s  ease forwards; }
.animate-pulse-slow  { animation: pulse-slow 3s ease-in-out infinite; }

.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.20s; }
.delay-300 { animation-delay: 0.30s; }
.delay-400 { animation-delay: 0.40s; }
.delay-500 { animation-delay: 0.50s; }
.delay-600 { animation-delay: 0.60s; }

/* ---- Hero ---- */
.hero-gradient {
  background: linear-gradient(135deg, #0F2460 0%, #1E3A8A 35%, #1D4ED8 70%, #2563EB 100%);
}
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  /* Nota: usar em conjunto com hero-gradient ou inline style para o fundo */
}
.hero-gradient.hero-grid {
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(135deg, #0F2460 0%, #1E3A8A 35%, #1D4ED8 70%, #2563EB 100%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
}
.hero-glow {
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(96,165,250,0.25), transparent);
}

/* ---- Glassmorphism badge ---- */
.glass-badge {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(8px);
}

/* ---- Cartão de funcionalidade hover ---- */
.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(37,99,235,0.12);
}

/* ---- Cartão de plano ---- */
.plan-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(37,99,235,0.15);
}
.plan-card.featured {
  border: 2px solid #2563EB;
  position: relative;
}

/* ---- Gradiente de seção ---- */
.section-alt {
  background: linear-gradient(180deg, #EFF6FF 0%, #ffffff 100%);
}

/* ---- Nav link hover ---- */
.nav-link {
  position: relative;
  transition: color 0.2s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%; right: 50%;
  height: 2px;
  background: #2563EB;
  transition: left 0.2s, right 0.2s;
}
.nav-link:hover::after,
.nav-link.active::after {
  left: 0; right: 0;
}
.nav-link.active {
  color: #2563EB;
}

/* ---- Scrollbar fina ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #93c5fd; border-radius: 3px; }

/* ---- Step connector ---- */
.step-connector {
  background: linear-gradient(90deg, #2563EB, #60A5FA);
}

/* ---- Gradient text ---- */
.gradient-text {
  background: linear-gradient(135deg, #60A5FA, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ====================================================
   ACESSIBILIDADE
   ==================================================== */

/* Skip link — invisível até receber foco por teclado */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  top: 0; left: 0;
  width: auto; height: auto;
  padding: 12px 24px;
  background: #2563EB;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 10000;
  border-radius: 0 0 8px 0;
  outline: 3px solid #fff;
}

/* Foco visível para navegação por teclado */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Garante que elementos interativos mostrem foco mesmo sem :focus-visible nativo */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
}

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Banner de cookies gerenciado pelo AdOpt (//tag.goadopt.io) */

/* ====================================================
   BLOG — ARTIGO: tipografia do conteúdo renderizado
   ==================================================== */

.article-body {
  color: #1f2937;
  line-height: 1.85;
  font-size: 1.0625rem;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  font-weight: 700;
  color: #111827;
  margin-top: 2em;
  margin-bottom: 0.65em;
  line-height: 1.3;
}
.article-body h1 { font-size: 1.875rem; }
.article-body h2 {
  font-size: 1.5rem;
  padding-bottom: 0.4em;
  border-bottom: 2px solid #EFF6FF;
}
.article-body h3 { font-size: 1.25rem;   color: #1D4ED8; }
.article-body h4 { font-size: 1.0625rem; color: #374151; }

.article-body p { margin-bottom: 1.25em; }

.article-body ul,
.article-body ol {
  padding-left: 1.75em;
  margin-bottom: 1.25em;
}
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }
.article-body li { margin-bottom: 0.4em; }
.article-body li > ul,
.article-body li > ol { margin-top: 0.4em; margin-bottom: 0.4em; }

.article-body blockquote {
  border-left: 4px solid #2563EB;
  background: #EFF6FF;
  margin: 1.5em 0;
  padding: 1em 1.25em;
  border-radius: 0 0.5rem 0.5rem 0;
  color: #1e40af;
  font-style: italic;
}
.article-body blockquote p { margin-bottom: 0; }

.article-body pre,
.article-body .ql-syntax {
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 0.625rem;
  padding: 1.25em 1.5em;
  overflow-x: auto;
  margin: 1.5em 0;
  font-size: 0.875rem;
  line-height: 1.65;
  font-family: 'Courier New', Consolas, monospace;
  white-space: pre;
}
.article-body code {
  background: #f1f5f9;
  color: #dc2626;
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: 'Courier New', Consolas, monospace;
}
.article-body pre code,
.article-body .ql-syntax code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 1.5em auto;
  display: block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.article-body a {
  color: #2563EB;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body a:hover { color: #1D4ED8; }
.article-body strong  { font-weight: 700; }
.article-body em      { font-style: italic; }
.article-body s       { text-decoration: line-through; color: #9ca3af; }
.article-body hr {
  border: none;
  border-top: 2px solid #e5e7eb;
  margin: 2.5em 0;
}

/* Alinhamentos gerados pelo Quill */
.article-body .ql-align-center  { text-align: center; }
.article-body .ql-align-right   { text-align: right; }
.article-body .ql-align-justify { text-align: justify; }

/* Indentações geradas pelo Quill */
.article-body .ql-indent-1 { padding-left: 2em; }
.article-body .ql-indent-2 { padding-left: 4em; }
.article-body .ql-indent-3 { padding-left: 6em; }
.article-body .ql-indent-4 { padding-left: 8em; }

/* Imagens com alinhamento explícito */
.article-body img.ql-align-center { margin-left: auto;  margin-right: auto; display: block; }
.article-body img.ql-align-right  { margin-left: auto;  margin-right: 0;    display: block; }
.article-body img.ql-align-left   { margin-left: 0;     margin-right: auto; display: block; }

/* ---- Google reCAPTCHA v3 badge: sempre visível ---- */
.grecaptcha-badge {
  visibility: visible !important;
  opacity: 1 !important;
}