/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
#buscadores {
	background-color: #5164AC;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#secciones {
	background-color: #445892;
	/*display: none;*/
}

#informacion {
	background-color: transparent;
}

#foot1 {
	background-color: #445892;
	position: relative;
	overflow: hidden;
}


/* Fila principal del footer */
.foot1-row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 2rem;
	padding-left: 2.5rem;
}

/* Logo Mentes Digitales */
.foot1-logo {
	flex: 0 0 auto;
	max-width: 190px;
}

.foot1-logo img {
	width: 100%;
	height: auto;
}

/* Logos institucionales */
.foot1-inst {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3.5rem;
	flex-wrap: wrap;
}

.foot1-inst img {
	max-height: 40px;
	width: auto;
	object-fit: contain;
}

/* Bloque de contacto */
.foot1-contacto {
	flex: 0 0 auto;
}

.foot1-contacto-inner {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

/* Stickers verticales junto al contacto */
.foot1-stickers {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.foot1-stickers img {
	width: auto;
	height: 140px;
	object-fit: contain;
}

/* Texto de contacto */
.foot1-info {
	color: #fff;
	font-size: 0.78rem;
	line-height: 1.5;
	font-family: 'Libre Franklin', sans-serif;
}

.foot1-tit {
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	margin-bottom: 0.35rem;
}

.foot1-info p {
	margin-bottom: 0.25rem;
}

.foot1-info i {
	margin-right: 0.25rem;
	font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 991px) {
	.foot1-row {
		flex-wrap: wrap;
		justify-content: center;
	}
	.foot1-logo {
		max-width: 150px;
	}
}

@media (max-width: 767px) {
	.foot1-row {
		flex-direction: column;
		text-align: center;
	}
	.foot1-row .foot1-contacto-inner {
		justify-content: left !important;
	}
}

#mapa {
	background-color: #fff;
}

#azul {
	background-color: #5164AC;
}

#azulclaro {
	background-color: #51bbea;
}

/* Bandas de los días en conferencias.html (día 1, 2 y 3).
   .content-wrap trae 80px arriba y abajo: demasiado alto para estas bandas */
.dia-banda {
	padding-top: 25px;
	padding-bottom: 25px;
}

/* La fila del día suma py-4 (utilidad de Bootstrap, con !important) y el
   padding-top de .visible; con el padding de la banda es suficiente */
.dia-banda > .row {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Bloque "DÍA 1 / 29 de septiembre" (sustituye a dia1-cyad.webp) */
.dia-bloque {
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	text-align: center;
	text-transform: uppercase;
}

.dia-num {
	margin: 0;
	font-size: clamp(2.6rem, 3.4vw, 3.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
}

.dia-fecha {
	margin: 0;
	font-size: clamp(1.7rem, 2.2vw, 2.3rem);
	font-weight: 600;
	line-height: 1.05;
}

/* Rótulo del día en imagen, si se usa en lugar del texto */
.dia > img {
	display: block;
	margin: 0 auto;
}

#rosa {
	background-color: #ef81a3;
}

#amarillo {
	background-color: #fcc10c;
}

#naranja {
	background-color: #ee714c
}

#eventos {
	background-color: #fff;
}

.eventos-titulo {
	text-align: center;
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 2rem;
}

.eventos-carousel-wrap {
	width: 60%;
	margin: 0 auto;
}

.eventos-logo-item {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0.5rem 1rem;
}

/* Los logos tienen alturas distintas: se alinean todos por su base */
#eventos .owl-stage,
#eventos .owl-item {
	display: flex;
	align-items: flex-end;
}

#eventos .oc-item,
#eventos .eventos-logo-item {
	width: 100%;
}

.eventos-logo-item img {
	max-width: 100%;
	height: auto;
	max-height: 130px;
	object-fit: contain;
}

@media (max-width: 991px) {
	.eventos-carousel-wrap {
		width: 90%;
	}
}

@media (max-width: 767px) {
	.eventos-carousel-wrap {
		width: 100%;
	}
	.eventos-logo-item img {
		max-height: 80px;
	}
}

#premios {
    background-color: #5466a6;
}

#fotografias {
	background-color: #f1c144;
}

#about {
	padding-left: 1rem;
	width: 69%;
	height: auto;
	background-color: #ee714c;
}

#foot-mobile { 
	display: none;
}
.mouse-over {
	display: none !important;
}

.titulo {
    text-transform: uppercase;
    /*color: #5164AC;*/
	color: #fff;
    font-size: 3rem;
    letter-spacing: -0.1rem;
    font-weight: bolder;
}

.sub {
    /*color: #FCC10C;*/
	color: #fff;
    font-size: 2.1rem;
    letter-spacing: -0.1rem;
    font-weight: bolder;
	margin-top: -2rem;
    margin-left: 1rem; 
}

