/* =================================================
   INSTINTO CRIATIVO - HOTSITE CSS
   Layout moderno com identidade visual oficial
   Cores: #000, rgb(10 10 10), #ffb700
   Font: 'Poppins', sans-serif
   ================================================= */

/* ========== IMPORTS ========== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ========== VARIÁVEIS CSS ========== */
:root {
    --primary-black: #000;
    --secondary-black: rgb(10, 10, 10);
    --primary-gold: #ffb700;
    --gold-hover: #e6a500;
    --gold-light: rgba(255, 183, 0, 0.1);
    --white: #ffffff;
    --gray-100: #f4f4f4;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #6c757d;
    --gray-600: #495057;
    --gray-700: #343a40;
    --gray-800: #212529;
    --gray-900: #1a1a1a;

    --font-primary: 'Poppins', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    --border-radius-sm: 6px;
    --border-radius: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.25);

    --transition: all 0.3s ease;
    --transition-fast: all 0.2s ease;
}

/* ========== RESET E BASE ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    color: var(--primary-black);
    background-color: var(--white);
    /* clip, não hidden: `hidden` torna o body um contêiner de rolagem e quebra
       todo `position: sticky` de dentro dele (ex.: o índice de /termos).
       `clip` barra o scroll horizontal do mesmo jeito, sem esse efeito. */
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    border: none !important;
    cursor: pointer;
    transition: var(--transition);
}

input,
textarea,
select {
    font-family: inherit;
    border: none !important;
    outline: none;
}

/* ========== LAYOUT ========== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}


/* ========== SECTIONS ========== */
.section {
    padding: 50px 0px 60px 0px;
}

.section-light {
    background: var(--gray-100);
    padding: 100px 0px 100px 0px;
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    margin-bottom: 16px;
    position: relative;
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-black);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 60px;
    height: 3px;
    background: var(--primary-gold);
    transform: translateX(-50%);
}

.section-subtitle {
    color: var(--gray-600);
    font-size: 1.125rem;
    line-height: 1.6;
}

/* ========== HERO SECTION ========== */
.hero {
    background: linear-gradient(135deg, rgb(10 10 10 / 94%) 0%, rgb(10 10 10 / 94%) 100%);
    color: var(--white);
    padding: 120px 0 80px;
    text-align: center;
}

.hero-content h1 {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 24px;
    line-height: 1.2;
}

.hero-content .lead {
    font-size: 1.1rem;
    font-weight: var(--font-weight-light);
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

/* ========== HERO MODERNO ========== */
.hero-modern {
    background: linear-gradient(135deg, rgb(10 10 10 / 94%) 0%, rgb(10 10 10 / 94%) 100%);
    color: var(--white);
    padding: 50px 0 100px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero-modern .container {
    position: relative;
    z-index: 2;
}

/* Reserva o espaço vertical dos troféus do .hero-pattern, que são
   absolutos e por isso não empurram o conteúdo do hero. */
.hero-modern .hero-content {
    padding-top: 25rem;
}

.hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* ========== TROFÉUS ========== */

/* Base comum para todos os troféus */
.trophy-1st,
.trophy-2nd,
.trophy-3rd {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* Estilos comuns das imagens dos troféus */
.trophy-1st img,
.trophy-2nd img,
.trophy-3rd img {
    width: 300px;
    height: 300px;
    object-fit: contain;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%23ffb700" stroke="black" stroke-width="1"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/></svg>'), auto;
    transition: all 0.3s ease;
    will-change: transform, filter;
    border: none !important;
    outline: none !important;
}

/* 1º LUGAR - OURO */
.trophy-1st {
    z-index: 3;
}

.trophy-1st img {
    filter: drop-shadow(0 4px 15px rgba(255, 215, 0, 0.4));
}


.trophy-1st:hover img {
    transform: scale(1.2) rotate(0deg) translateY(-12px);
    filter: drop-shadow(0 12px 35px rgba(255, 215, 0, 0.8)) brightness(1.3);
    animation: trophy-glow-gold 1.5s ease-in-out infinite alternate;
}

/* 2º LUGAR - PRATA */
.trophy-2nd {
    margin-left: -280px;
}

.trophy-2nd img {
    filter: drop-shadow(0 3px 12px rgba(192, 192, 192, 0.3));
}

.trophy-2nd:hover img {
    transform: scale(1.15) rotate(-3deg) translateY(-10px);
    filter: drop-shadow(0 10px 30px rgba(192, 192, 192, 0.6)) brightness(1.2);
    animation: trophy-glow-silver 1.5s ease-in-out infinite alternate;
}

/* 3º LUGAR - BRONZE */
.trophy-3rd {
    margin-left: 280px;
}

.trophy-3rd img {
    filter: drop-shadow(0 3px 12px rgba(205, 127, 50, 0.3));
}

.trophy-3rd:hover img {
    transform: scale(1.12) rotate(3deg) translateY(-8px);
    filter: drop-shadow(0 8px 25px rgba(205, 127, 50, 0.5)) brightness(1.15);
    animation: trophy-glow-bronze 1.5s ease-in-out infinite alternate;
}

/* Animações de brilho dos troféus */
@keyframes trophy-glow-gold {
    0% {
        filter: drop-shadow(0 12px 35px rgba(255, 215, 0, 0.8)) brightness(1.3);
    }

    100% {
        filter: drop-shadow(0 15px 45px rgba(255, 215, 0, 1)) brightness(1.5);
    }
}

@keyframes trophy-glow-silver {
    0% {
        filter: drop-shadow(0 10px 30px rgba(192, 192, 192, 0.6)) brightness(1.2);
    }

    100% {
        filter: drop-shadow(0 12px 35px rgba(192, 192, 192, 0.8)) brightness(1.4);
    }
}

@keyframes trophy-glow-bronze {
    0% {
        filter: drop-shadow(0 8px 25px rgba(205, 127, 50, 0.5)) brightness(1.15);
    }

    100% {
        filter: drop-shadow(0 10px 30px rgba(205, 127, 50, 0.7)) brightness(1.3);
    }
}

/* Partículas de luz */
.light-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-gold);
    border-radius: 50%;
    opacity: 0;
    animation: particle-fall 4s linear infinite;
}

.particle:nth-child(1) {
    left: 45%;
    animation-delay: 0s;
    animation-duration: 3s;
}

.particle:nth-child(2) {
    left: 48%;
    animation-delay: 0.5s;
    animation-duration: 3.5s;
}

.particle:nth-child(3) {
    left: 52%;
    animation-delay: 1s;
    animation-duration: 4s;
}

.particle:nth-child(4) {
    left: 55%;
    animation-delay: 1.5s;
    animation-duration: 3.2s;
}

.particle:nth-child(5) {
    left: 50%;
    animation-delay: 2s;
    animation-duration: 3.8s;
}

@keyframes particle-fall {
    0% {
        top: 10%;
        opacity: 0;
        transform: translateY(0) scale(0);
    }

    20% {
        opacity: 0.8;
        transform: translateY(0) scale(1);
    }

    80% {
        opacity: 0.6;
    }

    100% {
        top: 80%;
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
}

.hero-title {
    font-size: 4rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 24px;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 3rem;
}

.hero-highlight {
    color: var(--primary-gold);
    font-size: 2rem;
    font-weight: var(--font-weight-semibold);
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 48px;
    opacity: 0.9;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #acacac;
}


/* ========== GRIDS ========== */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
}

/* ========== HEADER ========== */
.header {
    background: #000000;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: var(--transition);
    padding: 20px 0;
}

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.header-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}

.logo-container {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(255, 215, 0, 0.3);
}

.header-logo {
    width: 130px;
    height: 130px;
    object-fit: contain;
}

.header-title {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--white);
    margin: 0;
    letter-spacing: 2px;
    margin-bottom: -10px;
}

.header-logo-link {
    display: flex;
    cursor: pointer;
}

.header-title-link {
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}

.header-title-link:hover {
    color: var(--primary-gold);
}

.header-subtitle {
    font-size: 1rem;
    color: #acacac;
    margin: 0;
    text-align: center;
    max-width: 600px;
    line-height: 1.5;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgb(10 10 10);
    padding: 12px 0;
    /* 100vw inclui a barra de rolagem do Windows e abria 17px de rolagem lateral */
    width: calc(100% + 48px);
    position: relative;
    margin: 0 -24px;
}

.nav-link {
    font-weight: var(--font-weight-medium);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 25px;
    transition: var(--transition);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    background: transparent;
}

.nav-link:hover,
.nav-link.active:not(.nav-link-destaque) {
    color: var(--primary-black);
    background: var(--primary-gold);
}

/* CTA fixo do menu (Concursos abertos): dourado em qualquer página.
   Era preso a [href="/concurso"] e quebrou quando a rota virou /concursos —
   por isso agora depende de classe, não de URL. */
.nav-link-destaque {
    background: var(--primary-gold);
    color: var(--primary-black);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition);
}

.nav-link-destaque:hover {
    background: #ffed4e;
    color: var(--primary-black);
    transform: scale(1.05);
}

/* Item do menu ainda não liberado (ex.: Blog): não navega e mostra um balão
   "Em breve" ABAIXO do item, no hover ou foco de teclado (puro CSS, sem clique). */
.nav-link-soon {
    position: relative;
    cursor: default;
}

.nav-link-soon::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--primary-gold);
    color: var(--primary-black);
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1200;
}

.nav-link-soon::before {
    content: '';
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--primary-gold);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1200;
}

.nav-link-soon:hover::after,
.nav-link-soon:focus::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.nav-link-soon:hover::before,
.nav-link-soon:focus::before {
    opacity: 1;
}

/* Aba travada com href (Top 1, Resultados e Ranking fechados ao público —
   core::chavesResultados; hotsite-auth.js barra o clique): esmaecida pela cor, não
   por opacity (que apagaria o balão junto), e o hover não acende o dourado. */
.nav-link.nav-link-soon {
    color: rgba(255, 255, 255, 0.45);
    cursor: not-allowed;
}

.nav-link.nav-link-soon:hover {
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
}

/* Link para uma página fechada ao público (core::chavesResultados): some. */
.res-oculto {
    display: none !important;
}

/* Dropdown "Resultados": no desktop abre por hover/foco (mesma técnica de
   .nav-link-soon acima — painel absoluto revelado por opacity, não display,
   pra permitir transição). O link "Resultados +" continua navegável por conta
   própria; as 2 opções do painel são atalhos diretos. */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 230px;
    padding: 8px;
    background: rgb(10 10 10);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1200;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--white);
    font-size: 0.88rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
    color: var(--primary-black);
    background: var(--primary-gold);
}

/* Loja: fica no fluxo do menu, ao lado do último item (Ranking). No hover o
   rótulo "Loja" desliza para fora (abre/fecha) e o botão ganha o dourado. */
