@font-face {
  font-family: 'MonserratCustom'; /* El nombre que vos elijas */
  src: url('../Fuentes/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  
  font-display: swap; /* Muestra una fuente del sistema mientras carga la tuya */
}
@font-face {
  font-family: 'MonserratMedium'; /* El nombre que vos elijas */
  src: url('../Fuentes/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 500;
  
  font-display: swap; /* Muestra una fuente del sistema mientras carga la tuya */
}

@font-face {
  font-family: 'MonserratBold'; /* El nombre que vos elijas */
  src: url('../Fuentes/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 600;
  
  font-display: swap; /* Muestra una fuente del sistema mientras carga la tuya */
}
@font-face {
    font-family: 'InterSemibold';
    src: url('../Fuentes/Inter-VariableFont_opsz\,wght.ttf');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'InterMedium';
    src: url('../Fuentes/Inter-VariableFont_opsz\,wght.ttf');
    font-weight: 400;
    font-display: swap;
}



:root {

    --Fondo : #a3b6cb;
    --Primario : #283481;
    --Secundario : #20254C;
    --Claro : #ffffff;
    --Rojo : #e62a26;


    --MargenDefault : 30px;

    --TamTitulos : 20pt;

    --TamNormalGrande : 7.5pt;
    --TamNormal  : 5pt;
    --TamChico   : 3.5pt;




    --BordeCartas : var(--Secundario) 0px 10px 20px;
}


a {
    text-decoration: none;
    color: white;
}

body{
    margin: 0;
    padding: 0;
    background: var(--Fondo);
    display: flex;
    font-family: 'InterSemibold',sans-serif;
    
}



.PadreDeTodo {
    width: 100%;
    display: inline-block;
    overflow: hidden;
}




.Banner{
    display: flex;

    width: 100vw;
    margin-bottom: 0;

}
.Banner img{
    object-fit: contain;
    width: 100%;
}

.BotonBanner{
    display: flex;
    justify-content: center;  
    align-items: center;     
    position: absolute;
    background-color:var(--Secundario) ;
    height: 4.79vh;
    width: 28vw;

    margin-left: 5%;
    
   
    
    margin-top: 60%;
    font-size: 25pt;
    color: white;
    border: none;
    border-radius:  15px;

}

.BotonBanner:hover{

    color: var(--Primario);
    background-color: white;
}


.Subtitulo{
    font-family: 'MonserratBold';
    width: 100vw;
    color: var(--Rojo);
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(var(--MargenDefault) /2);
    margin-bottom: calc(var(--MargenDefault) /2);
    font-size: 16pt; /*calc(var(--TamNormalGrande) + 4pt);*/
    text-align: center;

}
.microsubtitulo{ 
   font-size:12pt;  
   width: 90vw;
   font-family: 'InterMedium';
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   margin-top: var(--MargenDefault) ;
   margin-bottom: var(--MargenDefault);
   color: var(--Rojo);


}





.BetterFooter{
    min-height: 614px;
    background-color: var(--Secundario);
    width: 100vw;
    display: flex;
    justify-content: space-between;


}

.ColumnaIzquierda{
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
    height: 100%;


}
.ColumnaFlex{
    display: block;
}
.ColumnaFlex {
    list-style: none;
    height: 90%;
    margin-top: auto;
    margin-right: 60px;
    display: block;
    align-content: center;
}
.ColumnaFlex ul {
    padding: 0%;
    margin-left: auto;
    margin-right: auto;
}
ul{
       list-style: none;
   }
.LogoOrtopedia{
    height: 400px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 60px;
    margin-bottom: auto;

}
ul li{
    width: 100%;
}
.GridEnlaces{
 
    margin-top: 100px;
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(2,150px);
    padding-bottom: 28px;

    
}

.GridEnlaces a{

    margin-bottom: 28px;
    font-size: 36px;
    cursor: pointer;
    
    
}

.GridEnlaces a:hover{
    text-decoration: underline white;
}
.ListaTec{
    width: 100%;
    display: flex;
    justify-content: center;

}
.LogoTecBot{
    height: 184px;
    margin-bottom: 50px;


}


.ColumnaDerecha{
    display: block;
}

.Contacto{
    list-style: none;
    color: white;
    font-size: 48px;
    justify-content: start;
    display: block;
}

.Contacto li {
    display: flex;
    justify-content: start;

}

.Contacto li p{
    font-family: 'InterMedium';
    font-size: 35px;
    margin-left: 10px;
    margin-bottom: auto;
    max-width: 650px;
}

.Mailpng{
    width: 46px;
    height: 34px;
    margin-top: 40px;
}

.Icono{
    margin-top: 35px;
    height: 46px;
    width: 46px;
}

.IconoMapa{
    margin-top: 35px;
    width: 43px;
    height: 53px;
}

@media (max-width : 768px){

    .BetterFooter{
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
       grid-auto-rows: auto;
          gap: 10px;

    }

    .ColumnaIzquierda{

        grid-column: 1;
        grid-row: 1;
    }
    .ColumnaDerecha{

        grid-column: 2;
          grid-row: 1 / span 2;
        
    }
    .ColumnaFlex{

        margin-top: -10px;
        margin-right: auto;
        margin-left: auto;

        grid-column: 1;
        grid-row: 2;
    }
    .LogoTecBot{
        margin: 0;
        margin-bottom: 10px;
        height: 60px;
        width: 60px;
 
    }
    .LogoOrtopedia{
        margin-top: 25px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
    }
    .Contacto li p {
        font-size: 10pt;
        max-width: 10000px;
    }
    .GridEnlaces a {
        margin-top: 0px;
        margin-bottom: 3px;
        font-size: var(--TamNormal);
    }

    .IconoMapa{

        margin-top: 10px;
        width : 23.3px  !important;
        height: 27.37px !important; 
    }
    .Mailpng{
        margin-top: 17px;
        width:  13.3px !important;
        height: 9.82px !important;
    }
    .Icono{
        
        height: 13.3px !important;
        width: 13.3px !important;
        margin-top: 15px;
    }
    .Contacto{
        font-size: 13pt;
    }
    .GridEnlaces{
        margin-top: 0px;
        grid-template-columns: 1fr 1fr;
        margin-left: auto;
        margin-right: auto;
    }
}





@media (max-width : 786px){


    
    .ImagenTecBot{
    
    height: 60px;
    width: 60px !important;

    }


    .footer{

    margin-top: var(--MargenDefault);
    background-color:var(--Secundario);
    justify-content: center;
    }





    .BotonBanner{
        font-size: var(--TamNormalGrande);
    }

    .ImgMapa{
    width : 23.3px  !important;
    height: 27.37px !important; 
    margin-left: -5px;

    }

    .ImagenTecBot{
    
        height: 30px;
        width: 30px !important;

    }




}