/*==================================================
    LA TOXICA RADIO
    PROGRAMACION WEB
    DESKTOP ONLY
==================================================*/


/*==================================================
    COLUMNAS PRINCIPALES DESKTOP

    IZQUIERDA:
    TOXIMETRO
    PROGRAMACION WEB

    DERECHA:
    TOXINOTAS
==================================================*/

@media (min-width: 768px) {

    #desktop-app .desktop-main-columns {

        width: 100%;

        margin: 0;
        padding: 0 40px 40px;

        box-sizing: border-box;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        column-gap: 30px;

        align-items: start;

    }


    #desktop-app .desktop-left-column {

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        display: block;

    }


    #desktop-app .desktop-right-column {

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        display: block;

    }


    /*==================================================
        TOXIMETRO
    ==================================================*/

    #desktop-app .desktop-left-column > .toximetro {

        width: 100%;
        max-width: none;

        margin-left: 0;
        margin-right: 0;

        box-sizing: border-box;

    }


    /*==================================================
        PROGRAMACION WEB
    ==================================================*/

    #desktop-app .programacion-web {

        width: 100%;
        min-width: 0;

        margin: 28px 0 0;
        padding: 0;

        box-sizing: border-box;

    }


    /*==================================================
        ENCABEZADO
    ==================================================*/

    #desktop-app .programacion-web-header {

        width: 100%;

        margin: 0 0 18px;
        padding: 0;

        box-sizing: border-box;

    }


    #desktop-app .programacion-web-title {

        margin: 0;

        font-size: 30px;
        line-height: 1.05;

        font-weight: 900;

        letter-spacing: 1px;

        color: #0B3D91;

    }


    #desktop-app .programacion-web-subtitle {

        margin: 7px 0 0;

        font-size: 13px;
        line-height: 1.3;

        font-weight: 700;

        letter-spacing: 1.5px;

        color: #555555;

    }


    /*==================================================
        TARJETA UNICA
    ==================================================*/

    #desktop-app .programacion-web-card {

        position: relative;

        width: 100%;
        height: 620px;

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        overflow: hidden;

        background: #FFD400;

        border-radius: 28px;

        box-shadow:
            0 18px 40px rgba(8, 21, 38, 0.12);

    }


    /*==================================================
        ITEM

        UN SOLO LOCUTOR VISIBLE
    ==================================================*/

    #desktop-app .programacion-web-item {

        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 30px 30px;

        box-sizing: border-box;

        display: grid;

        grid-template-columns:
            minmax(0, 54%)
            minmax(0, 46%);

        align-items: center;

        opacity: 0;
        visibility: hidden;

        transform:
            translateX(70px)
            scale(0.98);

        transition:
            opacity 0.8s ease,
            transform 0.8s ease,
            visibility 0.8s ease;

        pointer-events: none;

    }


    #desktop-app .programacion-web-item.is-active {

        opacity: 1;
        visibility: visible;

        transform:
            translateX(0)
            scale(1);

        pointer-events: auto;

    }


    #desktop-app .programacion-web-item.is-leaving {

        opacity: 0;
        visibility: visible;

        transform:
            translateX(-70px)
            scale(0.98);

        pointer-events: none;

    }


    /*==================================================
        AREA DE IMAGEN
    ==================================================*/

    #desktop-app .programacion-web-image {

        width: 100%;
        height: 560px;

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        display: flex;

        align-items: flex-end;
        justify-content: center;

        overflow: visible;

    }


    /*==================================================
        IMAGEN DEL LOCUTOR
    ==================================================*/

    #desktop-app .programacion-web-locutor {

        display: block;

        width: auto;
        height: 540px;

        max-width: 100%;

        margin: 0;
        padding: 0;

        object-fit: contain;

        object-position: center bottom;

        opacity: 0;

        transform:
            translateY(45px)
            scale(0.90);

        filter:
            drop-shadow(
                0 18px 22px rgba(0, 0, 0, 0.22)
            );

    }


    /*==================================================
        ANIMACION FOTO
    ==================================================*/

    @keyframes programacion-web-photo-in {

        0% {

            opacity: 0;

            transform:
                translateY(45px)
                scale(0.90);

        }

        100% {

            opacity: 1;

            transform:
                translateY(0)
                scale(1);

        }

    }


    #desktop-app .programacion-web-item.is-active
    .programacion-web-locutor {

        animation:
            programacion-web-photo-in
            1s
            ease-out
            0.15s
            forwards;

    }


    /*==================================================
        INFORMACION
    ==================================================*/

    #desktop-app .programacion-web-info {

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0 12px 0 22px;

        box-sizing: border-box;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

    }


    /*==================================================
        NOMBRE DEL LOCUTOR
    ==================================================*/

    #desktop-app .programacion-web-locutor-nombre {

        display: block;

        margin: 0 0 10px;

        font-size: 14px;
        line-height: 1.2;

        font-weight: 900;

        letter-spacing: 1.4px;

        color: #0B3D91;

        opacity: 0;

        transform:
            translateY(22px);

    }


    /*==================================================
        NOMBRE DEL PROGRAMA
    ==================================================*/

    #desktop-app .programacion-web-programa {

        margin: 0 0 10px;

        font-size: 28px;
        line-height: 1.05;

        font-weight: 900;

        letter-spacing: 0.3px;

        color: #081526;

        opacity: 0;

        transform:
            translateY(22px);

    }


    /*==================================================
        HORARIO
    ==================================================*/

    #desktop-app .programacion-web-horario {

        display: inline-flex;

        width: auto;

        margin: 0 0 18px;
        padding: 8px 14px;

        box-sizing: border-box;

        font-size: 13px;
        line-height: 1;

        font-weight: 900;

        letter-spacing: 1px;

        color: #FFFFFF;

        background: #0B3D91;

        border-radius: 8px;

        opacity: 0;

        transform:
            translateY(22px);

    }


    /*==================================================
        DESCRIPCION
    ==================================================*/

    #desktop-app .programacion-web-descripcion {

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        font-size: 14px;
        line-height: 1.5;

        font-weight: 500;

        color: #17202A;

    }


    /*==================================================
        PARRAFOS DE DESCRIPCION

        CADA PARRAFO ENTRA POR SEPARADO
    ==================================================*/

    #desktop-app .programacion-web-descripcion p {

        margin: 0 0 13px;
        padding: 0;

        opacity: 0;

        transform:
            translateY(22px);

    }


    #desktop-app .programacion-web-descripcion p:last-child {

        margin-bottom: 0;

    }


    /*==================================================
        ANIMACION TEXTO
    ==================================================*/

    @keyframes programacion-web-text-in {

        0% {

            opacity: 0;

            transform:
                translateY(22px);

        }

        100% {

            opacity: 1;

            transform:
                translateY(0);

        }

    }


    /*==================================================
        ENTRADA PROGRESIVA

        LOCUTOR
        PROGRAMA
        HORARIO
        DESCRIPCION
    ==================================================*/

    #desktop-app .programacion-web-item.is-active
    .programacion-web-locutor-nombre {

        animation:
            programacion-web-text-in
            0.8s
            ease-out
            0.70s
            forwards;

    }


    #desktop-app .programacion-web-item.is-active
    .programacion-web-programa {

        animation:
            programacion-web-text-in
            0.8s
            ease-out
            1.00s
            forwards;

    }


    #desktop-app .programacion-web-item.is-active
    .programacion-web-horario {

        animation:
            programacion-web-text-in
            0.8s
            ease-out
            1.30s
            forwards;

    }


    /*==================================================
        PARRAFO 1
    ==================================================*/

    #desktop-app .programacion-web-item.is-active
    .programacion-web-descripcion p:nth-child(1) {

        animation:
            programacion-web-text-in
            0.8s
            ease-out
            1.70s
            forwards;

    }


    /*==================================================
        PARRAFO 2
    ==================================================*/

    #desktop-app .programacion-web-item.is-active
    .programacion-web-descripcion p:nth-child(2) {

        animation:
            programacion-web-text-in
            0.8s
            ease-out
            2.30s
            forwards;

    }


    /*==================================================
        PARRAFO 3
    ==================================================*/

    #desktop-app .programacion-web-item.is-active
    .programacion-web-descripcion p:nth-child(3) {

        animation:
            programacion-web-text-in
            0.8s
            ease-out
            2.90s
            forwards;

    }


    /*==================================================
        BORRE

        FOTO IZQUIERDA
        INFORMACION DERECHA
    ==================================================*/

    #desktop-app .programacion-web-item-borre {

        grid-template-columns:
            minmax(0, 54%)
            minmax(0, 46%);

    }


    #desktop-app .programacion-web-item-borre
    .programacion-web-image {

        order: 1;

    }


    #desktop-app .programacion-web-item-borre
    .programacion-web-info {

        order: 2;

    }


    /*==================================================
        BICHO

        INFORMACION IZQUIERDA
        FOTO DERECHA
    ==================================================*/

    #desktop-app .programacion-web-item-hever {

        grid-template-columns:
            minmax(0, 46%)
            minmax(0, 54%);

    }


    #desktop-app .programacion-web-item-hever
    .programacion-web-image {

        order: 2;

    }


    #desktop-app .programacion-web-item-hever
    .programacion-web-info {

        order: 1;

        padding-left: 22px;
        padding-right: 18px;

    }

}