.nav-loja {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 9px;
    border-radius: 25px;
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.nav-loja svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}

.nav-loja-label {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    font-weight: var(--font-weight-semibold);
    font-size: 0.9rem;
    transition: max-width 0.3s ease, opacity 0.25s ease;
}

.nav-loja:hover {
    background: var(--primary-gold);
    color: var(--primary-black);
}

.nav-loja:hover .nav-loja-label {
    max-width: 90px;
    opacity: 1;
}

/* Em /loja o item fica "aberto" e selecionado, como os demais links do menu
   ganham .active — a classe é aplicada por hotsite-auth.js. */
.nav-loja.active {
    background: var(--primary-gold);
    color: var(--primary-black);
}

.nav-loja.active .nav-loja-label {
    max-width: 90px;
    opacity: 1;
}

.header-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Ação de autenticação (Login / Usuário) */
.auth-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-gold);
    color: var(--primary-black);
    padding: 10px 16px;
    border-radius: 24px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(255, 183, 0, 0.35);
}

.auth-link:hover {
    background: #ffed4e;
    transform: translateY(-1px);
}

.auth-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 10px;
    border-radius: 24px;
    color: var(--white);
    backdrop-filter: blur(4px);
}

.auth-user:hover {
    border-color: var(--primary-gold);
}

.auth-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #222;
}

.auth-name {
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
}

/* ========== ELEMENTOS PADRÃO ADMIN (CARD/FORM) ========== */
.card {
    background: #101010;
    color: var(--white);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-xl);
}

.card-header {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-body {
    padding: 18px;
}

.m-0 {
    margin: 0 !important;
}

.form-group {
    margin-bottom: 14px;
}

.form-control {
    display: block;
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px;
    color: var(--white);
    padding: 12px 14px;
    font-size: 0.95rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-gold) !important;
    box-shadow: 0 0 0 3px rgba(255, 183, 0, 0.15);
}

.form-control-user {
    border-radius: 8px;
}

.form-control-user:hover {
    border-color: var(--primary-gold) !important;
    box-shadow: 0 0 0 3px rgba(255, 183, 0, 0.15);
}

.btn-user {
    border-radius: 8px;
}

.btn-block {
    width: 100%;
    display: inline-flex;
    justify-content: center;
}

.d-grid {
    display: grid;
    gap: 10px;
    justify-items: center;
    align-items: center;
}


/* ========== BUTTONS ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: var(--transition);
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    pointer-events: auto;
    position: relative;
    z-index: 3;
}

.btn-primary {
    background: var(--primary-gold);
    color: var(--primary-black);
    border-color: var(--primary-gold);
}

.btn-primary:hover {
    background: var(--gold-hover);
    border-color: var(--gold-hover);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--primary-gold);
    border-color: var(--primary-gold);
}

.btn-outline:hover {
    background: var(--primary-gold);
    color: var(--primary-black);
    transform: translateY(-2px);
}

.btn-white {
    background: var(--white);
    color: var(--primary-black);
    border-color: var(--white);
}

.btn-white:hover {
    background: var(--gray-100);
    color: var(--primary-black);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 16px 48px;
    font-size: 1.125rem;
    border-radius: var(--border-radius-lg);
}

.btn-xl {
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-lg);
}

/* Animação especial para o CTA principal */
.btn-primary.btn-xl {
    animation: cta-attention 9s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.btn-primary.btn-xl::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: cta-shine 6s ease-in-out infinite;
}

@keyframes cta-attention {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 20px rgba(255, 183, 0, 0.5);
    }

    10% {
        transform: scale(1.05) rotate(1deg);
        box-shadow: 0 0 30px rgba(255, 183, 0, 0.8);
    }

    20% {
        transform: scale(1.02) rotate(-1deg);
        box-shadow: 0 0 25px rgba(255, 183, 0, 0.7);
    }

    30% {
        transform: scale(1.08) rotate(1deg);
        box-shadow: 0 0 35px rgba(255, 183, 0, 0.9);
    }

    40% {
        transform: scale(1.03) rotate(-1deg);
        box-shadow: 0 0 28px rgba(255, 183, 0, 0.6);
    }

    50% {
        transform: scale(1.1) rotate(0deg);
        box-shadow: 0 0 40px rgba(255, 183, 0, 1);
    }

    60% {
        transform: scale(1.05) rotate(-1deg);
        box-shadow: 0 0 32px rgba(255, 183, 0, 0.8);
    }

    70% {
        transform: scale(1.07) rotate(1deg);
        box-shadow: 0 0 38px rgba(255, 183, 0, 0.9);
    }

    80% {
        transform: scale(1.04) rotate(-1deg);
        box-shadow: 0 0 30px rgba(255, 183, 0, 0.7);
    }

    90% {
        transform: scale(1.06) rotate(1deg);
        box-shadow: 0 0 35px rgba(255, 183, 0, 0.8);
    }
}

@keyframes cta-shine {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.875rem;
    border-radius: var(--border-radius-sm);
}

.btn-block {
    width: 100%;
}

/* ========== CARDS ========== */
.card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--gray-200);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-gold);
}

.card-body {
    padding: 24px;
}

.card-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

.card-product {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
}

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

.card-product .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px;
}

.card-product .product-card-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
}

.card-product .product-price {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-gold);
    margin-top: 8px;
}

.card-product .product-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
    color: var(--primary-black);
}

.card-product .product-category {
    font-size: 0.875rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* ========== FILTERS ========== */
/* A barra de filtros (membros, cursos, loja, blog, top1, ranking) e a hero
   ficam no FLUXO e rolam com a pagina. Ate 29/09/2026 havia um cabecalho
   encolhivel que virava `fixed` ao rolar, com a barra grudada embaixo dele
   (public/js/hotsite-filtros.js, removido): o dono tirou a faixa travada. */
.member-toolbar-section,
.section-filtros {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}

.member-toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.member-toolbar-section .member-toolbar {
    margin-bottom: 0;
}

/* No desktop os filtros viram uma linha só, para ocupar menos altura grudada.
   A busca NÃO entra nessa linha — fica sempre abaixo, centralizada
   (.member-search-row), como pedido; por isso não tem mais flex/width aqui. */
@media (min-width: 993px) {
    .member-toolbar-section .member-toolbar {
        flex-direction: row;
        align-items: center;
    }

    .member-toolbar-section .member-toolbar__filters {
        flex: 1 1 auto;
        justify-content: flex-start;
    }
}

/* Tablet/celular: os filtros viram uma faixa de rolagem horizontal.
   Quebrando linha, os 9 botões empilhavam ~5 fileiras e a barra grudada
   comia um terço da tela. */
@media (max-width: 992px) {
    .member-toolbar-section .member-toolbar {
        align-items: stretch;
    }

    .member-toolbar-section .member-toolbar__filters,
    .section-filtros .product-filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* sangra até as bordas do .container (padding 24px) para a faixa
           não parecer cortada antes da borda da tela */
        margin-inline: -24px;
        padding-inline: 24px;
        padding-bottom: 2px;
    }

    .member-toolbar-section .member-toolbar__filters::-webkit-scrollbar,
    .section-filtros .product-filters::-webkit-scrollbar {
        display: none;
    }

    /* anula o `flex: 1 1 45%` do CSS responsivo, que forçava 2 botões por linha */
    .member-toolbar-section .member-filter,
    .section-filtros .filter-btn {
        flex: 0 0 auto;
    }
}

.member-toolbar__filters,
.product-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

/* Pílulas de filtro — mesma linguagem em membros, cursos, loja e ranking.
   No ranking os .filter-btn são <a> de navegação (/ranking/2026), não botões. */
.member-filter,
.product-filters .filter-btn {
    display: inline-block;
    text-decoration: none;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--white);
    color: var(--gray-600);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    /* border: 2px solid var(--gray-200); */
    border: 1px solid #0000001f  !important;
    font-weight: var(--font-weight-medium);
    transition: var(--transition);
}

.member-filter:hover,
.member-filter.is-active,
.product-filters .filter-btn:hover,
.product-filters .filter-btn.active {
    background: var(--primary-gold);
    color: var(--primary-black);
    border-color: var(--primary-gold);
}

.member-search-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
}

.member-search {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: min(500px, 100%);
}

.member-search__label {
    font-size: 0.78rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.member-search__shell {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.member-search__icon {
    position: absolute;
    left: 1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--gray-400);
    box-sizing: border-box;
}

.member-search__icon::after {
    content: "";
    position: absolute;
    bottom: -0.45rem;
    right: -0.35rem;
    width: 0.55rem;
    height: 0.2rem;
    background: var(--gray-400);
    transform: rotate(45deg);
    border-radius: 2px;
}

.member-search__input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.65rem 1rem 0.65rem 2.75rem;
    border: 1px solid #0000001f  !important;
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.member-search__input:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(255, 183, 0, 0.2);
    outline: none;
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.1rem;
    margin-top: 2rem;
}

.member-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--gray-100);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    /* Mesmo padrão de hover da regra .nx-card:hover (pódio de /ranking, mais
       abaixo neste arquivo, seção "Seções novas"): lift sutil, sem escalar
       sombra. Sem número de linha aqui de propósito — desatualiza sozinho. */
    transition: transform 0.2s ease;
}

.member-card:hover {
    transform: translateY(-3px);
}

.member-card.is-hidden {
    display: none;
}

.member-card__media {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    border-radius: inherit;
}

.member-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Avatar-fallback (sem foto): iniciais sobre cor determinística */
.member-card__initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white, #fff);
    font-weight: 700;
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    user-select: none;
}

/* Link que cobre o card inteiro — fica sob os ícones sociais, que são links próprios */
.member-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

/* "Ver" + contatos revelados no hover, sobre a foto (padrão dos mentores) */
.member-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 10px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.member-card:hover .member-card__overlay,
.member-card:focus-within .member-card__overlay {
    opacity: 1;
    visibility: visible;
}

/* Grupo dos contatos (1 a 3 ícones): é UM item do overlay, e o flex:none faz o
   grupo inteiro descer para a segunda linha quando não cabe ao lado do "Ver".
   Com o shrink padrão ele encolheria e os ícones empilhariam um a um. */
.member-card__social {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.member-card__overlay .social-icon {
    flex: none;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
}

/* Botão "Ver" — leva ao perfil público; principal ação do overlay */
.member-card__ver {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--primary-gold);
    color: var(--primary-black);
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: var(--transition);
}

