/* Estilo das paginas do blog — artigo e listagem.
 *
 * Nasceu como o <style> inline dos quatro artigos estaticos. Com as paginas
 * passando a ser renderizadas por Function, repetir 6 KB de CSS em cada
 * resposta seria desperdicio: aqui o arquivo e servido como asset estatico,
 * cacheado pelo browser e compartilhado entre artigo e listagem.
 *
 * As regras da parte "listagem" vieram do blog-style.css do zip do Caio. O
 * resto e copia fiel do que ja estava em producao, para a migracao nao mexer
 * no visual dos artigos indexados.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; background: #080c18; color: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:root {
  --purple: #5e2e91; --purple-light: #a87ce0; --teal: #008e9c; --teal-light: #2dd4e0;
  --fg: #ffffff; --fg-muted: rgba(255,255,255,0.62); --fg-subtle: rgba(255,255,255,0.38);
  --glass-surface: rgba(255,255,255,0.07); --glass-border: rgba(255,255,255,0.13); --glass-border-hi: rgba(255,255,255,0.22);
  --reflection: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 55%);
  --blur-sm: blur(8px); --blur-md: blur(20px); --blur-lg: blur(36px);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18);
  --glass-surface-md: rgba(255,255,255,0.12);
  --shadow-float: 0 20px 60px rgba(0,0,0,0.65), 0 4px 16px rgba(0,0,0,0.35);
  --max-w: 1700px; --pad-x: 3rem; --transition: 0.35s cubic-bezier(0.22,1,0.36,1);
}
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; animation: blob-drift var(--dur,22s) ease-in-out infinite alternate; }
.scene__blob--1 { width:700px;height:700px;background:radial-gradient(circle,#00c8d8 0%,#4060e0 100%);top:-220px;left:-180px;--dur:22s; }
.scene__blob--2 { width:600px;height:600px;background:radial-gradient(circle,#7b35b8 0%,#3d1875 100%);bottom:-200px;right:-120px;--dur:17s;animation-delay:-8s; }
.scene__blob--3 { width:420px;height:420px;background:radial-gradient(circle,#008e9c 0%,#5e2e91 100%);top:42%;left:52%;--dur:25s;animation-delay:-13s; }
@keyframes blob-drift { 0%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.06)}66%{transform:translate(-25px,20px) scale(0.95)}100%{transform:translate(15px,-15px) scale(1.03)} }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); position: relative; z-index: 1; }
@media (max-width:1024px){.container{padding:0 2rem}} @media (max-width:640px){.container{padding:0 1.25rem}}
/* Header */
#site-header { position:fixed;top:0;left:0;right:0;z-index:100;transition:background var(--transition),border-color var(--transition);border-bottom:1px solid transparent; }
#site-header.scrolled { backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);background:var(--reflection),rgba(8,12,24,0.75);border-bottom-color:var(--glass-border);box-shadow:0 1px 40px rgba(0,0,0,0.4); }
.header-inner { max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);height:72px;display:flex;align-items:center;justify-content:space-between; }
@media (max-width:1024px){.header-inner{padding:0 2rem}} @media (max-width:640px){.header-inner{padding:0 1.25rem}}
.logo-link { display:flex;align-items:center;gap:12px;flex-shrink:0; }
.logo-link img { height:38px;width:auto;object-fit:contain; }
.logo-tagline { font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-muted);border-left:1px solid var(--glass-border);padding-left:12px; }
@media (max-width:640px){.logo-tagline{display:none}}
nav.main-nav { display:flex;align-items:center;gap:2rem; }
@media (max-width:1024px){nav.main-nav{display:none}}
nav.main-nav a { font-size:15px;font-weight:600;color:var(--fg-muted);transition:color var(--transition); }
nav.main-nav a:hover { color:var(--fg); }
.header-cta { display:flex;align-items:center; }
@media (max-width:1024px){.header-cta{display:none}}
.btn-arrow { display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--fg);transition:color var(--transition); }
.btn-arrow:hover { color:var(--teal-light); }
.btn-arrow .arrow-circle { width:30px;height:30px;border-radius:50%;border:1.5px solid var(--glass-border-hi);backdrop-filter:var(--blur-sm);background:var(--glass-surface);display:inline-flex;align-items:center;justify-content:center;transition:border-color var(--transition),background var(--transition),transform var(--transition),color var(--transition); }
.btn-arrow:hover .arrow-circle { border-color:var(--teal-light);background:rgba(45,212,224,0.18);color:var(--teal-light);transform:translateX(2px); }
.menu-toggle { display:none;background:none;cursor:pointer;padding:6px;color:var(--fg); }
@media (max-width:1024px){.menu-toggle{display:block}}
.mobile-menu { display:none;position:fixed;top:72px;left:0;right:0;background:rgba(8,12,24,0.92);backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);border-bottom:1px solid var(--glass-border);padding:1.5rem 1.25rem;z-index:99;flex-direction:column; }
.mobile-menu.open { display:flex; }
.mobile-menu a { padding:0.9rem 0;font-size:15px;font-weight:600;color:var(--fg-muted);border-bottom:1px solid var(--glass-border);transition:color var(--transition); }
.mobile-menu a:last-child { border-bottom:0; }
.mobile-menu a:hover { color:var(--fg); }
/* Reveal */
.reveal { opacity:0;transform:translateY(22px);transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1),transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity:1;transform:none; }
.reveal-d1{transition-delay:0.08s} .reveal-d2{transition-delay:0.16s} .reveal-d3{transition-delay:0.24s}
@media (prefers-reduced-motion:reduce){.reveal{transition:none!important;opacity:1!important;transform:none!important}.scene__blob{animation:none!important}}
/* Article */
.article-hero { padding:10rem 0 5rem;border-bottom:1px solid var(--glass-border);position:relative; }
.article-hero::before { content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,142,156,0.07) 0%,transparent 100%);pointer-events:none; }
.art-breadcrumb { display:flex;align-items:center;gap:0.5rem;font-size:12px;font-weight:600;letter-spacing:0.08em;color:var(--fg-subtle);margin-bottom:2.5rem; }
.art-breadcrumb a { color:var(--fg-subtle);transition:color var(--transition); }
.art-breadcrumb a:hover { color:var(--fg-muted); }
.art-meta { display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem; }
.art-category { display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--teal-light);background:rgba(45,212,224,0.1);border:1px solid rgba(45,212,224,0.25);border-radius:100px;padding:4px 14px; }
.art-date { font-size:12px;font-weight:600;color:var(--fg-subtle);letter-spacing:0.05em; }
.art-read { font-size:12px;font-weight:600;color:var(--fg-subtle);display:flex;align-items:center;gap:5px; }
.art-read::before { content:'·';color:var(--fg-subtle); }
.article-hero h1 { font-size:clamp(2rem,4vw,3.5rem);font-weight:800;line-height:1.1;letter-spacing:-0.03em;color:var(--fg);max-width:900px;margin-bottom:1.5rem; }
.article-lead { font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:500;line-height:1.65;color:var(--fg-muted);max-width:720px; }
.article-body { padding:5rem 0 7rem; }
.article-content { max-width:740px; }
.article-content p { font-size:17px;font-weight:400;line-height:1.85;color:rgba(255,255,255,0.82);margin-bottom:1.5rem; }
.article-content h2 { font-size:clamp(1.3rem,2.5vw,1.7rem);font-weight:800;letter-spacing:-0.025em;line-height:1.2;color:var(--fg);margin:3.5rem 0 1.25rem;padding-top:0.25rem; }
.article-content h2::before { content:'';display:block;width:36px;height:3px;background:linear-gradient(90deg,var(--purple-light),var(--teal-light));border-radius:2px;margin-bottom:1rem; }
.article-content .intro-lead { font-size:18px;font-weight:600;line-height:1.7;color:rgba(255,255,255,0.9);margin-bottom:1.75rem; }
.article-content .highlight { font-size:1.15rem;font-weight:700;font-style:italic;color:var(--teal-light);line-height:1.55;margin:2.5rem 0;padding-left:1.5rem;border-left:3px solid var(--teal-light); }
.article-content ul.art-list { margin:1.25rem 0 1.75rem;display:flex;flex-direction:column;gap:0.6rem; }
.article-content ul.art-list li { font-size:16px;font-weight:500;color:rgba(255,255,255,0.78);line-height:1.6;display:flex;align-items:baseline;gap:10px; }
.article-content ul.art-list li::before { content:'';display:inline-block;flex-shrink:0;width:16px;height:2px;margin-top:2px;background:linear-gradient(90deg,var(--purple-light),var(--teal-light));border-radius:1px; }
.article-content ol.art-list { list-style:none;counter-reset:art-counter;margin:1.25rem 0 1.75rem;display:flex;flex-direction:column;gap:0.75rem; }
.article-content ol.art-list li { font-size:16px;font-weight:500;color:rgba(255,255,255,0.82);line-height:1.7;display:flex;gap:1rem;padding:1.1rem 1.25rem;background:var(--glass-surface);border:1px solid var(--glass-border);border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);counter-increment:art-counter; }
.article-content ol.art-list li::before { content:counter(art-counter);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--purple-light),var(--teal-light));color:#fff;font-size:12px;font-weight:800;margin-top:1px; }
.article-content ol.art-list li strong { color:var(--fg);font-weight:700;display:block;margin-bottom:0.15rem; }
/* Callout */
.tup-callout { margin:4rem 0 0;padding:2.5rem 2.75rem;background:var(--reflection),rgba(0,142,156,0.1);border:1px solid rgba(45,212,224,0.2);border-radius:20px;backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);position:relative;overflow:hidden; }
.tup-callout::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,224,0.4),transparent); }
.tup-callout-eyebrow { font-size:10px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--teal-light);margin-bottom:1rem;display:flex;align-items:center;gap:8px; }
.tup-callout-eyebrow::before { content:'';display:inline-block;width:22px;height:1px;background:var(--teal-light);opacity:0.6; }
.tup-callout h3 { font-size:clamp(1.15rem,2vw,1.4rem);font-weight:800;line-height:1.25;letter-spacing:-0.02em;color:var(--fg);margin-bottom:1rem; }
.tup-callout p { font-size:15.5px;font-weight:500;line-height:1.75;color:rgba(255,255,255,0.75);margin-bottom:1rem; }
.tup-callout p:last-of-type { margin-bottom:1.75rem; }
.tup-callout .closing-line { font-size:15px;font-weight:700;font-style:italic;color:rgba(255,255,255,0.9);margin-bottom:1.75rem;padding-left:1rem;border-left:2px solid var(--teal-light); }
.tup-callout .btn-cta { display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;background:linear-gradient(135deg,var(--purple),var(--teal));color:#fff;padding:0.75rem 1.75rem;border-radius:100px;transition:opacity var(--transition),transform var(--transition); }
.tup-callout .btn-cta:hover { opacity:0.85;transform:translateY(-1px); }
/* Footer */
footer { border-top:1px solid var(--glass-border);background:rgba(8,12,24,0.6);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);position:relative;z-index:1; }
.footer-grid { display:flex;justify-content:space-between;align-items:flex-start;gap:4rem;padding:4rem 0 3rem; }
@media (max-width:768px){.footer-grid{flex-direction:column;gap:2.5rem}}
.footer-logo { display:flex;align-items:center;gap:10px;margin-bottom:1rem; }
.footer-logo img { height:30px;width:auto; }
.footer-logo .ftag { font-size:9px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-subtle);border-left:1px solid var(--glass-border);padding-left:10px; }
.footer-desc { font-size:13px;color:var(--fg-subtle);line-height:1.7;max-width:280px; }
.footer-links { display:flex;gap:4rem; }
@media (max-width:640px){.footer-links{gap:2rem;flex-wrap:wrap}}
.footer-links h4 { font-size:11px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:1.1rem; }
.footer-links ul { display:flex;flex-direction:column;gap:0.55rem; }
.footer-links li a,.footer-links li span { font-size:13px;color:var(--fg-subtle);transition:color var(--transition); }
.footer-links li a:hover { color:var(--fg-muted); }
.footer-bottom { border-top:1px solid var(--glass-border);padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--fg-subtle);font-weight:600; }
@media (max-width:640px){.footer-bottom{flex-direction:column;gap:0.4rem;text-align:center}}

