/* ==========================================================================
   Pie de página — Pisos Gómez
   Mismo sistema que el resto: Montserrat + Roboto, mostaza sobre negro.
   Corre en TODO el sitio (no solo portada), así que todo va prefijado con
   .pg-pie para no chocar con ningún otro estilo de página.

   !important en color/border-color de <a> y <h4>: el skin "yellow" de
   Betheme trae reglas globales `a{color:...}` / `h1..h6{color:...}` que
   pisan las nuestras aunque el selector sea más específico (confirmado
   viendo el footer con el CSS del tema real: los links salían naranja
   Betheme en vez de blanco/mostaza, y los <h4> blancos en vez de mostaza).
   Mismo motivo que el !important de pg-marcas.css contra Smush.
   ========================================================================== */

.pg-pie {
	--pg-mostaza: #e8ba40;
	--pg-negro: #070707;
	--pg-negro-800: #1c1c1c;
	--pg-blanco: #ffffff;
	--pg-ancho: 1220px;
	--pg-gutter: clamp(20px, 5vw, 40px);

	position: relative;
	background: var(--pg-negro);
	color: var(--pg-blanco);
	padding: clamp(48px, 6vw, 80px) var(--pg-gutter) 0;
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.pg-pie__caja {
	max-width: var(--pg-ancho);
	margin: 0 auto;
}

/* --- grilla principal ------------------------------------------------------ */

.pg-pie__grilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	padding-bottom: clamp(40px, 6vw, 64px);
}

@media (min-width: 640px) {
	.pg-pie__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.pg-pie__grilla { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
}

/* --- columna de marca ------------------------------------------------------ */

.pg-pie__marca {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	text-decoration: none !important;
	color: var(--pg-blanco) !important;
}

.pg-pie__marca img {
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	object-fit: contain !important;
}

.pg-pie__marca-texto {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

.pg-pie__marca-texto b {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -.01em;
}

.pg-pie__marca-texto span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pg-mostaza);
}

.pg-pie__intro p {
	margin: 0 0 20px;
	font-size: .92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .62);
	max-width: 34ch;
}

.pg-pie__redes {
	display: flex;
	gap: 10px;
	margin-bottom: 22px;
}

.pg-pie__redes a {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	color: var(--pg-blanco) !important;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.pg-pie__redes a:hover,
.pg-pie__redes a:focus-visible {
	background: var(--pg-mostaza);
	border-color: var(--pg-mostaza);
	color: var(--pg-negro) !important;
}

.pg-pie__redes svg { fill: currentColor; }

/* --- columnas de links ------------------------------------------------------ */

.pg-pie__col h4 {
	margin: 0 0 18px;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pg-mostaza) !important;
}

.pg-pie__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-pie__lista li { margin: 0 0 11px; }

.pg-pie .pg-pie__lista a {
	font-size: .9rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .68) !important;
	text-decoration: none !important;
	transition: color .18s ease;
}

.pg-pie .pg-pie__lista a:hover,
.pg-pie .pg-pie__lista a:focus-visible {
	color: var(--pg-mostaza) !important;
}

/* --- barra inferior ---------------------------------------------------------- */

.pg-pie__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.pg-pie__barra p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .5);
}

.pg-pie__creditos a {
	color: rgba(255, 255, 255, .68) !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	transition: color .18s ease, border-color .18s ease;
}

.pg-pie__creditos a:hover,
.pg-pie__creditos a:focus-visible {
	color: var(--pg-mostaza) !important;
	border-color: var(--pg-mostaza);
}

.pg-pie :focus-visible {
	outline: 3px solid var(--pg-mostaza);
	outline-offset: 2px;
}

/* --- celular ------------------------------------------------------------- */

@media (max-width: 639px) {
	.pg-pie__barra {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pg-pie__redes a,
	.pg-pie .pg-pie__lista a,
	.pg-pie__creditos a {
		transition-duration: 1ms;
	}
}