/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 17 2026 | 22:29:02 */
/**
 * EDUCA FIDYS · Cabecera
 *
 * Ajustes sobre el marcado real de Astra que el personalizador no cubre.
 * Se carga desde Simple Custom CSS and JS.
 *
 * Versión: 2.0.0
 *
 * 2.0.0 - El conmutador pasa a resolverse con dos SVG de la biblioteca de
 *         medios, siguiendo el planteamiento ya probado en otro proyecto.
 *         Las tres versiones anteriores intentaron hacerlo por filtro de
 *         Astra sin conseguirlo.
 *
 *         Los !important son necesarios aquí: Astra declara la
 *         visibilidad de sus iconos con reglas de mayor especificidad que
 *         cualquier selector razonable, y el objetivo es que esto funcione,
 *         no que gane un concurso de elegancia.
 *
 * 1.1.0 - Conmutador dibujado con pseudoelementos.
 * 1.0.0 - Versión inicial.
 *
 * ANTES DE USAR: sustituir las dos URL de los SVG por las que devuelva la
 * biblioteca de medios de fundacionfidys.org.
 */

/* -------------------------------------------------------------------------
   1. Barra principal
   ---------------------------------------------------------------------- */

.ast-primary-header-bar {
	background-color: rgba( 255, 255, 255, 0.96 );
	backdrop-filter: blur( 14px );
}

/* -------------------------------------------------------------------------
   2. Submenú de escritorio
   ---------------------------------------------------------------------- */

.main-header-menu .sub-menu {
	padding: 10px;
	border: 1px solid #c5dded;
	border-radius: 8px;
	box-shadow: 0 18px 45px rgba( 0, 59, 92, 0.12 );
}

.main-header-menu .sub-menu .menu-link {
	border-radius: 5px;
}

/* -------------------------------------------------------------------------
   3. Submenú en móvil
   ---------------------------------------------------------------------- */

@media (max-width: 1240px) {

	.ast-mobile-popup-content .sub-menu,
	.ast-mobile-header-content .sub-menu {
		margin-left: 16px;
		border-left: 2px solid #47799e;
	}
}

/* -------------------------------------------------------------------------
   4. Conmutador de menú
   ---------------------------------------------------------------------- */

/* Se oculta el icono de Astra allá donde lo pinte. Se enumeran los tres
   contenedores posibles porque el conmutador aparece en la cabecera móvil,
   en el envoltorio de botones y en el menú principal. */
.ast-mobile-header .mobile-menu-toggle-icon .ast-mobile-svg,
.ast-mobile-popup-drawer .mobile-menu-toggle-icon .ast-mobile-svg,
.ast-button-wrap .menu-toggle .mobile-menu-toggle-icon .ast-mobile-svg,
.main-header-menu-toggle .mobile-menu-toggle-icon .ast-mobile-svg,
.menu-toggle .ast-icon svg {
	display: none !important;
}

/* Cerrado: dos barras. */
.ast-mobile-header .mobile-menu-toggle-icon::before,
.ast-button-wrap .menu-toggle .mobile-menu-toggle-icon::before,
.main-header-menu-toggle .mobile-menu-toggle-icon::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: url( 'https://fundacionfidys.org/wp-content/uploads/toggle-menu-icon.svg' );
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}

/* Abierto: aspa. Un icono que no cambia deja al visitante sin saber si el
   menú está desplegado. */
.ast-mobile-popup-drawer.active .mobile-menu-toggle-icon::before,
.menu-toggle.toggled .mobile-menu-toggle-icon::before {
	background-image: url( 'https://fundacionfidys.org/wp-content/uploads/toggle-menu-icon-close.svg' );
}

