:root {
	--bg-dark: #1a1a1a;
	--green: #67b848;
	--text-white: #ffffff;
	--text-grey: #a1a1a1;
	--border: #2a2a2a;
}

 
.footer {
	background-color: var(--bg-dark);
	color: var(--text-grey);
	padding: 50px 0;
}

.containerPie {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
	gap: 20px;
}

/* --- COLUMNA INFO (LOGO) --- */
.brand-col .logoPie {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.brand-col .logoPie img { height: 45px; } /* Logo igual a pc.png */

.brand-col .logoPie span {
	color: var(--text-white);
	font-size: 32px;
	font-weight: bold;
}

.brand-col p {
	line-height: 1.7;
	font-size: 15px;
	max-width: 320px;
	margin: 0;
}

/* --- COLUMNAS LINKS --- */
.col h3 {
	color: var(--text-white);
	font-size: 18px;
	margin: 0 0 25px 0;
}

.col ul { list-style: none; padding: 0; margin: 0; }
.col ul li { margin-bottom: 15px; }
.col ul li a { color: var(--text-grey); text-decoration: none; font-size: 15px; }

/* --- COLUMNA CONTACTO --- */
.contact-item { display: flex; gap: 12px; margin-bottom: 20px; font-size: 14px; }
.icon { color: var(--green); font-size: 18px; line-height: 1.2; }
.contact-text b { display: block; color: var(--text-grey); font-weight: 500; }

/* Ocultar elementos de acordeón en PC */
.acc-check, .arrow { display: none; }

/* --- RESPONSIVE MÓVIL (Como movil.png) --- */
@media (max-width: 768px) {
	.footer { padding: 0; } /* Elimina espacio superior */

	.containerPie {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 0;
	}

	/* Sección Logo en Móvil */
	.brand-col {
		padding: 25px 20px; /* Margen exacto de movil.png */
	}

	.brand-col .logo { margin-bottom: 15px; }
	.brand-col .logo img { height: 55px; } /* Logo más grande en móvil */
	.brand-col .logo span { font-size: 38px; } /* Texto más grande */

	.brand-col p { 
		max-width: 100%; 
		font-size: 16px;
		color: var(--text-grey);
	}

	/* Acordeones (Links) */
	.col { border-top: 1px solid var(--border); padding: 0 20px; }

	.col label {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 0;
		cursor: pointer;
	}

	.col h3 { margin: 0; font-size: 18px; }

	.arrow {
		display: block;
		width: 10px;
		height: 10px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		transition: 0.3s;
		margin-right: 5px;
	}

	.content-box {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	/* Lógica del Checkbox Hack */
	.acc-check:checked ~ .content-box {
		max-height: 300px;
		padding-bottom: 20px;
	}

	.acc-check:checked ~ label .arrow {
		transform: rotate(-135deg);
	}
}