/**
 * GM20 METODOLOGIA - SISTEMA DE DESIGN COMPLETO
 * Versão reorganizada e otimizada - Fev 2026
 */

/* ============================================
   VARIÁVEIS CSS - DESIGN TOKENS
   ============================================ */
:root {
    /* === CORES PRINCIPAIS === */
    --primary-color: #FE6A00;
    --primary-light: #FF8533;
    --primary-dark: #E55D00;
    --secondary-color: #00A39E;
    --secondary-light: #00B8B0;
    --secondary-dark: #008B87;
    
    /* === CORES DE FUNDO === */
    --bg-primary: #000000;
    --bg-secondary: #0A0A0A;
    --bg-tertiary: #111111;
    --bg-card: #1A1A1A;
    --bg-card-hover: #222222;
    --bg-overlay: rgba(0, 0, 0, 0.95);
    
    /* === TEXTO === */
    --text-primary: #FFFFFF;
    --text-secondary: #E0E0E0;
    --text-muted: #BFBFBF;
    --text-disabled: #888888;
    --text-on-primary: #000000;
    
    /* === BORDAS === */
    --border-primary: #333333;
    --border-secondary: #444444;
    --border-light: #555555;
    --border-focus: var(--primary-color);
    
    /* === TYPOGRAPHY === */
    --font-family: 'Montserrat', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* === TAMANHOS DE FONTE === */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: clamp(1.25rem, 4vw, 1.5rem);   /* 20→24px fluido */
    --font-size-3xl: clamp(1.375rem, 5vw, 1.875rem); /* 22→30px fluido */
    --font-size-4xl: clamp(1.5rem, 6vw, 2.25rem);    /* 24→36px fluido */
    --font-size-5xl: clamp(1.75rem, 7vw, 3rem);      /* 28→48px fluido */
    
    /* === ESPAÇAMENTOS === */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    --space-4xl: 5rem;     /* 80px */
    --space-5xl: 6rem;     /* 96px */
    
    /* === LAYOUT === */
    --navbar-height: clamp(64px, calc(60px + 1.5vw), 72px); /* 64→72px fluido */
    --container-max-width: 1200px;
    --section-padding: clamp(1.5rem, 4vw, 5rem);  /* 24→80px fluido */
    --card-padding: clamp(1rem, 2vw, 2rem);       /* 16→32px fluido */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    --border-radius-full: 9999px;
    
    /* === SOMBRAS === */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 4px 20px rgba(254, 106, 0, 0.4);
    --shadow-secondary: 0 4px 20px rgba(0, 163, 158, 0.4);
    
    /* === TRANSIÇÕES === */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s ease;
    
    /* === Z-INDEX === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
    --z-toast: 1070;
}

/* === NOTA: responsividade de tipografia e espaçamento é automática via clamp() acima === */


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

html {
    /* Tipografia fluida: 14px (mobile) → 16px (1440px) → 18px (1920px+) */
    font-size: clamp(14px, calc(13px + 0.21vw), 18px);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    padding-top: calc(var(--navbar-height) + env(safe-area-inset-top, 0px));
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === LINKS === */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--primary-color);
}

a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* === IMAGENS === */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === LISTAS === */
ul,
ol {
    list-style: none;
}

ul.styled,
ol.styled {
    list-style: revert;
    padding-left: var(--space-lg);
}

/* === BOTÕES === */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    transition: all var(--transition-base);
}

button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* === INPUTS E FORMS === */
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

::placeholder {
    color: var(--text-disabled);
    opacity: 1;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-disabled);
    opacity: 1;
}

::-webkit-input-placeholder { color: var(--text-disabled); opacity: 1; }
::-moz-placeholder { color: var(--text-disabled); opacity: 1; }
:-ms-input-placeholder { color: var(--text-disabled); opacity: 1; }
:-moz-placeholder { color: var(--text-disabled); opacity: 1; }

.form-control {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-sm);
    padding: var(--space-sm) var(--space-md);
    transition: all var(--transition-base);
}

.form-control:focus {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-focus) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(254, 106, 0, 0.25) !important;
}

.form-control::placeholder {
    color: var(--text-disabled) !important;
}

.form-label {
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-sm);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ============================================
   SISTEMA DE TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

h1, .h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: var(--space-lg);
}

h2, .h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
}

h3, .h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

h4, .h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

h5, .h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

h6, .h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === PARAGRAFOS === */
p {
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

.lead {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* === UTILITÁRIOS DE TEXTO === */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-white { color: var(--text-primary) !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }

.fw-light { font-weight: var(--font-weight-light) !important; }
.fw-normal { font-weight: var(--font-weight-regular) !important; }
.fw-medium { font-weight: var(--font-weight-medium) !important; }
.fw-semibold { font-weight: var(--font-weight-semibold) !important; }
.fw-bold { font-weight: var(--font-weight-bold) !important; }
.fw-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* === HIGHLIGHTS E SPANS ESPECIAIS === */
.highlight,
.text-highlight {
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: var(--font-weight-extrabold);
}

/* ============================================
   SISTEMA DE LAYOUT
   ============================================ */

/* === CONTAINERS === */
.container-fluid {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

@media (min-width: 768px) {
    .container-fluid {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }
}

/* === SEÇÕES === */
section {
    padding: var(--section-padding) 0;
    position: relative;
}

.section-sm {
    padding: calc(var(--section-padding) * 0.5) 0;
}

.section-lg {
    padding: calc(var(--section-padding) * 1.5) 0;
}

.section-xl {
    padding: calc(var(--section-padding) * 2) 0;
}

/* === BACKGROUNDS DE SEÇÃO === */
.section-dark {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.section-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.section-tertiary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.section-light {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-card) 100%);
    color: var(--text-primary);
}

/* === TÍTULOS DE SEÇÃO PADRONIZADOS === */
.section-header {
    text-align: center;
    margin-bottom: var(--space-4xl);
}

.section-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    line-height: 1.1;
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Títulos com gradiente */
.section-title .highlight,
.section-title .text-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === HERO SECTIONS === */
.hero-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    padding: var(--space-5xl) 0;
    position: relative;
}

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

.hero-title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    line-height: 1.1;
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--text-secondary);
    margin-bottom: var(--space-2xl);
    line-height: 1.5;
    opacity: 0.95;
}

.hero-buttons {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    align-items: center;
}

/* ============================================
   SISTEMA DE BOTÕES
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    min-height: 44px; /* Acessibilidade - target mínimo */
}

/* === BOTÕES PRIMÁRIOS === */
.btn-primary,
.btn-primary-hero,
.btn-cta {
    background: var(--primary-color);
    color: var(--text-on-primary);
    border-color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}

.btn-primary:hover,
.btn-primary-hero:hover,
.btn-cta:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
    color: var(--text-on-primary);
}

/* === BOTÕES SECUNDÁRIOS === */
.btn-secondary,
.btn-secondary-hero {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-secondary);
}

.btn-secondary:hover,
.btn-secondary-hero:hover {
    background: var(--primary-color);
    color: var(--text-on-primary);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* === BOTÕES OUTLINE === */
.btn-outline-primary {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: var(--text-on-primary);
    transform: translateY(-1px);
}

/* === TAMANHOS DE BOTÕES === */
.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
    min-height: 36px;
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    min-height: 56px;
}

.btn-xl {
    padding: var(--space-lg) var(--space-2xl);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    min-height: 64px;
}

/* === BOTÕES ESPECIAIS === */
.btn-cta-large {
    background: var(--primary-color);
    color: var(--text-on-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-extrabold);
    padding: var(--space-lg) var(--space-2xl);
    border-radius: var(--border-radius-full);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: var(--shadow-primary);
}

.btn-cta-large:hover {
    background: var(--primary-light);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 40px rgba(254, 106, 0, 0.6);
}

/* === BOTÕES DE PLANOS === */
.btn-plan {
    width: 100%;
    background: var(--primary-color);
    color: var(--text-on-primary);
    font-weight: var(--font-weight-bold);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.btn-plan:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--text-on-primary);
}

/* === ESTADOS DE FOCUS === */
.btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ============================================
   COMPONENTE: NAVEGAÇÃO
   ============================================ */
#mainNav {
    background: var(--bg-overlay);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    min-height: var(--navbar-height);
    display: flex;
    align-items: center;
    transition: all var(--transition-base);
    padding-top: env(safe-area-inset-top, 0px);
}

.navbar-brand img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.navbar-nav .nav-link {
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    padding: var(--space-sm) var(--space-md);
    transition: color var(--transition-base);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-color);
}

.navbar-toggler {
    border: none;
    padding: var(--space-sm);
}

.navbar-toggler:focus {
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--bg-card);
        padding: var(--space-md);
        border-radius: var(--border-radius-md);
        margin-top: var(--space-sm);
        border: 1px solid var(--border-primary);
    }
}

/* ============================================
   COMPONENTE: NOTIFICACOES (AREA DO ALUNO)
   ============================================ */
.custom-notification-dropdown {
    width: min(92vw, 360px) !important;
    max-width: 360px;
}

