@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

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

#botomPromo{
    width: 190px;
    border-radius: 100px;
    position: relative;
    left: 0;
    padding: 10px;
}

#btmPromo {
    border: none;
    border-radius: 100px;
    animation: cambiarColor 1s infinite, parpadear 0.5s infinite;
    cursor: pointer;
    position: relative;
    top: 80px;
}

#horario {
    width: 97%;
    height: 98%;
    border-radius: 14px;
}

@keyframes cambiarColor { 
    0% { background-color: #b5d3de; } 
    25% { background-color: #e2b5ce; } 
    50% { background-color: #ffffff3d; } 
    75% { background-color: #e2b5ce; } 
    100% { background-color: #b5d3de; }
}    

#promos {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    display: none;
}

.anunciosGalery {
    display: flex;
    z-index: 1;
    background: black;
    height: 600px;
    width: 830px;
    border: black;
    box-shadow: 8px 11px 24px 8px black;
}

.imgAG {
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}

.imgAG:hover {
    cursor: crosshair;
    width: 300px;
    opacity: 1;
    filter: contrast(120%);

}

#popUP-aniver{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.card {
    background-image: linear-gradient(yellow, blue, red);
    width: 60%;
    height: 80%;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#info{
    height: 314px;
    width: 239px;
    justify-content: center;
    border-radius: 264px;
    position: absolute;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(357deg, #012070, #ffffff);
    right: 12%;
    top: 20%;
}

.hh{
    font-family: "Merriweather", serif;
    color: black;
    font-size: 30px;
}

.hh, .h, .pp{
    text-align: center;
}

.pp{
    color: white;
    font-size: 15px;
}

.body-card{
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 98%;
    height: 98%;
    border-radius: 20px;
    display: flex;
}

#imganiv{
    width: 90%;
    border-radius: 30px;
}

.cerraraniv {
    color: white;
    top: 65px;
    right: 305px;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 23px;
    padding: 0px;
    font-size: 27px;
    background-color: #393737;
    border: none;
    cursor: pointer;
    z-index: 2;
}

.cornerimg {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    height: 100%;
    position: absolute;
    z-index: -10;
}

#cimg {
    width: 60%;
    -webkit-mask-image: linear-gradient(270deg, black 50%, #ffffff00);
}

body {
    background-image: linear-gradient(319deg, #2a3441, #ffffff);
}

html{
    height: 100%;
}

body {
    min-height: 100%;
}

.grid-container > * {
 /*   box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75); */
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

#s1{
    grid-area: s1;
}

#s2{
    grid-area: s2;
}


#s3{
    grid-area: s3;
}

#s4{
    grid-area: s4;
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px;
    background-image: linear-gradient(1deg, #000000 40% , transparent);
    box-shadow: -1px 1px 7px 0px rgb(0 0 0 / 75%);
}

#s5{
    grid-area: s5;
    /*box-shadow: -1px 1px 7px 0px rgb(0 0 0 / 75%); */
    /* padding: 93px; */
    margin-right: 10px;
}

#s6{
    grid-area: s6;
}


.grid-container {
    min-height: 100vh;
    display: grid;
    gap: 10px;
    grid-template-areas: 
    "s1"
    "s2"
    "s3"
    "s4"
    "s5"
    "s6";
} 

.grid-container{
    grid-template:
    "s1  s1  s1" 80px
    "s2  s3  s5" 45%
    "s4  s4  s5" auto
    "s6  s6  s6" 7% /
    50%  auto 30%   ;
}

#s4 {
    display: flex;
    gap: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#s6{
    gap: 25%;
    display: flex;
}

#img-bgc, #img-bgc {
    border-radius: 150px;
    width: 90%;
    height: 90%;
}

#img-bf, #img-bi{
    width: 30px;
    height: 30px;
}

#img-cintillo {
	background-color: white;
    width: 100%;
    height: 100%;

}

