:root {
	--azul: #07146c; 
	--rojo: #ac1025;
	--gris: #eaf1fd;
	--font1: 'Barlow Semi Condensed', sans-serif;
	--font2: 'Asap', sans-serif;
	--btn: 60px;

	--divider-border-width:5px;
	--divider-border-style:dashed: ;
	--divider-color: #ac1025;
}

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asap:wght@400;500;600;700&display=swap');

@import url("css/all.css");

body { font-family: var(--font2);}
header { font-family: var(--font2);}
h1, h2, h3, 
h4, h5, h6 { font-family: var(--font1);}

/*
	=======================================
		||   WHATSAPP   ||
 	=======================================
*/
.whatsapp {
	position: fixed; 
	right:25px; /*Margen derecho*/
	bottom:20px; /*Margen abajo*/
	z-index:999;


    height: var(--btn);
    min-width: var(--btn);
    max-width: 95vw;
	background: #25d366;
	border-radius: calc(var(--btn)/2);
	box-shadow: 1px 6px 24px 0 rgb(7 94 84 / 24%);
	cursor: pointer;
    transition: background .2s linear;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.whatsapp  {
	 width:60px; /*Alto del icono*/
	 height:60px; /*Ancho del icono*/
}
.whatsapp:hover{
	background: #128c7e;
}
.joinchat__whatsapp {
    width: var(--btn);
    height: var(--btn);
    background: transparent url('../img/iconos/whatsapp-brands-b.svg') 50% no-repeat;

   
    background-size: 60%;
}
.beautifier {
	color: pink;
}
/*
<div class="whatsapp">
 <a href="TU-ENLACE" target="_blank" title="Contactame por Whatsapp">
 <img src="https://www.peengler.com/wp-content/uploads/whatsapp.png" alt="WhatsApp" />
 </a>
</div>


<div class="facebook">
 <a href="TU-ENLACE" target="_blank" title="Contactame por Messenger">
 <img src="https://www.peengler.com/wp-content/uploads/messenger.png" alt="Messenger" />
 </a>
</div>

.whatsapp, .facebook{
 	position: fixed; 
 	z-index:999;
 	right:25px; *Margen derecho*
}
.whatsapp img, .facebook img{
 	width:60px; *Alto del icono*
 	height:60px; *Ancho del icono*
}
.whatsapp { bottom:20px; *Margen abajo* }
.facebook { bottom:95px; *Margen abajo* }

.whatsapp:hover, .facebook:hover{
	opacity: 0.7 !important;
	filter: alpha(opacity=70) !important;
}  




a::after {
  content: "→";
}
*/

nav {
	max-width: 100%;
}
.navbar {
	width: 100% !important;
    max-width: 100% !important;
}
.row-nav-utl {
	--bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: nowrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
    width: 100% !important;
}
.nav-link {text-transform: uppercase;}
.logo-menu {
	float: left;
	width: 300px;
}
.navbar-utl-a {
	width: 80% !important;
	max-width: 80% !important;
}
.navbar-utl-b {
	width: 20% !important;
	max-width: 20% !important;
	float: right;
	display: flex;
	justify-content: flex-end;
}
.bg-opacidad {
	background: #06060633
}
.rosas {
    color: #fff;
    font-size: 22px;
}



/* 	
	=======================================
		||   TITULOS  - Index   ||
 	=======================================
*/
.encabezado {
	text-align: center;
	text-transform: uppercase;
	color: var(--azul);
	padding-top: 15px;
	padding-bottom: 40px;
}
.encabezado span, .encabezado-2 span {
	font-family: var(--font1);
}
span.tit::after,  span.tit::before  {
	content: url('../img/iconos/rojo.png');
  	display: inline-flex;
    border-bottom: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 20px;
    padding: 2px 5px;
    margin-bottom: 4px;
    align-content: center;
    align-items: center;
}
.encabezado h3 {
	font-size: 26pt;
	font-weight: 700;
}


.encabezado-2 {
	text-align: left;
	text-transform: uppercase;
	color: var(--azul);
}
span.tit-2::before  {
	content: url('../img/iconos/rojo.png');  
  	display: inline-flex;
    border-bottom: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 20px;
    padding: 2px 5px;
    margin-bottom: 4px;
    align-content: center;
    align-items: center;
}
.encabezado-2 h3 {
	font-size: 26pt;
	font-weight: 700;
}


.encabezado-3 {
	text-align: left;
	text-transform: uppercase;
	color: #fff;
}
span.tit-3::before  {
	content: url('../img/iconos/rojo.png');  
  	display: inline-flex;
    border-bottom: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 20px;
    padding: 2px 5px;
    margin-bottom: 4px;
    align-content: center;
    align-items: center;
}
.encabezado-3 h3 {
	font-size: 26pt;
	font-weight: 700;
}


.encabezado-4 {
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	padding-top: 15px;
	padding-bottom: 40px;
}
.encabezado-4 span, .encabezado-4 span {
	font-family: var(--font1);
}
span.tit-4::after,  span.tit-4::before  {
	content: url('../img/iconos/rojo.png');  
  	display: inline-flex;
    border-bottom: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 20px;
    padding: 2px 5px;
    margin-bottom: 4px;
    align-content: center;
    align-items: center;
}
.encabezado-4 h3 {
	font-size: 26pt;
	font-weight: 700;
	text-align: center;
}





.banner-encabezados {
	color: #fff;
	height: 300px;
	max-width: 100%;
	display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;

    background: url("../img/bg/bg-3.png") no-repeat center center ; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}
.banner-encabezados::before {
	content: " ";
	width: 100%;
	height: 300px;
	position: absolute;
	background-color: rgb(0 41 123 / 35%);
}
.landing-utl {
	text-align: center;
	text-transform: uppercase;
	font-size: 26pt;
    font-weight: 700;
}
.landing-utl h3 {
	text-align: center;
	text-transform: uppercase;
	font-size: 26pt;
    font-weight: 700;
   	position: relative;
}
.carousel-item::before {
	content: " ";
	width: 100%;
	height: 1500px;
	position: absolute;
	background-color: rgb(0 41 123 / 35%);
}
.carousel-caption {
	font-family: var(--font1);
  	bottom: 15.25rem !important;
  	text-transform: uppercase;
}
.carousel-caption h5 {
	font-size: 2.25rem;
	font-weight: 700;
}
.caption-utl {
	display: flex;
	align-content: center;
    justify-content: center;
    align-items: center;
    background: pink;
}




/* 	
	=======================================
		||   BOTONES   ||
 	=======================================
*/

/*  ====== BOTON ======  */
.btn-mas {
	margin-top: 80px  !important;
	text-align: center;
}
.btn-mas a {
	font-size: 14px;
	font-weight: 600;
	font-family: var(--font1);
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	background: var(--azul);
	padding: 18px 30px;  /*
	border-radius: 30px;
	border: solid 2px var(--azul); */
}
.btn-mas a:hover{
	background: var(--rojo);
	color: #fff;
}



/*   	
	=======================================
		||   SERVICIOS  - Index   ||
 	=======================================
*/
#servicios {
	background-image: url("../img/bg/bg-2.png");
	-webkit-background-size: cover;
   	-moz-background-size:  cover;
   	-o-background-size: cover;
   	background-size: cover;
   	background-repeat: repeat;
   
   	 /*  width: 100% ; */
}
.servicio-centrar {
	display: flex;
	justify-content: center;
}
.servicios {
	padding: 80px 0px;
	color: var(--azul);
}
.servicio {
	width: 33% !important;
	text-align: center;
}
.servicio-foto {

} 
.servicio-foto img {
	padding: 20px 0px;
	width: 40%;
}