.cuerpo {
    /*color: #5164AC;
	font-stretch: semi-condensed;*/
	color: #fff;
    font-size: 1.6rem;
	margin-left: 1rem;
}

.datos-conf {
	color: #3E4E8F;
	font-size: 1.5rem;
	font-weight: lighter;
	margin-bottom: 0;
}

.cuerpoblue {
    color: #3E4E8F;
    font-size: 1.2rem !important;
	margin-left: 1rem;
}

/* Segunda línea del ponente (lo que iba después del "|"), con el mismo
   peso que .cuerpo */
.cuerpoblue-sub {
	display: block;
	color: #3E4E8F !important;
	font-size: 1rem !important;
	font-weight: 400;
}

/* Temas de la ponencia como etiquetas */
.tags-tema {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.tag-tema {
	display: inline-block;
	padding: 0.15rem 0.7rem;
	background-color: rgba(238, 113, 76, 0.35);
	border-radius: 6px;
	color: #cf5330 !important;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1.4;
}

.cuerpoorange {
    color: #db7755;
    font-size: 1.6rem;
	margin-left: 1rem;
}

.dia-conf {
	color: #FFF;
	font-size: 2rem;
    font-weight: bolder;
}

.tit-recursos {
	color: #FFF;
    font-weight: bolder;
}

.conf-titulo {
    text-transform: uppercase;
	color: #fff;
    font-size: 1.7rem;
    font-weight: bolder;
}

.conf-fecha {
	color: #3E4E8F;
	font-size: 1.7rem;
    font-weight: bolder;
	margin-bottom: -0.5rem;
	margin-left: 0.5rem; 
}

.conf-aboutblue {
	color: #3E4E8F;
    font-size: 1.6rem;
	margin-left: 0.5rem;
}

.conf-about {
	color: #fff;
    font-size: 1.6rem;
	margin-left: 0.5rem;
}

.fondo-titulo {
	padding: 0.2rem 0.5rem 0;
	
	width: auto;
	height: auto;
	background-color: #5164AC;
}

.oculto{
	visibility: hidden; /* Al alterar las márgenes y el height no es necesaria esta propiedad */
	opacity: 0;
	height: 0;
	display: none;
 }
 
.visible{
	visibility: visible; /* Al alterar las márgenes y el height no es necesaria esta propiedad */
	opacity: 1;
	height: 95%;
	padding-top: 15px;
	transition: opacity 2s linear;
}

.recursos-about {
	color: #3E4E8F !important;
    font-size: 1.2rem;
	padding-right: 1.5rem;
	margin-bottom: 5rem;
}


.border-bottom-5 {
	margin-bottom: 5rem;
}

.border-bottom-3 {
	margin-bottom: 3.3rem;
}

h4.evento {
	margin-top: -0.2em;
	padding: 0.25em;
	background-color: #333;
	color: #DFDFDF;
}

.botonEventos {
	padding: 2.5em 0 1.5em 2.5em;

}

.fbox-content p {
	position: relative;
	top: -5px;
	color: #777;
}

.mt-05 {
	margin-top: -5rem !important;
}

.mentes {
    padding-left: 30%;
    padding-right: 0%;
}

.gif1 {
    padding-left: 5%;
    padding-right: 10%;
}

.decrece {
	color: #f1c144 !important;
	font-size: 30px;
}

.fechas {
    margin-top: 90%;
	padding-left: 0%;
    /*color: #f1c144;
	text-align: right;
	font-size: 38px;
	font-weight: bold;*/
}

.patrones1 {
	position: absolute;
	top: 0;
	left: 0;
	margin-top: -5rem;
}

.patrones2 {
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: -5rem;
}

.asiste-boton,
.asiste {
    padding-left: 25%;
    padding-right: 25%;
}

.asi-vivio {
	padding: 0 0 0 25%;
}

.jornadas23 {
	padding: 0 2%;
}

.direccion {
    padding-right: 10%;
}

.mapa {
    padding-left: 10%;
    padding-right: 10%;
}

.blanco {
	color: #fff !important;
}

.azul {
	color: #3E4E8F !important;
}

.dia img,
.dia {
	padding: 0;
}

/*---------------------------------------------------------------*/

/*RESPONSIVE PARAMETERS
-----------------------------------------------------------------*/
@media (min-width: 1800px) {

	.primary-menu .menu-container .mega-menu:not(.mega-menu-full) .mega-menu-content {
		max-width: 93.5%;
	}

	.spost {
		padding: 20px 5rem 0 2.5rem;
	}

}

@media (min-width: 992px) {


	span.menu-item.menu-line {
		width: 1px !important;
	}

}

@media (max-width: 1130px) {

	#logo a.standard-logo { 
		display: none;
	}

	#logo a.retina-logo {
		display: -ms-flexbox;
		display: flex;
	}

	.mentes {
		padding: 0;
	}
	
	.gif1 {
		width: 90%;
		padding: 0 3% 0 5%;
	}
	
	.fechas {
		margin-top: 0%;
		padding: 0%;
		text-align: right;
	}

	.patrones2,
	.patrones1 {
		width: 50%;
		height: auto;
	}

    .titulo {
        font-size: 2.1rem;
        text-align: center;
    }
	
    .sub {
        font-size: 1.6rem;
        margin-left: 1rem;
        margin-top: -1.5rem;
    }
    
    .cuerpo {
        font-size: 1.3rem;
        text-align: justify;
    }

}

