/* Prevent horizontal scroll on mobile from Bootstrap .row negative margins */
html, body { overflow-x: hidden; }

.container-fluid {
  max-width: 950px !important; /* or 950px */
}



.section21 {width: 100%}
.internalsection21 {max-width: 930px; margin:auto;}
#fichatecnica { padding: 20px; }


.fondoceleste {
	/* background definido en sección CTA BLOCKS abajo */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.tituloceleste {text-align: center; padding-top: 10px; padding-bottom: 10px;}
.blancosombra {
	background-color: white; 
	-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.37);
	-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.37);
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.37);
	border-radius: 0.375rem;     
	transition: all 0.3s ease;
}
.cuadrotitulo {
	padding-top:15px; padding-bottom:15px; background:rgba(20,20,20,0.8);
    padding-left:30px; padding-right: 30px;
    color: white !important;
}
.backgroundimagentitulo{
	text-align:center; background-color:#323e4f; background-size: cover;
      padding-left: 20px; padding-right: 20px;
}
.sombrablanca { 
	-webkit-box-shadow: 4px 4px 4px 0px rgba(255,255,255,0.2);
	-moz-box-shadow: 4px 4px 4px 0px rgba(255,255,255,0.2);
	box-shadow: 4px 4px 4px 0px rgba(255,255,255,0.2);
	border-radius: 0.375rem;     
	transition: all 0.3s ease;
}
.sombranegra { 
	-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
	transition: all 0.3s ease;
}
.listafichatec {padding:15px; padding-top: 25px; color:#3d3d3d; line-height: 1.8em;
				margin:15px;}

	.cta {float:right; width: 220px; margin-bottom:7px; margin-left:10px; 
		  margin-top: -7px;}
	.btncta {width:100%; font-size: 16px; margin-bottom:12px; margin-left:10px;
			 height: 40px;
		     border-top: 1px solid rgba(255, 255, 255, 0.5); }
	@media (min-width: 361px) { .onlymobile { display:none; } }
	@media (max-width: 370px) { .cta { width: 250px; } 	}
	@media (max-width: 330px) { .cta { width: 220px; }  }
	@media (min-width: 362px) and (max-width: 450px) { 
		.cta { width: 160px; }
		.cta2{ width: 290px; } 	}
	@media (max-width: 361px) { .cta{float:left; margin:30px;} 	}
	@media (min-width: 451px) { .cta2 {width: 90%; text-align: center;} .btncta2{width: 40%;}}
	.cta2 {float:none; margin: 30px;}
	.btncta2 {margin-right:12px;}


h4.cursos {
	font-size:16px;
	font-weight: 500;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height: 170%;
	text-align: left;
	color: #505050;
}

.bloqueimagen { width: 100%; text-align: center; padding-top: 20px; }
img.bloqueimagen {width:70%;   aspect-ratio: auto 366 / 274;}
@media (min-width: 700px) {
							.izquierda { float: left; padding-right: 20px; }
							.predominio { width: 60%; }
							img.bloqueimagen { width: 100%; padding:15px; }
							.derecha { float: right; }
							.minidominio { width: 40%; }
							.equaldominio {width:50%;}
}


/* ---- Tamaño de fuente secciones de contenido de cursos ---- */
.bloquetexto h2 { font-size: 22px !important; line-height: 1.35 !important; margin-bottom: 0.5rem !important; }
.bloquetexto h3 { font-size: 18px !important; line-height: 1.4 !important; }
.bloquetexto h4 { font-size: 15px !important; line-height: 1.4 !important; }
.bloquetexto p,
.bloquetexto li { font-size: 16px !important; line-height: 26px !important; }

/* ===== DESCRIPCIÓN ACADÉMICA + PROGRAMA DE ESTUDIO — Layout Mejorado ===== */

/* Padding general del bloque de texto */
.bloquetexto { padding: 24px 0 12px; }

@media (max-width: 699px) {
  /* Bootstrap .row tiene margin: 0 -15px que cancela el padding del container.
     En mobile restauramos el padding para que el contenido no quede pegado al borde. */
  .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .container-fluid > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .bloquetexto {
    padding-left: 0;
    padding-right: 0;
  }
}

/* h2: acento visual con línea inferior navy */
.bloquetexto h2 {
  color: #1a3c6e !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  margin-bottom: 20px !important;
}

