/*! BaseBlue — pie v3. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   PIE v3 (RONDA4 §6)

   Cuatro piezas, una sola jerarquía: la petición (titular + dos acciones),
   el índice en una línea, la marca a todo el ancho como remate y la línea
   legal. Azul a sangre, sin lámina ni margen: la unión con la última
   sección es un cambio de superficie (§2.1, regla 1), así que arriba lleva
   el `--sec-pad` de cualquier sección. Todo sale de los tokens de base.css.
   ========================================================================== */

.sec.foot {
	/* Aire entre filas: petición → índice → marca. Por altura, para que el
	   pie quepa en los topes de §6 sin fijar un alto por pantalla. */
	--foot-gap-1: clamp(4.8rem, 6svh, 9.6rem);
	--foot-gap-2: clamp(4rem, 5svh, 8rem);
	padding-bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px));
	overflow: clip;
}

/* ============================================================ La petición */

.foot__ask { align-items: end; row-gap: 2.4rem; margin-bottom: var(--foot-gap-1); }
.foot__title { grid-column: 1 / span 8; max-width: 22ch; }
/* Las acciones cierran la línea del titular, a la derecha y en su base. */
.foot__actions {
	grid-column: 9 / -1;
	justify-self: end;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1.6rem 3.2rem;
}
.foot__alt { color: var(--muted); transition: color var(--dur-1) var(--ease-out); }
.foot__alt:focus-visible { color: #fff; }

/* -------------------------------------------------- «Corrientes» de ON */
/* Solo con ratón fino: cinco filamentos de luz que cruzan el botón al
   pasar, en cascada. En táctil o con menos movimiento ni se pintan. */
.foot__btn { position: relative; }
.foot__streams { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.foot__streams span {
	position: absolute;
	top: 50%;
	left: -3rem;
	width: 2.5rem;
	height: 0.2rem;
	margin-top: -0.1rem;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7) 50%, transparent);
	box-shadow: 0 0 10px rgba(187, 221, 255, 0.9);
	filter: blur(0.6px);
	opacity: 0;
}
.foot__streams span:nth-child(1) { top: 20%; }
.foot__streams span:nth-child(2) { top: 38%; }
.foot__streams span:nth-child(3) { top: 56%; }
.foot__streams span:nth-child(4) { top: 74%; }
.foot__streams span:nth-child(5) { top: 90%; }
@media (hover: hover) and (pointer: fine) {
	.foot__alt:hover { color: #fff; }
	.foot__btn:hover .foot__streams span { animation: foot-stream 0.7s linear infinite; }
	.foot__streams span:nth-child(2) { animation-delay: 0.05s; }
	.foot__streams span:nth-child(3) { animation-delay: 0.1s; }
	.foot__streams span:nth-child(4) { animation-delay: 0.15s; }
	.foot__streams span:nth-child(5) { animation-delay: 0.2s; }
}
@keyframes foot-stream {
	0% { opacity: 0; transform: translateX(0); }
	10% { opacity: 0.9; }
	90% { opacity: 0.9; }
	100% { opacity: 0; transform: translateX(300px); }
}

/* ============================================================== El índice */
/* Una sola línea sobre un filete: se lee como el índice de un informe, no
   como un menú. Sin flechas ni filetes entre enlaces. La frase de cierre
   cuelga a la derecha del mismo filete, en la columna 9: comparte fila
   para que la marca, debajo, tenga todo el aire. */

.foot__index {
	align-items: start;
	padding-top: 2.4rem;
	border-top: 1px solid var(--rule);
	margin-bottom: var(--foot-gap-2);
}
.foot__nav { grid-column: 1 / span 8; }
.foot__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem 3.2rem;
}
.foot__link {
	font-size: var(--t-body);
	font-weight: 400;
	line-height: 1.4;
	color: inherit;
	transition: color var(--dur-1) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.foot__list:hover .foot__link:not(:hover) { color: var(--muted); }
}

/* ============================================================== La marca */
/* A todo el ancho de la retícula (tope 150 rem): lo más grande del pie y
   el cierre visual de la página. */

