:root{
  --bg: #f6fbff;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #5b6b84;

  --primary: #2563eb;   /* azul */
  --primary-2: #0ea5e9; /* azul claro */
  --success: #16a34a;   /* verde */
  --accent: #f59e0b;    /* amarelo */
  --pink: #ec4899;      /* detalhe */
  --violet:#8b5cf6;     /* detalhe */

  --radius: 18px;
  --shadow: 0 12px 30px rgba(15, 23, 42, .10);
  --border: 1px solid rgba(15,23,42,.08);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(800px 400px at 10% 0%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(900px 450px at 90% 12%, rgba(14,165,233,.12), transparent 55%),
    var(--bg);
  color: var(--text);
}

/* ===== Navbar ===== */
.navbar-glass{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--border);
}
.nav-spacer{ height: 76px; }
.brand-logo{ height: 42px; width:auto; }
.navbar .nav-link{ color: rgba(15,23,42,.82); font-weight: 800; }
.navbar .nav-link:hover{ color: var(--primary); }

.btn-brand{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: 0;
  color: #fff;
  font-weight: 900;
  border-radius: 999px;
  padding: .75rem 1.05rem;
  box-shadow: 0 14px 26px rgba(37,99,235,.18);
}
.btn-brand:hover{ filter: brightness(1.03); color:#fff; }

.btn-outline-soft{
  border-radius: 999px;
  padding: .75rem 1.05rem;
  font-weight: 900;
  border: 1px solid rgba(37,99,235,.25);
  background: rgba(255,255,255,.75);
  color: var(--primary);
}
.btn-outline-soft:hover{
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.35);
}

/* ===== Componentes base ===== */
.card-soft{
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.section-title{
  font-weight: 950;
  letter-spacing: -.5px;
  line-height: 1.1;
}
.section-sub{
  color: var(--muted);
  font-weight: 700;
}

/* ===== “Papel de caderno” ===== */
.paper{
  position: relative;
  overflow: hidden;
}
.paper::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(37,99,235,.06) 0px,
      rgba(37,99,235,.06) 1px,
      transparent 1px,
      transparent 22px
    );
  pointer-events:none;
  opacity:.9;
}
.paper::after{
  /* margem do caderno */
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:18px;
  width:3px;
  border-radius: 8px;
  background: rgba(236,72,153,.35);
  pointer-events:none;
}

/* ===== “Sticker/adesivo” ===== */
.sticker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.10);
  font-weight: 900;
  color: rgba(15,23,42,.80);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
.sticker .dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(245,158,11,.18);
}

/* ===== Rabiscos (doodles) ===== */
.doodle{
  position:absolute;
  pointer-events:none;
  opacity:.45;
  filter: saturate(1.1);
}
.doodle.d1{ top:-14px; right:-10px; transform: rotate(8deg); }
.doodle.d2{ bottom:-22px; left:-20px; transform: rotate(-10deg); }
.doodle svg{ width: 160px; height:auto; }
@media(min-width: 992px){
  .doodle svg{ width: 220px; }
}

/* ===== Ícones com carinha escolar ===== */
.icon-bubble{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.55rem;
  background: rgba(37,99,235,.10);
  color: var(--primary);
  box-shadow: 0 10px 20px rgba(37,99,235,.10);
}
.icon-bubble.green{ background: rgba(22,163,74,.12); color: var(--success); }
.icon-bubble.yellow{ background: rgba(245,158,11,.18); color: var(--accent); }
.icon-bubble.sky{ background: rgba(14,165,233,.16); color: var(--primary-2); }
.icon-bubble.pink{ background: rgba(236,72,153,.14); color: var(--pink); }
.icon-bubble.violet{ background: rgba(139,92,246,.14); color: var(--violet); }

/* ===== Cards “tocáveis” (mobile) ===== */
.touch-card{
  padding: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.touch-card h5{ font-weight: 950; margin: 10px 0 6px; }
.touch-card p{ margin:0; color: var(--muted); font-weight: 700; }
.touch-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(15,23,42,.14);
}

/* ===== Hero escolar + animações suaves ===== */
.hero{ padding: 18px 0 8px; }
.hero-wrap{ position:relative; overflow:hidden; }
.hero-inner{ padding: 20px; }
@media (min-width: 992px){ .hero-inner{ padding: 28px; } }

