/**
 * vexel/footer-eclipse
 *
 * Medidas tomadas del nodo 3918:3467 de Figma:
 *   bloque principal #353756, padding vertical 48, gap 28
 *   fila de contenido de 1104 · marca con gap 32 · columnas con gap 80
 *   enlaces 14/24 blancos con padding vertical 8 · titulares Newsreader 24/32
 *   nombre de sede en #EBB583 · redes con gap 26 · WhatsApp 72x72
 *   sellos 196x40 y 163x40, alineados a la derecha con gap 26
 *   barra inferior #4E506B de 64 de alto, legales con gap 16, copyright 12/16
 *
 * Por debajo de 1024px no hay maqueta: las columnas pasan a rejilla y luego a
 * una sola, y la barra inferior se apila. Adaptación propia.
 */

.vexel-footer-eclipse {
	--vexel-footer-link-size: var(--wp--preset--font-size--sm);
}

/* ---------------------------------------------------------------- Principal */
/*
 * Sin hueco entre la fila de contenido y la de sellos, a propósito.
 *
 * El frame de Figma declara un gap de 28 y una altura de 332 para la columna
 * de marca, pero su contenido mide 360 y se desborda: las redes acaban en 408,
 * que es exactamente donde arrancan los sellos. Es decir, lo que la maqueta
 * pinta tiene hueco 0. Se reproduce eso, que es contra lo que se compara.
 */
.vexel-footer-eclipse__main {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-block: 48px;
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--bg);
}

/* El ancho y el aire lateral los pone .vexel-eclipse-wrap, igual que en el
   header y en las secciones de página, para que todo caiga en la misma caja. */
.vexel-footer-eclipse__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
}

/* Marca: logo, sedes y redes en columna con 32 de separación. */
.vexel-footer-eclipse__brand {
	display: flex;
	flex-direction: column;
	gap: 32px;
	flex-shrink: 0;
}

.vexel-footer-eclipse__logo {
	display: block;
	line-height: 0;
}

.vexel-footer-eclipse__logo img {
	display: block;
	width: 224px;
	height: 64px;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.vexel-footer-eclipse__offices {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.vexel-footer-eclipse__office {
	display: flex;
	flex-direction: column;
	font-size: var(--vexel-footer-link-size);
	font-style: normal;
	line-height: 24px;
	color: var(--wp--preset--color--bg);
}

.vexel-footer-eclipse__office-name {
	color: var(--wp--preset--color--accent);
}

.vexel-footer-eclipse__office a {
	color: inherit;
	text-decoration: none;
}

.vexel-footer-eclipse__office a:hover,
.vexel-footer-eclipse__office a:focus-visible {
	text-decoration: underline;
}

.vexel-footer-eclipse__social {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vexel-footer-eclipse__social a {
	display: block;
	line-height: 0;
}

.vexel-footer-eclipse__social img {
	display: block;
	height: 16px;
	width: auto;
}

.vexel-footer-eclipse__social a:hover img,
.vexel-footer-eclipse__social a:focus-visible img {
	opacity: 0.75;
}

/* Columnas de enlaces + WhatsApp.
 *
 * Los 80 de hueco son el 5.556% de los 1440 de la maqueta. Con min() se
 * mantienen clavados a 1440 y por debajo encogen con la pantalla, que es lo
 * que evitaba que el WhatsApp se saliera por la derecha entre 1024 y 1440.
 * El wrap queda como red de seguridad. */
.vexel-footer-eclipse__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: min(80px, 5.556vw);
}

.vexel-footer-eclipse__col {
	min-width: 0;
}

.vexel-footer-eclipse__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vexel-footer-eclipse__col-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 32px;
	color: var(--wp--preset--color--bg);
}

.vexel-footer-eclipse__col ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vexel-footer-eclipse__col a {
	display: block;
	padding-block: 8px;
	font-size: var(--vexel-footer-link-size);
	line-height: 24px;
	color: var(--wp--preset--color--bg);
	text-decoration: none;
}

.vexel-footer-eclipse__col a:hover,
.vexel-footer-eclipse__col a:focus-visible,
.vexel-footer-eclipse__col a[aria-current="page"] {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.vexel-footer-eclipse__whatsapp {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.vexel-footer-eclipse__whatsapp img {
	display: block;
	width: 72px;
	height: 72px;
}

/* Sellos de financiación, alineados a la derecha. */
.vexel-footer-eclipse__badges {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
}

.vexel-footer-eclipse__badge {
	display: block;
	height: 40px;
	width: auto;
}

/* ------------------------------------------------------------ Barra inferior */
.vexel-footer-eclipse__bottom {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--bg);
}

.vexel-footer-eclipse__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	min-height: 64px;
}

.vexel-footer-eclipse__legal ul {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vexel-footer-eclipse__legal a {
	display: block;
	padding-block: 8px;
	font-size: var(--vexel-footer-link-size);
	line-height: 24px;
	color: var(--wp--preset--color--bg);
	text-decoration: none;
}

.vexel-footer-eclipse__legal a:hover,
.vexel-footer-eclipse__legal a:focus-visible,
.vexel-footer-eclipse__legal a[aria-current="page"] {
	text-decoration: underline;
}

.vexel-footer-eclipse__copyright {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 16px;
	color: var(--wp--preset--color--bg);
}

/* ------------------------------------------------------------------- Móvil */
@media (max-width: 1023px) {
	.vexel-footer-eclipse__row {
		flex-direction: column;
		gap: var(--wp--preset--spacing--50);
	}

	/*
	 * Con flex y wrap las tres columnas caían escalonadas —una a media altura,
	 * las otras dos debajo y desalineadas—. En rejilla de dos quedan a ras y el
	 * WhatsApp se lleva su propia fila, delante, que es donde más se ve.
	 */
	.vexel-footer-eclipse__cols {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
		align-items: start;
	}

	.vexel-footer-eclipse__whatsapp {
		order: -1;
		grid-column: 1 / -1;
	}

	/*
	 * Apilados, los sellos quedaban pegados al último enlace de
	 * "Comportamiento". Aquí ya no están al lado de las columnas sino debajo,
	 * así que necesitan su propio aire para leerse como un bloque aparte.
	 */
	.vexel-footer-eclipse__badges {
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30);
		margin-top: var(--wp--preset--spacing--60);
	}

	.vexel-footer-eclipse__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		padding-block: var(--wp--preset--spacing--30);
	}

	.vexel-footer-eclipse__legal ul {
		flex-wrap: wrap;
	}
}