.elementor-widget-container > .uael-party-propz-wrap i{color:var( --e-global-color-primary );}.elementor-widget-container > .uael-party-propz-wrap svg{fill:var( --e-global-color-primary );}.elementor-1355 .elementor-element.elementor-element-9d733d7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-html .uael-party-propz-widget-wrap i{color:var( --e-global-color-primary );}.elementor-widget-html .uael-party-propz-widget-wrap svg{fill:var( --e-global-color-primary );}/* Start custom CSS for html, class: .elementor-element-5e3f2ae *//* ============================================================
   CEO OCULTA™ — DESIGN SYSTEM GLOBAL
   Versão 3.0 | Área de Membros Premium
   
   COMO USAR:
   Cole em: WordPress → Aparência → Personalizar → CSS Adicional
   OU em: Elementor → Site Settings → Custom CSS
   
   Este arquivo define toda a identidade visual da plataforma.
   Não é necessário alterar nada além das seções marcadas com
   "✏️ EDITÁVEL" para personalizar.
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS — Playfair Display + Nunito
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Nunito:wght@300;400;500;600;700&display=swap');


/* ============================================================
   2. VARIÁVEIS GLOBAIS — PALETA CEO OCULTA™
   ✏️ EDITÁVEL: ajuste os valores de cor aqui se necessário
   ============================================================ */

:root {

  /* — Cores principais — */
  --p:      #ff43a0;   /* rosa principal — botões, destaques */
  --p-lt:   #fff0f8;   /* rosa clarinho — fundos sutis */
  --p-md:   #ffd6ee;   /* rosa médio — hovers, bordas */

  /* — Verde menta — */
  --v:      #bce3db;   /* menta claro — badges, acento */
  --v-dk:   #7bbdb1;   /* menta escuro — textos sobre menta */

  /* — Dourado editorial — */
  --c:      #d8bc97;   /* dourado principal — detalhes premium */
  --c-dk:   #b89a72;   /* dourado escuro — bordas, sombras */

  /* — Fundos — */
  --bg:     #f6f3ef;   /* fundo base — creme sofisticado */
  --bg-md:  #ede8e1;   /* fundo médio — cards, seções */
  --bg-dk:  #e0d8ce;   /* fundo escuro — separadores */

  /* — Texto — */
  --pr:     #151413;   /* preto quente — títulos principais */
  --tx:     #3a3330;   /* marrom escuro — corpo de texto */
  --sv:     #8a7d74;   /* cinza quente — texto secundário */

  /* — Branco — */
  --wh:     #ffffff;

  /* — Tipografia — */
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'Nunito', system-ui, sans-serif;

  /* — Espaçamentos — */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;

  /* — Bordas — */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  40px;

  /* — Sombras — */
  --shadow-sm:  0 2px 12px rgba(21,20,19,0.07);
  --shadow-md:  0 6px 28px rgba(21,20,19,0.11);
  --shadow-lg:  0 16px 56px rgba(21,20,19,0.15);
  --shadow-p:   0 8px 32px rgba(255,67,160,0.22);

  /* — Transições — */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --duration:   0.38s;
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */

.elementor-page *,
.elementor-page *::before,
.elementor-page *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--bg);
  color: var(--tx);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   4. TIPOGRAFIA GLOBAL
   ============================================================ */

/* Títulos com serifa */
h1, h2, h3,
.co-title,
.co-heading {
  font-family: var(--font-serif);
  color: var(--pr);
  line-height: 1.2;
  font-weight: 600;
}

/* Subtítulos e corpo com sans */
h4, h5, h6,
.co-subtitle,
p {
  font-family: var(--font-sans);
  color: var(--tx);
}

/* Eyebrow — texto pequeno acima do título */
.co-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p);
}

/* Destaque dourado em texto */
.co-gold {
  color: var(--c-dk);
}

/* Itálico editorial */
.co-italic {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--p);
}


/* ============================================================
   5. BOTÕES GLOBAIS
   ============================================================ */

/* Botão principal — rosa sólido */
.co-btn,
.co-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wh);
  background: var(--p);
  border: none;
  border-radius: var(--radius-xl);
  padding: 0.85rem 2.2rem;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-p);
  white-space: nowrap;
}

.co-btn:hover,
.co-btn-primary:hover {
  background: #e0388c;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255,67,160,0.35);
  color: var(--wh);
  text-decoration: none;
}

.co-btn:active,
.co-btn-primary:active {
  transform: translateY(0);
}

/* Botão secundário — contorno dourado */
.co-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-dk);
  background: transparent;
  border: 1.5px solid var(--c);
  border-radius: var(--radius-xl);
  padding: 0.82rem 2.2rem;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
}

.co-btn-secondary:hover {
  background: var(--c);
  color: var(--pr);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Botão ghost — transparente com borda rosa */
.co-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--p);
  background: transparent;
  border: 1.5px solid var(--p-md);
  border-radius: var(--radius-xl);
  padding: 0.7rem 1.8rem;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
}

