/* ==== FUENTES ==== */
@font-face {
    font-family: Agrandir-WideLight;
    src: url(../fonts/Agrandir/Agrandir-WideLight.otf) format('opentype');
    font-weight: 400;
}

/* ==== VARIABLES ==== */
:root {
    --carrousel-width: 800px;
    --carrousel-height: 500px;
    --carrousel-slides: 3;
    --carrousel-speed: 80s;
    --carrousel-fade-color: #080808;
    --carrousel-fade-color-tr: #08080800;

    --programa-height: 300px;
    --programa-height-mobile: 350px;

    --border-radius: 8px;
}

/* ==== UI ==== */

.tinyOnly{
    display: none;
}

.hidden{
    display: none;
}

.btn{
    width: max-content;
    padding: 3px 10px;
    background-color: var(--active) !important;
    border: solid 1px var(--active-dark);
    border-radius: 15px;
    font-weight: 900;
    color: black;
    box-shadow: 3px 3px 0 var(--active-dark);
    transition: all .25s;
}

    .btn:hover,
    .btn:focus,
    .btn:active{
        box-shadow: 0 0 0 var(--active-dark);
        transform: translate(3px, 3px);
        transition: all .25s;
        opacity: initial;
    }

    .ranchada{
        border-radius: 50px !important;
        padding: 5px 25px;
        margin-top: 20px;
    }

