/* =====================================================================
   MEJORAS DE DISEÑO — SELPI
   Se mantiene la paleta de marca existente (#429FFD) y todo el
   contenido/estructura tal cual — solo se pule la presentación.
   ===================================================================== */

/* --- 0) Evita que los navegadores de celular agranden el texto solos
   ("text inflation"), que hace que las letras se vean más grandes de
   lo que el CSS pide, sobre todo en columnas angostas. ------------- */
html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* --- 1) Menú fijo -----------------------------------------------------
   Se usa "fixed" (no "sticky"): fixed no depende de que los
   contenedores padre tengan overflow:visible en toda la cadena, así
   que es inmune a ese problema. El espacio que deja de ocupar el menú
   al salir del flujo normal se compensa con JS (ver js/main.js, función
   ajustarNavFijo), que le agrega el margen exacto a lo que sigue. */
nav.colorlib-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* La franja de teléfonos/redes se colapsa suavemente al scrollear hacia
   abajo (clase agregada por JS), dejando el menú fijo más compacto. */
nav.colorlib-nav .upper-menu {
	max-height: 60px;
	overflow: hidden;
	opacity: 1;
	transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}

nav.colorlib-nav.nav-compacto .upper-menu {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* Menú principal más compacto todavía cuando ya se scrolleó */
nav.colorlib-nav.nav-compacto .top-menu {
	padding-top: 8px;
	padding-bottom: 8px;
	transition: padding 0.25s ease;
}
nav.colorlib-nav.nav-compacto #colorlib-logo {
	font-size: 19px;
	transition: font-size 0.25s ease;
}
nav.colorlib-nav.nav-compacto #colorlib-logo img {
	height: 34px;
	width: auto;
	transition: height 0.25s ease;
}

/* En celular, Carlos pidió que el menú nazca ya compacto (no que
   arranque grande y se achique recién al scrollear) — para ganar
   espacio vertical desde el primer instante, sin depender de que la
   persona haga scroll primero. */
@media screen and (max-width: 750px) {
	nav.colorlib-nav .top-menu {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}
	nav.colorlib-nav #colorlib-logo img {
		height: 34px !important;
		width: auto;
	}
}

nav.colorlib-nav.sin-transicion,
nav.colorlib-nav.sin-transicion .upper-menu,
nav.colorlib-nav.sin-transicion .top-menu,
nav.colorlib-nav.sin-transicion #colorlib-logo {
	transition: none !important;
}

/* --- 1c) Altura explícita del hero en desktop -----------------------
   #colorlib-hero solo tenía min-height (460px) en el CSS original —
   eso no siempre alcanza como base para que un height:100% de los
   hijos resuelva bien. Se agrega una altura explícita igual. */
#colorlib-hero {
	height: 460px;
}

/* --- 8) Carrusel principal: flechas de navegación + mejor legibilidad
   del texto sin tapar tanto la foto ---------------------------------- */

/* En desktop la altura fija (460px) da un banner bien panorámico. En
   celular, esa misma altura sobre un ancho angosto queda casi
   cuadrada — la imagen (pensada en 4:1) se ve recortada/apretada en
   vez de mostrarse alargada como corresponde. Se baja la altura en
   mobile para mantener una proporción más ancha. */
@media screen and (max-width: 750px) {
	#colorlib-hero {
		min-height: 0 !important;
		height: 58vw !important; /* un poco más alto que antes, para que el título tenga margen y nunca se salga por arriba de la foto */
		max-height: 340px !important;
	}
	#colorlib-hero .flexslider,
	#colorlib-hero .flexslider .slides,
	#colorlib-hero .flexslider .slides li {
		height: 100% !important;
		min-height: 0 !important;
	}
	/* El contenedor del texto tenía 460px fijos e intentar igualar esa
	   altura con porcentajes no funciona (hay contenedores intermedios
	   sin altura definida, así que el % no tiene de qué agarrarse).
	   Se ancla directo abajo de la imagen con posición absoluta, que no
	   depende de ningún cálculo de altura en cadena. */
	#colorlib-hero .flexslider .slider-text {
		position: absolute !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		height: auto !important;
		display: block !important;
		opacity: 1 !important;
		padding-bottom: 0 !important;
	}
	#colorlib-hero .flexslider .slider-text > .slider-text-inner {
		display: block !important;
		height: auto !important;
	}
}
@media screen and (max-width: 480px) {
	#colorlib-hero {
		height: 62vw !important;
	}
}

