/**
 * Frikimart — hoja de estilos principal.
 *
 * Variables CSS (tokens) según la paleta y tipografías de los mockups en
 * docs/diseno/*.dc.html. Nada aquí registra ni consulta datos: el theme
 * solo presenta lo que el plugin le entrega.
 */

:root {
	/* Colores */
	--fm-color-fondo: #FFF7EC;
	--fm-color-texto: #1C1426;
	--fm-color-acento: #D6187A;
	--fm-color-acento-oscuro: #A8105F;
	--fm-color-gris: #7A6E86;
	--fm-color-blanco: #FFFFFF;
	--fm-color-exito: #3DBB6B;
	--fm-color-rosa-claro: #F4A6C0;

	/* Tipografía */
	--fm-fuente-titulos: 'Bricolage Grotesque', 'Dela Gothic One', sans-serif;
	--fm-fuente-display: 'Dela Gothic One', 'Bricolage Grotesque', sans-serif;
	--fm-fuente-texto: 'Figtree', sans-serif;

	/* Espaciado */
	--fm-espacio-xs: 0.5rem;
	--fm-espacio-sm: 1rem;
	--fm-espacio-md: 1.5rem;
	--fm-espacio-lg: 2.5rem;
	--fm-espacio-xl: 4rem;

	/* Bordes */
	--fm-radio-borde: 1rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Barras de scroll con los colores del theme (página, modales, tablas). */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--fm-color-acento) var(--fm-color-fondo);
}

@supports not (scrollbar-color: auto) {
	*::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}

	*::-webkit-scrollbar-track {
		background: var(--fm-color-fondo);
	}

	*::-webkit-scrollbar-thumb {
		background: var(--fm-color-acento);
		border-radius: 999px;
		border: 2px solid var(--fm-color-fondo);
	}

	*::-webkit-scrollbar-thumb:hover {
		background: var(--fm-color-acento-oscuro);
	}
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--fm-color-fondo);
	color: var(--fm-color-texto);
	font-family: var(--fm-fuente-texto);
	line-height: 1.5;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fm-fuente-titulos);
	line-height: 1.2;
}

a {
	color: var(--fm-color-acento);
}

a:hover,
a:focus {
	color: var(--fm-color-acento-oscuro);
}

:focus-visible {
	outline: 3px solid var(--fm-color-acento);
	outline-offset: 2px;
}

.fm-contenedor {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--fm-espacio-sm);
}

.fm-boton {
	display: inline-block;
	font-family: var(--fm-fuente-texto);
	font-weight: 600;
	border-radius: var(--fm-radio-borde);
	padding: 0.75em 1.5em;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
}

.fm-boton--primario {
	background-color: var(--fm-color-acento);
	color: var(--fm-color-blanco);
}

.fm-boton--primario:hover,
.fm-boton--primario:focus {
	background-color: var(--fm-color-acento-oscuro);
	color: var(--fm-color-blanco);
}

.fm-boton:disabled,
.fm-boton[disabled] {
	background-color: #ccc;
	border-color: #ccc;
	color: #777;
	cursor: not-allowed;
	opacity: 0.8;
}

.fm-boton:disabled:hover,
.fm-boton[disabled]:hover {
	background-color: #ccc;
	color: #777;
}

.fm-boton--pequeno {
	padding: 0.4em 0.9em;
	font-size: 0.85rem;
}

.fm-boton--secundario {
	background-color: transparent;
	border-color: var(--fm-color-acento);
	color: var(--fm-color-acento);
}

/**
 * .fm-chip: componente compartido (chip de etiqueta/estado). Vive aquí, en
 * main.css (que carga en TODO el sitio), en vez de solo en ficha.css:
 * F3 (Explorar) y F4 (portada, agenda, cupones) también pintan chips
 * (fm_theme_render_tarjeta_negocio(), filtros de Explorar) sin cargar
 * ficha.css, que solo se encola en single-fm_negocio.php. ficha.css sigue
 * teniendo su propia copia por compatibilidad (una declaración duplicada
 * con las mismas reglas no causa ningún conflicto de cascada), pero esta es
 * la que de verdad aplica fuera de la ficha.
 */
