/**
 * fm-footer.css
 * Footer global — Fernando Mier
 *
 * Se encola en TODAS las vistas (va en el Theme Builder), no por slug.
 * Prefijo propio: fm-footer / fm-ft para las variables.
 *
 * Estructura: una sola rejilla de 3 columnas y 2 filas.
 *   1fr | auto | 1fr   →  la columna central queda centrada respecto a la
 *   página completa, no respecto al hueco entre logo y botón. Es lo que
 *   pide el diseño: el lema y el aviso legal están alineados al eje del sitio.
 *
 * REVISIÓN 2026-09
 *   · El hover del botón usaba un dorado que no es el del sistema. Pasa a
 *     #9B8659, que es el único dorado del proyecto.
 *   · El botón TIENDA deja de declarar medida propia: consume los tokens
 *     --fm-btn-* de custom.css. Es el que más crece (de 168 a 250 de ancho);
 *     ver la nota del bloque 4.
 */

/* -------------------------------------------------------------------------
 * 1 · Contenedor de Elementor
 * ---------------------------------------------------------------------- */

/* (0,2,0) para ganarle a .e-con.e-flex sin recurrir a !important. */
.elementor .fm-footer-con {
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--padding-block-start: 0;
	--padding-block-end: 0;
	padding-inline: 0;
	padding-block: 0;
	width: 100%;
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * 2 · Variables de control
 * ---------------------------------------------------------------------- */

.fm-footer {
	/* Color */
	--fm-ft-bg: #01060c;
	--fm-ft-oro: #9b8659;
	--fm-ft-claro: #ADB3BC;
	--fm-ft-cuerpo: #ADB3BC;
	--fm-ft-tenue: rgba(173, 179, 188, 0.55);
	--fm-ft-borde: rgba(173, 179, 188, 0.42);

	/* Métrica — los valores máximos son los del Figma a 1440 */
	--fm-ft-inline: clamp(20px, 9.72vw, 140px);
	--fm-ft-arriba: clamp(48px, 4.44vw, 64px);
	--fm-ft-abajo: clamp(40px, 3.89vw, 56px);
	--fm-ft-filas: clamp(40px, 8.33vw, 120px);
	--fm-ft-cols: clamp(24px, 3vw, 48px);

	/* Piezas */
	--fm-ft-logo: clamp(58px, 6.94vw, 100px);
	--fm-ft-icono: clamp(22px, 2.22vw, 32px);

	/* Textura opcional del fondo (ver bloque 8) */
	--fm-ft-textura: none;
	--fm-ft-textura-op: 0.5;

	position: relative;
	isolation: isolate;
	overflow: clip; /* clip y no hidden: no rompe position:sticky de la página */
	background-color: var(--fm-ft-bg);
	padding-block: var(--fm-ft-arriba) var(--fm-ft-abajo);
	padding-inline: var(--fm-ft-inline);
}

/* -------------------------------------------------------------------------
 * 3 · Rejilla
 * ---------------------------------------------------------------------- */

.fm-footer__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
	grid-template-areas:
		"logo lema tienda"
		"mail legal redes";
	align-items: center;
	row-gap: var(--fm-ft-filas);
	column-gap: var(--fm-ft-cols);
}

.fm-footer__logo   { grid-area: logo;   justify-self: start;  }
.fm-footer__lema   { grid-area: lema;   justify-self: center; }
.fm-footer__tienda { grid-area: tienda; justify-self: end;    }
.fm-footer__mail   { grid-area: mail;   justify-self: start;  }
.fm-footer__legal  { grid-area: legal;  justify-self: center; }
.fm-footer__redes  { grid-area: redes;  justify-self: end;    }

/* -------------------------------------------------------------------------
 * 4 · Fila superior
 * ---------------------------------------------------------------------- */

.fm-footer__logo {
	display: inline-flex;
	line-height: 0;
}

.fm-footer__logo img {
	display: block;
	height: var(--fm-ft-logo);
	width: auto;
}

