/* ===================================
   SPRINT 5A: MELHORIAS VISUAIS AAA
   Espaço Negativo + Refinamento Tipográfico
   =================================== */

/* ===================================
   1. ESPAÇO NEGATIVO (LUXO DO SILÊNCIO)
   =================================== */

/* Aumentar respiro entre seções (6rem → 8-10rem) */
section {
    padding: 8rem 3rem; /* Antes: 6rem 3rem */
}

/* Seções críticas com espaçamento máximo */
.hero,
.manifesto-aaa,
.bim-5d-section,
.portfolio-masonry,
.sistema-prova {
    padding: 10rem 3rem; /* Máximo respiro em seções AAA */
}

/* Respiro interno em containers */
.section-container {
    padding: 4rem 0; /* Antes: 2rem 0 */
}

/* Espaçamento entre elementos (cards, grids) */
.grid,
.masonry-grid,
.dashboard-grid {
    gap: 4rem; /* Antes: 3rem */
}

/* Mobile: reduzir proporcionalmente */
@media (max-width: 768px) {
    section {
        padding: 5rem 1.5rem; /* Antes: 4rem 1.5rem */
    }
    
    .hero,
    .manifesto-aaa,
    .bim-5d-section {
        padding: 6rem 1.5rem; /* Proporcional ao desktop */
    }
    
    .grid,
    .masonry-grid,
    .dashboard-grid {
        gap: 2rem; /* Proporcional ao desktop */
    }
}

/* ===================================
   2. REFINAMENTO TIPOGRÁFICO (KERNING)
   =================================== */

/* Títulos principais: aumentar letter-spacing */
h1,
.hero-title,
.section-title {
    letter-spacing: -0.02em; /* Antes: 0 (era padrão) */
    word-spacing: 0.05em; /* Adiciona respiro entre palavras */
}

/* Subtítulos: kerning médio */
h2,
.section-subtitle {
    letter-spacing: -0.01em;
}

/* Labels e textos auxiliares: kerning aumentado (institucional) */
.section-label,
.badge,
.metric-label,
.tech-label {
    letter-spacing: 0.15em; /* Antes: 0.1em */
    text-transform: uppercase;
}

/* Números grandes: kerning negativo (mais compacto) */
.metric-value,
.hero-number,
h1 span {
    letter-spacing: -0.04em; /* Números ficam mais coesos */
}

/* ===================================
   3. HIERARQUIA VISUAL (CONTRASTE DE TAMANHO)
   =================================== */

/* Aumentar contraste entre níveis de texto */
h1,
.hero-title {
    font-size: clamp(3rem, 6vw, 4.5rem); /* Antes: 3.5rem */
    line-height: 1.1; /* Mais compacto, mais impacto */
}

h2,
.section-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem); /* Antes: 2.75rem */
    line-height: 1.2;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem); /* Antes: 1.75rem */
    line-height: 1.3;
}

/* Corpo de texto: mais espaçamento entre linhas */
p,
.body-text {
    line-height: 1.85; /* Antes: 1.7 */
    margin-bottom: 2rem; /* Antes: 1.5rem */
}

/* ===================================
   4. ESPAÇAMENTO VERTICAL (RHYTHM)
   =================================== */

/* Criar ritmo vertical consistente (escala 8px) */
.section-header {
    margin-bottom: 6rem; /* Antes: 4rem */
}

.section-content {
    margin-bottom: 4rem; /* Antes: 3rem */
}

.card,
.project-card {
    padding: 3rem; /* Antes: 2.5rem */
}

/* ===================================
   5. MÁXIMA LARGURA DE CONTEÚDO
   =================================== */

/* Limitar largura de texto para legibilidade (luxo = não preencher toda tela) */
.section-description,
.hero-description,
p {
    max-width: 75ch; /* 75 caracteres por linha (ótimo para leitura) */
}