@media (max-width: 991px) {

	#foot { 
		display: none;
	}
	
	#foot-mobile { 
		display: inherit;
	}

	.fbox-plain {
		margin: 0;
		padding: 0;
	}
	.fbox-content h3 a {
		font-size: 0.8rem;
	}

	.top-links-item > a {
		padding-right: 7px;
		font-size: 0.55rem;
	}

	.top-links-item > a::after { padding-left: 7px;}

	ul.subtitulo li,
	ul.subtitulo-blanco li{
		font-size: 1.5rem;
	}

    .pt-4,
    .py-4 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .pl-4,
    .px-4 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

}

@media (max-width: 767px) {

	#logo img { 
		padding: 5% !important;
	}

	.dia {
		padding-left: 25%;
		padding-right: 25%;
	}

	.dia img {
		padding: 15%;
	}

	.patrones2,
	.patrones1 {
		display: none;
	}

	.asiste {
		margin-top: 5rem;
		padding-left: 25%;
		padding-right: 25%;
	}

	.asiste-boton {
		margin-top: 1rem;
		padding-left: 25%;
		padding-right: 25%;
	}

	.asi-vivio {
		padding: 0 20% 10% 20%;
	}

	.jornadas23 {
		padding: 0 7%;
	}

	.direccion {
		margin-top: 0%;
		padding: 0%;
		text-align: right;
	}
}

/*@media (max-width: 480px) {

	#logo img {
		max-width: 50%;
		max-height: 50%;

	}
}*/

/* ================================================================
   INFORMACIÓN: cuadrícula 2×2 de tarjetas
   ================================================================ */

.info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.info-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2.5rem 2rem 2rem;
	text-align: center;
}

.info-titulo {
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 2rem;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

.info-imagen {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.info-imagen img {
	max-width: 75%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
}

.btn-info {
	display: inline-block;
	background-color: #5164AC;
	color: #fff;
	font-family: 'Libre Franklin', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	padding: 0.55rem 2.2rem;
	border-radius: 30px;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.btn-info:hover {
	background-color: #fff;
	color: #3E4E8F;
	text-decoration: none;
}

@media (max-width: 767px) {
	.info-grid {
		grid-template-columns: 1fr;
	}
	.info-titulo {
		font-size: 1.6rem;
	}
	.info-imagen img {
		max-height: 250px;
	}
}

/* ================================================================
   HEADER: logo centrado con navegación dividida izquierda/derecha
   ================================================================ */

.header-centro {
	justify-content: center;
}

.header-centro #logo {
	margin: 0 !important;
	flex: 0 0 auto;
	order: 2;
}

/* Navs laterales de escritorio */
.nav-lateral {
	display: flex;
	align-items: center;
	flex: 1;
}

.nav-lateral ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2rem;
}

.nav-izq {
	order: 1;
}

.nav-izq ul {
	justify-content: flex-end;
	padding-right: 1.5rem;
	width: 100%;
}

.nav-der {
	order: 3;
}

.nav-der ul {
	justify-content: flex-start;
	padding-left: 1.5rem;
	width: 100%;
}

.nav-lateral a {
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-family: 'Libre Franklin', sans-serif;
	line-height: 1.2;
	text-align: center;
	display: inline-block;
}

.nav-lateral a span {
	display: block;
}

.nav-lateral a:hover {
	color: #f1c144;
	text-decoration: none;
}

/* Menú mobile: ocupa toda la fila */
.nav-mobile {
	order: 4;
	width: 100%;
}

/* En escritorio (≥992px) el #primary-menu-trigger ya está oculto por Canvas;
   también ocultamos la nav-mobile vía CSS */
@media (min-width: 992px) {
	.nav-mobile {
		display: none !important;
	}
}

/* En mobile (<992px): ocultar navs laterales */
@media (max-width: 991px) {
	.nav-lateral {
		display: none;
	}
}

/* En escritorio el header nunca debe partirse en dos líneas: .header-row
   del tema trae flex-wrap: wrap y el menú se iba abajo del logo */
@media (min-width: 992px) {
	#header .header-row {
		flex-wrap: nowrap;
	}
	#header #logo {
		flex: 0 0 auto;
	}
	#header .primary-menu.menu-2lineas {
		flex: 1 1 auto;
		min-width: 0;
	}
	#header .primary-menu.menu-2lineas .menu-container {
		flex-wrap: nowrap;
	}
}