.fm-footer__lema {
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	font-family: var(--fm-fuente-cuerpo, "NORD", sans-serif);
	font-weight: 300;
	font-size: clamp(10px, 1.04vw, 15px);
	line-height: 2;
	letter-spacing: 0.22em;
	/* La tipografía va trackeada: el sangrado compensa el espacio sobrante
	   que letter-spacing añade después del último carácter. */
	text-indent: 0.22em;
	color: var(--fm-ft-claro);
}

/* MEDIDA DEL SISTEMA (tokens --fm-btn-* de custom.css).
 *
 * ⚠ Es el botón que MÁS crece de todo el sitio: de 168 a 250 de ancho.
 * En la rejilla de tres columnas a 1440 hay ~380px libres en la columna
 * derecha, así que cabe, pero es el que más peso visual gana.
 *
 * Si Alejandro lo quiere más discreto, la excepción se declara AQUÍ y solo
 * aquí, sobrescribiendo min-width — no volviendo a escribir toda la caja. */
.fm-footer__tienda {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--fm-btn-ancho);
	min-height: var(--fm-btn-alto);
	padding-block: 0;
	padding-inline: var(--fm-btn-pad-x);
	border: 1px solid var(--fm-btn-borde);
	border-radius: 0;
	background-color: transparent;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: "NORD", sans-serif;
	font-weight: var(--fm-btn-peso);
	font-size: var(--fm-btn-tam);
	line-height: 1.2;
	letter-spacing: var(--fm-btn-track);
	text-indent: var(--fm-btn-track);
	color: var(--fm-btn-tinta);
	transition: border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease;
}

.fm-footer__tienda:link,
.fm-footer__tienda:visited {
	color: var(--fm-btn-tinta);
}

/* -------------------------------------------------------------------------
 * 5 · Fila inferior
 * ---------------------------------------------------------------------- */

.fm-footer__mail {
	text-decoration: none;
	text-transform: uppercase;
	font-family: var(--fm-fuente-cuerpo, "NORD", sans-serif);
	font-weight: 300;
	font-size: clamp(9px, 0.83vw, 12px);
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	color: var(--fm-ft-cuerpo);
	transition: color 0.35s ease;
}

.fm-footer__legal {
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	font-family: var(--fm-fuente-cuerpo, "NORD", sans-serif);
	font-weight: 300;
	font-size: clamp(8px, 0.69vw, 10px);
	line-height: 1.6;
	letter-spacing: 0.16em;
	text-indent: 0.16em;
	color: var(--fm-ft-tenue);
}

