/* ================================================================
   NEXO — DESIGN TOKENS (fonte única da verdade — Phase 1 visual)
   Calibrados sobre a HOME (referência visual do projeto).
   Toda cor, espaçamento e largura deriva daqui.
   ================================================================ */
:root {
  /* AZUIS — um único sistema de cor */
  --nx-blue:        #0A6ED1;
  --nx-blue-dark:   #0854A0;
  --nx-navy:        #07152F;
  --nx-blue-tint:   #EFF6FF;
  /* NEUTROS */
  --nx-ink:         #32363A;
  --nx-slate:       #475569;
  --nx-muted:       #6B7280;
  --nx-line:        #E5E7EB;
  --nx-bg:          #F4F6F8;
  --nx-card:        #FFFFFF;
  /* SEMANTICAS */
  --nx-green:       #107E3E;
  --nx-green-tint:  #F0FDF4;
  --nx-gold:        #D6B24C;
  /* LAYOUT */
  --nx-container:   1440px;
  --nx-gutter:      24px;
  --nx-gap:         24px;
  --nx-radius:      12px;
  --nx-shadow:      0 1px 3px rgba(7,21,47,.08);
  /* TIPOGRAFIA */
  --nx-font: '72','Carlito','Segoe UI',Arial,sans-serif;
}

/* ===========================================================
   NEXO – Plataforma SaaS de Evolução Comportamental Stateful
   Tema visual inspirado no SAP Fiori Launchpad
   CSS consolidado e limpo para a HOME (Fiori)
   =========================================================== */

/* ================================================================
   NEXO — SISTEMA DE CONTAINER E BOTÕES (Phase 2 visual)
   .nx-page  = container canônico (=fiori-content, mesmo valor)
   .nx-btn*  = botões padronizados (referência: HOME)
   ================================================================ */

/* Container canônico — mesmas métricas da Home */
.nx-page {
    max-width: var(--nx-container);
    margin: 16px auto 40px auto;
    padding: 0 var(--nx-gutter) 40px var(--nx-gutter);
    box-sizing: border-box;
}

/* Botão base */
.nx-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--nx-radius);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--nx-font);
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .15s, border-color .15s, box-shadow .15s;
    line-height: 1.4;
}
.nx-btn:focus-visible {
    outline: 3px solid rgba(10,110,209,.35);
    outline-offset: 2px;
}
.nx-btn:disabled, .nx-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Primário — fundo azul */
.nx-btn-primary {
    background: var(--nx-blue);
    color: #fff;
    border-color: var(--nx-blue);
}
.nx-btn-primary:hover { background: var(--nx-blue-dark); border-color: var(--nx-blue-dark); }

/* Secundário — fundo branco com borda */
.nx-btn-secondary {
    background: var(--nx-card);
    color: var(--nx-blue);
    border-color: var(--nx-line);
}
.nx-btn-secondary:hover { border-color: var(--nx-blue); box-shadow: var(--nx-shadow); }

/* Dark — fundo escuro (CTAs sobre fundo claro) */
.nx-btn-dark {
    background: var(--nx-navy);
    color: #fff;
    border-color: var(--nx-navy);
}
.nx-btn-dark:hover { background: #0a2540; border-color: #0a2540; }

/* ========= RESET BÁSICO ========= */

html, body {
    margin: 0;
    padding: 0;
    font-family: "72", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--nx-bg);
    color: var(--nx-ink);
}

/* Container principal da página home */
.sap-home-container {
    min-height: 100vh;
    background-color: var(--nx-bg);
}

/* ========= SUBHEADER (FAIXA BRANCA SOB A NAVBAR AZUL) ========= */

.sap-subheader {
    background-color: #ffffff;
    border-bottom: 1px solid #d9d9d9;
    height: 40px;
    display: flex;
    align-items: center;
}

.sap-subheader-inner {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
}

.sap-subheader-link {
    font-size: 13px;
    color: var(--nx-blue);
    text-decoration: none;
    padding: 4px 0;
}

.sap-subheader-link:hover {
    text-decoration: underline;
}

/* ========= CONTEÚDO PRINCIPAL FIORI ========= */

/* Container canônico da plataforma — idêntico ao .nx-page */
.fiori-content {
    max-width: var(--nx-container);
    margin: 16px auto 40px auto;
    padding: 0 var(--nx-gutter) 40px var(--nx-gutter);
    box-sizing: border-box;
}

.fiori-main-content {
    display: flex;
    flex-direction: column;
    gap: var(--nx-gap);
}

.fiori-section {
    margin-bottom: 16px;
}

.fiori-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--nx-ink);
    margin: 24px 0 8px 0;
}

/* ========= GRID DE TILES ESTILO FIORI ========= */

/* Container de tiles – não esticar na vertical como grid full-height */
.tile-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;

    /* em vez de 'stretch', mantemos cada tile com sua própria altura */
    align-items: flex-start;
    justify-content: flex-start;
}

/* Grid genérico caso use em outras áreas */
.fiori-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* ========= TILE BÁSICO ========= */

.tile {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 12px 12px 10px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

/* Alias para tiles genéricos Fiori (se usar .fiori-tile em algum lugar) */
.fiori-tile {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 12px 12px 10px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fiori-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

.tile-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--nx-ink);
}

.tile-sub {
    font-size: 11px;
    font-weight: 600;
    color: #6a6d70;
    margin-top: 2px;
}

.tile-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--nx-blue);
    margin-top: 2px;
}

.tile-value-green {
    font-size: 20px;
    font-weight: 700;
    color: var(--nx-green);
    margin-top: 2px;
}

/* ========= HERO TILE – AXIA (COM IMAGEM) ========= */
/* Tile com imagem em cima e faixa azul embaixo, altura fixa */

.tile-wide {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;               /* impede o vazamento da imagem */
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    height: 144px;
    min-height: 144px;
    max-height: 144px;
}

/* Imagem ocupa a parte superior do tile */
/*.axia-hero-image {
    width: 100%;
    height: 80px;                   /* ~metade do tile *//*
    object-fit: cover;
    display: block;
}*/

/* Faixa azul com os textos */
.axia-hero-text {
    height: 64px;                   /* completa os 144px */
    background-color: var(--nx-blue);
    color: #ffffff;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tipografia do hero tile */
.tile-wide-title {
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 2px 0;
}

.tile-wide-sub,
.tile-wide-sub-2 {
    font-size: 10px;
    margin: 0;
    opacity: 0.9;
}

/* ========= TÍTULOS GERAIS ========= */

.fiori-title {
    font-size: 20px;
    font-weight: 600;
    margin: 12px 0 4px 0;
}

.fiori-subtitle {
    font-size: 12px;
    color: #6a6d70;
    margin-bottom: 16px;
}

/* ========= ÍCONES (tiles / navbar) ========= */

.fiori-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    object-fit: contain;
}

.sap-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* ========= CARDS AXIA (caso use em outros painéis) ========= */

.ax-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    margin-bottom: 16px;
}

.ax-card-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ========= ESPAÇAMENTO DE SEÇÕES ========= */

.section-padding {
    padding: 16px 0;
}

.section-separator {
    height: 1px;
    background-color: #e0e0e0;
    margin: 16px 0;
}

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

@media (max-width: 1024px) {
    .fiori-content {
        padding: 0 16px 32px 16px;
    }
}

@media (max-width: 768px) {
    .tile-container,
    .fiori-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 480px) {
    .sap-subheader-inner {
        padding: 0 12px;
        gap: 8px;
    }

    .fiori-content {
        padding: 0 12px 24px 12px;
    }

    .tile,
    .fiori-tile {
        padding: 10px;
    }

/* ===== HERO TILE AXIA – ALTURA FIXA DE CARD ===== */
.tile-wide {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    padding: 0;                   /* hero NÃO tem padding interno, só imagem + faixa azul */
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* altura típica de card Fiori (pode ajustar entre 160–190px se quiser) */
    height: 180px;
}

/* Imagem ocupa a parte de cima do card */
.axia-hero-image {
    width: 100%;
    flex: 0 0 60%;                /* 60% da altura do tile */
    object-fit: cover;
}

/* Faixa azul com texto ocupa o restante embaixo */
.axia-hero-text {
    flex: 1 0 40%;                /* 40% da altura do tile */
    background-color: #0b74de;    /* azul SAPUI5 */
    color: #ffffff;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tile-wide-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.tile-wide-sub {
    font-size: 0.80rem;
    opacity: 0.9;
}

.tile-wide-sub-2 {
    font-size: 0.75rem;
    opacity: 0.85;
}

}

/* ================================
   HERO TILE SAP FIORI (CORREÇÃO FINAL)
   ================================ */