/*==================================================
    DESKTOP MEDIANO
==================================================*/

@media (min-width: 768px) and (max-width: 1200px) {

    #desktop-app .desktop-main-columns {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        column-gap: 24px;

        padding-left: 28px;
        padding-right: 28px;

    }


    #desktop-app .programacion-web-card {

        height: 580px;

    }


    #desktop-app .programacion-web-item {

        padding: 24px;

    }


    #desktop-app .programacion-web-image {

        height: 520px;

    }


    #desktop-app .programacion-web-locutor {

        height: 500px;

    }


    #desktop-app .programacion-web-programa {

        font-size: 24px;

    }


    #desktop-app .programacion-web-descripcion {

        font-size: 13px;
        line-height: 1.48;

    }


    #desktop-app .programacion-web-descripcion p {

        margin-bottom: 11px;

    }

}


/*==================================================
    DESKTOP PEQUENO
==================================================*/

@media (min-width: 768px) and (max-width: 1000px) {

    #desktop-app .desktop-main-columns {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        column-gap: 20px;

        padding-left: 20px;
        padding-right: 20px;

    }


    #desktop-app .programacion-web-card {

        height: 560px;

        border-radius: 24px;

    }


    #desktop-app .programacion-web-item {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        padding: 18px;

    }


    #desktop-app .programacion-web-item-borre {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

    }


    #desktop-app .programacion-web-item-hever {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

    }


    #desktop-app .programacion-web-image {

        height: 520px;

    }


    #desktop-app .programacion-web-locutor {

        height: 500px;

    }


    #desktop-app .programacion-web-info {

        padding:
            0
            8px
            0
            14px;

    }


    #desktop-app .programacion-web-item-hever
    .programacion-web-info {

        padding:
            0
            14px
            0
            8px;

    }


    #desktop-app .programacion-web-programa {

        font-size: 21px;

    }


    #desktop-app .programacion-web-locutor-nombre {

        font-size: 12px;

    }


    #desktop-app .programacion-web-horario {

        font-size: 12px;

    }


    #desktop-app .programacion-web-descripcion {

        font-size: 12px;
        line-height: 1.42;

    }


    #desktop-app .programacion-web-descripcion p {

        margin-bottom: 9px;

    }

}


/*==================================================
    ESPACIO INFERIOR
    PROGRAMACION WEB
==================================================*/

@media (min-width: 768px) {

    #desktop-app .programacion-web {

        margin-bottom: 80px;

    }

}