.fm-chip {
	align-self: flex-start;
	padding: 5px 12px;
	border: 2px solid var(--fm-color-texto);
	border-radius: 999px;
	background: var(--fm-color-blanco);
	font-family: var(--fm-fuente-texto);
	font-weight: 700;
	font-size: 0.8rem;
}

.fm-chip--urgencia {
	background: var(--fm-color-acento);
	border-color: var(--fm-color-acento);
	color: var(--fm-color-blanco);
}

.fm-chip--usado {
	background: var(--fm-color-fondo);
	border: 1px solid var(--fm-color-gris);
	color: var(--fm-color-gris);
}

/**
 * Tarjeta de cupón: componente único para TODO el sitio (portada, catálogo
 * completo, "Mis cupones" del Nekodex, cupón de la ficha de negocio — ver
 * fm_theme_render_tarjeta_cupon_base() en functions.php). Vive en main.css
 * (no en cada hoja de estilo por plantilla) a propósito: antes existían
 * definiciones separadas de ".fm-cupon-tarjeta" en cupones.css y
 * front-page.css con valores DISTINTOS (padding, tamaño de imagen, tamaño de
 * letra), más ".fm-nekodex-cupon"/".fm-ficha-cupon" con su propio diseño
 * cada una — Fabi reportó que por eso los cupones se veían diferentes según
 * la página. Con una sola definición ya no hay 4 copias que puedan
 * desincronizarse.
 */
.fm-cupon-tarjeta {
	display: flex;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
	border: 2px solid var(--fm-color-texto);
	border-radius: 16px;
	background: var(--fm-color-blanco);
	box-shadow: 3px 3px 0 var(--fm-color-texto);
	overflow: hidden;
	text-decoration: none;
	color: var(--fm-color-texto);
	text-align: left;
	font-family: inherit;
	font-size: 1rem;
	padding: 0;
	margin: 0;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* "Mis cupones" (<li>, no clicable en sí — el "Usar" es un botón aparte
   adentro): sin cursor de mano ni levantamiento al pasar el mouse. */
li.fm-cupon-tarjeta {
	cursor: default;
}

/* Cupón de la ficha de negocio: es un <button> (abre el modal de canje), no
   un <a> — reset completo de estilos nativos de botón para que se vea
   exactamente igual que las demás tarjetas. */
button.fm-cupon-tarjeta {
	appearance: none;
	-webkit-appearance: none;
	border-width: 2px;
	border-style: solid;
}

a.fm-cupon-tarjeta:hover,
a.fm-cupon-tarjeta:focus-visible,
button.fm-cupon-tarjeta:hover,
button.fm-cupon-tarjeta:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--fm-color-texto);
}

.fm-cupon-tarjeta--exclusivo {
	border-color: var(--fm-color-acento);
	box-shadow: 3px 3px 0 var(--fm-color-acento);
}

a.fm-cupon-tarjeta--exclusivo:hover,
a.fm-cupon-tarjeta--exclusivo:focus-visible,
button.fm-cupon-tarjeta--exclusivo:hover,
button.fm-cupon-tarjeta--exclusivo:focus-visible {
	box-shadow: 5px 5px 0 var(--fm-color-acento);
}

.fm-cupon-tarjeta--usado {
	opacity: 0.6;
}

/**
 * Adelanto bloqueado del cupón exclusivo en la ficha de negocio (antes de
 * registrar visita): mismo componente que el resto ("diseño similar", pidió
 * Fabi), pero con un color distinto al rosa de "exclusivo" — oscuro/neutro,
 * para que se lea como "todavía no ganado" en vez de "cupón disponible". La
 * imagen (si tiene) se oscurece con un candado encima; solo el TÍTULO se
 * oculta (queda como texto "???" desde el PHP) — etiquetas de urgencia y
 * vigencia sí se muestran reales.
 */
.fm-cupon-tarjeta--bloqueado {
	border-color: var(--fm-color-texto);
	box-shadow: 3px 3px 0 var(--fm-color-texto);
	background: var(--fm-color-fondo);
}

.fm-cupon-tarjeta--bloqueado .fm-cupon-tarjeta-etiqueta {
	background: var(--fm-color-texto);
	border-color: var(--fm-color-texto);
	color: var(--fm-color-fondo);
}

