/* ============================================================
   VASSAMA Academy — Design System
   Estrutura inspirada em academias corporativas de tecnologia
   (menu com formações, faixa de estatísticas, certificações,
   turmas, vitrine corporativa, comunidade, learning lab).
   ============================================================ */

:root{
  --bg:#070f22; --bg2:#0b1530;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.04);
  --text:#eaf1ff; --muted:#a8b6d8;
  --line:rgba(255,255,255,.12);
  --primary:#4f8cff; --secondary:#37d399; --accent:#fbbf24;
  --landing-accent:#22d3ee;
  --shadow:0 18px 56px rgba(0,0,0,.35);
  --r:18px; --max:1180px;
  --font-body:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --font-heading:"Sora", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: var(--font-body);
  font-synthesis: none;
  background:
    radial-gradient(1200px 700px at 12% 18%, rgba(55,211,153,.18) 0%, rgba(55,211,153,0) 55%),
    radial-gradient(900px 520px at 78% 20%, rgba(79,140,255,.20) 0%, rgba(79,140,255,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}

/* ===== Tipografia (alinhada à landing oficial) ===== */
h1, h2, .h1, .h2, .title, .eventTitle, summary,
.testimonial-top strong, .mega .cat-title{
  font-family:var(--font-heading); letter-spacing:-.01em;
}
.eyebrow, .tag, .badge, .case-card .badge, .price-box .label, .price-box .amount,
.course-price, .course-price small, .crosssell-grid .price, .stat .n, .stat .l,
.mega .cat-code, .filter-tab, .event .badge-status, .cert-badge, .curriculum li .dot,
.tbox .n, .tbox .l, .day, .mon{
  font-family:var(--font-mono);
}

/* ===== Ícones (sprite SVG) ===== */
.icon{
  width:1.15em; height:1.15em; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-0.2em; flex:0 0 auto;
}
.icon-check-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  background:transparent; border:1.5px solid var(--secondary); color:var(--secondary);
}
.icon-check-badge .icon{ width:12px; height:12px; stroke-width:2.6; vertical-align:0 }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:1000;
  background:var(--primary); color:#fff; font-weight:800;
  padding:10px 16px; border-radius:10px; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:12px}

/* ===== WhatsApp flutuante ===== */
.whatsapp-float{
  position:fixed; right:20px; bottom:20px; z-index:900;
  width:56px; height:56px; border-radius:50%;
  background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 14px 34px rgba(0,0,0,.4); }
.whatsapp-float:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.whatsapp-float svg{ width:30px; height:30px; fill:#fff }
@media (max-width: 560px){
  .whatsapp-float{ right:14px; bottom:14px; width:50px; height:50px }
  .whatsapp-float svg{ width:26px; height:26px }
}

/* ===== Placeholder note ribbon (removível quando os dados forem reais) ===== */
.placeholder-banner{
  background:linear-gradient(90deg, rgba(251,191,36,.16), rgba(251,191,36,.06));
  border-bottom:1px solid rgba(251,191,36,.25);
  color:#ffe9b6; font-size:12.5px; font-weight:700;
  text-align:center; padding:8px 12px;
}
.placeholder-banner b{color:var(--accent)}

/* ===== NAV ===== */
.nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter: blur(10px);
  background: rgba(7,15,34,.72);
  border-bottom: 1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:12px 18px; gap:14px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.logo-img{
  height:52px; width:auto; max-width:220px; object-fit:contain; display:block;
  filter: drop-shadow(0 10px 22px rgba(79,140,255,.25));
  transition:.2s transform, .2s filter;
}
.brand:hover .logo-img{ transform:translateY(-1px) scale(1.015); filter: drop-shadow(0 12px 28px rgba(55,211,153,.32)); }
.footer-brand .logo-img{ height:46px; max-width:200px; margin-bottom:12px }

.menu{display:flex; gap:4px; align-items:center; flex:1; justify-content:center}
.menu > li{list-style:none}
.menu{display:flex; padding:0; margin:0}
.menu a.top-link{
  display:flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:10px;
  opacity:.92; text-decoration:none; font-weight:700; font-size:14px;
  white-space:nowrap;
}
.menu a.top-link:hover{opacity:1; background:rgba(255,255,255,.06)}
.menu .caret{font-size:10px; opacity:.7; transition:.2s transform}

.has-mega{position:relative}
.mega{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:min(720px, 88vw);
  background: linear-gradient(180deg, rgba(15,24,48,.98), rgba(9,15,32,.98));
  border:1px solid var(--line); border-radius:16px;
  box-shadow: var(--shadow);
  padding:18px; display:grid; grid-template-columns: repeat(2, 1fr); gap:10px;
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(6px);
  transition:.18s ease;
  z-index:60;
}
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.open .mega{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.has-mega:hover .caret, .has-mega.open .caret{transform:rotate(180deg)}
.mega a{
  display:block; padding:10px 12px; border-radius:12px; text-decoration:none;
  border:1px solid transparent;
}
.mega a:hover{ background:rgba(255,255,255,.06); border-color:var(--line) }
.mega .cat-title{font-weight:900; font-size:13.5px; color:var(--text)}
.mega .cat-code{display:block; font-size:11.5px; color:var(--muted); margin-top:2px; font-weight:700; letter-spacing:.03em}
.mega-foot{
  grid-column: 1 / -1; display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line); margin-top:4px; padding-top:12px; flex-wrap:wrap; gap:10px;
}

.nav-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.nav-toggle{
  display:none; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--text);
  border-radius:10px; width:40px; height:40px; font-size:18px; cursor:pointer;
}

