/*
 * Footer global — spec-mantenimiento-especializado.md, sección «## Footer»
 * (igual en todo el sitio, confirmado contra spec-industrias.md: mismas
 * capas y x, solo cambia la y por la altura de cada página). Colores ya
 * convertidos a sRGB, tal como los da ese spec -- NUNCA los hex crudos
 * del PSD (Adobe RGB).
 *
 * Estrategia responsiva: de 0 a 1023px, flujo normal con CSS Grid (las
 * columnas se apilan/reacomodan por tamaño, sin coordenadas del PSD). De
 * 1024 a 1439px, mismo Grid con columnas más anchas, reparto limpio pero
 * no pixel-exacto (el PSD solo está maquetado a 1440). A partir de
 * 1440px, Grid con las columnas ancladas a la x exacta del PSD, pero SIN
 * position:absolute: cada columna fluye (crece con su contenido) y el
 * divisor/la barra inferior van después, en su propia fila -- así un
 * menú de 7 u 8 ítems (WordPress real, sin menú asignado a "footer",
 * usa el principal de 8) no se encima con nada, solo empuja hacia abajo.
 *
 * ".footer-container > .ec-footer-lienzo" (no ".ec-footer-lienzo" solo):
 * style.css YA trae un selector estructural genérico ".footer-container >
 * div" (línea ~1426, un placeholder "PENDIENTE DE CONFIRMAR" de antes de
 * que existiera este footer.php) con display:grid + grid-template-columns
 * propios en varios @media -- especificidad (0,1,1), más alta que
 * ".ec-footer-lienzo" sola (0,1,0), así que sin el prefijo esas reglas
 * ganaban pase lo que pusiera aquí (confirmado: display se quedaba en
 * "grid" incluso dentro de "@media(min-width:1440px){display:block}").
 * Calificar con ".footer-container >" sube a (0,2,0) y le gana sin tocar
 * style.css (fuera de alcance esta ronda) ni usar !important.
 */

.ec-footer {
	background: var(--ec-negro-footer);
	overflow: hidden; /* el lienzo interno no debe abrir scroll horizontal */
}

/* .footer-container es del padre (mymedi): NO se le toca margin-bottom
   aquí -- esa regla real del tema (".ts-group-icons-header ~ footer >
   .footer-container", 2-mymedi.css/3-responsive.css) es la que evita que
   la barra fija de móvil tape el footer. Solo se usa como contenedor. */
.ec-footer .footer-container {
	padding: 0;
}

.footer-container > .ec-footer-lienzo {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: 48px 24px 40px;
	box-sizing: border-box;
}

.ec-footer *,
.ec-footer *::before,
.ec-footer *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------
   Tipografía base del footer -- Outfit Light 300, 16.67px, #969696
   (cuerpo de texto). Interlineado 20px = el automático de Photoshop
   (120% de 16.67), medido en el PSD (ver el encargo): con este valor
   exacto la tinta de la primera línea cae en su sitio sin compensar con
   un "top" negativo -- confirmado midiendo en la página contra el
   recorte. Los títulos de columna se sobreescriben aparte (link-height
   1.2, con su propio medio-interlineado de 5px, sin tocar).
   -------------------------------------------------------------------- */
.footer-container > .ec-footer-lienzo {
	font-family: var(--ec-fuente-base);
	font-weight: var(--ec-peso-light);
	font-size: 16.67px;
	line-height: 20px;
	color: #969696;
}

.ec-footer-titulo {
	margin: 0 0 18px;
	font-family: var(--ec-fuente-base);
	font-weight: var(--ec-peso-regular);
	font-size: 20.83px;
	line-height: 1.2;
	color: var(--ec-blanco);
}

/* --------------------------------------------------------------------
   Logo y descripción
   -------------------------------------------------------------------- */
.ec-footer-logo {
	display: block;
	width: 123px;
	margin-bottom: 20px;
}

.ec-footer-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.ec-footer-descripcion {
	margin: 0 0 32px;
	max-width: 420px;
}

/* --------------------------------------------------------------------
   Columna Oficinas
   -------------------------------------------------------------------- */
.ec-footer-contacto {
	margin: 0 0 20px;
	max-width: 320px;
}

