/* =====================================================================
   HOTSITE — camada visual nova para as páginas internas (23/09/2026).
   Carregada depois de hotsite.css em toda página (hotsite::montarPagina anexa
   ao css_extra), por isso vence hotsite.css e os CSS por página de top1, blog,
   loja e cursos sem reescrevê-los.
   ⚠️ EXCEÇÃO: nas 4 views de view/galerias/ o galerias.css é linkado à mão
   DEPOIS desta camada — lá quem tem a última palavra é o galerias.css, e regra
   de galeria escrita aqui pode nunca vencer. Estilo novo de galeria vai lá. Mesma linguagem da home: eyebrow dourado, títulos
   2rem, cards com o fundo original + sombra leve, selos e preços dourados, botões pílula.
   Só desktop por enquanto: a responsividade das internas é o lote seguinte.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
    --nx-card: #141414;
    --nx-card-line: rgba(255, 255, 255, 0.08);
    --nx-txt: #f4f4f4;
    --nx-muted: #a3a3a3;
    /* o mesmo de --nx-goldtxt em hotsite.css; #9a6a00 reprovava no cinza (4,3:1) */
    --nx-gold-text: #8a5f00;
    --nx-radius: 14px;
    --nx-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

/* ---------- hero das internas: mais baixo, lead discreto ---------- */
.hero:not(.hero-modern) { padding: 56px 0 44px; }
.hero:not(.hero-modern) .hero-content h1 { font-size: 2rem; margin-bottom: 10px; letter-spacing: -0.01em; }
.hero:not(.hero-modern) .hero-content h1 strong { color: var(--primary-gold); font-weight: 700; }
.hero:not(.hero-modern) .hero-content .lead { font-size: 0.95rem; font-weight: 400; color: #bdbdbd; max-width: 640px; opacity: 1; }
.hero:not(.hero-modern) .hero-content .lead a { text-decoration: none; color: var(--primary-gold); }
.hero:not(.hero-modern) .hero-content .lead br { display: none; }

/* ---------- cabeçalho de seção (badge vira eyebrow, título 2rem) ---------- */
.section-header { margin-bottom: 32px; max-width: 720px; }
.section-badge, .section-badge i { color: inherit; }
.section-title { font-size: 2rem; margin-bottom: 10px; letter-spacing: -0.01em; }
.section-title::after { display: none; }
.section-subtitle { font-size: 0.92rem; color: var(--gray-500); }

/* ---------- ritmo de seções: uma régua só para o site inteiro ----------
   Antes cada arquivo tinha o seu: .section 50/60px, .section-light 100/100px e
   .secao (galerias) 5rem. Páginas que empilham as três alternavam faixas de
   alturas diferentes e o olho lia "quebrado". Agora todas respiram igual e a
   alternância clara/escura fica sendo a única coisa que marca a troca de bloco.
   As quatro exceções do :not() têm respiro próprio (e responsivo) em hotsite.css:
   `.member-profile` abre com padding-top 0 de propósito, para o banner do
   fotógrafo encostar no cabeçalho. Ficam de fora em vez de serem redeclaradas
   aqui, senão esta régua venceria também as media queries delas. */
.section:not(.member-profile):not(.member-awards):not(.section-legal):not(.section-banners-home):not(.section-pre-footer),
.section-light:not(.member-profile):not(.member-awards):not(.section-legal):not(.section-banners-home):not(.section-pre-footer) { padding: 72px 0; }
.section-light { background: #f4f4f4; }

/* Duas faixas da MESMA cor coladas viram um bloco só de 144px de respiro sem
   nenhuma divisa — o sintoma que o site tinha em /galerias/premiadas (CTA da
   comunidade + classificação, ambas no mesmo cinza) e nas listas com barra de
   filtro branca sobre conteúdo branco. Colando, o par divide o respiro. */
.section-light + .section-light,
.section:not(.section-light):not(.section-dark):not(.section-pre-footer):not(.section-filtros)
  + .section:not(.section-light):not(.section-dark):not(.section-pre-footer):not(.section-filtros) { padding-top: 0; }

/* ---------- filtros (pílulas) ----------
   A barra passa a ser uma FAIXA CINZA entre a hero preta e o conteúdo branco.
   Era branca: em /membros, /loja, /cursos, /blog e /ranking ela encostava na
   seção branca de baixo e sumia — o visitante não via que ali havia controle. */
.section-filtros, .member-toolbar-section {
    padding-top: 0.95rem !important; padding-bottom: 0.95rem !important;
    background: #f4f4f4; border-bottom: 1px solid #e6e6e6;
}
.product-filters .filter-btn, .member-filter {
    font-size: 0.82rem; padding: 0.42rem 0.95rem; border: 1px solid #e2e2e2 !important; background: #fff; color: #333;
}
.product-filters .filter-btn.active, .product-filters .filter-btn:hover, .member-filter.is-active, .member-filter:hover {
    background: #111; color: #fff; border-color: #111 !important;
}

/* ---------- botões ---------- */
.btn { border-radius: 999px; font-weight: 600; }
.btn-lg { padding: 13px 28px; font-size: 0.95rem; }
.btn-sm { padding: 8px 16px; font-size: 0.82rem; }
.btn-outline { border-color: #d6d6d6; color: #111; }
.btn-outline:hover { background: #111; border-color: #111; color: #fff; transform: none; }
.section-dark .btn-outline, .hero .btn-outline, .section-pre-footer .btn-outline { border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.btn-primary:hover { transform: none; }

/* ---------- faixa de chamada antes do rodapé: grafite ---------- */
.section-pre-footer, .section-light.section-pre-footer { background: #1e1e1e; color: #fff; padding: 56px 0; }
.section-pre-footer .section-title { color: #fff; }
.section-pre-footer .section-subtitle { color: #bdbdbd; }
.section-pre-footer .section-header { margin-left: auto; margin-right: auto; }

/* ---------- cards: fundo ORIGINAL de cada página (o dono vetou card escuro nas
   internas em 23/09); aqui só raio, sombra leve e hover ---------- */
.card-product, .course-card, .blog-post,
.concurso-opcao-card, .award-card, .blog-destaque {
    border-radius: var(--nx-radius); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); overflow: hidden;
}
.card-product:hover, .course-card:hover, .blog-post:hover,
.concurso-opcao-card:hover, .award-card:hover {
    transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
/* eyebrow / categoria em dourado escuro sobre o card */
.product-category, .blog-post-categoria, .course-platform-hotmart, .course-platform-youtube,
.blog-destaque-selo, .course-selo, .concurso-opcao-qtd {
    background: var(--primary-gold) !important; color: #000 !important; font-size: 0.7rem !important;
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px !important;
    border-radius: 999px !important; display: inline-block; line-height: 1.2;
}
/* preço em dourado */
.product-price, .concurso-opcao-preco {
    color: var(--nx-gold-text) !important;
}
/* tags e metadados */
.blog-tag, .blog-post-meta span { font-size: 0.74rem; }
/* imagem 4:3 sem corte estranho */
.card-product .card-img, .course-image img, .blog-post-foto img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- /concurso/{slug}: regulamento e planos de fotos ---------- */
.concurso-rules-content {
    background: #fff; border-radius: var(--nx-radius); padding: 32px 36px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
    max-width: 900px; margin: 0 auto; line-height: 1.7; color: #333;
}
.concurso-rules-content h1, .concurso-rules-content h2, .concurso-rules-content h3 { color: #111; margin: 20px 0 8px; font-size: 1.1rem; }
.concurso-rules-content ul, .concurso-rules-content ol { padding-left: 20px; list-style: disc; }
.concurso-rules-content .text-center { margin: 32px 0 0 !important; }
.concursos-opcoes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 1100px; margin: 0 auto; }
.concurso-opcao-card { display: flex; flex-direction: column; background: #fff; }
.concurso-opcao-image { aspect-ratio: 16 / 9; overflow: hidden; background: #1d1d1d; }
.concurso-opcao-image img { width: 100%; height: 100%; object-fit: cover; }
.concurso-opcao-content { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.concurso-opcao-header { margin-bottom: 4px; }
.concurso-opcao-titulo { font-size: 1.05rem; font-weight: 600; margin: 0; color: #111; }
.concurso-opcao-descricao { font-size: 0.86rem; margin: 0; color: #666; }
.concurso-opcao-preco { font-size: 1.6rem; font-weight: 700; margin: 6px 0 0; line-height: 1; }
.concurso-opcao-preco small { font-size: 0.78rem; color: #777; font-weight: 500; }
.concurso-opcao-preco-obs { font-size: 0.78rem; margin: 0 0 8px; color: #777; }
.concurso-opcao-btn { margin-top: auto; }

/* ---------- complementos do sistema nx ----------
   Duas peças que a home não precisou porque suas seções de fecho usam o botão
   dentro do card: a linha de ações e o botão secundário (contorno). */
.nx-acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* Borda fixa, nao --nx-line: em faixa escura o token vale rgba(255,255,255,.08)
   e o botao sumia (~1,2:1 de contraste). As superficies claras sobrescrevem abaixo. */
.nx-ghost { border-color: rgba(255, 255, 255, 0.35); color: var(--nx-txt); }
.nx-ghost:hover { border-color: var(--nx-txt); color: var(--nx-txt); }
.nx-light .nx-ghost, .nx-gray .nx-ghost { border-color: #d6d6d6; }
.nx-light .nx-ghost:hover, .nx-gray .nx-ghost:hover { background: #111; border-color: #111; color: #fff; }
/* .nx-why é escrita para fundo escuro (cores brancas fixas); em superfície clara
   ela passa a usar os tokens da seção. Nada muda na home, que a usa em grafite. */
.nx-light .nx-why h3, .nx-gray .nx-why h3 { color: var(--nx-txt); }
.nx-light .nx-why p, .nx-gray .nx-why p { color: var(--nx-muted); }
/* o dourado claro (#ffb700) sobre branco/cinza fica fraco; em superfície clara o
   sistema já tem o dourado escuro --nx-goldtxt (#8a5f00) para texto e ícone. */
.nx-light .nx-why i, .nx-gray .nx-why i { color: var(--nx-goldtxt); }

/* ---------- /membros ---------- */
.member-card { border-radius: var(--nx-radius); }

/* ---------- /loja ---------- */
.product-grid { gap: 18px; }

/* ---------- /cursos ---------- */

/* ---------- /blog ---------- */
.blog-post-titulo a:hover { color: var(--primary-gold); }

/* ---------- páginas legais e 404 ---------- */
.legal-doc h2 { font-size: 1.3rem; }
.erro-404-atalho { border-radius: var(--nx-radius); }