/* ===== Foco visível (teclado) ===== */
.btn:focus-visible,
.carousel-btn:focus-visible,
.hero-dots button:focus-visible,
.filter-tab:focus-visible,
.nav-toggle:focus-visible,
.close-drawer:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 16px; border-radius:999px;
  border:1px solid var(--line);
  text-decoration:none; font-weight:800;
  transition:.18s transform, .18s box-shadow, .18s background;
  white-space:nowrap; cursor:pointer; font-size:14px;
}
.btn:hover{transform:translateY(-1px); box-shadow: var(--shadow)}
.btn.primary{background:var(--text); border-color:transparent; color:var(--bg2)}
.btn.primary:hover{box-shadow:0 0 28px rgba(79,140,255,.45)}
.btn.secondary{background:var(--secondary); border-color:transparent; color:#052014}
.btn.secondary:hover{box-shadow:0 0 28px rgba(55,211,153,.45)}
.btn.ghost{background:rgba(255,255,255,.06)}
.btn.small{padding:9px 12px; font-size:13px}
.btn.block{width:100%}

/* ===== HERO SLIDER ===== */
.hero{position:relative; padding:0; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-slide{
  display:none; padding:60px 0 30px;
  background:
    linear-gradient(180deg, rgba(7,15,34,.55) 0%, rgba(7,15,34,.92) 100%),
    var(--slide-bg, linear-gradient(120deg, rgba(79,140,255,.16), rgba(55,211,153,.10)));
  background-size:cover; background-position:center;
}
.hero-slide.active{display:block; animation:heroFade .5s ease}
@keyframes heroFade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

.pill{
  display:inline-flex; gap:8px; align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  padding:8px 12px; border-radius:999px;
  color:var(--muted); font-weight:800; font-size:12px;
  width:fit-content;
}
.grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:center}
.h1{font-size:clamp(32px,4.4vw,58px); line-height:1.06; margin:12px 0 10px; letter-spacing:-.03em}
.lead{color:var(--muted); font-size:clamp(14px,1.5vw,18px); line-height:1.6; max-width:62ch}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.trust{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; color:var(--muted); font-size:13px}
.trust span{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.04)}

.hero-dots{display:flex; gap:8px; justify-content:center; padding:0 0 18px}
.hero-dots button{
  width:26px; height:5px; border-radius:999px; border:none; background:rgba(255,255,255,.18); cursor:pointer; padding:0;
  transition:.2s background;
}
.hero-dots button.active{background:var(--primary)}

