/**
 * ISEP — carga al final de la cola de estilos (prioridad 999 en functions.php).
 * Gana a: Bootstrap 5 CDN, style.css, plugins (CF7, block-library, etc.).
 */

/* -------------------------------------------------------------------------- */
/* Enlaces: Bootstrap 5 Reboot subraya <a> por defecto; isep.es no lo hace así */
/* -------------------------------------------------------------------------- */
#page a,
#page a:link,
#page a:visited,
footer#colophon a,
footer#colophon a:link,
footer#colophon a:visited {
	text-decoration: none !important;
}

#page a:hover,
#page a:focus,
footer#colophon a:hover,
footer#colophon a:focus {
	text-decoration: none !important;
}

/* -------------------------------------------------------------------------- */
/* Carrusel: indicadores = círculos (anular barras 30×3 px de BS5 en botones) */
/* -------------------------------------------------------------------------- */
#carousel-home-top .carousel-indicators,
#carousel-openday-top .carousel-indicators,
#carousel-reviews .carousel-indicators {
	position: absolute !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	width: 60% !important;
	max-width: 100% !important;
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 0 !important;
	flex-wrap: wrap !important;
	list-style: none !important;
	z-index: 20 !important;
}

/* Botón nativo: reset completo para que border-radius sea circular */
#carousel-home-top .carousel-indicators button,
#carousel-openday-top .carousel-indicators button {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: content-box !important;
	display: inline-block !important;
	flex: 0 0 auto !important;
	width: 10px !important;
	min-width: 10px !important;
	max-width: 10px !important;
	height: 10px !important;
	min-height: 10px !important;
	max-height: 10px !important;
	padding: 0 !important;
	margin: 2px 5px !important;
	line-height: 0 !important;
	font-size: 0 !important;
	overflow: hidden !important;
	text-indent: -9999px !important;
	cursor: pointer !important;
	vertical-align: middle !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: #fff !important;
	border-radius: 50% !important;
	background-color: transparent !important;
	background-image: none !important;
	opacity: 0.55 !important;
	box-shadow: none !important;
	transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease !important;
}

#carousel-home-top .carousel-indicators button.active,
#carousel-openday-top .carousel-indicators button.active {
	width: 12px !important;
	min-width: 12px !important;
	max-width: 12px !important;
	height: 12px !important;
	min-height: 12px !important;
	max-height: 12px !important;
	margin: 0 5px !important;
	background-color: #fff !important;
	border-color: #fff !important;
	opacity: 1 !important;
}

/* Testimonios: puntos grises (fondo claro) */
#carousel-reviews .carousel-indicators button {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: content-box !important;
	width: 14px !important;
	height: 14px !important;
	min-width: 14px !important;
	min-height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
	padding: 0 !important;
	margin: 0 5px !important;
	line-height: 0 !important;
	font-size: 0 !important;
	border: 3px solid #fff !important;
	border-radius: 50% !important;
	background-color: #d8d8d8 !important;
	background-image: none !important;
	opacity: 1 !important;
	box-shadow: none !important;
}

#carousel-reviews .carousel-indicators button.active {
	background-color: #183861 !important;
	border-color: #d8d8d8 !important;
}

/* -------------------------------------------------------------------------- */
/* Flechas: posición absoluta explícita por ID (mitad vertical del carrusel)   */
/* -------------------------------------------------------------------------- */
#carousel-home-top.carousel,
#carousel-openday-top.carousel {
	position: relative !important;
}

#carousel-home-top .carousel-control-prev,
#carousel-home-top .carousel-control-next,
#carousel-openday-top .carousel-control-prev,
#carousel-openday-top .carousel-control-next {
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	width: 15% !important;
	max-width: 120px !important;
	min-width: 48px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 12 !important;
}

#carousel-home-top .carousel-control-prev,
#carousel-openday-top .carousel-control-prev {
	left: 0 !important;
	right: auto !important;
}