.notification-scroll-area {
    max-height: min(65vh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.notifications-list .dropdown-item {
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 576px) {
    .custom-notification-dropdown {
        width: min(96vw, 360px) !important;
    }

    .notification-scroll-area {
        max-height: 58vh;
    }
}

/* ============================================
   COMPONENTE: CARDS
   ============================================ */
.card-base {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--card-padding);
    transition: all var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
}

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

/* === FEATURE CARDS === */
.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2xl) var(--space-lg);
    transition: all var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

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

.feature-icon {
    width: 80px;
    height: 80px;
    background: rgba(254, 106, 0, 0.1);
    border: 2px solid rgba(254, 106, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-3xl);
    color: var(--primary-color);
    margin: 0 auto var(--space-lg);
    transition: all var(--transition-base);
}

.feature-card:hover .feature-icon {
    background: var(--primary-color);
    color: var(--text-on-primary);
    transform: scale(1.1);
    border-color: var(--primary-color);
}

.feature-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.feature-text {
    color: var(--text-muted);
    line-height: 1.6;
    flex: 1;
}

.path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.path-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-xl);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-height: 100%;
    transition: all var(--transition-base);
}

.path-card:hover {
    transform: translateY(-6px);
    border-color: rgba(254, 106, 0, 0.45);
    box-shadow: var(--shadow-lg);
}

.path-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.45rem 0.8rem;
    border-radius: var(--border-radius-full);
    background: rgba(254, 106, 0, 0.12);
    border: 1px solid rgba(254, 106, 0, 0.16);
    color: var(--primary-light);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.path-title {
    font-size: var(--font-size-2xl);
    margin-bottom: 0;
}

.path-copy {
    color: var(--text-secondary);
    margin-bottom: 0;
}

.path-points {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.path-points li {
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    line-height: 1.55;
}

.path-points li::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    flex-shrink: 0;
}

.trust-strip {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-full);
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.trust-pill i {
    color: var(--primary-color);
}

.public-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    background: linear-gradient(135deg, rgba(254,106,0,0.08), rgba(0,163,158,0.08));
    border: 1px solid rgba(254,106,0,0.16);
    border-radius: var(--border-radius-xl);
    padding: var(--space-xl);
}

.public-entry-card {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
}

.public-entry-card--dark {
    background: linear-gradient(180deg, #171717 0%, #101010 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.public-entry-card--light {
    background: #fff;
    border-color: rgba(10, 15, 26, 0.08);
    box-shadow: 0 18px 54px rgba(15, 23, 42, 0.10);
}

.public-entry-card__header {
    padding: 1.4rem 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(254, 106, 0, 0.95), rgba(229, 90, 0, 0.95));
    color: #fff;
}

.public-entry-card__header--light {
    border-bottom-color: rgba(10, 15, 26, 0.08);
}

.public-entry-card__header--neutral {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    color: #0f172a;
}

.public-entry-card__body {
    padding: 1.75rem;
}

.public-entry-card__body--lg {
    padding: 2.4rem;
}

.public-entry-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.92;
}

.public-entry-card__title {
    margin: 0.35rem 0 0;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
}

.public-entry-card__subtitle {
    margin: 0.65rem 0 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: inherit;
    opacity: 0.88;
}

.public-entry-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.68rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.85rem;
    font-weight: 700;
}

.public-entry-card__meta--light {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.public-success-card {
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.public-success-card--dark {
    background: linear-gradient(180deg, #171717 0%, #101010 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.public-success-card--light {
    background: linear-gradient(135deg, #06D6A0 0%, #05B58A 100%);
    color: #fff;
}

.public-success-icon {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    background: rgba(255, 255, 255, 0.08);
}

.public-info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 20px;
    padding: 1.25rem 1.3rem;
}

.public-info-card--dark {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.03));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.public-info-card--light {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.public-info-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.public-form-panel {
    border-radius: 18px;
    padding: 1rem 1.1rem;
}

.public-form-panel--dark {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.public-form-control-dark {
    background: #0d0d0d !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 14px !important;
}

.public-form-control-dark:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(254, 106, 0, 0.14) !important;
}

.public-form-control-dark::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.public-form-control-dark option {
    background: #0d0d0d;
    color: #fff;
}

.public-entry-card--dark .form-label,
.public-entry-card--dark .form-check-label,
.public-entry-card--dark .h6,
.public-entry-card--dark h2,
.public-entry-card--dark h3,
.public-entry-card--dark h4,
.public-entry-card--dark h5 {
    color: #fff;
}

.public-entry-card--dark .form-control,
.public-entry-card--dark .form-select {
    background: #0d0d0d;
    border: 1px solid #333;
    color: #fff;
    border-radius: 14px;
}

.public-entry-card--dark .form-control:focus,
.public-entry-card--dark .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(254, 106, 0, 0.14);
}

.public-entry-card--dark .form-control::placeholder,
.public-entry-card--dark textarea::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.public-entry-card--dark .form-select option {
    background: #0d0d0d;
    color: #fff;
}

.public-entry-card--dark .form-text,
.public-entry-card--dark .text-secondary,
.public-entry-card--dark small.text-muted {
    color: rgba(255, 255, 255, 0.58) !important;
}

.public-form-panel .form-check-label {
    color: rgba(255, 255, 255, 0.72);
}

.public-form-panel .form-check-label a {
    color: var(--primary-color);
    font-weight: 700;
}

.public-list-card {
    border-radius: 20px;
    padding: 1.7rem;
}

.public-list-card--light {
    background: #f8f9fa;
    border: 1px solid rgba(10, 15, 26, 0.06);
}

.public-list-card--dark {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.03));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.public-list-card__title {
    font-weight: 800;
    margin-bottom: 1rem;
}

.public-list-card__copy {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.public-list-card--light .public-list-card__copy {
    color: #475569;
}

.public-entry-section-title {
    font-weight: 800;
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
    .public-entry-card__body,
    .public-entry-card__body--lg,
    .public-success-card {
        padding: 1.4rem;
    }

    .public-entry-card__header {
        padding: 1.2rem 1.4rem;
    }
}

/* === PLAN CARDS === */
.plan-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2xl) var(--space-lg);
    transition: all var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: center;
    overflow: visible;
}

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

.plan-card.featured {
    border: 2px solid var(--primary-color);
    transform: scale(1.03);
    box-shadow: var(--shadow-primary);
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--text-on-primary);
    padding: var(--space-xs) var(--space-lg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-extrabold);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--border-radius-full);
    white-space: nowrap;
    z-index: 10;
    box-shadow: var(--shadow-primary);
}

.plan-name {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--primary-color);
    margin-bottom: var(--space-md);
}

.plan-duration {
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.plan-price {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.plan-price-original {
    text-decoration: line-through;
    color: var(--text-disabled);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-sm);
}

.plan-price-promo {
    color: var(--secondary-color) !important;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plan-features li {
    padding: 0.9rem 1rem 0.9rem 3rem;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    line-height: 1.55;
    text-align: left;
}

.plan-features li i {
    color: var(--primary-color);
    font-size: var(--font-size-sm);
}

.plan-features li::before {
    content: "✓";
    position: absolute;
    left: 1rem;
    top: 0.95rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: rgba(254, 106, 0, 0.14);
    color: var(--primary-color);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* === TESTIMONIAL CARDS === */
.depoimento-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2xl);
    transition: all var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

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

.quote-icon {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    font-size: var(--font-size-2xl);
    color: var(--primary-color);
    opacity: 0.3;
}

.depoimento-rating {
    margin-bottom: var(--space-md);
}

.depoimento-text {
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    flex: 1;
}

.depoimento-author {
    margin-top: auto;
}

.depoimento-author-name {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-xs);
}

.depoimento-author-role {
    color: var(--text-disabled);
    font-size: var(--font-size-sm);
}

/* === TRANSFORMATION CARDS === */
.transformacao-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-lg);
    padding: 0;
    transition: all var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.transformacao-image-wrapper {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.transformacao-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

.transformacao-info {
    padding: var(--space-lg);
    background: var(--bg-tertiary);
}

.transformacao-info h3 {
    margin-bottom: var(--space-sm);
}

.transformacao-info p {
    margin-bottom: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.transformacao-info i {
    color: var(--primary-color);
}

/* ============================================
   COMPONENTE: LISTAS E PROBLEMAS
   ============================================ */
.problem-list {
    list-style: none;
    padding: 0;
}

.problem-list li {
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--space-md);
    position: relative;
    padding-left: var(--space-3xl);
    color: var(--text-secondary);
    line-height: 1.6;
}

.problem-list li:before {
    content: "×";
    position: absolute;
    left: var(--space-lg);
    top: var(--space-md);
    color: #ff4444;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

/* === LISTA DE BENEFÍCIOS === */
.benefit-list {
    list-style: none;
    padding: 0;
}

.benefit-list li {
    padding: var(--space-sm) 0;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    line-height: 1.6;
}

.benefit-list li:before {
    content: "✓";
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    margin-top: 2px;
}

.benefit-item.benefit-hidden {
    display: none !important;
}

.btn-expand-benefits {
    background: transparent;
    border: 1px solid rgba(254, 106, 0, 0.3);
    color: var(--primary-color);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    width: 100%;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    transition: all var(--transition-base);
}

.btn-expand-benefits:hover {
    background: rgba(254, 106, 0, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.btn-expand-benefits i {
    transition: transform var(--transition-base);
}

.btn-expand-benefits.expanded i {
    transform: rotate(180deg);
}

.plan-benefits-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.85rem;
    text-align: left;
}

.sobre-story-card {
    background: #ffffff;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.sobre-story-title {
    color: #101010;
    margin-top: 1rem;
}

.sobre-story-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #1f1f1f;
}

/* ============================================
   COMPONENTE: SWIPER CARROSSÉIS
   ============================================ */
.swiper {
    overflow: hidden;
    border-radius: var(--border-radius-lg);
}

.swiper-slide {
    height: auto;
}

.swiper-pagination {
    position: static !important;
    margin-top: var(--space-lg) !important;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}

.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background: rgba(254, 106, 0, 0.3) !important;
    border: 2px solid var(--primary-color) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    margin: 0 !important;
    transition: all var(--transition-base) !important;
    cursor: pointer;
}

.swiper-pagination-bullet-active {
    background: var(--primary-color) !important;
    transform: scale(1.2) !important;
}

.swiper-pagination-bullet:hover {
    background: var(--primary-light) !important;
    transform: scale(1.1) !important;
}

.swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--text-primary) !important;
    outline-offset: 2px !important;
}

