/**************** HEADER ************************/
.headerBand {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1000;
	transition: var(- -transition);
	top: 0;
	background-color: #FCFCFC;
	box-shadow: 1px 5px 16px rgba(0, 0, 0, 0.3);
}

.logoinicio {
	width: 25%;
	position: relative;
	float: left;
	padding: 2em;
}

.box-usuario {
	position: relative;
	float: right;
	height: 100%;
	display: flex;
	align-items: center;
	margin-top: 40px;
}

.front-header-btn {
	float: left;
	margin-right: 15px;
}

.front-header-btn-down {
	background-color: #0449e2;
	color: #fff;
	border-radius: 25px;
	font-size: 1.2em;
	margin-right: 15px;
	display: inline-block;
	padding: 10px 30px;
}

.front-header-btn-no {
	background-color: #323232;
	color: #fff;
	border-radius: 25px;
	font-size: 1.2em;
	margin-right: 15px;
	display: inline-block;
	padding: 10px 30px;
	cursor: not-allowed;
}


/**************** IMAGEN ************************/
.hero-band {
	position: relative;
	top: 82px;
	left: 0;
	right: 0;
	height: 400px;
	overflow: hidden;
	z-index: 100;
}

/**************** MAIN ************************/
.main-content {
	position: relative;
	z-index: 200;
}

/**************** PROXIMAS ACTIVIDADES ************************/
.proximas-band {
	left: 0;
	right: 0;
	z-index: 110;
	margin-bottom: 40px;
	position: relative;
	top: -100px;
}

.carousel-prox {
	margin: 0 auto;
	position: relative;
	width: 100%;
	margin-bottom: 15px
}

.owl-carousel .item {
	margin: 3px
}

.owl-carousel .item img {
	display: block;
	width: 100%;
	height: auto
}

/* Owl Carousel 1.x usa .owl-controls > .owl-buttons */
.owl-theme .owl-controls {
	margin-top: 12px;
	text-align: center;
}

.owl-theme .owl-controls .owl-buttons div {
	display: inline-block !important;
	background: #2949e5 !important;
	color: #fff !important;
	padding: 4px 8px !important;
	border-radius: 50px !important;
	font-size: 18px !important;
	line-height: 1 !important;
	cursor: pointer;
	margin: 0 5px;
	opacity: 1 !important;
}

.owl-theme .owl-controls .owl-buttons div:hover {
	background: #123a8a !important;
}

/* Por si acaso también están presentes clases de v2 */
.owl-theme .owl-nav {
	position: static !important;
	display: flex !important;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
}

.owl-theme .owl-nav [class*='owl-'] {
	background: #2949e5 !important;
	color: #fff !important;
	padding: 6px 18px !important;
	border-radius: 5px !important;
	font-size: 18px !important;
	line-height: 1 !important;
	cursor: pointer;
	display: inline-block !important;
	opacity: 1 !important;
}

.owl-theme .owl-nav [class*='owl-']:hover {
	background: #123a8a !important;
}

.owl-theme .owl-nav .disabled {
	opacity: 0.4 !important;
}

.prox-card {
	float: left;
	width: 95%;
	height: 140px;
	background-color: #FCFCFC;
	border-radius: 10px;
	border-color: #aaaaaa6e;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	margin-bottom: 20px;
	box-shadow: 1px 5px 16px rgba(0, 0, 0, 0.3);
	padding: 10px;
}

.prox-titulo {
	width: 70%;
	float: left;
}