/* Pantallas anchas pero bajas (celular en horizontal): el carrusel
   necesita su propia altura acotada y una letra más chica — si no,
   toma la medida de escritorio (460px / 40px) que no entra. */
@media screen and (max-height: 500px) and (orientation: landscape) {
	#colorlib-hero {
		min-height: 0 !important;
		height: 220px !important;
		max-height: 220px !important;
	}
	#colorlib-hero .flexslider,
	#colorlib-hero .flexslider .slides,
	#colorlib-hero .flexslider .slides li {
		height: 100% !important;
		min-height: 0 !important;
	}
	#colorlib-hero .flexslider .slider-text {
		position: absolute !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		height: auto !important;
		display: block !important;
		opacity: 1 !important;
		padding-bottom: 20px !important;
	}
	#colorlib-hero .flexslider .slider-text > .slider-text-inner {
		display: block !important;
		height: auto !important;
		padding-bottom: 0 !important;
	}
	#colorlib-hero .flexslider .slider-text-inner h1 {
		font-size: 20px !important;
	}
	.selpi-badge .letra-destacada {
		font-size: 1.2em;
	}
}

/* Las flechas venían con "display:none" a propósito en el CSS
   original — se muestran y se les da un estilo simple y consistente
   con la marca. */
#colorlib-hero .flexslider .flex-direction-nav {
	display: block;
}
#colorlib-hero .flexslider .flex-direction-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	opacity: 1;
	color: #fff;
	text-shadow: none;
	font-size: 0; /* oculta el "Previous"/"Next" que agrega flexslider por defecto */
	overflow: hidden;
	transition: background 0.2s ease, transform 0.2s ease;
}
#colorlib-hero .flexslider .flex-direction-nav a:before {
	font-family: 'icomoon' !important;
	font-size: 18px;
	color: #fff;
}
#colorlib-hero .flexslider .flex-direction-nav a.flex-prev:before {
	content: "\e0c2"; /* icon-arrow-left3 */
}
#colorlib-hero .flexslider .flex-direction-nav a.flex-next:before {
	content: "\e0c3"; /* icon-arrow-right3 */
}
#colorlib-hero .flexslider .flex-direction-nav a:hover {
	background: #429FFD;
	transform: scale(1.08);
}
#colorlib-hero .flexslider .flex-direction-nav .flex-prev {
	left: 20px;
}
#colorlib-hero .flexslider .flex-direction-nav .flex-next {
	right: 20px;
}
@media screen and (max-width: 750px) {
	#colorlib-hero .flexslider .flex-direction-nav {
		display: none; /* en celular el swipe ya cubre esto, y ahorra espacio */
	}
}

/* Overlay más liviano (deja apreciar mejor la foto) + sombra en el
   texto para que siga siendo legible sin necesidad de oscurecer toda
   la imagen. */
#colorlib-hero .flexslider .slides li .overlay {
	opacity: 0.12;
	background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.02) 55%, rgba(0,0,0,0.55) 100%);
}

/* El título va abajo, apoyado sobre la imagen (no centrado). Se ancla
   por posición absoluta (igual que en mobile) en vez de depender del
   vertical-align de la celda de tabla, que resulta menos preciso. */
#colorlib-hero .flexslider,
#colorlib-hero .flexslider .slides,
#colorlib-hero .flexslider .slides li {
	height: 100% !important;
}
#colorlib-hero .flexslider .slider-text {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	top: auto !important;
	height: auto !important;
	display: block !important;
	opacity: 1 !important;
	padding-bottom: 5px;
}
#colorlib-hero .flexslider .slider-text > .slider-text-inner {
	display: block !important;
	height: auto !important;
	vertical-align: bottom !important;
	padding: 0 1em !important;
}
#colorlib-hero .flexslider .slider-text-inner h1 {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
	font-weight: 700;
	font-size: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.3em;
}
@media screen and (max-width: 750px) {
	#colorlib-hero .flexslider .slider-text-inner h1 {
		font-size: 22px !important;
		max-width: 100%;
		overflow-wrap: break-word;
		padding: 0 10px;
		box-sizing: border-box;
	}
}
@media screen and (max-width: 480px) {
	#colorlib-hero .flexslider .slider-text-inner h1 {
		font-size: 15px !important;
		gap: 0.25em;
	}
}

