@charset "UTF-8";
body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-image: none;
    background-size: contain;
    background-repeat: round;
    font-family: 'Roboto', sans-serif; /* Aplica la fuente Roboto al body */
}

h1 {
    line-height: 1.2;
    font-size: 7vw; 
    margin-top: 0;
    margin-bottom: 0;
    color: #103A66;
}

h1 > span[class="blueTitle"], .blueText {
    color: #0097DC;
}

h2 {
    color: #677286;
    font-size: 4vw;
    font-weight: 500;
}

h5 {
    margin-right: 100px;
}

h5 > span{
    font-size: 2.5vw;
}

.__NavMenu {
    background-color: #e6e6e6;
    padding: 20px 10vw 10px 0px;
    text-align: end;
    flex: 0 0 auto; /* Mantiene el header en su tamaño natural */
}

.__PageBody {
    flex: 1 0 auto; /* Permite que el cuerpo del contenido crezca */
    padding: 1rem;
    display: flex;
    /* flex-direction: column; */
    justify-content: center; /* Centra verticalmente el contenido */
    overflow: hidden; /* Añade scroll si el contenido excede el tamaño del contenedor */
}

.__PageFooter {
    flex: 0 0 auto; /* Mantiene el footer en su tamaño natural */
    background-color: #103A66;
    color: white;
    text-align: end;
}

div[class="col-span-12 w-webkit-fill-available __NavMenu"] > span {
    color: #103A66;
    font-size: 0.85vw;
}

.__leftContainer {
    margin-left: 10vw;
    margin-right: 5vw;
    height: min-content;
}

.btnInicioSesion {
    background: #F89846;
    text-decoration: none;
    padding: 10px 30px;
    color: white;
    font-size: 3vw;
}

.__logoContainer {
    min-height: 30%;
}

.align-center {
    align-content: center;
}

.items-center{
    align-items: center;
}
.col-span-1 { grid-column: span 1/span 1; }
.col-span-2 { grid-column: span 2/span 2; }
.col-span-3 { grid-column: span 3/span 3; }
.col-span-4 { grid-column: span 4/span 4; }
.col-span-5 { grid-column: span 5/span 5; }
.col-span-6 { grid-column: span 6/span 6; }
.col-span-7 { grid-column: span 7/span 7; }
.col-span-8 { grid-column: span 8/span 8; }
.col-span-9 { grid-column: span 9/span 9; }
.col-span-10 { grid-column: span 10/span 10; }
.col-span-11 { grid-column: span 11/span 11; }
.col-span-12 { grid-column: span 12/span 12; }

@media(max-width: 400px) {
    h1 {
        font-size: 3vw;
    }
    
    h2 {
        font-size: 1.5vw;
    }
    
    h5 > span{
        font-size: 1.1vw;
    }
    
    div[class="col-span-12 w-webkit-fill-available __NavMenu"] > span {
        font-size: 0.85vw;
    }
    
    .btnInicioSesion {
        font-size: 1.3vw;
    }
}

@media(min-width: 800px) {
    h1 {
        font-size: 3.5vw;
    }
    
    h2 {
        font-size: 2vw;
    }
    
    h5 > span{
        font-size: 1.3vw;
    }
    
    div[class="col-span-12 w-webkit-fill-available __NavMenu"] > span {
        font-size: 0.85vw;
    }
    
    .btnInicioSesion {
        font-size: 1.8vw;
    }
}

@media(min-width: 1200px) {
    .xl\:col-span-1 { grid-column: span 1/span 1; }
    .xl\:col-span-2 { grid-column: span 2/span 2; }
    .xl\:col-span-3 { grid-column: span 3/span 3; }
    .xl\:col-span-4 { grid-column: span 4/span 4; }
    .xl\:col-span-5 { grid-column: span 5/span 5; }
    .xl\:col-span-6 { grid-column: span 6/span 6; }
    .xl\:col-span-7 { grid-column: span 7/span 7; }
    .xl\:col-span-8 { grid-column: span 8/span 8; }
    .xl\:col-span-9 { grid-column: span 9/span 9; }
    .xl\:col-span-10 { grid-column: span 10/span 10; }
    .xl\:col-span-11 { grid-column: span 11/span 11; }
    .xl\:col-span-12 { grid-column: span 12/span 12; }
    .m-0{
        margin: 0;
    }
    h1 {
        font-size: 3vw;
    }
    
    h2 {
        font-size: 1.5vw;
    }
    
    h5 > span{
        font-size: 0.7vw;
    }
    
    div[class="col-span-12 w-webkit-fill-available __NavMenu"] > span {
        font-size: 0.85vw;
    }
    
    .btnInicioSesion {
        font-size: 0.85vw;
    }
    body {
        background-image: url("public/imagenes/pcf_mxt_landing_background.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }
}

@media(min-width: 1400px) {
    .xxl\:col-span-1 { grid-column: span 1/span 1; }
    .xxl\:col-span-2 { grid-column: span 2/span 2; }
    .xxl\:col-span-3 { grid-column: span 3/span 3; }
    .xxl\:col-span-4 { grid-column: span 4/span 4; }
    .xxl\:col-span-5 { grid-column: span 5/span 5; }
    .xxl\:col-span-6 { grid-column: span 6/span 6; }
    .xxl\:col-span-7 { grid-column: span 7/span 7; }
    .xxl\:col-span-8 { grid-column: span 8/span 8; }
    .xxl\:col-span-9 { grid-column: span 9/span 9; }
    .xxl\:col-span-10 { grid-column: span 10/span 10; }
    .xxl\:col-span-11 { grid-column: span 11/span 11; }
    .xxl\:col-span-12 { grid-column: span 12/span 12; }

    h1 {
        font-size: 3vw;
    }
    
    h2 {
        font-size: 1.5vw;
    }
    
    h5 > span{
        font-size: 0.7vw;
    }
    
    div[class="col-span-12 w-webkit-fill-available __NavMenu"] > span {
        font-size: 0.85vw;
    }
    
    .btnInicioSesion {
        font-size: 0.85vw;
    }
}
.m-header{
    margin: 7% 0% 0% 0%;
}
.gap-3 { gap: 0.75rem; }
.grid { display: grid; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.w-webkit-fill-available { width: -webkit-fill-available; }
.mr-13 {
    margin-right: 3.25rem; /* 20px */
}
img {
    max-width: 100%;
    height: auto;
}
.text-center{
    text-align: center;
}