/* ── Listagem do blog (/blog) ── */
/* ── Eyebrow / section header (shared with homepage) ── */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted); }
.eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--teal-light); opacity: 0.6; }
.section-header { width: 100%; }
.section-h2 { margin-top: 1.5rem; font-size: clamp(1.85rem, 3vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--fg); }
.section-lead { margin-top: 1.5rem; font-size: clamp(15px, 1.05vw, 16.5px); color: var(--fg-muted); line-height: 1.65; width: 100%; max-width: 640px; }
.gradient-text { background: linear-gradient(90deg, var(--purple-light), var(--teal-light)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Page Hero (blog listing) ── */
.page-hero { padding: 10rem 0 3.5rem; border-bottom: 1px solid var(--glass-border); position: relative; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(94,46,145,0.08) 0%, transparent 100%); pointer-events: none; }
.page-breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--fg-subtle); margin-bottom: 2rem; }
.page-breadcrumb a { color: var(--fg-subtle); transition: color var(--transition); }
.page-breadcrumb a:hover { color: var(--fg-muted); }

/* ── Category filter bar ── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 3rem 0 0; }
.filter-chip { font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--fg-muted); background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: 100px; padding: 0.55rem 1.15rem; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); }
.filter-chip:hover { color: var(--fg); border-color: var(--glass-border-hi); transform: translateY(-1px); }
.filter-chip.active { color: #fff; background: linear-gradient(135deg, var(--purple), var(--teal)); border-color: transparent; }

/* ── Blog listing ── */
#blog-listing { padding: 4rem 0 7rem; }
.blog-grid { margin-top: 1rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .blog-grid { grid-template-columns: repeat(4, 1fr); } }
.blog-card {
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  background: var(--reflection), var(--glass-surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  border-radius: 12px;
  padding: 2rem; display: flex; flex-direction: column; gap: 1rem;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), transform var(--transition);
}
.blog-card:hover { border-color: var(--teal-light); background: var(--reflection), var(--glass-surface-md); transform: translateY(-6px); box-shadow: var(--shadow-float), 0 0 0 1px rgba(45,212,224,0.15); }
.blog-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-light); }
.blog-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--fg); line-height: 1.3; letter-spacing: -0.01em; transition: color var(--transition); }
.blog-card:hover h3 { color: var(--purple-light); }
.blog-card p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.6; flex: 1; }
.blog-meta { font-size: 11.5px; color: var(--fg-subtle); font-weight: 600; letter-spacing: 0.04em; border-top: 1px solid var(--glass-border); padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; }
.blog-read { font-size: 12px; font-weight: 700; color: var(--teal-light); display: inline-flex; align-items: center; gap: 4px; transition: gap var(--transition); }
.blog-card:hover .blog-read { gap: 8px; }
.blog-empty { padding: 4rem 1rem; text-align: center; color: var(--fg-subtle); font-size: 15px; }
.blog-loadmore-wrap { display: flex; justify-content: center; margin-top: 3.5rem; }

.btn-outline { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--fg); background: var(--glass-surface); border: 1px solid var(--glass-border-hi); border-radius: 100px; padding: 0.85rem 1.75rem; transition: background var(--transition), border-color var(--transition), transform var(--transition); }
.btn-outline:hover { background: var(--glass-surface-md); border-color: var(--teal-light); transform: translateY(-2px); }
.btn-outline .arrow-circle { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--glass-border-hi); display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--transition), color var(--transition); }
.btn-outline:hover .arrow-circle { border-color: var(--teal-light); color: var(--teal-light); }


/* ── Botao flutuante do WhatsApp ── */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 13px 20px 13px 16px;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.wa-float:hover {
  background: #1ebe5d;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(37,211,102,0.55);
}
@media (max-width: 640px) {
  .wa-float span { display: none; }
  .wa-float { padding: 14px; border-radius: 50%; }
}