:root {
    --color-primary: #003CA6; /* Define la variable --color-primary y asigna un valor */
    --color-secondary: #D9E021;
    --color-third: #f2b797;
    --color-fourth: #ebe1f4;
    --color-fifth: #f7f2e7;
    --color-footer: white;
    --font-principal: "Montserrat"; /**/
    --font-brand: "Wamelo"; /**/
}

/* 🔒 Prevención de scroll horizontal */
body,
html {
  overflow-x: hidden;
} 

body {
    box-sizing: border-box;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: var(--font-principal);
}

h1, h2, h3, h4 {
    font-size: inherit;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
        
.desk {
    display: block;
}

.mobile {
    display: none;
}

.bredcrumb {
    font-size: 42px;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}

.hero-banner {
    width: 100%;
    height: auto;
}


.principal {
	font-family: var(--font-brand);
	color:  var(--color-primary);
	font-weight: normal; 
	text-align: center; 
	font-size: 80px;
	padding: 20px 0;
}

.sub-principal {
    position: relative;
    font-family: var(--font-principal);
	font-size: 24px; 
    color: black;
	font-weight: normal; 
	text-align: center;
	padding: 20px;
}

.introduce {
    font-weight: 100;
    font-size: 16px;
    line-height: 1.5;
    width: 50%;
    margin: 0 auto;
    padding: 0 0 30px 0;
    text-align: left;
}

.ceo {
    position: relative;
    display: inline-block;
    text-align: center;
}
	
.ceo_photo {
    position: relative;
    display: inline-block;
    width: 20%;
    text-align: center;
}

.ceo_photo img{ 
    height: 55%;
    top:0;
}    

.ceo_bio {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 35%;
    padding: 15px;
    font-family: var(--font-principal);
    text-align: left;
    z-index: -10;
}
	
    /*content {*/
    /*        position: relative;*/
    /*        display: inline-block;*/
    /*        text-align: center;*/
    /*        top: 155px;*/
    /*    }*/
@media only screen and (max-width: 800px) {
    
	/*#indexa {*/
 /*       top: 150px;*/
	/*	width: 100%;*/
	/*	height: 90%;*/
	/*}*/
	
	h1 {
		font-size: 60px;
	}
	
	.introduce {
        width: 90%;
    }


    form,
    .ceo {
        position: relative;
        display: inline-block;
        top: 0px;
        width: 100%;
    }

    .ceo_photo {
        position: relative;
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .ceo_photo img{ 
        width: 75%;
        height: auto;
    }    

    .ceo_bio {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 80%;
        height:auto;
        padding: 15px;
        font-family: var(--font-principal);
    }

    h1 {
        position: relative;
      
    }
    h2 {
        position: relative;
      
    }
}