/* *Definición de las variables */
:root {
    --background-color: #DCEBFF;
    --header-color: rgb(125, 195, 255);
    --letter-color: #007de7;
}

/* *Reseteando las configuraciones por defecto de html */
* {
   /* border: 1px solid #000; */
   margin: 0;
   padding: 0;
   box-sizing: border-box; /* *para que se comporte como una caja */
}

/* *Configuración del body */
body {
    /* border: 1px solid #000; */
    background-color: var(--background-color);
}

/* ?Configuración del encabezado de la página web */

/* *Configuración del contenedor de la imagen */
.header__image-container {
    max-width: 36px;
    overflow: hidden;
    padding: 5px 0px 0px 5px;
}

/* *Configuración de la imagen */
.header__image {
    object-fit: cover;
    width: 100%;

}

/* *Configuración del header o encabezado para la imagen y las opciones */
.header {
    /* background-color: var(--header-color); */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

/* *Configuración para desaparecer el input - checkbox */
.header__open-menu {
    display: none;
}

/* *Configuración para colocar el elemento de menú en la parte derecha */
.header__logo-open-menu {
    position: absolute; /* *Con esta instrucción podemos mover el elemento en todas las posiciones */
    right: 10px;
    font-size: 3rem;
    
}

/* *Configuración para borrar las viñetas de cada opción */
.header__item {
    list-style: none;
}

/* *Configuración para que el color de la letra no sea azul o por defecto */
.header__link {
    text-decoration: none;
    color:black;
}

/* *Configuración cuando se coloca el cursor encima de cada opción */
.header__link:hover {
    color: var(--letter-color);
    text-decoration: underline;
    transition: .7s;
}

/* *Configuración para que cuando el input este chekeado o seleccionado aparezcan las opciones */
.header__open-menu:checked ~ .header__navigation {
    display: flex;
}

/* *Configuración para desaparecer la barra de opciones */
.header__navigation {
    /* background-color: var(--header-color); */
    display: none;
    position: absolute;
    z-index: -1;

}
/* *Configuración de la lista de opciones */
.header__list{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: auto;
}


/* ?Configuración para modo escritorio  */

/* *Configuración para cuando la interfaz supera los 750px */
@media screen and (width >= 600px){

    /* *Configuración para fijar la barra de navegación, cuando se scrollea */
    .header {
        position: sticky;
    }

    /* *Configuración para la lista de opciones */
    .header__list {
        display: flex;
        flex-direction: row;
        height: auto;
        width: auto;
        gap: 10px;
        margin-right: 10px;
    }

    /* *Configuración para la barra de navegación */
    .header__navigation {
        display: block;
        position: static;
        justify-content: end;
        height: auto;
        width: auto;
        margin-top: 10px;
    }

    /* *Configuración para desactivar el elemento de menú */
    .header__logo-open-menu{
        display: none;
    }
}


  /* *Configuración del contenido principal  */
  main {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }
  


 /* ?Configuración de INICIO */
    /* *Configuración de la sección de inicio */
    .home {
        overflow: hidden;
        max-height: 100vh;
    }


/* *Configuración para la imagen de fondo */
.home__container {
    /* background-image: url('background.jpg'); */
    height: 90vh;
    background-size: cover;
    object-fit: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* *Configuración del título de inicio */
.home__title{
    font-size: 2.5rem;
    color:  var(--header-color);
    text-align: center;
}

/* *Configuración de la descripción del inicio */
.home__description {
    color: aliceblue;
    text-align: center;
    font-size: 1.2rem;
}

/* *Configuración del botón de ver Programas */
.home__link{
    background-color: var(--letter-color);
    padding: 10px;
    border-radius: 10px;
    color: aliceblue;
    text-decoration: none;
    max-width: 200px;
}

/* *Configuración del contenedor de la descripción de inicio (home) */
.home__description-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* ?Configuración de los valores de la institución */
.institution {
    margin-top: 80px;
}

/* *Configuración de clase envolvedora */
.institution__wrapper {
    /* border: 1px solid #007de7; */
    max-width: 1200px;
    margin: auto;
    padding: 30px;
}

/* *Configuración del encabezado de los valores de la institución */
.institution__header {
    text-align: center;
}

/* *Configuración del título */
.institution__title {
    font-size: 2.4rem;
    margin-bottom: 10px;
}

/* *Configuración de la descripción */
.institution__description {
    font-size: 1.2rem;
}

/* *Configuración de todas las tarjetas */
.institution__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 20px;
}

/* *Configuración de cada tarjeta */
.institution__card {
    border: 1px solid dimgray;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    margin-bottom: 10px;
    height: 20vh;
}

/* ?Configuración de Programas */
/* *Configuración de la sesión de programas */
.program {
    /* background-color: var(--header-color); */
}

/* *Configuración de clase envolvedora */
.program__wrapper {
    /* border: 1px solid #007de7; */
    max-width: 1200px;
    margin: auto;
    padding: 30px;
}

/* *Configuración del encabezado de los programas */
.program__header {
    text-align: center;
}

/* *Configuración del título */
.program__title {
    font-size: 2.4rem;
    margin-bottom: 10px;
}

/* *Configuración de la descripción */
.program__description {
    font-size: 1.2rem;
}

/* *Configuración de la lista de programas */
.program__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 30px;
}