.co-btn-ghost:hover {
  background: var(--p-lt);
  border-color: var(--p);
  text-decoration: none;
}

/* Botão download PDF */
.co-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tx);
  background: var(--bg-md);
  border: 1px solid var(--bg-dk);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s var(--ease);
}

.co-btn-download::before {
  content: '↓';
  font-size: 1rem;
  color: var(--p);
}

.co-btn-download:hover {
  background: var(--wh);
  border-color: var(--p-md);
  color: var(--pr);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}


/* ============================================================
   6. CARDS BASE
   ============================================================ */

/* Card padrão */
.co-card {
  background: var(--wh);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

.co-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Card com fundo creme */
.co-card-warm {
  background: var(--bg-md);
  border: 1px solid var(--bg-dk);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* Card premium — borda dourada */
.co-card-premium {
  background: var(--wh);
  border: 1px solid var(--c);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(216,188,151,0.18);
  overflow: hidden;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

.co-card-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(216,188,151,0.28);
}


/* ============================================================
   7. BADGES & TAGS
   ============================================================ */

.co-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 0.3rem 0.9rem;
}

/* Badge rosa */
.co-badge-pink {
  background: var(--p-lt);
  color: var(--p);
  border: 1px solid var(--p-md);
}

/* Badge dourado */
.co-badge-gold {
  background: #fdf8f1;
  color: var(--c-dk);
  border: 1px solid var(--c);
}

/* Badge menta */
.co-badge-mint {
  background: #f0faf8;
  color: var(--v-dk);
  border: 1px solid var(--v);
}

/* Badge novo conteúdo */
.co-badge-new {
  background: var(--p);
  color: var(--wh);
  border: none;
}


/* ============================================================
   8. DIVISORES & ORNAMENTOS
   ============================================================ */

/* Linha divisória dourada */
.co-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  border: none;
  margin: var(--space-lg) 0;
}

/* Ornamento de título — linha rosa lateral */
.co-title-accent {
  position: relative;
  padding-left: 1.2rem;
}

.co-title-accent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  background: var(--p);
  border-radius: 2px;
}


/* ============================================================
   9. BARRA DE PROGRESSO
   ============================================================ */

.co-progress-wrap {
  width: 100%;
  height: 6px;
  background: var(--bg-md);
  border-radius: 100px;
  overflow: hidden;
}

.co-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--p), #ff7ec4);
  border-radius: 100px;
  transition: width 0.8s var(--ease);
}

/* Progresso com label */
.co-progress-labeled {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.co-progress-labeled .co-progress-wrap {
  flex: 1;
}

.co-progress-labeled .co-progress-pct {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--p);
  min-width: 2.8rem;
  text-align: right;
}


/* ============================================================
   10. SEÇÕES DE PÁGINA
   ============================================================ */

/* Seção padrão */
.co-section {
  padding: var(--space-xl) 0;
}

/* Seção com fundo escuro creme */
.co-section-warm {
  background: var(--bg-md);
  padding: var(--space-xl) 0;
}

/* Header de seção estilo Netflix */
.co-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  gap: 1rem;
}

.co-section-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 600;
  color: var(--pr);
  margin: 0;
}

.co-section-header .co-see-all {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sv);
  text-decoration: none;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color 0.2s;
}

.co-section-header .co-see-all:hover {
  color: var(--p);
}


/* ============================================================
   11. CARROSSEL HORIZONTAL (NETFLIX STYLE)
   ============================================================ */

.co-row {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-dk) transparent;
}

.co-row::-webkit-scrollbar {
  height: 4px;
}

.co-row::-webkit-scrollbar-track {
  background: transparent;
}

.co-row::-webkit-scrollbar-thumb {
  background: var(--bg-dk);
  border-radius: 100px;
}

.co-row > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}


/* ============================================================
   12. CARD DE CURSO / MÓDULO
   ============================================================ */

.co-course-card {
  width: 220px;
  border-radius: var(--radius-md);
  background: var(--wh);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
  text-decoration: none;
  display: block;
  position: relative;
}

.co-course-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.co-course-card__thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.co-course-card__body {
  padding: 0.9rem 1rem;
}

.co-course-card__title {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pr);
  margin: 0 0 0.3rem;
  line-height: 1.3;
}

.co-course-card__meta {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--sv);
  margin: 0;
}

/* Barra de progresso dentro do card */
.co-course-card__progress {
  padding: 0 1rem 0.9rem;
}


/* ============================================================
   13. CARD BLOQUEADO — EFEITO CADEADO PREMIUM
   
   COMO FUNCIONA:
   - Card aparece em preto e branco (dessaturado)
   - Hover: coloriza parcialmente + zoom suave + brilho
   - Clique: abre o checkout WooCommerce do produto
   ============================================================ */