/**
 * EDUCA FIDYS · Pie de página
 *
 * Convierte la rejilla del constructor de pie de Astra en una sola línea
 * horizontal, y la apila en pantallas estrechas.
 *
 * Se carga desde Simple Custom CSS and JS.
 *
 * Versión: 1.5.0
 *
 * 1.5.0 - Relleno vertical de la fila reducido de 45 a 20 px.
 * 1.4.0 - Se centra también .site-footer-section. Astra intercala ese
 *         contenedor entre la fila y el elemento, así que centrar solo el
 *         elemento lo dejaba alineado dentro de una sección que seguía
 *         pegada arriba: el logotipo, más alto, se descolgaba igualmente.
 * 1.3.0 - Dirección en blanco, colores desde las variables globales de
 *         Astra y alineación vertical centrada de todos los elementos de
 *         la fila, incluido el logotipo.
 * 1.2.0 - Color propio para los enlaces del pie: el del tema está pensado
 *         para fondo claro y sobre el azul de la fila desaparecía.
 * 1.1.0 - Se cubren las dos filas del constructor, principal e inferior:
 *         los elementos pueden estar en cualquiera de ellas y la hoja no
 *         debe depender de cuál se haya usado.
 * 1.0.0 - Versión inicial.
 */

/* -------------------------------------------------------------------------
   1. Alto de la fila
   ---------------------------------------------------------------------- */

/* Astra reparte 45 px arriba y abajo, pensados para pies de varias columnas
   con listas de enlaces. Con una sola línea sobra más de la mitad.
   Se añade el atributo al selector para ganar al CSS que genera el tema,
   que declara el relleno con la misma clase. */
.site-primary-footer-wrap[data-section],
.site-below-footer-wrap[data-section] {
	padding-top: 20px;
	padding-bottom: 20px;
}

/* -------------------------------------------------------------------------
   2. La fila, en una sola línea
   ---------------------------------------------------------------------- */

/* Astra reparte los elementos en una rejilla de columnas iguales, que con
   contenidos de anchos muy distintos deja huecos enormes. Con flex cada
   elemento ocupa lo que necesita. */
.site-below-footer-wrap .ast-builder-grid-row,
.site-primary-footer-wrap .ast-builder-grid-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 32px;
	max-width: var( --fidys-max, 1500px );
	margin-inline: auto;
}

/* Astra anida dos contenedores entre la fila y el contenido: la sección y
   el elemento. Hay que centrar los dos, porque centrar solo el interior lo
   deja alineado dentro de una sección que sigue pegada arriba. */
.site-below-footer-wrap .ast-builder-grid-row > .site-footer-section,
.site-primary-footer-wrap .ast-builder-grid-row > .site-footer-section {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	align-self: center;
	min-height: 0;
	margin: 0;
	padding: 0;
}

.site-below-footer-wrap .ast-builder-layout-element,
.site-primary-footer-wrap .ast-builder-layout-element {
	display: flex;
	align-items: center;
	align-self: center;
	min-height: 0;
	margin: 0;
	padding: 0;
}

/* El enlace del logotipo es en línea por defecto y arrastra el espacio
   bajo la línea base de la tipografía. */
.educa-pie__logo,
.site-below-footer-wrap a:has( > .educa-pie__logo ),
.site-primary-footer-wrap a:has( > .educa-pie__logo ) {
	display: block;
	line-height: 0;
}

/* El menú se descuelga a la derecha y el resto queda agrupado a la izquierda. */
.site-below-footer-wrap .ast-footer-menu-wrap,
.site-primary-footer-wrap .ast-footer-menu-wrap {
	margin-left: auto;
}

/* -------------------------------------------------------------------------
   3. Contenido
   ---------------------------------------------------------------------- */

.educa-pie__logo {
	display: block;
	width: 170px;
	height: auto;
}

.educa-pie__datos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	font-style: normal;
	font-size: 13px;
	line-height: 1.5;
	color: var( --ast-global-color-5, #ffffff );
}

/* Punto de separación entre la dirección y el correo, solo cuando van
   seguidos en la misma línea. */
.educa-pie__datos > * + *::before {
	content: "·";
	margin-right: 14px;
	color: var( --ast-global-color-3 );
}

.site-below-footer-wrap .ast-footer-copyright,
.site-below-footer-wrap .ast-footer-copyright p,
.site-primary-footer-wrap .ast-footer-copyright,
.site-primary-footer-wrap .ast-footer-copyright p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   4. Menú del pie
   ---------------------------------------------------------------------- */