.hero-title{
  font-weight: 990;
  letter-spacing: -.8px;
  line-height: 1.04;
  font-size: clamp(1.95rem, 4.3vw, 3.2rem);
  margin: 12px 0 10px;
}
.hero-sub{
  color: var(--muted);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 12px;
}

.hero-quick{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px; }

.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.42rem .78rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.86);
  font-weight: 900;
  color: rgba(15,23,42,.78);
}

/* “cartões” do lado direito no hero */
.hero-side{ padding: 16px; }
.hero-side .mini{
  border-radius: 18px;
  border: 1px dashed rgba(37,99,235,.35);
  background: rgba(37,99,235,.05);
  padding: 14px;
  transition: transform .2s ease;
}
.hero-side .mini:hover{ transform: translateY(-2px); }
.hero-side .mini + .mini{ margin-top: 10px; }
.hero-side .mini .t{ font-weight: 950; }
.hero-side .mini .d{ color: var(--muted); font-weight:700; }

/* ===== Seção “trilho” (timeline de como funciona) ===== */
.steps{
  position: relative;
}
.steps::before{
  content:"";
  position:absolute;
  left: 26px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(37,99,235,.25), rgba(14,165,233,.12));
}
.step-item{
  position: relative;
  padding-left: 68px;
}
.step-pin{
  position:absolute;
  left: 8px;
  top: 6px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(37,99,235,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: var(--primary);
  box-shadow: 0 10px 22px rgba(37,99,235,.10);
}

/* ===== Carrossel banners ===== */
.carousel-shell{
  border-radius: var(--radius);
  overflow:hidden;
  border: var(--border);
  box-shadow: var(--shadow);
}
.banner-img{ width:100%; height:auto; display:block; }

/* ===== CTA band ===== */
.cta-band{
  padding: 20px;
  border-radius: calc(var(--radius) + 8px);
  background:
    radial-gradient(600px 260px at 20% 20%, rgba(245,158,11,.16), transparent 60%),
    linear-gradient(135deg, rgba(37,99,235,.12), rgba(14,165,233,.12));
  border: 1px solid rgba(37,99,235,.20);
}

/* ===== Footer (harmonizado) ===== */
.footer-top{
  margin-top: 56px;
  padding: 44px 0;
  background: #edf5ff;
  border-top: 1px solid rgba(15,23,42,.06);
}
.footer-title{ font-weight: 950; margin-bottom: 12px; }
.footer-item{ color: rgba(15,23,42,.78); margin-bottom: 10px; font-weight: 700; }
.footer-link{ color: var(--primary); font-weight: 950; text-decoration: none; }
.footer-link:hover{ text-decoration: underline; }

.footer-bottom{
  background: #0b2a5b;
  color:#fff;
  padding: 18px 0;
}
.footer-link-strong{ color:#fff; font-weight: 950; text-decoration:none; }
.footer-link-strong:hover{ text-decoration: underline; }

/* WhatsApp */
#whatsapp-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #22c55e;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 16px 30px rgba(34,197,94,.30);
  z-index: 9999;
  text-decoration:none;
  font-size: 1.7rem;
}
#whatsapp-fab:hover{ filter: brightness(1.05); }


/* =========================
   ELEMENTOS ESCOLARES (ANIMADOS)
   ========================= */

.school-bg{
  position: relative;
  overflow: hidden;
}

/* Grade quadriculada suave */
.school-bg::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .55;
  pointer-events:none;
}

/* Flutuadores (ícones) */
.floaty{
  position:absolute;
  pointer-events:none;
  opacity:.35;
  filter: saturate(1.1);
  animation: floatY 5.5s ease-in-out infinite;
}

.floaty.i1{ top: 14%; left: 6%;  animation-duration: 6.5s; transform: rotate(-8deg); }
.floaty.i2{ top: 18%; right: 8%; animation-duration: 7.2s; transform: rotate(10deg); }
.floaty.i3{ bottom: 12%; left: 10%; animation-duration: 6.8s; transform: rotate(6deg); }
.floaty.i4{ bottom: 10%; right: 12%; animation-duration: 7.6s; transform: rotate(-10deg); }