.servicio-body {
	text-align: center;
}
.servicio-body h4 {
	font-size: 19px;
	text-transform: uppercase;
}



.cajito {
	background: #fff;
	border-radius: 23px;
	height: 690px;
}
.cajitata {
	background: #fff;
	border-radius: 23px;
	height: 530px;
}
.centrar-cap {
	display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}
.centrar-2{
	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 100%;
    margin-top: 24px;
}
.centrar {
	/*IMPORTANTE*/
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 100%;
}
.centrado {
	/*IMPORTANTE*/
  	display: flex;
  	justify-content: center;
  	align-items: center;
}
.servicios-pediatricos {
	/* background: #000;   */
	padding-bottom: 100px;
	padding-top: 100px;
	color: var(--gris);
}
.servicio-box-dra {
	font-family: var(--familia);
	/*  width: 32% !important;
	padding: 15px; 
	height: 760px; */
	margin-bottom: 20px;
}
.servicio-box-index {
	font-family: var(--familia); /* 
	width: 32% !important;
	padding: 15px; 
	height: 550px;   */
	margin-bottom: 20px;
}
.servicio-img {
	width:auto;
	height: 155px;
	color: #fff;
	text-align: center;
}
.servicio-img  img {
	padding: 20px 0px;
	width: 40%;
}
.servicio-titulo {    
	padding: 10px;
    text-align: center;
    background: var(--azul);
    color: #fff;
    margin: 14px;
}
.servicio-titulo h3 {
	font-size: 20px;
	text-transform: uppercase;
	margin-bottom: 0px;
}


