/* ============================================================
   OPROFNED — Camada de redesign (Material You / pastel claro)
   Carregada DEPOIS de theme.css. NÃO edita o tema (390 KB).
   Etapa atual: TOKENS + PONTE + FONTE INTER (sem polish ainda).

   Nota técnica: o theme.css usa valores LITERAIS (não variáveis
   --bs-*), então a ponte mapeia os tokens --op-* diretamente
   sobre os seletores reais do tema, com !important onde o tema usa.
   ============================================================ */

/* ---------- 1. TOKENS (fonte única de verdade) ---------- */
:root {
  /* superfícies */
  --op-bg:          #F4F5FB; /* off-white levemente azulado — nunca branco puro */
  --op-surface:     #FFFFFF; /* cards de leitura / áreas calmas */
  --op-text:        #23302A; /* verde-grafite escuro (não preto puro) */
  --op-text-soft:   #5A6B62; /* texto secundário */

  /* marca */
  --op-brand:       #1D9E75; /* verde de marca — lidera os cards vivos */
  --op-brand-deep:  #0F6E56; /* hover / rodapé / texto sobre verde */
  --op-amber:       #E8A13A; /* CTAs de download */
  --op-amber-deep:  #B9791F;

  /* acentos dos cards VIVOS (Skydash) */
  --op-indigo:      #4655C4;
  --op-coral:       #D96A86;
  --op-petrol:      #3D9BB5;
  --op-purple:      #7A6BC4;

  /* pastéis de recurso (uso na etapa de polish) */
  --op-mint:        #E1F5EE;  --op-mint-ink:  #0F6E56;
  --op-sky:         #E6F1FB;  --op-sky-ink:   #1B4D7A;
  --op-cream:       #FAEEDA;  --op-cream-ink: #8A5A12;
  --op-lilac:       #ECE7FA;  --op-lilac-ink: #5B3FA8;
  --op-rose:        #FBE7F0;  --op-rose-ink:  #A8326F;

  /* forma e profundidade (uso na etapa de polish) */
  --op-radius-card: 22px;
  --op-radius-pill: 999px;
  --op-shadow-soft:  0 6px 20px rgba(20, 40, 30, 0.06);
  --op-shadow-brand: 0 8px 18px rgba(29, 158, 117, 0.25);

  /* tipografia */
  --op-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- 2. PONTE: tokens -> seletores reais do tema ---------- */

/* fundo + cor de texto da página (nunca branco puro) */
body {
  background-color: var(--op-bg);
  color: var(--op-text);
  font-family: var(--op-font);
}

/* Inter em toda a tipografia (corpo e títulos, variando só o peso) */
body, h1, h2, h3, h4, h5, h6,
.navbar, .btn, .nav-link, .font-sans-serif, .font-base {
  font-family: var(--op-font);
}
h1, h2, h3, h4, h5, h6 { color: var(--op-text); font-weight: 700; }

/* faixas de marca (barra social topo + copyright) -> verde */
.bg-primary { background-color: var(--op-brand) !important; }

/* rodapé principal -> verde-escuro calmo (ancora a página) */
.bg-secondary { background-color: var(--op-brand-deep) !important; }

/* hero cinza do d-diariodeclasse e afins -> off-white do fundo
   (mantém o overlap -21.5rem coerente, sem tocar no inline) */
.bg-600 { background-color: var(--op-bg) !important; }

/* CTAs de download (btn-danger no tema) -> âmbar */
.btn-danger {
  background-color: var(--op-amber);
  border-color: var(--op-amber);
  color: #ffffff;
}
.btn-danger:hover, .btn-danger:focus {
  background-color: var(--op-amber-deep);
  border-color: var(--op-amber-deep);
}

/* CTAs de marca -> verde */
.btn-primary {
  background-color: var(--op-brand);
  border-color: var(--op-brand);
  color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--op-brand-deep);
  border-color: var(--op-brand-deep);
}

/* acentos de texto de marca (theme: text-primary amarelo) -> verde */
.text-primary { color: var(--op-brand) !important; }

/* ---------- 3. POLISH (cards flutuantes, pílula, sombras, pastéis) ---------- */

