@charset "utf-8";
header, nav, section, article, aside, figure, footer{
	display: block;
	text-align: center;
}
.limpiar{
	clear: both;
	margin: 0px;
	padding: 0px;
	}

body{
	background-color: #fff;
	width:100%;
	height:100%;

	margin:0;
	padding:0;

	overflow-x:hidden;
	
}
      /*-- fuentes--*/
/*-- parrafos --*/

.p0{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #6C1D1E;
	font-size: 11px;
	}
.p{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #134163;
	font-size: 12px;
	}
.p1{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #134163;
	font-size: 15px;
	}

	
.p2{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #555;
	font-size: 18px;
	}

.p3{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #134163;
	font-size: 22px;
}
.p4{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #ffffff;
	font-size: 15px;
	}
.p5{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #001A66;
	font-size: 15px;
	}
.p6{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #134163;
	font-size: 18px;
	}
.p7{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #238C00;
	font-size: 18px;
}


.h1{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #238C00;
	font-size: 50px;
	
}
.h2{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #238C00;
	font-size: 30px;
	}

h3 {
  font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #fff;
	font-size: 30px;
}
.h4 {
  font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #238C00;
	font-size: 25px;
}
.h5 {
  font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #001A66;
	font-size: 25px;
}
	
/*-- maquetacion --*/
/* =========================================
   WHATSAPP FLOTANTE
========================================= */

.whatsapp-float{

	position:fixed;

	width:65px;

	height:65px;

	bottom:25px;

	right:25px;

	z-index:9999;

	border-radius:50%;

	display:flex;

	align-items:center;

	justify-content:center;

	background:#72B311;

	box-shadow:0 8px 25px rgba(0,0,0,0.25);

	transition:0.3s ease;

	animation:whatsappPulse 2s infinite;
}

/* IMAGEN */

.whatsapp-float img{

	width:38px;

	height:38px;

	object-fit:contain;
}

/* HOVER */

.whatsapp-float:hover{

	transform:scale(1.1);

	box-shadow:0 12px 30px rgba(0,0,0,0.35);
}

/* EFECTO PULSO */

@keyframes whatsappPulse{

	0%{
		transform:scale(1);
	}

	50%{
		transform:scale(1.08);
	}

	100%{
		transform:scale(1);
	}
}

/* =========================================
   TABLET
========================================= */

@media screen and (max-width:768px){

	.whatsapp-float{

		width:58px;

		height:58px;

		bottom:20px;

		right:20px;
	}

	.whatsapp-float img{

		width:34px;

		height:34px;
	}
}

/* =========================================
   CELULARES PEQUEÑOS
========================================= */

@media screen and (max-width:480px){

	.whatsapp-float{

		width:52px;

		height:52px;

		bottom:15px;

		right:15px;
	}

	.whatsapp-float img{

		width:30px;

		height:30px;
	}
}

/* ===== LOADER ===== */
#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #666666;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease, visibility 0.6s;
}

/* Animación del spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top: 4px solid #134163;
  border-radius: 50%;
  animation: girar 1s linear infinite;
}

@keyframes girar {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Ocultar loader */
#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* ===== EFECTO APERTURA ===== */
#contenido {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

#contenido.visible {
  opacity: 1;
  transform: translateY(0);
}




#contenedor{
	width: 100%;
	padding: 0px;
	margin:0 auto;
	}
/* --- Pie pagina ---*/

#piepagina{
	margin-top: 20%;
	height: 60px;
	width: auto;
	padding-top: 2%;
	padding-bottom: 1%;
	}
#piepagina0{
	background-color: #001A66;
	height: 60px;
	width: auto;
	padding-top: 2%;
	padding-bottom: 1%;
	}

#dere{
	float:left;
	max-width: 450px;
	margin-left: 40%;
	display:flex;
	
	}
#dere1{
	float:left;
	max-width: 450px;
	margin-left: 40%;
	display:flex;
	
	}
/*-- piepagina0 --*/
/* =====================================
   PIE DE PÁGINA
===================================== */

#piepagina0{

	background-color:#001A66;

	width:100%;

	padding:20px 5%;

	display:flex;

	align-items:center;

	justify-content:center;

	box-sizing:border-box;

	flex-wrap:wrap;

	text-align:center;
}

/* CONTENIDO */

#dere1{

	max-width:900px;

	width:100%;

	display:flex;

	align-items:center;

	justify-content:center;

	text-align:center;

	margin:0 auto;
}