/* Badge "SELPI" con la letra de la clave destacada */
.selpi-badge {
	display: inline-flex;
	align-items: baseline;
	background: #e6edf5;
	color: #1a1a1a;
	padding: 4px 16px 6px;
	border-radius: 8px;
	font-weight: 800;
	text-shadow: none !important;
	line-height: 1;
}
/* Salto de línea invisible después del badge — va como elemento
   propio en el HTML (no parte del badge), para no estirarle el fondo. */
.salto-linea {
	flex-basis: 100%;
	height: 0;
}
.selpi-badge .letra-destacada {
	color: #429FFD;
	font-size: 1.35em;
	font-weight: 900;
}
@media screen and (max-width: 750px) {
	.selpi-badge {
		padding: 2px 10px 4px;
		border-radius: 6px;
	}
}

#page {
	transition: padding-top 0.25s ease;
}

/* --- 1b) Menú en celular/tablet: reglas propias y explícitas -------
   En vez de depender del comportamiento original (que tiene conflictos
   de cascada difíciles de rastrear), se fuerza acá directamente:
   franja de teléfonos oculta, ícono de hamburguesa visible, y el panel
   deslizable posicionado de forma fija (no depende del padding de
   #page ni de ningún otro contenedor). */
@media screen and (max-width: 991px) {
	nav.colorlib-nav .upper-menu {
		display: none !important;
	}
	nav.colorlib-nav .menu-1 {
		display: none !important;
	}
	.colorlib-nav-toggle {
		display: block !important;
		position: fixed !important;
		top: 12px !important;
		right: 12px !important;
		z-index: 2100 !important;
	}
	#colorlib-offcanvas {
		display: block !important;
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 270px !important;
		max-width: 80vw;
		background: #1a1a1a !important;
		z-index: 2000 !important;
		overflow-y: auto;
		padding: 75px 30px 40px 30px !important;
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}
	body.offcanvas #colorlib-offcanvas {
		transform: translateX(0) !important;
	}
}

@media screen and (max-width: 991px) {
	.box-wrap {
		margin-top: 20px;
	}
}

/* --- 9) Se sacan los puntitos de navegación inferiores del carrusel
   (quedan solo las flechas en desktop) — dejaban menos lugar para el
   título, que ahora se apoya justo donde estaban ellos. */
#colorlib-hero .flexslider .flex-control-nav {
	display: none !important;
}

/* El título traía una animación "fadeInUp" (se desliza de abajo hacia
   arriba al aparecer) — se desactiva para que quede fijo en su lugar. */
#colorlib-hero .flexslider .slider-text.animated {
	animation: none !important;
	-webkit-animation: none !important;
	transform: none !important;
	opacity: 1 !important;
}
/* El ícono +/- va con posición absoluta a la derecha; sin este espacio
   reservado, un título un poco largo lo termina pisando. */
.panel-heading a {
	padding-right: 50px;
}

/* Generaliza el ancho máximo del texto para que nunca se desborde,
   sea cual sea el ancho de pantalla o contenedor. */
.panel-body {
	max-width: 70em;
	overflow-wrap: break-word;
}

/* --- 2) Scroll suave para los links internos (#propuestas, #sec1...) */
html {
	scroll-behavior: smooth;
}

/* --- 3) Botones: más presencia y una transición prolija ------------ */
.btn-primary,
.btn-secondary,
.btn-learn {
	border-radius: 4px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary:hover,
.btn-learn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(66, 159, 253, 0.35);
}

.btn-secondary {
	background: #fff;
	color: #429FFD;
	border: 2px solid #429FFD;
	border-radius: 4px;
	padding: 10px 22px;
	display: inline-block;
	font-weight: 600;
}