/* Countdown */
.count{
  margin-top:16px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:12px; border-radius: var(--r);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
.count strong{color:var(--accent)}
.timer{display:flex; gap:10px; flex-wrap:wrap}
.tbox{ min-width:64px; padding:10px 12px; border-radius:14px; background:rgba(0,0,0,.18); border:1px solid var(--line); text-align:center; }
.tbox .n{font-weight:950; font-size:18px}
.tbox .l{font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}

.heroCard{
  position:relative; border-radius: var(--r);
  overflow:hidden; border:1px solid var(--line);
  box-shadow: 0 22px 60px rgba(0,0,0,.40);
  min-height: 400px;
  background-color:#0b1530;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.heroCard::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.66) 100%);
  pointer-events:none;
}
.heroCard .cap{ position:absolute; z-index:2; left:16px; right:16px; bottom:14px; display:flex; flex-direction:column; gap:6px }
.cap strong{font-weight:950}
.cap span{color:var(--muted); font-size:13px}
.cap .mini{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.mini b{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:#cfe1ff}

/* ===== Combo 3 em 1 — carrossel de fotos full-bleed ===== */
.combo-showcase{
  position:relative; overflow:hidden; min-height:460px;
  display:flex; align-items:center; justify-content:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.combo-slide{
  position:absolute; inset:0; z-index:0; opacity:0;
  background-color:#0b1530; background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:opacity 1.2s ease;
}
.combo-slide.active{opacity:1}
.combo-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,15,34,.5) 0%, rgba(7,15,34,.85) 100%);
}
.combo-content{position:relative; z-index:2; text-align:center; padding:60px 18px}
.combo-content .sub{max-width:56ch; margin-left:auto; margin-right:auto}
.combo-content .cta{justify-content:center; margin-top:20px}
.combo-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.08); color:var(--text); font-size:24px; font-weight:900;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;
}
.combo-arrow:hover{background:var(--text); color:var(--bg2)}
.combo-arrow.prev{left:16px}
.combo-arrow.next{right:16px}
.combo-dots{position:absolute; z-index:3; bottom:18px; left:0; right:0; display:flex; gap:8px; justify-content:center}
.combo-dots button{width:26px; height:5px; border-radius:999px; border:none; background:rgba(255,255,255,.25); cursor:pointer; padding:0; transition:.2s background}
.combo-dots button.active{background:var(--landing-accent)}
@media (max-width:992px){
  .combo-showcase{min-height:380px}
  .combo-arrow{display:none}
}

/* ===== STATS BAND ===== */
.stats-band{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: linear-gradient(90deg, rgba(79,140,255,.10), rgba(55,211,153,.08));
}
.stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:26px 0; text-align:center }
.stat .n{font-size:clamp(24px,3vw,36px); font-weight:950; color:var(--text); letter-spacing:-.02em}
.stat .l{font-size:12.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:2px}

/* ===== Sections ===== */
.eyebrow{ color:var(--course-accent, var(--secondary)); font-weight:900; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; margin:0 0 6px }
.section{ padding:52px 0; background: transparent; color: var(--text); }
.section.alt{ background: transparent; }
.section.alt .wrap{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid var(--line); border-radius:28px;
  padding:44px clamp(18px, 4vw, 40px);
}
@media (max-width: 560px){
  .section.alt .wrap{ border-radius:20px; padding:32px 18px; }
}
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.h2{font-size:clamp(22px,2.4vw,32px); margin:0; letter-spacing:-.02em}
.sub{margin:6px 0 0; color:var(--muted); max-width:72ch}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border:1px solid var(--line);
  border-radius: var(--r);
  padding:18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  color: var(--text);
  backdrop-filter: blur(10px);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(79,140,255,.35);
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.card .list, .card .sub, .card p, .ans, .eventMeta, .quote figcaption{ color: var(--muted); }
.card .title, .eventTitle, summary, .h2{ color: var(--text); }

/* ===== Icon badges (ícones SVG vetorizados) ===== */
.icon-badge{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.03); border:1px solid rgba(79,140,255,.35); margin-bottom:10px; flex:0 0 auto;
  color:var(--primary);
  transition:transform .25s ease;
}
.card:hover .icon-badge{transform:scale(1.08)}
.icon-badge .icon{
  width:22px; height:22px; stroke-width:1.7; vertical-align:0;
}
.icon-badge.green{ border-color:rgba(55,211,153,.35); color:var(--secondary) }
.icon-badge.amber{ border-color:rgba(251,191,36,.35); color:var(--accent) }
.icon-badge.muted{ border-color:rgba(168,182,216,.35); color:var(--muted) }
.icon-badge.lg{ width:52px; height:52px; border-radius:14px }
.icon-badge.lg .icon{ width:26px; height:26px }
.icon-row{display:flex; align-items:flex-start; gap:12px}
.icon-row .icon-badge{margin-bottom:0}