#logo {
	margin-top: 30px;
    width: 80%;
    /* height: 100%; */
    display: flex;
}

.logo {
    display: flex;
    justify-content: center;
}

.boton-gacetaCertificada, .boton-busquedaGaceta {

    background-image: linear-gradient(45deg, yellow, blue, red);
    cursor: pointer;
    border: none;
    padding: 0%;
    position: relative;
    border-radius: 20px;
    width: 150px;
    height: 150px;
    border-radius: 130px;
}

.boton-busquedaGaceta:hover{
    background: #ffffff47;
}

.boton-gacetaCertificada:hover{
    background: #ffffff47;
}


.boton-busquedaGaceta::before, .boton-gacetaCertificada::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    background: linear-gradient( 45deg, yellow, blue, red);
    background-size: 800%;
    border-radius: 130px;
    animation: glowing 20s linear infinite;
}

@keyframes glowing {
 0% {
    background-position: 0 0;
 }
 50% {
    background-position: 400% 0;
 }
 100% {
    background-position: 0 0;
 }
}

#direccion{
    background: #000000a1;
    align-content: center;
    color: white;
    font-size: 70%;
    border-radius: 5px;
    padding: 3px;
}

#ambosBotones{
    display: flex;
    gap: 130px;
    position: relative;
    top: 0;
    left: 0;
}

#letras-boton1, #letras-boton2 {
    color: white;
    margin-right: 16px;
    font-family: "Bungee", sans-serif;
    font-weight: 300;
    font-style: normal;
    margin-top: 5px;
}


/*redes y direccion*/

