/*!
Theme Name:  COMCHA theme
Author:      Syntetyk
Author URI:  https://syntetyk.com
Version:     1.0.0
Template:    page-builder-framework
Text Domain: page-builder-framework-child
*/

ul { /* reset */
	margin: 0px;
	padding: 0px;
}

/* ======================== */
/*       cabecera web       */ 
/* ======================== */

#header {
	background-color: #F9F9FF;
}

.wpbf-navigation .wpbf-grid-collapse {
    border-top: 1px solid #2A9FCA;
    border-bottom: 1px solid #2A9FCA;

    /* ancho fluido según el viewport y márgenes */
    width: calc(100% - 120px); /* 80px a cada lado */
    margin: 0 auto;            /* centra en la pantalla */
    box-sizing: border-box;

    padding-top: 16px;
    padding-bottom: 16px;
}

	.wpbf-nav-wrapper {
		padding-bottom: 15px;
	}

		.menu {
			padding-top: 16px;
		}

/* Quitar subrayado en enlaces del menú principal */
.wpbf-navigation a,
.wpbf-navigation a:visited {
  text-decoration: none !important;
}

/* Asegurar que tampoco se subrayan al pasar el ratón o estar activos */
.wpbf-navigation a:hover,
.wpbf-navigation a:focus,
.wpbf-navigation a:active {
  text-decoration: none !important;
}

/* ======================== */
/*          pie web         */ 
/* ======================== */

.pie {
	background-color: #F9F9FF;
	padding-left: 80px;
	padding-right: 80px;
	padding-bottom: 80px;
}

	.pieContenido {
		border-top: 1px solid #2A9FCA;
		border-bottom: 1px solid #2A9FCA;
		padding-top: 10px;
		padding-bottom: 16px;
		display: table;
		width: 100%;
		vertical-align: middle;
	}

		.columnaMenu {
			float: none;
			display: table-cell;
			font-size: 16px;
			vertical-align: middle;
		}

			.menuPie {
				display: block;
			}

				.menuPie ul li {
					float: left;
					margin-right: 25px ;
				}

					.menuPie ul li a:link, 
					.menuPie ul li a:visited {
						color: #003163;
					}

					.menuPie ul li a:hover {
						color: #012ED1;
					}

		.columnaLogos {
			float: none;
			display: table-cell;
			text-align: right;
			vertical-align: middle;
		}

			.columnaLogos img {
				max-height: 80px;
				width: auto;
				vertical-align: middle;
			}

			.logos-desktop {
				display: block !important;
			}
			.logos-mobile {
				display: none !important;
			}


/* ======================== */
/*          páginas         */ 
/* ======================== */

#content {
	background-color: #F9F9FF;
}

/* Fichas de eventos, personas, etc similares */
/* --- Contenedor padre --- */
.fichas,
.fichas-tres,
.fichas-cinco {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
	justify-content: flex-start !important;
	box-sizing: border-box;
}

/* 4 columnas (por defecto) */
.fichas > .caja {
	flex: 0 0 calc((100% - 3*20px)/4) !important;
	max-width: calc((100% - 3*20px)/4) !important;
	box-sizing: border-box;
}

/* Ficha que ocupa el doble del ancho en filas de 4 columnas */
.fichas > .caja-doble {
	flex: 0 0 calc((100% - 3*20px)/2) !important; /* doble de una de 4 columnas */
	max-width: calc((100% - 3*20px)/2) !important;
	box-sizing: border-box;
}

/* 3 columnas */
.fichas-tres > .caja {
	flex: 0 0 calc((100% - 2*20px)/3) !important;
	max-width: calc((100% - 2*20px)/3) !important;
	box-sizing: border-box;
}

/* 5 columnas */
.fichas-cinco > .caja {
	flex: 0 0 calc((100% - 4*20px)/5) !important;
	max-width: calc((100% - 4*20px)/5) !important;
	box-sizing: border-box;
}

/* Banner Home en contenedor de ancho completo */
.elementor-element.banner {
	width: 100%;
	overflow: hidden; /* recorta los bordes que sobresalgan */
}

	/* Imagen dentro del widget */
	.elementor-element.banner img {
		width: auto;                  /* ancho flexible */
		height: 500px;                /* altura inicial escritorio */
		object-fit: cover;            /* centra y recorta imagen */
		object-position: center center; /* contenido importante centrado */
		display: block;
		margin: 0 auto;
	}