.co-course-card--locked {
  position: relative;
  cursor: pointer;
  filter: grayscale(100%) brightness(0.85);
  transition: filter var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

.co-course-card--locked:hover {
  filter: grayscale(40%) brightness(0.95);
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 48px rgba(21,20,19,0.18);
}

/* Overlay escuro elegante */
.co-course-card--locked .co-lock-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(21,20,19,0.18) 0%,
    rgba(21,20,19,0.52) 100%
  );
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 1;
  transition: background var(--duration) var(--ease);
  z-index: 2;
}

.co-course-card--locked:hover .co-lock-overlay {
  background: linear-gradient(
    160deg,
    rgba(255,67,160,0.08) 0%,
    rgba(21,20,19,0.42) 100%
  );
}

/* Ícone de cadeado */
.co-lock-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration) var(--ease);
}

.co-lock-icon svg {
  width: 16px;
  height: 16px;
  stroke: rgba(255,255,255,0.9);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.co-course-card--locked:hover .co-lock-icon {
  background: rgba(255,67,160,0.25);
  border-color: rgba(255,67,160,0.6);
  transform: scale(1.08);
}

/* Texto "desbloquear" */
.co-lock-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  transition: color var(--duration) var(--ease);
}

.co-course-card--locked:hover .co-lock-label {
  color: rgba(255,255,255,0.95);
}


/* ============================================================
   14. NAVEGAÇÃO SUPERIOR DA ÁREA DE MEMBROS
   ============================================================ */

.co-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(246,243,239,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bg-dk);
  padding: 0 var(--space-md);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.co-nav__logo img {
  height: 36px;
  width: auto;
}

.co-nav__links {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.co-nav__links a {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tx);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.co-nav__links a:hover {
  color: var(--p);
  background: var(--p-lt);
}

.co-nav__links a.active {
  color: var(--p);
}

.co-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}


/* ============================================================
   15. HERO DA ÁREA DE MEMBROS
   ============================================================ */

.co-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-xl) var(--space-lg);
  overflow: hidden;
  background: var(--pr);
}

.co-hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.45;
}

.co-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(21,20,19,0.88) 0%,
    rgba(21,20,19,0.32) 50%,
    transparent 100%
  );
}

.co-hero__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.co-hero__greeting {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  color: var(--c);
  margin-bottom: 0.4rem;
  display: block;
}

.co-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--wh);
  line-height: 1.1;
  margin: 0 0 0.8rem;
}

.co-hero__sub {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: rgba(255,255,255,0.78);
  margin: 0 0 1.5rem;
  max-width: 480px;
}

.co-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}


/* ============================================================
   16. GAMIFICAÇÃO — BADGES & PROGRESSO
   ============================================================ */

.co-gamification {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Badge de conquista */
.co-achievement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  min-width: 72px;
}

.co-achievement__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 2px solid var(--c);
  background: #fdf8f1;
  transition: transform 0.25s var(--ease);
}

.co-achievement__icon:hover {
  transform: scale(1.1);
}

.co-achievement--locked .co-achievement__icon {
  border-color: var(--bg-dk);
  background: var(--bg-md);
  filter: grayscale(1);
  opacity: 0.5;
}

.co-achievement__label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--sv);
  letter-spacing: 0.04em;
}

/* Streak counter */
.co-streak {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff8f0;
  border: 1px solid #f0d8b8;
  border-radius: 100px;
  padding: 0.4rem 1rem;
}

.co-streak__fire {
  font-size: 1.1rem;
}

.co-streak__count {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: #c87a2a;
}

.co-streak__label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--sv);
}


/* ============================================================
   17. RESPONSIVO — MOBILE FIRST
   ============================================================ */

@media (max-width: 768px) {

  :root {
    --space-lg: 1.8rem;
    --space-xl: 2.8rem;
  }

  .co-hero {
    min-height: 320px;
    padding: var(--space-lg) var(--space-sm);
  }

  .co-nav {
    padding: 0 var(--space-sm);
    height: 56px;
  }

  .co-nav__links {
    display: none; /* substituir por menu hambúrguer mobile */
  }

  .co-course-card {
    width: 180px;
  }

  .co-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .co-hero__actions {
    flex-direction: column;
  }

  .co-btn,
  .co-btn-primary,
  .co-btn-secondary {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {

  .co-course-card {
    width: 160px;
  }

  .co-hero__title {
    font-size: 1.8rem;
  }
}


/* ============================================================
   18. UTILIDADES
   ============================================================ */

.co-text-center { text-align: center; }
.co-text-left   { text-align: left; }
.co-text-right  { text-align: right; }

.co-mt-sm { margin-top: var(--space-sm); }
.co-mt-md { margin-top: var(--space-md); }
.co-mt-lg { margin-top: var(--space-lg); }
.co-mb-sm { margin-bottom: var(--space-sm); }
.co-mb-md { margin-bottom: var(--space-md); }
.co-mb-lg { margin-bottom: var(--space-lg); }

.co-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Ocultar elementos nativos do Creator LMS que não queremos */
.creatorlms-course-header,
.creatorlms-breadcrumb,
.single-course .entry-header {
  display: none !important;
}/* End custom CSS */