.boton-facebook, .boton-instagram{
    border-radius: 20px;
    background: none;
    cursor: pointer;
}


    /*Menù lateral*/
    /*---------------------*/

    #item5{
        font-family: "Bungee", sans-serif;
    display: block;
    padding: 10px;
    background-color: #1f1f1f;
    cursor: pointer;
    border-radius: 15px;
    margin: 4px 2px;
    border: none;
    color: white;
    min-width: -webkit-fill-available;
    }

    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f4f4f4;
    }
    
    .sidebar {
        width: 270px;
        height: 100vh;
        background-color: #333;
        color: #fff;
        padding: 15px;
        position: fixed;
    }
    
    .sidebar h2 {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .sidebar ul {
        display: grid;
        gap: 10px;
        list-style: none;
        padding: 0;
    }
    
    .sidebar ul li {
        margin-bottom: 20px;
    }
    
    .sidebar ul li label {
        align-items: center;
        justify-content: center;
        height: 70px;
        display: flex;
        padding: 10px;
        background-image: linear-gradient(91deg, #333333 1%, #444, #444, #444, #444, #444, #444, #444, #444, #444, #444, #444, #444);
        cursor: pointer;
        border-bottom-right-radius: 15px;
        border-top-right-radius: 15px;
        margin: 4px 2px;    }
    
    .sidebar ul li input[type="radio"] {
        display: none;
    }
    
    .sidebar ul li input[type="radio"]:checked ~ .submenu {
        display: block;
    }
    
    .sidebar ul li .submenu {
        display: none;
        list-style: none;
        padding-left: 20px;
    }
    
    .sidebar ul li .submenu li {
        margin-bottom: 10px;
    }
    
    .sidebar ul li .submenu li a {
        color: #fff;
        text-decoration: none;
        padding: 10px;
        display: block;
        background-color: #a9a9a999;
    }
    
    .sidebar ul li .submenu li a:hover {
        background-color: #666;

    }
    
    /*---------------------*/
    #label-menu{
        cursor: pointer;
        font-family: "Bungee", sans-serif;
        font-weight: 300;
        font-style: normal;
        margin-top: 5px;    
        background-color: white;
        padding: 30px;
        position: relative;
        border-bottom-right-radius: 100px;
        border-top-right-radius: 100px;
    }

    #label-menu:hover{
        background-color: #ffffff1c;
        color: white;
    }

    .menu{
        align-items: center;
        display: flex;
    }

    .iconMenu{
        width: 20px;
        position: relative;
        left: -10px;
    }

	#btn-menu{
		display: none;
	}
	.container-menu{
        z-index: +1;
		position: absolute;
		background: rgba(0,0,0,0.5);
		width: 100%;
		height: 100vh;
		top: 0;left: 0;
		transition: all 500ms ease;
		opacity: 0;
		visibility: hidden;
	}
	#btn-menu:checked ~ .container-menu{
		opacity: 1;
		visibility: visible;
	}
	.cont-menu{
		width: 100%;
		max-width: 250px;
		background: #1c1c1c;
		height: 100vh;
		position: relative;
		transition: all 500ms ease;
		transform: translateX(-100%);
	}
	#btn-menu:checked ~ .container-menu .cont-menu{
		transform: translateX(0%);
	}
	.cont-menu nav{
		transform: translateY(15%);
	}
	.cont-menu nav a{
		display: block;
		text-decoration: none;
		padding: 20px;
		color: #c7c7c7;
		border-left: 5px solid transparent;
		transition: all 400ms ease;
	}
	.cont-menu nav a:hover{
		border-left: 5px solid #c7c7c7;
		background: #1f1f1f;
	}
	.cont-menu label{
		position: absolute;
		right: 5px;
		top: 10px;
		color: #fff;
		cursor: pointer;
		font-size: 18px;
    }
    
    a{
        padding: 0px;
    }
    
    /*Fin de Menù lateral*/
    
    @media 
     (min-width:300px ) and 
     (max-width:600px) {
        html {
            height: -20px;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            background-repeat: no-repeat;
            }

            #ambosBotones {
                display: block;
                
                position: relative;
                top: 0;
                left: 0;
            }

            #letras-boton1, #letras-boton2 {
                color: white;
                margin-right: 16px;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: 300;
                font-style: normal;
                margin-top: 5px;
            }

            .contenedor-redes {
                display: flex;
                margin: 0;
                box-sizing: border-box;
                padding: 0;
            }

            #label-menu {
                cursor: pointer;
                font-family: "Bungee", sans-serif;
                font-weight: 300;
                font-style: normal;
                margin-top: 5px;
                background-color: white;
                padding: 30px;
                position: initial;
                border-radius: 70px;

            }

            .grid-container {
                grid-template:
                    "s1"
                    "s2"
                    "s4"
                    "s6";
            }


        #cimg{
            display: none;
        }

            #s4{
                display: flex;
                flex-direction: column-reverse;
                border-radius: 0;

            }

            #s3, #s5{
                display: none;
            }

            .boton-gacetaCertificada, .boton-busquedaGaceta {

                width: 90px;
                height: 90px;

            }

            #ambosBotones{
                display: flex;
                gap: 0;

            }

            /*popup aniversario*/
            .card {
                background-image: linear-gradient(yellow, blue, red);
                width: 94%;
                height: 40%;
                border-radius: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            #info {
                right: auto;
                height: 200px;
                width: 360px;
                justify-content: center;
                border-radius: 264px;
                position: absolute;
                display: flex;
                flex-direction: column;
                background-image: linear-gradient(357deg, #012070, #ffffff);
                bottom: 1%;
                top: auto;            
            }

            .cerraraniv {
                top: 165px;
            }


            /*POPUPS*/

            #antecedentes, #misionVision, #organigrama, #basesLegales, #contactenos {
                position: absolute;
                width: 380px;
            }

            #cerrarPopUp{
                z-index: +3;
            }

            .grid-antecedentes {
                grid-template:
                    "parrafo-antecedentes"
                    "parrafo-antecedentes"
                    "img1-antecedentes"
                    "img2-antecedentes";
            }
        
            #imagenAntecedentes{
                width: 100%;
            }
        
            .grid-misionVision {
                grid-template:
                    "mision"
                    "vision"
                    "valores";
            }
        
            .vision {
                padding-top: 10px;
                text-align: justify;
                padding-left: 0;
            }
        
            .valores {
                grid-area: valores;
                text-align: justify;
                padding-top: 10px;
                padding-left: 0;
                padding-right: 0;
            }
            .boton-direccionH, .boton-direccionD{
                background-color: white;
                cursor: pointer;
                border: none;
                padding: 0%;
                position: relative;
                border-radius: 20px;
                width: 150px;
                height: 150px;
                border-radius: 130px;
            }

            



            /*------------------------------------------------------------------------*/

        }
        
        /* esptilos del popup*/

        #cerrarPopUp{
            display: none;
            position: absolute;
            left: 90%;
            top: 10px;
            width: 50px;
            height: 50px;
            border-radius: 23px;
            padding: 0px;
            align-items: center;
            justify-content: center;
            color: white;
            font-family: inherit;
            font-size: 27px;
            background-color: #393737;
            border: none;
        }


        #antecedentes, #misionVision, #organigrama, #contactenos{
            padding-top: 10px;
            padding-right: 10px;
            padding-left: 10px;
            overflow-y: scroll;
            border-radius: 10px;
            background-image: linear-gradient(90deg, black , #15162aa8 80%, black);
            margin: 3%;
            width: 100%;
        }  
        
        #basesLegales {
            padding-top: 10px;
            padding-right: 10px;
            padding-left: 10px;
            overflow-y: scroll;
            border-radius: 10px;
            background-image: linear-gradient(90deg, #030016 ,white, #030016);
            margin: 3%;
            width: 100%;
        }

        h1 {
            color: snow;
            /*font-family:  "Bungee", sans-serif;*/
		text-shadow: 3px 3px 3px #ffffff80;
        }

        p{
            color: white;
            font-family: Arial;
        }

        /* ANTECEDENTES*/

        #antecedentes{
            display: none;
        }