/* h4.cursos: label overline — subtítulo de subsección */
.bloquetexto h4.cursos {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #2d6b85 !important;
  margin-top: 20px !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

/* Módulos: lista con tarjetas left-border (quita bullets default) */
.bloquetexto > ul {
  padding-left: 0 !important;
  list-style: none !important;
}
.bloquetexto > ul > li {
  border-left: 3px solid #2d6b85 !important;
  background: #f8fafc !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
  border-radius: 0 6px 6px 0 !important;
  line-height: 1.5 !important;
}
.bloquetexto > ul > li p {
  margin: 3px 0 0 0 !important;
  color: #4a5568 !important;
  font-size: 14px !important;
  line-height: 21px !important;
}
.bloquetexto > ul > li a { color: #1a3c6e !important; }

/* Layout consistente: título en su propia línea (aplica a Descripción y Perfil Profesional) */
.bloquetexto > ul > li > strong:first-child {
  display: block !important;
  color: #2d6b85 !important;
  font-size: 15px !important;
  margin-bottom: 3px !important;
  line-height: 1.4 !important;
}

/* h3: Programa de Estudio — separador visual de subsección */
.bloquetexto h3 {
  color: #1a3c6e !important;
  margin-top: 28px !important;
  padding-top: 22px !important;
  border-top: 1px solid #e2e8f0 !important;
  padding-bottom: 8px !important;
}

/* ---- Accordion Temario (Bootstrap 3 no incluye .card styles) ---- */
.bloquetexto .accordion {
  margin-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.bloquetexto .card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
.bloquetexto .card-header {
  background: transparent !important;
  border: none !important;
  padding: 2px 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}
.bloquetexto .card-header .btn-link {
  color: #1a3c6e !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  padding: 6px 0 !important;
  text-align: left !important;
  flex: 1 !important;
  display: inline !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}
.bloquetexto .card-header .btn-link:hover,
.bloquetexto .card-header .btn-link:focus {
  color: #e3803e !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.bloquetexto .card-header span { /* unidades sin descripción */
  font-size: 14px !important;
  color: #505050 !important;
  padding: 6px 0 !important;
  display: inline-block !important;
  line-height: 1.45 !important;
}
.bloquetexto .card-body {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #4a5568 !important;
  padding: 8px 14px 10px !important;
  background: #f8fafc !important;
  border-radius: 0 0 4px 4px !important;
  margin-bottom: 2px !important;
}

/* Temario CTA al final — callout box sutil */
.bloquetexto p.u-font_size-16px {
  background: #eef4ff !important;
  border: 1px solid #c5d8f7 !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  margin-top: 18px !important;
  display: inline-block !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.bloquetexto p.u-font_size-16px a {
  color: #1a3c6e !important;
  font-weight: 600 !important;
}

#imgmetodologia { width: 600px; margin-bottom: 15px; aspect-ratio: auto 600/344; }
@media (max-width: 725px) {#imgmetodologia{ width: 82%; }}
@media (max-width: 600px) {#imgmetodologia{ width: 100%; }
                           #decursado {display:none;}}


/* ===== CTA BUTTONS — Design System ===== */

/* Primary CTA: orange — único color de acción */
.btncta.inscrahora,
.btncta2.inscrahora {
  background: #e3803e !important;
  background-image: none !important;
  border: 2px solid #e3803e !important;
  border-top: 2px solid #e3803e !important; /* override regla base */
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border-radius: 8px !important;
  letter-spacing: 0.03em !important;
  padding: 10px 22px !important;
  height: auto !important;
  line-height: 1.4 !important;
  margin-left: 0 !important;
  box-shadow: 0 2px 10px rgba(227,128,62,0.35) !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
}
.btncta.inscrahora:hover,
.btncta2.inscrahora:hover,
.btncta.inscrahora:focus,
.btncta2.inscrahora:focus {
  background: #c96b29 !important;
  border-color: #c96b29 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(227,128,62,0.45) !important;
}

/* Secondary CTA: navy ghost */
.btncta.btnmasinfo,
.btncta2.btnmasinfo {
  background: transparent !important;
  background-image: none !important;
  border: 2px solid #1a3c6e !important;
  border-top: 2px solid #1a3c6e !important;
  color: #1a3c6e !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  padding: 9px 20px !important;
  height: auto !important;
  line-height: 1.4 !important;
  margin-left: 0 !important;
  box-shadow: none !important;
  transition: background 0.2s, color 0.2s !important;
}
.btncta.btnmasinfo:hover,
.btncta2.btnmasinfo:hover,
.btncta.btnmasinfo:focus,
.btncta2.btnmasinfo:focus {
  background: #3a8aab !important;
  color: #ffffff !important;
  border-color: #1a3c6e !important;
}

/* Enrollment form submit button */
.enrollment-form .btn-primary,
#btninscrip {
  background: #e3803e !important;
  background-image: none !important;
  border-color: #e3803e !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 2px 10px rgba(227,128,62,0.35) !important;
  transition: background 0.2s, box-shadow 0.2s !important;
}
.enrollment-form .btn-primary:hover,
#btninscrip:hover {
  background: #c96b29 !important;
  border-color: #c96b29 !important;
  box-shadow: 0 4px 14px rgba(227,128,62,0.45) !important;
}


.bordeform {
	border-left: thin; 
	border-left-width: thin; 
	border-left-style: initial;
    border-left-color: #999999;
    border-right: groove;
    border-right-color: #999999;}

#xfi {	background-color: rgb(240,240,240); 
		/*overflow:auto;*/
		/*overflow-y: scroll;*/
		overflow-x: hidden;
		padding: 10px 20px 20px 20px; 
		border-radius: 0px 0px 23px 23px;
        border-bottom-style: groove; border-bottom-color: #999999;}

#header_xfi {background-color: #3F97BA; border-radius: 23px 23px 0px 0px; padding: 7px; color: white;}

.descripxfi {padding-top: 15px; padding-bottom: 20px; margin-right: 10px;}
.descripxfi p { margin: 0 0 7px 0; color:#092A49; }
#decursado {}
@media (max-width: 725px) {#imgmetodologia{ width: 82%; }}


/* ===== CTA BLOCKS — Layout & Backgrounds ===== */
/* Todos los bloques CTA usan navy strip — narrow y wide (Opción A) */

.cta:not(.cta2),
.fondoceleste {
  background: #2d6b85 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18) !important;
}

/* Narrow: padding interno + full width */
.cta:not(.cta2) {
  padding: 18px 16px !important;
  width: 100% !important;
}

/* Wide (fondoceleste): padding muy compacto */
.fondoceleste {
  padding: 12px 24px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Títulos dentro del bloque wide → blanco */
.fondoceleste .tituloceleste {
  color: #ffffff !important;
}

/* Ghost secondary btn → white outline (sobre fondo navy) */
.cta:not(.cta2) .btncta.btnmasinfo,
.cta:not(.cta2) .btncta2.btnmasinfo,
.fondoceleste .btncta.btnmasinfo,
.fondoceleste .btncta2.btnmasinfo {
  border-color: rgba(255, 255, 255, 0.55) !important;
  border-top-color: rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
  background: transparent !important;
}
.cta:not(.cta2) .btncta.btnmasinfo:hover,
.cta:not(.cta2) .btncta2.btnmasinfo:hover,
.cta:not(.cta2) .btncta.btnmasinfo:focus,
.cta:not(.cta2) .btncta2.btnmasinfo:focus,
.fondoceleste .btncta.btnmasinfo:hover,
.fondoceleste .btncta2.btnmasinfo:hover,
.fondoceleste .btncta.btnmasinfo:focus,
.fondoceleste .btncta2.btnmasinfo:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  color: #ffffff !important;
}



/* ===== SECTION BACKGROUNDS — Ritmo visual ===== */

/* Default: gris frío suave */
.sectiongris {
  background: #f4f7f9;
  padding: 28px 0 36px;
}

/* Perfil Profesional: mint teal */
.section-teal-tint {
  background: #f0f8fa;
  padding: 28px 0 36px;
}

/* Metodología: crema cálida — contrasta con los fríos adyacentes */
.section-warm-white {
  background: #fdf9f4;
  padding: 28px 0 40px;
}

/* FAQ: azul marca tenue */
.section-blue-tint {
  background: #eef4ff;
  padding: 40px 0;
}