/*estos 2 codigos (html,body) para que la página se ajuste a todo tipo de pantallas*/
html{
    max-width: 100vw !important;
    overflow-x: hidden !important;
}
body{
    /*font-family: Helvetica, sans-serif;*/
    max-width: 100vw !important;
    overflow-x: hidden !important;
}


/*Barra de navegación*/
.navbar{
    /*height: 60px !important;*/
    background-color:#679b9b !important;
    /*background-color:black !important;*/
    margin-top: 10px;
    position: fixed !important; /*para fijar el menú de navegación*/
    width: 100vw;/*recuperamos la anchura maxima con "100vw" (vw=view width)*/
    /*opacity:0.8 !important;*/
    z-index:1; /*para que se sobreponga sobre cualquier elemento (que esté por encima del HERO SECTION)*/
    /*color:orange !important;*//*no se puede cambiar de color. La estrategia es usar <span>*/
    box-shadow: 0px 0px 20px gray;/*sombra gris*/
    
}

/*se puede cambiar el color y el tamaño de los enlaces del navbar*/
.nav-item a{
    color: white !important;
    font-size: 18px !important;
}

/*hover sobre los enlaces del navbar*/
.enlace:hover{
    color:#ffeadb;
    border-bottom: 4px solid #ffeadb;
}


/*se puede modificar el borde del icono de la hamburguesa del menú. El icono es una imagen SVG. Quizas lo mejor sería usar font awesome para modificar el icono*/
.navbar-toggler{
    /*border: none !important;*/
    border-color:white !important;
    /*background-color:#637373 !important;*/
}

/*personalizamos el nombre*/
.navbar-brand{
    /*font-family: "oswald"; /*tipografía*/
    font-size: 32px !important; /*tamaño de fuente*/
    font-weight: 700; /*peso de la fuente*/
}



/*Para la pantalla de trabajo*/
#pantalla_principal{
    /*background-color:black;/*#e5e5e5; /*#0D676A */
    background-color: white;
    margin:5px auto;
    /*padding:90px 20px 20px 20px;*/ /*para dar un espacio en la parte superior para que no lo tape el navbar*/
    /*padding:0px 20px 20px 20px;*/
    padding:0px 0px 20px 0px;
    /*opacity:0.9;*/
    filter: brightness(100%);/*para que se muestre colores originales a pesar del opacity de .general-background*/
    text-align:center;
    width:auto;
    /*display: flex;
    flex-wrap: wrap;*/
    color:black;
}


/*fondo de pantalla general (para todos los modulos)*/
.general-background {
    /*filter: blur(5px);*/
    /*-webkit-filter: blur(5px);*/
    background-size: cover !important;
    background-position: center center !important;
    position: fixed;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    opacity:0.5;
    /*background-image: url('../../assets/img/aprender.jpg');*/
    background-color: #f0f0f0;/**/
    }


/*El header (hero_section)*/
#hero_section{
    /*--opacidad-negro:0.5;*/ /*se puede poner como variable en el 4to argumento: var(--opacidad-negro)*/
    /*background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,1)), url("../../assets/img/aprender.jpg");*/
    background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,1)), url("../../assets/img/imagen-principal-1.jpeg");
    /*filter: brightness(30%);*/
    
    background-repeat: no-repeat;/*para que no se repita ala imagen si hay más espacio*/
    background-size: cover !important;/* para que se autoajuste al espacio o la dimensión*/
    background-position: center;/*para que la imagen esté siempre al centro*/
    height: 100vh;/*para la altura "100vh" (vh=view height)*/
    position: relative; /*todo el "hero_section" será nuestra posición relativa*/
                        /*esto para ubicar los elemntos que queramos dentro de esta position relativa*/
}


/*aquí irán las letras*/
#hero_section div{
    position: absolute;
    bottom: 85px; /*para ubicar el div de abajo hacia arriba 45 pixeles*/
    /*para centrarlo, ocupamos estas 3 propiedades:*/
    left: 0; 
    right: 0;
    margin: auto;
}

/*personalizamos la fuente*/
#hero_section h1{ 
    /*font-family: "oswald";*/
    font-size: 52px;
}


/*definimos la diferencia de los pesos de fuente con pseudoclases*/
#hero_section h1:first-child{ /*personalizamos el primer "h1" con la pseudoclase "fisrs-chid"*/
    font-weight: 700;    
}
#hero_section h1:last-child{ /*personalizamos el primer "h1" con la pseudoclase "last-chid"*/
    font-weight: 200;
}


#contacto{
    background-color:#679b9b !important;
    color:white;
    text-align: center;
    /*opacity: 1;*/
    filter:brightness(100%); /*para devolver color original a pesar del opacity de #pantalla_principal*/
    padding: 10px 2px;
}

/*sobre el pie de página*/
#footer{
    /*background:#0D676A;*/
    background-color:#637373;
    font-size: 14px;
    color:white;
    text-align: center;
    /*opacity: 0.9;*/
    filter:brightness(100%) /*para devolver color original a pesar del opacity de #pantalla_principal*/
}


/*modificación de los iconos de fontawesome*/
#mision-vision-objetivo .fa-solid{
    font-size: 80px !important;
    color:#ff9A76;
}

.logo{
    /* para que esto funcione bien, meto los elementos en un div*/
    /*lo que hace es poner al centro los elementos*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding:30px 30px 0px 30px !important;
}
.letra{
    font-size: 34px;
    color:#ff9A76;
}

.palabras{
    text-align: justify;
    color: #637373;
    padding:30px 30px !important;
}

#servicios{
    background-color: #679b9b;
}

.tarjeta{
    padding: 10px !important;
}

.centrar{
    /* para que esto funcione bien, meto los elementos en un div*/
    /*lo que hace es poner al centro los elementos*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding:30px 30px 0px 30px !important;*/
    
}
.borde{ /*borde de la tarjeta*/
    border-width: 5px !important;
    border-color: #ffeadb !important;
    background-color: #679b9b !important;
    color:#ffeadb
    /*color: white;*/
}


.borde-card-estadistica{
    border-width: 2px !important;
    border-color: #f1f1f1 !important;
    background-color: white !important;
    color: #e99787;
    /* color: white; */
    box-shadow: -8px 8px 10px -6px black !important;
}

.boton-whatsapp{
    width:60px;
	height:60px;
    background-color:rgb(28, 199, 28);
	color:#FFF;
    border-radius:15px;
}