@keyframes floatY{
  0%,100%{ transform: translateY(0) rotate(var(--r,0deg)); }
  50%{ transform: translateY(-10px) rotate(var(--r,0deg)); }
}

/* “Sticky note” (post-it) */
.note{
  position: relative;
  border-radius: 16px;
  padding: 14px 14px 12px;
  background: rgba(245,158,11,.16);
  border: 1px solid rgba(245,158,11,.22);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
}
.note::after{
  content:"";
  position:absolute;
  top:-8px; left: 18px;
  width: 42px; height: 16px;
  border-radius: 6px;
  background: rgba(14,165,233,.25);
  border: 1px solid rgba(14,165,233,.22);
  transform: rotate(-6deg);
}

/* Hover mais “vivo” nos cards */
.touch-card{
  position: relative;
  overflow: hidden;
}
.touch-card::after{
  content:"";
  position:absolute;
  inset:-60px -40px auto auto;
  width: 160px; height: 160px;
  background: radial-gradient(circle at 30% 30%, rgba(14,165,233,.18), transparent 60%);
  transform: rotate(15deg);
  opacity: 0;
  transition: opacity .25s ease;
}
.touch-card:hover::after{ opacity: 1; }

/* Reação no toque (mobile) */
.touch-card:active{
  transform: scale(.985);
}

/* Mini “confete” na CTA */
.cta-band{
  position: relative;
  overflow: hidden;
}
.cta-band .spark{
  position:absolute;
  width: 10px; height: 10px;
  border-radius: 999px;
  opacity: .35;
  animation: pop 3.2s ease-in-out infinite;
}
.cta-band .spark.s1{ top: 12px; right: 18px; background: rgba(236,72,153,.55); }
.cta-band .spark.s2{ top: 30px; right: 42px; background: rgba(245,158,11,.60); animation-delay: .6s; }
.cta-band .spark.s3{ top: 20px; right: 72px; background: rgba(22,163,74,.55); animation-delay: 1.1s; }

@keyframes pop{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-10px) scale(1.2); }
}

/* Ocultar flutuadores no mobile muito pequeno */
@media (max-width: 360px){
  .floaty{ display:none; }
}




/* =========================
   LINHAS DESENHADAS (Scribble)
   ========================= */
/* =========================
   SCRIBBLES LOOP (rabiscos em loop)
   ========================= */
.scribble-section{
  position: relative;
  overflow: hidden;
}

.scribble-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}

.scribble-section .container{
  position: relative;
  z-index: 1;
}

.scribble-svg{
  width: 100%;
  height: 100%;
  min-height: 240px; /* garante aparecer */
  display: block;
}

.scribble-stroke{
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}





/* ===== Cards de cursos (Top vendidos) - novo layout ===== */
.curso-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
  transition: transform .22s ease, box-shadow .22s ease;
}

.curso-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(15,23,42,.14);
}

.curso-media{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* mais compacto no mobile */
  overflow: hidden;
  background: rgba(15,23,42,.04);
}

.curso-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .35s ease;
}

.curso-card:hover .curso-media img{
  transform: scale(1.08);
}

/* overlay bonito pra dar “cara premium” */
.curso-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(15,23,42,.35), rgba(15,23,42,0) 55%);
  pointer-events:none;
}

/* “brilho” passando */
.curso-shine{
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-60%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events:none;
}
.curso-card:hover .curso-shine{
  opacity: 1;
  animation: cursoShine 1.2s ease forwards;
}
@keyframes cursoShine{
  from{ transform: translateX(-60%) rotate(10deg); }
  to{ transform: translateX(60%) rotate(10deg); }
}

.curso-info{
  padding: 12px 12px 14px;
}

.curso-title{
  font-weight: 950;
  letter-spacing: -.35px;
  line-height: 1.15;
  color: rgba(15,23,42,.92);
  font-size: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* evita card gigante */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em; /* alinha alturas */
}

/* mobile: um pouco menor pra caber legal */
@media (max-width: 576px){
  .curso-info{ padding: 10px 10px 12px; }
  .curso-title{ font-size: .95rem; }
}