/* cuadricula noticias en Home */
.eael-grid-post-holder-inner {
	display: flex !important;
	flex-direction: row !important; /* fuerza imagen a la izquierda, texto a la derecha */
	flex-wrap: nowrap !important;   /* evita que se baje el texto */
	gap: 20px !important;
	align-items: flex-start !important;
}

	/* Imagen */
	.eael-entry-media {
		flex: 0 0 165px !important;    /* ancho fijo en escritorio */
		height: 165px !important;      /* alto fijo para mantener cuadrada */
		overflow: hidden !important;
		object-fit: cover !important;  /* recorta centrando el contenido */
	}

	/* Texto */
	.eael-entry-wrapper {
	  flex: 1 1 auto !important;     /* ocupa el resto del espacio disponible */
	  padding: 0 !important;
	}

		.eael-entry-title {
			margin: 20px 0px 0px 5px !important;
		}


/* Desplegables páginas */
.entry-content ul li {
	list-style: square inside;
	padding-bottom: 10px;
}

	.entry-content ul li ul {
		padding-top: 20px;
		padding-left: 30px;
	}

		.entry-content ul li ul li{
			list-style: circle;
			padding-bottom: 10px;
		}


/* formulario */
.eael-contact-form input[type=submit] {
	width: 100% !important;
}


/* migas de pan */
.elementor-shortcode span a:link, 
.elementor-shortcode span a:visited {
	color: #003163 !important;
}

.elementor-shortcode span a:hover {
	color: #012ED1 !important;
}

.elementor-shortcode p {
	margin: 0 !important;
}

	p a:link, 
	p a:visited {
		color: #012ED1;
		font-weight: 500;
	}

	p a:hover {
		color: #003163;
	}


/* ======================== */
/*      Noticias, blog      */ 
/* ======================== */

/* Contenedor principal de la izquierda */
body.blog .wpbf-main,
body.category .wpbf-main {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
	gap: 0px 20px; /* espacio horizontal y vertical entre noticias */
	padding-left: 104px;
	padding-right: 10px;
	margin-bottom: 100px;
}

/* Cada noticia */
.wpbf-archive-content .wpbf-post-style-boxed {
	width: 100%; /* ocupa toda la columna */
	float: none; /* quitamos floats antiguos */
	display: flex;
	flex-direction: column; /* imagen arriba, contenido abajo */
	margin-bottom: 20px !important;
}

/* Para respetar la imagen arriba y el título debajo */
.wpbf-archive-content .wpbf-post-style-boxed .wpbf-large-2-5,
.wpbf-archive-content .wpbf-post-style-boxed .wpbf-large-3-5 {
	width: 100%;
}

/* Migas y titular arriba del grid */
#breadcrumbs {
	grid-column: 1 / -1; /* ocupa las 3 columnas */
	margin-bottom: 21px;
	font-family: inter;
	font-size: 14px;
	margin-bottom: 21px;
}

	#breadcrumbs a:link,
	#breadcrumbs a:visited {
		color:#003163;
	}

	#breadcrumbs a:hover {
		color:#012ED1;
	}

.titularNoticias {
	grid-column: 1 / -1; /* ocupa las 3 columnas */
	font-size: 40px;
	color: #003163;
	margin-bottom: 38px;
}

/* Sidebar */
.wpbf-sidebar {
    padding: 77px 80px 0 0;
}

	.widget_block {
		background-color: #F9F9FF !important;
		padding: 0 !important;
	}

	body.blog .wpbf-sidebar-wrapper {
	    flex: 0 0 33.3333%; /* 1/3 ancho en escritorio/portátil */
	}

	.wpbf-sidebar ul li {
	    font-family: inter;
	    font-size: 16px;
	    border: solid 1px #012ED1;
	    margin-top: 20px;
	    padding: 12px;
	    text-align: center;
	    background-color: #F9F9FF; /* fondo original */
	}

		.wpbf-sidebar ul li a:link,
		.wpbf-sidebar ul li a:visited {
		    color: #012ED1;
		}

		.wpbf-sidebar ul li a:hover {
		    color: #2A9FCA;
		}

		.wpbf-sidebar ul li a::after {
		    font-family: inter;
		    font-size: 16px;
		    content: "\2192";
		    display: inline-block;
		    margin-left: 10px;
		}

/* Para que las imágenes de cada noticia queden a sangre */
.wpbf-archive-content .wpbf-post-style-boxed {
    width: 100%;
    margin: 0;  /* quitar márgenes */
    padding: 0; /* quitar padding */
}