.axia-hero-tile {
    width: 100%;
    max-width: 380px;              /* igual aos outros tiles */
    height: 176px;                 /* altura SAP Fiori */
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Imagem ocupa metade *//*
.axia-hero-image {
    height: 50%;
    width: 100%;
    object-fit: cover;
    display: block;
}*/

/* Texto na metade inferior */
.axia-hero-text {
    height: 50%;
    background-color: var(--nx-blue);     /* azul SAPUI5 */
    color: #ffffff;
    padding: 8px 12px;
    font-size: 0.78rem;
    line-height: 1.1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ============================
   HERO TILE – DEFINIÇÃO FINAL
   ============================ */

.tile-wide {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    height: 144px; /* Altura SAP Fiori */
}

.axia-hero-image {
    width: 100%;
    height: 80px;           /* FIXO! evita distorção e evita estourar */
    object-fit: cover;
    display: block;
}

.axia-hero-text {
    height: 64px;
    background-color: var(--nx-blue);
    color: white;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tile-wide-title {
    font-size: 12px;
    font-weight: 600;
}

.tile-wide-sub,
.tile-wide-sub-2 {
    font-size: 10px;
    opacity: 0.9;
}


/* ============================================================
   FORÇA O GRID SAP FIORI DE 6 COLUNAS (RESPONSIVO)
   ============================================================ */

.tile-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px !important;
    width: 100%;
}

/* Todos os tiles padrão: 1 coluna */
.tile {
    height: 144px;                /* altura SAP Fiori */
    min-height: 144px;
    max-height: 144px;
}

/* HERO ocupa DUAS colunas, igual ao SAP Fiori */
.tile-wide {
    grid-column: span 2;
    height: 144px !important;
    min-height: 144px !important;
    max-height: 144px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Metade imagem, metade faixa azul */
.axia-hero-image {
    height: 80px !important;
    width: 100%;
    object-fit: cover;
}

.axia-hero-text {
    height: 64px !important;
    background-color: var(--nx-blue) !important;
    color: white !important;
    padding: 8px 12px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tile-wide-title {
    font-size: 12px;
    font-weight: 600;
}

.tile-wide-sub,
.tile-wide-sub-2 {
    font-size: 10px;
    opacity: 0.9;
}

/* ============================================================
   RESPONSIVIDADE – segue padrão SAP (6 → 4 → 2 colunas)
   ============================================================ */
@media (max-width: 1400px) {
    .tile-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

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


/* ================================
   GRID PRINCIPAL - 6 COLUNAS FIXAS
   ================================ */
.tile-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 18px !important;
    margin-top: 20px;
    width: 100%;
    align-items: start;
}

/* ================================
   TILE PADRÃO (todos iguais)
   ================================ */
.fiori-tile,
.tile {
    background: #ffffff;
    border-radius: 10px !important;
    border: 1px solid var(--nx-line) !important;
    height: 160px !important;            /* Altura Fiori */
    padding: 16px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Títulos dos tiles */
.fiori-tile h2,
.tile h2 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* Valores */
.fiori-tile .value,
.tile .value {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--nx-blue) !important;
}

/* ================================
   HERO TILE (OCUPA 2 COLUNAS)
   ================================ */
.tile-wide {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--nx-line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 160px !important;
    grid-column: span 2 !important;
}

/* Imagem do Hero */
.tile-wide img {
    width: 100%;
    height: 95px;
    object-fit: cover;
    border-bottom: 0;
}

/* Texto do Hero */
.tile-wide .axia-hero-text {
    background: var(--nx-blue);
    color: #ffffff;
    padding: 10px 14px;
    height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Títulos menores dentro do Hero */
.tile-wide .axia-hero-text .subtitle {
    font-size: 13px;
    opacity: 0.9;
}

/* ================================
   LINHA BRANCA ENTRE AS SEÇÕES
   ================================ */
.section-links {
    grid-column: span 6 !important;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--nx-line);
    padding: 14px 18px;
    display: flex;
    gap: 22px;
    font-size: 14px;
}

/* links */
.section-links a {
    color: var(--nx-blue);
    font-weight: 600;
    text-decoration: none;
}

.section-links a:hover {
    text-decoration: underline;
}

/* ================================
   CORREÇÃO DE QUEBRA / DESALINHO
   ================================ */
.tile-container > * {
    min-width: 0; /* impede expansão indevida */
}

/* força alinhamento vertical */
.tile,
.tile-wide,
.fiori-tile {
    align-self: stretch;
}

/* ================================
   AJUSTE GERAL PARA EVITAR ESTOURO
   ================================ */
body, html {
    overflow-x: hidden !important;
}


/* --------------------------------------------------------- */
/*        GRID FIORI – 6 COLUNAS IGUAIS       27.11.2025     */
/* --------------------------------------------------------- */

.fiori-section-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px 20px;              /* SAP spacing: vertical 18px, horizontal 20px */
    width: 100%;
    margin-bottom: 28px;
    align-items: start;
}

/* --------------------------------------------------------- */
/*        TILE PADRÃO SAP FIORI                             */
/* --------------------------------------------------------- */

.tile {
    background: #ffffff;
    border-radius: 8px;
    padding: 16px;
    height: 140px;                /* Altura padrão SAP Fiori */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border: 1px solid #e5e5e5;
    overflow: hidden;
}

/* --------------------------------------------------------- */
/*       TILE HERO (IMAGEM + TEXTO)                         */
/* --------------------------------------------------------- */

.tile-wide {
    grid-column: span 2;          /* Hero ocupa 2 colunas */
    height: 160px;                /* Altura aproximada padrão SAP */
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

/* Imagem ocupa a parte superior */
.tile-wide img {
    width: 100%;
    height: 60%;
    object-fit: cover;
    display: block;
}

/* Faixa azul Fiori */
.axia-hero-text {
    background: var(--nx-blue);
    color: white;
    padding: 8px 16px;
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 13px;
}

/* --------------------------------------------------------- */
/*        LINHA SEPARADORA (BARRA BRANCA)                    */
/* --------------------------------------------------------- */

.separator-bar {
    width: 100%;
    background: #ffffff;
    padding: 10px 24px;
    border-radius: 6px;
    margin: 10px 0 30px 0;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border: 1px solid #e5e5e5;
}

.separator-link {
    font-size: 14px;
    color: var(--nx-blue);
    text-decoration: none;
}

.separator-link:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------- */
/*        AJUSTES FINOS SAP FIORI                           */
/* --------------------------------------------------------- */

.tile h3, .tile .tile-title {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 600;
}

.tile .tile-value {
    font-size: 26px;
    font-weight: bold;
    color: var(--nx-blue);
}

/* Melhor responsividade */
@media (max-width: 1600px) {
    .fiori-section-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {
    .fiori-section-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .fiori-section-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .fiori-section-row {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ====== BARRA BRANCA ENTRE OS TILES (ESTILO FIORI) ====== */
.tile-separator {
    width: 100%;
    max-width: var(--nx-container);
    margin: 0 auto 24px auto;
    background: #ffffff;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* mantido para compatibilidade retroativa */
.separator-link {
    font-size: 14px;
    color: var(--nx-blue);
    text-decoration: none;
    font-weight: 500;
}
.separator-link:hover { text-decoration: underline; }

/* ── NOVO: CTA visual no separator ── */
.separator-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #dbe4ef;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.separator-cta:hover {
    transform: translateY(-2px);
    border-color: rgba(10,110,209,0.35);
    box-shadow: 0 8px 18px rgba(10,110,209,0.12);
    text-decoration: none !important;
}
.separator-cta.primary {
    background: linear-gradient(135deg, var(--nx-navy) 0%, var(--nx-blue) 100%);
    border-color: rgba(10,110,209,0.45);
}
.separator-cta.primary:hover {
    box-shadow: 0 8px 22px rgba(10,110,209,0.30);
}
.separator-cta-icon {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--nx-blue-tint);
    color: var(--nx-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.separator-cta.primary .separator-cta-icon {
    background: rgba(255,255,255,0.14);
    color: #ffffff;
}
.separator-cta-text {
    display: flex; flex-direction: column; min-width: 0;
}

.separator-cta-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--nx-blue);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.separator-cta.primary .separator-cta-title { color: #ffffff; }
.separator-cta-subtitle {
    font-size: 10px; font-weight: 600;
    color: var(--nx-muted); margin-top: 2px; line-height: 1.1;
}
.separator-cta.primary .separator-cta-subtitle { color: rgba(255,255,255,0.75); }
.separator-cta-arrow {
    color: var(--nx-blue); font-size: 17px;
    font-weight: 800; margin-left: 2px; flex-shrink: 0;
}
.separator-cta.primary .separator-cta-arrow { color: #ffffff; }

@media (max-width: 768px) {
    .tile-separator {
        overflow-x: auto; flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tile-separator::-webkit-scrollbar { display: none; }
    .separator-cta { flex-shrink: 0; min-height: 40px; padding: 6px 10px; }
    .separator-cta-title    { font-size: 12px; }
    .separator-cta-subtitle { font-size: 9px;  }
    .separator-cta-icon     { width: 26px; height: 26px; font-size: 13px; }
}
@media (max-width: 480px) {
    .separator-cta-subtitle { display: none; }
}
/* ============================================================
   NEXO | MÉTODO DIREÇÃO REAL — AJUSTE PREMIUM IA
   ============================================================ */

.metric-tile,
.smart-tile {
    overflow: hidden !important;
}

.metric-tile .tile-label {
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    margin-top: 2px;
}

.smart-tile {
    justify-content: space-between !important;
}

.tile-large {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
}

.tile-insight {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.18;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-insight-blue {
    color: var(--nx-blue);
}

.tile-insight-green {
    color: var(--nx-green);
}

.smart-tile .tile-sub {
    font-size: 11px;
    line-height: 1.25;
    color: #5f6b7a;
    font-weight: 600;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-ai-tag {
    font-size: 9px;
    font-weight: 800;
    color: #3b82f6;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 6px;
}

/* Hero premium com IA */
.tile-wide.ai-hero-tile {
 text-decoration: none !important;  /* ← adicionar esta linha */
    padding: 16px !important;
    background:
        radial-gradient(circle at top right, rgba(10,110,209,0.55), transparent 34%),
        linear-gradient(135deg, var(--nx-navy) 0%, #0a0a44 48%, var(--nx-blue) 100%) !important;
    color: #ffffff !important;
    justify-content: space-between !important;
    border: 1px solid rgba(10,110,209,0.35) !important;
}

.ai-hero-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nx-gold);
}

.ai-hero-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    max-width: 92%;
}

.ai-hero-subtitle {
    font-size: 11px;
    line-height: 1.25;
    color: rgba(255,255,255,0.86);
    max-width: 94%;
}

.ai-hero-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-hero-pill {
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    padding: 3px 7px;
}

/* Remove sensação de card corporativo quando há texto IA */
.smart-tile:hover,
.metric-tile:hover,
.ai-hero-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(10, 110, 209, 0.14);
}

/* ============================================================
   GRANT CODE | LOGIN CINEMÁTICO PREMIUM — REFINADO
   ============================================================ */


/* =============================================================
   NEXO — LOGIN ENTERPRISE  (wild-* classes)
   Padrão: SAP / Salesforce / Oracle — alto nível, confiável
   Fontes: IBM Plex Sans (corpo) + IBM Plex Mono (técnico)
   ============================================================= */

/* ── 1. SHELL — fundo fotográfico com overlay preciso ── */
.wild-login-shell {
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;

    /* Foto do elefante preservada — overlay só na lateral esquerda */
    background: url("/assets/elefante.png") center center / cover no-repeat;
    font-family: "IBM Plex Sans", "Inter", -apple-system, "Segoe UI", sans-serif;
}

/* Gradiente lateral — neutro escuro, SEM tonalidade azul no centro */
.wild-login-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(4, 4, 8, 0.90)  0%,
        rgba(4, 4, 8, 0.68)  36%,
        rgba(4, 4, 8, 0.18)  58%,
        rgba(4, 4, 8, 0.52)  100%
    );
    pointer-events: none;
}

/* Vinheta superior/inferior — preserva tons quentes da foto */
.wild-login-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(4,4,8,0.50) 0%, transparent 16%),
        linear-gradient(0deg,   rgba(4,4,8,0.55) 0%, transparent 18%);
    pointer-events: none;
}

.wild-login-overlay { display: none; }

/* ── 2. GRADE PRINCIPAL ── */
.wild-login-content {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 480px;
    align-items: center;
    gap: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── 3. BLOCO ESQUERDO ── */
.wild-login-left {
    padding: 56px 64px 56px 7vw;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
}

/* ── 4. MARCA — topo esquerdo ── */
.wild-brand-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 52px;
}

.wild-brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 50%;
    padding: 7px;
    background: rgba(5, 10, 28, 0.80);
    border: 1.5px solid rgba(40, 150, 255, 0.55);
    box-shadow:
        0 0 0 4px rgba(40, 150, 255, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.50);
}

.wild-brand-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.24em;
    line-height: 1;
    font-family: "IBM Plex Sans", sans-serif;
}

.wild-brand-subtitle {
    color: var(--nx-blue);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-top: 5px;
    font-family: "IBM Plex Mono", monospace;
}

/* ── 5. HEADLINE PRINCIPAL — grande, impactante ── */
/*
 * HERO TITLE — duas linhas curtas, peso de produto, não de slogan
 * Linha 1: "Plataforma NEXO"  (menor, label de produto)
 * Linha 2: "Evolução Comportamental"  (grande, a promessa)
 */
.wild-hero-title {
    font-family: "IBM Plex Sans", "Inter", sans-serif;
    color: #ffffff;
    font-size: clamp(36px, 3.8vw, 58px);
    line-height: 1.10;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    text-shadow:
        0 2px 4px rgba(0,0,0,0.40),
        0 8px 32px rgba(0,0,0,0.55);
}

/* Linha 1 — label de produto menor e menos brilhante */
.wild-hero-title .wild-title-label {
    display: block;
    font-size: clamp(13px, 1.2vw, 18px);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    font-family: "IBM Plex Mono", monospace;
    margin-bottom: 8px;
}

/* Palavra de destaque — branco gelo, não azul (azul = ação/link) */
.wild-hero-title .wild-blue {
    color: #e8f4ff;
    font-style: normal;
}

/* ── 6. BADGE TÉCNICO — "EVOLUÇÃO COMPORTAMENTAL // STATEFUL" ── */
.wild-hero-system-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 6px 14px 6px 10px;
    background: rgba(8, 14, 36, 0.78);
    border: 1px solid rgba(40, 150, 255, 0.28);
    border-radius: 3px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: fit-content;
}

.wild-hero-system-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nx-blue);
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(58, 159, 255, 0.80);
    animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 8px rgba(58,159,255,0.80); opacity: 1; }
    50%       { box-shadow: 0 0 14px rgba(58,159,255,1.00); opacity: 0.75; }
}

.wild-hero-system-tag-text {
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(160, 200, 255, 0.90);
    line-height: 1;
}

.wild-hero-system-tag-sep {
    color: rgba(40, 150, 255, 0.45);
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    font-weight: 400;
    margin: 0 1px;
}

/* ── 7. LINHA AZUL DIVISÓRIA ── */
.wild-hero-divider {
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--nx-blue) 0%, rgba(58,159,255,0.30) 100%);
    border-radius: 99px;
    margin: 0 0 24px;
}

/* ── 8. SUBTEXTO — curto, direto, linguagem de sistema ── */
.wild-hero-copy {
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    line-height: 1.65;
    max-width: 440px;
    margin: 0 0 18px;
    font-weight: 400;
    letter-spacing: 0.01em;
    font-family: "IBM Plex Mono", monospace;
}

/* ── 9. TAGLINE COM BARRA AZUL ── */
.wild-hero-tagline {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 36px;
}

.wild-hero-tagline-bar {
    width: 3px;
    min-height: 36px;
    background: var(--nx-blue);
    border-radius: 99px;
    flex-shrink: 0;
    margin-top: 2px;
}

.wild-hero-tagline-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wild-hero-tagline-main {
    color: rgba(255, 255, 255, 0.80);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.50;
    letter-spacing: 0.03em;
    font-family: "IBM Plex Mono", monospace;
    text-transform: uppercase;
}

.wild-hero-tagline-sub {
    color: var(--nx-blue);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.50;
    letter-spacing: 0.03em;
    font-family: "IBM Plex Mono", monospace;
    text-transform: uppercase;
}

/* ── 10. PILLS DE FEATURE — 3 na mesma linha ── */
.wild-feature-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 580px;
}

.wild-feature-pill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 18px 16px !important;

    background: rgba(6, 10, 24, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-top: 2px solid rgba(40, 150, 255, 0.45) !important;
    border-radius: 6px !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
    cursor: default;
}

.wild-feature-pill:hover {
    border-color: rgba(255,255,255,0.14) !important;
    border-top-color: rgba(58,159,255,0.75) !important;
    transform: translateY(-2px);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(58,159,255,0.12) !important;
}

.wild-feature-icon-img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    filter: brightness(0) invert(1) opacity(0.65) !important;
}

.wild-feature-text {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.20 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;        /* força 1 linha */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.wild-feature-sub {
    color: rgba(255, 255, 255, 0.40) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.40 !important;
}

/* ── 11. MÉTRICAS DE CREDIBILIDADE ── */
.wild-metrics-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: nowrap;
    white-space: nowrap;
}