/* Cards brancos "flutuando" sobre o fundo: cantos arredondados,
   sombra muito leve, sem borda dura. (bg-secondary do destaque1
   tem !important e continua verde — só ganha forma/sombra.) */
.card {
  background-color: var(--op-surface);
  border: 0;
  border-radius: var(--op-radius-card);
  box-shadow: var(--op-shadow-soft);
  overflow: hidden; /* faz a imagem do topo respeitar o raio */
}
.card-img-top { border-radius: 0; }

/* Botões em pílula com sombra colorida sutil */
.btn {
  border-radius: var(--op-radius-pill);
  font-weight: 600;
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}
.btn-primary { box-shadow: var(--op-shadow-brand); }
.btn-danger  { box-shadow: 0 8px 18px rgba(232, 161, 58, 0.28); }
.btn-primary:hover, .btn-danger:hover { box-shadow: none; }

/* Selos/badges arredondados (pílula) */
.badge { border-radius: var(--op-radius-pill); }

/* Navbar: superfície clara com leve separação (sticky já vem do tema) */
.navbar {
  background-color: var(--op-surface);
  box-shadow: 0 2px 12px rgba(20, 40, 30, 0.05);
}

/* ----- Cards de recurso em pastéis suaves (texto = tinta escura da família) -----
   Aplicados via classe no markup do componente (topcourses.php). */
.op-card-mint  { background-color: var(--op-mint)  !important; }
.op-card-sky   { background-color: var(--op-sky)   !important; }
.op-card-cream { background-color: var(--op-cream) !important; }

.op-card-mint  .card-body, .op-card-mint  h1, .op-card-mint  h2, .op-card-mint  h3,
.op-card-mint  h4, .op-card-mint  h5, .op-card-mint  h6, .op-card-mint  p, .op-card-mint  a {
  color: var(--op-mint-ink) !important;
}
.op-card-sky   .card-body, .op-card-sky   h1, .op-card-sky   h2, .op-card-sky   h3,
.op-card-sky   h4, .op-card-sky   h5, .op-card-sky   h6, .op-card-sky   p, .op-card-sky   a {
  color: var(--op-sky-ink) !important;
}
.op-card-cream .card-body, .op-card-cream h1, .op-card-cream h2, .op-card-cream h3,
.op-card-cream h4, .op-card-cream h5, .op-card-cream h6, .op-card-cream p, .op-card-cream a {
  color: var(--op-cream-ink) !important;
}

/* ============================================================
   4. LAYOUT NOVO — mobile-first (header + Molde A da home)
   Classes próprias (op-*) para reduzir dependência do tema e
   facilitar a remoção futura do theme.css (Rota 2).
   ============================================================ */

.op-container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
/* RITMO DE ESPAÇAMENTO ÚNICO (simetria do site):
   .op-section = espaço padrão entre blocos; .op-section--flush = seção que
   segue logo abaixo de outra (hero/seção), sem dobrar o respiro do topo. */
.op-section   { padding: 44px 0; }
.op-section--flush { padding-top: 8px; }
.op-eyebrow   { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .08em;
                text-transform: uppercase; color: var(--op-brand-deep); margin-bottom: 12px; }
.op-section h2 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 14px; }
.op-lead { font-size: 1.05rem; line-height: 1.6; color: var(--op-text-soft); }