/* Pantallas medianas: bajamos un poco la fuente y el espaciado
   para que el menú no se encime con el logo */
@media (min-width: 992px) and (max-width: 1199px) {
	.nav-lateral ul {
		gap: 1.2rem;
	}
	.nav-lateral a,
	.primary-menu.menu-2lineas .menu-container > .menu-item > .menu-link {
		font-size: 0.85rem;
	}
	.primary-menu.menu-2lineas .menu-container > .menu-item > .menu-link {
		padding: 0.5rem 0.9rem;
	}
}

/* Tablet en horizontal: el logo también cede tamaño para que quepan
   las seis opciones del menú en la misma línea */
@media (min-width: 992px) and (max-width: 1099px) {
	.primary-menu.menu-2lineas .menu-container > .menu-item > .menu-link {
		font-size: 0.75rem;
		padding: 0.4rem 0.6rem;
		letter-spacing: 0;
	}
	#header #logo img {
		max-height: 46px;
		width: auto;
	}
}


/* ================================================================
   HERO: las columnas se mantienen en una sola fila en cualquier ancho
   ================================================================ */

#buscadores > .container > .row {
	flex-wrap: nowrap;
	align-items: center;
}

/* Debajo de 768px Bootstrap pone los col-md-* a ancho completo y se
   apilan: aquí conservan la proporción que tienen en escritorio */
@media (max-width: 767px) {
	#buscadores > .container > .row > [class*="col-"] {
		flex: 0 0 auto;
		max-width: none;
	}
	#buscadores > .container > .row > .col-md-8 { width: 66.6667%; }
	#buscadores > .container > .row > .col-md-7 { width: 58.3333%; }
	#buscadores > .container > .row > .col-md-5 { width: 41.6667%; }
	#buscadores > .container > .row > .col-md-4 { width: 33.3333%; }
}

/* Los gráficos del hero se encogen en vez de saltar de línea */
#buscadores .py-4:not(.direccion) {
	display: flex;
	align-items: center;
	min-width: 0;
}

#buscadores .py-4 img {
	max-width: 100%;
	height: auto;
	min-width: 0;
	flex-shrink: 1;
}

@media (max-width: 767px) {
	#buscadores .py-4:not(.direccion) {
		gap: 0.5rem;
	}
	.hero-titulo-wrap {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	.hero-titulo-wrap > img {
		width: 30%;
		max-width: 110px;
	}
	.hero-titulo {
		text-align: left;
	}
}


/* ================================================================
   HERO: #buscadores — título centrado + stickers flotantes
   ================================================================ */

.buscadores-wrap {
	position: relative;
	width: 100%;
	padding: 5rem 2rem calc(5rem + 100px);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 380px;
}

.buscadores-titulo {
	position: relative;
	margin: 120px auto;
	z-index: 2;
	text-align: center;
	width: 70%;
	max-width: 860px;
}

.buscadores-titulo img {
	width: 100%;
	height: auto;
}

.buscador-item {
	position: absolute;
	height: auto;
	z-index: 1;
}

/* sticker superior izquierdo */
.b-item-1 {
	top: 15%;
	left: 18%;
	width: 18%;
	max-width: 218px;
}

/* sticker inferior izquierdo-centro */
.b-item-2 {
	top: 380px;
	bottom: 250px;
	left: 32%;
	width: 20%;
	max-width: 266px;
}

/* sticker superior derecho */
.b-item-3 {
	top: 15%;
	right: 18%;
	width: 13%;
	max-width: 197px;
}

/* sticker inferior derecho-centro */
.b-item-4 {
	top: 380px;
	bottom: 250px;
	right: 30%;
	width: 15%;
	max-width: 226px;
}

@media (max-width: 991px) {
	.buscadores-wrap {
		padding: 4rem 1rem;
		min-height: 280px;
	}
	.buscadores-titulo {
		width: 80%;
	}
	.b-item-1, .b-item-2, .b-item-3, .b-item-4 {
		width: 16% !important;
	}
	.b-item-2,
	.b-item-4 {
		bottom: 30px;
	}
}