.leer-mas {
	 display: none;/* */
	text-align: center;
}
.leer-mas a {
	color:  var(--azul);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 15px;
}
.leer-mas a:hover {
	font-weight: 600;
	color:  var(--azul);
}


.columas-servicios {
	display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: auto;
}



/*   	
	=======================================
		||   EQUIPAMIENTO  - Index   ||
 	=======================================
*/
.equipment {
	padding: 80px 0px;
	color: var(--azul);
	background: var(--gris);
}



/*   	
	=======================================
		||   CERTIFICACIONES  - Nosotros   ||
 	=======================================
*/
.certifications {
	padding: 80px 0px;
	color: var(--azul);
	background: var(--gris);
}
.certificaciones {
	width: 100%;
	display: flex;
    align-content: center;
    align-items: center;
}
.certificacion-foto  {
	width: 25% !important;
	text-align: center;
}
.certificacion-foto img {
	padding: 20px 0px;
	width: 70%;
}
#certificacion-1 {
	width: 60%;
}


/* 	
	=======================================
		||   NOSOTROS  - Index   ||
 	=======================================
*/
.nosotros {
	padding: 80px 0px;
	color: var(--azul);
}
.texto-about-us {
	display: flex;
	justify-content: center;
    align-items: center;
}
.texto-about-us p {
	width: 80%;
	text-align: justify;
}
.nosotros-centro{
	display: flex;
    align-content: center;
    justify-content: center;
}
.nosotros-logo {
	display: inline-flex;
	margin-bottom: 50px;
	margin-top: 50px;
	width: 100%;
}
.nosotros-logo-a {
	width: 45% !important;
	display: flex;
	align-content: center;
    justify-content: flex-end;
}
.nosotros-logo-a img {
	width: 65%;
}
.nosotros-logo-b {
	width: 10% !important;
	text-align: center;

	display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.nosotros-logo-b span {
	font-size: 2.7rem;
	font-family: var(--font2);
}

.nosotros-logo-c {
	width: 45% !important;

	display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.nosotros-logo-c ul {
	list-style: none;
	padding-left: 10px;
	margin-bottom: 0px;
	line-height: 25px;
}




/* 	
	=========================================================
		||   CALL TO ACTION  - Index - Why choose us   ||
 	=========================================================
*/
.utl-cta {
	color: #fff;
	background:  var(--azul);
	font-family: var(--font2);
	padding: 80px 20px;
}
.izq {
	width: 40% !important;

	display: flex;
	flex-flow: column wrap;
	height: auto;
	justify-content: center;
	align-items: center;
	background: var(--azul);
	padding: 0px !important;
}
.box {
	width: 100%;
	height: 100%;
	background: var(--azul);
	overflow: hidden;
}
.box img {
	width: 100%;
	height: 100%;
}
@supports(object-fit: cover){
    .box img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}
.der {
	
	padding: 80px 50px !important;
}
.der h3 { 
	text-transform: uppercase;

}
.der ul {
	list-style: none;
	padding-left: 10px;
	padding-top: 20px;
}
.der ul li  {
	line-height: 28px;
}
.der ul li span {
	padding-left: 5px;
}
.der p { 
	text-align: justify;
	font-size: 15px;
	margin-top: 23px;
}
.der-centro {
	width:60% !important;
	display: flex;
    flex-flow: column wrap;
    height: auto;
    justify-content: center;
    align-items: flex-start;
    padding: 0px !important;
}




.utl-cta2 {
	color: var(--azul);
	font-family: var(--font2);
	padding: 103px 50PX;
}
.izq2 {
	width: 50% !important;

	display: flex;
	flex-flow: column wrap;
	height: auto;
	justify-content: center;
	align-items: center;
	padding: 0px !important;
}
.box2 {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.box2 img {
	width: 100%;
	height: 100%;
}
@supports(object-fit: cover){
    .box2 img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}
.der2 {
	
	padding: 80px 50px !important;
}
.der2 h3 { 
	text-transform: uppercase;
	text-align: left;
	font-size: 26px;
}
.der2 ul {
	list-style: none;
	padding-left: 10px;
	padding-top: 20px;
}
.der2 ul li  {
	line-height: 28px;
}
.der2 ul li span {
	padding-left: 5px;
}
.der2 p { 
	text-align: justify;
	font-size: 15px;
	margin-top: 23px;
}
.der-centro2 {
	width:45% !important;
	display: flex;
    flex-flow: column wrap;
    height: auto;
    justify-content: center;
    align-items: flex-start;
    padding: 0px !important;
}






/* 	
	=======================================
		||    RUTAS   ||
 	=======================================
*/
.rutas {
	padding: 80px 0px;
	color: var(--azul);
	background: var(--gris);
}
#rutas {
	background-image: url("../img/bg/bg-mapa.svg");
	background-position:  55px 120px;
	-webkit-background-size: contain;
   	-moz-background-size: contain;
   	-o-background-size: ccontain;
   	background-size: contain;
   	background-repeat: no-repeat;
   	height: 100%;
   	 /*  width: 100% ; */
}
.tipo-de-ruta {
	font-family: var(--font2);
	width: 100%;
	display: flex;
}
.ruta-ltl, .ruta-ftl {
	width: 50% !important;
	padding-left: 50px;
}
.ruta-ltl ul, .ruta-ftl ul {
	list-style: none;
	padding-left: 10px;
}
.ruta-ltl ul li , .ruta-ftl ul li {
	display: flex;
	margin-bottom: 8px;
}


.ruta-ltl li::before, .ruta-ftl li::before {
   content: ' ';
   display: inline-block;
   height: 23px;
   width: 16px;
   background-image: url('../img/iconos/ubicacion-rojo.svg'); 
   padding-right: 17px;
   margin-right: 7px;
}

.ruta-mapa {
	width: 100% !important;
	padding-left: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}
.ruta-mapa img {
	width: 35%;
}
/* 	
	=======================================
		||    FOOTER   ||
 	=======================================
*/

footer {
	font-family: var(--font2);
	
	color: #fff;
	padding-top: 80px;
	padding-bottom: 50px;
	font-size: 15px;	
	text-align: left;
}
#fondo {
	background-image: url("../img/bg/mapa-3.png");
	background-position:  305px 50px;
	-webkit-background-size: contain;
   	-moz-background-size: contain;
   	-o-background-size: ccontain;
   	background-size: contain;
   	background-repeat: no-repeat;
   	height: 100%;
   	 /*  width: 100% ; */
}
.footer-contacto-izq {
	width: 50% !important;

	display: flex;
	flex-flow: column wrap;
	height: auto;
	justify-content: center;
	align-items: flex-start;
	padding: 0px !important;
}
.footer-contacto-der {
	width:50% !important;
	padding: 80px 10px !important;
}


.contacto-datos {
	color: var(--azul);
	padding-bottom: 80px;
}
.contacto-datos a {
	color: var(--azul);
	text-decoration: none;
}
.contacto-datos a:hover {
	color: var(--rojo);
	text-decoration: none;
}


.contacto-datos ul {
	list-style: none;
	padding-left: 10px;
}
.contacto-datos ul li {
	display: flex;
    align-content: flex-start;
    align-items: flex-start;
    margin-top: 8px;
}
.contacto-datos ul li div {
	padding-top: 3px;
}
.contacto-datos ul li img {
	width: 30px;
}
p.icono-utl  img {
	background: yellow;
}

.contacto-datos  li#phone::before{
   content: '';
   display: inline-block;
   height: 73px;
   width: 74px;
   background-image: url('../img/iconos/tel-.svg'); 
   padding-right: 17px;
   margin-right: 7px;
}
.contacto-datos  li#location::before{
   content: '';
   display: inline-block;
   height: 13px;
   width: 14px;
   background-image: url('../img/iconos/ubicacion-.svg'); 
   padding-right: 17px;
   margin-right: 7px;
}
.contacto-datos  li#mail::before{
   content: '';
   display: inline-block;
   height: 13px;
   width: 14px;
   background-image: url('../img/iconos/mail-.svg'); 
   padding-right: 17px;
   margin-right: 7px;
}