.fm-cupon-tarjeta--bloqueado .fm-cupon-tarjeta-desc {
	color: var(--fm-color-gris);
	font-style: italic;
	font-weight: 700;
}

.fm-cupon-tarjeta--bloqueado .fm-cupon-tarjeta-imagen-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 20, 38, 0.6) url("../img/iconos/lock-blanco.svg") no-repeat center / 1.3rem;
}

/* Imagen: ahora un bloque real (76px) con peso visual propio, no una
   esquina de 48px — "la imagen del cupón mejor colocada" (Fabi). Siempre
   presente (con un relleno de marca si no hay foto) para que la tarjeta
   nunca cambie de forma según tenga imagen o no. */
.fm-cupon-tarjeta-imagen-wrap {
	position: relative;
	width: 76px;
	flex-shrink: 0;
	border-right: 2px solid var(--fm-color-texto);
	background: var(--fm-color-fondo);
}

.fm-cupon-tarjeta-imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fm-cupon-tarjeta-imagen-wrap--vacio {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--fm-color-acento), var(--fm-color-acento-oscuro));
}

.fm-cupon-tarjeta-imagen-wrap--vacio::before {
	content: "%";
	font-family: var(--fm-fuente-display);
	font-size: 1.8rem;
	color: rgba(255, 255, 255, 0.85);
}

.fm-cupon-tarjeta--exclusivo .fm-cupon-tarjeta-imagen-wrap {
	border-right-color: var(--fm-color-acento);
}

.fm-cupon-tarjeta-cuerpo {
	flex-grow: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 10px 14px;
}

.fm-cupon-tarjeta-encabezado {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.fm-cupon-tarjeta-etiqueta {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--fm-color-fondo);
	border: 1.5px solid var(--fm-color-acento);
	color: var(--fm-color-acento-oscuro);
	font-weight: 800;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}

.fm-cupon-tarjeta--exclusivo .fm-cupon-tarjeta-etiqueta {
	background: var(--fm-color-acento);
	border-color: var(--fm-color-acento);
	color: var(--fm-color-blanco);
}

.fm-cupon-tarjeta-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.fm-cupon-tarjeta-desc {
	font-family: var(--fm-fuente-titulos);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.25;
}

.fm-cupon-tarjeta-tienda {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--fm-color-gris);
}

.fm-cupon-tarjeta-nota {
	font-size: 0.75rem;
	color: var(--fm-color-gris);
}

/* Zona de acción: flecha (tarjetas que enlazan/abren modal completas) o el
   botón "Usar"/chip de estado ("Mis cupones") — separada del cuerpo con la
   misma línea punteada que antes marcaba la etiqueta, ahora como el
   "perforado" de un boleto de verdad. */
.fm-cupon-tarjeta-accion {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border-left: 2px dashed var(--fm-color-texto);
}

.fm-cupon-tarjeta--exclusivo .fm-cupon-tarjeta-accion {
	border-left-color: var(--fm-color-acento);
}

.fm-cupon-tarjeta-flecha {
	font-size: 1.8rem;
	line-height: 1;
	color: var(--fm-color-gris);
}

.fm-cupon-tarjeta-accion .fm-boton {
	white-space: nowrap;
}

/* Íconos de Font Awesome autohospedados (fm_theme_icono_svg(), functions.php
   → assets/img/iconos/). Los archivos SVG originales no traen width/height:
   el tamaño y color salen de aquí (fill: currentColor), nunca fijos en el
   SVG, para que cada botón los pinte en su propio color de texto. */
.fm-icono-corazon,
.fm-icono-lapiz {
	width: 18px;
	height: 18px;
	display: block;
	fill: currentColor;
}

/* -------------------------------------------------------------------- */
/* Header del sitio (docs/diseno/Main.dc.html y Escritorio.dc.html)      */
/* -------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Aviso genérico (éxito/error/info): usado por Registrar negocio, Reclamar
   ficha y el Panel del negocio — vive aquí porque main.css carga en todo
   el sitio, en vez de duplicarlo en cada hoja de estilos de F5. */
.fm-aviso {
	border-radius: var(--fm-radio-borde);
	padding: var(--fm-espacio-sm) var(--fm-espacio-md);
	margin: var(--fm-espacio-md) 0;
	border: 2px solid var(--fm-color-texto);
}