/* EXCEÇÃO: Frase de identidade deve ocupar largura total e centralizar */
p.identity-phrase {
    max-width: none; /* Remove limitação de largura */
    margin: 0 auto 4rem auto; /* Centraliza horizontalmente */
    text-align: center; /* Garante centralização do texto */
}

/* EXCEÇÃO: Descrições de seção com text-align center também precisam auto-margin */
p.section-description {
    margin-left: auto;
    margin-right: auto;
}

/* EXCEÇÃO: Hero subtitle e description precisam centralizar */
p.hero-subtitle,
p.hero-description {
    margin-left: auto;
    margin-right: auto;
}

/* EXCEÇÃO: Textos dentro de divs com text-align: center precisam auto-margin */
div[style*="text-align: center"] > p,
div[style*="text-align:center"] > p {
    margin-left: auto;
    margin-right: auto;
}

/* EXCEÇÃO: Parágrafos dentro de section-header (geralmente centralizados) */
.section-header > p {
    margin-left: auto;
    margin-right: auto;
}

/* EXCEÇÃO: Parágrafos no rodapé precisam centralizar */
footer p,
.footer-bottom p,
.footer-section p {
    margin-left: auto;
    margin-right: auto;
}

/* Containers: adicionar respiro lateral */
.section-container {
    max-width: 1400px; /* Antes: 1200px */
    margin: 0 auto;
    padding: 0 4rem; /* Antes: 0 3rem */
}

@media (max-width: 768px) {
    .section-container {
        padding: 0 1.5rem;
    }
}

/* ===================================
   6. CARDS: MAIS RESPIRO INTERNO
   =================================== */

.card,
.project-card,
.dashboard-card {
    padding: 3rem; /* Antes: 2rem */
    margin-bottom: 3rem; /* Antes: 2rem */
}

.card-title {
    margin-bottom: 1.5rem; /* Antes: 1rem */
}

.card-description {
    margin-bottom: 2rem; /* Antes: 1.5rem */
}

/* ===================================
   7. BOTÕES: MAIS ESPAÇO INTERNO
   =================================== */

.btn,
.btn-primary,
.btn-secondary {
    padding: 1.25rem 3rem; /* Antes: 1rem 2.5rem */
    font-size: 0.95rem; /* Antes: 0.9rem */
    letter-spacing: 0.15em; /* Institucional */
}

/* ===================================
   8. IMAGENS: MAIS RESPIRO AO REDOR
   =================================== */

img {
    margin: 2rem 0; /* Antes: 1rem 0 */
}

.hero-bg,
.section-image {
    margin: 0; /* Hero não precisa margin (full-width) */
}

/* ===================================
   9. GRIDS: MAIS ESPAÇAMENTO
   =================================== */

.grid-2,
.grid-3,
.grid-4 {
    gap: 4rem; /* Antes: 3rem */
}

@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        gap: 2rem;
    }
}

/* ===================================
   10. FOOTER: MAIS RESPIRO
   =================================== */

footer {
    padding: 6rem 3rem 3rem; /* Antes: 4rem 3rem 2rem */
}

/* ===================================
   11. ANIMAÇÕES: MAIS SUAVES
   =================================== */

/* Transições mais lentas (mais luxo, menos urgência) */
* {
    transition-duration: 0.5s; /* Antes: 0.4s */
}

.btn,
.card:hover {
    transition-duration: 0.6s; /* Hover ainda mais suave */
}

/* ===================================
   12. ACESSIBILIDADE: MANTER
   =================================== */

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
    }
}

/* ===================================
   13. PERFORMANCE: OTIMIZAR
   =================================== */

/* Usar contain para otimizar rendering */
.section-container,
.card,
.project-card {
    contain: layout style paint;
}

/* will-change apenas em hover (performance) */
.card:hover,
.btn:hover {
    will-change: transform, box-shadow;
}

.card:not(:hover),
.btn:not(:hover) {
    will-change: auto;
}