.prox-top h5 {
	width: 75%;
	float: left;
	margin: 0px;
	color: #323232;
	font-size: 13px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.prox-top h3 {
	width: 25%;
	float: right;
	text-align: center;
	font-size: 1.2em;
	margin: 0px;
	color: #323232;
}

.prox-clases {
	width: 50%;
	font-size: 10px;
	float: left;
	text-transform: uppercase;
	position: absolute;
	bottom: 30px;
	color: #777777;
}

.prox-tipo {
	width: 50%;
	font-size: 10px;
	text-transform: uppercase;
	font-style: italic;
	float: right;
	text-align: right;
	position: absolute;
	bottom: 30px;
	right: 25px;
	color: #777777;
}

.div-relleno-izquierda {
	width: 100%;
	height: 100%;
	float: left;
	width: 15%;
}

.div-relleno-derecha {
	width: 100%;
	height: 100%;
	float: right;
	width: 15%;
}

/**************** PROPUESTAS ACTIVIDADES ************************/
.propuestas-band {
	display: flex;
	flex-wrap: wrap;
	clear: both;
	position: relative;
	left: 0;
	right: 0;
	z-index: 110;
	margin-bottom: 40px;
	/* 	background-color: #EAEAEAb8; */
	top: -50px;
}

.propuestas-nomrbe-div {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	text-shadow: 0px 0px 10px white;
}

.propuestas-band h2 {
	font-family: 'Montserrat';
	font-size: medium;
	color: #2949e5;
}

.categorias-div {
	width: 100%;
	border-radius: 0px 0px 10px;
    z-index: 15;
}

#categoria-seleccionada-div {
    width: 100%;
    display: block;
    overflow: hidden;
}

.categorias-card {
	float: left;
	width: 20%;
	margin: 0px;
	padding: 0px;
}

.categoria-button {
	border: none;
	width: 100%;
	text-align: center;
	color: #FFFFFF;
	padding: 10px;
	height: 80px;
}

.curso-card {
	/* 	background-color: #FCFCFC; */
	padding-bottom: 10px;
	width: 25%;
	float: left;
}

.curso-interno {
	background-color: #FCFCFC;
	box-shadow: 1px 5px 16px rgba(0, 0, 0, 0.3);
	margin: 10px;
	border-radius: 10px;
	height: 424px;
	position: relative;
}

.curso-card h5 {
	margin: 0px;
	color: #323232;
	font-size: 14px;
	padding: 0px 15px;
	max-height: 70px;
	/* 3 líneas de 14px * 1.3 line-height ~= 55px + padding */
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.curso-card h3 {
	position: relative;
	top: 15px;
	left: -15px;
	font-size: 1.3em;
	background: #FCFCFC;
	border: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: #FCFCFC;
	z-index: 100;
	color: #323232;
	width: 25%;
	text-align: center;
}

.curso-imagen {
	background-size: cover;
	background-position: center;
	height: 280px;
	border-radius: 9px;
	margin-bottom: 10px;
}

.curso-inicio {
	padding: 8px 15px 0px 15px;
	font-size: 0.8em;
	color: #323232;
	display: -webkit-box;
}

.curso-clases {
	width: 50%;
	font-size: 10px;
	float: left;
	text-transform: uppercase;
	position: absolute;
	bottom: 10px;
	color: #777777;
	padding-left: 15px;
}

.curso-tipo {
	width: 50%;
	font-size: 10px;
	text-transform: uppercase;
	font-style: italic;
	float: right;
	text-align: right;
	right: 15px;
	position: absolute;
	bottom: 10px;
	color: #777777;
}

.curso-info {
	position: absolute;
	bottom: 10px
}

/***************** MARCAS ******************/
.partners-div {
	border-radius: 10px 10px 0px 0px;
	position: relative;
	z-index: 120;
	padding: 0 10px;
}

.carousel-partners {
	width: 100%;
}

.partner-card {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 160px;
	padding: 15px;
}

.partner-card a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 130px;
	overflow: hidden;
}

.partner-card img {
	max-width: 100%;
	max-height: 100%;
	min-width: 80px;
	padding: 5px;
	width: auto;
	display: block;
	filter: grayscale(30%);
	transition: filter 200ms;
}

.partner-card img:hover {
	filter: grayscale(0%);
}

/* Oculta paginación y nav del carrusel de partners */
.carousel-partners+.owl-controls {
	display: none !important;
}

/******************** FOOTER ***************/
.hrfooter {
	border: 1px solid #2949E5;
	margin: 0px 12.5px;
}

