/* ================================================
   FOOTER STYLES
   ================================================ */

/* Wrapper solo para mobile - contiene el footer pegado abajo */
.footer-wrapper {
	/* En desktop no hace nada especial */
}

/* Contenedor principal del footer */
#main-footer {
	background: #F6F3E8;
	padding: 2rem;
	border-top: 1px solid #202020;
}

/* ================================================
   FILA 1: Logo + Contenido
   ================================================ */

.footer-row-1 {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 2rem;
}

/* Logo */
.footer-logo img {
	width: 36.5625rem; /* 585px */
	height: auto;
	display: block;
}

/* Contenedor de las 2 columnas de contenido */
.footer-contenido {
	display: flex;
	gap: 6.875rem; /* 110px */
}

/* Columnas individuales */
.footer-col-1,
.footer-col-2 {
	display: flex;
	flex-direction: column;
}

/* Titulares H3 */
.footer-titular {
	color: #202020;
	font-family: 'Utile Display';
	font-size: 1.125rem; /* 18px */
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -0.18px;
	text-transform: uppercase;
	margin: 0 0 1.5rem 0;
	leading-trim: both;
	text-edge: cap;
}

/* Textos normales */
.footer-texto {
	color: #202020;
	font-family: 'Switzer Variable';
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
}

/* Espaciado específico columna 1 */
.footer-col-1 .footer-texto:first-of-type {
	margin-bottom: 3.6rem;
}

.footer-col-1 .footer-titular:nth-of-type(2) {
	margin-top: 0;
}

.footer-col-2 {
	padding-right: 2rem;
}

/* Espaciado específico columna 2 */
.footer-col-2 .dire {
	margin-bottom: 2.25rem;
}

.footer-col-2 .footer-titular:nth-of-type(2) {
	margin-top: 0;
}

/* Contenedor de redes sociales */
.footer-redes {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Enlaces de redes */
.footer-link {
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.footer-link:hover {
	opacity: 0.7;
}

/* ================================================
   FILA 2: Legales + Icono
   ================================================ */

.footer-row-2 {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

@media (min-width: 768px) {
	.footer-row-2 {
		justify-content: flex-end;
		gap: 2rem
	}
}

/* Enlace Legales */
.footer-legales {
	color: #202020;
	font-family: 'Switzer Variable';
	font-size: 0.875rem; /* 14px */
	font-style: normal;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: -0.14px;
	text-decoration: none;
	transition: opacity 0.3s ease;
	leading-trim: both;
	text-edge: cap;
}

.footer-legales:hover {
	opacity: 0.7;
}

/* Icono footer */
.footer-icono {
	width: 1.49rem; /* 23.84px ≈ 1.49rem */
	height: auto;
	display: block;
}

/* ================================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ================================================ */

@media (max-width: 767px) {
	
	/* Wrapper de 100vh con footer pegado abajo */
	.footer-wrapper {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	
	/* Footer con padding mobile */
	#main-footer {
		padding: 16px;
	}
	
	/* FILA 1 - Cambio a columna */
	.footer-row-1 {
		flex-direction: column;
		align-items: center;
		margin-bottom: 80px;
	}
	
	/* Logo mobile - 358px y centrado */
	.footer-logo {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 64px;
	}
	
	.footer-logo img {
		width: 358px;
		max-width: 100%;
	}
	
	/* Contenido en grid 2 columnas */
	.footer-contenido {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		width: 100%;
	}
	
	/* Titulares mobile */
	.footer-titular {
		font-size: 15.605px;
		letter-spacing: -0.156px;
		margin-bottom: 24px;
	}
	
	/* Textos mobile */
	.footer-texto {
		font-size: 14px;
		line-height: 135%;
		letter-spacing: -0.14px;
	}
	
	/* Espaciado columna 1 mobile */
	.footer-col-1 .footer-texto:first-of-type {
		margin-bottom: 36px;
	}
	
	.footer-col-2 {
		padding-right: 0;
	}
	
	/* Espaciado columna 2 mobile */
	.footer-col-2 .dire {
		margin-bottom: 44px;
	}
	
	/* Fila 2 mobile */
	.footer-row-2 {
		margin-top: 0;
	}
	
	/* Enlace Legales */
	.footer-legales {
		font-size: 14px;
	}

	/* Icono mobile */
	.footer-icono {
		width: 22px;
	}
}