.member-card__ver:hover {
    background: var(--gold-hover, #e6a500);
    transform: scale(1.05);
}

.member-card__ver i {
    font-size: 0.9rem;
}

.member-card__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    pointer-events: none; /* o clique atravessa para .member-card__link */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: clamp(1.5rem, 0.9rem + 2.4vw, 2.75rem) clamp(0.6rem, 0.4rem + 0.7vw, 1rem) clamp(0.65rem, 0.45rem + 0.7vw, 1rem);
    text-align: left;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.55) 45%,
            rgba(0, 0, 0, 0) 100%);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    transition: padding-bottom 0.25s ease;
}

.member-card:hover .member-card__body {
    padding-bottom: 1.25rem;
}

.member-card__name {
    /* acompanha a largura do card: em 320px o card tem ~130px e 0.95rem estoura */
    font-size: clamp(0.78rem, 0.7rem + 0.35vw, 0.95rem);
    font-weight: var(--font-weight-bold);
    color: var(--white);
    margin: 0;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: none;
    /* nomes longos (e handles sem espaço) quebravam em 4+ linhas em card estreito */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.member-card__location {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(0.68rem, 0.62rem + 0.25vw, 0.78rem);
    margin: 0;
    line-height: 1.35;
    flex-wrap: wrap;
}

.member-card__location-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(255, 183, 0, 0.25);
}

@media (max-width: 992px) {
    .member-toolbar__filters {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .member-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .member-search__label {
        text-align: center;
    }

    .member-search__input {
        min-height: 2.5rem;
        font-size: 0.9rem;
    }

    /* Card de ~158px (2 colunas em 375px): os 3 contatos a 40px ocupavam a
       largura inteira. Menores, cabem na linha com folga. */
    .member-card__overlay {
        padding: 0 8px;
    }

    .member-card__social {
        gap: 6px;
    }

    .member-card__overlay .social-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* ========== BLOG ========== */
.blog-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--gray-200);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-gold);
}

.blog-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-content {
    padding: 24px;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.blog-category {
    background: var(--primary-gold);
    color: var(--primary-black);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
}

.blog-date {
    color: var(--gray-500);
    font-size: 0.9rem;
}

.blog-title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-black);
    margin-bottom: 12px;
    line-height: 1.4;
}

.blog-excerpt {
    color: var(--gray-600);
    margin-bottom: 20px;
    line-height: 1.6;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* ========== CURSOS ========== */
.course-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--gray-200);
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-gold);
}

.course-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gray-100);
    flex-shrink: 0;
}

.course-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.course-card:hover .course-photo {
    transform: scale(1.05);
}

/* course-content preenche a altura restante e empurra o botão para a base,
   para que cards de textos curtos não fiquem com um vazio no rodapé. */
.course-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 24px 24px;
}

.course-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* Badge base — cores por plataforma vivem em cursos-hotsite.css. */
.course-platform {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--gray-200);
    color: var(--gray-700, #444);
}

.course-title {
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-black);
    margin-bottom: 10px;
    line-height: 1.35;
}

.course-description {
    color: var(--gray-600);
    margin-bottom: 18px;
    line-height: 1.6;
    font-size: 0.92rem;
}

.course-instructor {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.instructor-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.instructor-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.instructor-name {
    color: var(--primary-black);
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
}

.instructor-specialty {
    color: var(--gray-500);
    font-size: 0.82rem;
}

/* Cola o botão na base: consome o espaço livre acima dele. */
.course-content .btn-block {
    margin-top: auto;
}

/* ========== PALESTRANTES ========== */
.speaker-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--gray-200);
    text-align: center;
}

.speaker-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-gold);
}

.speaker-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 24px auto 20px;
    border: 4px solid var(--primary-gold);
}

.speaker-content {
    padding: 0 24px 24px;
}

.speaker-name {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-black);
    margin-bottom: 8px;
}

.speaker-specialty {
    color: var(--primary-gold);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
}

.speaker-location {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.speaker-bio {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
}

.speaker-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.speaker-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.expertise-tag {
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
}

.speaker-social {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.social-link {
    font-size: 1.5rem;
    transition: var(--transition);
}

.social-link:hover {
    transform: scale(1.2);
    color: var(--primary-gold);
}

/* ========== CARRINHO ========== */
.cart-summary {
    background: var(--white);
    padding: 24px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
}

.cart-total {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-gold);
    margin-bottom: 20px;
    text-align: center;
}

.cart-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    margin-bottom: 16px;
}

.cart-item-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}

.cart-item-info {
    flex: 1;
}

.cart-item-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: 4px;
}

.cart-item-price {
    color: var(--primary-gold);
    font-weight: var(--font-weight-bold);
    margin-top: 8px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.quantity-selector button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-700);
    font-weight: var(--font-weight-bold);
}

.quantity-selector button:hover {
    background: var(--primary-gold);
    color: var(--primary-black);
}

.quantity-selector span {
    min-width: 30px;
    text-align: center;
    font-weight: var(--font-weight-semibold);
}

/* ========== FOTÓGRAFO (avatar e nome em linha) ========== */
.photographer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.photographer-info {
    display: flex;
    flex-direction: column;
}

.photographer-info h4,
.photographer-info strong {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
}

.photographer-info p,
.photographer-info small {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* ========== TABS ========== */
.results-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
    gap: 8px;
    background: var(--gray-100);
    border-radius: var(--border-radius-lg);
    padding: 8px;
}

.tab-btn {
    background: transparent;
    border: none !important;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-medium);
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition);
}

.tab-btn.active,
.tab-btn:hover {
    background: var(--primary-gold);
    color: var(--primary-black);
}

/* ========== SEÇÕES MODERNAS ========== */

/* Section Badge */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold-light);
    color: var(--primary-gold);
    padding: 8px 16px;
    border-radius: var(--border-radius-xl);
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 16px;
    border: 1px solid rgba(255, 183, 0, 0.2);
}

.section-badge i {
    font-size: 1rem;
}

/* Section Footer */
.section-footer {
    text-align: center;
    margin-top: 60px;
}

/* ========== CONCURSOS ========== */
.section-concursos {
    background: var(--gray-100);
}

.concursos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 48px;
}

@media (min-width: 1200px) {
    .concursos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.concurso-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.concurso-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--gray-200);
    /* height: 250px; */
    cursor: pointer;
}

.concurso-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border: solid 1px var(--primary-gold);
}

.concurso-image {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.concurso-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
    /* filter: blur(2px); */
}

.concurso-card:hover .concurso-image img {
    transform: scale(1.05);
    /* filter: blur(0px); */
    /* filter: brightness(0.35) opacity(0.75); */
}

.concurso-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--primary-gold);
    color: var(--primary-black);
    padding: 4px 12px;
    border-radius: var(--border-radius-xl);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
}

.concurso-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--gray-500);
}

.meta-item i {
    color: var(--primary-gold);
    width: 16px;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* ========== TESTIMONIAL ========== */
.section-testimonial {
    background: linear-gradient(135deg, rgb(10 10 10 / 94%) 0%, rgb(10 10 10 / 94%) 100%);
    color: var(--white);
}

/* ========== POR QUE PARTICIPAR? ========== */
.section-participar {
    /* mesma cor de fundo da section de depoimentos */
    background: linear-gradient(135deg, rgb(10 10 10 / 94%) 0%, rgb(10 10 10 / 94%) 100%);
    color: var(--white);
}

.participar-box {
    border: 2px solid var(--primary-gold);
    /* border-radius: 8px; */
    padding: 48px 40px 56px 40px;
}

.section-participar .section-header {
    max-width: none;
    margin-bottom: 48px;
}

.section-participar .section-title {
    color: var(--primary-gold);
}

.section-participar .section-title::after {
    display: none;
}

.participar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
}

.participar-item {
    text-align: center;
}

.participar-icon {
    font-size: 2.5rem;
    color: var(--primary-gold);
    margin-bottom: 24px;
    line-height: 1;
}

.participar-titulo {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--white);
    margin-bottom: 16px;
}

.participar-texto {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(255 255 255 / 85%);
}

@media (max-width: 992px) {
    .participar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 32px;
    }
}

@media (max-width: 576px) {
    .participar-box {
        padding: 40px 24px;
    }

    .participar-grid {
        grid-template-columns: 1fr;
    }
}

.testimonial-card {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.testimonial-quote {
    position: relative;
    margin-bottom: 40px;
}

.testimonial-quote i {
    font-size: 3rem;
    color: var(--primary-gold);
    opacity: 0.3;
    margin-bottom: 24px;
}

.testimonial-quote blockquote {
    font-size: 1.4rem;
    line-height: 1.6;
    font-style: italic;
    font-weight: var(--font-weight-light);
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.testimonial-author img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--primary-gold);
}

.author-info h4 {
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 4px;
}

.author-info p {
    color: var(--gray-300);
    margin-bottom: 12px;
}

.author-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    background: rgba(255, 183, 0, 0.1);
    color: var(--primary-gold);
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
}

/* ========== JUROS ========== */
.mentores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px 32px;
    margin-top: 48px;
    margin-bottom: 48px;
}

.mentor-card {
    text-align: center;
    transition: var(--transition);
}

.mentor-card:hover {
    transform: translateY(-8px);
}

/* Foto oval orgânica com moldura dourada */
.mentor-photo {
    position: relative;
    width: 330px;
    /* height: 325px; */
    margin: 0 auto 20px;
    border-radius: 58% 42% 54% 46% / 56% 48% 52% 44%;
    overflow: hidden;
    border: 4px solid var(--primary-gold);
    box-shadow: var(--shadow);
    margin-bottom: -8px;
}

/* Formas orgânicas únicas por card */
.mentor-card:nth-child(2) .mentor-photo {
    border-radius: 48% 52% 44% 56% / 44% 60% 40% 56%;
}
.mentor-card:nth-child(3) .mentor-photo {
    border-radius: 55% 45% 50% 50% / 48% 54% 46% 52%;
}
.mentor-card:nth-child(4) .mentor-photo {
    border-radius: 46% 54% 52% 48% / 54% 46% 55% 45%;
}

.mentor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Contatos aparecem só no hover, sobrepostos à foto */
.mentor-social {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mentor-card:hover .mentor-social {
    opacity: 1;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--primary-gold);
    color: var(--primary-black);
    border-radius: 50%;
    font-size: 1.25rem;
    transition: var(--transition);
}

.social-icon:hover {
    transform: scale(1.1);
    background: var(--gold-hover);
}

.social-icon-whatsapp {
    background: #25d366;
    color: var(--white);
}

.social-icon-whatsapp:hover {
    background: #1da851;
}

/* Nome do mentor — sobrepõe a borda inferior da foto */
.mentor-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 1rem;
    border-radius: 18px;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: var(--transition);
    border: 2px solid var(--primary-gold);
    background: var(--primary-gold);
    color: var(--primary-black);
    cursor: pointer;
    margin: -22px auto 0;
    position: relative;
    z-index: 2;
    gap: 6px;
}