.btn-secondary:hover {
	background: #429FFD;
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(66, 159, 253, 0.25);
}

/* --- 4) Tarjetas de servicios/propuestas: elevación sutil al pasar el mouse */
#colorlib-intro .services,
.colorlib-classes .services {
	background: #fff;
	border-radius: 8px;
	padding: 30px 20px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

#colorlib-intro .box:hover .services,
.colorlib-classes .box:hover .services {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

#colorlib-intro .services .icon i,
.colorlib-classes .services .icon i {
	transition: transform 0.2s ease;
}

#colorlib-intro .box:hover .icon i,
.colorlib-classes .box:hover .icon i {
	transform: scale(1.12);
}

/* --- 10) Color de texto más oscuro (el original usaba "gray", que
   se leía como no del todo negro/legible) — ahora casi negro puro, y
   el tamaño base sube un poco para que se lea mejor en general. ---- */
body {
	color: #1a1a1a;
	font-size: 17px;
}

/* --- 11) Página de curso (curso.php): contenido mucho más ancho que
   antes (usaba solo ~66% del container, centrado) — ahora usa el ancho
   completo, con un margen parejo a los costados (no un tope fijo, que
   se ve desproporcionado según el zoom del navegador). */
.colorlib-curso-wide {
	padding-left: 40px;
	padding-right: 40px;
}
.colorlib-curso-col {
	padding-left: 0;
	padding-right: 0;
}

/* El formulario de inscripción (solo 3 campos) no debe estirarse a
   todo el ancho de la columna, que ahora es mucho más ancha — se lo
   acota y centra por separado. */
#registrar {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 750px) {
	.colorlib-curso-wide {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* --- 12) Banner de página interna (curso, nosotros, sedes, mediateca,
/* --- 12) Banner de página interna (nosotros, sedes, mediateca,
   contacto): es una sola imagen fija, no un carrusel real, así que no
   necesita la altura completa pensada para la home — queda como
   encabezado de página, aprox. la mitad de alto. (curso.php ya no usa
   este banner — tiene su propia imagen más abajo). */
#colorlib-hero.colorlib-hero-simple {
	height: 230px !important;
	min-height: 230px !important;
	max-height: 230px !important;
}
#colorlib-hero.colorlib-hero-simple .flexslider,
#colorlib-hero.colorlib-hero-simple .flexslider .slides,
#colorlib-hero.colorlib-hero-simple .flexslider .slides li {
	height: 100% !important;
}
@media screen and (max-width: 750px) {
	#colorlib-hero.colorlib-hero-simple {
		height: 160px !important;
		min-height: 160px !important;
		max-height: 160px !important;
	}
}

/* Imagen del curso: ahora es una imagen real (no fondo recortado),
   dentro del mismo ancho que el contenido — se ve completa, sin
   recortar el alto, sea cual sea su proporción. */
.curso-imagen-grafico {
	text-align: center;
	margin: 20px 0 25px;
}
.curso-imagen-grafico img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* Imágenes de las tarjetas de curso en "Nuestras Propuestas": el
   .classes-img original recortaba a una altura fija (250px) con
   background-size:cover — ahora es una imagen real, a todo el ancho
   de su tarjeta, sin recortar el alto (queda en la proporción
   panorámica sugerida al cargar el curso). */
.classes-img-link {
	display: block;
}
.classes-img-real {
	width: 100%;
	height: auto;
	display: block;
}
.titulo-tarjeta-curso {
	font-size: 20px;
	font-weight: 500;
	margin: 0 0 10px 0;
}
.titulo-tarjeta-curso a {
	color: #000;
}

/* Título y subtítulo del curso: van siempre debajo de la imagen (ya
   no superpuestos), en todas las pantallas. */
.titulo-curso {
	text-align: left;
	padding: 15px 16px 5px;
}
.titulo-curso h1 {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 8px 0;
	color: #429FFD;
	line-height: 1.3;
}
.titulo-curso h2 {
	font-size: 17px;
	font-weight: 400;
	margin: 0;
	color: #666;
	line-height: 1.4;
}
@media screen and (max-width: 750px) {
	.titulo-curso h1 {
		font-size: 19px;
	}
	.titulo-curso h2 {
		font-size: 14px;
	}
}