.ec-footer-direccion,
.ec-footer-correo {
	margin: 0;
}

.ec-footer-correo {
	margin-top: 1em;
}

.ec-footer-oficinas {
	padding-top: 18px;
	margin-top: 18px;
	border-top: 1px solid #969696;
	max-width: 260px;
}

/* margin:0 -- el paso entre oficinas lo da solo el interlineado (20px),
   igual que el paso de 40px entre ítems de Links (ver .ec-footer-menu li
   más abajo): así una oficina por línea queda a 20px de la siguiente sin
   sumar un margen aparte. white-space:nowrap para que "MORELOS (777) 169
   6483" no se parta -- en el PSD SÍ cabe en una sola línea (185px de
   tinta, medido con PIL sobre ref-footer-psd.png), pero Outfit en el
   navegador la mide un poco más ancha que en Photoshop y con un ancho de
   caja igual de ajustado rompía en dos; nowrap la deja en una línea sea
   cual sea esa diferencia de medición, sin depender de ajustar el ancho
   al pixel. */
.ec-footer-oficina {
	margin: 0;
	white-space: nowrap;
}

.ec-footer-oficina-nombre {
	text-transform: uppercase;
}

.ec-footer-oficina-telefono {
	color: var(--ec-blanco);
	margin-left: 4px;
}

/* --------------------------------------------------------------------
   Columna Links
   -------------------------------------------------------------------- */
.ec-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ".footer-container .ec-footer-menu li" -- necesita ganarle en
   especificidad a ".footer-container ul li" (2-mymedi.css del padre, que
   trae padding:6px 0): esa regla es (0,1,2), ".ec-footer-menu li" sola es
   (0,1,1) y pierde (confirmado: el padding:6px 0 del padre se colaba y
   dejaba el paso entre ítems en 46px en vez de 40). Con el prefijo
   ".footer-container" sube a (0,2,1) y gana sin !important. margin-bottom:
   20px = un interlineado (20px) más, así el paso entre la base de un
   ítem y el siguiente da 40px (2 × 20, como separa el PSD cada ítem con
   una línea en blanco) -- sin padding, que es lo que rompía la cuenta. */
.footer-container .ec-footer-menu li {
	margin: 0 0 20px;
	padding: 0;
}

.footer-container .ec-footer-menu li:last-child {
	margin-bottom: 0;
}

.ec-footer-menu a {
	color: inherit;
	text-decoration: none;
}

.ec-footer-menu a:hover,
.ec-footer-menu-activo {
	color: var(--ec-naranja);
}

/* --------------------------------------------------------------------
   Columna Newsletter
   -------------------------------------------------------------------- */
.ec-footer-newsletter-form {
	max-width: 320px;
}

.ec-footer-newsletter-campo {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 12px;
	margin-bottom: 24px;
	border-bottom: 2px solid #969696; /* 2px medido en el recorte (ref-footer-psd.png, x999-1302 y229-230) */
}

.ec-footer-icono-sobre {
	flex: none;
	color: #969696;
}

/* .ec-footer-newsletter-campo .ec-footer-newsletter-correo (dos clases, no
   una) -- mymedi trae "html input[type^='email']" con fondo gris, radio
   de 60px y padding de 10px 25px (reset.css/style.css del padre) y encima
   "font-size:18px" (engranajecorporativo.css, el CSS dinámico del panel);
   especificidad (0,1,2), más alta que ".ec-footer-newsletter-correo" sola
   (0,1,0) -- confirmado, sin el prefijo ganaban esas reglas. Con dos
   clases sube a (0,2,0) y les gana sin !important.
   1.5.9 -- el campo del nombre (type="text", el segundo renglón) comparte
   exactamente estas reglas: mismo trato contra el input[type=text] del
   padre, por eso cada regla de abajo lista los dos selectores. */
.ec-footer-newsletter-campo .ec-footer-newsletter-correo,
.ec-footer-newsletter-campo .ec-footer-newsletter-nombre {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
	margin: 0;
	font-family: var(--ec-fuente-base);
	font-weight: var(--ec-peso-light);
	font-size: 16.67px;
	line-height: 20px;
	color: var(--ec-blanco);
}