.fila{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

    .entradas{
        width: 100%;
        justify-content: flex-end;
    }

.padding{
    padding: 0 15px;
}

.separador{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px auto;
}

    .separador img{
        max-width: 300px;
    }

.alignRight{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.carrousel{
    height: var(--carrousel-height);
    width: 100%;
    box-shadow: 0 3px 10px #00000079;
    overflow: hidden;
}

    .carrousel::before,
    .carrousel::after{
        display: block;
        content: '';
        position: absolute;
        height: var(--carrousel-height);
        width: 20vw;
        z-index: 2;
    }
    .carrousel::before{
        left: 0;
        background: -moz-linear-gradient(to right, var(--carrousel-fade-color) 0%, var(--carrousel-fade-color-tr) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(to right, var(--carrousel-fade-color) 0%, var(--carrousel-fade-color-tr) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, var(--carrousel-fade-color) 0%, var(--carrousel-fade-color-tr) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }

    .carrousel::after{
        right: 0;
        transform: translateY(calc(var(--carrousel-height) * -1));
        background: -moz-linear-gradient(to left, rgba(19,19,19,1) 0%, rgba(19,19,19,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(to left, rgba(19,19,19,1) 0%,rgba(19,19,19,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to left, rgba(19,19,19,1) 0%,rgba(19,19,19,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }

.slider{
    display: flex;
    width: calc(var(--carrousel-width) * calc(var(--carrousel-slides) * 2));
    animation: scrollear var(--carrousel-speed) linear infinite;
}

.elemento{
    height: var(--carrousel-height);
    width: var(--carrousel-width);
}

.selectServicio{
    font-weight: bolder;
    background-color: #b7ffb7;
}

@keyframes scrollear {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(calc(var(--carrousel-width) * -1) * var(--carrousel-slides)));
    }
}

.eventoVirtual *{
    animation: aparecer 1s ease;
}

@keyframes aparecer {
    0%{
        opacity: 0;
        transform: translateY(10px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==== GENERAL ==== */

body{
    background-color: #131313;
    background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: white !important;
    font-family: Agrandir-WideLight;
    font-size: 12pt;
    overflow-x: hidden; 
}

.topbar{
    max-width: 100vw;
    height: 50px;
    background-color: black;
}

.logo{
    width: 150px;
}

nav{
    color: white;
}

nav ul{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 650px;
}

    nav ul a li{
        font-size: 11pt;
    }

.mobileNavbar{
    display: none;
    padding: 15px;
}

.hiddenMenu{
    flex-direction: column;
    position: absolute;
    right: -300px;
    z-index: 10;
    padding: 15px;
    background-color: black;
    font-size: 24pt;
    color: white;
    transition:right .25s ease;
    box-shadow: 2px 8px 10px black;
}
    .hiddenMenu .mobileBtn li{
        padding: 3px 10px;
        background-color: var(--active) !important;
        border: solid 1px var(--active-dark);
        border-radius: 15px;
        font-weight: 900;
        color: black;
        box-shadow: 3px 3px 0 var(--active-dark);
        transition: all .25s;
    }

.burguerBtn i{
    color: white !important;
    font-size: 30pt;
}


header{
    width: 100%;
    margin-bottom: 10px;
}

main{
    max-width: 1600px;
    margin: 0 auto 100px auto;
    padding: 0 10px;
}

section{
    padding: 0 10px;
}

p{
    margin-top: 10px;
}

.pageDesc{
    font-family: 'Rubik Mono One', sans-serif !important;
    color: #fff;
    font-size: 18pt;
    text-align: center;
    margin: 30px 0;
}

.quienesSomos{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.dosColumnas{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 40px;
    margin-top: 30px;
}

.dosColumnas .principal{
    grid-column: span 3;
}

.dosColumnas aside{
    grid-column: span 2;
}

.novedad{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.novedad .imagen{
    width: 100%;
    min-width: 250px;
    height: 150px;
    margin-top: 5px;
    background-color: blue;
}

.novedad .info{
    margin-top: 2px;
}

.tipoNovedad{
    width: max-content;
    padding: 5px 10px;
    background: var(--active);
    font-size: 10pt;
    text-transform: capitalize;
    color: black;
}

.novedad .titulo{
    font-size: 18pt;
    font-weight: 900;
}

.novedad .descripcion{
    font-size: 10pt;
    margin-bottom: 10px;
}

.listadoStreaming{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 10px;
}

    .listadoStreaming a li{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 250px;
        padding: 10px 0;
        border-radius: var(--border-radius);
        background-color: var(--active);
        color: black;
    }

    .listadoStreaming a li div{
        font-weight: bolder;
    }

    .listadoStreaming a li i{
        margin-right: 10px;
        font-size: 24pt;
    }

        .yt{
            color: #ff0000;
            position: relative;
            z-index: 1;
        }

            .yt::after{
                display: block;
                position: absolute;
                height: 15px;
                width: 15px;
                background-color: white;
                transform: translate(.35em, -.72em);
                content: '';
                z-index: -1;
            }

        .tw{
            color: #6441a5
        }

        .tt{
            text-shadow: 1px 1px 0 #ff0050, -1px -1px 0 #00f2ea;
        }

        .ig{ 
            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
            -webkit-text-fill-color: transparent;
            background-clip: text;
            -webkit-background-clip: text;
        }

.cardContainer{
    margin-top: 50px;
}

.card{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: var(--programa-height);
    margin-bottom: 20px;
}

    .card .sneakPeak{
        grid-column: span 1;
    }

        .card .sneakPeak img{
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
        }

    .card .info{
        grid-column: span 2;
        display: grid;
        grid-template-columns: 3fr 7fr;
        grid-auto-rows: var(--programa-height);
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        background-color: var(--active);
        color: black;
    }

    .card .descripcion,
    .card .descripcionServicio{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card .descripcionServicio{
        grid-column: 1 / 3;
        padding: 10px;
    }

    .card .nombre{
        font-size: 20pt;
        font-family: 'Rubik Mono One', sans-serif !important;
    }

    .card .info .programaLogo{
        grid-column: 1 / 2;
        max-height: 100%;
        padding: 10px;
    }

        .card .info .programaLogo img{
            object-fit: contain;
        }

    .card .info .descripcion{
        grid-column: 2 / 3;
        padding: 10px;
    }

    .card .info .horario{
        width: max-content;
        padding: 10px 20px;
        background-color: black;
        text-align: center;
        font-weight: bold;
        color: var(--active);
    }

    .card .descripcion p{
        font-size: 14pt;
    }

    .btnCard,
    .btnEntradas{
        display: flex;
        justify-content: center;
        align-items: center;
        width: max-content;
        text-align: center;
        font-size: 12pt;
        font-weight: bold;
        cursor: pointer;
    }

    .btnCard{
        padding: 10px 20px;
        border-radius: var(--border-radius);
        background-color: #131313;
        color: white;
    }

        .btnCard i{
            margin-right: 10px;
            font-size: 24pt;
            font-weight: normal;
        }

    .btnEntradas{
        font-size: 18pt;
        padding: 20px 30px;
        background-color: var(--active);
        color: black;
    }

        .btnEntradas i{
            margin-right: 15px;
            font-size: 24pt;
        }

.agenda{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 400px));
    gap: 10px;
}

.evento{
    padding: 15px;
    background-color: var(--active);
    color: black;
    height: 618.62px;
}

    .evento .eventoImg{
        width: 100%;
        height: 250px;
    }

    .evento h3{
        -webkit-text-stroke: unset;
        color: black;
        font-weight: 400;
    }

    .evento .nombre{
        max-height: 5em;
    }

    .evento .eventoInfo{
        margin: 5px 0 15px 0;
    }

    .evento .eventoInfo .descripcion{
        text-align: justify !important;
        height: 121.99px;
    }

    .eventoInfo .fecha{
        display: flex;
        width: max-content;
        padding: 5px 10px;
        background-color: black;
        color: var(--active);
        font-size: 14pt;
        -webkit-text-stroke: 1pt white;
        letter-spacing: 1.5px;
    }

        .fecha .dia{
            margin-right: 15px;
        }


.eventoTitulo{
    font-family: 'Bebas Neue', cursive !important;
    -webkit-text-stroke: unset;
    color: white;
    font-weight: 400;
    line-height: .9em;
}

.eventoMain{
    margin-top: 15px;
}

    .eventoMain img{
        max-width: 650px;
        max-height: 490px;
        object-position: 0 0;
    }

    .eventoMain .eventoInfo{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
    }

    .eventoMain .fecha{
        background: var(--active);
        color: black;
        -webkit-text-stroke: 1.3pt black;
        letter-spacing: 1.5px;
    }

    .eventoMain .fila{
        align-items: flex-start;
        gap: 15px;
    }

.map-responsive{
    overflow:hidden;
    padding-bottom:26.25%;
    position:relative;
    height:0;
}

.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    max-height: 500px;
    width:100%;
    position:absolute;
}

.sociesHeader{
    width: 100%;
    height: 400px;
    margin: 15px auto 0 auto;
}

    .sociesHeader .padding{
        height: 100%;
    }

    .sociesHeader .padding img{
        object-position: 0 -50px;
        filter: opacity(.8);
    }

.sectionSocies{
    width: 100%;
    text-align: center;
}

.sociesDescripcion{
    margin: 0 auto;
    text-align: center;
    font-size: 14pt;
}

    .sociesDescripcion span{
        background-color: var(--active);
        padding: 5px 10px;
        color: black;
        -webkit-text-stroke: 0.5pt black;
    }

.loQueCrecimos{
    width: 100%;
    text-align: center;
    font-size: 14pt;
}

    .loQueCrecimos a{
        color: var(--active);
    }

.suscripciones{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 30px;
    margin-top: 30px;
}

    .suscripcion{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 15px;
    }

    .suscripcion:first-child .monto .montoImg{
        background-image: url('../img/socies1.jpg');
        background-size: 650px;
        background-position: 90% 0;  
    }

    .suscripcion:nth-child(2) .monto .montoImg{
        background-image: url('../img/socies2.png');
        background-size: 550px;
        background-position: 45% 70%;
    }

    .suscripcion:nth-child(3) .monto .montoImg{
        background-image: url('../img/socies3.jpg');
        background-size: 750px;
        background-position: 45% -20%;
    }

    .suscripcion .monto{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        width: 100%;
        height: 350px;
        background-color: var(--active);
        font-family: 'Bebas Neue', cursive;
        font-size: 96pt;
        text-align: center;
        text-shadow: 0 3px 5px black;
        box-shadow: 0 5px 10px black;
    }

    .suscripcion .monto .montoImg,
    .suscripcion .monto .importe{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        width: 100%;
        height: 100%;
    }

    .suscripcion .monto .montoImg{
        mix-blend-mode: multiply;
        filter: grayscale() opacity(.5) contrast(1.5) brightness(1.1);
    }

    .suscripcion .monto .importe{
        z-index: 2;
        justify-content: center;
        display: flex;
        align-items: center;
        color: white;
        -webkit-text-stroke: 2pt #2e3f00;
    }

    .suscripcion .btn{
        font-family: 'Bebas Neue', cursive;
        font-size: 18pt;
        color: #2e3f00;
    }

.success{
    font-family: 'Bebas Neue', cursive;
}

    .success header{
        width: 300px;
        margin: 0 auto;
    }

    .success h2{
        text-align: center;
        font-family: 'Bebas Neue', cursive !important;
        font-weight: normal;
        font-size: 48pt;
        -webkit-text-stroke: unset;
        color: white;
    }

    .success p{
        max-width: 400px;
        margin: 0 auto;
        font-size: 18pt;
        text-align: center;
    }

footer{
    padding: 20px;
    background-color: black;
    font-size: 10pt;
    color: white;
}

    footer .navbar{
        margin-bottom: 20px;
    }

.banderas img{
    height: 30px;
    width: 50px;
    margin-right: 10px;
}

.redes{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.redes div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin-left: 10px;
    border-radius: 100%;
    background-color: var(--active);
    font-size: 24pt;
    color: black;
}

    .contactoRedes{
        max-width: 300px;
        margin: 15px auto 30px auto;
    }

    .contactoRedes div{
        width: 35px;
        height: 35px;
    }

    .contactoRedes a i{
        font-size: 13pt;
    }

/* ==== MEDIA QUERYS ===== */
@media (max-width:899px){
    .card .sneakPeak{ grid-column: span 2; }
    .card .sneakPeak img{ 
        border-bottom-left-radius: 0px;
        border-top-right-radius: var(--border-radius);
    }
    .card .info{ 
        border-top-right-radius: 0px;
        border-bottom-left-radius: var(--border-radius);
    }
}

@media (max-width:819px){
    .dosColumnas aside{ grid-column: span 3; }
}

@media (max-width:768px){
    .dosColumnas{ gap: 10px; }
    .card, .card .info{ grid-auto-rows: var(--programa-height-mobile); }
    textarea{min-height: 200px;}
}

@media (max-width:550px){
    h1{ text-align: center; font-size: 30pt !important; }
    h2{ font-size: 24pt !important; }
    .eventoMain .fila{flex-direction: column !important;}
    .eventoFila{ flex-direction: column; }
    .eventoTitulo{ margin: 0 0 15px 0; text-align: left; line-height: 28pt; }
    .entradas { justify-content: center; }
    .navbar{ display: none !important; }
    .topbar .padding{ display: none !important; }
    .mobileNavbar{ display: initial; }
    .ajuste{ display: none; }
    .pageDesc{ font-size: 12pt; }
    .card .info .programaLogo{ padding: 0; }
    .card .descripcion p{ font-size: 11pt; }
    .redes div{
        width: 35px;
        height: 35px;
        font-size: 18pt;
    }
    .redes div{
        margin-left: 0;
        margin-right: 10px;
    }
    .map-responsive{
        padding-bottom:66.25%;
    }
    
    .map-responsive iframe{
        max-height: 600px;
    }
    
}

@media (max-width:395px){
    h1{ font-size: 24pt !important; }
    h2{ font-size: 18pt !important; }
    .tinyOnly{display: unset; }
    .card .horario{ margin-bottom: 10px; }
    .card .info{ grid-template-columns: 1fr !important;}
}

@media (max-width:319px){
    .quienesSomos{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    footer{ padding: 10px; }
    .card{ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .card .info .programaLogo{ display: none; }
    .card .info .descripcion{ grid-column: 1 / 3; }
}