.footer-ext {
	padding: 0px 0px 0px 0px !important;
	max-width: none;
}


.footer-div {
	padding: 0px 0px 0px 0px !important;
	width: 100%;
	position: relative;
	z-index: 120;
	background-color: white;
	display: inline-block;
}

/**************** RESPONSIVE ************************/

/* ===== TABLET (max 1024px) ===== */
@media (max-width: 1024px) {

	/* Header */
	.logoinicio {
		width: 35%;
	}

	/* Sección central de proximas y propuestas */
	.proximas-band>div>div[style],
	.propuestas-band>div>div[style] {
		width: 90% !important;
	}

	.div-relleno-izquierda,
	.div-relleno-derecha {
		width: 5% !important;
	}

	/* Cursos: 2 por fila */
	.curso-card {
		width: 50%;
	}

	/* Categorías: 3 por fila */
	.categorias-card {
		width: 33.33%;
	}

	/* Hero */
	.hero-band {
		height: 280px;
	}

	.main-content {
		margin-top: 362px;
	}

	/* Header Botones */
	.front-header-btn {
		margin-right: 10px;
	}

	.front-header-btn-down,
	.front-header-btn-no {
		font-size: 12px;
		padding: 5px 12px;
	}
}

/* ===== MOBILE (max 768px) ===== */
@media (max-width: 768px) {

	/* Header */
	.logoinicio {
		width: 55%;
		padding: 0.75em;
	}

	.box-usuario {
		display: none;
	}

	.box-usuario span {
		display: none;
		/* Oculta texto "BUSCAR", deja solo ícono */
	}

	/* Hero: altura adaptable */
	.hero-band {
		position: relative;
		top: 0;
		height: auto;
		margin-top: 60px;
		/* altura aproximada del header */
	}

	.hero-band img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	/* Main content sin margen fijo */
	.main-content {
		margin-top: 0;
	}

	/* Proximas y propuestas: eliminar rellenos laterales */
	.div-relleno-izquierda,
	.div-relleno-derecha {
		display: none !important;
	}

	.proximas-band>div>div[style],
	.propuestas-band>div>div[style] {
		width: 100% !important;
		float: none !important;
	}

	/* Proximas: posición relativa */
	.proximas-band {
		top: 0;
		margin-bottom: 20px;
	}

	/* Propuestas: posición relativa */
	.propuestas-band {
		top: 0;
	}

	/* Categorías: 2 por fila en mobile */
	.categorias-card {
		width: 50%;
	}

	/* Categorías: ajuste de border-radius en botones */
	.categoria-button {
		height: auto;
		min-height: 60px;
		font-size: 11px;
		padding: 8px 4px;
	}

	/* Cursos: 1 por fila */
	.curso-card {
		width: 100%;
	}

	.curso-interno {
		height: auto;
		padding-bottom: 100px;
	}

	.curso-imagen {
		height: 200px;
	}

	/* Prox card */
	.prox-card {
		height: auto;
		min-height: 120px;
		padding-bottom: 30px;
	}

	/* Partners */
	.partner-card {
		width: 100% !important;
		height: auto !important;
		padding: 10px 20px;
		box-sizing: border-box;
	}

	.partner-card a {
		height: auto !important;
		width: 100%;
	}

	.partner-card img {
		max-width: 60%;
		max-height: 80px;
		min-width: 0;
		margin: 0 auto;
	}

	/* Header Botones */
	.front-header-btn-no {
		display: none !important;
	}

	.front-header-btn {
		margin-right: 5px;
	}

	.front-header-btn-down {
		font-size: 11px;
		padding: 4px 10px;
	}
}

