body {
    background-color: var(--color-medio-blanco);
}

/* ============================
   CABECERA
=============================== */

.fondo {
    position: relative;
    width: 100%;
    height: 70vh;
}

.cont-titulo {
    top: 50%;
    position: absolute;
    transform: translateY(-70%);
    padding: 0 6vw;
}

.tit-intro {
    margin-bottom: 0;
}

/* ============================
   TRABAJOS
=============================== */

#mis-trabajos {
    border-radius: unset;
    background-color: unset;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    column-gap: var(--column-gap-32);
    row-gap: 6vh;
    margin-top: 0;
    margin-bottom: 12vh;
}

/*Contenedor de cada trabajo*/
#mis-trabajos .trabajo-concreto {
    display: flex;
    flex-direction: column;
    row-gap: var(--row-gap-16);
    align-content: flex-start;
    width: 100%;
    position: relative;
}

#mis-trabajos .trabajo-concreto .cover-trabajo {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Mantiene el div cuadrado */
    overflow: hidden;
    position: relative;
    border-radius: var(--border-radius-16);
}

picture {
    height: auto;
}

/*Foto colocada cover*/
.cover-trabajo .img-card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-16);
}

/* Foto colocada cover */
.cover-trabajo .img-card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-16);
    transition: transform 0.4s ease;
    /* Suaviza la animación */
}

/* Efecto zoom al hacer hover */
.trabajo-concreto:hover .img-card {
    transform: scale(1.05);
    /* Aumenta un poquito */
}

.trabajo-concreto .destacado-tag {
    border: 1px solid var(--color-gris-extra);
    background-color: transparent;
    padding: 8px 16px;
    border-radius: var(--border-radius-8);
    backdrop-filter: unset;
}

.trabajo-concreto .destacado-tag .text-dest {
    color: var(--color-texto-oscuro);
    font-size: 12px;
}

/* ============================
   TRABAJOS — RESPONSIVE
=============================== */

@media only screen and (max-width: 940px) {
    #mis-trabajos {
        grid-template-columns: 1fr;
        row-gap: 6vh;
    }
}