/*comportamiento general de los elementos*/
:root {
    --color_whiteSmoke: #F5F5F5;
    --color_Giansboro: #DCDCDC;
    --color_LightSteelBlue: #B0C4DE;
    --color_CornflowerBlue: #6495ED;
    --color_SteelBlue: #4682B4;
    --color_Sienna: #A0522D;
    --color_Orchid: #BA55D3;
    --color_DarkOrange: #FF8C00;
    --color_Azul_Prusiano: #003153;
    --color_alerta:red;

    --azul: #1a5b8a;
    --gris-fondo: #f5f5f5;
    --naranja: #f7931e;
    --gris-texto: #333;
    
    /* Variables para header2 y footer2 */
    --azul-header: #093C8B;
    --azul-prusiano: #003153;
    --blanco: #ffffff;
    --grid-width: 1200px;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html,body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
}

h2 {
    text-align: center;
    font-size: 2.1em;
}

main {
    padding: 20px 10px;
    margin-bottom: 20px; /* Espacio adicional antes del footer */
}

/* Media Queries para dispositivos móviles */

/* Móviles pequeños - hasta 480px */
@media screen and (max-width: 480px) {
    h2 {
        font-size: 1.5em;
        padding: 10px 15px;
        margin: 10px 0;
    }

    main {
        padding: 15px 5px;
    }
}

/* Móviles medianos - 481px a 767px */
@media screen and (min-width: 481px) and (max-width: 767px) {
    h2 {
        font-size: 1.8em;
        padding: 15px;
        margin: 15px 0;
    }

    main {
        padding: 20px 10px;
    }
}

/* Tablets - 768px a 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    h2 {
        font-size: 2em;
    }

    main {
        padding: 25px 15px;
    }
}