/* =========================================================
   Bootcamp Programação para Iniciantes — v2
   shared/styles.css  ·  Tokens, reset, tipografia, layout
   ========================================================= */

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

:root{
  /* Backgrounds */
  --bg:        #0a0a12;
  --surface:   #12121e;
  --surface2:  #1a1a2e;
  --surface3:  #222240;
  --code-bg:   #0d0d1a;

  /* Text */
  --text:      #eef0f8;
  --text-dim:  #8892b0;

  /* Generic accents */
  --accent:    #6c63ff;
  --accent2:   #ff6b6b;
  --accent3:   #4ecdc4;
  --accent4:   #45b7d1;
  --accent5:   #f7b731;
  --accent6:   #a78bfa;
  --accent7:   #06d6a0;

  /* Themed */
  --python:    #3776ab;
  --python-y:  #ffd43b;
  --bug:       #ff4757;
  --tinydb:    #f7b731;
  --streamlit: #ff4b4b;

  /* Glows */
  --glow-accent: rgba(108,99,255,0.15);
  --glow-python: rgba(55,118,171,0.18);
  --glow-bug:    rgba(255,71,87,0.18);
}

html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Nunito',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
}

/* =========================================================
   ANIMATED BACKGROUND
   ========================================================= */
.bg-grid{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(108,99,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(108,99,255,0.03) 1px,transparent 1px);
  background-size:50px 50px;
}
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-orbs .orb{
  position:absolute;border-radius:50%;
  filter:blur(100px);opacity:0.08;
  animation:orbFloat 25s ease-in-out infinite;
}
.bg-orbs .orb:nth-child(1){width:600px;height:600px;background:var(--accent);top:-150px;left:-150px;animation-delay:0s}
.bg-orbs .orb:nth-child(2){width:500px;height:500px;background:var(--python);bottom:-150px;right:-150px;animation-delay:-8s}
.bg-orbs .orb:nth-child(3){width:400px;height:400px;background:var(--accent5);top:40%;left:60%;animation-delay:-16s}

/* =========================================================
   PROGRESS BAR
   ========================================================= */
.progress-track{
  position:fixed;top:0;left:0;width:100%;height:4px;z-index:200;
  background:rgba(255,255,255,0.03);
}
.progress-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--python),var(--accent5),var(--streamlit),var(--accent3));
  transition:width 0.3s;
  border-radius:0 2px 2px 0;
  box-shadow:0 0 20px var(--accent);
}

/* =========================================================
   CONTAINER
   ========================================================= */
.container{
  max-width:960px;
  margin:0 auto;
  padding:20px;
  position:relative;
  z-index:1;
}

/* =========================================================
   SIDEBAR NAV (mobile-friendly off-canvas)
   ========================================================= */
.sidebar-nav{
  position:fixed;left:0;top:0;width:290px;height:100vh;
  background:var(--surface);
  border-right:1px solid rgba(108,99,255,0.1);
  z-index:100;
  transform:translateX(-100%);
  transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
  overflow-y:auto;padding:24px 0;
}
.sidebar-nav.open{transform:translateX(0)}
.sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:99;opacity:0;pointer-events:none;
  transition:opacity 0.3s;
}
.sidebar-overlay.open{opacity:1;pointer-events:auto}
.sidebar-header{
  padding:0 24px 20px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  margin-bottom:12px;
}
.sidebar-header h3{
  font-size:1rem;color:var(--accent);
  font-weight:800;display:flex;align-items:center;gap:8px;
}
.sidebar-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.75rem;color:var(--text-dim);
  text-decoration:none;padding:6px 12px;border-radius:8px;
  background:rgba(255,255,255,0.04);
  margin-top:8px;font-weight:700;
  transition:background 0.2s,color 0.2s;
}
.sidebar-back:hover{color:var(--text);background:rgba(108,99,255,0.15)}
.sidebar-group{padding:8px 16px}
.sidebar-group-title{
  font-size:0.7rem;text-transform:uppercase;letter-spacing:2px;
  color:var(--text-dim);padding:8px;font-weight:700;
}
.sidebar-link{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:10px;
  color:var(--text-dim);text-decoration:none;
  font-size:0.85rem;font-weight:600;
  transition:all 0.2s;cursor:pointer;
}
.sidebar-link:hover,.sidebar-link.active{
  background:rgba(108,99,255,0.1);color:var(--text);
}
.sidebar-link .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sidebar-close{
  position:absolute;top:16px;right:16px;
  background:none;border:none;color:var(--text-dim);
  font-size:1.4rem;cursor:pointer;padding:4px 8px;border-radius:8px;
  transition:all 0.2s;
}
.sidebar-close:hover{color:var(--text);background:rgba(255,255,255,0.05)}