.swiper-button-prev,
.swiper-button-next {
    color: var(--primary-color) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    margin-top: -22px !important;
    transition: all var(--transition-base) !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--primary-color) !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 16px !important;
}

/* ============================================
   COMPONENTE: ACORDEÕES E FAQ
   ============================================ */
.accordion-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-md) !important;
    margin-bottom: var(--space-sm);
    overflow: hidden;
}

.accordion-button {
    background: transparent !important;
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    padding: var(--space-lg);
    border: none !important;
    box-shadow: none !important;
    transition: all var(--transition-base);
}

.accordion-button:not(.collapsed) {
    background: rgba(254, 106, 0, 0.1) !important;
    color: var(--primary-color) !important;
}

.accordion-button::after {
    background-image: none !important;
    content: '+';
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    width: auto;
    height: auto;
    filter: none !important;
    transition: all var(--transition-base);
}

.accordion-button:not(.collapsed)::after {
    content: '-';
    color: var(--primary-color);
    transform: rotate(0deg);
}

.accordion-body {
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-muted);
    padding: var(--space-lg);
    line-height: 1.7;
    border-top: 1px solid var(--border-primary);
}

.accordion-body strong {
    color: var(--primary-color);
}

.accordion-body ul {
    margin: var(--space-md) 0;
    padding-left: var(--space-lg);
}

.accordion-body li {
    margin-bottom: var(--space-sm);
}

/* ============================================
   COMPONENTE: FORMULÁRIOS ESPECÍFICOS
   ============================================ */
.login-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--navbar-height) + var(--space-xl)) var(--space-md) var(--space-3xl);
    background: radial-gradient(circle at center, var(--bg-card) 0%, var(--bg-primary) 100%);
}

.login-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--border-radius-xl);
    padding: var(--space-3xl);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
}

.checkout-container {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.checkout-header {
    background: rgba(255, 255, 255, 0.05);
    padding: var(--space-xl);
    border-bottom: 1px solid var(--border-primary);
}

.order-summary {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-md);
    padding: var(--space-xl);
    color: var(--text-primary);
}

.order-summary .text-muted {
    color: var(--text-muted) !important;
}

.payment-method-box {
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--bg-card);
}

.payment-method-box.active {
    border-color: var(--primary-color);
    background: rgba(254, 106, 0, 0.1);
}

/* ============================================
   COMPONENTE: PIX E PAGAMENTOS
   ============================================ */
.pix-page-container {
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-primary);
    padding-top: calc(var(--navbar-height) + var(--space-xl));
}

.pix-card {
    background: var(--bg-tertiary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius-lg);
    max-width: 450px;
    width: 100%;
    padding: var(--space-3xl);
    text-align: center;
    box-shadow: 0 0 40px rgba(254, 106, 0, 0.2);
}

.qr-container {
    background: var(--text-primary);
    padding: var(--space-md);
    border-radius: var(--border-radius-md);
    display: inline-block;
    margin: var(--space-lg) 0;
    position: relative;
}

.qr-loading {
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   COMPONENTE: PÁGINA LEGAL/POLÍTICA
   ============================================ */
.legal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--space-3xl);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.8;
}

.legal-header {
    border-bottom: 2px solid var(--border-secondary);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.legal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-extrabold);
    font-size: var(--font-size-3xl);
}

.legal-section {
    margin-bottom: var(--space-3xl);
}

.legal-section h3 {
    color: var(--primary-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.legal-section h4 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.legal-box p {
    margin-bottom: var(--space-md);
    text-align: justify;
}

.legal-box ul {
    padding-left: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.legal-box li {
    margin-bottom: var(--space-sm);
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-lg);
}

.custom-table th {
    background: var(--bg-secondary);
    color: var(--primary-color);
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    letter-spacing: 1px;
    padding: var(--space-md);
    border: 1px solid var(--border-secondary);
    text-align: left;
}

.custom-table td {
    padding: var(--space-md);
    border: 1px solid var(--border-secondary);
    vertical-align: top;
    color: var(--text-muted);
}

/* ============================================
   COMPONENTE: RODAPE PUBLICO
   ============================================ */
.footer-public {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(254, 106, 0, 0.16), transparent 30%),
        radial-gradient(circle at top right, rgba(0, 163, 158, 0.14), transparent 26%),
        linear-gradient(180deg, #050505 0%, #000000 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer-public .container {
    position: relative;
    z-index: 1;
}

.footer-public::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: 0.28;
    pointer-events: none;
}

.footer-public__container {
    position: relative;
    z-index: 1;
}

.footer-public__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 34px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(254, 106, 0, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24);
}

.footer-public__hero-copy {
    max-width: 620px;
}

.footer-public__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
}

.footer-public__hero-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(1.75rem, 2vw, 2.45rem);
    line-height: 1.08;
}

.footer-public__hero-text {
    max-width: 48ch;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.7;
}

.footer-public__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.footer-public__cta {
    min-width: 168px;
    border-radius: 999px;
    padding: 0.9rem 1.4rem;
    font-weight: 700;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.footer-public__cta--ghost {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.02);
    color: #fff;
}

.footer-public__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.footer-public__grid {
    align-items: stretch;
}

.footer-public__brand-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
    min-height: 100%;
}

.footer-public .footer-logo,
.footer-public .footer-brand img,
.footer-public .footer-brand svg {
    max-width: 124px;
    height: auto;
}

.footer-public .footer-text,
.footer-public__brand-copy {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 0.97rem;
    line-height: 1.78;
    max-width: 34ch;
}

.footer-public__credentials {
    display: grid;
    gap: 10px;
    margin-top: 6px;
}

.footer-public__credentials p {
    margin: 0 !important;
}

.footer-public__socials {
    margin-top: 10px;
    gap: 10px !important;
}

.footer-public__socials a {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff !important;
    font-size: 1.1rem !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer-public__socials a:hover {
    transform: translateY(-2px);
    background: rgba(254, 106, 0, 0.12);
    border-color: rgba(254, 106, 0, 0.26);
    color: var(--primary-color) !important;
}

.footer-public__grid > [class*="col-"]:not(.footer-public__brand-col) {
    display: flex;
}

.footer-public__grid > [class*="col-"] > .footer-public__links {
    width: 100%;
}

.footer-public__grid > .col-lg-2,
.footer-public__grid > .col-lg-3 {
    display: flex;
}

.footer-public__grid > .col-lg-2 > *,
.footer-public__grid > .col-lg-3 > * {
    width: 100%;
}

.footer-public__grid .col-lg-2,
.footer-public__grid .col-lg-3 {
    min-height: 100%;
}

.footer-public__grid .col-lg-2,
.footer-public__grid .col-lg-3,
.footer-public__grid .col-md-4,
.footer-public__grid .col-md-6 {
    position: relative;
}

.footer-public__grid .col-lg-2,
.footer-public__grid .col-lg-3 {
    align-self: stretch;
}

.footer-public .col-lg-2,
.footer-public .col-lg-3 {
    display: flex;
}

.footer-public .col-lg-2 > *,
.footer-public .col-lg-3 > * {
    width: 100%;
}

.footer-public .col-lg-2 > h5,
.footer-public .col-lg-3 > h5 {
    width: 100%;
}

.footer-public .col-lg-2,
.footer-public .col-lg-3,
.footer-public .col-md-4 {
    min-height: 100%;
}

.footer-public .col-lg-2,
.footer-public .col-lg-3 {
    flex-direction: column;
}

.footer-public__panel {
    position: relative;
}

.footer-public .col-lg-2,
.footer-public .col-lg-3,
.footer-public .col-md-4 {
    padding-top: 0;
}

.footer-public .col-lg-2::before,
.footer-public .col-lg-3::before,
.footer-public .col-md-4::before {
    content: "";
    position: absolute;
    inset: 0.75rem 0.75rem 0 0.75rem;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.018) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.footer-public .col-lg-2 > h5,
.footer-public .col-lg-3 > h5,
.footer-public .col-lg-2 > ul,
.footer-public .col-lg-3 > ul {
    position: relative;
    z-index: 1;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}

.footer-public .col-lg-2 > h5,
.footer-public .col-lg-3 > h5 {
    margin-top: 1.55rem;
    margin-bottom: 1rem;
    color: #fff !important;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
}

.footer-public__heading {
    position: relative;
    padding-bottom: 0.7rem;
}

.footer-public__heading::after {
    content: "";
    position: absolute;
    left: 1.6rem;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color) 0%, rgba(0, 163, 158, 0.92) 100%);
}