.wild-metric-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.wild-metric-value {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    font-family: "IBM Plex Sans", sans-serif;
    white-space: nowrap;
}

.wild-metric-label {
    color: rgba(255, 255, 255, 0.38);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.3;
    font-family: "IBM Plex Mono", monospace;
    text-transform: uppercase;
    white-space: nowrap;
}

.wild-metric-sep {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.10);
    flex-shrink: 0;
}

/* ── 12. RODAPÉ SEGURANÇA (esquerda) ── */
.wild-footer-security {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.wild-footer-security-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.30);
    font-size: 11px;
    font-weight: 500;
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: 0.03em;
}

.wild-footer-security-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

/* ── 13. CARD DE LOGIN — painel direito escuro fixo ── */
.wild-login-card {
    position: relative;
    z-index: 3;
    /* painel fixo à direita — altura total da viewport */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px 44px 44px;
    box-sizing: border-box;

    /* escuro sólido, séria, sem blur excessivo */
    background: rgba(7, 10, 24, 0.96);
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    box-shadow: -24px 0 80px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    min-width: 0;
}

/* Linha azul decorativa no topo do painel */
.wild-login-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--nx-blue) 0%, var(--nx-blue) 50%, rgba(58,159,255,0.20) 100%);
    border-radius: 0;
}

/* ── 14. KICKER ROW ── */
.wild-card-kicker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.wild-card-kicker-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(30, 100, 220, 0.15);
    border: 1px solid rgba(30, 100, 220, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.wild-card-kicker-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wild-card-kicker {
    color: var(--nx-blue);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    line-height: 1;
    font-family: "IBM Plex Mono", monospace;
}

.wild-card-kicker-sub {
    color: rgba(255, 255, 255, 0.32);
    font-size: 11px;
    font-weight: 400;
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: 0.04em;
}

/* ── 15. TÍTULO E SUBTÍTULO DO CARD ── */
.wild-card-title {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    line-height: 1.15;
    font-family: "IBM Plex Sans", sans-serif;
}

.wild-card-subtitle {
    color: rgba(200, 215, 235, 0.52);
    font-size: 13.5px;
    line-height: 1.60;
    margin: 0 0 32px;
    font-weight: 400;
}

/* ── 16. SEPARADOR HORIZONTAL NO CARD ── */
.wild-card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 0 0 24px;
}

/* ── 17. LABELS ── */
.wild-label {
    display: block;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 600;
    margin: 20px 0 7px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: "IBM Plex Mono", monospace;
}

/* ── 18. INPUTS ── */
.wild-input-wrap {
    position: relative;
}

.wild-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.32;
    pointer-events: none;
    z-index: 10;
    line-height: 1;
}

.wild-input {
    height: 50px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(14, 18, 38, 0.95) !important;
    color: #e8f0ff !important;
    padding: 0 44px 0 42px !important;
    font-size: 14px !important;
    font-family: "IBM Plex Sans", sans-serif !important;
    font-weight: 400 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    width: 100% !important;
    letter-spacing: 0.01em !important;
}

.wild-input::placeholder {
    color: rgba(255, 255, 255, 0.22) !important;
    font-style: normal !important;
}

.wild-input:focus {
    border-color: rgba(58, 159, 255, 0.60) !important;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.20),
        0 0 0 3px rgba(58, 159, 255, 0.12) !important;
    outline: none !important;
    background: rgba(16, 22, 48, 0.98) !important;
}

/* ícone olho */
.wild-eye-btn {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.30;
    color: #ffffff;
    z-index: 10;
    line-height: 1;
    transition: opacity 0.15s;
    border-radius: 3px;
}
.wild-eye-btn:hover { opacity: 0.65; background: rgba(255,255,255,0.06); }

/* ── 19. BOTÃO PRINCIPAL ── */
.wild-button {
    width: 100% !important;
    height: 52px !important;
    margin-top: 28px !important;
    border: none !important;
    border-radius: 6px !important;
    background: linear-gradient(90deg, var(--nx-blue) 0%, var(--nx-blue) 60%, var(--nx-blue) 100%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-family: "IBM Plex Sans", sans-serif !important;
    box-shadow:
        0 4px 16px rgba(20, 96, 212, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.16) !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
}

.wild-button:hover {
    background: linear-gradient(90deg, #1668e0 0%, #2a80ff 60%, #48a8ff 100%) !important;
    box-shadow:
        0 8px 28px rgba(20, 96, 212, 0.55),
        inset 0 1px 0 rgba(255,255,255,0.20) !important;
    transform: translateY(-1px) !important;
}

.wild-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(20, 96, 212, 0.40) !important;
}

.wild-button-arrow {
    font-size: 16px;
    line-height: 1;
    margin-left: 2px;
}

/* ── 20. ALERTA ── */
.wild-login-alert {
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 6px;
    font-family: "IBM Plex Sans", sans-serif;
}

/* ── 21. RODAPÉ DO CARD ── */
.wild-card-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.wild-secure-note {
    color: rgba(200, 215, 235, 0.32);
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: 0.05em;
    margin: 0;
}

.wild-secure-link {
    color: var(--nx-blue);
    font-size: 10px;
    font-weight: 600;
    font-family: "IBM Plex Mono", monospace;
    text-decoration: none;
    letter-spacing: 0.06em;
    opacity: 0.65;
    transition: opacity 0.15s;
}
.wild-secure-link:hover { opacity: 1; }

/* Versão do sistema — detalhe enterprise */
.wild-version-tag {
    margin-top: 4px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 9px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.16);
    letter-spacing: 0.08em;
    text-align: center;
}

/* ── 22. SELOS DE SEGURANÇA NO CARD ── */
.wild-security-seals {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.wild-seal {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.28);
    font-size: 10px;
    font-weight: 600;
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wild-seal-icon { font-size: 11px; opacity: 0.60; }

/* ================================================================
   RESPONSIVIDADE — mobile-first breakdown
   ================================================================ */

/* Laptop menor */
@media (max-width: 1280px) {
    .wild-login-content {
        grid-template-columns: 1fr 440px;
    }
    .wild-hero-title {
        font-size: clamp(38px, 4.2vw, 64px);
    }
    .wild-login-left {
        padding: 48px 48px 48px 6vw;
    }
}

/* Tablet — empilha */
@media (max-width: 960px) {
    .wild-login-content {
        grid-template-columns: 1fr;
        min-height: unset;
        padding: 0;
    }

    .wild-login-left {
        min-height: unset;
        padding: 48px 6vw 36px;
        text-align: center;
        max-width: 100%;
    }

    .wild-brand-row      { justify-content: center; margin-bottom: 36px; }
    .wild-hero-system-tag { margin-left: auto; margin-right: auto; }
    .wild-hero-divider   { margin-left: auto; margin-right: auto; }
    .wild-hero-copy      { margin-left: auto; margin-right: auto; }
    .wild-hero-tagline   { justify-content: center; }
    .wild-feature-row    { justify-content: center !important; max-width: 100%; }
    .wild-metrics-row    { justify-content: center; }
    .wild-footer-security { justify-content: center; }

    .wild-login-card {
        align-self: unset;
        border-left: none;
        border-top: 3px solid var(--nx-blue);
        padding: 40px 6vw 48px;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.40);
    }
    .wild-login-card::before { display: none; }
}

/* Mobile grande */
@media (max-width: 640px) {
    .wild-login-left { padding: 36px 5vw 28px; }
    .wild-hero-title {
        font-size: clamp(28px, 8vw, 44px);
        line-height: 1.10;
    }
    .wild-hero-copy { font-size: 14px; }
    .wild-hero-tagline { margin-bottom: 32px; }

    .wild-feature-pill { padding: 14px 12px !important; gap: 7px !important; }
    .wild-feature-icon-img { width: 22px !important; height: 22px !important; }
    .wild-feature-text { font-size: 11.5px !important; }
    .wild-feature-sub  { display: none !important; }

    .wild-login-card { padding: 32px 5vw 36px; }
    .wild-card-title { font-size: 24px; }
    .wild-metrics-row { gap: 16px; }
    .wild-metric-value { font-size: 18px; }
}

/* Mobile muito pequeno */
@media (max-width: 400px) {
    .wild-hero-title { font-size: 28px; }
    .wild-feature-row { flex-wrap: wrap !important; }
    .wild-feature-pill {
        flex: 1 1 calc(50% - 7px) !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 10px !important;
    }
    .wild-login-card { padding: 28px 4vw; }
}


/* ============================================================
   CORREÇÃO FINAL — CARDS HOME NEXO / EVITA SOBREPOSIÇÃO
   ============================================================ */

/* Grid principal da home */
.tile-container {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* Card base */
.tile {
    min-height: 150px !important;
    height: auto !important;
    max-height: none !important;
    padding: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Cards inteligentes da segunda e terceira linha */
.smart-tile {
    min-height: 160px !important;
    height: auto !important;
    max-height: none !important;
    justify-content: flex-start !important;
    gap: 6px !important;
}

/* Garante stretch de altura dentro do grid (relatório / certificado / mídias) */
.metric-tile,
.smart-tile {
    align-self: stretch !important;
}

/* ============================================================
   METRIC-GRID — grid 4 colunas para relatório / certificado
   Não altera .tile-container (usado pela Home com 6 colunas)
   ============================================================ */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--nx-gap);
    width: 100%;
    align-items: stretch;
}

.metric-grid > .tile {
    min-width: 0;
    width: auto;
}

/* Título do card */
.smart-tile .tile-title,
.metric-tile .tile-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    flex-shrink: 0 !important;
}

/* Texto principal do card */
.tile-insight {
    font-size: 18px !important;
    line-height: 1.18 !important;
    margin: 2px 0 4px 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    flex-shrink: 0 !important;
}

/* Texto explicativo */
.smart-tile .tile-sub {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    flex-shrink: 0 !important;
}

/* Tag Análise IA */
.tile-ai-tag {
    margin-top: auto !important;
    font-size: 9px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Cards grandes da terceira linha */
.tile-large {
    min-height: 175px !important;
    height: auto !important;
    max-height: none !important;
}

/* Card hero azul */
.tile-wide.ai-hero-tile {
 text-decoration: none !important;  /* ← adicionar esta linha */
    height: auto !important;
    min-height: 150px !important;
    max-height: none !important;
    grid-column: span 2 !important;
}

/* Responsividade segura */
@media (max-width: 1400px) {
    .tile-container {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .tile-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tile-wide.ai-hero-tile {
     text-decoration: none !important;  /* ← adicionar esta linha */
        grid-column: span 2 !important;
    }
}

@media (max-width: 600px) {
    .tile-container {
        grid-template-columns: 1fr !important;
    }

    .tile-wide.ai-hero-tile {
     text-decoration: none !important;  /* ← adicionar esta linha */
        grid-column: span 1 !important;
    }
}

/* ============================================================
   NEXO | CTA DE CONTEÚDO DO PLANO BÁSICO
   ============================================================ */

.journey-content-strip {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    padding: 10px 18px;
    margin: -4px 0 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: visible;
}

.journey-content-strip-head {
    min-width: 220px;
}

.journey-content-strip-title {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
}

.journey-content-strip-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: var(--nx-muted);
    margin-top: 3px;
}

.journey-content-strip-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
}

.journey-content-cta {
    min-height: 46px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #dbe4ef;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    white-space: nowrap;
    flex-shrink: 1;
}

.journey-content-cta:hover {
    transform: translateY(-2px);
    border-color: rgba(10,110,209,0.35);
    box-shadow: 0 8px 18px rgba(10,110,209,0.12);
}

.journey-content-cta.primary {
    background: linear-gradient(135deg, var(--nx-navy) 0%, var(--nx-blue) 100%);
    border-color: rgba(10,110,209,0.45);
}

.journey-content-cta-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--nx-blue-tint);
    color: var(--nx-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.journey-content-cta.primary .journey-content-cta-icon {
    background: rgba(255,255,255,0.14);
    color: #ffffff;
}

.journey-content-cta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.journey-content-cta-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--nx-blue);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.journey-content-cta.primary .journey-content-cta-title {
    color: #ffffff;
}

.journey-content-cta-subtitle {
    font-size: 10px;
    font-weight: 600;
    color: var(--nx-muted);
    margin-top: 2px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.journey-content-cta.primary .journey-content-cta-subtitle {
    color: rgba(255,255,255,0.78);
}

.journey-content-cta-arrow {
    color: var(--nx-blue);
    font-size: 18px;
    font-weight: 800;
}

.journey-content-cta.primary .journey-content-cta-arrow {
    color: #ffffff;
}

@media (max-width: 1100px) {
    .journey-content-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    .journey-content-strip-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 700px) {
    .journey-content-cta {
        width: 100%;
        min-width: 0;
    }
}
/* ============================================================
   APOSTILA GRANT CODE
   ============================================================ */

.apostila-page {
    max-width: var(--nx-container);
    margin: 0 auto;
    padding: 32px var(--nx-gutter) 60px var(--nx-gutter);
    box-sizing: border-box;
}

.apostila-header {
    background: linear-gradient(135deg, var(--nx-navy) 0%, var(--nx-blue) 100%);
    color: #ffffff;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    box-shadow: 0 12px 30px rgba(10,110,209,0.18);
    margin-bottom: 24px;
}

.apostila-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--nx-gold);
    margin-bottom: 8px;
}

