/* ****************************************************************
 * PIXEL CAFE PERU -- foot.css
 * Pie de pagina, barra de cookies y componentes sueltos que no
 * pertenecen a una seccion concreta de layout.css.
 * **************************************************************** */

/* ---- 1. Pie de pagina ---- */
.site-footer {
	background-color: var(--tinta);
	color: var(--plata);
	padding: 72px 0 32px;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(198, 205, 207, 0.2);
}

.site-footer__brand .wordmark {
	color: var(--papel);
	margin-bottom: 16px;
}

.site-footer__brand .wordmark__mark {
	background-color: var(--menta);
}

.site-footer__brand .wordmark__mark span {
	background-color: var(--tinta);
}

.site-footer__desc {
	font-size: 14px;
	max-width: 32ch;
	margin-bottom: 20px;
}

.site-footer__col h4 {
	color: var(--papel);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 18px;
}

.site-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__col a {
	font-size: 14px;
}

.site-footer__col a:hover {
	color: var(--menta);
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 28px;
	font-size: 12px;
	color: var(--plata);
	flex-wrap: wrap;
	gap: 12px;
}

.site-footer__legal {
	display: flex;
	gap: 20px;
}

/* ---- 2. Barra de cookies ---- */
.cookie-bar {
	position: fixed;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: var(--z-cookie);
	max-width: 560px;
	margin: 0 auto;
	background-color: var(--tinta);
	color: var(--papel);
	border-radius: var(--radio-m);
	padding: 22px 24px;
	box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.5);
	display: none;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.cookie-bar.is-visible {
	display: flex;
}

.cookie-bar p {
	flex: 1 1 260px;
	font-size: 13px;
	color: var(--plata);
	max-width: none;
}

.cookie-bar__actions {
	display: flex;
	gap: 10px;
}

.cookie-bar__btn {
	min-height: 40px;
	padding: 0 18px;
	font-size: 13px;
	border-radius: var(--radio-s);
}

.cookie-bar__btn--accept {
	background: var(--gradiente-menta);
	color: #0D2019;
	font-weight: 700;
}

.cookie-bar__btn--reject {
	border: 1px solid var(--plata);
	color: var(--papel);
}

/* ---- 3. Chip / badge generico ---- */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--radio-s);
	font-size: 12px;
	font-weight: 700;
	background-color: var(--papel-alt);
	color: var(--tinta);
}

.chip--menta {
	background-color: var(--menta);
	color: #0D2019;
}

/* ---- 4. Reveal generico usado por IntersectionObserver (faq.js) ---- */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* sin JS el contenido queda visible por defecto: la clase .reveal solo se
   aplica dinamicamente desde faq.js (ver seccion Reveal), nunca en el HTML */

/* ---- 5. Franja de horario rapido (usada en header/contacto) ---- */
.hours-strip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--plata);
}

.hours-strip__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--menta);
}

/* ******************************************************************
   Ajustes responsivos del pie -- el grid de 4 columnas no cabe en
   pantallas chicas y empuja el ancho total de la pagina
   ****************************************************************** */

@media (max-width: 960px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

@media (max-width: 560px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}