.mentor-name:hover {
    background: var(--gold-hover);
    border-color: var(--gold-hover);
    transform: translateY(-1px);
}

/* ========== BLOG ========== */
.section-blog {
    background: var(--gray-100);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.blog-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--gray-200);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.blog-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--primary-gold);
    color: var(--primary-black);
    padding: 4px 12px;
    border-radius: var(--border-radius-xl);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
}

.blog-content {
    padding: 24px;
}

.blog-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--gray-500);
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.blog-content h3 {
    font-size: 1.3rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 12px;
    color: var(--primary-black);
    line-height: 1.4;
}

.blog-content p {
    color: var(--gray-600);
    margin-bottom: 20px;
    line-height: 1.6;
}

.blog-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tag {
    background: var(--gray-100);
    color: var(--gray-600);
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
}



/* ========== CTA FINAL ========== */
.section-cta {
    background: linear-gradient(135deg, rgb(10 10 10 / 94%) 0%, rgb(10 10 10 / 94%) 100%);
    color: var(--white);
    text-align: center;
    padding-bottom: 80px;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 24px;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.cta-benefits {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
}

.benefit-item i {
    color: var(--primary-gold);
    font-size: 1.2rem;
}

/* ========== FOOTER ========== */
.footer {
    background: #000000;
    color: var(--white);
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h4 {
    color: var(--primary-gold);
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 20px;
}

.footer-section p {
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 0.9rem;
}

.footer-section a {
    display: block;
    color: var(--gray-300);
    margin-bottom: 8px;
    transition: var(--transition);
    font-size: 0.9rem;
}

.footer-section a:hover {
    color: var(--primary-gold);
}

.footer-section a i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.span-copyright {
    display: flex;
    align-items: center;
    justify-content: center;
}

.span-copyright img {
    width: 20px;
    margin-right: 2px;
    margin-left: 5px;
}

.social-links {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.7rem;
    transition: var(--transition);
}

.social-link:hover {
    transform: scale(1.1);
}

/* Cores nativas das redes sociais */
.social-link .fa-instagram {
    color: #E4405F;
}

.social-link .fa-youtube {
    color: #FF0000;
}

.social-link .fa-facebook {
    color: #1877F2;
}

.social-link .fa-whatsapp {
    color: #25D366;
}

.social-link:hover {
    transform: scale(1.1);
}

.footer-bottom {
    border-top: 1px solid var(--gray-800);
    padding-top: 20px;
    text-align: center;
}

.footer-bottom p {
    margin-bottom: 8px;
    color: var(--gray-400);
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
}

.footer-bottom a {
    color: var(--gray-300);
}

.footer-copyright a {
    color: #5e1b92;
}

/* Link de Adesão com seta animada */
.adesao-link {
    position: relative;
    transition: var(--transition);
}

.adesao-arrow {
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-gold);
    font-size: 0.8rem;
    opacity: 1;
    transition: var(--transition);
    animation: arrow-idle 2s ease-in-out infinite;
}

.adesao-link {
    color: var(--primary-gold);
    padding-right: 6px;
}

.adesao-link:hover .adesao-arrow {
    animation: arrow-hover 0.6s ease-in-out infinite;
}

@keyframes arrow-idle {

    0%,
    100% {
        transform: translateY(-50%) translateX(0);
    }

    50% {
        transform: translateY(-50%) translateX(2px);
    }
}

@keyframes arrow-hover {

    0%,
    100% {
        transform: translateY(-50%) translateX(0);
    }

    50% {
        transform: translateY(-50%) translateX(4px);
    }
}

.footer-bottom a:hover {
    color: var(--primary-gold);
}

/* ========== ANIMAÇÕES ========== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fadeUp 0.6s ease-out forwards;
}

/* ========== UTILITÁRIOS ========== */
.text-center {
    text-align: center;
}


.flex-1 {
    flex: 1;
}

.d-flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.m-0 {
    margin: 0;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mt-5 {
    margin-top: 3rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}


.w-100 {
    width: 100%;
}


.text-primary {
    color: var(--primary-gold);
}

.text-muted {
    color: var(--gray-500);
}

/* ========== RESPONSIVIDADE REMOVIDA ========== */

/* ========== ANIMAÇÕES DE SCROLL ========== */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.scroll-animate.animate {
    opacity: 1;
    transform: translateY(0);
}


/* Seções acima do footer */
.section-pre-footer {
    padding-bottom: 80px;
}

/* ========== MEMBER PROFILE PAGE ========== */
.member-profile {
    padding: 0 0 48px;
}

.member-profile-card {
    margin-top: 32px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.member-profile-banner {
    margin: 0;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: clamp(260px, 45vw, 420px);
    max-height: clamp(360px, 70vh, 620px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: linear-gradient(135deg, rgba(28, 28, 28, 0.9) 0%, rgba(52, 52, 52, 0.85) 100%); */
    overflow: hidden;
}

.member-profile-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s ease;
}

.member-profile-banner.is-landscape img {
    object-fit: contain;
}

.member-profile-banner.is-portrait {
    aspect-ratio: 3 / 4;
    max-height: clamp(420px, 80vh, 720px);
    /* background: #000; */
    padding: 1.5rem 0;
}

.member-profile-banner.is-portrait img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
}

.member-profile-banner.is-placeholder {
    background: linear-gradient(135deg, #1f2937 0%, #0f172a 100%);
}

.member-profile-body {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2.25rem 2.25rem 2.75rem;
    align-items: flex-start;
    border-radius: 24px;
}

.member-profile-avatar-block {
    flex: 0 0 220px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.member-profile-avatar {
    width: 11.5rem;
    height: 11.5rem;
    border-radius: 50%;
    border: 6px solid var(--white);
    overflow: hidden;
    margin: 0 auto;
    background: var(--white);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.15);
}

.member-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Avatar-fallback do perfil (sem foto): iniciais sobre cor determinística */
.member-profile-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white, #fff);
    font-weight: 700;
    font-size: 4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    user-select: none;
}

.member-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 0.45rem 1.2rem;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1;
}

.member-status--active {
    background: #1cc88a;
}

.member-status--inactive {
    background: #858796;
}

.member-profile-content {
    flex: 1 1 0;
    min-width: 0;
}

.member-profile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.member-profile-heading {
    display: flex;
    flex-direction: column;
    /* gap: 0.85rem; */
}

.member-profile-name {
    margin: 0;
    font-size: 2.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-black);
}

.member-profile-location {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 1.05rem;
}

.member-profile-location i {
    color: var(--primary-gold);
    margin-right: 8px;
}

.member-profile-location-text {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.member-profile-location .dot-separator {
    margin: 0 0.35rem;
    color: var(--gray-400);
}

.member-profile-links {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.member-profile-links:empty {
    display: none;
}

.member-profile-highlights {
    margin-top: 2rem;
    display: grid;
    gap: 1.25rem;
}

.member-highlight {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--gray-200);
    text-decoration: none;
    color: inherit;
    display: block;
}

.member-highlight:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-gold);
    text-decoration: none;
    color: inherit;
}

.member-highlight-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--primary-black);
    margin-bottom: 0.85rem;
}

.member-highlight-label i {
    color: var(--primary-gold);
    font-size: 1.1rem;
}

.member-highlight-text {
    color: var(--gray-700);
    line-height: 1.7;
}

.member-highlight-text br {
    margin-bottom: 0.5rem;
}

.member-awards {
    padding: 56px 0 88px;
}

.awards-section+.awards-section {
    margin-top: 40px;
}

@media (max-width: 1199.98px) {
    .member-profile-name {
        font-size: 2rem;
    }
}

@media (max-width: 991.98px) {
    .member-profile-banner {
        aspect-ratio: 16 / 9;
        min-height: clamp(240px, 52vw, 420px);
        max-height: clamp(320px, 65vh, 560px);
    }

    .member-profile-card {
        margin-top: 28px;
    }

    .member-profile-body {
        padding: 2.25rem 2rem 2.75rem;
    }
}

@media (max-width: 767.98px) {
    .member-profile-card {
        margin-top: 24px;
    }

    .member-profile-avatar-block,
    .member-profile-content {
        flex: 1 1 100%;
    }

    .member-profile-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .member-profile-links {
        justify-content: center;
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .member-profile {
        padding: 24px 0 24px;
    }

    .member-profile-body {
        padding: 2rem 1.5rem 2.5rem;
        gap: 2rem;
    }

    .member-profile-name {
        font-size: 1.75rem;
    }
}

.awards-header .awards-title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
}

.awards-header .awards-subtitle {
    color: var(--gray-600);
    margin-bottom: 16px;
}

.awards-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 280px);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
}

.awards-carousel::-webkit-scrollbar {
    height: 8px;
}

.awards-carousel::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 10px;
}

.award-card {
    display: block;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
    scroll-snap-align: start;
    transition: var(--transition);
}

.award-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-gold);
}

.award-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

@media (min-width: 992px) {
    .member-profile-banner {
        height: 30rem;
    }

    .award-card img {
        height: 240px;
    }
}

.contato-icones {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.icone-contato {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background: var(--white);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icone-contato:hover {
    text-decoration: none;
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(52, 58, 64, 0.2);
}

.icone-contato i {
    font-size: 1.5rem;
    line-height: 1;
}

.especialidades-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;

}

.especialidade-badge {
    background: var(--primary-gold);
    color: var(--primary-black);
    border-color: var(--primary-gold);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 14px;
    cursor: auto;
}

/* ========== MODAL DE AUTENTICAÇÃO (HOTSITE) ========== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    backdrop-filter: blur(2px);
}

.modal-overlay.open {
    display: flex;
}

.modal-card {
    width: 100%;
    max-width: 460px;
    background: #101010;
    color: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header h3 {
    margin: 0;
    font-weight: var(--font-weight-bold);
}

.modal-body {
    padding: 20px;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    color: var(--white);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.auth-alt-links {
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.auth-alt-link {
    color: var(--white);
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    width: auto;
    justify-content: center;
}

.auth-alt-link:hover {
    color: var(--white);
    text-decoration: underline;
}

.auth-step.hidden {
    display: none;
}

/* O wizard de cadastro esconde etapas e botões com a classe .hidden. Não havia
   regra universal para .hidden (só .auth-step.hidden), então sem isto as 4
   etapas apareciam empilhadas de uma vez. */
.cadastro-etapa.hidden,
.cadastro-nav .hidden {
    display: none;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.form-row label {
    font-size: 0.9rem;
    color: #d5d5d5;
}

.form-row input {
    background: #1a1a1a;
    border: 1px solid #2a2a2a !important;
    border-radius: 10px;
    color: var(--white);
    padding: 12px 14px;
}

.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.auth-feedback {
    text-align: center;
    margin-top: 6px;
    font-size: 0.9rem;
}

.auth-feedback.error {
    color: #ff6961;
}

/* Aviso neutro do modal — "entre para continuar" de quem veio de área restrita.
   Não é erro nem sucesso: é a explicação de por que o login abriu sozinho. */
.auth-feedback.info {
    color: #ffb700;
}

.auth-feedback.success {
    color: #7CFC00;
}

.modal-card .card-header h3 {
    display: inline-flex;
    align-items: center;
    /* gap: 10px; */
    color: var(--white);
}

.modal-card .card-header h3::before {
    content: '🔒';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* background: var(--primary-gold); */
    color: var(--primary-black);
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.no-scroll {
    overflow: hidden !important;
}

/* ========== CONCURSOS (GRID & CARDS) ========== */
/* Styles for Hotsite Start & Open Contests */

.concursos-grid,
.concursos-carousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    width: 100%;
    margin-top: 1rem;
}

.concursos-carousel-wrapper .concursos-carousel,
.concursos-grid-wrapper .concursos-grid {
    margin: 0 auto;
}

.concurso-card-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
    flex: 0 1 350px;
    min-width: 280px;
    max-width: 100%;
}

.concurso-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--gray-200);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.concurso-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-gold);
}

