/*
 * Pie (plantilla 388 de Elementor): fondo burdeos, logo blanco y cuatro columnas en la caja de 1140 px; en móvil,
 * una columna centrada. Enlaces de al menos 24 px de alto (WCAG 2.5.8: hoy van a 14 px de paso en móvil).
 * Cotas medidas sobre la web actual: Plan 2, Tarea 6.
 */
.pie { background: var(--burdeos); color: #fff; }
/* El anillo de foco global es burdeos (base.css), el color del pie, y ahí no se vería (1:1). Blanco: 14,8:1 sobre
   burdeos, en sus 14 paradas (WCAG 2.4.7 y 1.4.11). Hoy se ve el anillo del navegador. */
.pie :focus-visible { outline-color: #fff; }

.pie__marca { padding-block: 40px 30px; }
.pie__logo { width: 143px; height: auto; } /* el 50 % de su columna de 285 px, como en Elementor */

.pie__columnas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding-block: 30px;
}

.pie__titulo {
	margin: 0 0 11px;
	color: #fff;
	font: 600 14px/14px var(--letra);
	word-spacing: 5px;
	text-transform: uppercase;
}

/* El renglón de la lista es el del enlace: así cada li mide lo que su enlace, 25 px, el paso de hoy (con el
   renglón de 26 px del body medían 27). Y la lista sube 6 px: el relleno que da el objetivo de 24 px no baja
   el texto, que queda donde hoy (los 11 px del título y estos −6 se juntan en 5). */
.pie__enlaces { margin: -6px 0 0; padding: 0; list-style: none; font: 300 12px/14px var(--letra); }
.pie__enlaces a,
.pie__enlaces button {
	display: inline-block;
	min-height: 25px;
	padding: 5px 0;
	color: #fff;
	font: 300 12px/14px var(--letra);
	text-transform: uppercase;
}
/* «CONFIGURAR COOKIES» (Plan 4, P15): un botón con el aspecto y las cotas de los enlaces de su columna. */
.pie__enlaces button { border: 0; background: none; cursor: pointer; }

.pie__contacto p { margin: 0 0 14.4px; font: 300 13px/17px var(--letra); }

/* Hoy la fila queda a 20 px del título: su renglón de 10 y el margen de 10 del widget. Aquí el título mide 14 y
   su margen de 11 se junta con el de arriba de la lista: con −5, quedan 6. Abajo, los 10 de Elementor. */
.pie__iconos { display: flex; gap: 20px; margin: -5px 0 10px; padding: 0; list-style: none; }
.pie__iconos a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #fff;
}
.pie__iconos .icono { width: 18px; height: 18px; }

@media (max-width: 767px) {
	.pie__marca { text-align: center; }
	.pie__logo { width: 50vw; margin-inline: auto; } /* el 50 % de la pantalla, como Elementor: 195 px a 390 */
	.pie__columnas { grid-template-columns: 1fr; text-align: center; }
	.pie__titulo { line-height: 1.2; }
	.pie__iconos { justify-content: center; } /* hoy quedan a la izquierda bajo títulos centrados (anexo §8.1) */
}