/* ===== MOBILE PEQUEÑO (max 480px) ===== */
@media (max-width: 480px) {

	.logoinicio {
		width: 65%;
	}

	.box-usuario {
		display: none;
	}

	/* Categorías: 1 por fila */
	.categorias-card {
		width: 100%;
	}

	.categoria-button {
		border-radius: 0 !important;
	}

	/* Imagen hero más baja */
	.hero-band img {
		min-height: 150px;
		object-fit: cover;
	}

	/* Partners */
	.partner-card {
		width: 100% !important;
		height: auto !important;
		padding: 10px 20px;
		box-sizing: border-box;
	}

	.partner-card a {
		height: auto !important;
		width: 100%;
	}

	.partner-card img {
		max-width: 60%;
		max-height: 80px;
		min-width: 0;
		margin: 0 auto;
	}

	.prox-top h5 {
		font-size: 13px;
	}

	.prox-top h3 {
		font-size: 1em;
	}

	/* Header Botones */
	.front-header-btn {
		margin-right: 2px;
		float: right;
	}

	.front-header-btn-down {
		font-size: 10px;
		padding: 4px 6px;
		border-radius: 15px;
	}
}

/**************** MODAL SEARCH ************************/
#modalsearch {
	display: none !important;
	opacity: 0;
	pointer-events: none;
	z-index: 9999 !important;
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 200ms linear;
}

#modalsearch.modal-open {
	display: block !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

#modalsearch .cajabusqueda {
	display: flex !important;
}



/**************** FOOTER MOBILE ************************/
@media (max-width: 768px) {

	footer {
		padding: 22px 32px 30px 30px;
		background-color: #eaeaeae0;
		color: #2949E5;
	}

	.anchofooter,
	.anchofooter2 {
		display: none !important;
		/* oculta versión desktop */
	}

	.footermobile {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
		gap: 16px;
	}

	.footermobile .box1 {
		width: 100%;
	}

	.footermobile .box1 p {
		margin: 4px 0;
		font-size: 13px;
		color: #444;
		text-align: left;
	}

	.footermobile .box1 a {
		font-size: 13px;
	}

	.anchofooter3 {
		display: inline-block;
		vertical-align: middle;
		margin-right: 12px;
	}

	.anchofooter3 img {
		width: 60px !important;
		display: block;
	}

	.anchofooter3.boxifooter {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		margin-top: 10px;
	}

	.anchofooter3.boxifooter i {
		font-size: 22px;
		margin: 0 !important;
		color: #2949E5;
	}

	.footer-div footer {
		padding: 16px 0;
	}
}

/* Oculta el footermobile en desktop */
@media (min-width: 769px) {
	.footermobile {
		display: none !important;
	}
}

/**************** RIBBON ÚLTIMAS VACANTES ************************/
.ribbon-vacantes {
	position: absolute;
	top: 18px;
	right: -6px;
	background-color: #e02020;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 5px 12px 5px 10px;
	border-radius: 3px 0px 0px 3px;
	z-index: 10;
	box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.25);
}

/* Pequeña oreja doblada en la esquina */
.ribbon-vacantes::after {
	content: "";
	position: absolute;
	bottom: -6px;
	right: 0;
	border-width: 6px 6px 0 0;
	border-style: solid;
	border-color: #a01010 transparent transparent transparent;
}

/**************** PANEL DE EJES ************************/

/* Mosaico en escala de grises cuando hay ejes desplegados */
.categorias-div.categorias-grises .categoria-button:not(.categoria-button-activa) {
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* El botón activo conserva su color original */
.categoria-button-activa {
    filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    position: relative;
    z-index: 1;
}

/* Panel oculto por defecto */
.ejes-panel {
	max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease;
    opacity: 0;
    width: 100%;
    padding: 0 15px;
    padding-bottom: 15px;
    box-sizing: border-box;
}

/* Panel visible con animación slide-down */
.ejes-panel.ejes-panel-visible {    
	max-height: 600px;
    opacity: 1;
    padding-bottom: 20px;
    margin-top: -5px;
    width: 100%;
}

/* Contenedor interno con sombra suave */
.ejes-panel-inner {
	display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
}

/* Cabecera del panel: nombre categoría + "EJES" + botón cerrar */
.ejes-panel-header {
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    padding-right: 30px;
    position: relative;
    z-index: 10;
    overflow: visible;    
    border: solid;
    border-width: thin;
    border-top: none;
    min-height: 80px;
}

.ejes-categoria-nombre {
    width: 26%;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 1.3em;
    color: #1a1a1a;
    height: 100%;
    padding: 20px;
    text-align: -webkit-left;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
    border-right: solid 1px;
    border-radius: 0px 0px 25px 25px;
    align-content: center;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow: hidden;
    box-sizing: border-box;
}

.eje-separacion{
	border-right: solid;
    height: 100%;
    width: 50px;
    border-width: thin;
    border-radius: 0 0 30px 0;
}

.ejes-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    color: #1a1a1a;
    flex: 1;
    padding-left: 28px;
}

