/*
 * Gastrototem · Component · Footer
 *
 * Footer global sobre TINTA: CTA de reserva (piso 1) + rule + 4 columnas
 * (piso 2: Navegación/Contacto/Zonas/Legal) + firma con logo invertido (piso 3)
 * + cierre (piso 4). Mobile-first, depende de assets/css/base.css.
 *
 * Texto en papel sobre tinta (nunca tinta sobre oscuro, MARCA §3.3). Cero hex
 * literales · cero familias tipográficas literales. Colores por var(--gtt-*);
 * los tonos muted y los divisores se derivan de papel con color-mix (sin RGBA
 * literal). El logo se recolorea a invertido (papel + símbolo knockout) sin
 * tocar el SVG canónico, igual que la piel transparente del header.
 */

.gtt-footer {
	--footer-cta-size: clamp(2rem, 5vw, 3.5rem);   /* CTA grande de cierre */
	--footer-lockup-width-mobile: 130px;
	--footer-lockup-width-desktop: 160px;
	--footer-rule-color: color-mix(in srgb, var(--gtt-color-papel-100) 16%, transparent);
	--footer-muted:      color-mix(in srgb, var(--gtt-color-papel-100) 65%, transparent);
	--footer-radius: 6px;
	--transition-hover: 180ms;
	--transition-easing: ease-out;

	background-color: var(--gtt-color-tinta-500);
	color: var(--gtt-color-papel-100);
	font-family: var(--gtt-font-sans);
}

/* INNER · padding responsive, contenido a sangre (sin max-width, como Lovable) */

.gtt-footer__inner {
	padding: var(--gtt-space-16) var(--gtt-space-6) var(--gtt-space-12);
}

@media (min-width: 768px) {
	.gtt-footer__inner {
		padding: var(--gtt-space-24) var(--gtt-space-12) var(--gtt-space-16);
	}
}

@media (min-width: 1024px) {
	.gtt-footer__inner {
		padding-left: var(--gtt-space-16);
		padding-right: var(--gtt-space-16);
	}
}

/* ============================================================
 * KICKERS · mono uppercase, muted papel
 * ============================================================ */

.gtt-footer__kicker {
	margin: 0 0 var(--gtt-space-4);
	font-family: var(--gtt-font-mono);
	font-weight: 500;
	font-size: var(--gtt-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--gtt-tracking-wide);
	color: var(--footer-muted);
}

/* ============================================================
 * PISO 1 · CTA de cierre
 * ============================================================ */

.gtt-footer__cta-link {
	display: inline-flex;
	align-items: baseline;
	gap: var(--gtt-space-3);
	font-family: var(--gtt-font-sans);
	font-weight: 500;
	font-size: var(--footer-cta-size);
	line-height: var(--gtt-leading-tight);
	color: var(--gtt-color-papel-100);
	text-decoration: none;
	transition: color var(--transition-hover) var(--transition-easing);
}

.gtt-footer__cta-arrow {
	display: inline-block;
	transition: transform var(--transition-hover) var(--transition-easing);
}

@media (hover: hover) and (pointer: fine) {
	.gtt-footer__cta-link:hover {
		color: var(--gtt-color-papel-50);
	}

	.gtt-footer__cta-link:hover .gtt-footer__cta-arrow {
		transform: translateX(var(--gtt-space-1));
	}
}

/* ============================================================
 * RULE entre pisos
 * ============================================================ */

.gtt-footer__rule {
	border: 0;
	height: 1px;
	background-color: var(--footer-rule-color);
	margin: var(--gtt-space-12) 0;
}

/* ============================================================
 * PISO 2 · 4 columnas (1 col móvil, 2 tablet, 4 escritorio)
 * ============================================================ */

.gtt-footer__tier-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gtt-space-12);
}

@media (min-width: 768px) {
	.gtt-footer__tier-cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.gtt-footer__tier-cols {
		grid-template-columns: repeat(4, 1fr);
	}
}

.gtt-footer__col {
	margin: 0;
}

.gtt-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gtt-space-3);
}

.gtt-footer__link {
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-base);
	color: var(--gtt-color-papel-100);
	text-decoration: none;
	transition: color var(--transition-hover) var(--transition-easing);
}

@media (hover: hover) and (pointer: fine) {
	.gtt-footer__link:hover {
		color: var(--gtt-color-papel-50);
		text-decoration: underline;
		text-underline-offset: 4px;
	}
}

.gtt-footer__zona {
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-base);
	color: var(--gtt-color-papel-100);
}

.gtt-footer__zonas-nota {
	margin: var(--gtt-space-3) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-sm);
	color: var(--footer-muted);
}

/* ============================================================
 * PISO 3 · firma (logo invertido + descriptor)
 * ============================================================ */

.gtt-footer__tier-firma {
	display: flex;
	flex-direction: column;
	gap: var(--gtt-space-6);
}

@media (min-width: 768px) {
	.gtt-footer__tier-firma {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.gtt-footer__lockup {
	display: inline-block;
	width: var(--footer-lockup-width-mobile);
	line-height: 0;
	text-decoration: none;
	transition: opacity var(--transition-hover) var(--transition-easing);
}

@media (min-width: 768px) {
	.gtt-footer__lockup {
		width: var(--footer-lockup-width-desktop);
	}
}

.gtt-footer__lockup svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Logo invertido (papel sobre tinta): cuadrado + palabra en papel, símbolo
 * knockout = color de la banda (tinta). Especificidad (0,2,2) gana al <style>
 * interno del SVG; sustituye cualquier color baked (#1d1d1b → no se ve). */
.gtt-footer__lockup svg rect {
	fill: var(--gtt-color-papel-100);
}

.gtt-footer__lockup svg path.st0 {
	fill: var(--gtt-color-papel-100);
}

.gtt-footer__lockup svg path.st1 {
	fill: var(--gtt-color-tinta-500);
}

@media (hover: hover) and (pointer: fine) {
	.gtt-footer__lockup:hover {
		opacity: 0.8;
	}
}

.gtt-footer__descriptor {
	margin: 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-sm);
	color: var(--footer-muted);
}

@media (min-width: 768px) {
	.gtt-footer__descriptor {
		text-align: right;
	}
}

/* ============================================================
 * PISO 4 · cierre (copyright + folio)
 * ============================================================ */

.gtt-footer__tier-cierre {
	display: flex;
	flex-direction: column;
	gap: var(--gtt-space-3);
}

@media (min-width: 768px) {
	.gtt-footer__tier-cierre {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.gtt-footer__copyright,
.gtt-footer__folio {
	margin: 0;
	font-family: var(--gtt-font-mono);
	font-weight: 400;
	font-size: var(--gtt-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--gtt-tracking-wide);
	color: var(--footer-muted);
}

/* ============================================================
 * prefers-reduced-motion · accesibilidad sobre estética
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.gtt-footer *,
	.gtt-footer *::before,
	.gtt-footer *::after {
		transition: none !important;
	}
}