/* =========================================================
   MI RECORRIDO · DOS FOTOS POR ETAPA
========================================================= */

.career-card-double {
    display: grid;
    gap: 30px;
    align-items: center;
}

/* Texto izquierda, fotos derecha */
.career-card-double-right {
    grid-template-columns: minmax(0, 1fr) 320px;
}

/* Fotos izquierda, texto derecha */
.career-card-double-left {
    grid-template-columns: 320px minmax(0, 1fr);
}

.career-card-double .career-copy {
    min-width: 0;
}

.career-card-double .career-media-pair {
    width: 320px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}

.career-card-double .career-media {
    width: 100%;
    aspect-ratio: 3 / 4;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(75,79,53,.11);
}

.career-card-double .career-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.career-card-double .career-media:first-child {
    transform: translateY(-11px);
}

.career-card-double .career-media:last-child {
    transform: translateY(11px);
}

/* El último bloque conserva su fondo oliva */
.career-item-final .career-card-double {
    padding: 30px 34px 34px;
}

.career-item-final .career-card-double .career-media {
    box-shadow: 0 16px 34px rgba(0,0,0,.13);
    border: 1px solid rgba(255,255,255,.14);
}

@media (max-width: 1150px) {
    .career-card-double-right {
        grid-template-columns: minmax(0, 1fr) 270px;
    }

    .career-card-double-left {
        grid-template-columns: 270px minmax(0, 1fr);
    }

    .career-card-double .career-media-pair {
        width: 270px;
    }
}

@media (max-width: 820px) {
    .career-card-double,
    .career-card-double-right,
    .career-card-double-left {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .career-card-double .career-media-pair {
        width: 100%;
        max-width: 430px;
        order: 1;
    }

    .career-card-double .career-copy {
        order: 2;
    }

    .career-card-double .career-media {
        aspect-ratio: 4 / 5;
    }

    .career-item-final .career-card-double {
        padding: 24px 22px 28px;
    }
}

@media (max-width: 520px) {
    .career-card-double .career-media-pair {
        gap: 7px;
    }

    .career-card-double .career-media:first-child {
        transform: translateY(-5px);
    }

    .career-card-double .career-media:last-child {
        transform: translateY(5px);
    }

    .career-card-double .career-media {
        border-radius: 14px;
    }
}

/* =========================================================
   RECORRIDO 04 · CUATRO FOTOS EN UNA FILA + TEXTO ABAJO
========================================================= */

.career-card-04-four {
    display: block !important;
    width: 100%;
    min-width: 0;
}

.career-media-row-04 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    margin-bottom: 28px;
}

.career-media-row-04 .career-media {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: var(--cream-light, #FAF8F2);
    box-shadow: 0 16px 38px rgba(75,79,53,.11);
}

.career-media-row-04 .career-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}

.career-media-row-04 .career-media:hover img {
    transform: scale(1.025);
}

.career-copy-04 {
    width: 100%;
    max-width: 760px;
    min-width: 0;
}

.career-copy-04 h3 {
    max-width: 100%;
}

.career-copy-04 p {
    max-width: 760px;
}

/* Tablet */
@media (max-width: 900px) {
    .career-media-row-04 {
        gap: 9px;
        margin-bottom: 24px;
    }

    .career-media-row-04 .career-media {
        border-radius: 15px;
    }
}

/* Móvil: 2 x 2 para que no se hagan demasiado pequeñas */
@media (max-width: 620px) {
    .career-media-row-04 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 22px;
    }

    .career-media-row-04 .career-media {
        aspect-ratio: 4 / 5;
        border-radius: 13px;
    }
}