.fm-footer__redes {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.74vw, 25px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-footer__red {
	display: inline-flex;
	color: var(--fm-ft-cuerpo);
	transition: color 0.35s ease;
}

.fm-footer__red svg {
	display: block;
	height: var(--fm-ft-icono);
	width: auto;
	/* El widget de icono de Elementor inyecta fill:currentColor; aquí no
	   estorba porque estos dos SVG son de relleno, pero lo dejamos explícito. */
	fill: currentColor;
}

/* YouTube es más ancho que alto: se baja un poco para igualar peso óptico. */
.fm-footer__red--yt svg {
	height: calc(var(--fm-ft-icono) * 0.9);
}

/* -------------------------------------------------------------------------
 * 6 · Estados
 *
 * Hover del botón: SOLO el borde pasa a dorado y el peso sube de 300 a 400.
 * El color del texto se queda en #ADB3BC y va declarado explícitamente: es
 * un <a>, y a:visited del tema está en (0,1,1).
 * ---------------------------------------------------------------------- */

@media (hover: hover) {
	.fm-footer__tienda:hover {
		font-weight: var(--fm-btn-peso-on);
		background-color: transparent;
		border-color: var(--fm-btn-oro);
		color: var(--fm-btn-tinta);
	}

	.fm-footer__mail:hover,
	.fm-footer__red:hover {
		color: var(--fm-ft-oro);
	}

	.fm-footer__logo:hover img {
		opacity: 0.82;
	}
}

.fm-footer__tienda:focus-visible {
	outline: 1px solid var(--fm-btn-oro);
	outline-offset: 3px;
	color: var(--fm-btn-tinta);
	font-weight: var(--fm-btn-peso-on);
}

.fm-footer__logo img {
	transition: opacity 0.35s ease;
}

.fm-footer a:focus-visible {
	outline: 2px solid var(--fm-ft-oro);
	outline-offset: 4px;
}

/* Hello Elementor mete button:hover{background:#C36}. Aquí usamos <a>, pero
   si algún día el botón pasa a ser <button> esto evita el flash rosa. */
.fm-footer button:hover,
.fm-footer button:focus {
	background-color: transparent;
}

/* -------------------------------------------------------------------------
 * 7 · Responsive
 * ---------------------------------------------------------------------- */

/* Tablet horizontal: la fila sigue en 3 columnas pero se comprime. */
@media (max-width: 1199px) {
	.fm-footer {
		--fm-ft-filas: clamp(40px, 6.5vw, 78px);
	}
}

/* A partir de aquí las tres columnas ya no caben con el tracking del lema. */
@media (max-width: 991px) {
	.fm-footer {
		--fm-ft-inline: clamp(24px, 6vw, 56px);
		--fm-ft-arriba: 56px;
		--fm-ft-abajo: 44px;
	}

	.fm-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"logo"
			"lema"
			"tienda"
			"redes"
			"mail"
			"legal";
		justify-items: center;
		row-gap: 0;
	}

	.fm-footer__logo,
	.fm-footer__lema,
	.fm-footer__tienda,
	.fm-footer__mail,
	.fm-footer__legal,
	.fm-footer__redes {
		justify-self: center;
	}

	.fm-footer__lema   { margin-top: 32px; }
	.fm-footer__tienda { margin-top: 32px; }
	.fm-footer__redes  { margin-top: 48px; }
	.fm-footer__mail   { margin-top: 32px; }
	.fm-footer__legal  { margin-top: 16px; }

	.fm-footer__mail,
	.fm-footer__legal {
		text-align: center;
	}
}

@media (max-width: 767px) {
	.fm-footer {
		--fm-ft-logo: 64px;
		--fm-ft-icono: 26px;
	}

	/* El salto de línea del diseño es de escritorio. En móvil deja que fluya:
	   con 0.22em de tracking un <br> forzado se sale del viewport.
	   max-width en em y no en ch — ch no contempla letter-spacing. */
	.fm-footer__lema br {
		display: none;
	}

	.fm-footer__lema {
		font-size: 11px;
		line-height: 1.9;
		max-width: min(100%, 21em);
	}

	.fm-footer__mail {
		font-size: 11px;
	}

	.fm-footer__legal {
		font-size: 9px;
		max-width: min(100%, 30em);
	}
}

@media (max-width: 400px) {
	.fm-footer {
		--fm-ft-inline: 20px;
		--fm-ft-logo: 56px;
	}

	.fm-footer__lema {
		font-size: 10px;
		letter-spacing: 0.18em;
		text-indent: 0.18em;
	}

	.fm-footer__mail {
		font-size: 10px;
		letter-spacing: 0.16em;
		text-indent: 0.16em;
	}
}

/* Táctil: sin hover, el color base ya es legible. */
@media (hover: none) {
	.fm-footer__tienda,
	.fm-footer__mail,
	.fm-footer__red {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fm-footer *,
	.fm-footer *::before,
	.fm-footer *::after {
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
 * 8 · Textura de fondo
 * ---------------------------------------------------------------------- */

.fm-footer__textura {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--fm-ft-textura);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/*opacity: var(--fm-ft-textura-op);*/
}


.fm-footer {
	--fm-ft-textura: url("/wp-content/uploads/2026/08/footer_textura.webp");
}