/* TEXTO */

#dere1 p{

	margin:0;

	line-height:1.6;
}

/* LINKS */

#dere1 a{

	color:#ffffff;

	text-decoration:none;

	transition:0.3s;
}

#dere1 a:hover{

	opacity:0.8;
}

/* =====================================
   TABLETS
===================================== */

@media screen and (max-width:991px){

	#piepagina0{

		padding:18px 5%;
	}

	#dere1{

		max-width:100%;
	}
}

/* =====================================
   CELULARES
===================================== */

@media screen and (max-width:768px){

	#piepagina0{

		padding:16px 4%;
	}

	#dere1{

		flex-direction:column;
	}

	#dere1 p{

		font-size:11px;

		line-height:1.7;
	}
}

/* =====================================
   CELULARES PEQUEÑOS
===================================== */

@media screen and (max-width:480px){

	#dere1 p{

		font-size:11px;
	}
}
/*-- index--*/

video{

	position:fixed;

	top:0;
	left:0;

	width:100%;
	height:100%;

	object-fit:cover;

	object-position:center center;

	z-index:-1;
}
	
#logo{

	width:100%;

	display:flex;

	justify-content:center;

	align-items:center;

	margin-top:4%;
}

/* IMAGEN LOGO */

#logo img{

	width:100%;

	max-width:350px;

	height:auto;

	display:block;
}

/* =========================================
   TABLETS
========================================= */

@media screen and (max-width:991px){

	#logo{

		margin-top:8%;
	}

	#logo img{

		max-width:280px;
	}
}

/* =========================================
   CELULARES
========================================= */

@media screen and (max-width:768px){

	video{

		/* EN MOVIL ENFOCA EL CENTRO */
		object-position:center center;
	}

	#logo{

		margin-top:18%;
		padding:0 15px;
	}

	#logo img{

		max-width:240px;
	}
}

/* =========================================
   CELULARES PEQUEÑOS
========================================= */

@media screen and (max-width:480px){

	#logo{

		margin-top:22%;
	}

	#logo img{

		max-width:210px;
	}
}





/* =====================================
   MENÚ PRINCIPAL
===================================== */

.menu-mc{

	width:100%;
	max-width:1700px;

	margin:5% auto 5px auto;

	display:flex;

	align-items:center;
	justify-content:center;

	text-align:center;

	box-sizing:border-box;

	padding:0 3%;

	flex-wrap:wrap;
}

/* =====================================
   TABLETS
===================================== */

@media screen and (max-width:991px){

	.menu-mc{

		margin-top:40px;

		padding:0 4%;

		justify-content:center;
	}
	.h1{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #238C00;
	font-size: 50px;
	
	}
}

/* =====================================
   CELULARES
===================================== */

@media screen and (max-width:768px){

	.menu-mc{

		width:100%;

		margin-top:25px;

		margin-bottom:15px;

		padding:0 5%;

		flex-direction:column;

		align-items:center;

		justify-content:center;
	}
	.h1{
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #238C00;
	font-size: 30px;
	
	}
}

/* =====================================
   CELULARES PEQUEÑOS
===================================== */

@media screen and (max-width:480px){

	.menu-mc{

		margin-top:20px;

		padding:0 4%;
	}
}


/*-- corporativo --*/

#cabecera{
	background-color:#ddd;
	padding:10px 4%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:15px;
	box-sizing:border-box;
}

/* UBICACIÓN */
.loc{
	display:flex;
	align-items:center;
	gap:8px;
	flex:1;
	min-width:260px;
}

.ico-loc{
	width:15px;
	height:15px;
}

/* EMAIL */
.mail{
	display:flex;
	align-items:center;
	gap:8px;
	flex:1;
	min-width:220px;
}

.ico-mail{
	width:15px;
	height:15px;
}

/* REDES */
.redes-s{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	min-width:160px;
}

.redes-s table{
	width:auto;
}

.redes-s img{
	width:30px;
	height:30px;
	transition:0.3s;
	cursor:pointer;
}

.redes-s img:hover{
	transform:scale(1.1);
}

/* =========================
   CABECERA LOGO
========================= */

#cab2{
	padding:25px 5%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:30px;
	box-sizing:border-box;
}

/* LOGO */
#logo1{
	flex:1;
	min-width:260px;
}

#logo1 img{
	width:100%;
	max-width:270px;
	height:auto;
	display:block;
}