.footer-public__links {
    margin: 0;
    padding-bottom: 1.4rem;
}

.footer-public__links li {
    margin-bottom: 0.7rem !important;
}

.footer-public__links a,
.footer-public__contact li,
.footer-public__contact a {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 0.93rem;
    line-height: 1.55;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-public__links a:hover,
.footer-public__contact a:hover {
    color: #fff !important;
    transform: translateX(2px);
}

.footer-public__contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-public__contact i {
    margin-top: 0.15rem;
    color: var(--primary-color) !important;
}

.footer-public__separator {
    border-color: rgba(255, 255, 255, 0.08) !important;
    margin-top: 2rem !important;
    margin-bottom: 1.4rem !important;
}

.footer-public__bottom {
    row-gap: 12px;
}

.footer-public__bottom p {
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}

@media (max-width: 991.98px) {
    .footer-public__hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px;
    }

    .footer-public__hero-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .footer-public__brand-col {
        padding: 24px;
        border-radius: 24px;
    }

    .footer-public .col-lg-2::before,
    .footer-public .col-lg-3::before,
    .footer-public .col-md-4::before {
        inset: 0 0 0 0;
    }

    .footer-public .col-lg-2 > h5,
    .footer-public .col-lg-3 > h5,
    .footer-public .col-lg-2 > ul,
    .footer-public .col-lg-3 > ul {
        padding-left: 1.3rem;
        padding-right: 1.3rem;
    }

    .footer-public .col-lg-2 > h5,
    .footer-public .col-lg-3 > h5 {
        margin-top: 1.35rem;
    }
}

@media (max-width: 767.98px) {
    .footer-public__container {
        padding-top: 2.4rem !important;
        padding-bottom: 2.2rem !important;
    }

    .footer-public__hero {
        padding: 22px 20px;
        border-radius: 24px;
    }

    .footer-public__hero-title {
        font-size: 1.7rem;
    }

    .footer-public__hero-text {
        font-size: 0.95rem;
    }

    .footer-public__cta {
        width: 100%;
        min-width: 0;
    }

    .footer-public__brand-col {
        padding: 22px 20px;
    }

    .footer-public .col-lg-2 > h5,
    .footer-public .col-lg-3 > h5,
    .footer-public .col-lg-2 > ul,
    .footer-public .col-lg-3 > ul {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .footer-public__socials a {
        width: 42px;
        height: 42px;
    }
}

/* ============================================
   COMPONENTE: BOTÕES FLUTUANTES
   ============================================ */
.whatsapp-float-stack {
    position: fixed;
    right: var(--space-xl, 20px);
    bottom: var(--space-xl, 20px);
    z-index: var(--z-toast, 9999);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-md, 12px);
}

.whatsapp-mini-panel {
    width: min(340px, calc(100vw - 32px));
    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(circle at top right, rgba(37, 211, 102, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(15, 18, 24, 0.98) 0%, rgba(8, 10, 14, 0.98) 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
    color: #fff;
    transform: translateY(12px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.whatsapp-mini-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.whatsapp-mini-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.whatsapp-mini-panel__header strong {
    display: block;
    font-size: 1rem;
    line-height: 1.3;
}

.whatsapp-mini-panel__eyebrow {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.whatsapp-mini-panel__close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.whatsapp-mini-panel__close:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.05);
}

.whatsapp-mini-panel__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.whatsapp-mini-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.whatsapp-mini-option:hover {
    color: #fff;
    transform: translateY(-2px);
    border-color: rgba(37, 211, 102, 0.35);
    background: rgba(37, 211, 102, 0.08);
}

.whatsapp-mini-option__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(37, 211, 102, 0.12);
    color: #25D366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.whatsapp-mini-option__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.whatsapp-mini-option__content strong {
    font-size: 0.95rem;
    line-height: 1.3;
}

.whatsapp-mini-option__content small {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.79rem;
    line-height: 1.35;
}

.whatsapp-float {
    position: relative;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: var(--text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
    transition: all var(--transition-base);
    text-decoration: none;
    border: 0;
    cursor: pointer;
}

.whatsapp-float:hover {
    background: #20b858;
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.7);
    color: var(--text-primary);
}

.whatsapp-float[aria-expanded="true"] {
    background: #20b858;
    transform: scale(1.06);
    box-shadow: 0 8px 32px rgba(37, 211, 102, 0.45);
}

.back-to-top {
    position: fixed;
    bottom: calc(var(--space-xl, 20px) + 80px);
    right: var(--space-xl, 20px);
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: var(--text-on-primary);
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    box-shadow: var(--shadow-primary);
    z-index: calc(var(--z-toast, 9999) - 1);
    transition: all var(--transition-base);
    cursor: pointer;
}

.back-to-top:hover {
    background: var(--primary-light);
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(254, 106, 0, 0.6);
}

.back-to-top.show {
    display: flex;
}

@media (max-width: 767.98px) {
    .whatsapp-float-stack {
        right: 16px;
        bottom: 16px;
    }

    .whatsapp-mini-panel {
        width: min(320px, calc(100vw - 24px));
        padding: 12px;
        border-radius: 20px;
    }

    .whatsapp-mini-option {
        padding: 12px 13px;
        border-radius: 16px;
    }

    .whatsapp-mini-option__icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
}

/* ============================================
   COMPONENTE: COOKIE BANNER
   ============================================ */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-overlay);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: var(--space-lg) 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    z-index: var(--z-toast);
    display: none;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s ease;
    border-top: 2px solid var(--primary-color);
}

.cookie-banner.show {
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner p {
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.cookie-banner .btn-cta {
    background: var(--primary-color);
    color: var(--text-on-primary);
    font-weight: var(--font-weight-bold);
}

/* ============================================
   COMPONENTE: DASHBOARD E ÁREA DO ALUNO
   ============================================ */
.dash-hero {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
    padding: calc(var(--navbar-height) + var(--space-4xl)) 0 var(--space-3xl);
    border-bottom: 1px solid var(--border-secondary);
}

.dash-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--border-radius-lg);
    height: 100%;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--space-xl);
}

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

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--border-radius-md);
    padding: var(--space-lg);
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-base);
    height: 100%;
    text-align: center;
    position: relative;
}

.quick-action-btn:hover {
    background: var(--bg-card);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.quick-action-icon {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-sm);
    color: var(--primary-color);
}

.progress-track {
    height: 6px;
    background: var(--border-secondary);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin-top: var(--space-sm);
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 1s ease;
    border-radius: var(--border-radius-sm);
}

.dash-recent-link {
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all var(--transition-base);
}

.dash-recent-link:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.dash-section-dark {
    background: var(--bg-secondary);
    min-height: 100vh;
}

.dash-title-border {
    border-color: var(--primary-color) !important;
}

.dash-header {
    background: linear-gradient(to bottom, var(--bg-primary) 0%, var(--bg-tertiary) 100%);
    padding: calc(var(--navbar-height) + var(--space-4xl)) 0 var(--space-2xl);
    border-bottom: 1px solid var(--border-secondary);
}

.course-card {
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    height: 100%;
}

.course-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(254, 106, 0, 0.2);
}

.course-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--bg-tertiary);
}

.course-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

.course-info {
    padding: var(--space-md);
}

.course-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.course-meta {
    font-size: var(--font-size-sm);
    color: var(--text-disabled);
}

/* ============================================
   COMPONENTE: DESAFIOS
   ============================================ */
.challenge-hero-banner {
    height: 280px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 3px solid var(--primary-color);
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: var(--space-2xl);
    width: 100%;
    min-height: 280px;
}

.challenge-hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
}

.challenge-floating-badge {
    width: 80px !important;
    height: 80px !important;
    background: var(--bg-card) !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--font-size-3xl) !important;
    position: relative !important;
    z-index: 10 !important;
    color: var(--primary-color);
}

.challenge-details-content {
    background: var(--bg-primary) !important;
    padding: var(--space-2xl) 0 !important;
    text-align: center !important;
    width: 100%;
}

.challenge-main-title {
    font-size: var(--font-size-3xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-sm) !important;
    display: block !important;
}

.challenge-date-range {
    color: var(--text-disabled) !important;
    font-size: var(--font-size-base) !important;
    display: block !important;
    margin-bottom: var(--space-lg);
}

.challenge-date-range i {
    margin-right: var(--space-sm);
    color: var(--primary-color) !important;
}

.btn-challenge-action {
    display: inline-block !important;
    padding: var(--space-md) var(--space-2xl) !important;
    border-radius: var(--border-radius-full) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-decoration: none !important;
    transition: all var(--transition-base) !important;
    border: none !important;
    cursor: pointer !important;
    margin: var(--space-sm) !important;
}

