/* ============================================================
   Estilos específicos desta página
   Extraído do HTML para facilitar manutenção.
   ============================================================ */

:root {
  --green: #00C853;
  --green-dim: #00A844;
  --green-soft: rgba(0,200,83,0.10);
  --green-border: rgba(0,200,83,0.28);
  --gold: #C9A84C;
  --gold-soft: rgba(201,168,76,0.12);
  --gold-border: rgba(201,168,76,0.28);
  --bg: #080B0A;
  --bg-2: #0E1412;
  --bg-card: #111815;
  --bg-hover: #151F1A;
  --white: #F0F4F2;
  --muted-1: rgba(240,244,242,0.70);
  --muted-2: rgba(240,244,242,0.46);
  --muted-3: rgba(240,244,242,0.13);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Outfit', system-ui, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--bg);color:var(--white);overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");pointer-events:none;z-index:1000;opacity:0.45;}

/* NAV */
nav{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 2.5rem;position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(8,11,10,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--muted-3);}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--white);letter-spacing:-0.5px;display:flex;align-items:center;gap:0.5rem;text-decoration:none;}
.logo-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 10px var(--green);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 8px var(--green);}50%{box-shadow:0 0 16px var(--green);}}
.nav-links{display:flex;gap:2.5rem;list-style:none;}
.nav-links a{color:var(--muted-1);text-decoration:none;font-size:0.875rem;transition:color 0.2s;}
.nav-links a:hover{color:var(--white);}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform 0.25s,opacity 0.25s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-mobile-menu{display:none;position:fixed;top:57px;left:0;right:0;background:rgba(8,11,10,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--muted-3);padding:1.5rem 1.25rem;z-index:99;flex-direction:column;}
.nav-mobile-menu.open{display:flex;}
.nav-mobile-menu a{color:var(--muted-1);text-decoration:none;font-size:1rem;padding:0.9rem 0;border-bottom:1px solid var(--muted-3);transition:color 0.2s;}
.nav-mobile-menu a:last-child{border-bottom:none;}

/* HERO */
.page-hero{padding:8rem 2.5rem 4rem;max-width:1200px;margin:0 auto;}
.page-eyebrow{display:inline-flex;align-items:center;gap:0.6rem;font-size:0.72rem;letter-spacing:2.4px;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:1.5rem;}
.page-eyebrow::before{content:'';width:28px;height:1px;background:var(--green);}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.8rem);font-weight:900;line-height:1.05;letter-spacing:-1.5px;margin-bottom:1rem;}
.page-hero h1 em{color:var(--green);font-style:italic;}
.page-hero p{color:var(--muted-1);font-size:1rem;font-weight:300;max-width:520px;line-height:1.75;}

/* STATS */
.hub-stats{display:flex;gap:2.5rem;margin-top:2.5rem;flex-wrap:wrap;}
.hub-stat-item{display:flex;flex-direction:column;gap:0.2rem;}
.hub-stat-num{font-family:var(--font-display);font-size:1.8rem;font-weight:900;color:var(--green);line-height:1;}
.hub-stat-label{font-size:0.75rem;color:var(--muted-2);letter-spacing:0.5px;}

/* FILTROS */
.hub-filters{max-width:1200px;margin:0 auto;padding:0 2.5rem 2.5rem;}
.filter-wrap{display:flex;gap:0.65rem;flex-wrap:wrap;}
.filter-btn{font-family:var(--font-body);font-size:0.78rem;font-weight:600;padding:0.45rem 1rem;border-radius:999px;border:1px solid var(--muted-3);background:transparent;color:var(--muted-2);cursor:pointer;transition:all 0.2s;letter-spacing:0.3px;}
.filter-btn:hover{border-color:var(--muted-2);color:var(--white);}
.filter-btn.active{background:var(--green-soft);border-color:var(--green-border);color:var(--green);}

/* GRID DE ARTIGOS */
.hub-grid-wrap{max-width:1200px;margin:0 auto;padding:0 2.5rem 6rem;}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}

/* CARD DESTAQUE — ocupa 2 colunas */
.hub-card{background:var(--bg-card);border:1px solid var(--muted-3);border-radius:20px;padding:1.75rem;display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:background 0.25s,transform 0.25s,border-color 0.25s;}
.hub-card:hover{background:var(--bg-hover);border-color:var(--green-border);transform:translateY(-4px);}
.hub-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 0.35s ease;}
.hub-card:hover::before{transform:scaleX(1);}
.hub-card.featured{grid-column:span 2;background:radial-gradient(ellipse at 90% 0%,rgba(0,200,83,0.10),transparent 55%),var(--bg-card);border-color:rgba(0,200,83,0.22);}
.hub-card.featured:hover{background:radial-gradient(ellipse at 90% 0%,rgba(0,200,83,0.17),transparent 55%),var(--bg-hover);}