.site-below-footer-wrap .footer-nav-wrap .ast-footer-menu,
.site-primary-footer-wrap .footer-nav-wrap .ast-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}

.site-below-footer-wrap .footer-nav-wrap .ast-footer-menu .menu-item,
.site-primary-footer-wrap .footer-nav-wrap .ast-footer-menu .menu-item {
	margin: 0;
}

.site-below-footer-wrap .footer-nav-wrap .ast-footer-menu .menu-link,
.site-primary-footer-wrap .footer-nav-wrap .ast-footer-menu .menu-link {
	padding: 0;
	font-size: 13px;
}

/* -------------------------------------------------------------------------
   5. Apilado
   ---------------------------------------------------------------------- */

/* Con cuatro bloques de texto la línea se aprieta bastante antes del punto
   de ruptura del tema, así que se apila antes. */
@media (max-width: 1100px) {

	.site-below-footer-wrap .ast-builder-grid-row > .site-footer-section,
	.site-primary-footer-wrap .ast-builder-grid-row > .site-footer-section {
		justify-content: center;
	}

	.site-below-footer-wrap .ast-builder-grid-row,
	.site-primary-footer-wrap .ast-builder-grid-row {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		text-align: center;
	}

	.site-below-footer-wrap .ast-footer-menu-wrap,
	.site-primary-footer-wrap .ast-footer-menu-wrap {
		margin-left: 0;
	}

	.educa-pie__datos,
	.site-below-footer-wrap .footer-nav-wrap .ast-footer-menu,
	.site-primary-footer-wrap .footer-nav-wrap .ast-footer-menu {
		justify-content: center;
	}
}

/* En vertical el punto de separación estorba: cada dato en su línea. */
@media (max-width: 650px) {

	.educa-pie__datos {
		flex-direction: column;
		gap: 8px;
	}

	.educa-pie__datos > * + *::before {
		content: none;
	}
}

/* -------------------------------------------------------------------------
   6. Enlaces sobre fondo oscuro
   ---------------------------------------------------------------------- */

/* El correo y los enlaces del menú heredan el color de enlace del tema,
   pensado para fondo claro, y sobre el azul del pie desaparecen.
   El subrayado es deliberado: con la dirección y el correo seguidos en la
   misma línea, el color por sí solo no distingue cuál es pulsable. */
.site-primary-footer-wrap .educa-pie__datos a,
.site-below-footer-wrap .educa-pie__datos a {
	color: var( --ast-global-color-5, #ffffff );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-primary-footer-wrap .educa-pie__datos a:hover,
.site-primary-footer-wrap .educa-pie__datos a:focus-visible,
.site-below-footer-wrap .educa-pie__datos a:hover,
.site-below-footer-wrap .educa-pie__datos a:focus-visible {
	color: var( --ast-global-color-3 );
}

/* En el menú no se subraya en reposo: son varios enlaces seguidos y ya se
   leen como tales por su posición. */
.site-primary-footer-wrap .footer-nav-wrap .ast-footer-menu .menu-link,
.site-below-footer-wrap .footer-nav-wrap .ast-footer-menu .menu-link {
	color: var( --ast-global-color-5, #ffffff );
}

.site-primary-footer-wrap .footer-nav-wrap .ast-footer-menu .menu-link:hover,
.site-primary-footer-wrap .footer-nav-wrap .ast-footer-menu .menu-link:focus-visible,
.site-below-footer-wrap .footer-nav-wrap .ast-footer-menu .menu-link:hover,
.site-below-footer-wrap .footer-nav-wrap .ast-footer-menu .menu-link:focus-visible {
	color: var( --ast-global-color-3 );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   6. Relleno de la fila
   ---------------------------------------------------------------------- */

/* Se antepone .site-footer para ganar al CSS generado por Astra, que
   declara este relleno con un solo nivel de especificidad. */
.site-footer .site-primary-footer-wrap {
	padding-top: 20px;
	padding-bottom: 20px;
}

@media (max-width: 1100px) {

	/* Apilado, el contenido crece a lo alto y el relleno puede ceder algo. */
	.site-footer .site-primary-footer-wrap {
		padding-top: 26px;
		padding-bottom: 26px;
	}
}