/* Estilos compartilhados do hub de guias (/guias/*). Artigo estático, sem JS. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-v19-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-v19-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-v19-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-v19-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/inter-v19-latin-800.woff2') format('woff2'); }

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

:root {
  --green: #10B981;
  --green-dark: #059669;
  --green-soft: #D1FAE5;
  --bg: #F3F4F6;
  --surface: #FFFFFF;
  --text: #111827;
  --text-2: #4B5563;
  --text-3: #6B7280;
  --border: #E5E7EB;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
  padding: 1.75rem 1rem 4rem;
}

.page { max-width: 720px; margin: 0 auto; }

.back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem; font-weight: 500; color: var(--green);
  text-decoration: none; margin-bottom: 1.5rem;
}
.back:hover { opacity: 0.8; }

.logo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }
.logo img { width: 30px; height: 30px; border-radius: 8px; }
.logo span { font-weight: 800; font-size: 1.05rem; color: var(--text); }

.breadcrumb { font-size: 0.8125rem; color: var(--text-3); margin-bottom: 1rem; }
.breadcrumb a { color: var(--text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb .sep { margin: 0 0.4rem; opacity: 0.6; }

h1 {
  font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 800; color: var(--text);
  line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 0.6rem;
}
.meta { font-size: 0.8125rem; color: var(--text-3); margin-bottom: 1.75rem; }

/* Resposta direta em destaque — formato que AI Overviews/ChatGPT extraem */
.answer {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--green); border-radius: 12px;
  padding: 1.1rem 1.25rem; margin-bottom: 2rem;
}
.answer p { font-size: 1rem; color: var(--text); margin: 0; }
.answer strong { color: var(--text); }

article h2 {
  font-size: 1.3rem; font-weight: 700; color: var(--text);
  margin: 2.25rem 0 0.75rem; line-height: 1.3; letter-spacing: -0.01em;
}
article h3 { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 1.5rem 0 0.5rem; }
article p { font-size: 1rem; color: var(--text-2); margin-bottom: 1rem; }
article ul, article ol { margin: 0 0 1.25rem 1.25rem; color: var(--text-2); }
article li { font-size: 1rem; margin-bottom: 0.5rem; }
article strong { color: var(--text); font-weight: 600; }
article a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
article a:hover { color: var(--green); }

/* Tabela resumo */
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
th { font-weight: 700; color: var(--text); background: #F9FAFB; }
td { color: var(--text-2); }

/* Caixa de CTA para a ferramenta */
.cta {
  background: linear-gradient(135deg, #ECFDF5, #F0FDF4);
  border: 1px solid var(--green-soft); border-radius: 16px;
  padding: 1.5rem; margin: 2.5rem 0; text-align: center;
}
.cta h2 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 0.4rem; }
.cta p { color: var(--text-2); margin: 0 0 1.1rem; font-size: 0.95rem; }
.cta a.btn {
  display: inline-block; background: var(--green); color: #fff; font-weight: 700;
  font-size: 0.95rem; padding: 0.8rem 1.5rem; border-radius: 12px; text-decoration: none;
  box-shadow: 0 6px 16px rgba(16,185,129,0.25); transition: filter .15s;
}
.cta a.btn:hover { filter: brightness(1.05); }

/* FAQ */
.faq { margin-top: 2.5rem; }
.faq > h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.qa { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 0.75rem; }
.qa h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0 0 0.35rem; }
.qa p { font-size: 0.9375rem; color: var(--text-2); margin: 0; }

/* Guias relacionados */
.related { margin-top: 2.5rem; }
.related > h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.85rem; }
.related ul { list-style: none; display: grid; gap: 0.6rem; }
.related a {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 0.85rem 1.1rem; color: var(--text);
  font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: border-color .15s;
}
.related a:hover { border-color: var(--green); }
.related a span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--text-3); margin-top: 0.15rem; }

/* Índice do hub */
.hub-grid { list-style: none; display: grid; gap: 0.85rem; margin-top: 0.5rem; }
.hub-grid a {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.15rem 1.35rem; color: var(--text); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.hub-grid a:hover { border-color: var(--green); transform: translateY(-1px); }
.hub-grid strong { display: block; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.25rem; }
.hub-grid span { font-size: 0.9rem; color: var(--text-3); }

footer { margin-top: 3rem; text-align: center; font-size: 0.8125rem; color: var(--text-3); }
footer a { color: var(--green); text-decoration: none; }
footer a:hover { text-decoration: underline; }