#carousel-home-top .carousel-control-next,
#carousel-openday-top .carousel-control-next {
	right: 0 !important;
	left: auto !important;
}

#carousel-openday-top .carousel-control-prev img,
#carousel-openday-top .carousel-control-next img {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	margin: 0 !important;
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
}

#carousel-home-top .carousel-control-prev-icon,
#carousel-home-top .carousel-control-next-icon {
	flex-shrink: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Especificidad máxima (Contact Form 7, WP, etc. suelen usar button { … !important }) */
/* -------------------------------------------------------------------------- */
div#carousel-home-top.carousel div.carousel-indicators>button[type="button"],
div#carousel-openday-top.carousel div.carousel-indicators>button[type="button"] {
	border-radius: 50% !important;
	width: 10px !important;
	height: 10px !important;
	min-width: 10px !important;
	min-height: 10px !important;
	max-width: 10px !important;
	max-height: 10px !important;
	padding: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

div#carousel-home-top.carousel div.carousel-indicators>button[type="button"].active,
div#carousel-openday-top.carousel div.carousel-indicators>button[type="button"].active {
	width: 12px !important;
	height: 12px !important;
	min-width: 12px !important;
	min-height: 12px !important;
	max-width: 12px !important;
	max-height: 12px !important;
}

div#carousel-reviews.carousel div.carousel-indicators>button[type="button"] {
	border-radius: 50% !important;
	width: 14px !important;
	height: 14px !important;
	min-width: 14px !important;
	min-height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
}

div#carousel-home-top.carousel>a.carousel-control-prev,
div#carousel-home-top.carousel>a.carousel-control-next,
div#carousel-openday-top.carousel>a.carousel-control-prev,
div#carousel-openday-top.carousel>a.carousel-control-next {
	top: 0 !important;
	bottom: 0 !important;
	align-items: center !important;
	justify-content: center !important;
}

/* -------------------------------------------------------------------------- */
/* Cabecera: franja azul superior (como isep.es). Carga al final para ganar a */
/* .myHeader { background: #fff } y a reglas de plugins.                     */
/* -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	#page .myHeader>.sticky-header.isep-topbar-blue {
		background-color: #163264 !important;
		color: #ffffff !important;
	}

	#page .myHeader .isep-topbar-blue .fa-phone {
		color: #ffffff !important;
	}
}

/* -------------------------------------------------------------------------- */
/* Hero taxonomías (ej. /cursos/cursos-neurociencias/): migas centradas como   */
/* isep.es. BS5 .row es flex y empuja el .container a la izquierda.          */
/* -------------------------------------------------------------------------- */
.imagen-principal #breadcrumbs .row {
	justify-content: center;
	--bs-gutter-x: 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

.imagen-principal #breadcrumbs .row>.container {
	margin-left: auto !important;
	margin-right: auto !important;
}

.imagen-principal #breadcrumbs ul.breadcrumb {
	justify-content: center !important;
	margin-bottom: 0 !important;
}

.imagen-principal #breadcrumbs .breadcrumb>li+li::before,
.imagen-principal #breadcrumbs .breadcrumb>li+li:before {
	padding-left: 0.4rem;
	padding-right: 0.4rem;
}

/* ============================================================ */

/* ============================================================
   LISTAS Y PÁRRAFOS
   Resetea el padding/margin por defecto de Bootstrap 5
   que desplazaba las listas hacia la izquierda
   ============================================================ */
ul,
ol {
	padding-left: 20px;
	margin-left: 0;
}

/* ============================================================
   VÍDEOS RESPONSIVE
   Hace que los iframes de YouTube/Vimeo sean responsivos
   manteniendo la proporción 16:9
   ============================================================ */
.wp-block-embed,
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}

.wp-block-embed iframe,
.video-container iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

/* ============================================================
   CAJA DIRECCIÓN CENTRO
   Centra el contenido de las cajas de dirección de centros
   ============================================================ */