/* ===== Methodology pillars ===== */
.pillars{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
.pillar .title{margin:0 0 6px}

/* ===== Photo gallery (turmas em ação) — marquee full-bleed ===== */
.photo-marquee{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; background:rgba(255,255,255,.02); margin-top:26px;
}
.photo-track{ display:flex; gap:14px; width:max-content; animation:photoScroll 42s linear infinite }
.photo-marquee:hover .photo-track{animation-play-state:paused}
@keyframes photoScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.photo-track a{
  display:block; flex:0 0 auto; height:220px; border-radius:14px; overflow:hidden; border:1px solid var(--line);
}
.photo-track img{height:100%; width:auto; display:block; object-fit:cover; transition:.3s transform ease}
.photo-track a:hover img{transform:scale(1.06)}

/* ===== Certification marquee ===== */
.cert-strip{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; background:rgba(255,255,255,.02) }
.cert-track{ display:flex; gap:12px; width:max-content; animation:certScroll 32s linear infinite }
.cert-strip:hover .cert-track{animation-play-state:paused}
@keyframes certScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.cert-badge{
  flex:0 0 auto; padding:10px 16px; border-radius:12px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  font-weight:900; font-size:13px; color:#cfe1ff; letter-spacing:.02em;
}

/* ===== Course filters + carousel ===== */
.filter-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 20px }
.filter-tab{
  padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--muted); font-weight:800; font-size:13px; cursor:pointer; transition:.18s;
}
.filter-tab:hover{color:var(--text)}
.filter-tab.active{background:var(--text); color:var(--bg2); border-color:transparent}

