/* ========================================= */
/* --- AJUSTE GLOBAL DE LARGURA (SOBRE) --- */
/* ========================================= */
/* Deixa o conteúdo mais largo para acompanhar o menu em monitores grandes */
.container { max-width: 1600px !important; }
html, body { overflow-x: hidden; }

/* ========================================= */
/* --- 1. HERO (Responsivo) --- */
/* ========================================= */
.about-hero { height: 60vh; min-height: 450px; background: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070') center/cover no-repeat; display: flex; align-items: center; position: relative; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(10, 25, 47, 0.9) 30%, rgba(10, 25, 47, 0.4) 100%); }
.hero-text-box { position: relative; z-index: 10; margin-top: 60px;} /* Margem para descolar do header */
.hero-tag { color: var(--paultrab-orange); text-transform: uppercase; font-weight: 800; letter-spacing: 2px; font-size: 0.85rem; display: block; margin-bottom: 15px; }
.hero-title { color: var(--white); font-family: var(--font-title); font-size: 3.5rem; font-weight: 900; line-height: 1.1; }
.hero-title .highlight { color: var(--paultrab-orange); }

/* ========================================= */
/* --- 2. MODERN SPLIT (O Meio) --- */
/* ========================================= */
.modern-split-about { padding: 100px 0; background: #fff; }
.split-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.modern-tag { color: var(--paultrab-orange); font-weight: 800; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 15px; display: block; letter-spacing: 2px; }
.modern-title { font-family: var(--font-title); font-size: 2.8rem; color: var(--navy-dark); font-weight: 900; margin-bottom: 25px; line-height: 1.1; }
.modern-description p { font-size: 1.1rem; line-height: 1.7; color: var(--text-dark); margin-bottom: 20px; }
.experience-line { display: flex; align-items: center; gap: 20px; margin-top: 35px; border-left: 4px solid var(--paultrab-orange); padding-left: 20px; }
.line-year { font-family: var(--font-title); font-size: 3rem; font-weight: 900; color: var(--navy-dark); }
.line-text { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--text-dark); line-height: 1.2; }
.split-image img { width: 100%; height: 500px; object-fit: cover; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.05); }

/* ========================================= */
/* --- 3. STATS BAR (Grid 2x2 no Mobile) --- */
/* ========================================= */
.stats-bar { background: var(--navy-dark); padding: 70px 0; border-top: 5px solid var(--paultrab-orange); color: var(--white); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.stat-box { text-align: center; }
.num-wrapper { display: flex; justify-content: center; align-items: baseline; }
.s-num { font-family: var(--font-title); font-size: 3rem; font-weight: 800; color: var(--paultrab-orange); }
.plus { font-size: 1.8rem; font-weight: 800; color: var(--paultrab-orange); margin-left: 2px; }
.s-text { display: block; font-size: 0.8rem; text-transform: uppercase; opacity: 0.7; font-weight: 600; margin-top: 10px; letter-spacing: 1px; }

/* ========================================= */
/* --- 4. VALUES SECTION --- */
/* ========================================= */
.values-section { padding: 100px 0; background: var(--bg-ice); position: relative; overflow: hidden; }
.watermark-values { position: absolute; top: 2%; left: 50%; transform: translateX(-50%); font-size: 15vw; font-weight: 900; color: rgba(10, 25, 47, 0.04); z-index: 1; pointer-events: none; white-space: nowrap; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position: relative; z-index: 10; }
.value-card { background: #fff; padding: 50px 30px; border-radius: 12px; text-align: center; border: 1px solid var(--border-light); transition: 0.3s; }
.value-card:hover { border-color: var(--paultrab-orange); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(10, 25, 47, 0.08); }
.value-icon { font-size: 2.5rem; color: var(--paultrab-orange); margin-bottom: 25px; }
.value-card h3 { font-family: var(--font-title); font-size: 1.5rem; color: var(--navy-dark); margin-bottom: 15px; font-weight: 800;}
.value-card p { color: var(--text-gray); line-height: 1.6; }

/* ========================================= */
/* --- 5. CTA (Laranja) --- */
/* ========================================= */
.about-cta { padding: 80px 0; background: var(--paultrab-orange); color: var(--navy-dark); margin-top: 0 !important; }
.about-cta h2 { font-family: var(--font-title); font-size: 2.8rem; font-weight: 900; margin-bottom: 20px; }
.about-cta p { font-size: 1.2rem; margin-bottom: 35px; opacity: 0.8; max-width: 700px; margin-left: auto; margin-right: auto; }
.btn-solid-large-navy { background: var(--navy-dark); color: #fff; padding: 18px 45px; text-decoration: none; border-radius: 4px; font-weight: 800; display: inline-block; text-transform: uppercase; transition: 0.3s; font-family: var(--font-title);}
.btn-solid-large-navy:hover { background: #112240; transform: translateY(-3px); color: #fff; box-shadow: 0 10px 20px rgba(10, 25, 47, 0.2);}

/* ========================================= */
/* --- 6. PENTE FINO RESPONSIVO --- */
/* ========================================= */
@media (max-width: 1024px) {
    .split-wrapper { grid-template-columns: 1fr; gap: 50px; }
    .split-image img { height: 400px; }
    .hero-title { font-size: 2.8rem; }
}

@media (max-width: 768px) {
    /* 1. Ajustes do Banner */
    .about-hero { padding: 130px 0 50px; height: auto; min-height: 350px; }
    .hero-title { font-size: 2.2rem; }
    
    /* 2. Ajustes da Seção Nossa Trajetória */
    .modern-split-about { padding: 60px 0; } 
    .split-wrapper { gap: 40px; } 
    .modern-title { font-size: 2rem; margin-bottom: 15px; }
    .modern-description p { font-size: 1rem; margin-bottom: 15px; }
    .experience-line { margin-top: 25px; }
    .split-image img { height: 320px; } 
    
    /* 3. Ajustes dos Contadores */
    .stats-bar { padding: 50px 0; } 
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 15px; }
    .s-num { font-size: 2.2rem; }
    .plus { font-size: 1.5rem; }
    
    /* 4. Ajustes dos Valores (Pilares) */
    .values-section { padding: 60px 0; } 
    .watermark-values { top: 1%; font-size: 18vw; } 
    .values-grid { grid-template-columns: 1fr; gap: 20px; }
    .value-card { padding: 30px 20px; } 
    .value-icon { margin-bottom: 15px; font-size: 2rem; }
    .value-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
    
    /* 5. Ajustes do CTA (Chamada Final Laranja) */
    .about-cta { padding: 60px 0; } 
    .about-cta h2 { font-size: 1.8rem; margin-bottom: 15px; }
    .about-cta p { font-size: 1.05rem; margin-bottom: 25px; }
    .btn-solid-large-navy { padding: 15px 30px; font-size: 0.95rem; width: 100%; text-align: center; } 
}