.caja-direccion-centro {
	padding: 6px !important;
	margin-top: 80px;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
}

/* ============================================================
   SCROLL HORIZONTAL
   Oculta el scroll horizontal causado por los submenús
   que se posicionaban fuera de pantalla en Bootstrap 5
   ============================================================ */
body {
	overflow-x: hidden;
}

/* ============================================================
   LISTAS DENTRO DE TABS (VCComposer)
   Resetea el margin de las listas dentro de los paneles
   de pestañas para que no se desplacen a la izquierda
   ============================================================ */
.vc_tta-panels-container ul {
	margin-left: 0;
}

/* ============================================================
   TACHADO
   Bootstrap 5 no aplica text-decoration a <del> por defecto
   ============================================================ */
del {
	text-decoration: line-through;
}

/* ============================================================
   TABLAS EN PANELES (VCComposer)
   Añade separadores entre filas de tablas dentro de pestañas
   (ej: tabla de precios en Campus Internacional)
   ============================================================ */
.vc_tta-panel-body table tr {
	border-bottom: 1px solid #dee2e6;
}

/* ============================================================
   TESINAS - GRID
   Bootstrap 5 no reconoce col-xs-* de Bootstrap 3.
   Se reconstruye el grid con flexbox para mostrar
   las tesinas en 4 columnas (2 en móvil)
   ============================================================ */
#tesinas_slide {
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

#tesinas_slide>div {
	width: 25%;
	flex: 0 0 25%;
}

@media (max-width: 576px) {
	#tesinas_slide>div {
		width: 50%;
		flex: 0 0 50%;
	}
}

/* ============================================================
   TESINAS - DEGRADADO
   El div .mostrartesinas crea el efecto de fade/blur
   en la última fila de tesinas para indicar que hay más
   ============================================================ */
.mostrartesinas {
	height: 340px;
	width: 100% !important;
	left: 0 !important;
}

/* ============================================================
   TESINAS - TIPOGRAFÍA DE LOS TÍTULOS
   Restaura el estilo original de los títulos de las tesinas
   ============================================================ */
div#tesinas_slide>div h5 {
	padding: 50px 62px 0px 50px;
	color: #f8f7f7;
	word-wrap: normal;
	font-size: 24px;
	line-height: 28px;
	font-family: 'Source Serif Pro', serif !important;
}

/* ============================================================
   PADDING TÍTULOS DE SLIDERS POR TAXONOMÍA
   En Bootstrap 3 el layout dejaba más espacio a la izquierda.
   Se compensa con padding-left por cada categoría
   ============================================================ */
.term-psicologia-clinica #title_slider_3,
.term-psicologia-clinica #title_slider_1,
.term-educacion #title_slider_1,
.term-neuropsicologia #title_slider_1,
.term-neurociencias #title_slider_1 {
	padding-left: 60px;
}

/* ============================================================
   LISTAS DENTRO DE WPBAKERY - EXCEPTO VISADOS
   Bootstrap 5 desplazaba las listas demasiado a la izquierda
   en las páginas con WPBakery. Se excluye /visados/ porque
   allí la lista necesita su margin original
   ============================================================ */
body:not(.page-id-19183) #curso .wpb_wrapper ul {
	margin-left: -20px;
}

/* ============================================================
   PÁGINA CONOCE ISEP - CLAUSTRO
   Los h4 de los nombres del claustro salían demasiado grandes
   ============================================================ */
.page-id-103 .vc_tta-panel-body h4 {
	font-size: 20px;
}

/* ============================================================
   PÁGINA ISEP EN CIFRAS - BLOCKQUOTE
   Restaura el estilo de blockquote con barra lateral izquierda
   y ajusta el tamaño del h2
   ============================================================ */
.page-id-33525 blockquote h2 {
	font-size: 30px;
	margin-left: -25px;
}