.concurso-image {
    position: relative;
    overflow: hidden;
    height: 200px;
    width: 100%;
    background-color: #f8f9fc;
}

.concurso-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.concurso-card:hover .concurso-image img {
    transform: scale(1.05);
}

.concurso-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--primary-gold);
    color: var(--primary-black);
    padding: 4px 12px;
    border-radius: var(--border-radius-xl);
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .concursos-grid,
    .concursos-carousel {
        gap: 20px;
    }

    .concurso-card-link {
        flex: 1 1 100%;
        max-width: 400px; /* Optional: limit max width on mobile so it doesn't look too stretched */
    }

    .concurso-image {
        height: 180px;
    }
}

/* ============================================================
   HOTSITE - BANNERS DA HOME (carrossel multi-item)
   ============================================================ */
.section-banners-home {
    background: var(--gray-100);
    padding: 60px 0 40px;
}

.section-banners-home .section-header {
    margin-bottom: 24px;
}

.banners-swiper-wrapper {
    position: relative;
    padding: 0 50px;
}

.banners-swiper {
    overflow: hidden;
    padding: 12px 4px 56px;
}

.banner-card {
    display: block;
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--gray-200);
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.banner-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: inherit;
}

.banner-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gray-200);
}

.banner-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.banner-card:hover .banner-card-image img {
    transform: scale(1.04);
}

.banner-card-body {
    padding: 18px 22px 22px;
}

.banner-card-title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--primary-black);
    margin: 0 0 6px;
    line-height: 1.35;
}

.banner-card-subtitle {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.45;
}

/* Swiper navigation + pagination — tema dourado para todos os carrosseis */
.hotsite-swiper .swiper-button-prev,
.hotsite-swiper .swiper-button-next {
    color: var(--primary-gold);
    width: 44px;
    height: 44px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: var(--shadow);
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
    transition: var(--transition);
}

.hotsite-swiper .swiper-button-prev:hover,
.hotsite-swiper .swiper-button-next:hover {
    background: var(--primary-gold);
    color: var(--primary-black);
}

.hotsite-swiper .swiper-button-prev::after,
.hotsite-swiper .swiper-button-next::after {
    font-size: 1.1rem;
    font-weight: 800;
}

.hotsite-swiper .swiper-button-prev { left: 0; }
.hotsite-swiper .swiper-button-next { right: 0; }

.hotsite-swiper .swiper-pagination {
    bottom: 12px;
}

.hotsite-swiper .swiper-pagination-bullet {
    background: var(--gray-400);
    opacity: 0.6;
    width: 10px;
    height: 10px;
    transition: var(--transition);
}

.hotsite-swiper .swiper-pagination-bullet-active {
    background: var(--primary-gold);
    opacity: 1;
    width: 28px;
    border-radius: 5px;
}

/* Depoimentos em carrossel — setas e paginação fora do .swiper, sem overlap */
.depoimentos-swiper-outer {
    max-width: 1000px;
    margin: 32px auto 0;
}

.depoimentos-swiper-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.depoimentos-swiper {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 8px 4px 0;
}

.depoimentos-swiper .swiper-slide {
    height: auto;
}

.depoimentos-swiper .testimonial-card {
    max-width: 800px;
    margin: 0 auto;
}

/* Altura FIXA e padrão para todos os slides (sem autoHeight no Swiper, os
   slides esticam por flex a esta altura). O autor fica ancorado embaixo e o
   texto ocupa o espaço restante; depoimentos longos (ex.: Nyl Lima) rolam
   dentro do próprio card em vez de esticar a caixa. */
.section-testimonial .testimonial-card {
    display: flex;
    height: 440px;
}

.section-testimonial .testimonial-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* depoimentos curtos ficam centralizados na caixa */
    gap: 28px;
    width: 100%;
}

.section-testimonial .testimonial-quote {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto; /* encolhe só quando o texto é grande (aí o blockquote rola) */
    min-height: 0;
    margin-bottom: 0; /* o gap do flex substitui os 40px */
}

.section-testimonial .testimonial-quote i {
    flex: none; /* o ícone de aspas não encolhe quando o texto rola */
}

.section-testimonial .testimonial-quote blockquote {
    font-size: 1.15rem;
    line-height: 1.7;
    /* ocupa a altura restante do card e rola quando o texto é grande */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 183, 0, 0.45) transparent;
}

.section-testimonial .testimonial-quote blockquote::-webkit-scrollbar {
    width: 6px;
}

.section-testimonial .testimonial-quote blockquote::-webkit-scrollbar-thumb {
    background: rgba(255, 183, 0, 0.45);
    border-radius: 3px;
}

.section-testimonial .testimonial-quote blockquote::-webkit-scrollbar-thumb:hover {
    background: var(--primary-gold);
}

.section-testimonial .testimonial-author {
    flex-shrink: 0;
}

/* Setas fora do swiper — flex siblings, sempre centralizadas com o card */
.depoimentos-swiper-wrapper .swiper-button-prev,
.depoimentos-swiper-wrapper .swiper-button-next {
    position: static !important;
    transform: none !important;
    flex-shrink: 0;
    color: var(--primary-gold);
    background: rgba(255, 255, 255, 0.08);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 183, 0, 0.3);
    margin-top: 0;
    transition: var(--transition);
}

.depoimentos-swiper-wrapper .swiper-button-prev:hover,
.depoimentos-swiper-wrapper .swiper-button-next:hover {
    background: var(--primary-gold);
    color: var(--primary-black);
    border-color: var(--primary-gold);
}

.depoimentos-swiper-wrapper .swiper-button-prev::after,
.depoimentos-swiper-wrapper .swiper-button-next::after {
    font-size: 1rem;
    font-weight: 800;
}

/* Paginação fora do .swiper — abaixo do wrapper de setas, sem overlap */
.depoimentos-pagination {
    position: static !important;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.depoimentos-pagination .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4);
    opacity: 1;
    width: 10px;
    height: 10px;
}

.depoimentos-pagination .swiper-pagination-bullet-active {
    background: var(--primary-gold);
    width: 28px;
    border-radius: 5px;
}

/* Responsivo — carrosseis */
@media (max-width: 768px) {
    .banners-swiper-wrapper,
    .depoimentos-swiper-wrapper {
        padding: 0 12px;
    }

    .hotsite-swiper .swiper-button-prev,
    .hotsite-swiper .swiper-button-next,
    .depoimentos-swiper-wrapper .swiper-button-prev,
    .depoimentos-swiper-wrapper .swiper-button-next {
        display: none;
    }

    .section-testimonial .testimonial-content {
        gap: 24px;
    }
}

/* ==========================================================================
   Modal da Área do Fotógrafo (view/hotsite/snippets/auth-modal.html)
   Vinha de um <style> embutido no header; .btn-block e .auth-divider saíram
   por serem, respectivamente, duplicata e regra sem uso.
   ========================================================================== */

.modal-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.modal-icon svg {
    width: 56px;
    height: 56px;
    stroke: var(--primary-gold);
    stroke-width: 1.5;
}

.back-arrow-svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
    margin-bottom: 2px;
}

.auth-alt-link.text-muted {
    display: inline-flex;
    align-items: center;
}

/* ========== SEÇÃO PLANOS / ADESÃO (fundida com CTA) ========== */
.section-planos {
    /* fundo herdado de .section-cta — não redefinir aqui */
}

.planos-trofeu {
    font-size: 2.5rem;
    color: var(--primary-gold);
    margin-bottom: 16px;
}

/* Na seção fundida o .cta-content já tem margin-bottom pequeno;
   os cards ficam logo abaixo dos benefits. */
.section-planos .cta-content {
    margin-bottom: 48px;
}

.section-planos .cta-content h2 {
    color: var(--white);
}

.section-planos .cta-content h2 .text-gold {
    color: var(--primary-gold);
}

.planos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
}

.plano-card {
    display: flex;
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    min-height: 540px;
}

.plano-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.plano-badge {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    background: var(--primary-gold);
    color: var(--primary-black);
    font-weight: var(--font-weight-bold);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 20px 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plano-body {
    padding: 28px 20px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.plano-icon {
    font-size: 1.6rem;
    color: var(--primary-black);
    margin-bottom: 8px;
}

.plano-nome {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-800);
    line-height: 1.2;
}

.plano-sub {
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-black);
    margin-bottom: 12px;
    text-decoration: underline;
    text-decoration-color: var(--primary-gold);
    text-underline-offset: 3px;
}

.plano-preco-de {
    font-size: 0.9rem;
    color: var(--gray-500);
    text-decoration: line-through;
    margin-bottom: 2px;
}

.plano-preco {
    font-size: 2.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-black);
    line-height: 1;
    margin-bottom: 2px;
}

.plano-moeda {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    vertical-align: super;
    line-height: 1;
}

.plano-periodo {
    font-size: 0.82rem;
    color: var(--gray-500);
    margin-bottom: 20px;
}

.plano-beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plano-beneficios li {
    font-size: 0.82rem;
    color: var(--gray-700);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    border-bottom: 1px dotted var(--gray-300);
    padding-bottom: 6px;
    line-height: 1.4;
}

.plano-beneficios li:last-child {
    border-bottom: none;
}

