@charset "utf-8";
/* CSS Document */
/* Base Styles - Phones Portrait */
#kabezon {
/*background-color: #0F52BA;*/
}
#kabeza a:link,
#kabeza a:visited {
	color: #FFF;
	background-color: #0F52BA;
}
#kabeza a:hover {
	color: #FFF;
	background-color: #0F52BA;
}
#kabeza a,
#kabeza a:link,
#kabeza a:visited,
#kabeza a:hover {
	display: block;
	text-align: center;
	font-size: 1.5rem;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	padding: 8px 0;
	margin: 0 auto !important;
	border: solid 1px #0F52BA;
}
/*#kabeza [class^="icon-"] {
	font-weight: 700;
	padding: 0.2em;
}*/
#whatsapp p,
#korreo p {
	text-align: center !important;
	margin: 0 auto !important;
}
.celular {
	display: none;
}
.shadow {
	-webkit-filter: drop-shadow( 8px 8px 10px rgba(0, 0, 0, 0.43));
	filter: drop-shadow( 8px 8px 10px rgba(0, 0, 0, 0.43));/* Similar syntax to box-shadow */
}
.logo {
	width: 60%;
	max-width: 60vw;
	display: block;
	margin: 0.5em auto 1em auto;
}
#slogan,
.titulo-index {
	margin: 2em 0;
}
#slogan {
	background-color: rgba(15, 82, 186, 0.15);
}
#titulo h1 {
	font-size: 1.8em;
}
#titulo h1,
#slogan h1,
#titulo h2,
#slogan h2 {
	text-align: center;
	color: #0F52BA;
}
#slogan h1,
.titulo-index h1 {
	font-size: 2.5em;
}
.tarjeta-area {
	display: flex;
	flex-wrap: wrap;
	gap: 40px; /* uniform spacing between flex children */
	margin: 0 0 2em 0;
}
.tarjeta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* flex: 1 1 100%;        default full width */
	flex: 1 1 calc(100% - 20px); /* half width minus gap compensation */
	box-sizing: border-box;
	padding: 20px 10px 0 10px;
	/*background-color: #FFF;
	border-radius: 30px;   /* rounded corners */
	/* box-shadow: 5px 5px 15px rgba(0,0,0,0.15); subtle shadow bottom-right */
}
.tarjeta h1,
.tarjeta h2,
.tarjeta p,
.tarjeta img {
	text-align: center;
}
.tarjeta img {
	width: 40%;
	max-width: 60vw;
	display: block;
	margin: 0 auto;
}
.tarjeta h1 {
	font-size: 2.5em;
}
.tarjeta p {
	font-size: 1.55em;
	line-height: 1.1;
	color: #515256;
	margin: 0.75em 52px 1.5em 52px !important;
}
.kon-wrap {
	clear: both;
	width: 95%;
	box-sizing: border-box;
	margin: 1em auto;
	overflow: hidden;
}
.kontiene {
	display: flex;             /* two-column layout */
	flex-wrap: wrap;           /* stack on small screens */
	width: 100%;
	margin: 0 auto;
	padding: 1em 1rem 2em 1em;
	box-sizing: border-box;
}
.kontiene:nth-of-type(odd) {
	background-color: #FFF;
}
.kontiene:nth-of-type(even) {
	background-color: rgba(15, 82, 186, 0.10);
}
.kon-title {
	flex: 0 0 100%;            /* title always full width */
}
.kon-title h2 {
	font-size: 2.5em !important;
}
.kon-small {
	flex: 1 1 100%;            /* default: full width on phones */
	box-sizing: border-box;
	padding: 0;
}
.kon-title h2,
.kon-small p {
	margin: 0.3em 0 0.6em 0 !important;
}
/* Images inside kon-small */
.kon-small img {
	max-width: 95%;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
	padding: 0;
	object-fit: cover;
}
}

/* Phones (Landscape) */
@media screen and (min-width: 481px) {
.logo {
	width: 30%;
}
}

/* iPads (Portrait) *//* Tablets (Portrait) */
@media screen and (min-width: 768px) {
.logo {
	width: 40%;
}
.tarjeta {
	flex: 1 1 calc(50% - 20px); /* half width minus gap compensation */
}
.tarjeta hr {
	margin-top: auto;           /* ensures hr sits at bottom */
}
.kon-wrap {
	width: 100%;
}
.kon-small {
	flex: 0 0 50%;           /* each kon-small takes half width */
}
.kon-title h2,
.kon-small p {
	margin: 0.2em 20px;
}
/* Only the image column should center vertically */
.kon-small img {
	max-width: 85%;
	display: block;
	margin: 1em auto;
}
 /* If you want vertical centering for the image column */
.kon-small:has(img) {
 display: flex;
 align-items: center;
 justify-content: center;
}
}

/* iPhone X */
@media only screen and (min-width: 812px) and (orientation: landscape) {
.celular {
	display: inline-block;
}
.logo {
	width: 70%;/*float: right;margin: 8px 10% 4px 0 !important;*/
}
#kabezon {
/*background-color: #F8F8F8;*/
}
#kabeza a:link,
#kabeza a:visited {
	color: #0F52BA;
	background-color: #FFF;
}
#kabeza a:hover {
	color: #FFF;
	background-color: #0F52BA;
}
#kabeza a,
#kabeza a:link,
#kabeza a:visited,
#kabeza a:hover {
	display: inline-block;
	font-size: 1rem;
	padding: 0.3em 0.9em;
	margin: 1.5em auto !important;
	border: solid 1px #0F52BA;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}
}

/* Tablets Landscape */
@media screen and (min-width: 1024px) {
#whatsapp {
	text-align: right !important;
}
#korreo {
	text-align: center !important;
}
#idioma {
	text-align: left !important;
}
.logo {
	width: 55%;
}
.kon-wrap {
	width: 90%;
	max-width: 1300px;
}
.kon-small img {
	max-width: 90%;
}
}

/* Laptops */
@media screen and (min-width: 1366px) {
.logo {
	width: 60%;
}
}

/* PC Monitors */
@media screen and (min-width: 1820px) {
.logo {
	width: 40%;
}
}