.page-id-33525 blockquote {
	border-left: 4px solid #ccc;
	padding-left: 10px;
}

/* ============================================================
   BOTÓN PRIMARY
   Bootstrap 5 cambió los colores por defecto del btn-primary.
   Se restauran los colores originales de Bootstrap 3
   ============================================================ */
.btn-primary {
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
}

@media (max-width: 1500px) {
	#colophon .navigation-footer #footer-menu.menu {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}
}

#colophon .navigation-footer #footer-menu.menu li a {
	white-space: nowrap;
}

#colophon .navigation-footer nav {
	width: 100%;
}

/* ============================================================
   FOOTER - SECCIÓN DE REDES SOCIALES
   Fuerza que la sección de redes sociales tenga altura mínima
   y sea visible (Bootstrap 5 la colapsaba)
   ============================================================ */
.footer-3 {
	min-height: 102px !important;
	display: block !important;
}

/* ============================================================
   CARRUSEL REVIEWS - INDICADORES
   Bootstrap 5 convierte los indicadores en barras rectangulares.
   Se restauran como círculos pequeños
   ============================================================ */
div#carousel-reviews.carousel div.carousel-indicators>button[type="button"] {
	border-radius: 50% !important;
	width: 10px !important;
	height: 10px !important;
	min-width: 10px !important;
	min-height: 10px !important;
	max-width: 10px !important;
	max-height: 10px !important;
}

/* ============================================================
   GRID - GUTTER
   Bootstrap 5 añade gutter (espacio entre columnas) por defecto.
   Se elimina para replicar el comportamiento de Bootstrap 3
   ============================================================ */
.row {
	--bs-gutter-x: 0px;
}

/* ============================================================
   SUBRAYADO DE ENLACES
   Bootstrap 5 subraya todos los <a> por defecto (Reboot CSS).
   Se elimina el subrayado global y se añade SOLO en hover
   para los elementos que lo necesitan, respetando el diseño
   original de isep.es
   ============================================================ */

/* BASE: sin subrayado en ningún sitio */
a {
	text-decoration: none !important;
}

/* HOVER: elementos que SÍ deben subrayarse */
a:hover,
a:focus,
footer#colophon a:hover,
footer#colophon a:focus,
#caixa_resum a:hover,
#caixa_resum a:focus,
.carousel-caption a:hover,
.singlemaster a:hover h3,
.singlemaster a:hover p,
#page .events a:hover,
#page .events a:focus,
#page .ultimasnoticias a:hover,
#page .ultimasnoticias a:focus,
.events a:hover,
.ultimasnoticias a:hover,
.losventos .content a:hover h3,
.losventos .content a:hover p,
.losventos .noticialink:hover,
.losventos .vertodo:hover,
.losventos .date a:hover,
#page .btn-campus-virtual:hover,
#page .btn-llama-gratis:hover,
#page .nombre-testimonial a:hover,
#page .singlemaster a:hover h3,
#page .title_slider a:hover,
#page .col-12.caixa-sede a:hover,
#page .breadcrumb a:hover,
#page .breadcrumb a:focus,
#page .wpb_raw_code.wpb_content_element.wpb_raw_html a:hover,
#page .wpb_text_column.wpb_content_element a:hover,
#page .carousel-caption p a:hover,
#page .carousel-caption p a:focus,
#page .losventos .ultimasnoticias .content>div .noticialink,
#page .losventos .cursomes .noticialink,
#page .losventos .events .noticialink,
#page .losventos .cursomes .noticialink:hover,
#page .losventos .events .noticialink:hover,
#page .losventos .ultimasnoticias .content>div .noticialink:hover,
#page .container.submenu_editorial a:hover {
	text-decoration: underline !important;
}

/* EXCEPCIÓN: elementos que NUNCA deben subrayarse aunque
   hereden la regla de hover anterior */
.singlemaster a div {
	pointer-events: none;
}