@media (max-width: 767px) {
	.buscadores-wrap {
		padding: 3rem 1rem;
		min-height: 210px;
	}
	.buscadores-titulo {
		width: 88%;
	}
	/* En móvil pequeño ocultamos los stickers inferiores para no tapar el título */
	.b-item-2,
	.b-item-4 {
		display: none;
	}
	.b-item-1 {
		left: 1%;
		width: 20%;
	}
	.b-item-3 {
		right: 1%;
		width: 18%;
	}
}

@media (max-width: 480px) {
	.buscadores-wrap {
		min-height: 160px;
		padding: 2.5rem 0.5rem;
	}
	.buscadores-titulo {
		width: 94%;
	}
}


/* ================================================================
   CARRUSEL DE CONFERENCIAS (.conf-carrusel)
   Las tarjetas tienen distinta altura porque la cabeza del ponente
   sobresale del recuadro. Se reserva una caja con la proporción de la
   imagen más alta y cada imagen se ancla abajo, así los recuadros y los
   textos quedan alineados entre tarjetas.
   ================================================================ */

.conf-carrusel .product-image {
	position: relative;
	padding-bottom: var(--conf-img-ratio, 86.5%);
}

.conf-carrusel .product-image > a {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
}

.conf-carrusel .product-image img {
	width: 100%;
	height: auto;
}

.conf-carrusel .product-desc {
	padding: 0.9rem 0 0;
}

/* .sub trae márgenes negativos pensados para los títulos del hero */
.conf-carrusel .product-title.sub {
	margin: 0 0 0.35rem;
	font-size: inherit;
	letter-spacing: normal;
}