/* HORARIOS Y LLAMADAS */
#horas,
#llamadas{
	display:flex;
	align-items:center;
	gap:12px;
	background:#fff;
	padding:15px 20px;
	border-radius:12px;
	box-shadow:0 8px 20px rgba(0,0,0,0.10);
}

.ico-horas,
.ico-llamadas{
	width:40px;
	height:40px;
}

/* TEXOS */
.p2{
	margin:0;
	line-height:1.4;
	color:#134163;
	font-weight:600;
}

/* =========================
   RESPONSIVE TABLET
========================= */

@media screen and (max-width:992px){

	#cabecera{
		flex-direction:column;
		align-items:center;
		text-align:center;
	}

	.loc,
	.mail{
		justify-content:center;
	}

	.redes-s{
		justify-content:center;
	}

	#cab2{
		flex-direction:column;
		text-align:center;
	}

	#logo1{
		display:flex;
		justify-content:center;
	}

	#horas,
	#llamadas{
		width:280px;
		justify-content:center;
	}
}

/* =========================
   RESPONSIVE CELULARES
========================= */

@media screen and (max-width:576px){

	#cabecera{
		padding:15px 5%;
	}

	.loc,
	.mail{
		min-width:100%;
		font-size:14px;
		text-align:center;
		flex-direction:row;
		justify-content:center;
	}

	.redes-s{
		width:100%;
		justify-content:center;
	}

	#cab2{
		padding:20px 5%;
		gap:20px;
	}

	#logo1 img{
		max-width:220px;
		margin:auto;
	}

	#horas,
	#llamadas{
		width:100%;
		max-width:320px;
		padding:12px 15px;
	}

	.p2{
		font-size:15px;
	}
}


    
.menu-mc1{
	margin-left:5%;
	max-width:1700px;
	display:flex;
	text-align: center;
	margin-top: 0%;
	margin-bottom: 5px;
	position: relative;
	z-index: 9999;
}


/* =====================================
   SECCIÓN INFORMACIÓN
===================================== */

.info{
	width:100%;
	display:flex;
	align-items:stretch;
	justify-content:space-between;
	gap:40px;
	padding:5%;
	box-sizing:border-box;
	background:#f8fafc;
	overflow:hidden;
}

/* =====================================
   TÍTULO
===================================== */

.tit-info{
	width:100%;
	text-align:center;
	margin-top:50px;
	margin-bottom:50px;
}

/* =====================================
   TEXTO IZQUIERDA
===================================== */

.info-descrip{
	flex:1;
	background:#ffffff;
	padding:40px;
	border-radius:20px;
	box-sizing:border-box;
	text-align:justify;
	box-shadow:0 10px 30px rgba(0,0,0,0.08);
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-width:320px;
}

/* =====================================
   IMAGEN DERECHA
===================================== */

.ft-info{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#134163;
	padding:30px;
	border-radius:20px;
	box-sizing:border-box;
	position:relative;
	overflow:hidden;
	min-width:320px;
}

/* CONTENEDOR IMAGEN */

