/* ── DS TOKENS — identidade Tecnologia (verde padrão e-Plus) ────
   Conteúdos é um hub transversal (IA, Black Friday, Marketing, VTEX),
   por isso usa o verde geral da marca, não a cor de um produto específico.
   ──────────────────────────────────────────────────────────── */
.ep2 {
  --ep-green-lime:#96c02c; --ep-green-neon:#52bf42; --ep-green-mid:#43ab49;
  --ep-green-deep:#009d62; --ep-green-700:#00794b;
  --ep-gradient-brand:linear-gradient(90deg,#96c02c 0%,#43ab49 50%,#009d62 100%);
  --ep-gradient-diag:linear-gradient(135deg,#96c02c 0%,#43ab49 50%,#009d62 100%);
  --ep-lilac-500:#7572b9;
  --ep-bg:#0b0c07; --ep-bg-card:#1c1e16; --ep-bg-elevated:#15170f;
  --ep-border:rgba(255,255,255,0.08); --ep-border-strong:rgba(255,255,255,0.16);
  --ep-border-brand:rgba(82,191,66,0.3);
  --ep-text:#f6f7f5; --ep-text-muted:#a7a9a1; --ep-text-dim:#6b6d64;
  --ep-text-brand:#52bf42;
  --ep-font-sans:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  --ep-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --ep-r-sm:6px; --ep-r-md:10px; --ep-r-lg:16px; --ep-r-xl:24px; --ep-r-pill:999px;
  --ep-dur:240ms; --ep-ease:cubic-bezier(.2,.7,.2,1);
  --ep-glow-green:0 0 0 1px rgba(82,191,66,0.25),0 12px 32px rgba(82,191,66,0.25);
  --ep-shadow-card:0 20px 60px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.04) inset;
}

/* ── HEADER ──────────────────────────────────────────────────── */
#header { background:#fff !important; border-bottom:1px solid #e9ebe6 !important; box-shadow:0 2px 16px rgba(0,0,0,0.06) !important; }
#header #logo img { filter:none !important; }
#header #menu ul li a,#header #menu ul li a:visited { color:#15170f !important; }
#header #menu ul li a:hover { color:#43ab49 !important; }
#header #menu ul li.customBt a { background:linear-gradient(90deg,#96c02c,#43ab49 50%,#009d62) !important; background-size:220% 100% !important; color:#fff !important; border-radius:8px !important; padding:10px 20px !important; animation:eplusCtaFlow 7s ease-in-out infinite; }
@keyframes eplusCtaFlow { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
@media (prefers-reduced-motion: reduce) { #header #menu ul li.customBt a { animation:none !important; background-position:0% 50% !important; } }
#header #address a,#header #flags a { color:#373a34 !important; }
#header #mobMenuBt { color:#15170f !important; }

/* ── SECTION LIGHT ───────────────────────────────────────────── */
.ep2 .section-light {
  background:#f6f7f5 !important;
  --ep-bg-card:#fff; --ep-border:rgba(0,0,0,0.08);
  --ep-border-brand:rgba(67,171,73,0.4);
  --ep-text:#15170f; --ep-text-muted:#4a4d47; --ep-text-dim:#8b8f87;
}
.ep2 .section-light h2,.ep2 .section-light h3,.ep2 .section-light h4 { color:#15170f; }

/* ── RESET ───────────────────────────────────────────────────── */
.ep2 *,.ep2 *::before,.ep2 *::after { box-sizing:border-box; }
.ep2 { font-family:var(--ep-font-sans); color:var(--ep-text); background:var(--ep-bg); -webkit-font-smoothing:antialiased; float:left; width:100%; animation:ep2-page-fade .7s var(--ep-ease) both; }
.ep2 a { color:inherit; text-decoration:none; }
.ep2 img,.ep2 svg { display:block; max-width:100%; }
.ep2 ul { list-style:none; padding:0; margin:0; }

/* ── KEYFRAMES ───────────────────────────────────────────────── */
@keyframes ep2-page-fade { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes hero-up   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ── REVEAL ──────────────────────────────────────────────────── */
.ep2 .reveal { opacity:1; transform:none; }
.ep2 .reveal.will-animate { opacity:0; transform:translateY(22px); transition:opacity .55s var(--ep-ease),transform .55s var(--ep-ease); }
.ep2 .reveal.will-animate.is-visible { opacity:1; transform:none; }
.ep2 .reveal-d1.will-animate{transition-delay:.05s} .ep2 .reveal-d2.will-animate{transition-delay:.1s}
.ep2 .reveal-d3.will-animate{transition-delay:.15s} .ep2 .reveal-d4.will-animate{transition-delay:.2s}

/* ── UTILITÁRIOS ─────────────────────────────────────────────── */
.ep2 .ep-eyebrow { display:inline-block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--ep-text-brand); }
.ep2 .ep-container { width:100%; max-width:1280px; margin:0 auto; padding:0 40px; }

/* ── BOTÕES ──────────────────────────────────────────────────── */
.ep2 .ep-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 24px; font:600 .8125rem/1 var(--ep-font-sans); letter-spacing:.07em; text-transform:uppercase; border-radius:var(--ep-r-pill); border:1px solid transparent; cursor:pointer; transition:transform var(--ep-dur) var(--ep-ease),box-shadow var(--ep-dur) var(--ep-ease); white-space:nowrap; }
.ep2 .ep-btn:hover { transform:translateY(-1px); }
.ep2 .ep-btn--primary { background:var(--ep-gradient-brand); color:#0b0c07; box-shadow:var(--ep-glow-green); font-weight:700; }
.ep2 .ep-btn--primary:hover { box-shadow:0 0 0 1px rgba(82,191,66,.6),0 16px 40px rgba(82,191,66,.4); }
.ep2 .ep-btn--ghost { background:rgba(255,255,255,.06); border-color:var(--ep-border-strong); color:var(--ep-text); }
.ep2 .ep-btn--ghost:hover { background:rgba(255,255,255,.1); }
.ep2 .ep-btn--lg { padding:18px 32px; font-size:.9375rem; }

/* ══════════════════════════════════════════════════════════════
   §1 ABERTURA — declaração editorial da proposta do hub de conteúdos
   ══════════════════════════════════════════════════════════════ */
.ep2 .cn-intro {
  position:relative; overflow:hidden; padding:96px 0 72px;
  background:
    linear-gradient(rgba(150,192,44,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,192,44,.09) 1px, transparent 1px),
    linear-gradient(120deg, #13220e 0%, #0e1a0a 50%, #0d1309 100%);
  background-size:40px 40px, 40px 40px, auto;
}
.ep2 .cn-intro h1 {
  font-size:clamp(2.4rem,5vw,4.2rem); font-weight:800; letter-spacing:-.035em;
  line-height:1.03; margin:18px 0 22px; text-wrap:balance; max-width:780px;
  animation:hero-up .6s var(--ep-ease) .1s both;
}
.ep2 .cn-intro-sub {
  font-size:1.125rem; line-height:1.65; color:var(--ep-text-muted);
  max-width:600px; margin:0; text-wrap:pretty;
  animation:hero-up .6s var(--ep-ease) .2s both;
}

/* ══════════════════════════════════════════════════════════════
   §2 ÍNDICE — filtro por tema, sticky enquanto a grade estiver na tela
   ══════════════════════════════════════════════════════════════ */
.ep2 .cn-index-wrap { position:relative; }

.ep2 .cn-index {
  position:sticky; top:0; z-index:20;
  background:
    linear-gradient(rgba(150,192,44,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,192,44,.09) 1px, transparent 1px),
    linear-gradient(120deg, #13220e 0%, #0e1a0a 50%, #0d1309 100%);
  background-size:40px 40px, 40px 40px, auto;
  border-bottom:1px solid rgba(82,191,66,.1);
  padding:16px 0;
}
.ep2 .cn-index-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.ep2 .cn-index-label { font-family:var(--ep-font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ep-text-dim); margin-right:2px; }

.ep2 .cn-chip {
  display:inline-flex; align-items:center; gap:9px;
  font:700 .72rem/1 var(--ep-font-mono); letter-spacing:.04em; text-transform:uppercase;
  padding:10px 16px 10px 14px; border-radius:var(--ep-r-sm);
  border:1px solid var(--ep-border-strong); background:rgba(255,255,255,.03);
  color:var(--ep-text-muted); cursor:pointer; transition:all var(--ep-dur) var(--ep-ease);
}
.ep2 .cn-chip::before {
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  border:1.5px solid var(--ep-text-dim); background:transparent;
  transition:all var(--ep-dur) var(--ep-ease);
}
.ep2 .cn-chip:hover { border-color:rgba(82,191,66,.5); color:var(--ep-text); background:rgba(255,255,255,.06); }
.ep2 .cn-chip[aria-pressed="true"] { border-color:var(--ep-text-brand); color:var(--ep-text); background:rgba(82,191,66,.12); }
.ep2 .cn-chip[aria-pressed="true"]::before { background:var(--ep-text-brand); border-color:var(--ep-text-brand); }

.ep2 .cn-index-count { margin-left:auto; font-family:var(--ep-font-mono); font-size:.78rem; color:var(--ep-text-dim); }
.ep2 .cn-index-count strong { color:var(--ep-text); }

/* ══════════════════════════════════════════════════════════════
   §3 GRADE — cards de e-books, sem depender de fotos em baixa resolução
   ══════════════════════════════════════════════════════════════ */
.ep2 .cn-grid { padding:64px 0 88px; }
.ep2 .cn-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

.ep2 .cn-card {
  display:flex; flex-direction:column; background:var(--ep-bg-card);
  border:1px solid var(--ep-border); border-radius:var(--ep-r-lg); overflow:hidden;
  transition:transform var(--ep-dur) var(--ep-ease),box-shadow var(--ep-dur) var(--ep-ease),border-color var(--ep-dur) var(--ep-ease);
}
.ep2 .cn-card.is-hidden { display:none; }
.ep2 .cn-card:hover { transform:translateY(-4px); border-color:var(--ep-border-brand); box-shadow:var(--ep-shadow-card); }

.ep2 .cn-card-cover {
  position:relative; aspect-ratio:16/10; flex:none;
  background:
    linear-gradient(rgba(150,192,44,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,192,44,.14) 1px, transparent 1px),
    linear-gradient(135deg, #17200f 0%, #0f1a0c 100%);
  background-size:24px 24px, 24px 24px, auto;
  display:flex; align-items:center; justify-content:center;
}
.ep2 .cn-card-format {
  position:absolute; top:14px; left:14px;
  font:700 .64rem/1 var(--ep-font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ep-text-dim); background:rgba(11,12,7,.55); border:1px solid var(--ep-border);
  border-radius:var(--ep-r-sm); padding:5px 9px;
}
.ep2 .cn-card-icon { width:52px; height:52px; color:var(--ep-text-brand); opacity:.9; }
.ep2 .cn-card-icon svg { width:100%; height:100%; }
.ep2 .cn-card-vtex-badge { background:#f71963; border-radius:var(--ep-r-md); padding:12px 16px; display:flex; align-items:center; }
.ep2 .cn-card-vtex-badge img { height:20px; width:auto; }

.ep2 .cn-card-body { display:flex; flex-direction:column; flex:1; padding:22px 22px 24px; gap:12px; }
.ep2 .cn-card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.ep2 .cn-card-tags span { display:inline-flex; align-items:center; gap:5px; font:700 .64rem/1 var(--ep-font-sans); letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--ep-border); color:var(--ep-text-muted); }
.ep2 .cn-card-tags span::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ep-green-mid); }

.ep2 .cn-card-body h2 { font-size:1.1rem; font-weight:800; letter-spacing:-.01em; line-height:1.3; margin:0; text-wrap:balance; }
.ep2 .cn-card-body p { font-size:.875rem; line-height:1.6; color:var(--ep-text-muted); margin:0; flex:1; }

.ep2 .cn-card-cta { display:inline-flex; align-items:center; gap:8px; margin-top:4px; font:700 .78rem/1 var(--ep-font-sans); letter-spacing:.03em; text-transform:uppercase; color:var(--ep-text); }
.ep2 .cn-card-cta svg { width:14px; height:14px; transition:transform var(--ep-dur) var(--ep-ease); }
.ep2 .cn-card:hover .cn-card-cta svg { transform:translate(2px,-2px); }

.ep2 .cn-empty { display:none; padding:70px 0; text-align:center; color:var(--ep-text-muted); }
.ep2 .cn-empty.is-visible { display:block; }

/* ══════════════════════════════════════════════════════════════
   §4 CTA FINAL — para quem não achou o material ideal
   ══════════════════════════════════════════════════════════════ */
.ep2 .cn-cta { background:#070d03; padding:96px 0; }
.ep2 .cn-cta-box { max-width:680px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
.ep2 .cn-cta-box h2 { font:800 clamp(2rem,4.5vw,3.25rem)/1.05 var(--ep-font-sans); letter-spacing:-.03em; margin:12px 0; }
.ep2 .cn-cta-box p { font:1rem/1.65 var(--ep-font-sans); color:var(--ep-text-muted); max-width:480px; }
.ep2 .cn-cta-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .ep2 .cn-cards { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .ep2 .ep-container { padding:0 20px; }
  .ep2 .cn-cards { grid-template-columns:1fr; }
  .ep2 .cn-index-count { margin-left:0; width:100%; }
  .ep2 .cn-intro { padding:64px 0 48px; }
  .ep2 .cn-cta { padding:64px 0; }
}