.ec-footer-newsletter-campo .ec-footer-newsletter-correo::placeholder,
.ec-footer-newsletter-campo .ec-footer-newsletter-nombre::placeholder {
	font-family: var(--ec-fuente-base);
	font-weight: var(--ec-peso-light);
	font-size: 16.67px;
	color: #969696;
	opacity: 1;
}

.ec-footer-newsletter-campo .ec-footer-newsletter-correo:focus,
.ec-footer-newsletter-campo .ec-footer-newsletter-nombre:focus {
	outline: none;
	box-shadow: none;
}

/* Flecha de enviar -- blanca (#F0F0F0, promedio medido con PIL sobre el
   recorte: NO es azul ni naranja, eso era un pedido equivocado a la ronda
   anterior). Naranja al pasar el cursor, igual que el resto de los
   enlaces del footer. Sin estado :disabled (1.5.3): antes se atenuaba
   mientras no había URL de newsletter configurada, pero ahora ese caso
   manda el formulario por correo (ver el encargo) -- la flecha queda
   activa siempre, haya o no URL. */
.ec-footer-newsletter-enviar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: #f0f0f0;
	cursor: pointer;
}

.ec-footer-newsletter-enviar:hover {
	color: var(--ec-naranja);
}

/* Campo trampa (honeypot) del envío por correo -- mismo criterio que
   .ec-contacto-trampa (assets/css/paginas/contacto.css): oculto por
   tamaño/clip, no con display:none (algunos bots igual lo evitan, pero
   así el porqué queda más claro), sin afectar el tabulado ni los
   lectores de pantalla. */
.ec-footer-trampa {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Aviso de resultado del envío por correo -- junto al campo, discreto:
   sin fondo ni borde propio (a diferencia de .ec-contacto-aviso, pensado
   para una página de fondo claro), un paso más chico que el cuerpo del
   footer para que se lea como una nota transitoria, no como texto fijo
   de la columna. Solo está en el DOM cuando hay algo que avisar (ver
   footer.php), así que no hace falta reservarle alto ni margen cuando no
   hay mensaje. */
.ec-footer-newsletter-aviso {
	margin: 0 0 16px;
	font-family: var(--ec-fuente-base);
	font-weight: var(--ec-peso-light);
	font-size: 14px;
	line-height: 1.4;
}

.ec-footer-newsletter-aviso--exito {
	color: var(--ec-blanco);
}

.ec-footer-newsletter-aviso--error {
	color: var(--ec-naranja);
}

/* Etiquetas solo para lectores de pantalla -- el diseño pinta el campo y
   el botón con icono, sin texto visible ("Correo electrónico"/"Enviar"). */
.ec-footer-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip: rect(0, 0, 0, 0);
}

.ec-footer-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px; /* separación casilla-texto medida en el recorte (x1023 a x1035) */
	cursor: pointer;
	/* engranajecorporativo.css (el CSS dinámico de mymedi, generado por su
	   panel Redux) trae "label, input, textarea, select, button {font-size:
	   16px}" -- una regla explícita SOBRE el propio <label>, así que gana
	   sobre lo heredado de .ec-footer-lienzo sin importar la especificidad
	   (lo heredado siempre pierde contra cualquier regla explícita en el
	   mismo elemento). Se repite aquí en vez de depender de la herencia. */
	font-family: var(--ec-fuente-base);
	font-weight: var(--ec-peso-light);
	font-size: 16.67px;
	line-height: 20px;
	color: #969696;
}

.ec-footer-checkbox span {
	flex: 1 1 auto;
}

/* 26×22px, borde #555 -- medidos con PIL sobre ref-footer-psd.png
   (bbox 998,256-1023,277 y borde promedio rgb(85,85,85) = #555 exacto). */
.ec-footer-checkbox input[type='checkbox'] {
	flex: none;
	appearance: none;
	-webkit-appearance: none;
	width: 26px;
	height: 22px;
	margin: 0;
	border: 1px solid #555;
	border-radius: 3px;
	background: transparent;
	accent-color: var(--ec-naranja);
}

.ec-footer-checkbox input[type='checkbox']:checked {
	background: var(--ec-naranja);
	border-color: var(--ec-naranja);
}

.ec-footer-checkbox a {
	color: #969696;
	text-decoration: underline;
}