.tri{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.tag{display:inline-flex; width:fit-content; padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px}
.tag.azure{background:rgba(79,140,255,.14); border:1px solid rgba(79,140,255,.22); color:#cfe1ff}
.tag.m365{background:rgba(55,211,153,.14); border:1px solid rgba(55,211,153,.22); color:#c9ffe9}
.tag.sec{background:rgba(251,191,36,.14); border:1px solid rgba(251,191,36,.22); color:#ffe9b6}
.tag.infra{background:rgba(168,182,216,.14); border:1px solid rgba(168,182,216,.24); color:#dbe4fb}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; width:fit-content}
.tag.tier-inicio{background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.28); color:#bbf7d0}
.tag.tier-intermedio{background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.28); color:#fde68a}
.tag.tier-avancado{background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.28); color:#fecaca}
.title{margin:10px 0 8px; font-weight:950; letter-spacing:-.02em}
.list{margin:10px 0 0; padding-left:18px; color:var(--muted); line-height:1.65}
.list li{margin:4px 0}

.course-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.course-card{display:flex; flex-direction:column; gap:8px}
.course-meta{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12.5px; margin-top:4px}
.course-meta span{display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03)}
.course-price{margin-top:10px; font-weight:900; color:var(--text)}
.course-price small{display:block; color:var(--muted); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em}
a.course-price{display:block; text-decoration:none; transition:.18s color}
a.course-price:hover{color:var(--landing-accent)}
a.course-price:hover small{color:var(--landing-accent)}
.course-card .btn{margin-top:12px}
.course-card>.course-price, .course-card>a.course-price,
.course-slide>.course-price, .course-slide>a.course-price{margin-top:auto}

.course-carousel{ position:relative; display:flex; align-items:center; gap:12px; margin-top:18px; }
.course-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 22px 22px 4px; scrollbar-width:none;
  mask-image:linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.course-track::-webkit-scrollbar{display:none}
.course-slide{ display:flex; flex-direction:column; min-width:352px; max-width:352px; min-height:326px; scroll-snap-align:start; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.course-slide:hover{ transform:translateY(-7px) scale(1.015); border-color:rgba(79,140,255,.38); box-shadow:0 24px 60px rgba(0,0,0,.34); }
.course-slide.highlight, .card.highlight{ background:linear-gradient(180deg, rgba(251,191,36,.12), rgba(255,255,255,.035)); border-color:rgba(251,191,36,.22); }
.course-slide.highlight-green, .card.highlight-green{ background:linear-gradient(180deg, rgba(55,211,153,.12), rgba(255,255,255,.035)); border-color:rgba(55,211,153,.22); }
.carousel-btn{
  position:relative; z-index:5; width:42px; height:42px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.07); color:var(--text); font-size:26px; font-weight:900; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.2s transform,.2s background,.2s box-shadow; flex:0 0 auto;
}
.carousel-btn:hover{ transform:translateY(-2px); background:var(--text); color:var(--bg2); box-shadow:var(--shadow); }

/* ===== For who ===== */
.two{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.check{display:flex; gap:10px; align-items:flex-start; margin:10px 0}
.dot{
  width:26px; height:26px; border-radius:999px; background:rgba(55,211,153,.12); border:1px solid rgba(55,211,153,.22);
  display:flex; align-items:center; justify-content:center; color:var(--secondary); font-weight:950; flex:0 0 auto; margin-top:2px;
}

/* ===== Calendar / events ===== */
.events{display:grid; gap:12px}
.event{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border:1px solid var(--line); border-radius: var(--r); padding:14px; box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
.date{
  width:70px; height:70px; border-radius: 16px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: rgba(55,211,153,.10); border:1px solid rgba(55,211,153,.18); flex: 0 0 auto;
}
.day{font-size:22px; font-weight:950; line-height:1}
.mon{font-size:12px; font-weight:900; color:var(--muted); letter-spacing:.08em; margin-top:4px}
.eventBody{flex:1}
.eventTitle{font-weight:950}
.eventMeta{color:var(--muted); font-size:13px; margin-top:4px}
.event .badge-status{font-size:11px; font-weight:900; padding:4px 9px; border-radius:999px; background:rgba(55,211,153,.14); color:#c9ffe9; border:1px solid rgba(55,211,153,.22)}
.event .badge-status.esgotado{background:rgba(251,191,36,.14); color:#ffe9b6; border-color:rgba(251,191,36,.22)}

/* ===== Corporate showcase ===== */
.corp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px}
.case-carousel{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 22px 18px 4px; scrollbar-width:none;
  mask-image:linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.case-carousel::-webkit-scrollbar{display:none}
.case-card{ min-width:280px; max-width:280px; scroll-snap-align:start }
.case-card .badge{font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; color:var(--landing-accent)}

/* ===== Community ===== */
.community-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:center}
.pillar-mini{display:flex; gap:10px; align-items:flex-start; margin:12px 0}
.pillar-mini .dot{background:rgba(79,140,255,.12); border-color:rgba(79,140,255,.24); color:var(--primary)}

/* ===== Learning Lab / location ===== */
.lab-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center}
.lab-gallery{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.lab-gallery img{border-radius:14px; border:1px solid var(--line); height:150px; width:100%; object-fit:cover}
.lab-feature{margin:16px 0}
.lab-feature .title{margin-bottom:4px}

/* ===== Testimonials ===== */
.quotes{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.quote p{margin:0 0 10px; line-height:1.7}
.quote figcaption{color:var(--muted); font-size:12px}
.testimonial-carousel{ position:relative; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; }
.testimonial-track{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding:6px 22px 18px 4px;
  mask-image:linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.testimonial-track::-webkit-scrollbar{display:none}
.testimonial-card{ min-width:330px; max-width:330px; min-height:280px; display:flex; flex-direction:column; justify-content:space-between; scroll-snap-align:start; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; margin:0 auto; }
.testimonial-card:hover{ transform:translateY(-6px) scale(1.012); border-color:rgba(79,140,255,.34); box-shadow:0 24px 60px rgba(0,0,0,.34); }
.testimonial-top{display:flex; gap:14px; align-items:center; margin-bottom:18px}
.avatar-space{
  width:72px; height:72px; border-radius:20px; background:linear-gradient(135deg, rgba(79,140,255,.14), rgba(55,211,153,.14));
  border:1px dashed rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; flex:0 0 auto;
}
.avatar-space span{font-size:10.5px; color:var(--muted); line-height:1.35; font-weight:700}
.testimonial-top strong{display:block; font-size:15px; margin-bottom:4px}
.testimonial-top small{color:var(--muted); font-size:12px}
.testimonial-card blockquote{margin:0; padding-top:10px; color:var(--text); line-height:1.8; font-size:16px; opacity:.92}

/* ===== FAQ ===== */
details{
  background: linear-gradient(180deg, var(--card), var(--card2)); border:1px solid var(--line); border-radius: 16px;
  padding: 14px 14px; box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
details + details{margin-top:10px}
summary{cursor:pointer; font-weight:900}
summary::-webkit-details-marker{display:none}
.ans{color:var(--muted); line-height:1.7; margin-top:10px}

/* ===== Newsletter ===== */
.newsletter-box{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background: linear-gradient(90deg, rgba(79,140,255,.14), rgba(55,211,153,.10));
  border:1px solid var(--line); border-radius: var(--r); padding:22px; box-shadow: var(--shadow);
}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap}
.newsletter-form input[type=email]{
  padding:12px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(0,0,0,.22); color:var(--text);
  min-width:240px; font-size:14px;
}
.newsletter-form input::placeholder{color:var(--muted)}
.newsletter-note{font-size:12px; color:var(--muted); margin-top:8px}
.newsletter-ok{display:none; color:var(--secondary); font-weight:800; margin-top:8px}
.candidatura-ok{display:none; color:var(--secondary); font-weight:800; margin-top:12px}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media (max-width:640px){.form-grid-2{grid-template-columns:1fr}}

/* ===== Final CTA ===== */
.final{padding:46px 0 70px}
.finalBox{
  background: linear-gradient(90deg, rgba(79,140,255,.16), rgba(55,211,153,.12));
  border:1px solid rgba(255,255,255,.16); border-radius: var(--r); padding:22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; box-shadow: 0 18px 56px rgba(0,0,0,.35);
}

/* ===== Footer ===== */
footer.site-footer{border-top:1px solid var(--line); padding:46px 0 20px; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns: 1.3fr .9fr .9fr 1fr; gap:24px; padding-bottom:26px}
.footer-grid h4{color:var(--text); font-size:14px; margin:0 0 12px; letter-spacing:.02em}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.footer-grid a{text-decoration:none; color:var(--muted); font-size:13.5px}
.footer-grid a:hover{color:var(--text)}
.footer-brand p{color:var(--muted); font-size:13.5px; line-height:1.6; max-width:38ch}
.social-row{display:flex; gap:10px; margin-top:14px}
.social-row a{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:transform .2s ease, border-color .2s ease;
}
.social-row a:hover{transform:translateY(-2px); border-color:rgba(79,140,255,.4)}
.foot-legal{border-top:1px solid var(--line); padding-top:16px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px}
code{background:rgba(255,255,255,.08); padding:2px 6px; border-radius:8px; border:1px solid var(--line)}

/* ===== Forms (contacto) ===== */
.form-card{max-width:640px}
.form-row{margin:0 0 14px}
.form-row label{display:block; font-weight:800; font-size:13px; margin-bottom:6px}
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,.22); color:var(--text); font-size:14px; font-family:inherit;
}
.form-row input::placeholder, .form-row textarea::placeholder{color:var(--muted)}
.contact-info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px}
.contact-info-grid .card{text-align:left}

/* ===== Course single page (banner, preço, currículo, cross-sell) ===== */
.course-hero{
  position:relative; padding:60px 0 40px; overflow:hidden;
  border-bottom:1px solid var(--line);
  background-color:#0b1530;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.course-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(7,15,34,.55) 0%, rgba(7,15,34,.94) 100%);
  pointer-events:none;
}
.course-hero .wrap{position:relative; z-index:1}
.course-hero .breadcrumb{font-size:12.5px; color:var(--muted); margin-bottom:10px}
.course-hero .breadcrumb a{color:var(--muted); text-decoration:none}
.course-hero .breadcrumb a:hover{color:var(--text)}
.course-layout{display:grid; grid-template-columns: 1.3fr .9fr; gap:22px; align-items:start}

.price-box{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border:1px solid var(--line); border-radius: var(--r); padding:22px;
  box-shadow: var(--shadow); backdrop-filter: blur(10px);
}
.price-box .label{font-size:11.5px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.05em}
.price-box .amount{font-size:32px; font-weight:950; color:var(--text); letter-spacing:-.02em; margin:6px 0 2px}
.price-box .amount small{display:block; font-size:11.5px; color:var(--accent); font-weight:800; text-transform:none; letter-spacing:0; margin-top:4px}
.price-box .installment{color:var(--muted); font-size:13px; margin-bottom:14px}
.price-box .btn{margin-top:6px}
.price-box .meta-list{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.price-box .meta-list li{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted)}

.curriculum{position:relative; margin:10px 0 0; padding-left:0; list-style:none; display:grid; gap:10px}
.curriculum::before{
  content:''; position:absolute; left:29px; top:17px; bottom:17px; width:2px; z-index:0;
  background:linear-gradient(180deg, var(--course-accent, var(--secondary)), transparent);
  opacity:.45;
}
.curriculum li{
  position:relative; z-index:1;
  display:flex; gap:10px; align-items:flex-start;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:10px 12px;
}
.curriculum li .dot{
  margin-top:0; width:34px; height:34px; font-size:12px; font-weight:900; letter-spacing:0;
  background:rgba(var(--course-accent-rgb,55,211,153),.14);
  border:1px solid rgba(var(--course-accent-rgb,55,211,153),.4);
  color:var(--course-accent, var(--secondary));
}

.crosssell-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.crosssell-grid .card{display:flex; flex-direction:column; gap:6px}
.crosssell-grid .price{font-weight:900; color:var(--accent); font-size:13.5px}

/* ===== Blog ===== */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.post-card .meta{font-size:12px; color:var(--muted); margin-top:2px}
.post-card .excerpt{margin-top:8px}

/* ===== 404 ===== */
.notfound{ min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:60px 18px }
.notfound .code{font-size:clamp(60px,10vw,110px); font-weight:950; letter-spacing:-.04em; background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ===== Responsive ===== */
@media (max-width: 1080px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:20px}
  .corp-grid, .course-grid, .post-grid{grid-template-columns:repeat(2,1fr)}
  .contact-info-grid{grid-template-columns:1fr}
}
@media (max-width: 992px){
  .logo-img{height:42px; max-width:180px}
  .menu, .nav-actions .btn.ghost{display:none}
  .nav-toggle{display:flex; align-items:center; justify-content:center}
  .testimonial-card{min-width:86vw; max-width:86vw}
  .course-carousel{gap:8px}
  .carousel-btn{display:none}
  .course-slide{min-width:86vw; max-width:86vw}
  .grid, .community-grid, .lab-grid, .course-layout{grid-template-columns:1fr}
  .heroCard{min-height:280px}
  .tri, .two, .quotes, .pillars, .corp-grid, .course-grid, .post-grid, .crosssell-grid{grid-template-columns:1fr}
  .event{flex-direction:column; align-items:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .footer-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
}

/* Mobile drawer menu */
body.menu-open .mobile-drawer{transform:translateX(0)}
.mobile-drawer{
  position:fixed; inset:0 0 0 auto; width:min(320px,86vw); height:100vh; z-index:200;
  background:linear-gradient(180deg, #0b1530, #070f22); border-left:1px solid var(--line);
  transform:translateX(100%); transition:.25s ease; padding:20px; overflow-y:auto;
}
.mobile-drawer .close-drawer{background:none; border:1px solid var(--line); color:var(--text); width:36px; height:36px; border-radius:10px; font-size:16px; cursor:pointer}
.mobile-drawer nav{display:flex; flex-direction:column; gap:4px; margin-top:18px}
.mobile-drawer a{display:block; padding:12px 10px; border-radius:10px; text-decoration:none; color:var(--text); font-weight:800; border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-drawer .mega-mobile{padding-left:14px}
.mobile-drawer .mega-mobile a{font-weight:600; font-size:13.5px; color:var(--muted); border-bottom:none; padding:8px 10px}
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:190; opacity:0; visibility:hidden; transition:.25s}
body.menu-open .backdrop{opacity:1; visibility:visible}