.apostila-main-title {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px 0;
}

.apostila-main-subtitle {
    font-size: 14px;
    line-height: 1.5;
    max-width: 680px;
    color: rgba(255,255,255,0.86);
    margin: 0;
}

.apostila-download {
    background: #ffffff;
    color: var(--nx-blue) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 800;
    padding: 12px 18px;
    border-radius: 10px;
    white-space: nowrap;
}

.apostila-section {
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.apostila-kicker {
    font-size: 11px;
    font-weight: 800;
    color: var(--nx-blue);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

.apostila-title {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px 0;
}

.apostila-text {
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
    font-weight: 500;
}

@media (max-width: 800px) {
    .apostila-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .apostila-main-title {
        font-size: 26px;
    }
}
/* ============================================
   TRILHA DE 30 DIAS (GRANT CODE)
   ============================================ */

.apostila-days-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.apostila-day-tile {
    height: 70px;
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    transition: all 0.2s ease;
}

.apostila-day-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(10,110,209,0.12);
}

/* estados */
.apostila-day-tile.done {
    background: var(--nx-green);
    color: white;
}

.apostila-day-tile.current {
    background: linear-gradient(135deg, var(--nx-navy) 0%, var(--nx-blue) 100%);
    color: white;
}

.apostila-day-tile.locked {
    opacity: 0.5;
}

.day-number {
    font-size: 14px;
}

.day-status {
    font-size: 16px;
}
.button-secondary {
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: white;
    color: #1a2b4b;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.button-secondary:hover {
    border-color: var(--nx-blue-dark);
    color: var(--nx-blue-dark);
}


.home-tile-link {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 150px !important;
    text-decoration: none !important;
    color: inherit !important;
    align-self: stretch !important;
}

.home-tile-link .tile {
    width: 100% !important;
    min-height: 150px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
}

.tile-container > .home-tile-link {
    min-width: 0 !important;
}/* ============================================================
   APOSTILA — PAGINAÇÃO POR CAPÍTULO
   Adicionar ao FINAL do arquivo styles.css
   ============================================================ */

/* ── Wrapper do capítulo ──────────────────────────────────── */
#apostila-capitulo-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Conteúdo do capítulo ────────────────────────────────── */
.apostila-capitulo-content {
    min-height: 320px;
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;
}

/* ── Barra de progresso ──────────────────────────────────── */
.apostila-paginacao-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.apostila-paginacao-bar-track {
    flex: 1;
    height: 6px;
    background: var(--nx-line);
    border-radius: 99px;
    overflow: hidden;
}

.apostila-paginacao-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--nx-blue) 0%, var(--nx-navy) 100%);
    border-radius: 99px;
    transition: width 0.4s ease;
}

.apostila-paginacao-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--nx-muted);
    white-space: nowrap;
}

/* ── Barra de navegação (Anterior / dots / Próximo) ──────── */
.apostila-paginacao-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* ── Botões de navegação ─────────────────────────────────── */
.apostila-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #dbe4ef;
    background: #f8fafc;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    font-family: inherit;
}

.apostila-nav-btn:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: rgba(10,110,209,0.35);
    box-shadow: 0 8px 18px rgba(10,110,209,0.12);
}

.apostila-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Botão Anterior — arrow à esquerda */
.apostila-nav-anterior {
    flex-direction: row;
}

/* Botão Próximo — arrow à direita */
.apostila-nav-proximo {
    flex-direction: row-reverse;
    background: #f8fafc;
}

/* Botão Concluir — versão destaque azul */
.apostila-nav-concluir {
    background: linear-gradient(135deg, var(--nx-navy) 0%, var(--nx-blue) 100%) !important;
    border-color: rgba(10,110,209,0.45) !important;
}
.apostila-nav-concluir:not(:disabled):hover {
    box-shadow: 0 8px 22px rgba(10,110,209,0.30) !important;
}
.apostila-nav-concluir .apostila-nav-label,
.apostila-nav-concluir .apostila-nav-sub,
.apostila-nav-concluir .apostila-nav-arrow {
    color: #ffffff !important;
}

/* ── Textos dos botões ───────────────────────────────────── */
.apostila-nav-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.apostila-nav-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--nx-blue);
    line-height: 1.15;
}

.apostila-nav-sub {
    font-size: 10px;
    font-weight: 600;
    color: var(--nx-muted);
    margin-top: 2px;
}

.apostila-nav-anterior .apostila-nav-text {
    text-align: left;
}

.apostila-nav-proximo .apostila-nav-text {
    text-align: right;
}

.apostila-nav-arrow {
    font-size: 18px;
    font-weight: 900;
    color: var(--nx-blue);
    line-height: 1;
    flex-shrink: 0;
}

/* ── Dots de paginação ───────────────────────────────────── */
.apostila-paginacao-dots {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
}

.apostila-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.apostila-dot-ativo {
    width: 22px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--nx-blue), var(--nx-navy));
}

/* ── Tela de conclusão ───────────────────────────────────── */
.apostila-conclusao {
    border: 2px solid var(--nx-green) !important;
    background: linear-gradient(135deg, var(--nx-green-tint) 0%, #ffffff 100%) !important;
}

.apostila-conclusao .apostila-kicker {
    color: var(--nx-green) !important;
}

/* ── Responsividade ──────────────────────────────────────── */
@media (max-width: 768px) {
    .apostila-paginacao-nav {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 14px;
    }
    .apostila-nav-btn {
        min-height: 46px;
        padding: 8px 14px;
        flex: 1 1 140px;
    }
    .apostila-paginacao-dots {
        order: 3;
        width: 100%;
        justify-content: center;
    }
    .apostila-nav-sub { display: none; }
}

@media (max-width: 480px) {
    .apostila-nav-btn {
        flex: 1 1 100%;
    }
    .apostila-paginacao-nav {
        flex-direction: column;
    }
    .apostila-nav-proximo .apostila-nav-text { text-align: left; }
}


/* ============================================================
   APOSTILA — VISUAL PREMIUM + PAGINAÇÃO
   ONDE COLAR: adicionar ao FINAL de SN_Dashboard/assets/styles.css
   ============================================================ */

/* ── Card premium do capítulo ────────────────────────────── */
.ap-card {
    display: flex;
    gap: 0;
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(10,110,209,0.07);
    margin-bottom: 0;
}

/* Sidebar lateral azul com número */
.ap-card-sidebar {
    width: 72px;
    min-width: 72px;
    background: linear-gradient(180deg, var(--nx-navy) 0%, var(--nx-blue) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0 20px 0;
    gap: 4px;
    flex-shrink: 0;
}

.ap-cap-numero {
    font-size: 28px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    font-family: "Arial", sans-serif;
}

.ap-cap-label {
    font-size: 9px;
    font-weight: 800;
    color: rgba(255,255,255,0.55);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Barra de progresso vertical na sidebar */
.ap-sidebar-progress {
    flex: 1;
    width: 3px;
    margin-top: 14px;
    display: flex;
    align-items: flex-end;
}

.ap-sidebar-track {
    width: 3px;
    height: 80px;
    background: rgba(255,255,255,0.15);
    border-radius: 99px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ap-sidebar-fill {
    width: 100%;
    background: rgba(255,255,255,0.75);
    border-radius: 99px;
    transition: height .4s ease;
}

/* Corpo do capítulo */
.ap-card-body {
    flex: 1;
    padding: 28px 32px 32px 28px;
    min-width: 0;
}

/* Cabeçalho interno do capítulo */
.ap-card-head {
    margin-bottom: 20px;
}

.ap-cap-meta {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 8px;
}

.ap-meta-total {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

.ap-cap-titulo {
    font-size: 24px;
    font-weight: 800;
    color: var(--nx-navy);
    line-height: 1.2;
    margin: 0 0 16px 0;
    font-family: "Arial", sans-serif;
}

.ap-cap-divider {
    height: 3px;
    width: 48px;
    background: linear-gradient(90deg, var(--nx-blue), var(--nx-navy));
    border-radius: 99px;
}

/* ── Tipografia do conteúdo ──────────────────────────────── */
.ap-cap-conteudo {
    line-height: 1.75;
}

.ap-titulo-principal {
    font-size: 20px;
    font-weight: 800;
    color: var(--nx-navy);
    margin: 28px 0 10px 0;
    font-family: "Arial", sans-serif;
    border-left: 4px solid var(--nx-blue);
    padding-left: 12px;
}

.ap-titulo-secao {
    font-size: 17px;
    font-weight: 700;
    color: var(--nx-navy);
    margin: 22px 0 8px 0;
    font-family: "Arial", sans-serif;
}

.ap-subtitulo {
    font-size: 15px;
    font-weight: 700;
    color: #374151;
    margin: 16px 0 6px 0;
    font-family: "Arial", sans-serif;
}

.ap-body-text {
    font-size: 15px;
    line-height: 1.8;
    color: #374151;
    margin-bottom: 12px;
}

/* Lista */
.ap-lista {
    margin: 4px 0 16px 20px;
    padding: 0;
}

.ap-lista-item {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 6px;
    padding-left: 4px;
}

.ap-lista-item::marker {
    color: var(--nx-blue);
}

/* Citação / destaque */
.ap-quote {
    border-left: 4px solid var(--nx-blue);
    background: linear-gradient(90deg, var(--nx-blue-tint), #f8fafc);
    padding: 14px 20px;
    border-radius: 0 10px 10px 0;
    margin: 16px 0;
}

.ap-quote-text {
    font-style: italic;
    font-size: 15px;
    color: var(--nx-navy);
    line-height: 1.7;
    margin: 0;
}

/* Divisor */
.ap-divider {
    border: none;
    border-top: 1px solid var(--nx-line);
    margin: 20px 0;
}

/* ── Barra de progresso superior ─────────────────────────── */
.apostila-paginacao-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.apostila-paginacao-bar-track {
    flex: 1;
    height: 6px;
    background: var(--nx-line);
    border-radius: 99px;
    overflow: hidden;
}

.apostila-paginacao-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--nx-blue) 0%, var(--nx-navy) 100%);
    border-radius: 99px;
    transition: width 0.4s ease;
}

.apostila-paginacao-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--nx-muted);
    white-space: nowrap;
}

/* ── Barra de navegação ──────────────────────────────────── */
.apostila-paginacao-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-top: none;
    border-radius: 0 0 14px 14px;
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ── Botões de navegação ─────────────────────────────────── */
.apostila-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #dbe4ef;
    background: #f8fafc;
    cursor: pointer;
    font-family: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.apostila-nav-btn:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: rgba(10,110,209,0.35);
    box-shadow: 0 8px 18px rgba(10,110,209,0.12);
}

.apostila-nav-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    transform: none !important;
}

.apostila-nav-anterior { flex-direction: row; }
.apostila-nav-proximo  { flex-direction: row-reverse; }

/* Botão Concluir — azul escuro */
.apostila-nav-concluir {
    background: linear-gradient(135deg, var(--nx-navy) 0%, var(--nx-blue) 100%) !important;
    border-color: rgba(10,110,209,0.45) !important;
}
.apostila-nav-concluir:hover {
    box-shadow: 0 8px 22px rgba(10,110,209,0.30) !important;
}
.apostila-nav-concluir .apostila-nav-label,
.apostila-nav-concluir .apostila-nav-sub,
.apostila-nav-concluir .apostila-nav-arrow {
    color: #ffffff !important;
}

/* Textos dos botões */
.apostila-nav-text  { display: flex; flex-direction: column; }
.apostila-nav-anterior .apostila-nav-text { text-align: left; }
.apostila-nav-proximo  .apostila-nav-text { text-align: right; }

.apostila-nav-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--nx-blue);
    line-height: 1.15;
}

.apostila-nav-sub {
    font-size: 10px;
    font-weight: 600;
    color: var(--nx-muted);
    margin-top: 2px;
}

.apostila-nav-arrow {
    font-size: 18px;
    font-weight: 900;
    color: var(--nx-blue);
    line-height: 1;
    flex-shrink: 0;
}

/* ── Dots de paginação ───────────────────────────────────── */
.apostila-paginacao-dots {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
}

.apostila-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.apostila-dot-ativo {
    width: 22px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--nx-blue), var(--nx-navy));
}

/* ── Botão PDF no header ─────────────────────────────────── */
.ap-btn-pdf {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    transition: opacity .15s, transform .15s;
    white-space: nowrap;
}
.ap-btn-pdf:hover {
    opacity: .88;
    transform: translateY(-1px);
}

