/* === EXPERIENCE SECTION (DESIGN PRINT 2) === */

.experience-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background-color: #f9fafb;
    /* Fundo bem claro, quase branco */
}

/* Título de Fundo Gigante */
.experience-bg-title {
    position: absolute;
    top: -40px;
    /* Ajuste para cortar o topo conforme print */
    left: 50%;
    transform: translateX(-50%);
    font-size: 12rem;
    /* Tamanho gigante */
    font-weight: 900;
    color: #6B7280;
    /* Cinza escuro */
    opacity: 0.1;
    /* 90% de transparência */
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
    /* Não interfere no clique */
}

.experience-content {
    position: relative;
    z-index: 2;
    /* Fica acima do título gigante */
    max-width: 900px;
    margin: 0 auto;
    padding-top: 150px;
    /* Espaço para não cobrir o título gigante */
}

/* Tag "Reconhecimento" */
.experience-tag {
    color: #2563EB;
    /* Azul vibrante */
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: block;
}

/* Título Principal */
.experience-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    /* Quase preto */
    margin-bottom: 25px;
    line-height: 1.2;
}

/* Parágrafos de Texto */
.experience-text {
    color: #6B7280;
    /* Cinza médio */
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.experience-text strong {
    color: #4B5563;
    /* Um pouco mais escuro para destaque */
    font-weight: 700;
}

/* Botão "Sobre Nos" */
.btn-experience {
    display: inline-block;
    background-color: #2563EB;
    /* Azul Royal */
    color: white;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 6px;
    /* Cantos levemente arredondados */
    text-decoration: none;
    transition: background-color 0.2s;
    margin-top: 10px;
    font-size: 0.95rem;
}

.btn-experience:hover {
    background-color: #1d4ed8;
}

/* Responsividade */
@media (max-width: 768px) {
    .experience-bg-title {
        font-size: 6rem;
        top: 0;
    }

    .experience-content {
        padding-top: 80px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .experience-title {
        font-size: 2rem;
    }
}