/* Contenedor del pie: define su fondo, texto y disposición independiente. */
.footer {
	position: relative;
	display: flow-root;
	width: 100%;
	background: #303030;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

/* Espaciado del bloque de contacto y teléfonos. */
.footer__contacto {
	padding: 36px 16px 20px;
}

/* Apariencia del título de teléfonos. */
.footer__contacto h2 {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
}

/* Acomoda los teléfonos en una columna sin viñetas ni margen predeterminado. */
.footer__contacto ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Estilo de los teléfonos; inherit conserva el color del pie. */
.footer__contacto a {
	color: inherit;
	font-size: 14px;
	text-decoration: none;
}

/* Subraya los teléfonos al pasar el mouse o llegar con el teclado. */
.footer__contacto a:hover,
.footer__contacto a:focus-visible {
	text-decoration: underline;
}

/* Reinicia márgenes de los textos del pie y añade su espaciado interior. */
.footer__privacidad,
.footer__copyright {
	margin: 0;
	padding: 14px 16px;
}

/* Color secundario del aviso de privacidad. */
.footer__privacidad {
	color: #aaa;
}

/* Mantiene el aviso legible en todos sus estados, incluido después de visitarlo. */
.footer__privacidad a,
.footer__privacidad a:visited {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer__privacidad a:hover,
.footer__privacidad a:focus-visible {
	color: #f1c5d3;
}

.footer__privacidad a:active {
	color: #fff;
}

/* Franja inferior del copyright; aquí se cambia su fondo y alineación. */
.footer__copyright {
	background: #262626;
	color: #aaa;
	font-size: 12px;
	text-align: left;
}

/* Indicador visible al navegar los enlaces del pie con el teclado. */
.footer a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}