/* ===== ESPAÇAMENTOS PADRONIZADOS ===== */

/* Variáveis de espaçamento */
:root {
    --spacing-xs: 20px;
    --spacing-sm: 40px;
    --spacing-md: 60px;
    --spacing-lg: 80px;
    --spacing-xl: 100px;
    --spacing-2xl: 120px;
}

/* Seções gerais */
section {
    padding: var(--spacing-lg) 0;
}

/* Seções com fundo alternado */
section:nth-of-type(even) {
    background: var(--bg-cream);
}

/* Hero sections - primeiro elemento da página */
.hero,
.blog-hero,
section:first-of-type {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    margin-top: 80px; /* altura do header fixo */
}

/* Seções com destaque (Featured, CTA, etc) */
.featured,
.blog-featured,
.cta-section,
.blog-cta,
.blog-newsletter {
    padding: var(--spacing-lg) 0;
}

/* Container interno - espaçamento consistente */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Grids - espaçamento entre cards */
.planos-grid,
.blog-grid,
.beneficios-grid,
.depoimentos-grid {
    gap: 30px;
}

/* Cards individuais - padding interno */
.plano-card,
.blog-card,
.beneficio-item,
.depoimento-card {
    padding: var(--spacing-sm);
}

/* Títulos de seção - margem inferior consistente */
.section-header {
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.section-title {
    margin-bottom: 20px;
}

.section-subtitle {
    margin-bottom: var(--spacing-sm);
}

/* Espaçamento entre elementos de texto */
h1 {
    margin-bottom: 24px;
}

h2 {
    margin-bottom: 20px;
}

h3 {
    margin-bottom: 16px;
}

p {
    margin-bottom: 20px;
}

p:last-child {
    margin-bottom: 0;
}

/* Listas */
ul, ol {
    margin-bottom: 24px;
}

li {
    margin-bottom: 12px;
}

li:last-child {
    margin-bottom: 0;
}

/* Botões - espaçamento consistente */
.btn {
    margin-top: 20px;
}

.btn-group {
    gap: 16px;
    margin-top: var(--spacing-sm);
}

/* Footer */
.footer {
    padding: var(--spacing-md) 0;
    margin-top: 0;
}

/* Produtos page - ajustes específicos */
.produto-detalhado {
    padding: var(--spacing-lg) 0;
}

.produto-grid {
    gap: var(--spacing-md);
}

.produto-sidebar {
    padding: var(--spacing-sm);
}

.produto-content h3 {
    margin-top: var(--spacing-sm);
    margin-bottom: 24px;
}

.produto-content h3:first-child {
    margin-top: 0;
}

.destaque-box {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm);
}

/* Blog page - ajustes específicos */
.blog-hero {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
}

.featured-article {
    gap: var(--spacing-md);
}

.featured-content {
    padding: var(--spacing-sm);
}

.blog-card-content {
    padding: var(--spacing-sm);
}

/* Landing page - seções específicas */
.sobre {
    padding: var(--spacing-lg) 0;
}

.mentoria {
    padding: var(--spacing-lg) 0;
}

.planos {
    padding: var(--spacing-lg) 0;
}

.depoimentos {
    padding: var(--spacing-lg) 0;
}

.faq {
    padding: var(--spacing-lg) 0;
}

.contato {
    padding: var(--spacing-lg) 0;
}

/* Ajustes para sobre section com grid */
.sobre-grid {
    gap: var(--spacing-md);
    align-items: center;
}

.sobre-content {
    padding-right: var(--spacing-sm);
}

/* FAQ items */
.faq-item {
    margin-bottom: 20px;
}

.faq-question {
    padding: 24px 30px;
}

.faq-answer-content {
    padding: 0 30px 24px 30px;
}

/* Contato grid */
.contato-grid {
    gap: var(--spacing-md);
}

/* Responsivo - espaçamentos menores em mobile */
@media (max-width: 768px) {
    :root {
        --spacing-xs: 16px;
        --spacing-sm: 24px;
        --spacing-md: 40px;
        --spacing-lg: 50px;
        --spacing-xl: 60px;
        --spacing-2xl: 80px;
    }

    .container {
        padding: 0 24px;
    }

    section {
        padding: var(--spacing-md) 0;
    }

    .hero,
    .blog-hero,
    section:first-of-type {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
    }

    .planos-grid,
    .blog-grid,
    .beneficios-grid {
        gap: 24px;
    }

    .plano-card,
    .blog-card,
    .produto-sidebar,
    .featured-content,
    .blog-card-content {
        padding: 24px;
    }

    .destaque-box {
        padding: 24px;
        margin: var(--spacing-sm) 0;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .plano-card,
    .blog-card,
    .produto-sidebar {
        padding: 20px;
    }
}