.ft-info-descrip{
	position:relative;
	width:100%;
	max-width:450px;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* =====================================
   ESQUINAS DECORATIVAS
===================================== */

.ft-info-descrip::before,
.ft-info-descrip::after{
	content:"";
	position:absolute;
	width:50px;
	height:50px;
	border:3px solid #ffffff;
	z-index:2;
}

/* SUPERIOR IZQUIERDA */

.ft-info-descrip::before{
	top:-12px;
	left:-12px;
	border-right:none;
	border-bottom:none;
}

/* INFERIOR DERECHA */

.ft-info-descrip::after{
	bottom:-12px;
	right:-12px;
	border-left:none;
	border-top:none;
}

/* =====================================
   IMAGEN
===================================== */

.ft-info-descrip img{
	width:100%;
	height:auto;
	display:block;
	border-radius:12px;
	object-fit:cover;
}

/* =====================================
   TABLETS
===================================== */

@media screen and (max-width:991px){

	.info{
		flex-direction:column;
		padding:8% 5%;
		gap:35px;
	}

	.info-descrip,
	.ft-info{
		width:100%;
		min-width:100%;
	}

	.info-descrip{
		order:2;
		padding:30px;
	}

	.ft-info{
		order:1;
		padding:25px;
	}

	.ft-info-descrip{
		max-width:700px;
		margin:auto;
	}
}

/* =====================================
   CELULARES
===================================== */

@media screen and (max-width:768px){

	.info{
		padding:10% 4%;
		gap:25px;
	}

	.info-descrip{
		padding:25px;
		font-size:15px;
		line-height:1.8;
		border-radius:16px;
	}

	.ft-info{
		padding:18px;
		border-radius:16px;
	}

	.ft-info-descrip::before,
	.ft-info-descrip::after{
		width:35px;
		height:35px;
		border-width:2px;
	}

	.ft-info-descrip::before{
		top:-8px;
		left:-8px;
	}

	.ft-info-descrip::after{
		bottom:-8px;
		right:-8px;
	}
}

/* =====================================
   CELULARES PEQUEÑOS
===================================== */

@media screen and (max-width:480px){

	.info-descrip{
		padding:20px;
		font-size:14px;
	}

	.ft-info{
		padding:15px;
	}
}


/* =====================================
   SECCIÓN MISIÓN / VISIÓN
===================================== */


.info2{
	position: relative;
	overflow: hidden;
	min-height: 500px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 80px 5%;
	box-sizing: border-box;
}

/* =====================================
   FONDO PARALLAX
===================================== */

.info2::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 120%;

	background-image: url("../imagenes/fd-m-v.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

	z-index: -1;

	transform: translateY(var(--parallax, 0px));
}

/* =====================================
   CONTENIDO
===================================== */

.info2-inner{
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 1400px;

	display: flex;
	justify-content: center;
	align-items: stretch;

	gap: 8%;

	flex-wrap: wrap;

	box-sizing: border-box;
}

/* =====================================
   CUADROS
===================================== */

.mision,
.vision{
	flex: 0 0 25%;

	background-color: #fff;

	padding: 2.5%;

	box-sizing: border-box;

	box-shadow: 0 10px 25px rgba(0,0,0,0.2);

	border-radius: 18px;

	opacity: 0;

	transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =====================================
   ANIMACIONES
===================================== */

/* MISION */

.mision{
	transform: translateX(-100px);
}

/* VISION */

.vision{
	transform: translateX(100px);
}

/* ACTIVAR */

.mision.show,
.vision.show{
	opacity: 1;
	transform: translateX(0);
}

/* =====================================
   TABLETS
===================================== */

@media screen and (max-width: 991px){

	.info2{
		padding: 70px 5%;
	}

	.info2-inner{

		gap: 35px;

		flex-direction: column;

		align-items: center;
	}

	.mision,
	.vision{

		flex: none;

		width: 100%;

		max-width: 700px;

		padding: 35px;
	}

	/* EN TABLET Y MÓVIL */

	.mision{
		transform: translateY(60px);
	}

	.vision{
		transform: translateY(60px);
	}

	.mision.show,
	.vision.show{
		transform: translateY(0);
	}
}

/* =====================================
   CELULARES
===================================== */

@media screen and (max-width: 768px){

	.info2{
		padding: 60px 4%;
		min-height: auto;
	}

	.info2::before{

		/* evita errores en móviles */
		background-position: center center;
	}

	.mision,
	.vision{

		width: 100%;

		padding: 25px;

		border-radius: 15px;
	}
}

/* =====================================
   CELULARES PEQUEÑOS
===================================== */

@media screen and (max-width: 480px){

	.info2{
		padding: 50px 4%;
	}

	.mision,
	.vision{
		padding: 20px;
	}
}

.atajos{
	background:  #2f4f88;
	padding: 60px 5%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr; /* compatible DW */
	gap: 30px;
}

			/* TARJETAS */
			.atajos article{
				background: rgba(255,255,255,0.08);
				border-radius: 12px;
				padding: 25px;
				color: #fff;
				backdrop-filter: blur(6px);
				box-shadow: 0 10px 30px rgba(0,0,0,0.15);
				transition: all 0.3s ease;
			}

			/* HOVER ELEGANTE */
			.atajos article:hover{
				transform: translateY(-5px);
				box-shadow: 0 15px 40px rgba(0,0,0,0.25);
			}

			/* TITULOS */
			.tit{
				text-align: center;
				font-weight: 600;
				margin-bottom: 20px;
				letter-spacing: 1px;
			}

			/* LISTA */
			.lista{
				list-style: none;
				padding: 0;
				margin: 0;
			}

			.lista li{
				margin-bottom: 10px;
				padding-left: 10px;
				position: relative;
			}

			/* DETALLE VISUAL */
			.lista li::before{
				content: "";
				color: #;
				position: absolute;
				left: 0;
			}

			/* CONTACTOS */
			.contactos{
				display: flex;
				flex-direction: column;
				align-items: flex-start; /* 👈 mantiene alineación izquierda interna */
				margin: 0 auto;          /* 👈 centra el bloque */
				width: 100%;       
			}
			.item{
				display: flex;
				align-items: flex-start;
				gap: 10px;
				margin-bottom: 15px;
			}

			.item img{
				width: 24px;
				height: 24px;
			}

			/* MAPA */
			.mapa1 iframe{
				width: 100%;
				height: 250px;
				border: 0;
				border-radius: 10px;
			}

			/* RESPONSIVE */
			@media (max-width: 900px){
				.atajos{
					grid-template-columns: 1fr;
				}
}

/* -- especialidades --*/

.especialidades1{
	position: relative;
	padding: 60px 5%;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
	z-index: 1;
}

/* PARALLAX */
.especialidades1::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-image: url("../imagenes/fd-esp1-m.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;

	transform: translateY(var(--parallax, 0px));
}
					
							@media (max-width: 1024px){
								.especialidades1{
									grid-template-columns: 1fr 1fr; 
								}
							}

							@media (max-width: 600px){
								.especialidades1{
									grid-template-columns: 1fr; 
								}
							}


				
	.tit-qt{
		grid-column: 1 / -1;
		text-align: center;
		margin:40px 0;
	}
	.espe{
		background: rgba(255,255,255,0.08);
		border-radius: 12px;
		padding: 25px;
		backdrop-filter: blur(6px);
		box-shadow: 0 10px 30px rgba(0,0,0,0.15);
		transition: all 0.3s ease;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;

	display: block;
	}
	.espe:hover{
		transform: translateY(-5px);
		box-shadow: 0 15px 40px rgba(0,0,0,0.25);
	}
			.ft-medico{
				align-items: center;
				margin-bottom: 2%;
			}
			.ft-medico img{
				width: 100%;
				height: auto;
				border-radius: 12px;
				display: block;
			}
			.nombre-md,
			.tit-md{
				align-items: center;
			}
			.tit-md{
				margin-top:3%;
			}
			.descrip-md{
				padding: 2%;
				text-align: justify;
			}

/*-- especialidades 2 --*/
.especialidades2{
	position: relative;
	padding: 60px 5%;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
	z-index: 1;
}

/* PARALLAX */
.especialidades2::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-image: url("../imagenes/fd-esp2-m.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;

	transform: translateY(var(--parallax, 0px));
}
					
							@media (max-width: 1024px){
								.especialidades2{
									grid-template-columns: 1fr 1fr; 
								}
							}

							@media (max-width: 600px){
								.especialidades2{
									grid-template-columns: 1fr; 
								}
							}
.espe2{
		background: rgba(255,255,255,0.3);
		border-radius: 12px;
		padding: 25px;
		backdrop-filter: blur(6px);
		box-shadow: 0 10px 30px rgba(0,0,0,0.15);
		transition: all 0.3s ease;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;

	display: block;
	}
	.espe2:hover{
		transform: translateY(-5px);
		box-shadow: 0 15px 40px rgba(0,0,0,0.25);
	}
		
.tit-qt2{
		grid-column: 1 / -1;
		text-align: center;
		margin:40px 0;
		border-radius:12px;
		background: rgba(255,255,255,0.08);
		text-shadow: 0.1em 0.1em 0.2em black;
	}
						
						.tit-md2{
							align-items: center;
							text-shadow: 0.1em 0.1em 0.2em black;
						}
						.descrip-md2{
							padding: 2%;
							text-align: justify;
							text-shadow: 0.1em 0.1em 0.2em black;			
						}

/*-- especialidades 3 --*/
.especialidades3{
	position: relative;
	padding: 60px 5%;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
	z-index: 1;
}

/* PARALLAX */
.especialidades3::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-image: url("../imagenes/fd-esp3-m.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;

	transform: translateY(var(--parallax, 0px));
}
					
							@media (max-width: 1024px){
								.especialidades3{
									grid-template-columns: 1fr 1fr; 
								}
							}

							@media (max-width: 600px){
								.especialidades3{
									grid-template-columns: 1fr; 
								}
							}
.tit-qt3{
		grid-column: 1 / -1;
		text-align: center;
		margin:40px 0;
		border-radius:12px;
		background: rgba(255,255,255,0.3);
		text-shadow: 0.1em 0.1em 0.2em black;
	}
							
.espe3{
		background: rgba(6,6,6,0.5);
		border-radius: 12px;
		padding: 25px;
		backdrop-filter: blur(6px);
		box-shadow: 0 10px 30px rgba(0,0,0,0.15);
		transition: all 0.3s ease;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;

	display: block;
	}
	.espe3:hover{
		transform: translateY(-5px);
		box-shadow: 0 15px 40px rgba(0,0,0,0.25);
	}

					.nombre-md3{
							align-items: center;
							text-shadow: 0.1em 0.1em 0.2em black;
						}
					.tit-md3{
							align-items: center;
							text-shadow: 0.1em 0.1em 0.2em black;
						}
					.descrip-md3{
							padding: 2%;
							text-align: justify;
							text-shadow: 0.1em 0.1em 0.2em black;			
						}

/*-- laboratorio --*/



.lab-banner{
	position: relative;
	width: 100%;
	min-height: 100vh;

	background-image: url("../imagenes/ft-lab.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 5%;
	box-sizing: border-box;

	overflow: hidden;
}

/* CAPA OSCURA */
.lab-banner::before{
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,40,80,0.45);
	z-index: 1;
}

/* COLUMNAS */
.lab-left,
.lab-right{
	position: relative;
	z-index: 2;
	width: 35%;
}

/* TEXTO */
.lab-left h2,
.lab-right h2{
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 3vw;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;

	text-shadow: 0 5px 15px rgba(0,0,0,0.6);

	opacity: 0;
	transition: all 1.2s ease;
}

/* ENTRADA IZQUIERDA */
.lab-left h2{
	transform: translateX(-150px);
}

/* ENTRADA DERECHA */
.lab-right h2{
	transform: translateX(150px);
	text-align: right;
}

/* ACTIVACIÓN */
.lab-left h2.active,
.lab-right h2.active{
	opacity: 1;
	transform: translateX(0);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px){

	.lab-banner{
		background-position: center center; /*  muestra centro imagen */
		min-height: 80vh;

		flex-direction: column;
		justify-content: center;
		gap: 50px;

		text-align: center;
	}

	.lab-left,
	.lab-right{
		width: 100%;
	}

	.lab-left h2,
	.lab-right h2{
		font-size: 11vw;
		text-align: center;
	}
}

.info-lab{
	width: 100%;
	padding-bottom: 5%;
}

.tit-lab{
	width: 100%;
	text-align: center;
	margin: 40px 0;
	border-radius: 12px;
	background: rgba(0,0,0,0.1);
	text-shadow: 0.1em 0.1em 0.2em white;
}


/* =========================
   CONTENIDO LABORATORIO
========================= */

.contenido-lab{

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5%;
	width: 100%;
	padding: 0 5%;
	box-sizing: border-box;
}

/* =========================
   TEXTO
========================= */

.descrip-lab{

	width: 55%;
	text-align: justify;
}


/* =========================
   SLIDER
========================= */

.lab-slider{

	position: relative;

	width: 349px;
	height: 418px;

	flex-shrink: 0;

	overflow: hidden;
}

/* SLIDES */

.lab-slide{

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	opacity: 0;

	transform:
		translateX(150px)
		scale(1.1);

	transition:
		opacity 1s ease,
		transform 1.2s ease;
}

/* ACTIVO */

.lab-slide.active{

	opacity: 1;

	transform:
		translateX(0)
		scale(1);
}

/* SALIDA */

.lab-slide.zoom-out{

	opacity: 0;

	transform: scale(0.7);
}

/* IMAGEN */

.lab-slide img{

	width: 100%;
	height: 100%;

	object-fit: cover;

	border-radius: 30px;

	display: block;
}

/* =========================
   RESPONSIVE
========================= */

@media screen and (max-width: 900px){

	.contenido-lab{

		flex-direction: column;
	}

	/* SLIDER ARRIBA */

	.lab-slider{

		order: -1;

		width: 90%;
		max-width: 349px;

		height: auto;

		aspect-ratio: 349 / 418;

		margin-bottom: 30px;
	}

	/* TEXTO */

	.descrip-lab{

		width: 100%;
	}
}
/*-- instalaciones --*/

.inst-banner{
	position: relative;
	width: 100%;
	min-height: 100vh;

	background-image: url("../imagenes/ft-edif.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 5%;
	box-sizing: border-box;

	overflow: hidden;
}

/* CAPA OSCURA */
.inst-banner::before{
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,40,80,0.45);
	z-index: 1;
}

/* COLUMNAS */
.inst-left,
.inst-right{
	position: relative;
	z-index: 2;
	width: 35%;
}

/* TEXTO */
.inst-left h2,
.inst-right h2{
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 3vw;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;

	text-shadow: 0 5px 15px rgba(0,0,0,0.6);

	opacity: 0;
	transition: all 1.2s ease;
}

/* ENTRADA IZQUIERDA */
.inst-left h2{
	transform: translateX(-150px);
}

/* ENTRADA DERECHA */
.inst-right h2{
	transform: translateX(150px);
	text-align: right;
}

/* ACTIVACIÓN */
.inst-left h2.active,
.inst-right h2.active{
	opacity: 1;
	transform: translateX(0);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px){

	.inst-banner{
		background-position: center center; /*  muestra centro imagen */
		min-height: 80vh;

		flex-direction: column;
		justify-content: center;
		gap: 50px;

		text-align: center;
	}

	.inst-left,
	.inst-right{
		width: 100%;
	}

	.inst-left h2,
	.inst-right h2{
		font-size: 11vw;
		text-align: center;
	}
}
.info-inst{
	width: 100%;
	padding-bottom: 5%;
}

			.tit-inst{
				width: 100%;
				text-align: center;
				margin: 40px 0;
				border-radius: 12px;
				background: rgba(0,0,0,0.1);
				text-shadow: 0.1em 0.1em 0.2em white;
			}

/* ===== GALERIA ===== */ 
.galeria-inst{ 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: 35px; 
	padding: 5%; 
	box-sizing: border-box; 
} 
/* ===== TARJETA ===== */ 
.inst-item{ 
	background: #fff; 
	border-radius: 18px; 
	overflow: hidden; 
	box-shadow: 0 10px 30px rgba(0,0,0,0.20); 
	transition: 0.3s; 
} 
/* ===== CONTENEDOR IMAGEN ===== */ 
.inst-img{ 
	position: relative; 
	overflow: hidden; 
	height: 280px; 
	cursor: pointer; 
}
/* IMAGEN */ 
.inst-img img{ 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	display: block; 
	transition: transform 0.6s ease; 
} 
/* EFECTO ZOOM */ 
.inst-item:hover img{ 
	transform: scale(1.12); 
} 
/* ===== TITULO ===== */ 
.inst-titulo{ 
	padding: 22px; 
	font-size: 18px; 
	font-family: "Poppins", sans-serif; 
	color: #134163; 
	text-align: center; 
} 
/* ===== MODAL ===== */ 
.modal-inst{ 
	position: fixed; 
	top: 0; left: 0; 
	width: 100%; 
	height: 100%; 
	background: rgba(0,0,0,0.92); 
	display: none; 
	align-items: center; 
	justify-content: center; 
	z-index: 99999; 
} 
/* IMAGEN MODAL */
.modal-img{ 
	max-width: 90%; 
	max-height: 90%; 
	border-radius: 15px; 
	box-shadow: 0 0 40px rgba(255,255,255,0.15); 
} 
/* CERRAR */ 
.cerrar-inst{ 
	position: absolute; 
	top: 30px; 
	right: 40px; 
	font-size: 60px; 
	color: white; 
	cursor: pointer; 
	font-family: Arial; 
} 
/* ===== RESPONSIVE ===== */
@media screen and (max-width: 1000px){ 
	.galeria-inst{ 
		grid-template-columns: repeat(2, 1fr);
	} 
} 
@media screen and (max-width: 700px){ 
	.galeria-inst{ 
		grid-template-columns: 1fr; 
	} 
	.inst-img{ 
		height: 250px; 
	} 
	.inst-titulo{
		font-size: 22px; 
	} 
}




/*-- contactenos --*/
.datos{
	padding: 4% 5%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;

		}
			.datos1{
				width: 45%;
				display: flex;
				flex-direction: column;
				gap: 25px; /* separación pequeña entre imagen y texto */
			}

			/* IMAGEN */

			.ft-conth{
			width: 100%;
			overflow: hidden;
			border-radius: 16px;
			box-shadow: 0 10px 25px rgba(0,0,0,0.12);
		}

		.ft-conth img{
			width: 100%;
			height: auto;
			display: block;
			border-radius: 16px;
		}

			.ft-conth img:hover{
				transform:scale(1.05);
			}

			/* DESCRIPCION */

			.descrip-conth{
				background: #ffffff;
				padding: 30px;
				border-radius: 18px;
				box-shadow: 0 8px 25px rgba(0,0,0,0.08);
				text-align: justify;
				line-height: 1.8;
			}

			/*==================================
			=        COLUMNA DERECHA           =
			==================================*/

			/* FORMULARIO */
			.datos2{
				width: 55%;
				background: #ffffff;
				padding: 50px;
				border-radius: 25px;
				box-shadow: 0 15px 40px rgba(0,0,0,0.08);
				box-sizing: border-box;
			}

			/* TÍTULO */
			.tit-form{
				text-align: center;
				font-size: 42px;
				font-weight: 700;
				color: #134163;
				margin-bottom: 35px;
			}

			/* FORMULARIO */
			.form-contacto{
				display: flex;
				flex-direction: column;
				gap: 22px;
			}

			/* GRUPOS */
			.form-group{
				display: flex;
				flex-direction: column;
			}

			/* LABELS */
			.form-group label{
				font-size: 17px;
				font-weight: 600;
				color: #134163;
				margin-bottom: 8px;
			}

			/* INPUTS */
			.form-group input,
			.form-group textarea{
				width: 100%;
				padding: 16px 18px;
				border: 1px solid #d0d8e2;
				border-radius: 14px;
				font-size: 16px;
				font-family: Arial, sans-serif;
				background: #f9fbfd;
				box-sizing: border-box;
				transition: all 0.3s ease;
				outline: none;
			}

			/* EFECTO */
			.form-group input:focus,
			.form-group textarea:focus{
				border-color: #134163;
				background: #fff;
				box-shadow: 0 0 12px rgba(19,65,99,0.15);
			}

			/* TEXTAREA */
			.form-group textarea{
				min-height: 180px;
				resize: vertical;
			}

			/* BOTÓN */
			.btn-enviar{
				background: linear-gradient(135deg,#134163,#1d5b87);
				color: #fff;
				border: none;
				padding: 16px;
				border-radius: 14px;
				font-size: 18px;
				font-weight: bold;
				cursor: pointer;
				transition: 0.3s ease;
				box-shadow: 0 10px 25px rgba(19,65,99,0.25);
			}

			.btn-enviar:hover{
				transform: translateY(-3px);
				box-shadow: 0 15px 35px rgba(19,65,99,0.35);
				background: linear-gradient(135deg,#0d2f47,#134163);
			}

					/* RESPONSIVE */
			@media screen and (max-width: 991px){

				.datos{
					flex-direction: column;
				}

				.datos1,
				.datos2{
					width: 100%;
				}

				.ft-conth{
					max-width: 500px;
					margin: 0 auto;
				}
			}

/*-- contestacion-formulario --*/

/* TARJETA */
.confirmacion-box{
	background:#fff;
	padding:60px;
	max-width:800px;
	width:100%;
	border-radius:25px;
	text-align:center;
	box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

/* ICONO */
.icono-check{
	width:110px;
	height:110px;
	background:#134163;
	color:#fff;
	font-size:60px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto 30px auto;
	box-shadow:0 10px 25px rgba(19,65,99,0.25);
}

/* TITULO */
.confirmacion-box h1{
	color:#134163;
	font-size:48px;
	margin-bottom:25px;
}

/* TEXTO */
.confirmacion-box p{
	font-size:22px;
	line-height:1.8;
	color:#444;
	margin-bottom:40px;
}

/* BOTON */
.btn-volver{
	display:inline-block;
	background:#134163;
	color:#fff;
	text-decoration:none;
	padding:16px 35px;
	border-radius:14px;
	font-size:18px;
	font-weight:bold;
	transition:0.3s;
}

.btn-volver:hover{
	background:#0d2f47;
	transform:translateY(-3px);
}

/* RESPONSIVE */
@media screen and (max-width:768px){

	.confirmacion-box{
		padding:35px 25px;
	}

	.confirmacion-box h1{
		font-size:34px;
	}

	.confirmacion-box p{
		font-size:18px;
	}

	.icono-check{
		width:90px;
		height:90px;
		font-size:45px;
	}
}










@media screen and (max-width:1600px){
}