/* Paleta alinhada à marca Cluster TI (logo azul/navy com a raposa poligonal).
   Os nomes das variáveis (--orange...) ficaram do rascunho inicial, mas os
   valores agora são os azuis oficiais — trocar aqui reflete em todo o site,
   inclusive nas subpáginas (Guia Docente, Guia do Estudante, Publicações),
   que reaproveitam essas mesmas variáveis. */
:root{
  --orange: #2563eb;
  --orange-dark: #1d4ed8;
  --orange-light: #93c5fd;
  --navy: #0b1f47;
  --navy-2: #142c5c;
  --ink: #1a1f2b;
  --ink-soft: #5a6274;
  --paper: #f7f7fb;
  --card: #ffffff;
  --border: #e2e8f5;
  --header-bg: rgba(247,247,251,.85);
  --shadow: 0 10px 30px -12px rgba(11,31,71,.18);
  --shadow-hover: 0 20px 45px -14px rgba(37,99,235,.35);
  --radius: 16px;
  --maxw: 1120px;
  --ig-gradient: linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --orange: #5b9dff;
    --orange-dark: #86b9ff;
    --orange-light: #93c5fd;
    --navy: #eef4ff;
    --navy-2: #d7e3fa;
    --ink: #eceaf5;
    --ink-soft: #a4a2b8;
    --paper: #10131e;
    --card: #1a1e2c;
    --border: #2a2f42;
    --header-bg: rgba(16,19,30,.85);
    --shadow: 0 10px 30px -12px rgba(0,0,0,.5);
    --shadow-hover: 0 20px 45px -14px rgba(91,157,255,.3);
  }
}
:root[data-theme="dark"]{
  --orange: #5b9dff;
  --orange-dark: #86b9ff;
  --orange-light: #93c5fd;
  --navy: #eef4ff;
  --navy-2: #d7e3fa;
  --ink: #eceaf5;
  --ink-soft: #a4a2b8;
  --paper: #10131e;
  --card: #1a1e2c;
  --border: #2a2f42;
  --header-bg: rgba(16,19,30,.85);
  --shadow: 0 10px 30px -12px rgba(0,0,0,.5);
  --shadow-hover: 0 20px 45px -14px rgba(91,157,255,.3);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.bg-decor{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(600px 400px at 85% -5%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(500px 350px at -5% 15%, rgba(19,26,43,.08), transparent 60%);
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.02rem}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  color:#fff;font-weight:800;font-size:.85rem;letter-spacing:.02em;
  box-shadow:0 6px 16px -4px rgba(37,99,235,.5);
}
.brand-text em{font-style:normal;color:var(--orange-dark)}
.nav{display:flex;gap:28px}
.nav a{font-weight:500;font-size:.94rem;color:var(--ink-soft);transition:color .2s}
.nav a:hover{color:var(--orange-dark)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px}

/* Hero */
.hero{padding:96px 0 72px}
.hero-inner{max-width:760px}
.eyebrow{
  color:var(--orange-dark);font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;
}
.hero h1{
  font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.12;letter-spacing:-.02em;
  margin:0 0 20px;font-weight:800;color:var(--navy);
}
.hero-lede{font-size:1.08rem;line-height:1.65;color:var(--ink-soft);margin:0 0 32px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:.95rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 24px -8px rgba(37,99,235,.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(37,99,235,.65)}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--border)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--orange)}