.menu-toggle{
  position:fixed;top:16px;left:16px;z-index:98;
  background:var(--surface2);
  border:1px solid rgba(108,99,255,0.2);
  color:var(--text);width:44px;height:44px;
  border-radius:12px;font-size:1.2rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.3s;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.menu-toggle:hover{background:var(--accent);border-color:var(--accent)}

/* =========================================================
   HERO (capítulos e hub)
   ========================================================= */
.hero{
  text-align:center;padding:100px 20px 70px;
  position:relative;
}
.hero-icons{
  font-size:3.5rem;display:flex;justify-content:center;gap:16px;
  margin-bottom:24px;
  animation:fadeSlideDown 0.8s ease both;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent6));
  color:white;font-weight:800;font-size:0.8rem;
  padding:6px 20px;border-radius:50px;
  text-transform:uppercase;letter-spacing:2px;
  margin-bottom:24px;
  animation:fadeSlideDown 0.8s ease 0.1s both;
}
.hero-badge.python{
  background:linear-gradient(135deg,var(--python),var(--python-y));
  color:#0a0a12;
}
.hero h1{
  font-size:clamp(2.2rem,5.5vw,3.8rem);
  font-weight:900;
  background:linear-gradient(135deg,var(--text),var(--accent4));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.15;margin-bottom:16px;
  animation:fadeSlideDown 0.8s ease 0.2s both;
}
.hero .subtitle{
  font-size:1.15rem;color:var(--text-dim);
  max-width:700px;margin:0 auto 28px;
  animation:fadeSlideDown 0.8s ease 0.35s both;
}
.hero-stack{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  animation:fadeSlideDown 0.8s ease 0.5s both;
}
.stack-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:50px;
  font-size:0.8rem;font-weight:700;
  border:1px solid rgba(255,255,255,0.08);
  background:var(--surface2);
}
.stack-chip.python   { border-color:rgba(55,118,171,0.4);color:var(--python-y) }
.stack-chip.tinydb   { border-color:rgba(247,183,49,0.3);color:var(--tinydb) }
.stack-chip.streamlit{ border-color:rgba(255,75,75,0.3);color:var(--streamlit) }
.stack-chip.bug      { border-color:rgba(255,71,87,0.4);color:var(--bug) }

/* =========================================================
   CHAPTER DIVIDER
   ========================================================= */
.chapter-divider{
  text-align:center;padding:60px 20px 30px;position:relative;
}
.chapter-divider::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(108,99,255,0.3),transparent);
}
.chapter-icon{
  font-size:3rem;display:block;margin-bottom:12px;
  animation:bounce 2s ease-in-out infinite;
}
.chapter-number{
  display:inline-block;
  background:linear-gradient(135deg,var(--accent),var(--accent6));
  color:white;font-weight:900;font-size:0.75rem;
  padding:4px 16px;border-radius:50px;
  text-transform:uppercase;letter-spacing:2px;
  margin-bottom:12px;
}
.chapter-divider h2{
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:900;margin-bottom:8px;
}
.chapter-divider h2.grad-intro     {background:linear-gradient(135deg,var(--python),var(--python-y));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chapter-divider h2.grad-vars      {background:linear-gradient(135deg,var(--accent5),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chapter-divider h2.grad-cond      {background:linear-gradient(135deg,var(--accent4),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chapter-divider h2.grad-loops     {background:linear-gradient(135deg,var(--accent6),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chapter-divider h2.grad-funcs     {background:linear-gradient(135deg,var(--accent7),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chapter-divider h2.grad-desafios  {background:linear-gradient(135deg,var(--accent2),var(--accent5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chapter-divider h2.grad-dicts     {background:linear-gradient(135deg,var(--accent),var(--accent6));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chapter-divider h2.grad-json      {background:linear-gradient(135deg,var(--accent5),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chapter-divider h2.grad-tinydb    {background:linear-gradient(135deg,var(--tinydb),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chapter-divider h2.grad-streamlit {background:linear-gradient(135deg,var(--streamlit),var(--accent5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chapter-subtitle{
  color:var(--text-dim);font-size:1rem;
  max-width:560px;margin:0 auto;
}

/* =========================================================
   STEP SECTION (numbered blocks within chapter)
   ========================================================= */
.step-section{
  margin:30px 0;
  opacity:0;transform:translateY(40px);
  transition:opacity 0.7s ease,transform 0.7s ease;
}
.step-section.visible{opacity:1;transform:translateY(0)}
.step-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.step-number{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.3rem;color:var(--bg);
  flex-shrink:0;position:relative;
}
.step-number::after{
  content:'';position:absolute;inset:-3px;border-radius:17px;
  background:inherit;opacity:0.25;z-index:-1;
}
.sn-red    {background:var(--accent2)}
.sn-blue   {background:var(--accent4)}
.sn-green  {background:var(--accent3)}
.sn-yellow {background:var(--accent5)}
.sn-purple {background:var(--accent6)}
.sn-main   {background:var(--accent)}
.sn-mint   {background:var(--accent7)}
.sn-py     {background:var(--python)}
.step-title{font-size:1.45rem;font-weight:800}
.step-sub  {color:var(--text-dim);font-size:0.88rem;margin-top:2px}

/* =========================================================
   SECTION CONNECTOR (between sections)
   ========================================================= */
.section-connector{
  display:flex;justify-content:center;margin:30px 0;
}
.section-connector .line{
  width:2px;height:48px;
  background:linear-gradient(to bottom,transparent,rgba(108,99,255,0.4),transparent);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  text-align:center;padding:60px 20px 40px;
  color:var(--text-dim);font-size:0.85rem;
  border-top:1px solid rgba(255,255,255,0.04);
  margin-top:60px;
}
.footer a{color:var(--accent4);text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer .heart{color:var(--accent2)}

/* =========================================================
   UTILITIES
   ========================================================= */
.text-dim{color:var(--text-dim)}
.text-accent{color:var(--accent5)}
.center{text-align:center}
.mt-md{margin-top:24px}
.mt-lg{margin-top:40px}
.mb-md{margin-bottom:24px}

@media (max-width: 720px){
  .hero{padding:80px 16px 50px}
  .container{padding:14px}
  .step-header{gap:12px}
  .step-number{width:44px;height:44px;font-size:1.1rem}
  .step-title{font-size:1.2rem}
}