/* Al final de la fila y no pegada a la col 9: a 1440 el índice llega al
   borde de la col 8 y la frase se leía como un enlace más. */
.foot__close { grid-column: 9 / -1; justify-self: end; text-align: right; color: #fff; max-width: 26ch; }
.foot__mark {
	display: block;
	width: min(100%, 150rem);
	color: #fff;
}
.foot__mark:focus-visible { outline: 2px solid var(--bb-pale); outline-offset: 0.8rem; }
/* Hover sutil de la marca (pedido del cliente, 2026-09-23). */
.foot__mark .foot__logo { transition: opacity var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.foot__mark:hover .foot__logo { opacity: 0.86; }
}
/* La máscara: la marca sube desde detrás de su línea base. `--foot-par`
   (0 → 8 %) es el único paralaje del pie, ligado a su entrada. */
.foot__rise { display: block; overflow: clip; }
.foot__logo {
	display: block;
	width: 100%;
	height: auto;
	transform: translateY(var(--foot-par, 0%));
}
.foot[data-foot] .foot__rise > svg { translate: 0 108%; transition: translate var(--dur-4) var(--ease-out); }
.foot.is-mark .foot__rise > svg { translate: 0 0; }

/* ============================================================ La línea legal */

.foot__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 2.4rem;
	margin-top: 2.4rem;
	font-size: var(--t-micro);
	font-weight: 300;
	line-height: 1.4;
	color: var(--muted);
}
.foot__policies { display: flex; flex-wrap: wrap; gap: 0.4rem 2.4rem; }
.foot__legal a { transition: color var(--dur-1) var(--ease-out); }
.foot__copy a { color: inherit; }
.foot__credit { display: inline-flex; align-items: center; gap: 0.8em; margin-left: auto; }
.foot__koepke { flex: none; width: 6.4rem; height: auto; }
.foot__legal a:focus-visible { color: #fff; }
@media (hover: hover) and (pointer: fine) {
	.foot__legal a:hover { color: #fff; }
}

/* ============================================================= Dispositivos */

@media (orientation: portrait), (max-width: 899px) {
	.sec.foot {
		--foot-gap-1: clamp(4rem, 5svh, 5.6rem);
		--foot-gap-2: clamp(3.2rem, 4svh, 4.8rem);
	}
	/* Apilado: petición → índice → marca → frase → legal. El índice deja de
	   ser fila (`contents`) para que la frase pueda ir detrás de la marca. */
	.foot > .wrap { display: flex; flex-direction: column; }
	.foot__ask { row-gap: 1.6rem; }
	.foot__index { display: contents; }
	.foot__nav { order: 1; padding-top: 2.4rem; border-top: 1px solid var(--rule); margin-bottom: var(--foot-gap-2); }
	.foot__mark { order: 2; }
	.foot__close { order: 3; margin-top: 1.2rem; max-width: none; text-align: left; }
	.foot__legal { order: 4; }
	.foot__title, .foot__actions { grid-column: 1 / -1; }
	.foot__actions { justify-self: start; justify-content: flex-start; }
	.foot__title { max-width: 16ch; }
	/* Dos columnas de cinco: en un teléfono el índice no cabe en una línea. */
	.foot__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 1.2rem var(--gutter); }
	/* Copyright en su línea; políticas y firma debajo (a 393 la firma
	   baja a una tercera línea corta antes que apretar el texto). */
	.foot__legal { gap: 0.8rem 2rem; }
	.foot__copy { flex-basis: 100%; }
	.foot__policies { gap: 0.4rem 2rem; }
}

/* Tableta en vertical: sobra ancho para una sola columna de índice en dos
   líneas; el tope de 720 px manda. */
@media (orientation: portrait) and (min-width: 700px) {
	.foot__list { display: flex; }
	.foot__title { max-width: 24ch; }
	.foot__copy { flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.foot[data-foot] .foot__rise > svg { translate: none; transition: none; }
	.foot__logo { transform: none; }
	.foot__streams span { animation: none !important; opacity: 0 !important; }
}