.plano-beneficios li i {
    color: var(--primary-gold);
    font-size: 0.75rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.btn-plano {
    display: block;
    text-align: center;
    background: var(--primary-gold);
    color: var(--primary-black);
    font-weight: var(--font-weight-bold);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    padding: 14px 16px;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: var(--transition);
    margin-top: auto;
}

.btn-plano:hover {
    background: var(--gold-hover);
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    .planos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .planos-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== PÁGINA 404 ==========
   Atalhos que a página de erro oferece no lugar do conteúdo que não existe.
   Fica aqui (e não num CSS próprio) porque o 404 pode responder em qualquer
   URL do site e não vale um request a mais numa página de erro. */
.erro-404-atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.erro-404-atalho {
    display: block;
    padding: 1.6rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    transition: var(--transition);
    color: inherit;
}

.erro-404-atalho:hover {
    transform: translateY(-4px);
    border-color: var(--primary-gold);
    box-shadow: var(--shadow);
}

.erro-404-atalho h3 {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.35rem;
}

.erro-404-atalho p {
    color: var(--gray-500);
    font-size: 0.9rem;
    margin: 0;
}

/* ========== CADASTRO POR ETAPAS (modal de autenticação) ========== */
.cadastro-progresso {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 18px;
}

.cadastro-progresso-passo {
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: var(--gray-300);
    transition: var(--transition-fast);
}

.cadastro-progresso-passo.is-atual {
    background: var(--primary-gold);
}

.cadastro-etapa-titulo {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--primary-gold);
    margin-bottom: 14px;
    text-align: center;
}

.cadastro-label {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    margin-bottom: 6px;
}

/* Uploads de foto/capa */
.cadastro-uploads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.cadastro-upload {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px dashed var(--gray-400);
    border-radius: var(--border-radius);
    cursor: pointer;
    text-align: center;
    transition: var(--transition-fast);
}

.cadastro-upload:hover {
    border-color: var(--primary-gold);
    background: var(--gold-light);
}

.cadastro-upload input[type="file"] {
    display: none;
}

.cadastro-upload-rotulo {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
}

.cadastro-upload-nome {
    font-size: 0.75rem;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Navegação entre etapas */
.cadastro-nav {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.cadastro-nav .cadastro-avancar,
.cadastro-nav .cadastro-finalizar {
    flex: 1;
}

@media (max-width: 480px) {
    .cadastro-uploads {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   PÁGINAS LEGAIS (/privacidade, /termos)

   Documento longo: índice lateral grudado + uma folha de
   leitura branca sobre o cinza, como os .card do resto do
   site. O índice é o que torna a página usável — ninguém
   lê documento legal do começo ao fim, procura-se a seção
   ("como excluo minha conta", "tem reembolso?").
   Comportamento em public/js/hotsite-legal.js.
   ===================================================== */
.section-legal {
    /* .section-light fecha com 10px embaixo, o que serve para uma grade de
       cards e cola o fim do documento no rodapé preto. */
    padding: 56px 0 76px;
}

.legal-wrap {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    max-width: 1140px;
    margin: 0 auto;
}

/* Regulamento de concurso/coleção: documento sem índice lateral (o texto vem do
   Summernote, sem âncoras para montar TOC). Vira coluna única centralizada, com o
   mesmo cartão das páginas legais. */
.legal-wrap--doc-unico {
    grid-template-columns: minmax(0, 1fr);
    max-width: 900px;
}

.legal-wrap--doc-unico .legal-doc {
    max-width: none;
}

/* ---------- Índice ---------- */
/* É um <details> por causa do celular, onde a lista aberta empurraria o
   documento inteiro para fora da dobra. No desktop o JS mantém aberto e o
   marcador do <summary> some. */
.legal-toc {
    position: sticky;
    top: 24px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 20px 16px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.legal-toc__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-500);
    padding: 0 6px 12px;
    list-style: none;
    cursor: default;
}

.legal-toc__titulo::-webkit-details-marker {
    display: none;
}

.legal-toc__titulo i {
    color: var(--primary-gold);
}

/* Dois seletores de propósito: o Font Awesome entra no <head> DEPOIS do
   hotsite.css e o `.fas { display: inline-block }` dele empata em
   especificidade com uma classe só — e ganha por ordem de origem. */
.legal-toc .legal-toc__seta {
    margin-left: auto;
    display: none;
    transition: var(--transition-fast);
}

.legal-toc a {
    display: block;
    padding: 7px 10px;
    border-left: 2px solid var(--gray-200);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--gray-600);
}

.legal-toc a:hover {
    color: var(--primary-black);
    background: var(--gray-100);
    border-left-color: var(--gray-400);
}

.legal-toc a.is-active {
    color: var(--primary-black);
    font-weight: var(--font-weight-semibold);
    border-left-color: var(--primary-gold);
    background: var(--gold-light);
}

/* ---------- Documento ---------- */
.legal-doc {
    max-width: 820px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 40px 48px 44px;
    line-height: 1.75;
    font-size: 16px;
    color: var(--gray-800);
}

.legal-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 6px 14px;
    border-radius: var(--border-radius-xl);
    background: var(--gray-100);
    font-size: 13px;
    color: var(--gray-600);
}

.legal-meta i {
    color: var(--primary-gold);
}

.legal-doc h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 44px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 21px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    color: var(--primary-black);
    /* o link do índice não pode parar com o título colado no topo da tela */
    scroll-margin-top: 24px;
}

.legal-doc h2:first-of-type {
    margin-top: 30px;
}

.legal-num {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-gold);
    color: var(--primary-black);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.legal-doc p {
    margin: 0 0 16px;
}

/* O reset global (`ul, ol { list-style: none }`) apaga o marcador no site
   inteiro. Aqui a lista precisa se distinguir do texto corrido — sem bolinha
   ela vira parágrafo indentado e o documento fica uma parede só. */
.legal-doc ul {
    list-style: disc;
    margin: 0 0 20px;
    padding-left: 24px;
}

.legal-doc li {
    margin-bottom: 10px;
    padding-left: 4px;
}

.legal-doc li::marker {
    color: var(--primary-gold);
}

/* Ouro puro sobre branco dá ~1,9:1 de contraste e some para quem enxerga
   pouco — num documento em que o link é o canal de exercer um direito, a
   versão escura do mesmo tom (5,6:1) é obrigatória. É o mesmo #8a5f00 de
   --nx-goldtxt: o #9a6a00 de antes caía a 4,46:1 na nota amarelada. */
.legal-doc a:not(.btn) {
    color: #8a5f00;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: var(--font-weight-medium);
}

.legal-doc a:not(.btn):hover {
    color: var(--primary-black);
}

/* Folga horizontal curta: o "(a preencher)" aparece dentro de parênteses e
   antes de vírgula ("(<mark>, CNPJ <mark>)"), e 6px de cada lado descolavam
   a pontuação do texto. */
.legal-doc mark {
    background: #ffe9a8;
    padding: 1px 3px;
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-semibold);
}

/* A frase que o leitor tem que achar passando o olho: de quem é a foto, o
   que nunca é publicado, o prazo para desistir. */
.legal-nota {
    margin: 0 0 20px;
    padding: 16px 20px;
    background: var(--gold-light);
    border-left: 3px solid var(--primary-gold);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    font-size: 15px;
}

.legal-nota p:last-child {
    margin-bottom: 0;
}

.legal-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 44px;
    padding-top: 26px;
    border-top: 2px solid var(--gray-200);
}

.legal-rodape p {
    margin: 0;
    font-size: 15px;
    color: var(--gray-600);
}

/* ---------- Responsivo ---------- */
@media (max-width: 991px) {
    .legal-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .legal-toc {
        position: static;
        max-height: none;
    }

    .legal-toc__titulo {
        padding-bottom: 0;
        cursor: pointer;
    }

    .legal-toc[open] .legal-toc__titulo {
        padding-bottom: 12px;
    }

    .legal-toc .legal-toc__seta {
        display: block;
    }

    .legal-toc[open] .legal-toc__seta {
        transform: rotate(180deg);
    }

    .legal-doc {
        padding: 32px 28px 36px;
    }
}

