.main-ap-today-section {
    width: 100%;
    height: 50vw;
    display: flex;
    background-color: var(--color-ap-today);
}

.ap-today-section {
    margin: auto;
    margin-top: 0.5vw;
    text-align: center;
    width: 80%;

    .ap-t-main-title {
        font-size: 5.5vw;
        color: var(--color-main-contrary);
    }

    .ap-t-title {
        font-size: 2vw;
        color: var(--color-footer);
        font-weight: 600;
        line-height: 2vw;
    }

    .ap-t-sub-title {
        padding-top: 1vw;
        font-size: 1.2vw;
        color: var(--color-main-contrary);
        line-height: 1.2vw;
        font-weight: 100;

        span {
            font-weight: 600;
        }
    }
}

/* --- CUADRÍCULA (GRID) --- */
.ap-today-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5vw;
    margin: 0;
    padding: 2vw 2vw;
}

/* --- CÁPSULA INDIVIDUAL (PILL) --- */
.ap-t-pill {
    width: 18vw;
    height: 6.5vw;
    margin: 2vw auto 0 auto;
    border-radius: 3vw;
    border: 0.2vw solid;
    color: var(--color-main);
    border-color: var(--color-main-contrary);
    background-color: var(--color-bg-grey);
    padding: 2vw 2vw 1vw 2vw;
    position: relative;
    font-size: 1.7vw;
    line-height: 1.8vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    span {
        font-weight: 650;
    }

    .ap-t-pill-icon {
        img {
            position: absolute;
            top: -2vw;
            transform: translate(-50%, -0%);
            z-index: 10;
            width: 4vw;
        }
    }

}

/* 📱 MEDIA QUERY para Dispositivos Móviles (ancho máximo de 768px) 📱 */
@media (max-width: 768px) {

    .main-ap-today-section {
        font-size: 4vw;
        /* background-image: none; */
        height: 100vw;
    }

    .ap-today-section {
        width: 100%;
        margin: 0;

        .ap-t-main-title {
            padding-top: 5vw;
            font-size: 7vw;
        }

        .ap-t-title {
            font-size: 3.4vw;
            line-height: 3.4vw;
            padding-top: 2vw;
        }

        .ap-t-sub-title {
            padding-top: 1.5vw;
            font-size: 2.5vw;
            line-height: 3vw;
        }

    }

    .ap-today-grid {
        margin-top: 6vw;
        /* 🔑 En móvil, pasa a ser una sola columna 🔑 */
        grid-template-columns: 1fr 1fr;
    }

    .ap-t-pill {
        width: 30vw;
        height: 8vw;
        margin: 2vw auto 0 auto;
        font-size: 2.9vw;
        line-height: 3vw;

        .ap-t-pill-icon {
            img {
                position: absolute;
                top: -2vw;
                transform: translate(-50%, -0%);
                z-index: 10;
                width: 4vw;
            }
        }

    }

}