.wpbf-archive-content .wpbf-post-style-boxed .wpbf-post-image-wrapper img {
    width: 100%;   /* ocupar todo el ancho de la columna */
    height: auto;  /* mantener proporción */
    display: block;
}

h3.entry-title {
	padding-left: 20px;
	padding-right: 20px;
	font-family: inter;
	font-size: 20px;
	font-weight: 500;
}


/* Página de una sola noticia */
/* ========================== */
body.single-post .wpbf-main {
    grid-template-columns: 1fr; /* Una sola columna */
    padding-left: 104px;
    padding-right: 10px;
    margin-bottom: 100px;
}

/* Mantener imagen a sangre y contenido */
body.single-post .wpbf-post-style-boxed {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Imagen a sangre */
body.single-post .wpbf-post-style-boxed .wpbf-post-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

body.single-post #breadcrumbs {
    grid-column: 1 / -1; /* ocupar todo el ancho disponible */
    padding-left: 104px; /* igual que la izquierda del grid */
    padding-right: 10px;  /* igual que la derecha del grid */
}

body.single-post .entry-title {
	color: #003163;
}

body.category .page-title {
  grid-column: 1 / -1; /* ocupa las 3 columnas */
  font-size: 35px;
  color: #003163;
}


/* ======================== */
/*       MEDIA QUERIES      */
/* ======================== */


/*      Portátil 1366px       */
/* ========================== */
@media (max-width: 1366px) {
	/* 4 columnas → 2 columnas */
	.fichas > .caja {
		flex: 0 0 calc((100% - 20px)/2) !important;
		max-width: calc((100% - 20px)/2) !important;
	}

	/* Ficha doble ocupa 2 columnas cuando las demás son 2 */
	.fichas > .caja-doble {
		flex: 0 0 100% !important; /* ocupa toda la fila de 2 columnas */
		max-width: 100% !important;
	}

	/* 3 columnas → 2 columnas */
	.fichas-tres > .caja {
		flex: 0 0 calc((100% - 20px)/2) !important;
		max-width: calc((100% - 20px)/2) !important;
	}

	/* 5 columnas → 3 columnas */
	.fichas-cinco > .caja {
		flex: 0 0 calc((100% - 2*20px)/3) !important;
		max-width: calc((100% - 2*20px)/3) !important;
	}

	.elementor-element.banner img {
		height: 400px; /* 500px * 0.8 */
	}

	.eael-entry-media {
		flex: 0 0 140px !important;
		height: 140px !important;
	}

	.eael-entry-title {
		margin: 15px 0px 0px 0px !important;
	}

	.wpbf-archive-content .wpbf-post-style-boxed {
		width: 45%;
	}

	body.blog .wpbf-archive-content .wpbf-post-style-boxed,
	body.category .wpbf-archive-content .wpbf-post-style-boxed {
	    width: 100% !important;
	}

}


