/* inicializacion para pagina */ 
  :root {
    --fuenteHeading: 'PT Sans', sans-serif;
    --fuenteParrafos: 'Open Sans', sans-serif;

    --primario: #003366;
    --primario_2: #f5f5f5;
    --secundario: #0070cd; /* Un color complementario */
    --gris: #e1e1e1;
    --blanco: #ffffff;
    --padding: 1rem; /* Espaciado general */
    --padding2: 2rem; /* Espaciado general */
    --border-radius: 10px; /* Esquinas redondeadas */

    
}
html {
    box-sizing: border-box;
    font-size: 62.5%; /* 1 rem = 10px   Es una práctica común para que 1rem = 10px*/    
}
*, *:before, *:after {
    box-sizing: inherit; /* Esto asegura que el padding y el border no afecten las dimensiones de los elementos. Es una buena práctica. */ 
}
body {
    font-family: var(--fuenteParrafos);
    font-size: 1.6rem;
    line-height: 2;
}
/* Reset adicional para estilos base */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--fuenteHeading);
}

h1{
    margin-top: 1rem;
    margin-bottom: 2rem;
}
p{
    margin: 0 0 1rem;
    font-size: 1.5rem;
};

/* Preparación para diseño responsivo movilles medianos */
@media (max-width: 768px) {
    html {
        font-size: 56.25%; /* 1 rem = 9px */
    }
}

/* Preparación para diseño responsivo tablet */
@media (max-width: 992px) {
    html {
        font-size: 50%; /* 1 rem = 8px */
    }
    .contendor-barra{
        h1{
            display: none;
        }
    }
}

/* Preparación para diseño responsivo movilles pequeños */
@media (max-width: 576px) {
    html {
        font-size: 50%; /* 1 rem = 8px */
        img{
            max-width: 5rem;
            height: auto;
        }
    }
    .contendor-barra{
        h1{
            display: none;
        }
    }

}

/* ############################################################################################*/
html, body {
    height: 100%;
    margin: 0.3rem;
    display: flex;
    flex-direction: column;
}

.container{
    display: grid;
    gap: 2rem;
    justify-content: center;
    text-align: center;
    height: auto;
    max-width: 100rem;
    margin: 0 auto;
    flex: 1;

    h2{
        font-family: var(--fuenteParrafos);
    }
}
.container_principal{
    padding: 4rem;
}
.container_img{
    display: grid;
    gap: 2rem;
    justify-content: center;
    text-align: center;
    height: auto;
    max-width: 100rem;
    margin: 0 auto; 
}

.img_log{
    margin-bottom: 0px;
    img{
        max-width: 40rem;
        height: auto;
        margin-bottom: 0px;;
    }
}

.header{
    padding: 5rem;
    background-color: var(--primario_2);
    color: rgb(110, 108, 108);
    border-radius: 10px;
    margin-bottom: 2rem;
}

.banner_booton{
    background-color: var(--primario_2);
    color: rgb(110, 108, 108);
    border-radius: 10px;   
    height: 6rem;

    .clase_booton{
        margin: 0 auto;
        padding: 1rem;
        button{
            padding: 1rem;
            background-color: var(--primario);
            color: white;
            border: none;
            border-radius: 10px;
            max-width: 30rem ;
            width: 30%;
            font-size: 1.5rem ;
            cursor: pointer;
        }
        button:hover{
            background-color: var(--secundario);
        }
    }
  
}

.footer{
    width: 100%;
    padding: 2rem; /* Ajusta según necesites */
    text-align: center;
    font-size: 0.9em;
    background-color: var(--primario);
    color: white;
    border-radius: 10px;
    font-size: 1.6rem;
}