.conf-carrusel .product-title h3,
.conf-carrusel .product-title h3 a {
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.conf-carrusel .product-image > a {
	cursor: pointer;
}

.conf-carrusel .product-title h3 a:hover {
	color: #2f3d70 !important;
}

.conf-carrusel .datos-conf {
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.6rem;
}


/* ================================================================
   CARRUSEL DEL PROGRAMA (#programa11)
   Título arriba en azul, cartel central más grande y botón de descarga
   ================================================================ */

.programa-carrusel .product .product-desc {
	padding: 0 0 0.75rem;
}

.programa-carrusel .product-title {
	margin-bottom: 0;
}

.programa-carrusel .product-title h3 {
	margin: 0;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.programa-carrusel .product-image img {
	width: 100%;
	height: auto;
}

/* Con 3 carteles a la vista, el del centro se agranda y los laterales
   se reducen. En escritorio el carrusel ocupa todo el ancho disponible. */
@media (min-width: 1200px) {

	.programa-wrap {
		padding-left: 0;
		padding-right: 0;
	}

	/* Hueco vertical para que el cartel central ampliado no se recorte
	   (.owl-stage-outer lleva overflow: hidden) */
	.programa-carrusel .owl-stage-outer {
		padding: 50px 0;
		margin: -35px 0;
	}

	.programa-carrusel .product {
		transform: scale(0.82);
		transform-origin: center center;
		transition: transform 0.5s ease;
	}

	.programa-carrusel .owl-item.center .product {
		transform: scale(1.15);
		position: relative;
		z-index: 2;
	}

}

@media (min-width: 1600px) {

	.programa-carrusel .owl-item.center .product {
		transform: scale(1.2);
	}

}

/* Vista de detalle (#programa42, #programa12, ...): el cartel es más
   angosto que la columna, así que hay que centrarlo explícitamente */
.programa-detalle img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: auto;
}

/* Botón de descarga */
.btn-descarga {
	display: inline-block;
	margin-top: 2.5rem;
	padding: 0.7rem 3.5rem;
	background-color: #5164AC;
	border: 2px solid #5164AC;
	border-radius: 10px;
	color: #fff;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-descarga:hover,
.btn-descarga:focus {
	background-color: #fff;
	color: #3E4E8F;
	text-decoration: none;
}


/* ================================================================
   LISTADO DE ASISTENTES (#naranja en recursos.html)
   Logo a la izquierda, descripción y botón a la derecha
   ================================================================ */

.asistente-item {
	display: flex;
	align-items: stretch;
	gap: 2rem;
	max-width: 1000px;
	margin: 0 auto 3.5rem;
}

.asistente-item:last-child {
	margin-bottom: 0;
}

/* El logo ocupa todo el alto del bloque de texto: se posiciona en absoluto
   para no aportar altura propia y crecer sólo con el texto de al lado */
.asistente-logo {
	position: relative;
	flex: 0 0 auto;
	width: 260px;
	max-width: 38%;
}

.asistente-logo img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top center;
}

.asistente-info {
	flex: 1 1 auto;
	min-width: 0;
}

.asistente-titulo {
	margin: 0 0 0.5rem;
	color: #fff;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.asistente-info p {
	max-width: 48ch;
	margin-bottom: 1rem;
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

.btn-consulta {
	display: inline-block;
	padding: 0.45rem 1.5rem;
	background-color: #3E4E8F;
	border: 2px solid #3E4E8F;
	border-radius: 30px;
	color: #fff;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-consulta:hover,
.btn-consulta:focus {
	background-color: #fff;
	color: #3E4E8F;
	text-decoration: none;
}

@media (max-width: 767px) {
	.asistente-item {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.2rem;
		margin-bottom: 2.5rem;
	}
	.asistente-logo {
		position: static;
		width: 200px;
		max-width: 60%;
	}
	.asistente-logo img {
		position: static;
		height: auto;
	}
	.asistente-info p {
		max-width: none;
	}
}


/* ================================================================
   TÍTULO DEL HERO EN TEXTO (sustituye a recursos-digitales.jpg)
   ================================================================ */

.hero-titulo-wrap {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.hero-titulo {
	margin: 0;
	color: #fff;
	font-family: 'Libre Franklin', sans-serif;
	font-size: clamp(1.9rem, 3.6vw, 3.4rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.hero-titulo-wrap {
		justify-content: center;
		gap: 1rem;
	}
	.hero-titulo {
		text-align: center;
	}
}


/* ================================================================
   POPUP DE LA FICHA DEL PONENTE (#ficha-modal en conferencias.html)
   ================================================================ */

.ficha-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1200;
	padding: 1.5rem;
	background-color: rgba(46, 58, 105, 0.75);
	overflow-y: auto;
}

.ficha-modal.abierto {
	display: flex;
	align-items: center;
	justify-content: center;
}

body.modal-abierto {
	overflow: hidden;
}

.ficha-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 1000px;
	max-height: 90vh;
	padding: 2.5rem 2rem 2rem;
	background-color: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
	overflow-y: auto;
}

.ficha-modal-close {
	position: absolute;
	top: 0.6rem;
	right: 0.9rem;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	background: none;
	border: 0;
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: color 0.3s ease;
}

.ficha-modal-close:hover,
.ficha-modal-close:focus {
	color: #ee714c;
}

/* Dentro del popup el fondo es blanco: los textos que en la banda de
   color iban en blanco pasan a azul, y .sub pierde sus márgenes negativos */
.ficha-modal .sub,
.ficha-modal .cuerpo {
	color: #3E4E8F;
}

.ficha-modal .sub {
	margin-top: 0;
	margin-left: 0;
	font-size: 1.6rem;
	line-height: 1.2;
	letter-spacing: 0;
}

.ficha-modal .cuerpo,
.ficha-modal .cuerpoblue {
	margin-left: 0;
	font-size: 1.05rem;
	line-height: 1.45;
}

.ficha-modal .cuerpoblue {
	font-weight: 700;
}

.ficha-modal .row {
	margin: 0;
}

/* La foto ocupa toda su columna y ésta gana ancho frente al texto */
.ficha-modal .col-md-4 img {
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.ficha-modal .col-md-4 {
		flex: 0 0 41.666667%;
		width: 41.666667%;
		max-width: 41.666667%;
	}
	.ficha-modal .col-md-8 {
		flex: 0 0 58.333333%;
		width: 58.333333%;
		max-width: 58.333333%;
	}
}

@media (max-width: 767px) {
	.ficha-modal {
		padding: 0.75rem;
	}
	.ficha-modal-dialog {
		padding: 2.5rem 1.1rem 1.5rem;
	}
	.ficha-modal .sub {
		font-size: 1.3rem;
	}
}


/* ================================================================
   TALLERES POR DÍA (#eventos en talleres.html)
   Cada columna toma su color de la variable --dia-color
   ================================================================ */

.talleres-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}

.taller-dia {
	background-color: var(--dia-color, #51bbea);
	border-radius: 14px;
	overflow: hidden;
}

.taller-dia-head {
	background-color: #5164AC;
	padding: 1rem 1.2rem 1.1rem;
}

.taller-dia-badge {
	display: inline-block;
	padding: 0.15rem 0.7rem;
	background-color: var(--dia-color, #51bbea);
	border-radius: 6px;
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
}

.taller-dia-fecha {
	margin: 0.55rem 0 0;
	color: #fcc10c;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
}

.taller-dia-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.2rem;
}

.taller-card {
	background-color: #fff;
	border-radius: 10px;
	padding: 0.75rem 0.9rem 0.9rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.taller-hora {
	margin: 0 0 0.3rem;
	color: #ee714c;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
}

.taller-titulo {
	margin: 0;
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.talleres-grid {
		gap: 1.5rem;
	}
	.taller-dia-body {
		padding: 1rem;
	}
}

/* --- Popup con la ficha del taller --------------------------------- */

.taller-titulo {
	cursor: pointer;
	transition: color 0.3s ease;
}

.taller-titulo:hover {
	color: #ee714c;
}

/* La banda superior llega a los bordes, así que el cuadro no lleva padding */
#taller-modal .ficha-modal-dialog {
	padding: 0;
	max-width: 920px;
}

.taller-ficha-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.6rem 3.2rem 1.6rem 2rem;
	background-color: rgba(84, 102, 166, 0.23);
}

.taller-ficha-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.7rem;
}

.taller-ficha-tags span {
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	color: #fff;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.3;
}

.taller-ficha-tags .tag-hora {
	background-color: #ee714c;
}

.taller-ficha-tags .tag-tipo {
	background-color: #5164AC;
}

.taller-ficha-titulo {
	margin: 0 0 0.5rem;
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
}

.taller-ficha-desc {
	max-width: 46ch;
	margin: 0;
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
}

.taller-ficha-ponente {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex: 0 0 auto;
	align-self: flex-start;
	/* Baja lo que mide la fila de etiquetas (alto de la píldora + su margen)
	   para arrancar a la altura del título */
	margin-top: calc(0.72rem * 1.3 + 0.4rem + 0.7rem);
}

.taller-ficha-ponente img {
	width: 72px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
	object-position: top center;
}

.taller-ficha-imparte,
.taller-ficha-nombre {
	margin: 0;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1.3;
}

.taller-ficha-imparte {
	color: #ee714c;
}

/* El tema aplica text-decoration: none !important a todos los <a>,
   por eso el subrayado del nombre necesita !important */
a.taller-ficha-nombre,
.taller-ficha-nombre {
	display: inline-block;
	color: #3E4E8F;
	text-decoration: underline !important;
	cursor: pointer;
	transition: color 0.3s ease;
}

a.taller-ficha-nombre:hover,
a.taller-ficha-nombre:focus {
	color: #ee714c;
	text-decoration: underline !important;
}

/* Semblanza del tallerista dentro del popup */
#taller-modal .ponente-wrap {
	padding: 2.5rem 2rem 2rem;
}