.fm-aviso--exito {
	background: #E7F8EE;
	border-color: var(--fm-color-exito);
}

.fm-aviso--error {
	background: #FDEAEF;
	border-color: var(--fm-color-acento);
}

.fm-aviso--error ul {
	margin: 0;
	padding-left: 1.2em;
}

.fm-aviso--info {
	background: #FFF3D6;
}

.fm-site-header {
	border-bottom: 2px solid var(--fm-color-texto);
	background: var(--fm-color-fondo);
}

.fm-site-header-inner {
	position: relative;
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fm-espacio-sm);
	flex-wrap: wrap;
	row-gap: 6px;
	padding: 8px 0;
}

.fm-site-branding {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--fm-color-texto);
	flex-shrink: 0;
}

.fm-site-logo {
	display: block;
	height: 28px;
	width: auto;
}

.fm-menu-principal {
	position: absolute;
	top: 64px;
	left: 0;
	right: 0;
	display: none;
	flex-direction: column;
	background: var(--fm-color-fondo);
	border-bottom: 2px solid var(--fm-color-texto);
	padding: var(--fm-espacio-xs) var(--fm-espacio-sm);
	z-index: 20;
}

.fm-menu-principal--abierto {
	display: flex;
}

.fm-menu-principal a {
	padding: 0.75em 0;
	font-weight: 600;
	color: var(--fm-color-texto);
	text-decoration: none;
	border-bottom: 1px solid #e8dfd2;
}

.fm-menu-principal a:last-child {
	border-bottom: 0;
}

.fm-site-header-acciones {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}

.fm-boton-para-negocios {
	display: none;
	height: 40px;
	box-sizing: border-box;
	align-items: center;
	padding: 0 16px;
	border: 2px solid var(--fm-color-texto);
	border-radius: 12px;
	background: var(--fm-color-acento);
	box-shadow: 3px 3px 0 var(--fm-color-texto);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--fm-color-blanco);
	text-decoration: none;
	white-space: nowrap;
}

/* Iniciar/cerrar sesión (header.php): mismo look de "botón píldora" que
   .fm-boton-para-negocios pero más discreto (sin relleno de color) — a
   diferencia de "Para negocios"/"Mi panel", este SÍ se ve en celular, no
   solo en escritorio, porque saber si tienes sesión iniciada importa en
   cualquier tamaño de pantalla. */
.fm-boton-sesion {
	height: 40px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 0 14px;
	border: 2px solid var(--fm-color-texto);
	border-radius: 999px;
	background: transparent;
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--fm-color-texto);
	text-decoration: none;
	white-space: nowrap;
}

.fm-boton-sesion--salir {
	border-color: var(--fm-color-gris);
	color: var(--fm-color-gris);
}

/* "Mi cuenta" (Fix 5, ronda 2): Fabi reportó que pasaba desapercibido junto
   a "Cerrar sesión" (mismo estilo discreto de .fm-boton-sesion, sin
   relleno). Se le da el mismo peso visual que "Mi panel"/"Para negocios"
   (.fm-boton-para-negocios: relleno de color + sombra cómic) para que
   destaque igual en esa fila, en vez de competir en silencio con "Cerrar
   sesión". */
.fm-boton-sesion--cuenta {
	border-color: var(--fm-color-texto);
	background: var(--fm-color-acento);
	box-shadow: 3px 3px 0 var(--fm-color-texto);
	color: var(--fm-color-blanco);
}

/* Hover de "Para negocios" / "Mi panel" / "Mi cuenta": la regla global de
   enlaces pasaba el texto a magenta oscuro sobre fondo rosa y se perdía.
   Texto blanco, fondo más oscuro y el botón se "hunde". */
.fm-boton-para-negocios:hover,
.fm-boton-para-negocios:focus,
.fm-boton-sesion--cuenta:hover,
.fm-boton-sesion--cuenta:focus {
	background: var(--fm-color-acento-oscuro);
	color: var(--fm-color-blanco);
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--fm-color-texto);
}

.fm-boton-menu-movil {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--fm-color-texto);
	border-radius: 10px;
	background: var(--fm-color-texto);
	color: var(--fm-color-fondo);
	cursor: pointer;
	padding: 0;
}

