/**
 * Footer — nodo 1:153 del Figma.
 *
 * Grises exactos del diseño: #b3b3b3 el tagline, #bfbfbf los links,
 * #999 el legal, #4d4d4d la línea divisoria.
 *
 * @package covipro
 */

.cvp-footer {
	background: var(--cvp-navy);
	color: var(--cvp-white);
}

/* --- Fila superior ----------------------------------------------------- */

.cvp-footer__top {
	display: flex;
	align-items: flex-start;
	gap: 3.75rem;                              /* 60px */
	padding: var(--cvp-sp-6) var(--cvp-gutter) var(--cvp-sp-4);
	max-width: var(--cvp-container);
	margin-inline: auto;
}

.cvp-footer__brand {
	flex: 0 0 280px;
	max-width: 280px;
}

.cvp-footer__wordmark {
	font-family: var(--cvp-font-display);
	font-weight: 700;
	font-size: 1.125rem;                       /* 18px */
	line-height: 1.2;
	color: var(--cvp-white);
	margin: 0 0 0.75rem;                       /* gap 12px */
	text-transform: none;                      /* en el diseño va en minúscula */
}

.cvp-footer__tagline {
	font-size: 0.8125rem;                      /* 13px */
	line-height: 1.4;
	color: #b3b3b3;
	margin: 0;
}

/* Redes sociales (5 de octubre de 2026, del tríptico). */
.cvp-footer__redes {
	display: flex;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.cvp-footer__redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;                            /* 44: tamaño de toque */
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--cvp-white);
	transition: background-color var(--cvp-dur) var(--cvp-ease), color var(--cvp-dur) var(--cvp-ease);
}

.cvp-footer__redes a:hover,
.cvp-footer__redes a:focus-visible {
	background: var(--cvp-yellow);
	border-color: var(--cvp-yellow);
	color: var(--cvp-navy);
}

/* --- Columnas de menú --------------------------------------------------- */

.cvp-footer__col {
	flex: 1 1 0;
	min-width: 0;
}

.cvp-footer__col-title {
	font-family: var(--cvp-font-text);
	font-weight: 700;
	font-size: var(--cvp-fs-sm);               /* 14px */
	letter-spacing: 0.03em;                    /* 0.42px sobre 14px */
	text-transform: uppercase;
	color: var(--cvp-white);
	margin: 0 0 0.625rem;                      /* gap 10px */
	line-height: 1.2;
}

.cvp-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;                             /* 10px */
}

.cvp-footer__menu li { margin: 0; }

.cvp-footer__menu a {
	/* El texto mide 17px de alto y el diseño deja 10 de aire entre enlaces.
	   El padding negativo del margen estira el área de toque hasta ocupar casi
	   todo ese hueco sin mover nada: la lista se ve igual y se acierta mejor. */
	display: inline-block;
	padding-block: 6px;
	margin-block: -6px;
	font-size: var(--cvp-fs-sm);
	color: var(--cvp-grey);                    /* #bfbfbf */
	text-decoration: none;
	line-height: 1.2;
	transition: color var(--cvp-dur) var(--cvp-ease);
}

.cvp-footer__menu a:hover,
.cvp-footer__menu a:focus-visible {
	color: var(--cvp-white);
}

/* --- Barra legal -------------------------------------------------------- */

.cvp-footer__legal {
	border-top: 1px solid #4d4d4d;
}

.cvp-footer__legal p {
	max-width: var(--cvp-container);
	margin-inline: auto;
	padding: var(--cvp-sp-2) var(--cvp-gutter);
	font-size: 0.75rem;                        /* 12px */
	color: #999;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
	.cvp-footer__top {
		flex-wrap: wrap;
		gap: var(--cvp-sp-4) var(--cvp-sp-5);
	}

	.cvp-footer__brand {
		flex: 0 0 100%;
		max-width: none;
	}

	.cvp-footer__col { flex: 1 1 30%; }
}

@media (max-width: 600px) {
	.cvp-footer__col { flex: 1 1 45%; }
}

/*
 * Mobile. El diseño (nodo 148:1079) apila las cinco columnas de a una y el
 * pie quedaba en 899 px a 390 de ancho: más de una pantalla entera de
 * celular. Desde el 31 de octubre de 2026, a pedido de Diego, van de a dos
 * (COVIPRO | Actualidad, Formá | Federá, Contacto), con la marca y las redes
 * arriba a todo el ancho.
 */
@media (max-width: 700px) {
	.cvp-footer__top {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 1.25rem;                  /* 28 entre filas, 20 entre columnas */
		padding-top: var(--cvp-sp-5);
	}

	.cvp-footer__brand { grid-column: 1 / -1; }

	.cvp-footer__menu { gap: 10px; }
}