.ficha-volver {
	margin: 0 0 1.2rem;
}

.ficha-volver a {
	color: #ee714c;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
}

.ficha-volver a:hover {
	text-decoration: underline;
}

.taller-ficha-datos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0;
	padding: 1.8rem 2rem 0;
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
}

.taller-ficha-datos > span {
	padding: 0 1.1rem;
	border-right: 1px solid #aab2cf;
}

.taller-ficha-datos > span:first-child {
	padding-left: 0;
}

.taller-ficha-datos > span:last-child {
	border-right: 0;
}

.taller-ficha-datos b,
.taller-ficha-constancia {
	color: #ee714c;
	font-weight: 800;
}

/* El lugar enlaza al mapa: conserva el color del bloque, no el del tema */
.taller-ficha-datos a {
	color: inherit;
	transition: color 0.3s ease;
}

.taller-ficha-datos a:hover,
.taller-ficha-datos a:focus {
	color: #ee714c;
}

/* Línea de constancia, ya fuera del bloque de datos */
.taller-ficha-constancia {
	margin: 0;
	padding: 0.9rem 2rem 0;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.95rem;
	text-align: left;
}

.taller-ficha-constancia i {
	margin-right: 0.35rem;
	font-size: 1.1rem;
	vertical-align: -2px;
}

.taller-ficha-cuerpo {
	position: relative;
	padding: 1.5rem 2rem 2rem;
}

.taller-ficha-linea {
	max-width: 60ch;
	margin: 0 0 0.6rem;
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
}

.taller-ficha-linea b {
	color: #ee714c;
	font-weight: 800;
}

.taller-ficha-accion {
	margin-top: 1.2rem;
	text-align: right;
}

.btn-registro {
	display: inline-block;
	padding: 0.55rem 2rem;
	background-color: rgba(238, 113, 76, 0.35);
	border: 2px solid transparent;
	border-radius: 8px;
	color: #cf5330;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-registro:hover,
.btn-registro:focus {
	background-color: #ee714c;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 767px) {
	.taller-ficha-head {
		flex-direction: column;
		gap: 1.2rem;
		padding: 1.4rem 2.6rem 1.4rem 1.2rem;
	}
	.taller-ficha-ponente {
		margin-top: 0;
	}
	.taller-ficha-datos {
		flex-direction: column;
		align-items: flex-start;
		padding: 1.2rem 1.2rem 0;
	}
	.taller-ficha-datos > span {
		padding: 0;
		border-right: 0;
	}
	.taller-ficha-constancia {
		padding: 0.8rem 1.2rem 0;
	}
	.taller-ficha-cuerpo {
		padding: 1.2rem;
	}
	.taller-ficha-accion {
		text-align: center;
	}
}


/* ================================================================
   BLOQUE GEMINI ACADEMY (#gemini, entre #secciones y #premios)
   ================================================================ */

#gemini {
	background-color: #fff;
}