@media (min-width: 1024px) {
	.fm-site-header-inner {
		min-height: 80px;
		flex-wrap: nowrap;
	}

	.fm-site-logo {
		height: 34px;
	}

	.fm-menu-principal {
		position: static;
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		margin-left: var(--fm-espacio-lg);
		border-bottom: 0;
		padding: 0;
		background: transparent;
		gap: 4px;
	}

	.fm-menu-principal a {
		border-bottom: 0;
		padding: 0 12px;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.fm-boton-para-negocios {
		height: 44px;
	}

	.fm-boton-para-negocios {
		display: flex;
	}

	.fm-boton-menu-movil {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* Pie del sitio                                                         */
/* -------------------------------------------------------------------- */

.fm-site-footer {
	position: relative;
	margin-top: var(--fm-espacio-xl);
	padding: var(--fm-espacio-lg) 0 var(--fm-espacio-md);
	background-color: var(--fm-color-texto);
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 18px 18px;
	border-top: 6px solid var(--fm-color-acento);
	color: #d9d2e3;
	font-size: 0.95rem;
}

.fm-pie-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fm-espacio-lg);
}

.fm-pie-bloque {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fm-espacio-xs);
}

.fm-pie-nombre {
	font-family: var(--fm-fuente-display);
	font-size: 1.9rem;
	line-height: 1.1;
	color: var(--fm-color-fondo);
	text-decoration: none;
}

.fm-pie-nombre:hover,
.fm-pie-nombre:focus {
	color: var(--fm-color-rosa-claro);
}

.fm-pie-lema {
	margin: 0;
	font-weight: 700;
	color: var(--fm-color-rosa-claro);
}

.fm-pie-frase {
	margin: 0;
	max-width: 34ch;
	line-height: 1.5;
}

.fm-pie-titulo {
	margin: 0 0 var(--fm-espacio-xs);
	padding-bottom: 8px;
	border-bottom: 3px solid var(--fm-color-acento);
	font-family: var(--fm-fuente-display);
	font-weight: 400;
	font-size: 1.05rem;
	color: var(--fm-color-fondo);
}

.fm-pie-lista {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-pie-lista a,
.fm-pie-correo {
	color: #d9d2e3;
	text-decoration: none;
}

.fm-pie-lista a:hover,
.fm-pie-lista a:focus,
.fm-pie-correo:hover,
.fm-pie-correo:focus {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--fm-color-acento);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Redes: botones redondos con sombra cómic. */
.fm-pie-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: var(--fm-espacio-xs) 0 0;
	padding: 0;
	list-style: none;
}

.fm-pie-red {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 2px solid var(--fm-color-fondo);
	border-radius: 50%;
	color: var(--fm-color-fondo);
	box-shadow: 3px 3px 0 var(--fm-color-acento);
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.fm-pie-red:hover,
.fm-pie-red:focus {
	background: var(--fm-color-acento);
	color: #fff;
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--fm-color-fondo);
}

.fm-icono-pie {
	width: 20px;
	height: 20px;
	fill: currentColor;
	flex: none;
}

/* "¿Falta tu tienda?": tarjeta con borde punteado. */
.fm-pie-falta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: var(--fm-espacio-sm);
	border: 2px dashed var(--fm-color-rosa-claro);
	border-radius: var(--fm-radio-borde, 12px);
	background: rgba(255, 255, 255, 0.04);
}

.fm-pie-falta strong {
	font-family: var(--fm-fuente-display);
	font-weight: 400;
	font-size: 1.05rem;
	color: var(--fm-color-fondo);
}

.fm-pie-falta .fm-boton--primario,
.fm-pie-falta .fm-boton--primario:hover,
.fm-pie-falta .fm-boton--primario:focus {
	color: #fff;
}

.fm-pie-correo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: var(--fm-espacio-xs);
	word-break: break-all;
}

.fm-pie-barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fm-espacio-xs) var(--fm-espacio-sm);
	margin-top: var(--fm-espacio-lg);
	padding-top: var(--fm-espacio-sm);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.85rem;
	color: #a99fb8;
}

.fm-pie-barra p {
	margin: 0;
}

.fm-pie-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-espacio-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-pie-legal a {
	color: #d9d2e3;
}

.fm-pie-legal a:hover,
.fm-pie-legal a:focus {
	color: #fff;
}