/*  Tablet horizontal 1024px  */
/* ========================== */
@media (max-width: 1024px) {
	/* cabecera web */ 
	.mi-mobile-border-wrapper {
		max-width: 944px; 
		margin: 0 auto;
		border-top: 1px solid #2A9FCA;
		border-bottom: 1px solid #2A9FCA;
		box-sizing: border-box;
		background-color: inherit;
  }

  	.wpbf-navigation .wpbf-1-3 {
  		padding-bottom: 5px;
  	}

		#wpbf-mobile-menu-toggle {
			background-color: #F9F9FF;
			color: #003163;
			font-size: 30px;
		}
	
	.pie {
		padding-left: 40px;
		padding-right: 40px;
	}

	.pieContenido {
        display: block !important;
        text-align: center; /* opcional, centra la imagen y menú */
    }

    .columnaLogos, 
    .columnaMenu {
        display: block !important;
        width: 100% !important;
        float: none !important;
        text-align: center;
        margin-bottom: 20px; /* separa la imagen del menú */
    }

    .columnaLogos img {
			max-height: none !important;
			width: 100% !important;
			height: auto !important;
		}

    .menuPie ul li {
        float: none;
        display: inline-block;
        margin-right: 15px;
    }

	.fichas > .caja {
		flex: 0 0 calc((100% - 20px)/2) !important;
		max-width: calc((100% - 20px)/2) !important;
	}

	.fichas > .caja-doble {
		flex: 0 0 100% !important; /* una columna en tablet */
		max-width: 100% !important;
	}

	.elementor-element.banner img {
		height: 325px; /* 500px * 0.65 */
	}

	.eael-entry-media {
		flex: 0 0 120px !important;
		height: 120px !important;
	}

		.eael-entry-title {
			margin: 10px 0px 0px 0px !important;
		}

	.wpbf-archive-content .wpbf-post-style-boxed {
		width: 95%;
	}

	body.blog .wpbf-main,
	body.category .wpbf-main {
		display: grid;
		grid-template-columns: 1fr 1fr; /* dos columnas iguales */
		gap: 20px; /* espacio entre columnas y filas */
		width: 100%; /* ocupar todo el ancho */
		padding-left: 46px; /* padding lateral */
		padding-right: 20px;
		margin-bottom: 30px;
	}

	/* Cada noticia ocupa toda la columna */
	.wpbf-archive-content .wpbf-post-style-boxed {
		width: 100%;
	}

	body.single-post .entry-title {
		font-size: 35px !important;
		color: #003163;
	}

	body.category .page-title {
		font-size: 30px;
	}

	/* Sidebar debajo de todo el contenido */
	body.blog .wpbf-sidebar-wrapper,
	body.category .wpbf-sidebar-wrapper {
		flex: 0 0 100%; /* ancho completo */
		order: 1; /* aparece después del contenido */
		margin-top: 0px; /* espacio sobre el sidebar */
		padding-left: 46px;
		padding-right: 20px;
	}

	.wpbf-sidebar {
		padding: 0;
		margin-bottom: 50px;
	}

	body.single-post .wpbf-main {
	    grid-template-columns: 1fr; /* Una sola columna */
	    gap: 0; /* elimina espacio lateral */
	    width: 100%;
	    padding-left: 46px;
	    padding-right: 20px;
	    margin-bottom: 50px;
	}

	body.single-post #breadcrumbs {
		padding-left: 46px;
	    padding-right: 20px;
	}

	body.single-post .wpbf-sidebar-wrapper {
	    flex: 0 0 100%; /* ancho completo */
	    order: 1;       /* aparece después del contenido */
	    margin-top: 40px; /* espacio sobre el sidebar */
	    padding-left: 46px; 
	    padding-right: 20px;
	}

}


/*    Móvil vertical 767px    */
/* ========================== */
@media (max-width: 767px) {
	/* cabecera web */ 
	.mi-mobile-border-wrapper {
        max-width: 727px; 
        border-top: 1px solid #2A9FCA;
        border-bottom: 1px solid #2A9FCA;
        box-sizing: border-box;
        background-color: inherit;
    }

  .pie {
		padding-left: 0px;
		padding-right: 0px;
	}

		.pieContenido {
			display: block !important; /* desactiva el modo tabla */
			text-align: center;
		}

		.columnaLogos {
			display: block !important;
			width: 100%;
			text-align: center;
			margin-bottom: 10px;
		}

		.logos-desktop {
			display: none !important;
		}

		.logos-mobile {
			display: block !important;
			max-width: 100% !important;   
			margin: 0 auto;
			padding-left: 20px;
			padding-right: 20px;
		}

	.fichas > .caja,
	.fichas-tres > .caja,
	.fichas-cinco > .caja,
	.fichas > .caja-doble {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.elementor-element.banner img {
		height: 200px; /* 500px * 0.4 */
	}

	.eael-grid-post-holder-inner {
		flex-direction: column !important; /* imagen arriba, texto abajo */
	}

	.eael-entry-media {
		width: 100% !important;       /* ancho completo */
		height: auto !important;      /* alto automático para no deformar la imagen */
	}

	.eael-entry-wrapper {
		width: 100% !important;
	}

		.eael-entry-title {
			margin: 0px 10px 10px 10px !important;
		}

	body.blog .wpbf-main,
	body.category .wpbf-main {
		display: grid;
		grid-template-columns: 1fr; /* 1 columna */
		gap: 20px;
		width: 100%;
		padding-left: 46px !important;
	}

	.wpbf-archive-content .wpbf-post-style-boxed {
		width: 100%;
	}

	body.single-post .entry-title {
		font-size: 30px !important;
		color: #003163;
	}

	body.category .page-title {
		font-size: 25px;
	}

	body.blog .wpbf-sidebar-wrapper,
	body.category .wpbf-sidebar-wrapper {
		flex: 0 0 100%;
		order: 1;
		margin-top: 40px;
		padding-left: 46px !important;
		padding-right: 20px;
	}

	body.single-post .wpbf-main {
	    grid-template-columns: 1fr; /* Una sola columna */
	    padding-left: 46px;
	    padding-right: 20px;
	    margin-bottom: 50px;
	}

}