@media (max-width: 600px) {
    .section-legal {
        padding: 36px 0 56px;
    }

    .legal-doc {
        font-size: 15px;
        padding: 26px 20px 30px;
    }

    .legal-doc h2 {
        font-size: 18px;
        gap: 10px;
        margin-top: 36px;
    }

    .legal-num {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .legal-rodape .btn {
        width: 100%;
    }
}

/* Documento legal é o tipo de página que o usuário salva em PDF. */
@media print {

    .hero,
    .legal-toc,
    .legal-rodape .btn {
        display: none !important;
    }

    .section-legal {
        padding: 0;
        background: none;
    }

    .legal-wrap {
        display: block;
        max-width: none;
    }

    .legal-doc {
        max-width: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        font-size: 12pt;
    }

    .legal-doc h2 {
        break-after: avoid;
        page-break-after: avoid;
    }
}

/* =====================================================================
   HOME NOVA (23/09/2026) — aprovada em protótipo (public/_mock/home.html).
   1) Responsivo da base que veio do site atual (header, hero, planos,
      depoimentos, footer): prioridade máxima.
   2) Componentes das seções novas, prefixo nx- (não conflitam com o resto).
   Bloco no FIM do arquivo de propósito: a cascata vence tudo acima.
   ===================================================================== */

/* ---------- 1. Responsivo da base (celular e tablet) ---------- */
.nav-toggle { display: none; }
.nav-link-auth { display: none; }
@media (max-width: 1024px) {
    /* barra de 56px: logo + nome | login | menu */
    .header { padding: 0; position: sticky; top: 0; z-index: 1000; }
    .header .container { padding: 0 16px; }
    .header-content { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; }
    .header-brand { flex-direction: row; align-items: center; gap: 10px; text-align: left; min-width: 0; }
    .logo-container { box-shadow: none; }
    .header-logo { width: 38px; height: 38px; }
    .header-title { font-size: 1rem; letter-spacing: 0; margin: 0; line-height: 1; white-space: nowrap; }
    .header-subtitle { display: none; }
    .header-actions { position: static; gap: 8px; flex: 0 0 auto; }
    .auth-link { padding: 0 12px; height: 36px; font-size: 0; gap: 0; box-shadow: none; }
    .auth-link::after { content: 'Entrar'; font-size: 0.85rem; }
    .auth-user { padding: 3px; border: 0; background: none; backdrop-filter: none; }
    .auth-user .auth-name { display: none; }
    .auth-avatar { width: 34px; height: 34px; }
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; padding: 0; border-radius: 10px;
        background: rgba(255, 255, 255, 0.08); color: var(--white); cursor: pointer;
        position: relative; z-index: 1110;
    }
    .nav-toggle svg { width: 22px; height: 22px; }
    .nav-toggle .ico-close { display: none; }
    body.nav-open .nav-toggle .ico-open { display: none; }
    body.nav-open .nav-toggle .ico-close { display: block; }
    /* gaveta: mesmo #main-nav, fora da tela até abrir */
    .nav {
        position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 320px);
        margin: 0; padding: 72px 16px 24px; flex-direction: column; align-items: stretch;
        justify-content: flex-start; gap: 2px; background: rgb(10 10 10);
        transform: translateX(100%); transition: transform 0.25s ease; z-index: 1100;
        overflow-y: auto;
    }
    /* A sombra só com a gaveta aberta: fechada ela fica fora da tela, mas os 40px de
       desfoque vazavam na borda direita como um véu sobre toda página (09/10/2026). */
    .nav.is-open { transform: none; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5); }
    .nav-link { font-size: 1.02rem; padding: 13px 14px; border-radius: 10px; text-align: left; white-space: normal; }
    .nav-link-destaque { text-align: center; margin: 8px 0; }
    .nav-link-destaque:hover { transform: none; }
    .nav-link-auth { display: block; margin-top: 12px; border: 1px solid rgba(255, 255, 255, 0.15); text-align: center; }
    .nav-loja { height: auto; padding: 13px 14px; border-radius: 10px; }
    .nav-loja-label { max-width: none; opacity: 1; }
    /* Gaveta: sem hover em toque — as 2 opções do dropdown ficam sempre
       visíveis, indentadas abaixo de "Resultados +", sem nenhum JS novo. */
    .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        min-width: 0;
        margin: 0 0 4px 14px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .nav-dropdown-item {
        padding: 9px 14px;
        font-size: 0.92rem;
        border-left: 2px solid rgba(255, 255, 255, 0.15);
        border-radius: 0 10px 10px 0;
    }
    /* Aba travada: sem hover em toque, o "Em breve" fica escrito ao lado do rótulo. */
    .nav-link-soon::after,
    .nav-link-soon:hover::after,
    .nav-link-soon:focus::after {
        position: static; display: inline-block; margin-left: 8px;
        transform: none; opacity: 1; vertical-align: middle;
    }
    .nav-link-soon::before { display: none; }
    body.nav-open { overflow: hidden; }
    /* z-index ABAIXO do header (1000): o header é sticky e cria um contexto de empilhamento,
       então a gaveta (dentro dele) nunca fica acima de um fundo com índice maior que 1000. */
    body.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 990; }
    /* hero da home: reduzido */
    .hero-modern { padding: 20px 0 40px; }
    .hero-modern .hero-content { padding-top: clamp(9.5rem, 46vw, 11.5rem); }
    .trophy-1st, .trophy-2nd, .trophy-3rd { top: 0; }
    .trophy-icon img { margin-top: 16px !important; }
    .trophy-1st img { width: clamp(110px, 30vw, 150px); height: auto; }
    .trophy-2nd img, .trophy-3rd img { width: clamp(80px, 22vw, 110px); height: auto; margin-top: 44px !important; opacity: 0.9; }
    .trophy-2nd { margin-left: clamp(-120px, -30vw, -95px); }
    .trophy-3rd { margin-left: clamp(95px, 30vw, 120px); }
    .hero-title { font-size: clamp(1.5rem, 5.6vw, 2.2rem); margin: 0 0 12px; gap: 6px; line-height: 1.15; }
    .hero-highlight { font-size: clamp(0.95rem, 3.4vw, 1.2rem); }
    .hero-subtitle { font-size: 0.92rem; margin-bottom: 20px; }
    .hero-actions { flex-direction: row; justify-content: center; gap: 8px; margin-top: 0; }
    .btn-xl { padding: 10px 14px; font-size: 0.86rem; width: auto; flex: 0 1 auto; border-radius: 999px; }
    .btn-xl i { font-size: 0.85rem; }
    /* páginas internas */
    .hero { padding: 40px 0 32px; }
    .hero-content h1 { font-size: clamp(1.4rem, 5vw, 2rem); margin-bottom: 10px; }
    .hero-content .lead { font-size: 0.92rem; }
    .section-title { font-size: clamp(1.4rem, 5vw, 2rem); }
    .section-header { margin-bottom: 28px; }
    .section-subtitle { font-size: 0.95rem; }
    /* planos (seção original): cards menores */
    .section-planos { padding: 40px 0; }
    .section-planos .cta-content { margin-bottom: 24px; }
    .planos-trofeu { font-size: 1.8rem; margin-bottom: 8px; }
    .section-planos .cta-content h2 { font-size: clamp(1.3rem, 4.6vw, 1.8rem); }
    .cta-benefits { font-size: 0.88rem; }
    .planos-grid { gap: 12px; }
    .plano-card { min-height: 0; border-radius: 12px; }
    .plano-badge { font-size: 0.66rem; padding: 12px 8px; }
    .plano-body { padding: 16px 14px 14px; }
    .plano-icon { font-size: 1.2rem; margin-bottom: 4px; }
    .plano-nome { font-size: 0.9rem; }
    .plano-sub { font-size: 0.82rem; margin-bottom: 6px; }
    .plano-preco-de { font-size: 0.78rem; }
    .plano-preco { font-size: 1.6rem; }
    .plano-periodo { font-size: 0.74rem; margin-bottom: 10px; }
    .plano-beneficios { gap: 4px; margin-bottom: 12px; }
    .plano-beneficios li { font-size: 0.76rem; padding-bottom: 4px; }
    .btn-plano { padding: 11px 12px; font-size: 0.74rem; }
    /* depoimentos (seção original) */
    .section-testimonial .testimonial-quote blockquote { font-size: 0.95rem; line-height: 1.6; }
    .section-testimonial .testimonial-quote i { font-size: 2rem; margin-bottom: 12px; }
    .testimonial-author img { width: 52px; height: 52px; }
    .author-info h4 { font-size: 0.95rem; }
    .author-info p { font-size: 0.82rem; }
    /* rodapé: fontes menores, uma coluna */
    .footer { padding: 32px 0 12px; }
    .footer-content { grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-bottom: 20px; }
    .footer-section h4 { font-size: 0.85rem; margin-bottom: 10px; }
    .footer-section p { font-size: 0.76rem; margin-bottom: 8px; }
    .footer-section a { font-size: 0.78rem; margin-bottom: 6px; }
    .social-links { gap: 10px; margin-top: 12px; }
    .social-link { width: 34px; height: 34px; font-size: 1.35rem; }
    .footer-bottom { padding-top: 12px; }
    .footer-bottom p { font-size: 0.68rem; display: block; text-align: center; line-height: 1.5; }
    /* a logo do IC no copyright e <img> (display:block global) e quebrava a linha */
    .footer-bottom img { display: inline-block; vertical-align: middle; width: 16px; height: 16px; }
    /* item de beneficio da adesao: icone e texto na mesma linha, alinhados a esquerda */
    .cta-benefits { gap: 8px 20px; }
    .benefit-item { display: inline-flex; align-items: flex-start; text-align: left; font-size: 0.9rem; max-width: 320px; }
    .benefit-item i { font-size: 1rem; margin-top: 3px; }
    /* modal de login rola quando o cadastro não cabe */
    .modal-overlay { overflow-y: auto; }
}
@media (max-width: 768px) {
    .footer-content { grid-template-columns: 1fr; gap: 18px; }
    .footer-section:first-child p { font-size: 0.74rem; }
    .modal-overlay.open { align-items: flex-start; padding: 12px; }
    .modal-card { margin: auto; }
}
@media (max-width: 600px) {
    .planos-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
    .planos-grid { grid-template-columns: 1fr; }
}
/* estados só-hover não existem no toque */
@media (hover: none) {
    .nav-loja-label { max-width: 90px; opacity: 1; }
}
/* depoimentos: `contain` travava a rolagem da página mesmo com texto curto */
.section-testimonial .testimonial-quote blockquote { overscroll-behavior: auto; }

/* ---------- 2. Seções novas (prefixo nx-) ---------- */
.nx {
    --nx-bg: #0b0b0b; --nx-bg2: #141414; --nx-line: rgba(255, 255, 255, 0.08);
    --nx-txt: #f4f4f4; --nx-muted: #a3a3a3; --nx-goldtxt: #ffb700; --nx-r: 14px; --nx-shadow: none;
    background: var(--nx-bg); color: var(--nx-txt); padding: 72px 0;
}
/* Dourado de texto em superfície clara: #8a5f00 (08/10/2026). O #9a6a00 de
   antes passava no branco (4,7:1) mas reprovava no cinza (4,3:1). */