/* Sections */
.section{padding:64px 0;scroll-margin-top:88px}
.section-alt{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-title{font-size:1.6rem;font-weight:800;color:var(--navy);margin:0 0 8px;letter-spacing:-.01em}
.section-sub{color:var(--ink-soft);margin:0 0 32px;font-size:.98rem}

.grid{display:grid;gap:20px}
.grid-cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid-courses{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* Generic card */
.card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 24px;
  box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  padding:1px;
  background:linear-gradient(135deg,var(--orange),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .28s ease;
  pointer-events:none;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:transparent}
.card:hover::before{opacity:1}

.card-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(37,99,235,.04));
  color:var(--orange-dark);margin-bottom:16px;font-size:1.25rem;
  transition:transform .28s ease, background .28s ease;
}
.card:hover .card-icon{transform:scale(1.08) rotate(-4deg)}
.card h3{margin:0 0 6px;font-size:1.05rem;font-weight:700;color:var(--navy)}
.card p{margin:0;color:var(--ink-soft);font-size:.88rem;line-height:1.5}
.card .card-arrow{
  position:absolute;top:22px;right:22px;color:var(--ink-soft);
  opacity:0;transform:translate(-4px,4px);transition:all .25s ease;
}
.card:hover .card-arrow{opacity:1;transform:translate(0,0);color:var(--orange-dark)}
.card .badge{
  display:inline-block;margin-top:12px;font-size:.72rem;font-weight:700;
  color:var(--orange-dark);background:rgba(37,99,235,.1);
  padding:4px 10px;border-radius:999px;letter-spacing:.02em;
}

/* Social cards (Instagram dos cursos + LinkedIn, na aba Redes Sociais) */
.social-card{text-align:center;padding:28px 18px}
.social-card .card-icon{
  margin:0 auto 14px;width:52px;height:52px;border-radius:14px;
  background:var(--ig-gradient);color:#fff;font-size:1.4rem;
}
.social-card h3{font-size:.96rem;margin-bottom:4px}
.social-card .handle{color:var(--ink-soft);font-size:.78rem}

.inline-link{color:var(--orange-dark);text-decoration:underline;text-decoration-color:rgba(37,99,235,.35);text-underline-offset:2px}
.inline-link:hover{text-decoration-color:var(--orange-dark)}

/* Social brand icons on cards (Instagram / LinkedIn) */
.card-icon svg{display:block}
.icon-linkedin{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:12px;background:#0a66c2;
}

/* Footer */
.site-footer{padding:40px 0;border-top:1px solid var(--border)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer-inner p{margin:0;color:var(--ink-soft);font-size:.85rem}
.footer-inner p:first-child{font-weight:700;color:var(--navy)}

/* Revista — página de leitura */
.revista-header{
  position:sticky;top:0;z-index:50;background:var(--header-bg);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.revista-header-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.revista-back{font-size:.82rem;color:var(--ink-soft);font-weight:500}
.revista-back:hover{color:var(--orange-dark)}

.revista-main{max-width:var(--maxw);margin:0 auto;padding:48px 24px 80px}
.revista-layout{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start}
.revista-cover{
  width:100%;border-radius:var(--radius);border:1px solid var(--border);
  box-shadow:var(--shadow);display:block;
}
.revista-meta{position:sticky;top:88px}
.revista-eyebrow{
  color:var(--orange-dark);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;
}
.revista-main h1{font-size:1.7rem;font-weight:800;color:var(--navy);margin:0 0 12px;letter-spacing:-.01em}
.revista-desc{color:var(--ink-soft);line-height:1.65;margin:0 0 24px}
.revista-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.revista-actions .btn{justify-content:center}
.revista-facts{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--border);font-size:.85rem;color:var(--ink-soft)}
.revista-facts li{display:flex;justify-content:space-between;gap:10px;padding:6px 0}
.revista-facts strong{color:var(--navy);font-weight:600}

.revista-viewer{
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  background:var(--card);box-shadow:var(--shadow);
}
.revista-viewer iframe{width:100%;height:78vh;border:0;display:block}
.revista-viewer-fallback{padding:32px;text-align:center;color:var(--ink-soft);font-size:.9rem}

/* Mobile */
@media (max-width:760px){
  .nav-toggle{display:flex}
  .nav{
    position:absolute;top:72px;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--border);
    flex-direction:column;padding:16px 24px;gap:18px;
    display:none;
  }
  .nav.open{display:flex}
  .hero{padding:56px 0 48px}
  .section{padding:48px 0}

  .revista-layout{grid-template-columns:1fr}
  .revista-meta{position:static}
  .revista-cover{max-width:220px;margin:0 auto 24px}
  .revista-viewer iframe{height:70vh}
}