/* ---------- Botões (alvos >=48px, pílula) ---------- */
.op-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: 13px 24px; border-radius: var(--op-radius-pill);
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.op-btn-amber { background: var(--op-amber); color: #fff; box-shadow: 0 8px 18px rgba(232,161,58,.28); }
.op-btn-amber:hover { background: var(--op-amber-deep); color: #fff; box-shadow: none; }
.op-btn-green { background: var(--op-brand); color: #fff; box-shadow: var(--op-shadow-brand); }
.op-btn-green:hover { background: var(--op-brand-deep); color: #fff; box-shadow: none; }
.op-btn-ghost { background: transparent; color: var(--op-brand-deep); border-color: var(--op-brand); }
.op-btn-ghost:hover { background: var(--op-mint); color: var(--op-brand-deep); }

/* ---------- Barra de contato (topbar) ---------- */
.op-topbar { background: var(--op-brand-deep); color: #e9f5ef; }
.op-topbar-inner { max-width: 1140px; margin: 0 auto; padding: 7px 20px;
  display: flex; align-items: center; justify-content: center; gap: 18px; }
.op-topbar-contact { color: #e9f5ef; text-decoration: none; font-size: .85rem; display: none; }
.op-topbar-contact i { margin-right: 6px; opacity: .85; }
.op-social { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.op-social a { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; color: #e9f5ef;
  background: rgba(255,255,255,.10); text-decoration: none; transition: background-color .15s ease; }
.op-social a:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- Header / navegação ---------- */
.op-header { position: sticky; top: 0; z-index: 1030; background: var(--op-surface);
  box-shadow: 0 2px 14px rgba(20,40,30,.06); }
.op-header-inner { max-width: 1140px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.op-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.op-logo-mark { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--op-brand), var(--op-brand-deep));
  color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.op-logo-text { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--op-text); }
.op-logo-accent { color: var(--op-brand); }

.op-nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; padding: 12px; }
.op-nav-toggle span { display: block; height: 2.5px; width: 100%; border-radius: 2px;
  background: var(--op-text); transition: transform .2s ease, opacity .2s ease; }
.op-nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.op-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.op-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* mobile: menu colapsado abaixo do header */
.op-nav { position: absolute; left: 0; right: 0; top: 100%;
  background: var(--op-surface); box-shadow: 0 12px 24px rgba(20,40,30,.10);
  padding: 8px 20px 20px; display: none; flex-direction: column; gap: 6px; }
.op-nav.is-open { display: flex; }
.op-nav-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.op-nav-link { display: flex; align-items: center; min-height: 48px; padding: 10px 8px;
  font-weight: 600; color: var(--op-text); text-decoration: none; border-radius: 12px; }
.op-nav-link:hover { background: var(--op-bg); color: var(--op-brand-deep); }
.op-nav-link.is-active { color: var(--op-brand-deep); }
.op-nav-link.is-active::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--op-brand); margin-right: 10px; }
.op-nav .op-btn { margin-top: 10px; width: 100%; }

/* ---------- Hero ---------- */
.op-hero { padding: 36px 0 8px; }
.op-hero-inner { display: flex; flex-direction: column; gap: 28px; }
.op-hero h1 { font-size: 2rem; line-height: 1.18; margin: 0 0 14px; letter-spacing: -.02em; }
.op-hero .op-lead { margin: 0 0 22px; }
.op-hero-ctas { display: flex; flex-direction: column; gap: 12px; }
.op-hero-ctas .op-btn { width: 100%; }

/* card "IA em ação" (substitui ilustração) */
.op-hero-card { background: var(--op-surface); border-radius: var(--op-radius-card);
  box-shadow: var(--op-shadow-soft); padding: 18px; }
.op-hero-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.op-hero-card-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--op-mint);
  color: var(--op-brand-deep); display: inline-flex; align-items: center; justify-content: center; }
.op-hero-card-title { font-weight: 700; color: var(--op-text); }
.op-hero-card-title small { display: block; font-weight: 500; font-size: .72rem; color: var(--op-text-soft); }
.op-hero-card-prompt { background: var(--op-bg); border-radius: 14px; padding: 12px 14px;
  font-size: .92rem; color: var(--op-text); margin-bottom: 12px; }
.op-hero-card-out { border: 1px dashed #d4e4dc; border-radius: 14px; padding: 14px; }
.op-hero-card-out p { margin: 10px 0 0; font-size: .9rem; color: var(--op-text-soft); }
.op-chip { display: inline-block; font-size: .72rem; font-weight: 700; padding: 4px 10px;
  border-radius: var(--op-radius-pill); }
.op-chip-mint { background: var(--op-mint); color: var(--op-mint-ink); }
.op-bar { height: 8px; border-radius: 999px; background: var(--op-bg); margin-top: 14px; overflow: hidden; }
.op-bar > span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--op-brand), var(--op-amber)); }

