/* =============================================================================
   MAIN.CSS - Arquivo Principal de Estilos
   GBP Check - Site Institucional
   ============================================================================= */

/* Importa todos os modulos na ordem correta */
@import url('variables.css');
@import url('reset.css');
@import url('typography.css');
@import url('layout.css');
@import url('components.css');
@import url('utilities.css');
@import url('product-page.css');

/* =============================================================================
   ESTILOS GLOBAIS ADICIONAIS
   ============================================================================= */

/* Offset para navbar fixa */
html {
    scroll-padding-top: 80px;
}

/* Main content wrapper */
main {
    min-height: calc(100vh - 72px);
}

/* Highlight text */
.highlight {
    color: var(--color-primary);
}

.highlight-accent {
    color: var(--color-accent);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Texto com gradiente e efeito shine */
.text-gradient-shine {
    position: relative;
    background: linear-gradient(90deg, var(--color-primary) 0%, #8300cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Efeito de brilho que passa */
.text-gradient-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 60%,
        transparent 100%
    );
    animation: textShine 10s ease-in-out infinite;
    animation-delay: 1s;
    pointer-events: none;
}

@keyframes textShine {
    0% { left: -150%; }
    8% { left: 150%; }
    100% { left: 150%; }
}

/* Background patterns */
.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300aa66' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Animated elements */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* =============================================================================
   COMPONENTES ESPECIFICOS DO SITE
   ============================================================================= */

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.logo-icon {
    width: 40px;
    height: 40px;
}

.logo-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.logo-text span {
    color: var(--color-text);
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    text-align: center;
    padding: var(--space-16) 0;
    border-radius: var(--radius-2xl);
    margin: var(--space-16) 0;
}

.cta-section .btn-white {
    background: white;
    color: var(--color-primary);
}

.cta-section .btn-white:hover {
    background: var(--color-background-alt);
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    text-align: center;
}

.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

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

/* Pricing Table */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    align-items: start;
}

@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Feature List (checkmarks) */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.feature-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.feature-list-item::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: var(--color-primary);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Screenshot/Image showcase */
.screenshot {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border);
}

/* Modules grid (for feature pages) */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

/* Trust badges */
.trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    opacity: 0.6;
}

.trust-badge {
    height: 32px;
    width: auto;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.breadcrumb a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

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

.breadcrumb-separator {
    color: var(--color-border);
}

/* =============================================================================
   STAGING NOTICE (remover apos go-live)
   ============================================================================= */

.staging-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-warning);
    color: var(--color-text);
    padding: var(--space-2) var(--space-4);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    z-index: 9999;
}