.btn-join-challenge {
    background: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

.btn-join-challenge:hover {
    background: var(--primary-light) !important;
    color: var(--text-on-primary) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

.btn-view-progress {
    background: var(--secondary-color) !important;
    color: var(--text-on-primary) !important;
}

.btn-view-progress:hover {
    background: var(--secondary-light) !important;
    color: var(--text-on-primary) !important;
    transform: translateY(-2px);
}

.challenge-stats-grid {
    display: flex !important;
    justify-content: center !important;
    gap: var(--space-3xl) !important;
    margin: var(--space-xl) auto !important;
    padding: var(--space-xl) !important;
    background: var(--bg-tertiary) !important;
    border-radius: var(--border-radius-md) !important;
    max-width: 400px !important;
}

.challenge-stats-grid .stat-val {
    display: block !important;
    font-size: var(--font-size-2xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--primary-color) !important;
}

.challenge-stats-grid .stat-label {
    display: block !important;
    font-size: var(--font-size-xs) !important;
    color: var(--text-disabled) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.challenge-description {
    max-width: 600px !important;
    margin: var(--space-xl) auto 0 !important;
    text-align: left !important;
    color: var(--text-muted) !important;
    line-height: 1.7 !important;
    padding: var(--space-xl) !important;
    background: var(--bg-tertiary) !important;
    border-radius: var(--border-radius-md) !important;
    border: 1px solid var(--border-secondary) !important;
    display: block !important;
}

/* ============================================
   COMPONENTE: STEPS E PROCESSOS
   ============================================ */
.step-card {
    text-align: center;
    padding: var(--space-xl);
}

.step-number {
    font-size: var(--font-size-5xl);
    color: var(--primary-color);
    margin-bottom: var(--space-lg);
    display: inline-block;
    transition: transform var(--transition-base);
    font-weight: var(--font-weight-extrabold);
}

.step-card:hover .step-number {
    transform: scale(1.1) rotate(5deg);
    color: var(--primary-light);
}

.step-title {
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.step-text {
    color: var(--text-muted);
    line-height: 1.6;
}

/* ============================================
   COMPONENTE: BOTÕES ESPECIAIS
   ============================================ */
.play-btn {
    display: inline-block;
    background: var(--primary-color);
    color: var(--text-on-primary);
    padding: var(--space-sm) var(--space-lg);
    border: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    border-radius: var(--border-radius-md);
}

.play-btn:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
    color: var(--text-on-primary);
}

/* === MOBILE TABLE STYLES === */
@media (max-width: 768px) {
    .custom-table thead { 
        display: none; 
    }
    .custom-table tr {
        margin-bottom: 20px;
        background: #252525;
        border: 1px solid #444;
        border-radius: 12px;
        padding: 15px;
        display: block;
    }
    .custom-table td {
        border: none;
        padding: 10px 0;
        border-bottom: 1px solid #333;
        position: relative;
        display: block;
    }
    .custom-table td:last-child { 
        border-bottom: none; 
    }
    .mobile-label { 
        display: block; 
        font-weight: bold; 
        color: var(--primary-color); 
        margin-bottom: 5px; 
        font-size: 0.8rem; 
        text-transform: uppercase; 
    }
}

@media (min-width: 769px) { 
    .mobile-label { 
        display: none; 
    } 
}

.alert-custom {
    background: rgba(254, 106, 0, 0.08);
    border-left: 4px solid var(--primary-color);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 20px 0;
}
/* ============================================
   BUTTONS STYLES
   ============================================ */

/* Hero Section Buttons */
.btn-primary-hero {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: #000 !important;
    padding: 14px 32px;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-primary-hero:hover {
    background: transparent;
    color: var(--primary-color) !important;
    box-shadow: 0 0 20px rgba(254, 106, 0, 0.4);
    transform: translateY(-2px);
}

.btn-secondary-hero {
    background: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color) !important;
    padding: 14px 32px;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-secondary-hero:hover {
    background: var(--secondary-color);
    color: #000 !important;
    transform: translateY(-2px);
}

/* Hero Buttons Container */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

@media (max-width: 576px) {
    .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }
}

/* CTA Section Buttons (Sobre, etc) */
.cta-section .btn {
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .cta-section .btn {
        margin-bottom: 0;
    }
}

/* Secondary Outline Button */
.btn-secondary-outline {
    background: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color) !important;
}

.btn-secondary-outline:hover {
    background: var(--secondary-color);
    color: #000 !important;
}

/* Plan Card Buttons */
.btn-plan {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: #000 !important;
    padding: 14px 32px;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    display: block;
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-plan:hover {
    background: transparent;
    color: var(--primary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(254, 106, 0, 0.3);
}

/* CTA Large Button */
.btn-cta-large {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: #000 !important;
    padding: 18px 48px;
    font-weight: 800;
    font-size: 1.2rem;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-cta-large:hover {
    background: transparent;
    color: var(--primary-color) !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(254, 106, 0, 0.4);
}

/* Bootstrap Override */
.btn-primary {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #000 !important;
}

.btn-primary:hover {
    background: transparent !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.btn-outline-primary {
    background: transparent !important;
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #000 !important;
}


/* ============================================
   FEATURE ICONS (Ícones das funcionalidades)
   ============================================ */

.feature-icon {
    /* Fluido: 64px (mobile) → 86px (768px) → 100px (1200px+) */
    width: clamp(64px, 8vw, 100px);
    height: clamp(64px, 8vw, 100px);
    background: linear-gradient(135deg, var(--primary-color), #FF8C00);
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    font-size: clamp(1.75rem, 4vw, 3rem);
    color: #000;
    transition: all 0.3s ease;
}

.feature-icon:hover {
    transform: translateY(-5px) rotate(5deg);
    box-shadow: 0 10px 30px rgba(254, 106, 0, 0.3);
}

.feature-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.feature-text {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 1rem;
}


/* ============================================
   CTA SECTION STYLES
   ============================================ */

.cta-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
    padding: 80px 0;
    position: relative;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(254, 106, 0, 0.1) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.cta-section > * {
    position: relative;
    z-index: 1;
}

.cta-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.5rem;
}

.cta-text {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Variante de botão secundário */
.btn-secondary-outline {
    background: transparent !important;
    border: 2px solid #fff !important;
    color: #fff !important;
}

.btn-secondary-outline:hover {
    background: #fff !important;
    color: #000 !important;
}


/* ============================================
   FEATURE CARDS STYLES
   ============================================ */

.feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.4s ease;
    height: 100%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary-color);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(254, 106, 0, 0.2);
}

.feature-title {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.feature-text {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 0;
}

/* Animações de reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    animation: revealUp 0.8s ease forwards;
}

.reveal-delay-1 {
    animation-delay: 0.2s;
}

.reveal-delay-2 {
    animation-delay: 0.4s;
}

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


/* ============================================
   SECTION TITLES & SPACING
   ============================================ */

.section-title {
    /* Fluido: 1.5rem (320px) → 2rem (768px) → 2.5rem (1200px+) */
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.5rem;
    margin-top: 0;
    line-height: 1.2;
}

.section-title .highlight,
.section-title span:not(.text-white):not(.badge) {
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color), #FF8C00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Títulos em seções claras */
.section-light .section-title {
    color: #1a1a1a;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
    line-height: 1.6;
}

/* Espaçamento entre seções */
section {
    padding: 80px 0;
}

section + section {
    margin-top: 0;
}

/* Ajuste de espaçamento dos títulos nos cards */
.feature-card .feature-title {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* Títulos gerais */
h1 {
    margin-bottom: 1.5rem;
    margin-top: 0;
}

h2 {
    margin-bottom: 1.5rem;
    margin-top: 0;
}

h3 {
    margin-bottom: 1.2rem;
    margin-top: 0;
}

/* Espaçamento do ícone para o título */
.feature-icon + h3,
.feature-icon + .feature-title {
    margin-top: 1.5rem;
}


/* ============================================
   BENEFITS EXPAND/COLLAPSE
   ============================================ */

.benefit-item {
    transition: all 0.3s ease;
}

.benefit-hidden {
    display: none !important;
}

.btn-expand-benefits {
    background: transparent;
    border: 1px solid rgba(254, 106, 0, 0.3);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-expand-benefits:hover {
    background: rgba(254, 106, 0, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.btn-expand-benefits i {
    transition: transform 0.3s ease;
}

.btn-expand-benefits.expanded i {
    transform: rotate(180deg);
}

.plan-benefits-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.85rem;
    text-align: left;
}

.sobre-story-card {
    background: #ffffff;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.sobre-story-title {
    color: #101010;
    margin-top: 1rem;
}

.sobre-story-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #1f1f1f;
}


/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */

/* Tablets e abaixo */
@media (max-width: 991.98px) {
    /* section-title já fluido via clamp() */
    
    .section-subtitle {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    
    section {
        padding: 60px 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* section-title, feature-title, cta-title — já fluidos via clamp() */
    
    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    section {
        padding: 40px 0;
    }
    
    /* Cards de features */
    .feature-card {
        padding: 2rem 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    /* feature-icon já fluido via clamp() */
    
    /* Cards de planos */
    .plan-card {
        padding: 2rem 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .plan-name {
        font-size: 1.5rem;
    }
    
    .plan-price {
        font-size: clamp(1.4rem, 6vw, 1.75rem) !important;
    }
    
    .plan-features {
        font-size: 0.95rem;
    }
    
    /* Botões */
    .btn-cta-large {
        padding: 1rem 2rem;
    }
    
    .btn-plan {
        padding: 0.9rem 1.5rem;
    }
    
    .btn-expand-benefits {
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }
}

/* Mobile pequeno */
@media (max-width: 576px) {
    /* section-title, feature-title, cta-title — já fluidos via clamp() */
    
    .section-subtitle {
        font-size: 0.95rem;
    }
    
    section {
        padding: 30px 0;
    }
    
    .feature-card {
        padding: 1.5rem 1rem;
    }
    
    /* feature-icon já fluido via clamp() */
    
    .plan-card {
        padding: 1.5rem 1rem;
    }
    
    .plan-price {
        font-size: clamp(1.3rem, 7vw, 1.5rem) !important;
    }
    
    .btn-cta-large {
        padding: 0.9rem 1.5rem;
        width: 100%;
    }
    
    .btn-plan {
        padding: 0.8rem 1.2rem;
        width: 100%;
    }
    
    .cta-text {
        font-size: 0.95rem;
    }
    
    /* Espaçamento do ícone */
    .feature-icon + h3,
    .feature-icon + .feature-title {
        margin-top: 1rem;
    }
}


/* ============================================
   FAQ ACCORDION
   ============================================ */

.accordion-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px !important;
    overflow: hidden;
}

.accordion-button {
    background: transparent !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1.25rem 1.5rem;
    border: none !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background: rgba(254, 106, 0, 0.1) !important;
    color: var(--primary-color) !important;
}

.accordion-button::after {
    background-image: none !important;
    filter: none !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: none !important;
    filter: none !important;
}

.accordion-body {
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-muted);
    padding: 1.5rem;
    line-height: 1.7;
}

.accordion-body strong {
    color: var(--primary-color);
}

.accordion-body ul {
    margin: 0;
    padding-left: 1.5rem;
}

.accordion-body li {
    margin-bottom: 0.5rem;
}


/* ============================================
   FLOATING BUTTONS
   ============================================ */

.whatsapp-float {
    position: fixed;
    bottom: var(--space-xl, 30px);
    right: var(--space-xl, 30px);
    width: 60px;
    height: 60px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
    z-index: var(--z-toast, 9999);
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    background: #20b858;
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.7);
    color: #fff;
}

.back-to-top {
    position: fixed;
    bottom: calc(var(--space-xl, 30px) + 80px);
    right: var(--space-xl, 30px);
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 20px rgba(254, 106, 0, 0.4);
    z-index: calc(var(--z-toast, 9999) - 1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.back-to-top:hover {
    background: #ff8c00;
    transform: translateY(-5px);
    box-shadow: 0 6px 30px rgba(254, 106, 0, 0.6);
}

.back-to-top.show {
    display: flex;
}

/* Mobile */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        font-size: 1.75rem;
        bottom: 20px;
        right: 20px;
    }
    
    .back-to-top {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
        bottom: 95px;
        right: 20px;
    }
}


/* ============================================
   COOKIE BANNER
   ============================================ */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1.5rem 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: none;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s ease;
    border-top: 2px solid var(--primary-color);
}

.cookie-banner.show {
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner p {
    line-height: 1.6;
}

.cookie-banner .btn-cta {
    background: var(--primary-color);
    color: #000;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    padding: 0.6rem 2rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cookie-banner .btn-cta:hover {
    background: #ff8c00;
    transform: scale(1.05);
}

/* Mobile */
@media (max-width: 768px) {
    .cookie-banner {
        padding: 1rem 0;
    }
    
    .cookie-banner p {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .cookie-banner .btn-cta {
        padding: 0.5rem 1.5rem;
        font-size: 0.9rem;
        width: 100%;
    }
}


/* ==========================================
   ESTILOS DO PAINEL ADMINISTRATIVO (CRM)
   ========================================== */
        :root {
            --primary-color: #FE6A00;
            --secondary-color: #00A39E;
        }
        
        /* Layout Principal */
        .admin-wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        .admin-content {
            display: flex;
            flex: 1;
        }
        
        /* Sidebar */
        .sidebar {
            background: #2c3e50;
            width: 250px;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            transition: left 0.3s ease;
            z-index: 1050;
            overflow-y: auto;
        }
        
        @media (min-width: 992px) {
            .sidebar {
                left: 0 !important;
            }
        }
        
        .main-content {
            margin-left: 250px;
        }
        
        .sidebar .nav-link {
            color: rgba(255,255,255,0.8);
            padding: 0.75rem 1rem;
            margin: 0.25rem 0;
        }
        
        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            background: rgba(255,255,255,0.1);
            color: white;
        }
        
        /* Menu Mobile */
        .mobile-menu-toggle {
            display: none;
            background: var(--primary-color);
            border: none;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .mobile-menu-toggle:hover {
            background: #E55F00;
        }
        
        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 1040;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .sidebar-overlay.show {
            display: block;
            opacity: 1;
        }
        
        /* Navbar */
        .admin-navbar {
            position: sticky;
            top: 0;
            z-index: 1030;
        }
        
        /* Botões */
        .btn-primary {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background: #E55F00;
            border-color: #E55F00;
        }
        
        /* Container Principal */
        .main-content {
            padding: 1.5rem 2rem;
            width: 100%;
            max-width: 100%;
        }
        
        .container-fluid {
            max-width: 100%;
            padding-left: 2rem;
            padding-right: 2rem;
        }
        
        .container {
            max-width: 100%;
            padding-left: 2rem;
            padding-right: 2rem;
        }
        
        /* Páginas de formulário */
        .container-fluid.py-4,
        .container.py-4 {
            max-width: 100%;
        }
        
        /* Cards e Estatísticas */
        .stat-card {
            transition: transform 0.2s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        /* Formulários em tela grande */
        .card {
            max-width: 100%;
            width: 100%;
        }
        
        form .card {
            max-width: 100%;
            width: 100%;
        }
        
        /* Inputs e selects em largura total */
        .form-control,
        .form-select {
            max-width: 100%;
        }
        
        /* Rows ocupam toda largura */
        .row {
            width: 100%;
        }
        
        /* Tabelas Responsivas */
        .table {
            font-size: 0.95rem;
        }
        
        .table th {
            white-space: nowrap;
        }
        
        /* Responsivo Desktop Grande */
        @media (min-width: 1200px) {
            .container-fluid,
            .container {
                padding-left: 2.5rem;
                padding-right: 2.5rem;
            }
            
            .main-content {
                padding: 2rem 2.5rem;
            }
            
            .card {
                width: 100%;
            }
        }
        
        /* Responsivo Tablet */
        @media (max-width: 1199px) {
            .sidebar {
                width: 220px;
            }
            
            .main-content {
                margin-left: 220px;
            }
        }
        
        /* Responsivo Mobile */
        @media (max-width: 991px) {
            .sidebar {
                left: -100% !important;
                box-shadow: 2px 0 10px rgba(0,0,0,0.3);
                width: 250px;
                position: fixed !important;
                transform: translateX(0);
                transition: left 0.3s ease;
            }
            
            .sidebar.show {
                left: 0 !important;
            }
            
            .mobile-menu-toggle {
                display: block !important;
            }
            
            .main-content {
                margin-left: 0 !important;
                padding: 0.5rem !important;
                width: 100% !important;
            }
            
            .navbar-text {
                font-size: 0.85rem;
            }
            
            /* Container fluido em mobile */
            .container-fluid, .container {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
                max-width: 100%;
            }
            
            /* Ajustes de tabelas */
            .table-responsive {
                font-size: 0.85rem;
                overflow-x: auto;
                border: 0;
            }
            
            .table {
                font-size: 0.8rem;
            }
            
            .table thead {
                display: none;
            }
            
            .table tbody tr {
                display: block;
                margin-bottom: 1rem;
                border: 1px solid #dee2e6;
                border-radius: 8px;
                padding: 0.75rem;
                background: #fff;
            }
            
            .table tbody td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.5rem 0;
                border: none;
                border-bottom: 1px solid #f0f0f0;
            }
            
            .table tbody td:last-child {
                border-bottom: none;
            }
            
            .table tbody td::before {
                content: attr(data-label);
                font-weight: bold;
                margin-right: 1rem;
                color: #999;
                font-size: 0.75rem;
                text-transform: uppercase;
            }
            
            /* Cards de pop-ups */
            .card-img-top {
                height: 150px !important;
            }
            
            /* Botões em mobile */
            .btn-group {
                display: flex;
                flex-direction: column;
                gap: 0.25rem;
                width: 100%;
            }
            
            .btn-group .btn {
                width: 100%;
                font-size: 0.75rem;
                padding: 0.375rem 0.5rem;
            }
            
            .btn-group .btn i {
                margin-right: 0.25rem;
            }
            
            /* Formulários */
            .form-label {
                font-size: 0.9rem;
            }
            
            .form-control, .form-select {
                font-size: 0.9rem;
            }
            
            /* Cards estatísticas */
            .col-xl-3, .col-lg-4, .col-md-6 {
                margin-bottom: 1rem;
            }
            
            /* Títulos */
            h1, h2, h3, h4, h5 {
                font-size: calc(1rem + 0.5vw);
            }
            
            /* Badges */
            .badge {
                font-size: 0.7rem;
            }
        }
        
        /* Responsivo Extra Small */
        @media (max-width: 576px) {
            .sidebar {
                width: 85%;
                max-width: 300px;
            }
            
            .btn-sm {
                font-size: 0.75rem;
                padding: 0.35rem 0.6rem;
            }
            
            .card {
                margin-bottom: 1rem;
            }
            
            .card-body {
                padding: 0.75rem;
            }
            
            .table {
                font-size: 0.8rem;
            }
            
            .table th,
            .table td {
                padding: 0.5rem 0.25rem;
            }
            
            h1, .h1 {
                font-size: 1.5rem;
            }
            
            h2, .h2 {
                font-size: 1.3rem;
            }
        }

/* ============================================
   CUSTOM MODAL OVERLAY - GLOBAL
   ============================================ */
.custom-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.custom-modal-overlay.active {
    display: flex;
}

.custom-modal {
    background-color: #1a1a1a;
    color: #fff;
    border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
}

.custom-modal .modal-option:last-child {
    border-bottom: none;
}

/* ============================================
   GMNUTRI - MEAL CARDS E FOOD ITEMS
   ============================================ */
.meal-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
}

.meal-header {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #222;
    border-bottom: 1px solid #333;
}

.meal-icon {
    width: 40px;
    height: 40px;
    background: rgba(254, 106, 0, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.meal-title {
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}

.meal-body {
    padding: 16px;
}

.food-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 14px;
    background: #222;
    border: 1px solid #333;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.food-item:last-child {
    margin-bottom: 0;
}

.food-item:hover {
    border-color: #444;
}

.food-item.checked {
    background: rgba(0, 255, 163, 0.08);
    border-color: rgba(0, 255, 163, 0.3);
}

.food-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: #fff;
}

.food-qtd-text {
    font-size: 0.8rem;
    color: #888;
}

/* Botões de ação circulares */
.btn-action-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.btn-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #444;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-circle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-circle.btn-register {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.btn-circle.btn-register.active {
    background: var(--secondary-color);
    color: #000;
}

.btn-circle.btn-swap {
    border-color: #666;
    color: #888;
}

.btn-circle.btn-swap:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-circle.btn-remove-plano:hover {
    border-color: #ff4757;
}

.btn-circle.btn-delete {
    border-color: #ff9f43;
    color: #ff9f43;
}

.btn-circle.btn-delete:hover {
    background: rgba(255, 159, 67, 0.15);
}

/* FAB - Floating Action Button */
.fab-add {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    text-decoration: none;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(254, 106, 0, 0.4);
    transition: transform 0.2s;
}

.fab-add:hover {
    transform: scale(1.1);
    color: #000;
}

/* GMnutri Body Specific */
.gmnutri-body .nutri-header {
    padding-top: 20px;
}

/* ============================================
   PROGRAMAS E CURSOS
   ============================================ */
.dash-header {
    background: linear-gradient(to bottom, #000 0%, #111 100%);
    padding: 140px 0 40px;
    border-bottom: 1px solid #222;
}

.section-dark {
    background: #000;
    min-height: 50vh;
}

.course-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

.course-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(254, 106, 0, 0.2);
}

.course-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
}

.course-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.course-info {
    padding: 16px;
}

.course-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.course-meta {
    font-size: 0.85rem;
    color: #888;
}

/* ============================================
   DESAFIOS - CORRIGIDOS PARA DESKTOP
   ============================================ */
.challenge-hero-banner {
    height: 280px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 3px solid var(--primary-color);
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 40px;
    width: 100%;
    min-height: 280px;
}

.challenge-hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
}

.challenge-floating-badge {
    width: 80px !important;
    height: 80px !important;
    background: #1a1a1a !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    position: relative !important;
    z-index: 10 !important;
}

.challenge-details-content {
    background: #000 !important;
    padding: 40px 0 !important;
    text-align: center !important;
    width: 100%;
}

.challenge-main-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.challenge-date-range {
    color: #888 !important;
    font-size: 0.95rem !important;
    display: block !important;
}

.challenge-date-range i {
    margin-right: 8px;
    color: var(--primary-color) !important;
}

.btn-challenge-action {
    display: inline-block !important;
    padding: 14px 32px !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    margin: 10px 5px !important;
}

.btn-join-challenge {
    background: var(--primary-color) !important;
    color: #000 !important;
}

.btn-join-challenge:hover {
    background: #ff8533 !important;
    color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(254, 106, 0, 0.4);
}

.btn-view-progress {
    background: var(--secondary-color) !important;
    color: #000 !important;
}

.btn-view-progress:hover {
    background: #00b8b0 !important;
    color: #000 !important;
}

.challenge-stats-grid {
    display: flex !important;
    justify-content: center !important;
    gap: 60px !important;
    margin: 30px auto !important;
    padding: 20px !important;
    background: #111 !important;
    border-radius: 12px !important;
    max-width: 400px !important;
}

.challenge-stats-grid .stat-val {
    display: block !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
}

.challenge-stats-grid .stat-label {
    display: block !important;
    font-size: 0.8rem !important;
    color: #666 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.challenge-description {
    max-width: 600px !important;
    margin: 30px auto 0 !important;
    text-align: left !important;
    color: #ccc !important;
    line-height: 1.7 !important;
    padding: 20px !important;
    background: #111 !important;
    border-radius: 12px !important;
    border: 1px solid #222 !important;
    display: block !important;
}

/* Correção específica para desktop */
@media (min-width: 768px) {
    .challenge-hero-banner {
        min-height: 320px;
    }
    
    .challenge-floating-badge {
        width: 100px !important;
        height: 100px !important;
        font-size: 2.5rem !important;
    }
    
    .challenge-main-title {
        font-size: 2.5rem !important;
    }
    
    .challenge-stats-grid {
        gap: 80px !important;
    }
}

/* ============================================
   BOTÕES COMUNS - PLAY, AÇÃO
   ============================================ */
.play-btn {
    display: inline-block;
    background: var(--primary-color);
    color: #000;
    padding: 10px 24px;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.play-btn:hover {
    background: #ff8533;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(254, 106, 0, 0.3);
}

/* Links sem decoração na área do aluno */
.section-dark a {
    text-decoration: none;
}

/* ============================================
   PROGRESSO - CARDS DE ESTATÍSTICAS
   ============================================ */
.stat-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
}

.stat-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   PROGRESSO - BARRA GRANDE DE CRONOGRAMA
   ============================================ */
.progress-container-large {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 auto 8px;
    max-width: 600px;
}

.progress-label-large {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #aaa;
    margin-bottom: 10px;
}

.progress-bar-large {
    width: 100%;
    height: 10px;
    background: #333;
    border-radius: 99px;
    overflow: hidden;
}

.progress-fill-large {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 99px;
    transition: width 0.5s ease;
}

/* ============================================
   PROGRESSO - CARDS DE MÓDULO
   ============================================ */
.modulo-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s ease;
    cursor: pointer;
}

.modulo-card:hover,
.modulo-card.expanded {
    border-color: var(--primary-color);
}

.modulo-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    user-select: none;
}

.modulo-numero {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: var(--primary-color);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.modulo-info {
    flex: 1;
    min-width: 0;
}

.modulo-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modulo-content-wrapper {
    padding: 0 18px 14px;
}

.modulo-atividades {
    border-top: 1px solid #2a2a2a;
    padding: 12px 18px 18px;
}

.chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

/* ============================================
   PROGRESSO - BARRA PEQUENA POR MÓDULO
   ============================================ */
.progress-bar-small {
    width: 100%;
    height: 6px;
    background: #333;
    border-radius: 99px;
    overflow: hidden;
}

.progress-fill-small {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-color), var(--secondary-light));
    border-radius: 99px;
    transition: width 0.4s ease;
}

/* ============================================
   PROGRESSO - LINHAS DE ATIVIDADE
   ============================================ */
.atividade-row {
    padding: 12px 0;
    border-bottom: 1px solid #222;
}

.atividade-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.atividade-info {
    flex: 1;
    min-width: 0;
    padding-right: 12px;
}

.atividade-title {
    font-size: 0.9rem;
    font-weight: 500;
}

.atividade-actions {
    flex-shrink: 0;
}

/* ============================================
   PROGRESSO - BOTÃO CHECKLIST
   ============================================ */
.btn-checklist {
    min-width: 110px;
    font-size: 0.82rem;
    border-radius: 20px;
    padding: 6px 14px;
}

.disabled-done {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
    background: transparent !important;
    border-color: #28a745 !important;
    color: #28a745 !important;
}

/* ============================================
   SISTEMA DE ANIMAÇÕES APRIMORADO
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Animações para loading */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-pulse { animation: pulse 2s infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease; }
.animate-slide-in-right { animation: slideInRight 0.6s ease; }

/* ============================================
   OTIMIZAÇÕES DE RESPONSIVIDADE COMPLETAS
   ============================================ */

/* === TABLETS E ABAIXO (max-width: 991.98px) === */
@media (max-width: 991.98px) {
    /* Layout */
    .hero-section {
        min-height: 60vh;
        padding: var(--space-2xl) 0;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

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

    .public-callout {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .hero-buttons .btn {
        margin-bottom: var(--space-sm);
    }
    
    /* Cards aprimorados */
    .feature-card {
        margin-bottom: var(--space-lg);
        padding: var(--space-xl) var(--space-lg);
    }
    
    .plan-card {
        margin-bottom: var(--space-lg);
        padding: var(--space-xl) var(--space-lg);
    }
    
    /* Scale em tablet pode causar overflow horizontal — remover */
    .plan-card.featured {
        transform: none;
    }
    
    /* Dashboard otimizado */
    .challenge-hero-banner {
        min-height: 240px;
        height: 240px;
    }
    
    .challenge-floating-badge {
        width: 70px !important;
        height: 70px !important;
        font-size: var(--font-size-2xl) !important;
    }
}

/* === MOBILE (max-width: 767.98px) === */
@media (max-width: 767.98px) {
    /* Layout melhorado */
    .hero-section {
        min-height: 50vh;
        text-align: center;
    }
    
    /* Cards otimizados */
    .feature-card {
        padding: var(--space-lg);
        text-align: center;
    }
    
    .feature-icon {
        width: 70px;
        height: 70px;
        font-size: var(--font-size-2xl);
        margin-bottom: var(--space-md);
    }
    
    .plan-card {
        padding: var(--space-lg);
        text-align: center;
    }
    
    .plan-card.featured {
        transform: none;
        margin-bottom: var(--space-lg);
    }
    
    /* Buttons responsivos */
    .btn-cta-large,
    .btn-plan {
        width: 100%;
        margin-bottom: var(--space-sm);
    }
    
    /* Tables responsivos */
    .custom-table,
    .custom-table tbody,
    .custom-table tr,
    .custom-table td,
    .custom-table th {
        display: block;
        width: 100%;
    }
    
    .custom-table th {
        text-align: center;
        border-bottom: none;
    }
    
    .custom-table td {
        text-align: center;
        border-top: none;
        padding: var(--space-sm);
    }
    
    .custom-table tr {
        border: 1px solid var(--border-secondary);
        border-radius: var(--border-radius-sm);
        margin-bottom: var(--space-sm);
        padding: var(--space-sm);
    }
    
    /* Swiper mobile */
    .swiper-button-prev,
    .swiper-button-next {
        display: none !important;
    }
}

/* === MOBILE PEQUENO (max-width: 575.98px) === */
@media (max-width: 575.98px) {
    /* Spacing otimizado */
    .container-fluid {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
    
    /* Cards compactos */
    .feature-card,
    .plan-card {
        padding: var(--space-md);
    }
    
    /* Forms compactos */
    .login-card,
    .legal-box {
        padding: var(--space-lg);
    }
}

/* ============================================
   MODO DE ALTO CONTRASTE
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --border-primary: #666666;
        --border-secondary: #777777;
        --text-muted: #CCCCCC;
        --text-disabled: #999999;
    }
    
    .btn {
        border-width: 2px;
    }
    
    .feature-icon {
        border-width: 3px;
    }
}

/* ============================================
   MODO DE MOVIMENTO REDUZIDO
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
    
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    
    .btn:hover,
    .card-base:hover {
        transform: none !important;
    }
}

/* ============================================
   MELHORIAS DE RESPONSIVIDADE EXTRAS
   ============================================ */

/* Prevenção de overflow horizontal em todas as telas */
/* Nota: overflow-x: hidden no html causa bloqueio de scroll no iOS Safari,
   por isso é aplicado apenas no body. */
html {
    max-width: 100%;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Apenas elementos de mídia devem ser limitados — aplicar * { max-width:100% } a tudo quebra flex/grid */
img, video, svg, canvas, iframe, embed, object {
    max-width: 100%;
}

/* Melhorias para telas muito pequenas (<360px) */
@media (max-width: 359px) {
    :root {
        --font-size-base: 0.9375rem; /* 15px */
        --space-md: 0.875rem; /* 14px */
        --section-padding: var(--space-md);
        --card-padding: var(--space-sm);
    }
    
    .btn {
        padding: var(--space-xs) var(--space-md);
        font-size: 0.875rem;
    }
    
    .section-title {
        /* clamp() já garante o tamanho mínimo, word-break é necessário */ 
        word-break: break-word;
    }
    
    .hero-buttons {
        gap: var(--space-sm);
    }
    
    .container-fluid {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
}

/* Mobile Landscape optimizations */
@media (max-height: 500px) and (orientation: landscape) {
    section {
        padding: var(--space-xl) 0;
    }
    
    .hero-section {
        min-height: auto;
        padding: var(--space-3xl) 0;
    }
    
    .navbar-height {
        height: 56px;
    }
    
    body {
        padding-top: 56px;
    }
}

/* Touch target improvements para acessibilidade */
@media (pointer: coarse) {
    .btn,
    .nav-link,
    .dropdown-item,
    button,
    a[role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    .btn-circle {
        min-width: 44px;
        min-height: 44px;
    }
    
    .swiper-pagination-bullet {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* Safe-area insets para dispositivos com notch */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .navbar {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    .whatsapp-float,
    .back-to-top {
        right: max(20px, env(safe-area-inset-right));
    }
    
    .whatsapp-float {
        bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* Otimizações para performance em mobile */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: rgba(254, 106, 0, 0.1);
        tap-highlight-color: rgba(254, 106, 0, 0.1);
    }
    
    img, video {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .feature-card:hover,
    .plan-card:hover,
    .course-card:hover {
        transform: none; /* Desabilita hover animations em mobile */
    }
}

/* ============================================
   IMPRESSÃO
   ============================================ */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    body {
        background: white !important;
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .navbar,
    .whatsapp-float,
    .back-to-top,
    .cookie-banner,
    .btn {
        display: none !important;
    }
    
    .section-dark,
    .section-light,
    .section-secondary,
    .section-tertiary {
        background: white !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        color: black !important;
    }
    
    .card-base,
    .feature-card,
    .plan-card,
    .depoimento-card {
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }
}

/* ============================================
   TELAS MUITO PEQUENAS — < 360px (ex: Galaxy Fold fechado)
   ============================================ */
@media (max-width: 359px) {
    .section-title { font-size: 1.25rem; }
    .cta-title    { font-size: 1.25rem; }
    .feature-icon { width: 52px; height: 52px; font-size: 1.4rem; }
    .btn-cta-large,
    .btn-plan     { padding: 0.75rem 1rem; font-size: 0.9rem; }
    .plan-price   { font-size: 1.4rem !important; }
    .container-fluid { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .feature-card, .plan-card { padding: var(--space-sm); }
    .hero-title   { font-size: 1.5rem; }
}

/* ============================================
   TELAS GRANDES — > 1440px (monitores wide/4K)
   ============================================ */
@media (min-width: 1440px) {
    /* Container k\u00e3o estica al\u00e9m de 1400px */
    .container { max-width: min(1400px, 96vw) !important; }
    
    /* Ícones crescem um pouco mais */
    .feature-icon { width: 110px; height: 110px; font-size: 3.25rem; }
    
    /* Garantir que hero n\u00e3o fique muito vazio */
    .hero-section { min-height: 65vh; }
    
    /* Section padding um pouco mais generoso */
    section { padding: 100px 0; }
}

@media (min-width: 1920px) {
    .container { max-width: min(1600px, 90vw) !important; }
    html { font-size: clamp(16px, calc(14px + 0.2vw), 20px); }
}

/* ============================================
   NORMALIZACAO DE ESPACAMENTO MOBILE
   ============================================ */
@media (max-width: 767.98px) {
    .hero-section .container,
    section .container,
    footer .container,
    .container,
    .container-fluid {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }

    .hero-section .row,
    section .row,
    footer .row {
        --bs-gutter-x: 1rem;
    }

    .feature-card,
    .plan-card,
    .path-card,
    .course-card,
    .depoimento-card,
    .transformacao-card,
    .login-card,
    .legal-box,
    .contact-form-wrapper,
    .contact-card,
    .cadastro-card,
    .form-card,
    .card {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .feature-card,
    .plan-card,
    .path-card,
    .course-card,
    .depoimento-card,
    .transformacao-card {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    .feature-card,
    .path-card,
    .plan-card,
    .course-card {
        text-align: center;
        align-items: center;
    }

    .feature-card .feature-icon,
    .path-card .path-eyebrow,
    .feature-card .feature-title,
    .path-card .path-title,
    .plan-card .plan-name,
    .course-card h3 {
        margin-left: auto;
        margin-right: auto;
    }

    .feature-text,
    .path-copy,
    .section-subtitle,
    .hero-subtitle,
    .depoimento-text,
    .transformacao-info,
    .contact-card p,
    .card p {
        padding-left: 0;
        padding-right: 0;
    }

    .feature-text,
    .path-copy,
    .depoimento-text,
    .contact-card p,
    .card p {
        max-width: 28ch;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .path-points,
    .feature-card ul,
    .plan-card ul {
        width: 100%;
        max-width: 28ch;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        text-align: center;
        list-style-position: inside;
    }

    .path-points li,
    .feature-card li,
    .plan-card li {
        text-align: center;
    }

    .btn-cta-large,
    .btn-plan,
    .btn-primary,
    .btn-outline-light,
    .btn-outline-primary {
        width: 100%;
    }
}