/* ============================================================
   EXPERIÊNCIAS
   ============================================================ */
.experiencias {
    width: 100%;
    height: auto;
    background-color: var(--amarelo);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 0 2rem 5rem;
    text-align: center;
}

.experiencias .card-exp {
    width: min(75vw, 78rem);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 2.5rem;
    background-color: var(--verde);
    border-radius: var(--raio);
    box-shadow: -10px 10px 0px -2px var(--preto), -15px 15px 15px -2px var(--cinza);
}

.experiencias .card-exp img,
.experiencias .card-exp video {
    width: 34rem;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: var(--branco);
    border-radius: 10px;
    border: solid 2.5px var(--preto);
    box-shadow: -10px -10px 0px -1px var(--amarelo);
    transition: transform 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
}

.experiencias .card-exp img:hover {
    transform: translate(4px, 4px);
    box-shadow: -14px -14px 0px -1px var(--amarelo);
}

.experiencias .text-exp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    gap: 1rem;
}

.experiencias .text-exp h3 {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 800;
    line-height: 1.3;
}

/* Antes era branco sobre verde: 2:1 de contraste, reprovado no WCAG.
   Preto sobre o mesmo verde dá 10:1 e mantém a paleta intacta. */
.experiencias .text-exp .periodo {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--preto);
    opacity: 0.7;
}

.experiencias .text-exp p {
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.6;
}

.experiencias .text-exp strong {
    font-weight: 800;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .experiencias {
        gap: 2rem;
        padding: 0 1.5rem 3rem;
    }

    .experiencias .card-exp {
        width: 100%;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
        box-shadow: -6px 6px 0px -2px var(--preto);
    }

    .experiencias .card-exp img,
    .experiencias .card-exp video {
        width: 100%;
        box-shadow: -6px -6px 0px -1px var(--amarelo);
        order: -1;
    }

    .experiencias .text-exp {
        gap: 0.8rem;
    }

    .experiencias .text-exp p {
        font-size: 0.9rem;
    }
}