.copy-utl {
	font-family: var(--font2);
	font-size: 14px;
	letter-spacing: 1px;
	font-weight: 300;
	text-align: center;
	background: var(--azul);
	color: #fff;
	padding-top: 25px;
	padding-bottom: 25px;
}
span.applet::before  {
	content: ' | ';
    display: inline-block;
}
.applet a {
	color: #fff;
	text-decoration: none;
}
.applet a:hover {
	color: var(--rojo);
}

form {
	width: 100%;
}
.form-group {
	padding: 8px 0px;
}








.carousel-item img{
	display: flex;
  	justify-content: center;
  	align-items: center;
}
.mas-espacio {
	width: 70%;
	height: 40px;
	display: inline-flex;
	background:pink ;
}



@media (min-width: 1200px) { 
	.carousel-caption {
	    bottom: 30.25rem !important;
	}
}

/* 
     XX-Large devices (larger desktops, 1400px and up)    */
@media (max-width: 1400px) { 
	.carousel-caption {
	    bottom: 22.25rem !important;
	}
}


/*   X-Large devices (large desktops, 1200px and up)   background: #9a54e4;   */
@media (max-width: 1200px) { 
	.carousel-caption {
	    bottom: 20.25rem !important;
	}
}


@media (max-width: 992px){
	.carousel-caption {
	    bottom: 17.25rem !important;
	}
}
@media (max-width: 887px){
	.carousel-caption {
	    bottom: 13.25rem !important;
	}
	.ruta-mapa img {
		width: 50%;
	}
}
	

