:root {
    --color-background: #130e30;
    --color-surface: #130e30;
    --color-surface-dim: #130e30;
    --color-surface-container-lowest: #0e082b;
    --color-surface-container-low: #1b1739;
    --color-surface-container: #201b3d;
    --color-surface-container-high: #2a2548;
    --color-surface-container-highest: #353053;
    --color-surface-bright: #3a3558;
    --color-on-surface: #e5deff;
    --color-on-surface-variant: #e5bcc4;
    --color-primary: #ffb1c3;
    --color-primary-container: #ff4b89;
    --color-on-primary: #66002c;
    --color-secondary: #a5e7ff;
    --color-secondary-container: #00d2ff;
    --color-on-secondary: #003543;
    --color-tertiary: #f1c100;
    --color-on-tertiary: #3d2f00;
    --color-tertiary-container: #d0a600;
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-display: "Syne", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-title: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
}
@font-face {
  font-family: 'textos';
  src: url('fonts/Gilroy-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'titulos';
  src: url('fonts/Gilroy-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body, html{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    color: var(--color-on-surface);
    font-family: 'textos', sans-serif;
}
span{
    font-family: 'textos', sans-serif;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'titulos', sans-serif;
    width: 100%;
}
a {
    text-decoration: none;
}
& form{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    
    & label{

        width: 100%;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;

    }

    & h1,
    & h2,
    & h3,
    & p {
            width: 100%;
        }

    & input[type=text],
    & input[type=email]{
        width: 100%;
        height: 30px;

    }
    & input[type=number],
    & input[type=date],
    & input[type=number],
    & input[type=submit],
    & select{
        width: 100%;
        height: 30px;

    }
    & input[type=submit]{
        margin:100px ;
        border-radius: 5px;
        height: 30px;
        background: var(--color-tertiary);
        border: solid 1px var(--color-tertiary-container);
        color:#eef6ff;

    }

    & textarea{
        width: 100%;
        height: 200px;
        border-radius: 10px;

    } 

}
& table , tr , td,th {
    border-collapse: collapse;                   
}
tr:nth-child(even){background-color:var(--color-surface-bright);}
.contenedor{ 
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: var(--color-background);
    align-items: start;
    justify-content: center;
}
header{
    width: 100%;
    height: 70px;
    justify-content: space-between;
    position: fixed;
    display: flex;
    align-items: center;
    background: var(--color-on-secondary);
    z-index: 3;
    
    
    & .icono{
        display: flex;
        width: 10%;
        justify-content: space-around;
        align-items: center;
        img{
            width: 50px ;
            padding: 5px;
            margin: 5px;
        }
    }
    & .enlaces{
        display: flex;
        width: 90%;
        justify-content: space-around;
        align-items: center;
        & a{
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--color-tertiary);
            margin: 5px;
            padding: 5px;
        }
        .album{
            display: none;
        }
    }
}
main {
    margin-top: 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: start;
    width: 100%;

    & .baner{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        background: var(--color-surface);
        
        & .compuestosbaner{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            margin: 10px; 
            padding: 10px; 
            
            & .textoafiche{
                display: flex;
                flex-wrap: wrap;
                width: 45%;
                margin: 10px; 
                padding: 10px;
               
                & h2{
                    font-size: 35px;
                }
                & p {
                        width: 100%;
                        padding: 10px;
                        text-align: justify;
                }
               
            }
            & .afiche{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                width: 35%;
                padding: 10px;
                background: var(--color-on-surface);
                
                .vistaafiche{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    background-image: url(../img/banerresponsive3.png);
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size:cover; 
                    align-content: space-between;
                    position: relative;
                    width: 90%;
                    padding: 10px;
                    
                    & .logopaola{  
                        width: 100%;
                        position: absolute;
                        top: 0;

                        & img{
                            width: 50px;
                        }    
                    }
                    
                    & .infobaner{  
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background: rgba(0, 0, 0, 0.8);
                        position: absolute;
                        flex-wrap: wrap;
                        bottom: 0;

                        & article {
                            display: flex;
                            flex-wrap: wrap;
                            width: 100%;
                            color: var(--color-surface);
                            padding: 5px;
                            margin: 5px;
                            border-radius: 3px;
                            font-size: 12px;

                            & span{
                                width:100%;
                            }

                            & .t1{
                                color: var(--color-secondary-container);
                                font-family: var(--font-family-base);
                            }
                            & .nom{
                                color: var(--color-on-surface);
                                font-family: var();
                            }
                            & .autor{
                                color: var(--color-primary);
                                font-family: var();
                                & a{
                                    color: var(--color-tertiary);
                                }
                            }
                        }
                    }
                    
                }

                
            }
        }
    }
               
}

.albumnescarrera{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
     & h1{
        width: 100%;
        text-align: center;
     }
  
    .btnimag{
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        z-index: 1;
        justify-content: center;
        flex-wrap: wrap;
        color:rgb(255,255,255);
       
            & .cuadrotext{
                width: 300px;
                height:300px;
                margin: 10px;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
                filter: grayscale(80%);
                justify-content: center;
                align-content: center;
                display: flex;
                flex-wrap: wrap;

                & span {
                    width: 100%;
                    border-radius: 3px;
                
                }
                .dia{
                    font-size: 20px;
                    color:var(--color-on-surface-variant);
                    background: #050505be;
                    width: 100%;
                }
                .num{
                    font-size: 35px;
                    color:var(--color-on-surface);
                    background:#050505be;
                }
                .mes{
                    font-size: 15px;
                    color: var(--color-primary);
                    background:#050505be;
                }
            
            
            }
            & .cuadrotext:hover{
                filter: grayscale(0%);
            }
            .btnvermas{
                width: 170px;
                height: 170px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 100px;
                color:rgb(217, 97, 24);
            }
        
    }
   
}

 footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width:100% ;
    height: 10%;
    background: var(--color-background);

    & p{
        width:70% ;
        text-align: center;
    }
 }   

/* @import url("header.css?v=0");
@import url("main.css?v=0");
@import url("footer.css?v=0");
@import url("selectores.css?v=0"); */
@media screen and (max-width: 863px)  {
        header{
            & .enlaces{
                
                & a{
                  
                }
                .album{
                    display: flex;
                }
            }
            
        }
        main {

            & .baner{
                width: 100%;
                height:auto;
        
                & .compuestosbaner{
                    flex-direction:row-reverse;
                    display: flex;
                    flex-wrap: wrap-reverse;
                
                    
                    & .textoafiche{
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        margin: 10px; 
                        padding: 10px;

                        & h2{
                            font-size: 20px;
                        }
                        & p {
                            width: 100%;
                            padding: 10px;
                            text-align: justify;
                            overflow-y: scroll;
                        }
                        

                    }
                    & .afiche{
                        width: 100%;
                        height: 600px;
                        
                        & .vistaafiche{
                            width: 100%;
                            
                            & .infobaner{  
                                width: 100%;
                            }
                            
                        }

                        
                    }
                }
            }
            .albumnescarrera{
               
                & h1{
                   
                }
            
                .btnimag{
                  

                        & .cuadrotext{
                            width: 90%;
                            height:250px;
                            & span {
                               
                            
                            }
                            .dia{
                                
                            }
                            .num{
                              
                            }
                            .mes{
                               
                            }
                        
                        
                        }
                        & .cuadrotext:hover{
                            
                        }
                        .btnvermas{
                           
                        }
                    
                }
            
            }
  
    }
}