/* El contenedor de contenido tenía 4em (64px) de padding arriba/abajo
   pensado para el diseño original — se achica en todas las pantallas. */
.colorlib-classes {
	padding: 1.2em 0;
}

/* --- 5) Acordeón "¿Por qué elegirnos?" / "¿Qué hacemos?": más aire y foco visible */

/* Título del acordeón: 14px se leía muy chico — Carlos pidió 18-20px
   en negrita. */
.panel-heading a {
	font-size: 19px;
	font-weight: 700;
}

/* Cuerpo del acordeón: Carlos pidió que se vea más grande todavía, y
   que cada ítem de la lista tenga separación visible entre sí. */
.panel-body {
	font-size: 18px;
	line-height: 1.6;
}
.panel-body ul li {
	margin-bottom: 16px;
}
.panel-body ul li:last-child {
	margin-bottom: 0;
}
.panel-body ul li br {
	content: "";
	display: block;
	margin-bottom: 8px;
}

/* Cuerpo del acordeón: ya usa 16px / interlineado 1.5 (dentro de lo
   que pidió Carlos), pero en celular el padding + la sangría típica
   de las listas dejaban poco ancho real para el texto — "sobraba
   pantalla en blanco a los costados". Se aprieta ese margen solo en
   mobile, sin tocar el desktop. */
@media screen and (max-width: 750px) {
	.panel-body {
		padding: 1em 0.6em;
	}
	.panel-body ul {
		padding-left: 1.1em;
		margin-left: 0;
	}
	.panel-heading a {
		font-size: 18px;
		padding: 12px 40px 12px 15px;
	}
	/* .about-desc envuelve toda esta sección con 2em (32px) de padding
	   a cada lado — en un celular angosto eso solo ya se come buena
	   parte de la pantalla. Se aprieta bastante más en mobile. */
	#colorlib-intro .about-desc {
		padding: 2em 0.8em 1em 0.8em;
	}
}
.panel-group .panel {
	border: none;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	margin-bottom: 12px;
}

.panel-group .panel-heading a:focus-visible,
.btn:focus-visible,
a:focus-visible {
	outline: 3px solid #429FFD;
	outline-offset: 2px;
}

/* --- 6) Ritmo tipográfico un poco más generoso en los bloques de texto */
#colorlib-intro .about-desc p,
.colorlib-classes p {
	line-height: 1.7;
}

/* --- 7) Respeta a quien prefiere menos movimiento en pantalla ------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn-primary, .btn-secondary, .btn-learn,
	#colorlib-intro .services, .colorlib-classes .services,
	#colorlib-intro .services .icon i, .colorlib-classes .services .icon i {
		transition: none !important;
		transform: none !important;
	}
}

.box-wrap {
	background: #e6edf5;
	padding: 1px 0;
	overflow: visible !important;
	height: auto !important;
	max-height: none !important;
	position: relative;
	z-index: 1;
}
.box-wrap h2 {
	margin: 20px 0;
	overflow: visible !important;
	white-space: normal !important;
	font-size: 26px;
}
@media screen and (max-width: 750px) {
	.box-wrap h2 {
		font-size: 17px;
		margin: 10px 0;
		line-height: 1.3;
	}
}

/* --- 13) Sección "Bienvenid@ a SELPI": título más chico, subtítulo
   más destacado (color de marca + más peso) ------------------------- */
.about-desc h2 {
	font-weight: 700;
	font-size: 26px;
}
.about-desc h3 {
	font-size: 19px;
	font-weight: 800;
	color: #429FFD;
	margin-top: -10px;
}
@media screen and (max-width: 750px) {
	.about-desc h2 {
		font-size: 22px;
	}
	.about-desc h3 {
		font-size: 16px;
	}
	.salto-mobile-metodo {
		display: block;
	}
}

/* Los títulos del acordeón venían forzados a mayúsculas por el CSS
   original del template — Carlos prefiere que se vean tal como están
   escritos (con mayúscula solo al inicio). */
.panel-heading a {
	text-transform: none !important;
}