.grid-antecedentes{
    min-width: 100%;
    min-height: 100%;
    display: grid;
    grid-template-areas: 
    "parrafo-antecedentes"
    "img1-antecedentes"
    "img2-antecedentes";
}

.parrafo-antecedentes{
    grid-area: parrafo-antecedentes;
}
.img1-antecedentes{
    grid-area: img1-antecedentes;
}
.img2-antecedentes{
    grid-area: img2-antecedentes;

}

.grid-antecedentes{
    grid-template: 
    "parrafo-antecedentes img1-antecedentes" 950px
    "parrafo-antecedentes img2-antecedentes" 50% /
    50%                    50%;
}

#texto-antecedentes{
    color: white;
    margin: 10px;
    
}

            
/*Misión Vision*/

#misionVision{
    display: none;
}

.grid-misionVision {
    min-width: 100%;
    min-height: 100%;
    display: grid;
    grid-template-areas: 
    "mision"
    "vision"
    "valores";
}

.mision{
    grid-area: mision;
    text-align: justify;
}
.vision{
    grid-area: vision;
    padding-left: 40px;
    text-align: justify;
}
.valores{
    grid-area: valores;
    text-align: justify;
    padding-left: 40px;
    padding-right: 40px;
}

#tvalores{
    text-align: center;
}

.grid-misionVision{
    grid-template: 
    "mision vision" 30%
    "valores valores" auto/
      50%      50%;
}

#parrafo-mv{
    font-size: 17.5px;
    font-family: Arial, Helvetica, sans-serif;
}

/*Bases Legales*/

#basesLegales {
    display: none;

}

/*organigrama */

#organigrama{
    display: none;
}

/*CONTACTENOS*/
#contactenos{
    display: none;
}

.grid-contactenos{
    gap: 20px;
    min-width: 100%;
    min-height: 100%;
    display: grid;
    grid-template-areas: 
    "tit-direccion"
    "sede-admin"
    "area-produc"
    "directorio-admin"
    "directorio-produc"
    "direcHoyada"
    "direcDimase";
}

