*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: Principal;
    src: url(../fonts/Blogger_Sans.otf);
}

@font-face {
    font-family: Secundary;
    src: url(../fonts/Blogger_Sans-Medium.otf);
}

@font-face {
    font-family: Neuro;
    src: url(../fonts/NEUROPOL.ttf);
}

:root{
    --redColor:rgb(255,0,0);
    --blackColor:rgb(24, 24, 24);
    --grayColor:lightgray;  
    --greenGrayColor:rgb(61, 72, 73); 

    --bodyPadding:50px;
    --minipadding:10px;

    --headerSize: clamp(15px,10vw,80px);
}

.redColor{
    color: var(--redColor);
}

.blackColor{
    color: var(--blackColor);
}

.greenGrayColor{
    color: var(--greenGrayColor);
}

.dsp_none{
    display: none;
}

.btn{
    display: inline-block;
    margin-top: var(--bodyPadding);
    padding: var(--minipadding) calc(var(--minipadding) * 2);
    cursor: pointer;
    background: var(--greenGrayColor);
    color: var(--grayColor); 
    font-size: clamp(15px,3vw,18px);  
    text-decoration: none;
    border: solid  var(--greenGrayColor) 2px;
}

.btn:hover{
    background-color: rgba(0,0,0,0.1);
    color: var(--greenGrayColor);
}

.btn:focus{   
    background: var(--greenGrayColor);
    color:var(--grayColor);   
}

body{
    background: var(--grayColor);
    color: var(--grayColor);
    font-family: Principal;
    font-size:clamp(18px,4vw,20px);   
    line-height: 1.5;
}

.jumbotron{
    min-height: calc(100vh - 120px);
}

.principalHeader{
    background-color: var(--greenGrayColor);
    color: var(--grayColor);
    padding: var(--bodyPadding);
    text-align: center;
}

.principalHeader>h2{
  
    font-family: Secundary;
    font-size: var(--headerSize);
    margin-bottom: var(--minipadding);
}

.principalHeader_btn{
    margin-top: var(--minipadding);
    display: inline-block;
    text-decoration: none;
    color: var(--grayColor);
    padding: var(--minipadding);
    border: var(--grayColor) 2px solid;
    transition: background .1s ease-in-out;
    font-size: normal;
}

.principalHeader_btn:hover{
    background: var(--grayColor);
    color: var(--greenGrayColor);
}

.containerText{
    max-width: 1000px;
    margin: auto;
    padding: var(--bodyPadding);
    background-color: var(--grayColor);
    color: var(--greenGrayColor);
}

.containerText>p{
    padding-block: var(--minipadding);    
}

.section-container{
    padding: var(--bodyPadding);
    color: var(--greenGrayColor);
    display: flex;
    justify-content: space-between;    
    gap: var(--bodyPadding); 
    flex-wrap: wrap;  
}

.section-container:nth-child(odd){
    background-color: var(--greenGrayColor);
    color: var(--grayColor);
}

.section-container-portada,
.section-container-aux{
    flex: 1;
    flex-basis: 300px;
}


.section-container-iframeDj{
    flex: 2;
    flex-basis: 300px;
}

.section-container-iframeDj{
    display: flex;
    flex-direction: column;
    justify-content: space-around;  
}

.section-container-iframeDj>*{
    padding-bottom: var(--minipadding);
}

.section-container-iframeDj h2{
    text-align: center;
}

.section-container-iframeDj  ul{
    display: flex;
    justify-content: center;
    gap: var(--minipadding);
}

.section-container-iframeDj  ul li{
    list-style: none;
}

.section-container-iframeDj ul li a{
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.section-container-iframeDj ul li a:hover{
    transform: scale(1.1);
}

.section-container-iframeDj ul li a img{
    height: 30px;
    aspect-ratio: 1/1;
}

.section-container-aux{
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.section-container-aux  h2{
    padding-bottom: calc(var(--minipadding) * 2);
}

.section-container-aux img{
    max-height: 250px;
    object-fit: contain;
}

.emojiTag{
    display: block;
    height: 150px;
    object-fit: contain;
}

.section-container .section-container-portada{
    display: flex;    
}

.section-container-portada h2{
    color: var(--redColor);
    transform: rotate(180deg);
    writing-mode: vertical-lr;
    text-align: center;
    padding-left: var(--minipadding);
}

.section-container-portada   figure{
    background-color: var(--blackColor);
    color: var(--grayColor);
    width: 100%;
}

.section-container-portada figcaption{
    padding: var(--minipadding);
}

.section-container-portada img{
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
}

.section-container-portada-baner{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--grayColor);
    background: var(--grayColor);
}

.section-container-portada-baner img{
    height: auto;
}


.section-container-portada-baner a{
    display: block;
    padding: var(--minipadding);
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footerPrincipal{
    padding: var(--bodyPadding);
    background-color: var(--greenGrayColor);
    color: var(--grayColor);
}

.footerPrincipalBox{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    justify-content: center;
}

.footerPrincipal>h2{
    padding-bottom: var(--minipadding);
    font-family: Neuro;
}

.footerPrincipalBox_nav>a,
.footerPrincipal>h3>a{
    display: block;
    text-decoration: none;
    color: var(--grayColor);
    text-align: center;
    padding: var(--minipadding);
}

.footerPrincipalBox_nav>a:hover{
    text-decoration: underline;
}


@media (max-width:900px) {
    :root{
        --bodyPadding:10px;
    } 

    body{
        margin-bottom: 100px;
    }

    .section-container,
    .section-container .section-container-portada{
        display: block;
    }

    .section-container-portada figure{
        max-width: 100%;
        border: solid;
    }

    .section-container-portada figure,
    .section-container-iframeDj{
        margin-bottom: var(--minipadding);
    }

    .section-container .section-container-portada h2{           
        transform: rotate(0deg);
        writing-mode: horizontal-tb;
        text-align: center;
        padding: var(--minipadding);  
    }

    .section-container-portada img{
        width: 100%;
        aspect-ratio: 2/1;
    }
    .section-container-iframeDj {
        padding: 0;
    } 

    .section-container-portada-baner{
        overflow-y: visible;
        display: block;
        width: 100%;  
        min-height: auto;      
    }

    .section-container-portada-baner img{
        display: block;
        height: auto;
        overflow-y: auto;
        object-fit: contain;
        aspect-ratio: auto;        
    };

    .footerPrincipal{
        display: block;
    }

    .footerPrincipalBox{
        display: block;
    }

    .footerPrincipalBox_nav>a{
        text-align: left;
        display: block;
    }
}