/* ── Tela de conclusão ───────────────────────────────────── */
.apostila-conclusao {
    border: 2px solid var(--nx-green) !important;
    background: linear-gradient(135deg, var(--nx-green-tint) 0%, #ffffff 100%) !important;
    text-align: center;
    padding: 40px 32px !important;
}
.apostila-conclusao .apostila-kicker { color: var(--nx-green) !important; }

/* ── Responsividade ──────────────────────────────────────── */
@media (max-width: 1023px) {
    .ap-card-body { padding: 22px 22px 24px 20px; }
    .ap-cap-titulo { font-size: 20px; }
}

@media (max-width: 767px) {
    .ap-card { flex-direction: column; }
    .ap-card-sidebar {
        width: 100%;
        min-width: unset;
        flex-direction: row;
        padding: 14px 18px;
        gap: 10px;
        align-items: center;
    }
    .ap-sidebar-progress { display: none; }
    .ap-cap-numero { font-size: 22px; }
    .ap-card-body  { padding: 18px 18px 20px 18px; }
    .ap-cap-titulo { font-size: 18px; }
    .apostila-paginacao-nav {
        flex-wrap: wrap;
        padding: 14px;
        gap: 10px;
    }
    .apostila-nav-btn {
        flex: 1 1 140px;
        min-height: 46px;
    }
    .apostila-paginacao-dots {
        order: 3;
        width: 100%;
    }
    .apostila-nav-sub { display: none; }
}

@media (max-width: 479px) {
    .apostila-nav-btn { flex: 1 1 100%; }
    .apostila-nav-proximo .apostila-nav-text { text-align: left; }
    .ap-body-text  { font-size: 14px; }
    .ap-lista-item { font-size: 14px; }
}
/* ===========================================================
   NEXO — Mídias Premium · Acrescentar ao final do styles.css
   Referência: MasterClass + Headspace · Base: SAP Fiori
   Nenhuma classe existente foi alterada.
   =========================================================== */


/* --------------------------------------------------------- */
/*   HERO IMERSIVO — full-width, fora do fiori-content       */
/* --------------------------------------------------------- */

.midia-hero {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    min-height: 260px;
    position: relative;
    overflow: hidden;
}

/* Overlay sutil para legibilidade */
.midia-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 0;
}

/* Lado esquerdo — informação principal */
.midia-hero-info {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 40px 48px 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 680px;
}

/* Kicker — módulo + tipo */
.midia-hero-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.midia-hero-kicker-icon {
    font-size: 16px;
}

.midia-hero-kicker-text {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nx-gold);
}

/* Número do capítulo */
.midia-hero-cap {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.60);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Título do capítulo */
.midia-hero-title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 560px;
}

/* Meta: duração + IA */
.midia-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.midia-hero-meta-item {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.midia-hero-meta-sep {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.30);
}

/* Barra de progresso no hero */
.midia-hero-progress {
    margin-top: 4px;
}

.midia-hero-progress-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.70);
    margin-bottom: 6px;
}

.midia-hero-progress-track {
    width: 100%;
    max-width: 320px;
    height: 4px;
    background: rgba(255, 255, 255, 0.20);
    border-radius: 99px;
    overflow: hidden;
}

.midia-hero-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}

/* Botões de ação */
.midia-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.midia-hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: var(--nx-navy);
    font-size: 13px;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: opacity 0.15s, transform 0.15s;
    letter-spacing: 0.01em;
}

.midia-hero-btn-primary:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.midia-hero-btn-icon {
    font-size: 14px;
}

.midia-hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background 0.15s;
}

.midia-hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.20);
    text-decoration: none !important;
}

/* Lado direito — estatísticas */
.midia-hero-stats {
    position: relative;
    z-index: 1;
    width: 220px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.25);
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.midia-hero-stat-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
}

.midia-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.midia-hero-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
}

.midia-hero-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Anel de progresso textual */
.midia-hero-progress-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.20);
}

.midia-hero-ring-value {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.midia-hero-ring-label {
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.50);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* Responsivo — hero */
@media (max-width: 900px) {
    .midia-hero { flex-direction: column; min-height: auto; }
    .midia-hero-stats {
        width: 100%; border-left: none;
        border-top: 1px solid rgba(255,255,255,0.10);
        flex-direction: row; flex-wrap: wrap;
        padding: 20px 24px; gap: 20px;
    }
    .midia-hero-info { padding: 28px 24px; }
    .midia-hero-stat-title { display: none; }
}

@media (max-width: 600px) {
    .midia-hero-title { font-size: 20px; }
    .midia-hero-info  { padding: 24px 20px; }
    .midia-hero-btn-primary,
    .midia-hero-btn-secondary { padding: 9px 16px; font-size: 12px; }
}


/* --------------------------------------------------------- */
/*   LISTA DE CAPÍTULOS PREMIUM — estilo MasterClass         */
/* --------------------------------------------------------- */

.chapter-list {
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Item base */
.chapter-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none !important;
    color: inherit;
    transition: background 0.15s ease;
    cursor: pointer;
}

.chapter-row:last-child {
    border-bottom: none;
}

.chapter-row:hover:not(.chapter-row--locked) {
    background: #f8fafc;
    text-decoration: none !important;
}

/* Estado ativo — capítulo sendo reproduzido */
.chapter-row--active {
    background: var(--nx-blue-tint);
    border-left: 3px solid var(--nx-blue);
    padding-left: 21px;
}

/* Estado concluído */
.chapter-row--done {
    background: #f9fafb;
}

.chapter-row--done .chapter-row-num {
    opacity: 0.40;
}

.chapter-row--done .chapter-row-title {
    color: var(--nx-muted);
}

/* Estado bloqueado */
.chapter-row--locked {
    opacity: 0.40;
    cursor: not-allowed;
    pointer-events: none;
    background: #f9fafb;
}

/* Número grande à esquerda */
.chapter-row-num {
    font-size: 28px;
    font-weight: 800;
    color: #d1d5db;
    min-width: 48px;
    line-height: 1;
    letter-spacing: -0.03em;
    flex-shrink: 0;
    transition: color 0.15s;
}

/* Conteúdo central */
.chapter-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chapter-row-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--nx-navy);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chapter-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chapter-row-meta-item {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
}

.chapter-row-meta-sep {
    font-size: 11px;
    color: #d1d5db;
}

.chapter-row-meta--progress {
    color: var(--nx-blue);
    font-weight: 700;
}

.chapter-row-meta--locked {
    color: #9ca3af;
    font-style: italic;
}

/* Barra de progresso inline */
.chapter-row-progress {
    width: 100%;
    max-width: 240px;
    height: 3px;
    background: var(--nx-line);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 4px;
}

.chapter-row-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}

/* Indicador de status à direita */
.chapter-row-status {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
}

.chapter-row-status--done {
    background: var(--nx-green-tint);
    color: var(--nx-green);
    border-radius: 50%;
    font-size: 13px;
}

.chapter-row-status--play {
    font-size: 16px;
}

.chapter-row-status--lock {
    font-size: 13px;
    opacity: 0.50;
}

/* Responsivo */
@media (max-width: 600px) {
    .chapter-row         { padding: 14px 16px; gap: 14px; }
    .chapter-row-num     { font-size: 22px; min-width: 36px; }
    .chapter-row-title   { font-size: 13px; }
    .chapter-row-progress { max-width: 160px; }
}


/* --------------------------------------------------------- */
/*   PLAYER PREMIUM                                          */
/* --------------------------------------------------------- */

.midia-player-card {
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Header do player */
.midia-player-header {
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.midia-player-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.midia-player-kicker {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nx-gold);
}

.midia-player-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    max-width: 520px;
}

.midia-player-back {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: background 0.15s;
    white-space: nowrap;
}

.midia-player-back:hover {
    background: rgba(255, 255, 255, 0.22);
    text-decoration: none !important;
}

/* Body do player */
.midia-player-body {
    padding: 20px 24px 24px 24px;
}

/* Tela do player */
.midia-player-screen {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--nx-navy);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid rgba(10, 110, 209, 0.20);
    position: relative;
}

.midia-player-screen--audio {
    aspect-ratio: unset;
    min-height: 200px;
    background: linear-gradient(135deg, var(--nx-navy) 0%, var(--nx-navy) 60%, #0a3d6e 100%);
}

.midia-player-screen-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 24px;
}

.midia-player-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    padding-left: 4px;
    cursor: pointer;
    background: transparent;
    transition: transform 0.2s, opacity 0.2s;
}

.midia-player-play-btn:hover {
    transform: scale(1.10);
    opacity: 0.85;
}

.midia-player-screen-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    max-width: 400px;
}

.midia-player-screen-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

/* Controles */
.midia-player-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.midia-player-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.midia-player-progress-track {
    width: 100%;
    height: 5px;
    background: var(--nx-line);
    border-radius: 99px;
    overflow: hidden;
    cursor: pointer;
}

.midia-player-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s ease;
}

.midia-player-time {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
}

.midia-player-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.midia-player-btn {
    background: var(--nx-bg);
    border: 1px solid var(--nx-line);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--nx-navy);
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.midia-player-btn:hover {
    background: var(--nx-blue-tint);
    border-color: rgba(10, 110, 209, 0.30);
    color: var(--nx-blue);
    text-decoration: none !important;
}

.midia-player-btn--primary {
    color: #ffffff !important;
    border-color: transparent !important;
    font-size: 13px;
    padding: 8px 20px;
}

.midia-player-btn--primary:hover {
    opacity: 0.90;
    color: #ffffff !important;
}

/* Responsivo — player */
@media (max-width: 600px) {
    .midia-player-header { flex-direction: column; }
    .midia-player-title  { font-size: 15px; }
    .midia-player-body   { padding: 16px; }
    .midia-player-btns   { gap: 6px; }
    .midia-player-btn    { font-size: 11px; padding: 7px 10px; }
}


/* --------------------------------------------------------- */
/*   TELA BLOQUEADA — módulo não liberado                    */
/* --------------------------------------------------------- */

.midia-locked-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 72px 32px;
    gap: 16px;
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-top: 32px;
}

.midia-locked-icon  { font-size: 52px; opacity: 0.35; }

.midia-locked-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--nx-navy);
}

.midia-locked-sub {
    font-size: 14px;
    color: var(--nx-muted);
    max-width: 420px;
    line-height: 1.65;
}

/* ===========================================================
   NEXO — Complemento · Acrescentar ao final do styles.css
   Apenas as classes ausentes após a última atualização.
   =========================================================== */


/* --------------------------------------------------------- */
/*   SUBHEADER — link ativo                                  */
/* --------------------------------------------------------- */

.sap-subheader-link.active {
    font-weight: 700;
    color: var(--nx-navy);
    pointer-events: none;
}


/* --------------------------------------------------------- */
/*   CTA BLOQUEADO — botão Mídias na Home antes do Ex. 1     */
/* --------------------------------------------------------- */

.journey-content-cta.locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.5);
}

.journey-content-cta.locked .journey-content-cta-icon {
    background: #f1f5f9;
    color: #9ca3af;
}

.journey-content-cta.locked .journey-content-cta-title {
    color: #9ca3af;
}


/* --------------------------------------------------------- */
/*   TABS — alternância Vídeo / Áudio                        */
/* --------------------------------------------------------- */

.media-tabs {
    display: flex;
    gap: 0;
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.media-tab {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--nx-muted);
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: "72", "Segoe UI", system-ui, sans-serif;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

.media-tab:hover {
    color: var(--nx-blue);
    background: #f8fafc;
}

.media-tab.active {
    color: var(--nx-blue);
    border-bottom-color: var(--nx-blue);
    background: #f8fafc;
}

/* ===========================================================
   NEXO — Onboarding Premium
   Acrescentar ao final do styles.css
   Zero classes existentes alteradas.
   =========================================================== */


/* --------------------------------------------------------- */
/*   HERO DE BOAS-VINDAS                                     */
/* --------------------------------------------------------- */

.ob-hero {
    width: 100%;
    background: linear-gradient(135deg, var(--nx-navy) 0%, var(--nx-navy) 60%, var(--nx-blue) 100%);
    position: relative;
    overflow: hidden;
}

.ob-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(10,110,209,0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(124,92,252,0.15) 0%, transparent 40%);
    pointer-events: none;
}

.ob-hero-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 40px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Kicker */
.ob-hero-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-gold);
    margin-bottom: 12px;
}

/* Título com nome */
.ob-hero-title {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.ob-hero-name {
    color: #6db3f2;
}

/* Descrição */
.ob-hero-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 28px;
}

/* Status inline */
.ob-hero-status {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px 20px;
    width: fit-content;
}

.ob-hero-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ob-hero-status-icon { font-size: 14px; }

.ob-hero-status-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.80);
}

.ob-hero-status-sep {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 20px;
}

/* Lado direito — diferenciais */
.ob-hero-right {
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 28px;
    backdrop-filter: blur(12px);
}

.ob-hero-right-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 20px;
}

.ob-diff-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ob-diff-item:last-child { border-bottom: none; padding-bottom: 0; }
.ob-diff-item:first-child { padding-top: 0; }

.ob-diff-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.ob-diff-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.3;
}

.ob-diff-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

/* Responsivo hero */
@media (max-width: 1024px) {
    .ob-hero-inner { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px; }
    .ob-hero-right { max-width: 100%; }
}