#tit-direccion{
    text-align: center;
    font-size: 20px;
    grid-area: tit-direccion;
}
#sede-admin{
    grid-area: sede-admin;
}
#area-produc{
    grid-area: area-produc;
}
#directorio-admin{
    grid-area: directorio-admin;
}
#directorio-produc{
    grid-area: directorio-produc;
}
#direcHoyada{
    grid-area: direcHoyada;
}
#direcDimase{
    grid-area: direcDimase;
}

.grid-contactenos{
    grid-template: 
    "tit-direccion     tit-direccion"      10%
    "sede-admin        area-produc"        auto
    "directorio-admin  directorio-produc"  auto
    "direcHoyada       direcDimase"        auto/
    50%                 50%;
}

.direccion{
    color: white;
    font-family:  "Bungee", sans-serif;
    text-align: justify;
}



/*BOTONES*/
.sidebar ul li .submenu{
    display: none;
    list-style: none;
    padding-left: 20px;
    border: 1px;
    padding: 10px 20px;
    background-color: #333333;
}
.boton-institucion{
    background-color: #444;
    cursor: pointer;
    padding: 10px;
    text-align: center;
    color: white;
    font-size: 20px;
    margin: 6px 2px;
    border-radius: 15px;
    width: 200px;
    border: none;
    box-shadow: 2px 3px 2px 0px black;
}
.boton-institucion:hover{
    background-color: #333333;
    border-radius: 15px;
    width: 200px;
}
.boton-gaceta{
    background-color: #444;
    margin: 10px;
    cursor: pointer;
    padding: 10px;
    text-align: center;
    color: white;
    font-size: 16px;
    margin: 4px 2px;
    border-radius: 15px;
    width: 200px;
}
.boton-gaceta:hover{
    background-color: #333333;
    border-radius: 15px;
    width: 200px;
}
.boton-pservicios{
    background-color: #444;
    margin: 10px;
    cursor: pointer;
    padding: 10px;
    text-align: center;
    color: white;
    font-size: 16px;
    margin: 4px 2px;
    border-radius: 15px;
    width: 200px;
}
.boton-pservicios:hover{
    background-color: #333333;
    border-radius: 15px;
    width: 200px
}




/*VALIDACION DEL CODIGO DE VERIFICACION*/

#cerrarVCV{
    position: absolute;
    top: 20%;
    width: 50px;
    height: 50px;
    border-radius: 23px;
    padding: 0;
    color: white;
    background-color: #393737;
    border: none;
    font-size: 27px;
    font-family: inherit;
}

#ValidacionCV{
    height: 100%;
    width: 100%;
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
}

.grid-ValidacionCV{

    background-image: url(./imagenes/imgback.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 70%;
    height: 50%;
    border-radius: 7%;
    display: grid;
    grid-template-areas: 
    "tituloVCV"
    "barraCDG"
    "btm-buscar";
}

#tituloVCV{
    border-radius: 10px;
    background-color: #fffafa82;
    grid-area: tituloVCV;
    box-shadow: 0px 12px #00000052;
}

#barraCDG{
    grid-area: barraCDG;
}

#btm-buscar{
    grid-area: btm-buscar;
}

.grid-ValidacionCV{
    grid-template: 
    "tituloVCV  tituloVCV" 90px
    "btm-buscar  barraCDG" auto/
    200px            auto;
}

#barraCDG, #btm-buscar{
    display: grid;
    align-items: center;
    justify-content: center;
}

#barraCDG{
    justify-content: start;
}

.barraBusqueda {
    padding: 12px;
    width: 650px;
    border-radius: 20px;
    border-block-color: inherit;
    background: snow;
    font-size: 25px;
}

#btmbuscar{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: none;

}

#ValidacionCV::before{
    background-color: snow;
}