/* IMPORTANTE: 
    Por ahora no hay web pública. Sólo se va a mostrar el logo centrado, así que vamos a utilizar una única hoja de estilo simplificada para todos los ámbitos 
*/

/* En este diseño, los contenedores se expandirán al ancho máximo de la pantalla, pero el contenido principal estará centrado a un máximo de 1300 píxeles de ancho.
   Basándonos en las estadísticas de visitas, que tiene un perfil de visitantes parecido a esta web, vamos a probar esta maquetación hasta una resolución
   mínima de 360 píxeles de ancho.
*/

/*
Usar por defecto el modelo de caja "border-box". Es decir, que en el ancho de un elemento ya esté incluido el padding y el borde.
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/

:root {
    --clFondoPagina: #FFF;
    --clLetra: #0C4E6C;
    --letraM: 1rem;
}

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

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Elementos genéricos                                                                                                                           */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
body {
    background-color: var(--clFondoPagina);
    color: var(--clLetra);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--letraM); 
    font-style: normal;
    font-weight: 400;
    overflow-wrap: anywhere; /* para "romper" palabras anormalmente largas en resoluciones pequeñas, por ejemplo, urls incluidas en los textos */
    text-align: start;
}

/* Div que ocupa toda la altura de la pantalla en la que mostramos el logo centrado */
.noLayout {
    display:grid;
    place-items:center;
    inline-size:100%;
    block-size:100vh;
    min-block-size: 100vh;
}