/* =============================================
   VARIABLES DEL PROYECTO  ← solo cambias aquí
   ============================================= */
:root {
	--footer-bg: #232427;      /* fondo del footer          */
	--footer-accent: #F59BBE;  /* línea, divisores, hover   */
	--footer-text: #ffffff;    /* links y texto             */
	--footer-muted: #C9C9CE;   /* texto secundario          */
	--footer-copy: #A9A9AF;    /* copyright                 */
}

/***** FOOTER *****/
footer {
	background-color: var(--footer-bg);
	color: var(--footer-text);
	font-size: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding: 48px 24px 26px;
}

.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.footer-logo { width: auto; height: 84px; max-width: min(100%, 320px); object-fit: contain; }

.footer-tagline { color: var(--footer-muted); font-size: 14px; text-align: center; }

.footer-divider {
	width: min(420px, 80%);
	height: 1px;
	background: linear-gradient(to right, transparent, var(--footer-accent), transparent);
	opacity: .4;
	border: none;
}

.footer-divider--faint { opacity: .18; }

.footer-links { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }

.footer-links a { color: var(--footer-text); font-size: 14px; transition: color .2s; }
.footer-links a:hover { color: var(--footer-accent); }

.footer-dev { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.footer-dev > span { color: var(--footer-muted); font-size: 13px; }

.footer-dev-badge { display: flex; align-items: center; gap: 4px; padding: 0; border-radius: 4px; }

.footer-dev-name { color: var(--footer-accent); font-size: 13px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.footer-dev-tld { color: var(--footer-muted); font-size: 10px; }

.footer-copy { color: var(--footer-copy); font-size: 12px; margin: 0; }

#footer-dev-logo { width: 100px; height: auto; }

@media only screen and (max-width: 599px) {
	.footer-links { gap: 16px; }
}