.ejes-text{
	width: 30%;
	font-size: x-small;
    border-left: solid 2px #1a1a1a;
    padding-left: 8px;
    line-height: 1.4;
}

.ejes-cerrar {
    background: none;
    border: 1px solid #cccccc;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.ejes-cerrar:hover {
    background-color: #f0f0f0;
    color: #222;
}

/* Grilla de botones de eje */
.ejes-botones {
	margin-top: -30px;
	z-index: 5;
    flex: 0 0 120px;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: visible;
    flex-wrap: wrap;
}

.eje-button {
    position: relative;
    border: none;
    color: #fff;
    cursor: pointer;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    height: 120px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .20);
    transition: filter .2s ease;
    border-radius: 0;
    z-index: 1;
    min-height: 150px;
}

/* Primer botón: ambas esquinas inferiores redondeadas */
.eje-button.eje-primero {
    border-radius: 0 0 25px 25px;
}

/* Botones medios y último: solo esquina inferior izquierda redondeada */
.eje-button.eje-medio,
.eje-button.eje-ultimo {
    border-radius: 0 0 20px 0;
}

/* Caso especial: único botón */
.eje-button.eje-primero.eje-ultimo {
    border-radius: 0 0 20px 20px;
}

/*
  ::before en eje-medio y eje-ultimo:
  Rellena con su propio color el hueco que deja la esquina redondeada del botón anterior,
  posicionándose en la esquina superior izquierda del botón actual.
*/
.eje-button.eje-medio::before,
.eje-button.eje-ultimo::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -24px;
    width: 25px;
    height: 25px;
    background: radial-gradient(circle at top left, transparent 24px, var(--self-color, currentColor) 25px);
    pointer-events: none;
    z-index: 2;
}



.eje-nombre {    
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: center;
    line-height: 1.2;
}

.eje-desc {
    font-weight: 400;
    font-size: .72em;
    opacity: .9;
    line-height: 1.3;
    max-width: 92%;
    text-align: center;
}

/* Responsive: ejes en 2 columnas en tablet */
@media (max-width: 1024px) {
    .eje-button {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .ejes-categoria-nombre {
	    width: 30%;
	    font-size: 1.1em;
	}
}

/* Responsive: ejes en 1 columna en mobile */
@media (max-width: 768px) {
    .eje-button {
        flex: 0 0 100%;
        max-width: 100%;
        height: 60px;
        border-radius: 0 !important;
    }
    .eje-button::before,
    .eje-button::after {
        display: none !important;
    }
    .eje-button.eje-ultimo {
        border-radius: 0 0 20px 20px !important;
    }
    .ejes-panel-header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 0px;
    }
    .ejes-label {
        font-size: 1.4em;
    }
    .ejes-text {
        display: none;
    }
    .ejes-categoria-nombre {
	    width: 100%;
	    font-size: 1em;
	    border-right: none;
	    border-bottom: solid 1px;
	    height: auto;
	    padding: 12px 16px;
	    border-radius: 0px 0px 25px 25px;
	}
}

@media (max-width: 480px) {
	.ejes-categoria-nombre {
	    font-size: 0.9em;
	    padding: 10px 12px;
	    border-radius: 0px 0px 25px 25px;
	}
}