@media (max-width: 600px) {
    .ob-hero-inner { padding: 28px 20px; }
    .ob-hero-title { font-size: 26px; }
    .ob-hero-status { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ob-hero-status-sep { display: none; }
}


/* --------------------------------------------------------- */
/*   TIMELINE DE ETAPAS DA JORNADA                           */
/* --------------------------------------------------------- */

.ob-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ob-step {
    flex: 1;
    padding: 28px 24px;
    border-right: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.ob-step:last-child { border-right: none; }

.ob-step:hover { background: #f8fafc; }

.ob-step--active {
    background: var(--nx-blue-tint) !important;
    border-top: 3px solid var(--nx-blue);
    padding-top: 25px;
}

.ob-step--done {
    background: var(--nx-green-tint) !important;
    border-top: 3px solid var(--nx-green);
    padding-top: 25px;
}

/* Conector entre steps */
.ob-step-connector {
    width: 0;
    flex-shrink: 0;
}

/* Header do step: número + ícone */
.ob-step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ob-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid var(--nx-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #9ca3af;
    flex-shrink: 0;
}

.ob-step-num--active {
    background: var(--nx-blue);
    border-color: var(--nx-blue);
    color: #ffffff;
}

.ob-step-num--done {
    background: var(--nx-green);
    border-color: var(--nx-green);
    color: #ffffff;
    font-size: 14px;
}

.ob-step-icon {
    font-size: 20px;
}

/* Body */
.ob-step-body { display: flex; flex-direction: column; gap: 6px; }

.ob-step-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--nx-navy);
    line-height: 1.2;
}

.ob-step-desc {
    font-size: 12px;
    color: var(--nx-muted);
    line-height: 1.5;
}

.ob-step-detail {
    font-size: 11px;
    font-weight: 700;
    color: var(--nx-blue);
    margin-top: 4px;
}

.ob-step--done .ob-step-title { color: var(--nx-green); }
.ob-step--done .ob-step-detail { color: var(--nx-green); }

/* Badge de status */
.ob-step-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 99px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
    width: fit-content;
}

.ob-step-badge--done   { background: var(--nx-green-tint); color: var(--nx-green); border: 1px solid #bbf7d0; }
.ob-step-badge--active { background: var(--nx-blue-tint); color: var(--nx-blue); border: 1px solid #bfdbfe; }
.ob-step-badge--next   { background: #f9fafb; color: var(--nx-muted); border: 1px solid var(--nx-line); }
.ob-step-badge--locked { background: #fefce8; color: #92400e; border: 1px solid #fde68a; }

/* Responsivo timeline */
@media (max-width: 900px) {
    .ob-steps { flex-direction: column; }
    .ob-step  { border-right: none; border-bottom: 1px solid #f1f5f9; }
    .ob-step:last-child { border-bottom: none; }
    .ob-step--active,
    .ob-step--done { border-top: none; border-left: 3px solid; padding-top: 28px; padding-left: 21px; }
    .ob-step--active { border-left-color: var(--nx-blue); }
    .ob-step--done   { border-left-color: var(--nx-green); }
}


/* --------------------------------------------------------- */
/*   SUBTÍTULO DE SEÇÃO                                      */
/* --------------------------------------------------------- */

.ob-section-sub {
    font-size: 13px;
    color: var(--nx-muted);
    margin: -8px 0 16px 0;
    line-height: 1.5;
}


/* --------------------------------------------------------- */
/*   GRID DE NAVEGAÇÃO — o que cada seção faz               */
/* --------------------------------------------------------- */

.ob-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ob-nav-card {
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    padding: 22px;
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    cursor: pointer;
}

.ob-nav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(10,110,209,0.12);
    border-color: rgba(10,110,209,0.30);
    text-decoration: none !important;
}

.ob-nav-card--locked {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
}

.ob-nav-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ob-nav-card-icon { font-size: 26px; }

.ob-nav-card-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--nx-blue-tint);
    color: var(--nx-blue);
    border: 1px solid #bfdbfe;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ob-nav-card-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--nx-navy);
    line-height: 1.2;
}

.ob-nav-card-desc {
    font-size: 12px;
    color: var(--nx-muted);
    line-height: 1.55;
    flex: 1;
}

.ob-nav-card-action {
    font-size: 11px;
    font-weight: 700;
    color: var(--nx-blue);
    margin-top: 4px;
}

.ob-nav-card-action--locked {
    color: #9ca3af;
}

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

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


/* --------------------------------------------------------- */
/*   FAQ                                                     */
/* --------------------------------------------------------- */

.ob-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.ob-faq-card {
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-left: 3px solid var(--nx-blue);
}

.ob-faq-q {
    font-size: 14px;
    font-weight: 800;
    color: var(--nx-navy);
    margin-bottom: 8px;
    line-height: 1.3;
}

.ob-faq-a {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.65;
}

@media (max-width: 900px) {
    .ob-faq-grid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------- */
/*   CTA — PRÓXIMO PASSO                                     */
/* --------------------------------------------------------- */

.ob-cta-box {
    background: linear-gradient(135deg, var(--nx-navy) 0%, var(--nx-navy) 60%, var(--nx-blue) 100%);
    border-radius: 16px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 4px 20px rgba(10,110,209,0.25);
}

.ob-cta-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}

.ob-cta-icon-wrap {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ob-cta-icon { font-size: 24px; }

.ob-cta-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 4px;
}

.ob-cta-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.70);
}

.ob-cta-btn {
    background: #ffffff;
    color: var(--nx-navy);
    font-size: 14px;
    font-weight: 800;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.15s;
    letter-spacing: 0.01em;
}

.ob-cta-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    text-decoration: none !important;
}

@media (max-width: 600px) {
    .ob-cta-box   { flex-direction: column; align-items: flex-start; padding: 24px; }
    .ob-cta-btn   { width: 100%; text-align: center; }
    .ob-cta-title { font-size: 16px; }
}


/* --------------------------------------------------------- */
/*   SUPORTE                                                 */
/* --------------------------------------------------------- */

.ob-support-card {
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ob-support-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}

.ob-support-icon { font-size: 32px; flex-shrink: 0; }

.ob-support-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--nx-navy);
    margin-bottom: 4px;
}

.ob-support-desc {
    font-size: 13px;
    color: var(--nx-muted);
    line-height: 1.6;
    max-width: 480px;
}

.ob-support-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.ob-support-btn {
    background: var(--nx-green);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.ob-support-btn:hover {
    opacity: 0.88;
    text-decoration: none !important;
}

.ob-support-meta {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 600;
    text-align: right;
}

@media (max-width: 700px) {
    .ob-support-card  { flex-direction: column; }
    .ob-support-right { align-items: flex-start; }
    .ob-support-btn   { width: 100%; text-align: center; }
}

/* ========= ONBOARDING — PLANO DE ACESSO ========= */

.ob-plan-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ob-plan-current-card {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border-radius: 8px;
    border-left: 4px solid;
    max-width: 300px;
}

.ob-plan-badge-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #6a6d70;
}

.ob-plan-current-name {
    font-size: 22px;
    font-weight: 700;
    margin: 2px 0;
}

.ob-plan-current-price {
    font-size: 12px;
    color: #6a6d70;
}

/* ---- Tabela comparativa ---- */

.ob-plan-table {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    background: #ffffff;
}

.ob-plan-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    border-bottom: 1px solid #f0f0f0;
}

.ob-plan-row:last-child {
    border-bottom: none;
}

.ob-plan-row--alt {
    background: #fafafa;
}

.ob-plan-row--header {
    background: var(--nx-bg);
    border-bottom: 2px solid #e5e5e5;
}

.ob-plan-cell,
.ob-plan-th {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--nx-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ob-plan-th {
    flex-direction: column;
    gap: 2px;
    font-weight: 600;
    font-size: 13px;
}

.ob-plan-th--feat {
    justify-content: flex-start;
    font-weight: 600;
    color: #6a6d70;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ob-plan-th-price {
    font-size: 12px;
    font-weight: 400;
    color: #6a6d70;
}

.ob-plan-th-badge {
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    background: var(--nx-blue);
    border-radius: 20px;
    padding: 2px 8px;
    margin-top: 2px;
}

.ob-plan-th--active {
    background: #e8f1fb;
}

.ob-plan-cell--feature {
    justify-content: flex-start;
    font-weight: 400;
}

.ob-plan-cell--active {
    background: #f0f7ff;
}

@media (max-width: 600px) {
    .ob-plan-row { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
    .ob-plan-cell,
    .ob-plan-th  { padding: 8px 6px; font-size: 12px; }
    .ob-plan-current-card { max-width: 100%; }
}

/* ========= ADMIN PAGE ========= */

.admin-user-table {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    background: #ffffff;
}

.admin-user-row {
    display: grid;
    grid-template-columns: 2.5fr 1fr 0.5fr 1.5fr 1.2fr 0.8fr 0.8fr;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}

.admin-user-row:last-child {
    border-bottom: none;
}

.admin-user-row--header {
    background: var(--nx-bg);
    border-bottom: 2px solid #e5e5e5;
}

.admin-user-row--header .admin-user-cell {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6a6d70;
}

.admin-user-cell {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--nx-ink);
    display: flex;
    align-items: center;
}

.admin-user-col-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.admin-name-text {
    font-weight: 600;
    font-size: 13px;
    color: var(--nx-ink);
}

.admin-email-text {
    font-size: 11px;
    color: #6a6d70;
}

.admin-user-col-center {
    justify-content: center;
}

.admin-user-col-prog {
    min-width: 120px;
}

.admin-user-col-theme {
    font-size: 12px;
    color: #6a6d70;
}

.admin-user-col-meta {
    font-size: 12px;
    color: #9ca3af;
}

@media (max-width: 900px) {
    .admin-user-row {
        grid-template-columns: 2fr 1fr 0.4fr 1.2fr 1fr 0.7fr 0.7fr;
    }
    .admin-user-cell { padding: 10px 8px; font-size: 12px; }
    .admin-user-col-theme,
    .admin-user-col-meta { display: none; }
}

/* ========= MÍDIAS — TELA DE BLOQUEIO PREMIUM ========= */

.midia-block-wrapper {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}

.midia-block-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--nx-line);
    padding: 40px;
    max-width: 680px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.midia-block-icon {
    font-size: 40px;
    text-align: center;
}

.midia-block-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--nx-navy);
    text-align: center;
}

.midia-block-desc {
    font-size: 14px;
    color: #6a6d70;
    text-align: center;
    line-height: 1.6;
}

.midia-block-tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.midia-block-tier {
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--nx-line);
    background: var(--nx-bg);
}

.midia-block-tier--mid {
    border-color: var(--nx-blue);
    background: var(--nx-blue-tint);
}

.midia-block-tier--top {
    border-color: #fde68a;
    background: #fefce8;
}

.midia-block-tier--yours {
    border-color: var(--nx-green);
    background: var(--nx-green-tint);
}

.midia-block-tier-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--nx-ink);
    margin-bottom: 10px;
}

.midia-block-feat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.midia-block-feat-list li {
    font-size: 13px;
    color: var(--nx-ink);
}

.midia-block-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.midia-block-cta {
    align-self: center;
}

@media (max-width: 600px) {
    .midia-block-tiers  { grid-template-columns: 1fr; }
    .midia-block-actions { flex-direction: column; }
    .midia-block-card   { padding: 24px 16px; }
}

/* ========= UPGRADE SCREEN — mídias premium ========= */

.ug-wrapper {
    max-width: 1160px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

/* Cabeçalho */
.ug-head          { text-align: center; margin-bottom: 36px; }
.ug-seal {
    width: 52px; height: 52px;
    border-radius: 50%;
    background-color: var(--nx-navy);   /* keep separate so background-image (set inline) stacks */
    border: 2px solid var(--nx-gold);
    margin: 0 auto 16px;
    background-size: 42%;
    background-repeat: no-repeat;
    background-position: center;
}
.ug-head-title {
    font-size: 24px; font-weight: 800;
    color: var(--nx-navy); margin-bottom: 10px;
}
.ug-head-sub {
    font-size: 14px; color: var(--nx-muted);
    max-width: 540px; margin: 0 auto; line-height: 1.65;
}

/* Grids */
.ug-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1.05fr;
    gap: 16px; align-items: stretch;
}
.ug-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 16px;
    max-width: 840px;
    margin: 0 auto;
    align-items: stretch;
}

/* Cartão base */
.ug-col {
    background: var(--nx-card);
    border: 1px solid var(--nx-line);
    border-radius: 16px;
    padding: 26px 22px;
    display: flex; flex-direction: column;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease;
}
.ug-col:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(7,21,47,.10);
}