/* *Configuración de cada programa */
.program__item {
    border: 1px solid dimgrey;
    border-radius: 10px;
}

/* *Configuración del contenedor de la imagen */
.program__image-container{
    overflow: hidden;
    height: 40vh;
    border-radius: 10px 10px 0 0;
}

/* *Configuración de la imagen */
.program__item-image{
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* *Configuración para cuando coloco el cursor, haga el efecto de acercar la imagen */
.program__item-image:hover {
    transform: scale(1.2);
    transition: 1s;
}

/* *Configuración del título de cada programa */
.program__item-title {
    text-align: center;
    margin: 10px 0 10px 0;
    text-decoration: none;
}

/* *Configuración de la descripción de cada programa */
.program__item-description {
    text-align: center;
    margin-bottom: 10px;
    text-decoration: none;
}


/* ?Configuración de la Galería */

/* *Configuración de clase envolvedora */
.gallery__wrapper {
    /* border: 1px solid #007de7; */
    max-width: 1200px;
    margin: auto;
    padding: 30px;
}

/* *Configuración del encabezado de los programas */
.gallery__header {
    text-align: center;
}

/* *Configuración del título */
.gallery__title {
    font-size: 2.4rem;
    margin-bottom: 10px;
}

/* *Configuración de la descripción */
.gallery__description {
    font-size: 1.2rem;
}

/* *Configuración de la galería */
.gallery__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 30px;
}


/* *Configuración de cada fotografía */
.gallery__item {
    border: 1px solid dimgrey;
    border-radius: 10px;
     overflow: hidden;
    height: 40vh;
}

/* *Configuración de la imagen */
.gallery__item-image{
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* *Configuración de cada fotografía */
.gallery__item:hover {
    transform: translateY(-4px);
    transition: 1s;
}

/* ?Configuración del pie de Página */
.footer {
    /* background-color: var(--header-color); */
}

/* *Configuración de clase envolvedora */
.footer__wrapper {
    /* border: 1px solid #007de7; */
    max-width: 1200px;
    margin: auto;
    padding: 30px;
}

/* *Cobfiguración de la lista de opciones del pie de página */
.footer__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;

}

/* *Configuración de cada columna */
.footer__column{
    /* border: 1px solid var(--letter-color); */
    text-align: center;
    padding: 10px 0 10px 0;   
}

/* *Configuración del icono de Edutécnica */
.footer__image-container {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* *Configuración de los íconos */
.footer__social-link {
    font-size: 1.5rem;
}

/* *Cofiguración de la caja contenedora de los íconos */
.footer__social {
    margin-top: 10px;
}

/* *Configuración de los contactos */
.footer__contact {
    margin-top: 10px;
}