/* con margin y paddin le quitamos todos los margenes a la web*/

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

html {
    scroll-behavior: smooth;
}

body { 
    background-color: #091c45;
    color: black;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;   
}


/* colores de la barra scroll bar */

    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: #eedb06;
    }

    ::-webkit-scrollbar-thumb {
        background: rgb(20, 139, 30);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgb(116, 204, 245);
    }

/*barra de scroll para firefox para html-->*/

html {
    overflow-y: scroll;
    scrollbar-color: #1ec715 #324582;
    scrollbar-width:thin;
}

/*fin de barra de scroll para firefox*/



  /*propiedades del boton inferior de subir q esta activado - "display: block;" 
la aparece*/
  .scroll-up-btn {
      position: fixed;
      display: block;
    height: 45px;
    width: 42px;
    background: rgb(3, 10, 26);
    right: 10px;
    bottom: 10px;
    text-align: center;
    line-height: 45px;
    color: #d31f1f;
    z-index: 9999;
    font-size: 30px;
    border-radius: 6px;
    border-bottom-width: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
/*transparencia del boton inferior de subir con opacity: .1; al .8; */
.scroll-up-btn.show {
    bottom: 30px; 
    background: #b1bddb;
    opacity: .5;   
    pointer-events: auto;
}

.scroll-up-btn:hover {
    filter: brightness(90%);
}

  /*fin propiedades del boton inferior de subir q esta activado*/
 

    
    /*INICIO DE LA GRID*/

.contenedor {
    width: 100%;         /* el ancho del contenedor*/
    max-width: 1110px;  /* y este es el ancho máximo puede variar*/
    margin: 0px auto;  /* margen arriba y abajo y "auto" para centrar la web*/
    display: grid;      /* esto formatea el gri*/
    grid-gap: 2px;         /* margen entre las columnas y filas*/
    grid-template-columns: repeat(4, 1fr); /* 3 columnas de un mismo tamaño*/
    grid-template-rows: repeat(10, auto);
    grid-template-areas: "header header header header"
                        "seoculta seoculta seoculta seoculta"
                        "mundocov mundocov mundocov mundocov"
                        "youtubee youtubee maqescrb maqescrb" 
                        "cardcngr cardcngr cardcngr cardcngr" 
                        "festival festival festival festival"
                        "marquesi marquesi marquesi marquesi"
                        "librosbi librosbi librosbi librosbi"
                         "contacto contacto contacto contacto"
                        "footer footer footer footer";
}
.contenedor > div,
.contenedor .header,
.contenedor .seoculta,
.contenedor .mundocov,
.contenedor .youtubee,
.contenedor .maqescrb,
.contenedor .cardcngr, 
.contenedor .festival,
.contenedor .marquesi,
.contenedor .librosbi
.contenedor .contacto,
.contenedor .footer {
    
    padding: 0px; /* alto del menu */
    border-radius: 4px;
    color: #fff;
}
 
/* MUNDO HEADER MENU SECCION */
.contenedor .header {  
    grid-area: header;  
    min-width: 100%;
}

/* Logo y texto del menu */
.max-width {
    max-width: 1300px;

/* espacio entre logo y menu */
    padding: 0  70px;  
    margin: auto;
} 

/* logo del escudo del Menu */
.logosma img{
    width: 7%;
    margin-top: -10px;
    margin-left: -50px;
}

/* logo central animado del congreso del Menu */
.logo img{
    width: 18rem;  
    margin-left: -10px;
}

/* logo central animado del congreso del Menu desplegable o hamburgesa */
.logoresp img {
    display: none;
    width: 100px;
    padding-top: 10px;
    margin-top: -15px;
    margin-bottom: -15px;
}


/* MENU  PROPIEDADES */
.navbar {
    left: 0;
    top: 0%;
}
/* SI CAMBIA POSITION A RELATIVE EL MENU QUEDA MOVIBLE NORMAL EN FIXED SE QUEDA PEGADO ARRIBA EN LA WEB */
.navbar {
    position: fixed;  
    width: 100%;
    z-index: 999;
    /* Padding Alto del Header Menu*/
    padding: 1px 0;  
    padding-top: 8px;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.3s ease;
    /* INICIO color cambiante  anidado a Keyframes para q funcione */
    background: linear-gradient(-45deg, #173b05, #7d7505, #124e64, #02600e);
    background-size: 400% 400%; 
    animation: change 14s ease-in-out infinite;
    /* FIN color cambiante anidado a "Keyframes" para q funcione, que esta al final antes de MEDIA QUERYS */
}


.navbar .max-width {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo a {
    color: rgb(222, 160, 99);
    font-size: 35px;
    font-weight: 600;
}

.navbar .logo a span {
    color: rgb(43, 220, 20);
    transition: all 0.3s ease;
} 
.navbar .menu li {
    list-style: none;
    display: inline-block;
    margin-left: -0px
    ;
}

.navbar .menu li a {
    /*propiedades del menu*/
    display: block;
    color: rgb(110, 184, 229);
    font-size: 1rem;
    margin-left: 15px; 
    transition: color 0.3s ease;
}

.navbar .menu li a:hover {
    color: rgb(241, 222, 117);
}
 

/* propiedades de la hamburguesa menu emergente */
.menu-btn {
    color: #bab838;
    font-size: 33px;
    cursor: pointer;
    display: none;
}
  
.contenedor .seoculta { 
    background-color:black;
    grid-area:seoculta;
    text-align: center;
    color: black;
    padding: 0;    
}
.seoculta .logcong img{
    width: 40%; 
}
.texn{
    text-align: center;
    font-size: 22px; 

padding-top:  100px;
}

/* MUNDO PORTADA VIDEO SECCION */
.contenedor .mundocov {
    grid-area: mundocov;
    color: rgb(9, 73, 48);
    text-align: center;
    
    /* INICIO color cambiante  anidado a Keyframes para q funcione */
    background: linear-gradient(-45deg, #4e4bf3, #f8d01e, hsl(233, 86%, 75%), #524bd7);
    background-size: 400% 400%;
    animation: change 10s ease-in-out infinite;
    /* FIN color cambiante anidado a "Keyframes" para q funcione, que esta al final antes de MEDIA QUERYS */
}
.mundocov img{ 
    width: 100%;
}

/* YOUTUBE - SECCION*/
.contenedor .youtubee { 
    grid-area: youtubee; 
    padding: 5px; 
    background-color: #030220;
    }   
/*hace responsive los videos de Youtube*/

.video {
    width: 100%;
    position: relative;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;

}

.video after {
    content: "";
    width: 100%;
    padding-bottom: 56.25%;


}

.esdacode_video {
    width: 100%;
    top: 0;

}

/* Fin de hacer que el video sea responsive*/


/* IMAGEN SECCION */
.contenedor .maqescrb { 
    grid-area: maqescrb; 

/* INICIO color cambiante  anidado a Keyframes para q funcione */
    background: linear-gradient(-45deg, #173b05, #302e0a, #0b3d4f, #0c4f15);
    background-size: 400% 400%;
    animation: change 14s ease-in-out infinite;
    /* FIN color cambiante anidado a "Keyframes" para q funcione, que esta al final antes de MEDIA QUERYS */

    }
.maqescrb img {
    border-radius: 20%;
    margin-top: 50px;
    width: 80%;
    animation: floatImage 4s ease-in-out infinite;
    
    }
    
    @keyframes floatImage {
        0% {
            transform: translateY(0);
        }
    
        50% {
            transform: translateY(-2.4rem);
        }
    
        100% {
            transform: translateY(0);
        }   }
/* SECCION CARD BANNERS*/
.contenedor .cardcngr { 
    grid-area: cardcngr;
    padding: 5px;
    text-align: center;
    /* INICIO color cambiante  anidado a Keyframes para q funcione */
        background: linear-gradient(-45deg, #173b05, #110857, #440850, #0c4f15);
        background-size: 400% 400%;
        animation: change 14s ease-in-out infinite;
        /* FIN color cambiante anidado a "Keyframes" para q funcione, que esta al final antes de MEDIA QUERYS */
}

.congre1 img{
    text-align: center;
}


.contenedor .festival {
    grid-area: festival; 
    padding: 5px;
    text-align: center;
    /* INICIO color cambiante  anidado a Keyframes para q funcione */
    background: linear-gradient(-45deg, #2a3403, #3f0738, #062241, #0c5e22);
    background-size: 400% 400%;
    animation: change 12s ease-in-out infinite;
    /* FIN color cambiante anidado a "Keyframes" para q funcione, que esta al final antes de MEDIA QUERYS */

}

.festiv1 img{ 
    width: 100%;
}

.festiv2 img {
    width: 100%;
}

/* MARQUESINA  SECCION */
.contenedor .marquesi{
    background: rgb(80, 54, 9);
    grid-area: marquesi;
    text-align: left;

}


/* LIBROS SECCION */
.contenedor .librosbi{
        grid-area: librosbi;
            text-align: center;
                color: #c5ee8c;
                font-size: 2em;
                /* INICIO color cambiante  anidado a Keyframes para q funcione */
                    background: linear-gradient(-45deg, #063b24, #0f2248, hsl(43, 81%, 12%), #333174);
                    background-size: 400% 400%;
                    animation: change 14s ease-in-out infinite;
                    /* FIN color cambiante anidado a "Keyframes" para q funcione, que esta al final antes de MEDIA QUERYS */
}

.libro {
    width: 100%;
    display: flex;
    /* Espacio emtre filas*/
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;

}

.libro__perfil {
    /* Altura del borde o card, La Altura de ajusta al contenido*/
    width: 210px;
    /* Espacio entre la foto y el borde o card */
    margin-top: 0;
    padding: 4px;
   
}

.libro__perfil:hover img {
    border: solid rgb(84, 64, 172) 4px;
    border-radius: 10px;
    /* la imagen se amplia al pasar mouse*/
}

img {
    width: 200px;


}

.libro img {

    border: solid rgb(168, 246, 85) 4px;
}

.libro__nombre {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*Estilos texto de los cards */
.tit1a {
    text-align: center;
    color: #847331;
    font-size: 1rem;
    font-style: oblique;
}

.tit1a:hover {
    background-color: rgb(205, 153, 50);
    color: #0e110a;
    border-radius: 5px;
}

/* CONTACTENOS Y MAPA */
.contenedor .contacto {
    grid-area: contacto;
    color: #dceda0;
    text-align: center;
    /* INICIO color cambiante  anidado a Keyframes para q funcione */
        background: linear-gradient(-45deg, #59350b, #162f60, hsl(140, 79%, 15%), #333174);
        background-size: 400% 400%;
        animation: change 14s ease-in-out infinite;
        /* FIN color cambiante anidado a "Keyframes" para q funcione, que esta al final antes de MEDIA QUERYS */

}


/* CONTACTO o FOOTERS SECCION */
.contenedor .footer {
        grid-area: footer;
    color: rgb(64, 203, 96);
    text-align: center;
   /* INICIO color cambiante  anidado a Keyframes para q funcione */
        background: linear-gradient(-45deg, #260503, #121b2e, hsl(143, 78%, 5%), #030220);
        background-size: 400% 400%;
        animation: change 14s ease-in-out infinite;
        /* FIN color cambiante anidado a "Keyframes" para q funcione, que esta al final antes de MEDIA QUERYS */
}


   /* "Keyframes" del color cambiante anidado a la animacion de Background arriba */

@keyframes change {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/*FIN DE LA GRID*/




/* RESPONSIVE (ADAPTABLE) MEDIA QUERYS */


   
@media screen and (max-width: 950px) {

 .contenedor {
 grid-template-areas:
"header header header header"
"seoculta seoculta seoculta seoculta"
"mundocov mundocov mundocov mundocov"
"youtubee youtubee youtubee youtubee"
"maqescrb maqescrb maqescrb maqescrb"
"cardcngr cardcngr cardcngr cardcngr"
"festival festival festival festival"
"marquesi marquesi marquesi marquesi"
"librosbi librosbi librosbi librosbi"
"contacto contacto contacto contacto"
 "footer footer footer footer";

}

    /* MENU EMERGENTE ADAPTABLE PROPIEDADES */
    .menu-btn {
        display: block;
        z-index: 999;
    }

    .menu-btn i.active:before {
        content: "\f00d";
    }

    .navbar .menu { 
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        background: rgb(50, 42, 79);
        text-align: center;
        padding-top: 40px;
        transition: all 0.3s ease;
        /*efecto de aparecer menu*/
    }

    .navbar .menu.active {
        left: 0;
    }

    .navbar .menu li {
        display: block;
    }

    .navbar .menu li a {
        /*Propiedades del menu emergente*/
        display: inline-block;
        margin: 10px 0;
        /*espacio entre links en el menu emergente*/
        font-size: 25px;
        /*tamaño de letras links en el menu emergente*/
    }

    .max-width {
        max-width: 930px;
    }.contenedor .seoculta { 
    grid-area: seoculta;
    padding: 0; 

}
.seoculta .logcong img {
    width: 85%;
}   

}


@media (max-width: 690px) {
    .max-width {
        padding: 0 23px;
    }

    
        /* logo del escudo del Menu */
        .logosma img {
            width: 12%;
            margin-left: -11px;
        }
    
        /* logo central animado del congreso del Menu */
        .logo img {
            width: 200px;
            margin-left: -20px;
        }

/* logo del Menu desplegable */
.logoresp img {
    display: block;
    width: 250px;


}

.libro__perfil {
    /* Altura del borde o card, La Altura de ajusta al contenido*/
    width: 160px;
    /* Espacio entre la foto y el borde o card */
    margin-top: 0;
    padding: 4px;
}

img {
    width: 150px;


}


}