/* Plano atual — sem hover lift */
.ug-col--current            { background: #FAFBFC; }
.ug-col--current:hover      { transform: none; box-shadow: none; }

/* Elite — acento de topo em azul (sem dourado) */
.ug-col--elite {
    border-top: 2px solid var(--nx-blue);
}
.ug-col--elite:hover {
    box-shadow: 0 14px 38px rgba(7,21,47,.12);
}

/* Ribbon "Mais completo" / "Método completo" */
.ug-ribbon {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #8A6D17, #D6B24C, #8A6D17);
    color: #fff;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 99px;
    white-space: nowrap;
}

/* Badge "Seu plano atual" */
.ug-badge-cur {
    display: inline-block;
    background: #EEF1F5; color: var(--nx-muted);
    font-size: 11px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    padding: 4px 11px; border-radius: 99px;
    margin-bottom: 14px; align-self: flex-start;
}

/* Nome e preço */
.ug-plan-name         { font-size: 20px; font-weight: 800; color: var(--nx-navy); margin-bottom: 2px; }
.ug-plan-name--dim    { color: var(--nx-muted); }
.ug-price             { font-size: 28px; font-weight: 800; color: var(--nx-navy); margin: 8px 0 2px; }
.ug-price small       { font-size: 13px; font-weight: 600; color: var(--nx-muted); }
.ug-price--cur        { font-size: 17px; color: var(--nx-muted); margin: 8px 0 2px; }
.ug-tagline           { font-size: 12.5px; color: var(--nx-muted); min-height: 28px; }
.ug-rule              { height: 1px; background: var(--nx-line); margin: 16px 0; border: none; }

/* Lista de features */
.ug-feat {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 11px; flex: 1;
}
.ug-feat-item {
    display: flex; gap: 10px;
    font-size: 13px; line-height: 1.35;
    align-items: center; color: var(--nx-ink);
}
.ug-feat-item--lock   { color: #9AA7B6; }
.ug-feat-icon {
    width: 19px; height: 19px;
    flex: 0 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ug-feat-hl           { font-weight: 700; }

/* CTAs */
.ug-cta {
    margin-top: 22px;
    display: flex; align-items: center;
    justify-content: center; gap: 6px;
    font-weight: 700; font-size: 13.5px;
    border-radius: 10px; padding: 12px;
    text-decoration: none;
    transition: filter .15s;
    cursor: pointer; border: none;
}
.ug-cta--blue       { background: var(--nx-blue); color: #fff; }
.ug-cta--blue:hover { filter: brightness(1.06); }
.ug-cta--gold       { background: var(--nx-gold); color: var(--nx-navy); }
.ug-cta--gold:hover { filter: brightness(1.05); }
.ug-cta--dis        { background: #EEF1F5; color: #94A1B0; cursor: default; pointer-events: none; }

/* Variação B — elementos extras */
.ug-nearly {
    background: rgba(10,110,209,.06);
    border: 1px solid rgba(10,110,209,.18);
    color: var(--nx-blue-dark);
    font-size: 12.5px; border-radius: 10px;
    padding: 10px 12px; margin: 4px 0;
    text-align: center; font-weight: 600;
}
.ug-cta--outline {
    background: transparent;
    color: var(--nx-blue);
    border: 1.5px solid var(--nx-blue);
}
.ug-cta--outline:hover { background: rgba(10,110,209,.06); filter: none; }
.ug-foot {
    text-align: center; margin-top: 24px;
    font-size: 12px; color: #9AA7B6;
}

@media (max-width: 768px) {
    .ug-grid-3, .ug-grid-2 { grid-template-columns: 1fr; }
    .ug-head-title          { font-size: 20px; }
}

/* ========= ADMIN — ENTERPRISE ========= */

/* Hero banner */
.admin-hero {
    background: linear-gradient(135deg, var(--nx-navy) 0%, #0a3a6e 55%, var(--nx-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    gap: 24px;
}
.admin-hero-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.admin-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
}
.admin-hero-meta {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}
.admin-hero-right { text-align: right; }
.admin-hero-role  { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5);
                    text-transform: uppercase; letter-spacing: 0.07em; }
.admin-hero-name  { font-size: 16px; font-weight: 700; color: #ffffff; margin-top: 2px; }

/* Formulário criar usuário */
.admin-form-card {
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.admin-form-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--nx-navy);
}
.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.admin-form-field   { display: flex; flex-direction: column; gap: 6px; }
.admin-form-label   { font-size: 12px; font-weight: 600; color: #6a6d70; }
.admin-form-input   {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--nx-ink);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.admin-form-input:focus { border-color: var(--nx-blue); }
.admin-form-dropdown { font-size: 13px !important; }
.admin-form-password-row { display: flex; gap: 8px; align-items: center; }

/* Botões */
.admin-btn {
    border: none; border-radius: 8px; cursor: pointer;
    font-size: 13px; font-weight: 600; padding: 9px 20px;
    transition: opacity 0.15s;
}
.admin-btn:hover   { opacity: 0.85; }
.admin-btn-primary { background: var(--nx-blue); color: #ffffff; align-self: flex-start; }
.admin-btn-secondary { background: var(--nx-bg); color: var(--nx-ink);
                       border: 1px solid #d1d5db; }

/* Filtros */
.admin-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    align-items: center;
}
.admin-filter-search {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--nx-ink);
    flex: 1;
    min-width: 200px;
    outline: none;
}
.admin-filter-search:focus { border-color: var(--nx-blue); }
.admin-filter-dropdown { min-width: 160px; font-size: 13px !important; }

/* Badges de plano — spec exata */
.admin-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.admin-badge-starter      { background: #f1f5f9; color: #374151; }
.admin-badge-profissional { background: var(--nx-blue-tint); color: var(--nx-blue); }
.admin-badge-elite        { background: #fefce8; color: #92400e;
                            border: 1px solid #fde68a; }

/* Tabela */
.admin-table {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--nx-line);
    background: #ffffff;
}
.admin-table-row {
    display: grid;
    grid-template-columns: 2.2fr 1fr 0.5fr 1.4fr 1fr 1fr 1fr 0.9fr 1.1fr;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    transition: background 0.12s;
}
.admin-table-row:last-child { border-bottom: none; }
.admin-table-row:not(.admin-table-row--header):hover { background: #f8fafc; }
.admin-table-row--header {
    background: var(--nx-bg);
    border-bottom: 2px solid var(--nx-line);
}
.admin-table-row--header .admin-tc {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6a6d70;
}
.admin-tc {
    padding: 12px 10px;
    font-size: 13px;
    color: var(--nx-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}
.admin-tc-status  { justify-content: center; }
.admin-tc-acoes   { gap: 6px; flex-wrap: wrap; }

/* Avatar */
.admin-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--nx-blue); color: #ffffff;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.admin-avatar--lg { width: 52px; height: 52px; font-size: 18px; }

.admin-user-name  { font-size: 13px; font-weight: 600; color: var(--nx-ink); }
.admin-user-email { font-size: 11px; color: #6a6d70; }

/* Status dot */
.admin-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
}

/* Progress bar */
.admin-prog-wrap  { display: flex; align-items: center; gap: 6px; width: 100%; }
.admin-prog-track { flex: 1; background: #f0f0f0; border-radius: 4px; height: 6px; }
.admin-prog-fill  { height: 6px; border-radius: 4px; }
.admin-prog-label { font-size: 11px; color: #6a6d70; min-width: 28px; }

/* Botões de ação na tabela */
.admin-action-btn {
    font-size: 11px; font-weight: 600; border-radius: 6px;
    padding: 4px 10px; border: none; cursor: pointer;
    white-space: nowrap; text-decoration: none; display: inline-block;
    transition: opacity 0.15s;
}
.admin-action-btn:hover   { opacity: 0.8; }
.admin-action-ver   { background: var(--nx-blue-tint); color: var(--nx-blue); }
.admin-action-block { background: #fff5f5; color: #c0392b; }
.admin-action-reset { background: var(--nx-bg); color: #374151; }

/* Feedback */
.admin-feedback {
    border-left: 4px solid;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 8px;
}
.admin-feedback-msg  { font-size: 13px; font-weight: 600; }
.admin-feedback-list { margin: 8px 0 0 16px; padding: 0;
                       font-size: 12px; color: var(--nx-ink); }
.admin-feedback-list li { margin-bottom: 4px; }

/* Página detalhe de jornada */
.admin-back-link {
    display: inline-block;
    font-size: 13px; font-weight: 600; color: var(--nx-blue);
    text-decoration: none; margin-bottom: 16px;
}
.admin-back-link:hover { text-decoration: underline; }

.admin-jornada-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #ffffff;
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    padding: 24px;
}
.admin-jornada-name  { font-size: 20px; font-weight: 700; color: var(--nx-navy); }
.admin-jornada-email { font-size: 13px; color: #6a6d70; margin: 2px 0 10px; }
.admin-jornada-meta  { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.admin-jornada-meta-item { font-size: 12px; color: #6a6d70; }

/* Histórico de planos */
.admin-hist-table {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--nx-line);
    background: #ffffff;
}
.admin-hist-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 0.7fr 1.2fr;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}
.admin-hist-row:last-child { border-bottom: none; }
.admin-hist-row--header { background: var(--nx-bg); border-bottom: 2px solid var(--nx-line); }
.admin-hist-row--header .admin-hist-cell {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #6a6d70;
}
.admin-hist-cell { padding: 10px 14px; font-size: 13px; color: var(--nx-ink); }

/* Empty state */
.admin-empty {
    padding: 32px;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
}

@media (max-width: 1100px) {
    .admin-table-row {
        grid-template-columns: 2fr 1fr 0.5fr 1.2fr 0.9fr 0.9fr 0.9fr 0.8fr 1fr;
    }
}
@media (max-width: 800px) {
    .admin-table-row { grid-template-columns: 2fr 1fr 0.5fr 1.2fr 1fr; }
    .admin-tc-fase, .admin-tc-modulo,
    .admin-tc-clareza, .admin-tc-meta { display: none; }
    .admin-hero { flex-direction: column; }
    .admin-hero-right { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ONBOARDING — Seção de Planos Premium (.ob-plans-*)
   Prefixo isolado: não altera .ob-plan-* existente
   Paleta: azul Fiori (var(--nx-navy) · var(--nx-blue) · var(--nx-blue-tint) · #bfdbfe) + neutros
══════════════════════════════════════════════════════════════════════════════ */

.ob-plans-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Card do plano atual (dark gradient) ─────────────────────────────────── */

.ob-plans-current-card {
    border-radius: 16px;
    padding: 28px 32px;
    position: relative;
    overflow: hidden;
}

.ob-plans-current-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.ob-plans-current-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.ob-plans-current-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ob-plans-current-icon {
    font-size: 42px;
    line-height: 1;
}

.ob-plans-current-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.ob-plans-current-price {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 3px;
}

.ob-plans-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ob-plans-benefits {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.ob-plans-benefit-item {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 4px 10px;
    list-style: none;
}

.ob-plans-benefit-item::before {
    content: "✓ ";
    color: #bfdbfe;
    font-weight: 700;
}

.ob-plans-upgrade-cta {
    display: inline-block;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    background: var(--nx-blue);
    border-radius: 6px;
    padding: 7px 16px;
    position: relative;
    z-index: 1;
    transition: background 0.15s;
}

.ob-plans-upgrade-cta:hover {
    background: var(--nx-blue);
    color: #fff;
    text-decoration: none;
}

/* ── Tabela comparativa (light mode Fiori) ───────────────────────────────── */

.ob-plans-table {
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.ob-plans-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    background: #ffffff;
    border-bottom: 1px solid var(--nx-line);
}

.ob-plans-th {
    padding: 14px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--nx-muted);
    font-weight: 600;
}

.ob-plans-th--feat {
    text-align: left;
}

.ob-plans-th--current {
    border-top: 3px solid var(--nx-blue);
    background: var(--nx-blue-tint);
}

.ob-plans-th-name {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

.ob-plans-th-price {
    font-size: 12px;
    color: var(--nx-muted);
    margin-top: 2px;
}

.ob-plans-th-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 5px;
}

.ob-plans-section-row {
    background: #f8fafc;
    border-top: 1px solid var(--nx-line);
}

.ob-plans-section-label {
    padding: 7px 12px;
    font-size: 10px;
    font-weight: 700;
    color: var(--nx-muted);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ob-plans-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    transition: background 0.12s;
}

.ob-plans-row:hover {
    background: #f8fafc;
}

.ob-plans-row--alt {
    background: #f8fafc;
}

.ob-plans-cell {
    padding: 9px 12px;
    font-size: 13px;
    color: #374151;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--nx-line);
}

.ob-plans-cell--feat {
    text-align: left;
    justify-content: flex-start;
    color: #374151;
}

.ob-plans-cell--current {
    background: var(--nx-blue-tint);
    border-left: 1px solid #bfdbfe;
    border-right: 1px solid #bfdbfe;
}

.ob-plans-check--yes {
    color: var(--nx-blue);
    font-weight: 700;
    font-size: 15px;
}

.ob-plans-check--no {
    color: var(--nx-line);
    font-size: 15px;
}

.ob-plans-footer-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    background: #f8fafc;
    border-top: 1px solid var(--nx-line);
}

.ob-plans-footer-cell {
    padding: 14px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ob-plans-footer-cell--current {
    background: var(--nx-blue-tint);
}

.ob-plans-footer-price {
    font-size: 15px;
    font-weight: 700;
    color: #374151;
}

.ob-plans-footer-cta {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    background: var(--nx-blue);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    transition: background 0.15s;
    white-space: nowrap;
}

.ob-plans-footer-cta:hover {
    background: var(--nx-blue);
    color: #fff;
    text-decoration: none;
}

/* ── Responsivo ──────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
    .ob-plans-table-header,
    .ob-plans-row,
    .ob-plans-footer-row {
        grid-template-columns: 1.4fr 0.7fr 0.7fr 0.7fr;
    }

    .ob-plans-cell,
    .ob-plans-th {
        padding: 8px 6px;
        font-size: 11px;
    }

    .ob-plans-th-name { font-size: 12px; }

    .ob-plans-current-card { padding: 20px; }
    .ob-plans-current-icon { font-size: 30px; }
    .ob-plans-current-name { font-size: 20px; }
}

/* ========= MÍDIAS — PLAYER DE ÁUDIO ========= */

.midia-audio-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 12px;
    animation: pulse-audio 2s ease-in-out infinite;
    color: var(--nx-blue);
}

.midia-player-card--audio {
    background: var(--nx-bg);
}

@keyframes pulse-audio {
    0%, 100% { transform: scale(1);    opacity: 1;    }
    50%       { transform: scale(1.08); opacity: 0.85; }
}

.midia-audio-badge {
    background: var(--nx-blue);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 8px;
}


/* =============================================================================
   FASE 4 — Cards expansíveis: exercícios 1 e 2
   Estratégia: tile-sub oculto por padrão (display:none), revelado ao expandir.
   Evita conflito de overflow/height — o card cresce naturalmente quando
   o elemento oculto se torna visível.
   ============================================================================= */

/* Indica interatividade */
.tile-expandable {
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.tile-expandable:hover {
    box-shadow: 0 4px 16px rgba(10, 110, 209, 0.12) !important;
}

/* Oculta o texto da resposta nos cards colapsados */
.tile-expandable .tile-sub {
    display: none !important;
}

/* Card expandido via data-attribute — especificidade (0,4,0) supera todas as
   regras de overflow:hidden !important definidas em .tile e .smart-tile */
.tile.smart-tile.tile-expandable[data-expanded] {
    overflow: visible !important;
}

/* Exibe a resposta quando expandido — especificidade (0,5,0) supera
   .smart-tile .tile-sub { display:-webkit-box !important } em (0,2,0) */
.tile.smart-tile.tile-expandable[data-expanded] .tile-sub {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
}

/* Barra CTA "Ver minha resposta" / "Ocultar resposta" nos cards de histórico */
.ex-cta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid var(--nx-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--nx-blue);
    user-select: none;
}
.ex-cta-icon {
    width: 16px; height: 16px;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6ED1' stroke-width='1.8'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ex-cta-hide { display: none; }
.ex-cta-chevron {
    width: 16px; height: 16px;
    flex: 0 0 auto;
    margin-left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}
.tile.smart-tile.tile-expandable[data-expanded] .ex-cta-show   { display: none; }
.tile.smart-tile.tile-expandable[data-expanded] .ex-cta-hide   { display: inline; }
.tile.smart-tile.tile-expandable[data-expanded] .ex-cta-chevron { transform: rotate(180deg); }

/* Nova Home */


:root{
  --fl-blue:   var(--nx-blue);
  --fl-blue-d: var(--nx-blue-dark);
  --fl-ink:    var(--nx-ink);
  --fl-slate:  var(--nx-slate);
  --fl-line:   var(--nx-line);
  --fl-bg:     var(--nx-bg);
  --fl-teal:   #1BA39C;
  --fl-font:   var(--nx-font);
}

/* ===== SHELL ===== */
.fl-shell{display:flex;min-height:100vh;width:100%;background:var(--fl-bg);
  color:var(--fl-ink);font-family:var(--fl-font)}
.fl-shell *{box-sizing:border-box}

/* ===== LEFT ===== */
.fl-left{flex:1.15;position:relative;padding:60px 64px;display:flex;flex-direction:column;
  background:#fff;overflow:hidden}
.fl-mesh{position:absolute;inset:0;z-index:0;pointer-events:none}
.fl-mesh::before{content:"";position:absolute;top:-180px;right:-120px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(27,163,156,.20),transparent 60%),
             radial-gradient(circle at 70% 70%,rgba(10,110,209,.18),transparent 62%);filter:blur(8px)}
.fl-mesh::after{content:"";position:absolute;bottom:-220px;left:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(10,110,209,.10),transparent 65%)}
.fl-left>*{position:relative;z-index:1}

.fl-brand{display:flex;align-items:center;gap:14px;margin-bottom:50px}
.fl-logo{width:48px;height:48px;border-radius:11px;object-fit:contain;display:block}
.fl-brand-t{font-size:22px;font-weight:700;letter-spacing:6px;color:var(--fl-ink);line-height:1}
.fl-brand-s{font-size:10px;letter-spacing:4px;color:var(--fl-blue);font-weight:700;margin-top:4px}

.fl-kicker{font-size:12px;letter-spacing:5px;font-weight:700;color:var(--fl-slate);
  text-transform:uppercase;margin-bottom:14px}
.fl-h1{font-size:60px;line-height:1.02;font-weight:700;letter-spacing:-2px;color:var(--fl-ink);margin:0}
.fl-h1 em{font-style:normal;color:var(--fl-blue)}
.fl-tags{display:flex;align-items:center;gap:12px;margin:24px 0 20px;flex-wrap:wrap}
.fl-dot{width:8px;height:8px;border-radius:50%;background:var(--fl-teal)}
.fl-tags span{font-size:12.5px;letter-spacing:1.5px;color:var(--fl-slate);font-weight:700;text-transform:uppercase}
.fl-tags .fl-sep{color:var(--fl-line)}
.fl-copy{font-size:16.5px;color:var(--fl-slate);line-height:1.6;max-width:440px;margin:0 0 32px}

.fl-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px;max-width:580px}
.fl-feat{border:1px solid var(--fl-line);border-radius:12px;padding:20px 18px;background:#fff;
  box-shadow:0 1px 2px rgba(26,39,51,.04)}
.fl-feat-ic{width:40px;height:40px;border-radius:10px;background:var(--nx-blue-tint);margin-bottom:14px;
  background-repeat:no-repeat;background-position:center;background-size:20px 20px}
.fl-feat h3{font-size:14.5px;font-weight:700;color:var(--fl-ink);margin:0 0 5px}
.fl-feat p{font-size:12.5px;color:var(--fl-slate);line-height:1.45;margin:0}
.fl-ic-activity{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%230A6ED1%27%20stroke-width%3D%272.0%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2012h4l3%208%204-16%203%208h4%27%2F%3E%3C%2Fsvg%3E")}
.fl-ic-calendar{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%230A6ED1%27%20stroke-width%3D%272.0%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2717%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%209h18M8%202v4M16%202v4%27%2F%3E%3C%2Fsvg%3E")}
.fl-ic-clock{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%230A6ED1%27%20stroke-width%3D%272.0%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207v5l3%203%27%2F%3E%3C%2Fsvg%3E")}

.fl-kpis{display:flex;align-items:center;gap:28px;padding-top:28px;border-top:1px solid var(--fl-line);margin-top:auto}
.fl-kpi .v{font-size:29px;font-weight:700;color:var(--fl-ink);letter-spacing:-.5px}
.fl-kpi .l{font-size:11px;letter-spacing:1px;color:var(--fl-slate);text-transform:uppercase;margin-top:3px}
.fl-kpi-sep{width:1px;height:36px;background:var(--fl-line)}
.fl-trust{display:flex;gap:24px;margin-top:20px;flex-wrap:wrap}
.fl-trust-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--fl-slate);font-weight:600}
.fl-trust-item::before{content:"";width:14px;height:14px;background-repeat:no-repeat;background-position:center;background-size:contain;flex-shrink:0}
.fl-trust-shield::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231BA39C%27%20stroke-width%3D%272.0%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l7%203v5c0%205-3%208-7%2010-4-2-7-5-7-10V6z%27%2F%3E%3C%2Fsvg%3E")}
.fl-trust-lock::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231BA39C%27%20stroke-width%3D%272.0%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2711%27%20width%3D%2714%27%20height%3D%279%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2011V8a4%204%200%200%201%208%200v3%27%2F%3E%3C%2Fsvg%3E")}
.fl-trust-cloud::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231BA39C%27%20stroke-width%3D%272.0%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2018a4%204%200%200%201%200-8%206%206%200%200%201%2011-2%204%204%200%200%201%202%2010z%27%2F%3E%3C%2Fsvg%3E")}

/* ===== RIGHT / CARD ===== */
.fl-right{flex:.85;background:var(--fl-bg);display:flex;align-items:center;justify-content:center;
  padding:48px;border-left:1px solid var(--fl-line)}
.fl-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--fl-line);border-radius:18px;
  padding:40px 38px;box-shadow:0 24px 60px -28px rgba(8,48,90,.30),0 2px 6px rgba(26,39,51,.04)}
.fl-crow{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.fl-clock{width:38px;height:38px;border-radius:10px;background:var(--nx-blue-tint);flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%230A6ED1%27%20stroke-width%3D%272.0%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2711%27%20width%3D%2714%27%20height%3D%279%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2011V8a4%204%200%200%201%208%200v3%27%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center;background-size:18px 18px}
.fl-ck{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--fl-blue)}
.fl-cks{font-size:11px;color:var(--fl-slate);margin-top:2px}
.fl-ctitle{font-size:24px;font-weight:700;color:var(--fl-ink);letter-spacing:-.4px;margin:0}
.fl-csub{font-size:13.5px;color:var(--fl-slate);margin:7px 0 24px;line-height:1.5}
.fl-cdiv{height:1px;background:var(--fl-line);margin-bottom:22px}

.fl-label{display:block;font-size:11px;letter-spacing:1.5px;font-weight:700;color:var(--fl-slate);
  text-transform:uppercase;margin-bottom:8px}
.fl-field{display:flex;align-items:center;gap:10px;border:1.5px solid var(--fl-line);border-radius:10px;
  padding:0 14px;height:50px;margin-bottom:20px;background:#FBFCFD;transition:border-color .15s,box-shadow .15s}
.fl-field:focus-within{border-color:var(--fl-blue);background:#fff;box-shadow:0 0 0 3px rgba(10,110,209,.12)}
.fl-field-ic{width:17px;height:17px;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:contain}
.fl-ic-user{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2394A3B8%27%20stroke-width%3D%272.0%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M4%2020c0-4%204-6%208-6s8%202%208%206%27%2F%3E%3C%2Fsvg%3E")}
.fl-ic-lock{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2394A3B8%27%20stroke-width%3D%272.0%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2711%27%20width%3D%2714%27%20height%3D%279%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2011V8a4%204%200%200%201%208%200v3%27%2F%3E%3C%2Fsvg%3E")}
.fl-field .fl-input,.fl-field input{border:0!important;outline:0!important;background:transparent!important;
  flex:1;font-size:15px;color:var(--fl-ink);box-shadow:none!important;padding:0!important;height:auto!important}
.fl-field input::placeholder{color:#9AA7B5}
.fl-eye-btn{margin-left:auto;width:22px;height:22px;border:0;background:transparent;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2394A3B8%27%20stroke-width%3D%272.0%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center;background-size:18px 18px;
  font-size:0;flex-shrink:0;padding:0}

.fl-button{width:100%;height:54px;border:0;border-radius:11px;
  background:linear-gradient(180deg,var(--fl-blue),var(--fl-blue-d));color:#fff;font-size:14.5px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 24px -10px rgba(10,110,209,.55);transition:filter .15s,transform .05s}
.fl-button:hover{filter:brightness(1.06)}
.fl-button:active{transform:translateY(1px)}
.fl-button-arrow{font-size:16px}

.fl-cfoot{text-align:center;margin-top:22px}
.fl-cfoot .n1{font-size:11.5px;color:var(--fl-slate)}
.fl-cfoot .n2{font-size:11.5px;color:var(--fl-blue);font-weight:700;margin-top:4px;letter-spacing:.5px}
.fl-cfoot .v{font-size:10px;color:#9AA7B5;margin-top:10px;letter-spacing:.5px}
.fl-seals{display:flex;justify-content:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.fl-seal{display:flex;align-items:center;gap:5px;border:1px solid var(--fl-line);border-radius:7px;
  padding:6px 10px;font-size:10px;font-weight:700;color:var(--fl-slate);letter-spacing:.5px}
.fl-seal::before{content:"";width:12px;height:12px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231BA39C%27%20stroke-width%3D%272.0%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l7%203v5c0%205-3%208-7%2010-4-2-7-5-7-10V6z%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;background-position:center;background-size:contain}
.fl-seal.no-ic::before{display:none}

.fl-alert{margin-bottom:18px;border-radius:10px;font-size:13px}

/* ===== RESPONSIVO ===== */
@media (max-width:980px){
  .fl-shell{flex-direction:column}
  .fl-left{padding:40px 32px}
  .fl-features{grid-template-columns:1fr;max-width:none}
  .fl-right{border-left:0;border-top:1px solid var(--fl-line);padding:32px}
  .fl-h1{font-size:46px}
}