#site-navigation a:hover,
#site-navigation a:focus,
.sticky-header a:hover,
.sticky-header a:focus,
#caixa_resum h4 a:hover,
#caixa_resum h4 a:focus,
.logo a:hover,
.logo a:focus,
body.page-id-616 .vc_tta-tabs-list .vc_tta-tab a:hover,
body.page-id-616 .wpb_raw_code.wpb_content_element.wpb_raw_html a:hover,
.vc_btn3-container.vc_btn3-inline a:hover,
#caixa_resum h2 a:hover,
#caixa_resum h2 a:focus {
	text-decoration: none !important;
}

/* ============================================================
   FORMULARIO "SOLICITA INFORMACIÓN"
   El texto del formulario colapsable se comprimía.
   Se restaura con flex para que ocupe el espacio disponible
   ============================================================ */
.new_master_franja_icon_right p {
	margin: 0;
}

.new_master_franja_icon_right {
	flex: 1;
	min-width: 0;
}

/* ============================================================
   BREADCRUMB - SEPARADORES
   Añade espaciado entre el separador ">" y los textos
   ============================================================ */
.container .breadcrumb li+li:before {
	margin-left: 3px;
	margin-right: 3px;
}

/* ============================================================
   HEADER - LOGO
   En Bootstrap 5 el logo y el texto se apilaban verticalmente.
   Se fuerza disposición horizontal como en isep.es
   ============================================================ */
.header-toptop .logo {
	display: flex;
	align-items: center;
	flex-direction: row;
}

.header-toptop .logo a {
	display: flex;
	align-items: center;
	flex-direction: row;
	white-space: nowrap;
}

.header-toptop .logo img {
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: 90px !important;
}

.header-toptop .logo p {
	white-space: nowrap;
	font-size: 17px;
}

/* ============================================================
   PÁGINA CERTIFICADOS - PULLQUOTE
   Restaura la barra lateral izquierda del bloque pullquote
   ============================================================ */
.page-id-29405 .wp-block-pullquote blockquote {
	border-left: 4px solid #ccc;
	padding-left: 15px;
}

/* ============================================================
   COLUMNAS DE CONTENIDO
   Bootstrap 5 eliminó el padding lateral de las columnas
   que Bootstrap 3 incluía por defecto
   ============================================================ */
.col-12.col-sm-8,
.col-12.col-sm-4 {
	padding-left: 15px;
	padding-right: 15px;
}

.col-sm-8,
.col-sm-4 {
	padding-left: 15px;
}

/* ============================================================
   PÁGINA VISADOS - LISTAS
   En esta página las listas necesitan su indentación normal
   ya que el contenido es diferente al resto
   ============================================================ */
.page-id-19183 .wpb_wrapper ul {
	margin-left: 20px !important;
	padding-left: 0 !important;
}

/* ============================================================
   SECCIÓN LOSVENTOS (Curso del mes, Eventos, Últimas Noticias)
   Elimina el espacio entre las columnas de esta sección
   ============================================================ */
.losventos .row {
	gap: 0;
}

.losventos .col-12 {
	padding-left: 0;
	padding-right: 0;
}

/* ============================================================
   MENÚ INTERNO CURSOS - HOVER
   Añade un hover sutil al menú interno de cursos
   ============================================================ */
#menu-interno-cursos .nav-link:hover {
	background-color: rgb(232, 230, 230) !important;
	text-decoration: none !important;
}

/* ============================================================
   Compensaciones para desktop solamente
   ============================================================ */

@media (min-width: 768px) {
	#masthead2 {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
	}

	.sticky-header {
		margin-left: 0;
		width: 100%;
	}

	.myHeader {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0px !important;
	}

	.container-fluid>.row>.imagen-principal {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: none;
	}

	#curso {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.page-child.parent-pageid-10 {
		margin-left: -12px;
		margin-right: -12px;
	}

	#colophon>.navigation-footer.container {
		padding-left: 200px !important;
		padding-right: 200px !important;
		box-sizing: border-box;
	}

	#colophon .navigation-footer #footer-menu.menu {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 0;
		width: 100%;
	}
}