.card-category{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:1rem;}
.card-dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0;}
.hub-card h2{font-family:var(--font-display);font-size:1.25rem;line-height:1.2;letter-spacing:-0.3px;margin-bottom:0.85rem;}
.hub-card.featured h2{font-size:1.55rem;}
.hub-card p{color:var(--muted-1);font-size:0.88rem;line-height:1.72;font-weight:300;flex:1;}

.card-quote{margin-top:1.25rem;padding-left:0.9rem;border-left:2px solid var(--green);color:var(--muted-2);font-size:0.82rem;font-style:italic;line-height:1.6;}

.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--muted-3);}
.card-meta{font-size:0.7rem;color:var(--muted-2);display:flex;align-items:center;gap:0.45rem;}
.card-meta span{color:var(--muted-3);}
.card-level{font-size:0.65rem;font-weight:600;padding:0.2rem 0.55rem;border-radius:999px;}
.card-level.iniciante{color:var(--green);background:var(--green-soft);border:1px solid var(--green-border);}
.card-level.intermediario{color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-border);}
.card-level.avancado{color:#4488CC;background:rgba(68,136,204,0.10);border:1px solid rgba(68,136,204,0.28);}
.card-read{font-size:0.78rem;color:var(--green);font-weight:600;display:flex;align-items:center;gap:0.3rem;transition:gap 0.2s;}
.hub-card:hover .card-read{gap:0.55rem;}

/* ESTADO VAZIO (sem resultados no filtro) */
.hub-empty{display:none;grid-column:span 3;text-align:center;padding:3rem 1rem;color:var(--muted-2);}
.hub-empty p{font-size:0.95rem;}

/* CTA BOTTOM */
.hub-cta{max-width:1200px;margin:0 auto 6rem;padding:0 2.5rem;}
.hub-cta-inner{background:linear-gradient(135deg,#0E1F15,#0A1410);border:1px solid var(--green-border);border-radius:20px;padding:2.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.hub-cta-inner h3{font-family:var(--font-display);font-size:1.6rem;line-height:1.1;letter-spacing:-0.5px;margin-bottom:0.5rem;color:var(--white);}
.hub-cta-inner p{color:var(--muted-1);font-size:0.9rem;line-height:1.6;}
.btn-primary{display:inline-flex;align-items:center;gap:0.5rem;background:var(--green);color:#041009 !important;padding:0.9rem 1.75rem;border-radius:8px;font-family:var(--font-body);font-weight:700;font-size:0.92rem;text-decoration:none;transition:transform 0.2s,box-shadow 0.2s;white-space:nowrap;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(0,200,83,0.28);}

footer{border-top:1px solid var(--muted-3);padding:2rem 2.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;max-width:1200px;margin:0 auto;}
.footer-links{display:flex;gap:1.5rem;}
.footer-links a{color:var(--muted-2);text-decoration:none;font-size:0.8rem;transition:color 0.2s;}
.footer-links a:hover{color:var(--green);}
.footer-copy{color:var(--muted-2);font-size:0.75rem;}

/* REVEAL */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1),transform 0.6s cubic-bezier(0.22,1,0.36,1);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}

/* LIGHT MODE */
html.light-mode body,html[data-theme="light"] body{background:#F4F7F5;color:#132019;}
html.light-mode .hub-card,html[data-theme="light"] .hub-card{background:#fff;}
html.light-mode .hub-card p,html[data-theme="light"] .hub-card p{color:rgba(19,32,25,0.68);}
html.light-mode .hub-cta-inner,html[data-theme="light"] .hub-cta-inner{background:linear-gradient(135deg,#D6EFE0,#E8F5EC);border-color:rgba(0,200,83,0.35);}
html.light-mode .hub-cta-inner h3,html[data-theme="light"] .hub-cta-inner h3{color:#0A1F12;}
html.light-mode .hub-cta-inner p,html[data-theme="light"] .hub-cta-inner p{color:rgba(10,31,18,0.65);}

@media(max-width:1024px){.hub-grid{grid-template-columns:repeat(2,1fr);}.hub-card.featured{grid-column:span 2;}.hub-empty{grid-column:span 2;}}
@media(max-width:768px){
  nav{padding:1rem 1.25rem;}.nav-links{display:none;}.nav-hamburger{display:flex;}
  .page-hero,.hub-filters,.hub-grid-wrap,.hub-cta{padding-left:1.25rem;padding-right:1.25rem;}
  .hub-grid{grid-template-columns:1fr;}.hub-card.featured{grid-column:span 1;}
  .hub-empty{grid-column:span 1;}
  .hub-cta-inner{flex-direction:column;align-items:flex-start;}
  .btn-primary{width:100%;justify-content:center;}
  footer{flex-direction:column;align-items:flex-start;padding:2rem 1.25rem;}.footer-links{flex-wrap:wrap;gap:1rem;}
}