.ec-footer-checkbox a:hover {
	color: var(--ec-naranja);
}

/* --------------------------------------------------------------------
   Divisor y barra inferior
   -------------------------------------------------------------------- */
.ec-footer-divisor {
	margin: 40px 0 24px;
	border: 0;
	border-top: 1px solid #969696;
	opacity: 0.52; /* #969696 a 52% sobre el fondo #1C1C1C ≈ #5E5E5E del PSD -- ya cuadra, no se toca */
}

.ec-footer-inferior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ec-footer-copyright {
	margin: 0;
	font-size: 16.67px;
	line-height: 20px;
	color: #767676;
	/* white-space:nowrap SOLO a partir de 1440 (más abajo): ahí el texto
	   cabe de sobra en una línea (680px de tinta en una caja de 1245).
	   Universal aquí rompía el grid de una sola columna en móvil -- con
	   nowrap el texto no puede encogerse, así que la pista del grid
	   crecía a su ancho SIN encoger (690px) y desbordaba el lienzo a
	   375px, confirmado midiendo (gridTemplateColumns pasaba de 327px a
	   690px). De 0 a 1439 el copyright puede partirse en dos líneas sin
	   problema, no está en el encargo. */
}

.ec-footer-creditos {
	color: #ff4522;
}

.ec-footer-redes {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ec-footer-red {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 41px;
	border-radius: 50%;
	background: #2b2b2b;
	color: var(--ec-blanco);
}

.ec-footer-red:hover {
	color: var(--ec-naranja);
}

/* --------------------------------------------------------------------
   Columnas -- de 0 a 1023px, CSS Grid con reflujo limpio (sin encimados
   ni scroll horizontal): 1 columna en móvil, 2 desde tablet. Logo y
   descripción comparten la primera columna, apiladas por flujo normal
   (no hay fila propia por breakpoint que mantener sincronizada).
   -------------------------------------------------------------------- */
.footer-container > .ec-footer-lienzo {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 32px;
	grid-template-areas:
		'logo'
		'descripcion'
		'oficinas'
		'links'
		'newsletter'
		'divisor'
		'inferior';
}

.ec-footer-logo {
	grid-area: logo;
}

.ec-footer-descripcion {
	grid-area: descripcion;
}

.ec-footer-col-oficinas {
	grid-area: oficinas;
}

.ec-footer-col-links {
	grid-area: links;
}

.ec-footer-col-newsletter {
	grid-area: newsletter;
}

.ec-footer-divisor {
	grid-area: divisor;
}

.ec-footer-inferior {
	grid-area: inferior;
}

/* 1.5.6 -- el usuario reportó los bloques apilados sin separación vertical
   entre sí a 375px: "Links" queda pegado al último teléfono de Oficinas
   (OAXACA) y "Newsletter" al último link de Links. row-gap del grid de
   arriba es 0 en este rango, y de las 5 áreas apiladas solo
   .ec-footer-descripcion trae su propio margin-bottom (32px, línea ~99)
   -- Oficinas y Links no traían ninguno. Mismo espacio en las tres
   uniones para que la retícula quede pareja; scoped a max-width:767px
   para no tocar el row-gap:8px de 768px+ (ver el bloque de abajo) ni nada
   de 1024/1440, donde estas columnas van en una sola fila, no apiladas. */
@media (max-width: 767px) {
	.ec-footer-col-oficinas,
	.ec-footer-col-links {
		margin-bottom: 32px;
	}
}

@media (min-width: 768px) {
	.footer-container > .ec-footer-lienzo {
		grid-template-columns: 1fr 1fr;
		row-gap: 8px;
		grid-template-areas:
			'logo        logo'
			'descripcion descripcion'
			'oficinas    links'
			'newsletter  newsletter'
			'divisor     divisor'
			'inferior    inferior';
	}

	.ec-footer-col-oficinas,
	.ec-footer-col-links {
		margin-top: 24px;
	}
}

/* --------------------------------------------------------------------
   1024-1439px -- ya no hay sitio para 2 columnas, pero el PSD (1440) no
   define nada para este rango: reparto limpio de 4 columnas, sin
   coordenadas exactas (eso es solo a partir de 1440, ver más abajo).
   Logo+descripción y las 3 columnas comparten una sola fila del grid
   (grid-row:1 en todas, en vez de que oficinas/links/newsletter abarquen
   2 filas como logo+descripción) -- así ninguna fila auto necesita
   repartirse espacio "de más" entre dos columnas con alturas distintas,
   que es ambiguo en Grid; con una sola fila, su alto es sencillamente el
   máximo de las 5 columnas, sin ambigüedad. Divisor e inferior son sus
   propias filas DESPUÉS de esa, así que bajan solos con el contenido en
   vez de superponerse -- eso es lo que faltaba (el grid de 4 columnas no
   traía áreas "divisor"/"inferior": caían en una celda angosta a la
   derecha, palabra por palabra, y el divisor los atravesaba).
   -------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.footer-container > .ec-footer-lienzo {
		display: grid;
		grid-template-columns: 1.6fr 1fr 0.9fr 1.2fr;
		column-gap: 28px;
		row-gap: 0;
		grid-template-areas: none;
		padding: 48px 24px 40px;
	}

	.ec-footer-logo,
	.ec-footer-descripcion {
		grid-column: 1;
		grid-row: 1;
	}

	.ec-footer-descripcion {
		margin-top: 88px; /* logo (68px) + 20px de aire, para no encimarse con el logo en la misma celda */
		max-width: none;
	}

	.ec-footer-col-oficinas,
	.ec-footer-col-links,
	.ec-footer-col-newsletter {
		grid-row: 1;
		margin-top: 0;
	}

	.ec-footer-col-oficinas {
		grid-column: 2;
	}

	.ec-footer-col-links {
		grid-column: 3;
	}

	.ec-footer-col-newsletter {
		grid-column: 4;
	}

	.ec-footer-divisor {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: 40px 0 24px;
	}

	.ec-footer-inferior {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

/* --------------------------------------------------------------------
   ≥1440px -- columnas ancladas a la x exacta del PSD (medidas con PIL
   sobre ref-footer-psd.png, coinciden con spec-mantenimiento-especializado.md):
   82(logo/descripción) / 462(oficinas) / 824(links) / 999(newsletter).
   Se logra con 7 pistas de grid -- columna, hueco, columna, hueco...--
   en vez de "column-gap" (que reparte el mismo hueco entre las 4, y aquí
   cada hueco mide distinto). Todo fluye (nada de position:absolute ni
   altura fija): la fila 1 mide lo que pida su columna más alta (Links,
   con 7 u 8 ítems), y el divisor/barra inferior van en las filas 2 y 3,
   así que bajan solos si el menú trae más ítems -- confirmado con 7 (el
   menú del PSD) y con 8 (el principal, que es el que usa WordPress real
   hasta que alguien asigne un menú a la ubicación "footer").
   -------------------------------------------------------------------- */
@media (min-width: 1440px) {
	.footer-container > .ec-footer-lienzo {
		display: grid;
		grid-template-columns: 321px 59px 260px 102px 150px 25px 306px;
		gap: 0;
		grid-template-areas: none;
		padding: 124px 24px 40px 82px;
		height: auto;
	}

	.ec-footer-logo {
		grid-column: 1;
		grid-row: 1;
		margin: 0 0 0 3px; /* x85 = x82 (columna) + 3 */
		width: 123px;
	}

	.ec-footer-descripcion {
		grid-column: 1;
		grid-row: 1;
		margin: 129px 0 0; /* tinta en y253 = fila(124) + 129; sin compensar medio-interlineado, ver arriba */
		width: 340px; /* un poco más ancha que los 321 del PSD para que "refacciones." no baje a una 6ª línea (mismo x, no se mueve) */
		max-width: none;
	}

	.ec-footer-col-oficinas,
	.ec-footer-col-links,
	.ec-footer-col-newsletter {
		grid-row: 1;
		margin: 0;
		max-width: none;
	}

	.ec-footer-col-oficinas {
		grid-column: 3;
		width: 260px;
	}

	.ec-footer-col-links {
		grid-column: 5;
		width: 150px;
	}

	.ec-footer-col-newsletter {
		grid-column: 7;
		width: 306px;
	}

	/* Títulos: -5px de medio-interlineado (line-height:1.2), sin cambios --
	   valor heredado del montaje anterior, mismo font-size/peso/línea. El
	   título «Oficinas» va más a la derecha (x509) que el resto de la
	   columna (x462); «Links» igual (x831 vs x824, +7). */
	.ec-footer-col-oficinas > .ec-footer-titulo {
		margin: -5px 0 49px 47px; /* 49 = contacto(y193) - fila(124) - título(25 alto con line-height:1.2) - (-5) */
	}

	.ec-footer-col-links > .ec-footer-titulo {
		margin: -5px 0 45px 7px; /* 45 = ul(y189) - fila(124) - 25 - (-5) */
	}

	.ec-footer-col-newsletter > .ec-footer-titulo {
		margin: -2px 0 44px; /* -2 = y127 - fila(124) - 5; 44 = campo(y191) - 127 - 25 - (-2) */
	}

	.ec-footer-col-oficinas .ec-footer-contacto {
		margin: 0;
		width: 259px;
		max-width: none;
	}

	/* Línea bajo dirección+correo (punto 4 del encargo, faltaba a partir de
	   1440): 2px #969696, medida con PIL en x462-720 y315-316 del recorte.
	   border-top + padding-top, igual que el resto del footer, para que el
	   hueco antes y después de la línea sean parte del flujo normal. */
	.ec-footer-col-oficinas .ec-footer-oficinas {
		margin: 25px 0 0; /* medido: contacto termina en 289.6; línea en 315 → 25 */
		padding: 28px 0 0; /* línea termina en 317; lista empieza en 345 → 28 */
		border-top: 2px solid #969696;
		width: 258px;
		max-width: none;
	}

	.ec-footer-menu {
		margin: 0;
	}

	.ec-footer-newsletter-form {
		margin: 0;
		width: 306px;
		max-width: none;
	}

	.ec-footer-newsletter-campo {
		padding-bottom: 13px; /* medido: la fila interna da 24px de alto, no 20 -- 13 deja el subrayado en y≈230 */
		margin-bottom: 26px;
	}

	/* margin-top:31 -- no 5, que sería el hueco "de más" sobre el margin-bottom:26
	   del campo (medido): al ser hermanos en flujo normal dentro de <form>, sus
	   márgenes COLAPSAN (se queda el mayor, no se suman) -- con menos de 26 no
	   pasaba nada, confirmado midiendo. Con 31 gana el de la casilla y el texto
	   (sin margen propio) cae en y261. -2 en x: casilla en x997 = columna(999) − 2. */
	.ec-footer-checkbox {
		margin: 31px 0 0 -2px;
		width: 274px;
	}

	/* Nudge solo visual (no es una capa de texto que compruebe la herramienta):
	   en el PSD la casilla queda 5px más arriba que la tinta del texto de al
	   lado (casilla y256, texto y261) -- con align-items:flex-start ambas
	   arrancaban parejas, así que se sube solo la casilla. */
	.ec-footer-checkbox input[type='checkbox'] {
		margin-top: -5px;
	}

	/* «Acepto la Política de Privacidad.» mide 236px en Outfit Light
	   16.67px (canvas.measureText, verificado) -- prácticamente el ancho
	   de la caja del PSD (235px). nowrap para que no rompa en dos líneas
	   por ese margen de menos de 2px. */
	.ec-footer-checkbox span {
		white-space: nowrap;
	}

	.ec-footer-divisor {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: 72px 0 0 -1px; /* y521 = fila1(449, con Links de 7-8 ítems como la más alta) + 72. x81 = x82 − 1 */
		width: 1241px; /* x81 a x1322 */
	}

	.ec-footer-inferior {
		grid-column: 1 / -1;
		grid-row: 3;
		align-items: flex-start;
		margin: 53px 0 0 -1px; /* redes en y575 = divisor(521+1) + 53. mismo x que el divisor */
		width: 1241px;
	}

	.ec-footer-copyright {
		margin: 13px 0 0 3px; /* y588 = fila(575) + 13. x84 = x81 + 3 */
		white-space: nowrap; /* una sola línea: "Reservados" (corregido) es más largo que el "Resrvados" del PSD -- aquí sí cabe de sobra */
	}
}