/* ============================================================
   PÁGINA MASTER - PADDING ENTRE CURSOS
   ============================================================ */
.singlemaster {
	padding: 0 10px 20px 10px;
}

/* ============================================================
   MODIFICACIONES MÓVIL
   ============================================================ */
@media (max-width: 767px) {

	.navigation-top.container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100% !important;
		margin-top: -21px !important;
	}

	.blog .navigation-top.container {
		padding-left: 0 !important;
		margin-left: -30px !important;
	}

	.page-child.parent-pageid-10 .navigation-top.container {
		padding-left: 0 !important;
		margin-left: -12px !important;
	}

	#colophon>.navigation-footer.container {
		padding-right: 40px !important;
	}

	.blog .logo {
		margin-top: 20px !important;
	}

	.dropdown-toggle::after {
		display: none !important;
	}

	#carousel-home-top .carousel-item {
		min-height: 400px;
	}

	#carousel-home-top .carousel-caption {
		position: relative !important;
		top: auto !important;
		bottom: auto !important;
		padding: 50px !important;
	}

	.logo {
		display: none !important;
	}

	div#menu-editorial {
		margin-top: 30px;
	}

	div#cintillo-becas {
		margin-top: 60px !important;
	}

	.blog div#cintillo-becas {
		margin-left: 15px !important;
		margin-top: 20px !important;
	}

	.page-child.parent-pageid-10 div#cintillo-becas {
		margin-top: -30px !important;
	}

	.has-header-image.page-two-column .imagen-principal,
	.tax-area .imagen-principal {
		margin-top: 60px !important;
	}

	#caja_img_cusro {
		height: 100px !important;
		overflow: visible !important;
	}

	#caja_text_curso {
		position: static !important;
		background: white !important;
		padding: 15px !important;
		width: 100% !important;
	}

	.caixa_submenu {
		margin-top: 500px !important;
	}
}

/* ============================================================ */

/* ============================================================
   CAROUSEL-ITEM COMPATIBILITY (BS3 .item → BS5 .carousel-item)
   El style.css del tema usa .item pero BS5 usa .carousel-item.
   Duplicamos las reglas para que funcionen con el nuevo markup.
   ============================================================ */
.carousel-inner>.carousel-item>img,
.carousel-inner>.carousel-item>a>img {
	width: 100% !important;
}

.carousel-fade .carousel-inner .carousel-item {
	opacity: 0;
	transition: opacity .3s;
}

.carousel-fade .carousel-inner .carousel-item.active {
	opacity: 1;
}

/* Asegurar que las imágenes de fondo cubran el slide */
.carousel-item[style*="background-image"] {
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

#carousel-openday-top .carousel-item,
#carousel-reviews .carousel-item {
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* ============================================================
   CENTRAR LOGO + MENÚ (como en producción)
   ============================================================ */

/* El logo se corta por el sticky-header fijo.
   Añadimos margin-top para empujarlo por debajo.
   Eliminamos padding de container-fluid para que el carrusel
   sea full-width como en producción. */
#page.container-fluid {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* BS3 usaba .container { width: 1170px } pero el tema lo
   sobreescribe a max-width: 100%. Restauramos el ancho de producción. */
.container {
	max-width: 1170px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.header-toptop {
	overflow: visible !important;
	margin-top: 45px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

/* Logo - mantener float original del tema */

/* Centrar la barra de navegación */
.navigation-top.container {
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

#site-navigation.main-navigation {
	width: 100% !important;
	text-align: center !important;
}

ul#top-menu {
	display: flex !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	padding-left: 0 !important;
}

/* ============================================================
   FIX 1: CARRUSEL PRINCIPAL - IMAGEN DUPLICADA
   El carousel-item tiene background-image + <img> visible.
   Ocultamos el <img> para que solo se vea el background.
   opacity:0 mantiene la altura del slide.
   ============================================================ */
#carousel-home-top .carousel-item img {
	opacity: 0 !important;
}

/* ============================================================
   FIX 4: HUECO ENTRE MENÚ Y CARRUSEL
   En producción hay un pequeño gap entre la nav y el slider.
   ============================================================ */
#sliderhome {
	margin-top: 20px !important;
}