@media (max-width: 768px){
	.carousel-caption {
	    bottom: 12.25rem !important;
	}

	.servicio {
	    width: 50% !important;
	    text-align: center;
	}
	.izq, .der-centro { width: 100% !important;}
	.ruta-mapa img {width: 80%;}
	
}


@media (max-width: 576px) { 
	.carousel-caption {
	    bottom: 22.25rem !important;
	}

	.izq { width: 100% !important; }
	.der-centro { width: 100% !important; }

    .izq2, .der-centro2 { width: 100% !important;  }
    .der2 { padding: 78px 5px !important;}


    .footer-contacto-izq {
	    width: 100% !important;
	    padding: 20px 15px !IMPORTANT;
	}
	.footer-contacto-der {
	    width: 100% !important;
	    padding: 20px !IMPORTANT;
	}
	.contacto-datos {
	    padding-bottom: 8px;
	}


	.certificaciones {
		display: flex;
    	flex-wrap: wrap;
	}
	.certificacion-foto  {
		width: 100% !important;
		    padding: 30px;
	}
	.certificacion-foto img {
		padding: 20px 0px;
		width: 70%;
	}
	#certificacion-1 {
		width: 60%;
	}
	#rutas {
	    background-image: url("../img/bg/mapa-4.png");
	    background-position: 80px 488px;
	    -webkit-background-size: contain;
	    -moz-background-size: contain;
	    -o-background-size: ccontain;
	    background-size: contain;
	    background-repeat: no-repeat;
	    height: 100%;
	    /* width: 100%; */
	}
	.tipo-de-ruta {
	    width: 100%;
	    display: flex;
	    flex-wrap: wrap;
	}
	.ruta-ltl, .ruta-ftl {
		width: 100% !important;
		padding: 50px;
	}
	.ruta-mapa img {width: 100%;}
}