.fm-pie-cookies {
	padding: 0;
	border: 0;
	background: none;
	color: #d9d2e3;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.fm-pie-cookies:hover,
.fm-pie-cookies:focus-visible {
	color: #fff;
}

.fm-menu-pie {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-espacio-sm);
}

.fm-menu-pie a {
	color: #d9d2e3;
}

@media (min-width: 768px) {
	.fm-pie-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--fm-espacio-lg) var(--fm-espacio-md);
	}
}

@media (min-width: 1024px) {
	.fm-pie-grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
	}
}

/* Botón "volver arriba": aparece al llegar cerca del final de la página. */
.fm-scroll-top {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--fm-color-fondo);
	border-radius: 50%;
	background: var(--fm-color-acento);
	color: #fff;
	box-shadow: 3px 3px 0 var(--fm-color-fondo);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.fm-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fm-scroll-top:hover,
.fm-scroll-top:focus-visible {
	background: var(--fm-color-acento-oscuro);
}

@media (prefers-reduced-motion: reduce) {
	.fm-scroll-top,
	.fm-pie-red {
		transition: none;
	}
}

/* Recordatorio permanente de "Mis gustos" (mientras el fan no tenga gustos). */
.fm-gustos-recordatorio {
	flex-basis: 100%;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 12px 16px;
	border: 2px dashed var(--fm-color-acento);
	border-radius: 14px;
	background: #fde8f2;
	margin-bottom: var(--fm-espacio-sm);
}

.fm-gustos-recordatorio p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--fm-color-texto);
}

/* Iconos Font Awesome en línea (SVG): escalan con el font-size del contenedor. */
.fm-icono-fa {
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
}

/* "Perfil oficial": icono en tarjetas y chip con nota en la ficha. */
.fm-oficial-icono {
	display: inline-flex;
	margin-left: 6px;
	color: var(--fm-color-acento);
	font-size: 0.95em;
	vertical-align: baseline;
}

.fm-ficha-oficial {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
}

.fm-chip--oficial {
	background: var(--fm-color-acento);
	border-color: var(--fm-color-acento);
	color: var(--fm-color-blanco);
}

.fm-ficha-oficial-nota {
	font-size: 0.75rem;
	line-height: 1.3;
	color: var(--fm-color-gris);
}

.fm-ficha-oficial-nota a {
	color: var(--fm-color-acento);
	text-decoration: underline;
}

/* Los chips y la nota de la fila de categorías comparten el centro vertical. */
.fm-ficha-chips {
	align-items: center;
}

.fm-ficha-chips .fm-chip {
	align-self: center;
}

/* ------------------------------------------------------------------
   Verificación del correo (frikimart-core/includes/accounts/verificacion.php)
   ------------------------------------------------------------------ */
.fm-verificacion {
	padding: var(--fm-espacio-xl) 0;
}

.fm-verificacion-caja {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--fm-espacio-lg) var(--fm-espacio-md);
	border: 2px solid var(--fm-color-texto);
	border-radius: 20px;
	background: var(--fm-color-blanco);
	box-shadow: 5px 5px 0 var(--fm-color-texto);
}

.fm-verificacion-caja h1 {
	margin-top: 0;
}

.fm-verificacion-lead {
	font-size: 1.125rem;
	overflow-wrap: anywhere;
}

.fm-verificacion-extra {
	padding: 0.6rem 0.9rem;
	border-left: 4px solid var(--fm-color-acento);
	border-radius: 8px;
	background: #FFF0F6;
}

.fm-verificacion-pasos {
	margin: var(--fm-espacio-sm) 0;
	padding-left: 1.25rem;
}

.fm-verificacion-pasos li {
	margin-bottom: 0.25rem;
}

.fm-verificacion-nota {
	color: var(--fm-color-gris);
	font-size: 0.9375rem;
}

.fm-verificacion-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-espacio-xs);
	margin-top: var(--fm-espacio-sm);
}

.fm-verificacion-acciones form {
	margin: 0;
}

.fm-aviso-superior {
	padding: 0.75rem var(--fm-espacio-sm);
	background: var(--fm-color-exito);
	color: var(--fm-color-texto);
	font-weight: 700;
	text-align: center;
}