.gemini-titulo {
	margin: 0 0 0.6rem;
	color: #ee714c;
	font-family: 'Libre Franklin', sans-serif;
	font-size: clamp(1.9rem, 3.2vw, 3rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.gemini-sub {
	max-width: 620px;
	margin-bottom: 1.6rem;
	color: #3E4E8F;
	font-family: 'Libre Franklin', sans-serif;
	font-size: clamp(1.05rem, 1.5vw, 1.4rem);
	font-weight: 700;
	line-height: 1.25;
}

.btn-gemini {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1.5rem;
	background-color: #5164AC;
	border: 2px solid #5164AC;
	border-radius: 8px;
	color: #fff;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* El icono del calendario es blanco, por eso el hover oscurece el fondo
   en lugar de invertir los colores como los demás botones */
.btn-gemini:hover,
.btn-gemini:focus {
	background-color: #3E4E8F;
	border-color: #3E4E8F;
	color: #fff;
	text-decoration: none;
}

.btn-gemini img {
	width: auto;
	height: 1.25em;
}

.gemini-google {
	margin-top: 1.8rem;
}

.gemini-google img {
	width: auto;
	max-width: 190px;
}

.gemini-grafico {
	text-align: center;
}

.gemini-grafico img {
	width: auto;
	max-width: 100%;
	max-height: 240px;
}

@media (max-width: 767px) {
	.gemini-grafico {
		margin-top: 2rem;
	}
}


/* ================================================================
   DIRECCIÓN DEL HERO EN TEXTO (sustituye a direccion.jpg)
   ================================================================ */

.direccion-texto {
	margin: 0;
	color: #fff;
	font-family: 'Libre Franklin', sans-serif;
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
	font-weight: 600;
	line-height: 1.4;
	text-align: right;
}

@media (max-width: 991px) {
	.dir-wrap {
		padding-right: 0;
	}
}


/* ================================================================
   FECHA DEL EVENTO EN TEXTO (sustituye a fecha.webp)
   ================================================================ */

.fecha-evento {
	margin: 0;
	color: #fff;
	font-family: 'Libre Franklin', sans-serif;
	font-weight: 800;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-align: right;
}

.fecha-evento .fecha-linea {
	display: block;
	white-space: nowrap;
}

/* Nexos ("de", "y") un poco más chicos, como en el diseño */
.fecha-evento .fecha-min {
	font-size: 0.72em;
	font-weight: 700;
}

.fecha-evento .fecha-anio {
	display: block;
	color: #f1c144;
	font-size: 0.62em;
	line-height: 1.3;
}

@media (max-width: 991px) {
	.fecha-wrap {
		padding-right: 0;
	}
}


/* ================================================================
   MENÚ PRINCIPAL EN DOS LÍNEAS (.menu-2lineas)
   Mismo aspecto que las navs laterales del home: blanco, Libre Franklin
   bold, centrado y con los items largos partidos en dos renglones.
   ================================================================ */

.primary-menu.menu-2lineas .menu-link .linea {
	display: block;
}

@media (min-width: 992px) {

	.primary-menu.menu-2lineas .menu-container {
		align-items: center;
	}

	.primary-menu.menu-2lineas .menu-container > .menu-item {
		display: flex;
		align-items: center;
	}

	.primary-menu.menu-2lineas .menu-container > .menu-item > .menu-link {
		display: flex;
		align-items: center;
		height: auto;
		padding: 0.5rem 1.25rem;
		color: #fff;
		font-family: 'Libre Franklin', sans-serif;
		font-size: 0.95rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		line-height: 1.2;
		text-align: center;
		text-transform: uppercase;
	}

	.primary-menu.menu-2lineas .menu-container > .menu-item > .menu-link > div {
		padding: 0;
		line-height: 1.2;
	}

	/* El separador vertical entre items no aplica en este menú */
	.primary-menu.menu-2lineas .menu-container > .menu-item:not(:first-child) > .menu-link::before {
		display: none;
	}

	.primary-menu.menu-2lineas .menu-container > .menu-item:hover > .menu-link,
	.primary-menu.menu-2lineas .menu-container > .menu-item.current > .menu-link,
	.primary-menu.menu-2lineas .menu-container > .menu-item:hover > .menu-link .linea,
	.primary-menu.menu-2lineas .menu-container > .menu-item.current > .menu-link .linea {
		color: #f1c144;
	}

}