.nx.nx-light { --nx-bg: #fff; --nx-bg2: #fff; --nx-line: #e8e8e8; --nx-txt: #111; --nx-muted: #666; --nx-goldtxt: #8a5f00; --nx-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); }
.nx.nx-gray { --nx-bg: #f4f4f4; --nx-bg2: #fff; --nx-line: #e3e3e3; --nx-txt: #111; --nx-muted: #666; --nx-goldtxt: #8a5f00; --nx-shadow: 0 2px 14px rgba(0, 0, 0, 0.05); }
/* O padding-bottom encurtado (e o + .section-testimonial que o acompanhava)
   existiam porque "Por que participar?" colava nos depoimentos. Na ordem de
   29/09/2026 ela e seguida pelo blog, que tem fundo claro proprio: a seccao
   volta ao respiro simetrico do .nx. */
.nx.nx-graphite { --nx-bg: #1e1e1e; --nx-bg2: #131313; --nx-line: rgba(255, 255, 255, 0.1); }
.nx h2, .nx-head h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: var(--font-weight-bold); line-height: 1.15; color: var(--nx-txt); margin: 0; letter-spacing: -0.01em; }
.nx h3 { color: var(--nx-txt); margin: 0; }
.nx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.nx-head p { color: var(--nx-muted); margin-top: 6px; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-center { justify-content: center; text-align: center; }
.nx-center p { margin-left: auto; margin-right: auto; }
.nx-eyebrow { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nx-goldtxt); font-weight: var(--font-weight-semibold); margin-bottom: 8px; }
.nx-link { color: var(--nx-goldtxt); font-weight: var(--font-weight-semibold); font-size: 0.9rem; white-space: nowrap; }
.nx-link:hover { color: var(--primary-gold); }
.nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 999px; font-weight: var(--font-weight-semibold); font-size: 0.85rem; border: 1px solid transparent; transition: var(--transition-fast); white-space: nowrap; cursor: pointer; }
.nx-gold { background: var(--primary-gold); color: #000; }
.nx-gold:hover { background: var(--gold-hover); color: #000; }
.nx-vazio { grid-column: 1 / -1; text-align: center; color: var(--nx-muted); }

/* concursos: card escuro sobre seção branca */
.nx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* /concursos em 4 colunas — modificador ADITIVO, nunca a regra-base acima:
   .nx-cards também é o pódio de /ranking e o Top3 da galeria de resultado,
   sempre com 3 itens — virar 4 colunas ali deixaria buraco no pódio. */
.nx-cards--4col { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.nx-cards--4col .nx-card .ph h3 { font-size: 1rem; }
.nx-cards--4col .nx-card .rows { font-size: 0.76rem; }
.nx-cards--4col .nx-badge { font-size: 0.66rem; padding: 4px 8px; }
.nx-cards--4col .nx-btn { height: 34px; padding: 0 14px; font-size: 0.78rem; }

/* Faixa de laptop pequeno (1025-1366px): 4 colunas nessa largura deixa o
   card com ~230-280px e corta título/badge. Um degrau de 2 no meio do
   caminho evita isso; só a partir de 1367px volta a 4. Abaixo de 1025px já
   existe o colapso pra 1 coluna, mais adiante neste arquivo. */
@media (min-width: 1025px) and (max-width: 1366px) {
    .nx-cards--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}
.nx-card { display: flex; flex-direction: column; border-radius: var(--nx-r); overflow: hidden; text-decoration: none !important; color: inherit; background: var(--nx-bg2); box-shadow: var(--nx-shadow); transition: var(--transition-fast); }
.nx-dark-cards .nx-card { --nx-bg2: #141414; --nx-line: rgba(255, 255, 255, 0.1); --nx-txt: #f4f4f4; --nx-muted: #a3a3a3; --nx-goldtxt: #ffb700; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }
.nx-card:hover { transform: translateY(-3px); }
.nx-card .ph { position: relative; aspect-ratio: 8 / 2; background: #1e1e1e; overflow: hidden; }
.nx-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.nx-card .ph img.sem-capa { width: 64px; height: 64px; object-fit: contain; opacity: 0.35; position: absolute; top: 40%; left: 90%; transform: translate(-50%, -50%); }
/* Sem capa, entra o SVG da categoria (categorias.icone). Fica um pouco à
   ESQUERDA do centro para não brigar com o título, que ocupa a faixa de baixo.
   O tamanho é relativo à ALTURA da faixa (aspect-ratio 8/2 deixa o card baixo,
   e um valor fixo em px estourava). As cores vêm do próprio SVG — ele já traz
   disco escuro, aro e traço dourados; forçar fill/stroke aqui transformava o
   ícone num círculo sólido. */
.nx-card .ph .cat-icone { position: absolute; top: 40%; left: 90%; transform: translate(-50%, -50%); height: 68%; aspect-ratio: 1; display: block; pointer-events: none; }
.nx-card .ph .cat-icone svg { width: 100%; height: 100%; display: block; }
.nx-badge { position: absolute; top: 12px; left: 12px; background: var(--primary-gold); color: #000; font-size: 0.72rem; font-weight: var(--font-weight-bold); padding: 5px 10px; border-radius: 999px; z-index: 2; }
.nx-card .ph .ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 16px 14px; background: linear-gradient(to top, rgba(0, 0, 0, 0.88), transparent); color: #fff; }
.nx-card .ph .rd { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-gold); font-weight: var(--font-weight-semibold); margin-bottom: 2px; }
.nx-card .ph h3 { color: #fff; font-size: 1.15rem; line-height: 1.2; margin: 0; }
.nx-card .bd { padding: 16px 18px 18px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.nx-card .rows { display: grid; gap: 6px; font-size: 0.84rem; color: var(--nx-muted); }
.nx-card .rows span { white-space: nowrap; }
.nx-card .rows i { color: var(--nx-goldtxt); width: 18px; text-align: center; margin-right: 4px; }
.nx-card .rows b { color: var(--nx-txt); font-weight: var(--font-weight-semibold); }

/* Card de concurso: faixa de cima escura (#1e1e1e) e corpo CLARO (#f4f4f4).

   O fundo vem do PROPRIO card (--nx-bg2), nao de um override so no .bd: pintar
   apenas o corpo deixava o #141414 do tema escuro aparecendo nas bordas
   arredondadas de baixo. As cores de texto sao do tema escuro (#f4f4f4 / #a3a3a3)
   e sumiriam no claro, entao sao redefinidas aqui. Escopado em
   .concurso-card-link porque .bd tambem e usado pelo card do blog, que segue
   escuro. */
.nx-dark-cards .concurso-card-link { --nx-bg2: #f4f4f4; background: #f4f4f4; }
.concurso-card-link .bd .rows { color: #5a5a5a; }
.concurso-card-link .bd .rows b { color: #0a0a0a; }
.concurso-card-link .bd .rows i { color: #8a5f00; }

/* Faixa do card de concurso: dourado entrando pelo TOPO, mais concentrado no
   canto do icone (.cat-icone fica em 88% 40%), e se dissolvendo para baixo e
   para o centro, onde fica o titulo. Sao duas camadas de proposito: a linear da
   o sentido de cima-para-baixo e a elipse -- ancorada ACIMA da faixa (y = -10%)
   -- inclina esse brilho para o lado do icone sem virar um halo saindo dele. Os
   alfas sao baixos (<= .22) porque a faixa e o fundo de um titulo branco. */
.concurso-card-link .ph {
    background:
        radial-gradient(ellipse 70% 150% at 84% -10%,
            rgba(255, 183, 0, 0.22) 0%,
            rgba(255, 183, 0, 0.1) 38%,
            rgba(0, 0, 0, 0) 74%),
        linear-gradient(to bottom,
            rgba(255, 183, 0, 0.095) 0%,
            rgba(255, 183, 0, 0.035) 38%,
            rgba(0, 0, 0, 0) 72%),
        #101010;
}

/* mentores: foto redonda com aro dourado, nome em destaque */
.nx-ment { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.nx-ment-item { text-align: center; display: block; }
.nx-ment-item .ph { width: min(100%, 230px); margin: 0 auto; aspect-ratio: 1; border-radius: 50%; padding: 6px; background: linear-gradient(135deg, var(--primary-gold), transparent 60%); }
.nx-ment-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--nx-bg); transition: var(--transition-fast); }
.nx-ment-item:hover img { transform: scale(1.03); }
.nx-ment-item b { display: block; margin-top: 18px; font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: 2rem; letter-spacing: 0.06em; color: var(--nx-txt); line-height: 1; }
.nx-ment-item i { display: block; width: 34px; height: 3px; background: var(--primary-gold); margin: 12px auto 0; border-radius: 2px; }

/* resultados: mosaico com avatar e posição */
.nx-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 12px; }
.nx-mosaic-item { position: relative; overflow: hidden; border-radius: 12px; background: #1d1d1d; display: block; border: 1px solid var(--nx-line); }
.nx-mosaic-item figure { margin: 0; width: 100%; height: 100%; }
.nx-mosaic-item:first-child { grid-column: span 2; grid-row: span 2; }
.nx-mosaic-item img.f { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.nx-mosaic-item:hover img.f { transform: scale(1.03); }
.nx-mosaic-item .pos { position: absolute; top: 12px; left: 12px; background: var(--primary-gold); color: #000; font-size: 0.72rem; font-weight: var(--font-weight-bold); padding: 5px 10px; border-radius: 999px; }
.nx-mosaic-item .pos.pos2 { background: #d9d9d9; }
.nx-mosaic-item .pos.pos3 { background: #d8a26a; }
.nx-mosaic-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 12px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent); display: flex; align-items: center; gap: 10px; color: #fff; }
.nx-mosaic-item figcaption img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-gold); flex: 0 0 auto; }
.nx-mosaic-item figcaption b { display: block; font-size: 0.9rem; line-height: 1.2; }
.nx-mosaic-item figcaption span { color: #cfcfcf; font-size: 0.76rem; }
.nx-mosaic-item figcaption em { font-style: normal; color: var(--primary-gold); font-weight: var(--font-weight-semibold); }
.nx-mosaic-item:first-child figcaption b { font-size: 1.05rem; }
.nx-mosaic-item:first-child figcaption img { width: 40px; height: 40px; }

/* por que participar: ícones grandes, títulos em caixa alta, caixa com borda dourada */
.nx-why { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 12px; padding: 40px 32px; border-radius: 18px; }
.nx-why > div { text-align: center; }
.nx-why i { font-size: 2.4rem; color: var(--primary-gold); line-height: 1; margin-bottom: 18px; display: block; }
.nx-why h3 { font-size: 0.86rem; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 10px; color: #fff; }
.nx-why p { color: rgba(255, 255, 255, 0.78); font-size: 0.88rem; margin: 0; line-height: 1.55; }

/* blog: card completo (categoria, data, autor, resumo, tags) */
.nx-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nx-post { display: flex; flex-direction: column; background: var(--nx-bg2); border: 1px solid var(--nx-line); border-radius: var(--nx-r); overflow: hidden; box-shadow: var(--nx-shadow); transition: var(--transition-fast); color: inherit; }
.nx-post:hover { transform: translateY(-3px); border-color: var(--primary-gold); }
.nx-post .ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.nx-post .ph img { width: 100%; height: 100%; object-fit: cover; }
.nx-post .cat { position: absolute; top: 12px; left: 12px; background: var(--primary-gold); color: #000; font-size: 0.7rem; font-weight: var(--font-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.nx-post .bd { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nx-post .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.76rem; color: var(--nx-muted); }
.nx-post .meta i { color: var(--nx-goldtxt); margin-right: 4px; }
.nx-post h3 { font-size: 1.05rem; line-height: 1.3; }
.nx-post p { color: var(--nx-muted); font-size: 0.86rem; margin: 0; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-post .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.nx-post .tags span { font-size: 0.7rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--nx-line); color: var(--nx-muted); }
.nx-post .more { margin-top: auto; padding-top: 12px; font-size: 0.86rem; font-weight: var(--font-weight-semibold); color: var(--nx-goldtxt); }
.nx-post .more i { font-size: 0.75rem; margin-left: 4px; transition: transform 0.2s ease; }
.nx-post:hover .more i { transform: translateX(3px); }

/* responsivo das seções novas */
@media (max-width: 1024px) {
    .nx { padding: 48px 0; }
    .nx-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .nx-head p { white-space: normal; }
    .nx-center { align-items: center; }
    .nx-cards, .nx-cards--4col, .nx-blog { grid-template-columns: 1fr; }
    .nx-ment { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .nx-ment-item b { font-size: 1.5rem; }
    .nx-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
    .nx-mosaic-item:first-child { grid-column: span 2; grid-row: span 1; }
    .nx-why { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 28px 18px; }
    .nx-why i { font-size: 2rem; margin-bottom: 12px; }
}
@media (max-width: 600px) {
    .nx-why { grid-template-columns: 1fr; }
    .nx-card .bd { grid-template-columns: 1fr; }
    .nx-card .bd .nx-btn { width: 100%; }
}