/* ============================================================
   WPBAKERY / VC TABS — Compatibilidad con Bootstrap 5
   Bootstrap 5 aplica ".collapse:not(.show) { display: none }"
   lo que oculta los paneles de pestañas de WPBakery/VC que usan
   su propio sistema de show/hide basado en la clase .vc_active.
   Estas reglas restauran el comportamiento original de BS3.
   ============================================================ */

/* Los paneles inactivos deben estar ocultos (VC tabs lo maneja) */
.vc_tta-panels .vc_tta-panel {
	display: none !important;
}

/* El panel activo debe mostrarse */
.vc_tta-panels .vc_tta-panel.vc_active {
	display: block !important;
}

/* El body del panel activo debe ser visible (no colapsado) */
.vc_tta-panel.vc_active > .vc_tta-panel-body {
	display: block !important;
	height: auto !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Los paneles heading (accordion mode) también deben mostrarse */
.vc_tta-panel > .vc_tta-panel-heading {
	display: block !important;
}

/* Asegurar que el contenedor de paneles sea visible */
.vc_tta-panels-container,
.vc_tta-panels {
	display: block !important;
	overflow: visible !important;
}

/* VC Carousel (carrusel de imágenes dentro de tabs) */
.vc_images_carousel .vc_carousel-inner {
	overflow: hidden !important;
}

.vc_images_carousel .vc_carousel-slideline {
	display: block !important;
}

.vc_images_carousel .vc_carousel-slideline-inner {
	display: flex !important;
}

/* VC Tab navigation: tab activo con estilo */
.vc_tta-tabs-list .vc_tta-tab.vc_active > a {
	cursor: default;
}

/* ============================================================
   BOOTSTRAP 3 → 5: col-xs-* (eliminado en BS5)
   En Bootstrap 3, col-xs-* era el breakpoint base (< 576px).
   En Bootstrap 5 ese rol lo cumple col-* (sin prefijo).
   El tema usa col-xs-* en 43+ plantillas, así que añadimos
   las equivalencias CSS en lugar de modificar cada archivo.
   ============================================================ */
.col-xs-1  { flex: 0 0 auto; width: 8.33333%; }
.col-xs-2  { flex: 0 0 auto; width: 16.66667%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }
.col-xs-4  { flex: 0 0 auto; width: 33.33333%; }
.col-xs-5  { flex: 0 0 auto; width: 41.66667%; }
.col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-7  { flex: 0 0 auto; width: 58.33333%; }
.col-xs-8  { flex: 0 0 auto; width: 66.66667%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

/* ============================================================
   BOOTSTRAP 3 → 5: .img-responsive (renombrado a .img-fluid)
   Usado en single.php para imágenes de contenido
   ============================================================ */
.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ============================================================
   BOOTSTRAP 3 → 5: Glyphicons (eliminados en BS5)
   El tema usa glyphicon-menu-hamburger para el menú móvil.
   Se recrea el icono con CSS puro (tres líneas horizontales).
   ============================================================ */
.glyphicon {
	position: relative;
	display: inline-block;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

.glyphicon-menu-hamburger {
	width: 20px;
	height: 16px;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
}

.glyphicon-menu-hamburger::before,
.glyphicon-menu-hamburger::after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentColor;
}

.glyphicon-menu-hamburger::before {
	box-shadow: 0 7px 0 currentColor;
}