/* ---------- Barra de números (prova social — Skydash vivo) ---------- */
.op-stats { background: linear-gradient(135deg, var(--op-brand), var(--op-brand-deep));
  border-radius: 20px; box-shadow: 0 12px 26px rgba(29,158,117,.28); padding: 26px 16px;
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: 18px; }
.op-stat { text-align: center; flex: 1 1 28%; }
.op-stat-num { display: block; font-size: 2.2rem; font-weight: 800; color: #fff; line-height: 1; }
.op-stat-label { display: block; font-size: .82rem; color: #d8f3e7; margin-top: 8px; }
/* variante "fatos" (4 itens: ícone + texto) */
.op-stats--facts .op-stat { flex: 1 1 42%; }
.op-stats--facts .op-stat-num { font-size: 1.6rem; }
@media (min-width: 768px) { .op-stats--facts .op-stat { flex: 1 1 22%; } }

/* ---------- Cards-ferramenta VIVOS (Skydash) ----------
   Card sólido na cor + texto branco + ícone em quadrado translúcido
   + botão branco (texto na cor do card) + sombra colorida. */
.op-tools-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.op-vcard { --card-c: var(--op-brand); --card-sh: rgba(29,158,117,.30);
  background: var(--card-c); color: #fff; border-radius: 20px; padding: 24px;
  box-shadow: 0 10px 24px var(--card-sh);
  display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.op-vcard-ico { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.20);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 16px; }
/* Selo branco para ícones 3D — PADRÃO REUTILIZÁVEL.
   Destaca qualquer ícone 3D sobre qualquer cor de card.
   Uso: <span class="op-icon3d-badge"><img src="...3d.png" alt=""></span> */
.op-icon3d-badge { width: 88px; height: 88px; border-radius: 16px; background: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; padding: 12px;
  margin-bottom: 16px; box-shadow: 0 6px 16px rgba(20, 40, 30, 0.12); }
.op-icon3d-badge img { display: block; width: 64px; height: 64px; object-fit: contain; }
.op-vcard h3 { color: #fff; font-size: 1.2rem; margin: 0 0 8px; }
.op-vcard p  { color: rgba(255,255,255,.90); font-size: .95rem; line-height: 1.55; margin: 0 0 20px; }
.op-vcard-btn { margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--card-c); font-weight: 700; text-decoration: none;
  padding: 11px 18px; min-height: 44px; border-radius: var(--op-radius-pill); }
.op-vcard-btn i { transition: transform .15s ease; }
.op-vcard-btn:hover { color: var(--card-c); }
.op-vcard-btn:hover i { transform: translateX(4px); }

.op-vivid-green  { --card-c: #1D9E75; --card-sh: rgba(29,158,117,.30); }
.op-vivid-indigo { --card-c: #4655C4; --card-sh: rgba(70,85,196,.30); }
.op-vivid-amber  { --card-c: #D08A28; --card-sh: rgba(208,138,40,.32); }
.op-vivid-petrol { --card-c: #3D9BB5; --card-sh: rgba(61,155,181,.30); }
.op-vivid-purple { --card-c: #7A6BC4; --card-sh: rgba(122,107,196,.30); }
.op-vivid-coral  { --card-c: #D96A86; --card-sh: rgba(217,106,134,.30); }

/* (Capas pastel antigas substituídas pelos cards vivos .op-vcard acima.) */

/* ---------- Molde B: página de ferramenta/download ---------- */
.op-breadcrumb { font-size: .85rem; color: var(--op-text-soft); padding-top: 18px; }
.op-breadcrumb a { color: var(--op-text-soft); text-decoration: none; }
.op-breadcrumb a:hover { color: var(--op-brand-deep); }
.op-breadcrumb .sep { margin: 0 8px; opacity: .55; }

.op-toolhero { padding: 10px 0 6px; }
.op-toolhero .op-eyebrow { margin-bottom: 8px; }
.op-toolhero h1 { font-size: 1.9rem; line-height: 1.2; margin: 6px 0 14px; letter-spacing: -.01em; }
.op-toolhero .op-lead { margin: 0 0 22px; }
@media (min-width: 768px) { .op-toolhero h1 { font-size: 2.4rem; } }

.op-seals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.op-seal { display: inline-flex; align-items: center; gap: 8px; background: var(--op-surface);
  border: 1px solid #e4ebe7; border-radius: var(--op-radius-pill); padding: 8px 14px;
  font-size: .85rem; font-weight: 600; color: var(--op-text); box-shadow: var(--op-shadow-soft); }
.op-seal i { color: var(--op-brand); }

.op-readbox { background: var(--op-surface); border-radius: var(--op-radius-card);
  box-shadow: var(--op-shadow-soft); padding: 24px; }
.op-readbox h2 { font-size: 1.3rem; margin: 0 0 12px; }
.op-readbox h3 { font-size: 1.1rem; margin: 20px 0 10px; }
.op-readbox p  { line-height: 1.6; margin: 0 0 12px; color: var(--op-text); }
.op-readbox ul { list-style: none; padding: 0; margin: 10px 0 0; }
.op-readbox li { display: flex; gap: 10px; padding: 7px 0; line-height: 1.5; }
.op-readbox li i { color: var(--op-brand); margin-top: 4px; }

/* ---------- Trilha vertical (jornada de paradas numeradas) ---------- */
.op-trail { list-style: none; margin: 8px 0 0; padding: 0; }
.op-trail-step { position: relative; display: flex; gap: 16px; padding-bottom: 26px; }
/* linha conectora (border-left no marcador) */
.op-trail-step::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: -4px;
  width: 2px; background: #9FE1CB; }
.op-trail-step:last-child::before { display: none; } /* bônus não conecta depois */
.op-trail-mark { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--op-brand); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 1rem; position: relative; z-index: 1; }
.op-trail-mark--bonus { background: var(--op-amber); }
.op-trail-body { padding-top: 5px; }
.op-trail-body h3 { font-size: 1.05rem; margin: 0 0 4px; color: var(--op-text); }
.op-trail-body p { margin: 0; color: var(--op-text-soft); line-height: 1.5; }

/* ---------- Molde C: página de autoridade (O Projeto) ---------- */
.op-herocenter { text-align: center; max-width: 760px; margin: 0 auto; }
.op-herocenter h1 { font-size: 1.9rem; line-height: 1.22; margin: 8px 0 14px; }
@media (min-width: 768px) { .op-herocenter h1 { font-size: 2.4rem; } }

.op-founder { background: var(--op-surface); border-radius: var(--op-radius-card);
  box-shadow: var(--op-shadow-soft); padding: 24px; display: flex; flex-direction: column;
  gap: 16px; align-items: center; text-align: center; }
.op-founder-avatar { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 50%;
  background: linear-gradient(135deg, var(--op-brand), var(--op-brand-deep)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem; }
.op-founder h3 { margin: 0 0 2px; font-size: 1.25rem; }
.op-founder .op-role { color: var(--op-brand-deep); font-weight: 700; font-size: .9rem; }
.op-founder p { color: var(--op-text-soft); line-height: 1.6; margin: 8px 0 0; }
@media (min-width: 768px) { .op-founder { flex-direction: row; text-align: left; } }

/* ---------- Hub de Tutoriais: card de vídeo + embed ---------- */
/* Card de listagem (área calma): thumbnail YouTube + pill de categoria + título */
.op-videocard { background: var(--op-surface); border-radius: var(--op-radius-card);
  box-shadow: var(--op-shadow-soft); overflow: hidden; display: flex; flex-direction: column;
  height: 100%; text-decoration: none; color: var(--op-text); transition: box-shadow .15s ease, transform .15s ease; }
.op-videocard:hover { box-shadow: 0 12px 28px rgba(20,40,30,.12); transform: translateY(-2px); color: var(--op-text); }
.op-videocard-thumb { position: relative; aspect-ratio: 16 / 9; background: #0c2a20; overflow: hidden; }
.op-videocard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-videocard-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.op-videocard-play i { font-size: 3rem; color: #fff; opacity: .92; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.op-videocard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.op-videocard-body h3 { font-size: 1.02rem; line-height: 1.35; margin: 0; }

/* pill de categoria (pastéis reaproveitados) */
.op-cat { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px;
  font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: var(--op-radius-pill); }
.op-cat-plan  { background: var(--op-mint);  color: var(--op-mint-ink); }
.op-cat-aval  { background: var(--op-sky);   color: var(--op-sky-ink); }
.op-cat-ia    { background: var(--op-cream); color: var(--op-cream-ink); }
.op-cat-google{ background: var(--op-lilac); color: var(--op-lilac-ink); }

/* cabeçalho de categoria na vitrine */
.op-cat-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.op-cat-head .op-icon3d-badge { width: 56px; height: 56px; margin: 0; }
.op-cat-head .op-icon3d-badge i { font-size: 1.5rem; color: var(--op-brand-deep); }
.op-cat-head h2 { margin: 0; font-size: 1.4rem; }

/* embed de vídeo responsivo 16:9 (página de contexto) */
.op-embed { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--op-radius-card);
  overflow: hidden; box-shadow: var(--op-shadow-soft); background: #0c2a20; }
.op-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* bloco de captura de material (ponto de entrada do funil) */
.op-capture { background: var(--op-cream); border: 1px solid #f0e2c8; border-radius: var(--op-radius-card);
  box-shadow: var(--op-shadow-soft); padding: 24px; text-align: center; }
.op-capture h2 { color: var(--op-cream-ink); margin: 0 0 8px; font-size: 1.25rem; }
.op-capture p { color: var(--op-cream-ink); margin: 0 0 16px; line-height: 1.5; }

/* seção "Do blog" */
.op-bloglink { display: flex; gap: 12px; align-items: flex-start; background: var(--op-surface);
  border-radius: var(--op-radius-card); box-shadow: var(--op-shadow-soft); padding: 16px 18px;
  text-decoration: none; color: var(--op-text); height: 100%; }
.op-bloglink:hover { color: var(--op-brand-deep); }
.op-bloglink i { color: var(--op-brand); margin-top: 3px; }
.op-bloglink span { font-weight: 600; line-height: 1.4; }

/* ---------- Faixa de autoridade ---------- */
.op-band { background: linear-gradient(135deg, var(--op-brand), var(--op-brand-deep)); color: #eafaf3; padding: 0; /* sobrescreve o "section { padding: 4rem }" do tema; espaçamento fica no -inner */ }
.op-band-inner { text-align: center; padding: 20px 0; max-width: 760px; margin: 0 auto; }
.op-band .op-eyebrow { color: #bdebd7; margin-bottom: 6px; }
.op-band h2 { color: #fff; font-size: 1.35rem; max-width: 720px; margin: 0 auto 8px; }
.op-band p { color: #d8f3e7; max-width: 620px; margin: 0 auto 14px; line-height: 1.45; font-size: .98rem; }
@media (min-width: 768px) { .op-band-inner { padding: 26px 0; } .op-band h2 { font-size: 1.55rem; } }

/* ---------- Bloco do curso (borda âmbar) ---------- */
.op-course { background: var(--op-surface); border: 2px solid var(--op-amber);
  border-radius: var(--op-radius-card); box-shadow: var(--op-shadow-soft); padding: 26px; }
.op-course-badge { display: inline-block; background: var(--op-cream); color: var(--op-cream-ink);
  font-weight: 700; font-size: .78rem; padding: 5px 12px; border-radius: var(--op-radius-pill); margin-bottom: 12px; }
.op-course h2 { font-size: 1.5rem; margin: 0 0 10px; }
.op-course-list { list-style: none; padding: 0; margin: 16px 0 22px; }
.op-course-list li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; line-height: 1.5; }
.op-course-list i { color: var(--op-brand); margin-top: 3px; }

/* ---------- Seção de inscrição (faixa ÍNDIGO compacta) ---------- */
/* Fundo índigo p/ destacar das faixas verdes (curso e rodapé) e criar hierarquia */
.op-signup { background: linear-gradient(135deg, var(--op-indigo), #363FA0); color: #eef0fb; padding: 0; /* sobrescreve o "section { padding: 4rem }" do tema; espaçamento fica no -inner */ }
.op-signup-inner { padding: 18px 0; text-align: center; max-width: 640px; margin: 0 auto; }
@media (min-width: 768px) { .op-signup-inner { padding: 22px 0; } }
.op-signup h2 { color: #fff; font-size: 1.3rem; margin: 0 0 4px; }
.op-signup-sub { color: #d6dbf6; margin: 0 0 14px; line-height: 1.45; }
/* CTA só botão (sem campo de e-mail fantasma): largo e centralizado, mobile-first */
.op-signup-cta { display: flex; justify-content: center; }
.op-signup-cta .op-btn { width: 100%; max-width: 360px; justify-content: center; min-height: 50px; font-size: 1.02rem; }
.op-signup-note { color: #c7cdf0; font-size: .8rem; margin: 10px 0 0; }
@media (min-width: 576px) {
  .op-signup-cta .op-btn { width: auto; padding-left: 40px; padding-right: 40px; }
}

/* ---------- Bloco de anúncios (contido e digno) ---------- */
.op-ads-wrap { background: var(--op-surface); border: 1px solid #e4ebe7;
  border-radius: var(--op-radius-card); box-shadow: var(--op-shadow-soft);
  padding: 22px 18px; max-width: 980px; margin: 0 auto; }
.op-ads-label { text-align: center; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--op-text-soft); margin: 0 0 16px; }
.op-ads-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.op-ad { background: var(--op-bg); border-radius: 14px; padding: 12px; min-height: 110px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.op-ad .adsbygoogle { width: 100%; }

/* ---------- Rodapé (Material You — verde profundo) ---------- */
.op-footer { background: var(--op-brand-deep); color: #cfece0; padding: 40px 0 26px; }
.op-footer-inner { display: flex; flex-direction: column; gap: 30px; }
.op-footer .op-logo-text { color: #fff; }
.op-footer .op-logo-accent { color: var(--op-amber); }
.op-footer .op-logo-mark { background: rgba(255,255,255,.16); color: #fff; }
.op-footer-brand p { color: #bfe7d7; line-height: 1.6; margin: 14px 0 16px; max-width: 340px; }
.op-footer-col h4 { color: #fff; font-size: 1rem; margin: 0 0 8px; }
.op-footer-col ul { list-style: none; padding: 0; margin: 0; }
.op-footer-col li { display: flex; }
.op-footer-col a { color: #cfece0; text-decoration: none; display: inline-flex; align-items: center;
  gap: 8px; min-height: 44px; }
.op-footer-col a:hover { color: #fff; }
.op-footer-col a i { width: 18px; opacity: .8; }
.op-footer .op-social { margin-top: 4px; }

.op-footer-bottom { background: rgba(0,0,0,.16); color: #bfe7d7; }
.op-footer-bottom-inner { display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 16px 20px; font-size: .85rem; }
.op-footer-bottom a { color: #cfece0; text-decoration: none; }
.op-footer-bottom a:hover { color: #fff; }

@media (min-width: 768px) {
  .op-footer-inner { flex-direction: row; justify-content: space-between; gap: 44px; }
  .op-footer-brand { flex: 1 1 38%; }
  .op-footer-bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ============================================================
   5. BREAKPOINTS — expansão para tablet/desktop
   ============================================================ */
@media (min-width: 576px) {
  .op-topbar-inner { justify-content: space-between; }
  .op-topbar-contact { display: inline-flex; align-items: center; }
  .op-hero-ctas { flex-direction: row; }
  .op-hero-ctas .op-btn { width: auto; }
}

@media (min-width: 768px) {
  .op-section { padding: 64px 0; }
  .op-hero h1 { font-size: 2.5rem; }
  .op-section h2 { font-size: 2rem; }
  .op-tools-grid { grid-template-columns: repeat(3, 1fr); }
  .op-ads-grid { grid-template-columns: repeat(3, 1fr); }
  .op-stat-num { font-size: 2.7rem; }
}

@media (min-width: 992px) {
  /* navegação horizontal — sem hambúrguer */
  .op-nav-toggle { display: none; }
  .op-nav { position: static; display: flex; flex-direction: row; align-items: center;
    gap: 8px; padding: 0; box-shadow: none; background: transparent; }
  .op-nav-links { flex-direction: row; align-items: center; gap: 4px; }
  .op-nav-link { min-height: 44px; padding: 8px 14px; border-radius: var(--op-radius-pill); }
  .op-nav-link.is-active::before { display: none; }
  .op-nav-link.is-active { background: var(--op-mint); }
  .op-nav .op-btn { margin-top: 0; width: auto; margin-left: 10px; }

  .op-hero { padding: 56px 0 16px; }
  .op-hero-inner { flex-direction: row; align-items: center; }
  .op-hero-col { flex: 1 1 50%; }
  .op-hero h1 { font-size: 3rem; }
}