/**
 * Pie del sitio.
 *
 * Tres columnas en escritorio, apiladas en teléfono. Los íconos de redes
 * reutilizan `.hbg-red--wa` / `.hbg-red--ig`, las mismas clases con los colores
 * oficiales que ya usa la página de Contacto; acá sólo se repiten sus fondos
 * porque `contacto.css` se encola únicamente en esa página.
 */

.hbg-footer {
	padding: var(--hbg-e7) var(--hbg-e5) var(--hbg-e5);
	background: var(--hbg-superficie-1);
	border-top: 1px solid var(--hbg-neon);
	color: var(--hbg-texto-suave);
}

.hbg-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hbg-e6);
	max-width: var(--hbg-ancho-max);
	margin-inline: auto;
}

@media (min-width: 900px) {
	.hbg-footer__inner {
		/* La de categorías es la más larga; las otras dos reparten el resto. */
		grid-template-columns: 1.2fr 1fr 0.8fr;
		gap: var(--hbg-e7);
	}
}

.hbg-footer__titulo {
	margin: 0 0 var(--hbg-e4);
	color: var(--hbg-neon);
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* =========================================================================
   COLUMNA IZQUIERDA — categorías
   ========================================================================= */

.hbg-footer__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Doce categorías en una sola columna estiran demasiado el pie. */
	columns: 2;
	column-gap: var(--hbg-e5);
}

.hbg-footer__lista li {
	break-inside: avoid;
	margin-bottom: var(--hbg-e2);
}

.hbg-footer__lista a {
	color: var(--hbg-texto-suave);
	font-size: 0.92rem;
	text-decoration: none;
	transition: color var(--hbg-transicion);
}

.hbg-footer__lista a:hover,
.hbg-footer__lista a:focus-visible {
	color: var(--hbg-neon);
}

/* =========================================================================
   COLUMNA CENTRAL — contacto
   ========================================================================= */

.hbg-footer__col--contacto {
	text-align: center;
}

.hbg-footer__datos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hbg-e3);
}

.hbg-footer__datos li {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--hbg-e2);
	font-size: 0.92rem;
	line-height: 1.45;
}

.hbg-footer__datos a {
	color: var(--hbg-texto-suave);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--hbg-transicion);
}

.hbg-footer__datos a:hover,
.hbg-footer__datos a:focus-visible {
	color: var(--hbg-neon);
}

/* =========================================================================
   COLUMNA DERECHA — redes
   ========================================================================= */

.hbg-footer__col--redes {
	text-align: center;
}

@media (min-width: 900px) {
	.hbg-footer__col--redes {
		text-align: right;
	}
}

.hbg-footer__redes {
	display: flex;
	justify-content: center;
	gap: var(--hbg-e3);
}

@media (min-width: 900px) {
	.hbg-footer__redes {
		justify-content: flex-end;
	}
}

/*
 * Colores oficiales de cada red: la baldosa lleva el color de marca y el glifo
 * va en blanco. Mismo criterio que en la página de Contacto.
 */
.hbg-footer .hbg-red {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	color: #ffffff;
	border: none;
	border-radius: 0;
	transition: transform var(--hbg-transicion), filter var(--hbg-transicion);
}

.hbg-footer .hbg-red--wa {
	background: #25D366;
}

.hbg-footer .hbg-red--ig {
	background: radial-gradient(circle at 30% 107%,
		#fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.hbg-footer .hbg-red:hover,
.hbg-footer .hbg-red:focus-visible {
	transform: scale(1.08);
	filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 255, 255, 0.28));
}

/* =========================================================================
   ENLACES A LO ANCHO
   ========================================================================= */

.hbg-footer__legales {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hbg-e3);
	max-width: var(--hbg-ancho-max);
	margin: var(--hbg-e7) auto 0;
	padding-top: var(--hbg-e5);
	border-top: 1px solid var(--hbg-borde);
	text-align: center;
}

@media (min-width: 700px) {
	.hbg-footer__legales {
		flex-direction: row;
		justify-content: center;
		gap: var(--hbg-e6);
	}
}

.hbg-footer__legales a {
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	transition: color var(--hbg-transicion);
}

.hbg-footer__legales a:hover,
.hbg-footer__legales a:focus-visible {
	color: var(--hbg-neon);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hbg-footer__copy {
	max-width: var(--hbg-ancho-max);
	margin: var(--hbg-e5) auto 0;
	color: var(--hbg-texto-tenue);
	font-size: 0.8rem;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.hbg-footer .hbg-red:hover {
		transform: none;
	}
}

/* =========================================================================
   LISTA DE MANUALES (página Manuales de Cultivo)

   Se oculta sola mientras no tenga ítems, así la página no muestra un hueco
   vacío hasta que se carguen los PDF.
   ========================================================================= */

.hbg-manuales {
	list-style: none;
	margin: var(--hbg-e5) 0 0;
	padding: 0;
	display: grid;
	gap: var(--hbg-e3);
}

.hbg-manuales:empty {
	display: none;
}

.hbg-manual__enlace {
	display: flex;
	align-items: center;
	gap: var(--hbg-e4);
	padding: var(--hbg-e4);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	color: var(--hbg-texto);
	text-decoration: none;
	transition: border-color var(--hbg-transicion), background-color var(--hbg-transicion);
}

.hbg-manual__enlace:hover,
.hbg-manual__enlace:focus-visible {
	border-color: var(--hbg-neon);
	background: var(--hbg-superficie-2);
}

.hbg-manual__icono {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var(--hbg-neon);
	color: var(--hbg-negro);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.72rem;
	font-weight: 800;
}

.hbg-manual__cuerpo {
	display: grid;
	gap: 2px;
}

.hbg-manual__nombre {
	font-family: var(--hbg-fuente-titulo);
	font-weight: 700;
}

.hbg-manual__meta {
	color: var(--hbg-texto-tenue);
	font-size: 0.82rem;
}