/*
 * mayoristas.css
 * Página pública /mayoristas/ — misma línea visual del home (franjas de
 * color alternadas, tarjetas redondeadas, kicker+título). Los niveles se
 * generan en PHP desde gn_tier_config(), este CSS solo los viste.
 */

.gn-mayoristas { overflow-x: hidden; }

/* ─── Hero ─── */
.gn-mayoristas-hero {
	background: linear-gradient(160deg, var(--color-secundario), var(--color-primario));
	color: #fff;
	padding-block: var(--espacio-2xl);
	text-align: center;
}
.gn-mayoristas-hero__inner { max-width: 680px; margin-inline: auto; }
.gn-mayoristas-hero__kicker {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .75rem;
	font-weight: 700;
	color: var(--color-dorado);
	margin-bottom: .6rem;
}
.gn-mayoristas-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 var(--espacio-sm); }
.gn-mayoristas-hero p { color: rgba(255,255,255,.8); font-size: 1.05rem; margin: 0 0 var(--espacio-lg); }
.gn-mayoristas-hero__ctas { display: flex; gap: var(--espacio-sm); justify-content: center; flex-wrap: wrap; }
.gn-mayoristas-hero__boton-claro { border-color: rgba(255,255,255,.6); color: #fff; }
.gn-mayoristas-hero__boton-claro:hover { background: rgba(255,255,255,.12); }

/* ─── Cómo funciona ─── */
.gn-mayoristas-pasos { padding-block: var(--espacio-2xl); }
.gn-mayoristas-pasos__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-lg);
	margin-top: var(--espacio-lg);
}
.gn-mayoristas-paso { text-align: center; }
.gn-mayoristas-paso__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: var(--radio-full);
	background: var(--color-fondo-alterno);
	color: var(--color-primario);
	font-weight: 800;
	font-size: 1.1rem;
	margin-bottom: var(--espacio-sm);
}
.gn-mayoristas-paso h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.gn-mayoristas-paso p { color: var(--color-texto-suave); font-size: .9rem; line-height: 1.6; margin: 0; }

/* ─── Niveles ─── */
.gn-mayoristas-niveles { padding-block: var(--espacio-2xl); background: var(--color-fondo-alterno); }
.gn-mayoristas-niveles__intro { color: var(--color-texto-suave); max-width: 620px; margin: 0 0 var(--espacio-lg); }
.gn-mayoristas-niveles__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-md);
}
.gn-nivel-tarjeta {
	background: #fff;
	border-radius: var(--radio-lg);
	overflow: hidden;
	box-shadow: var(--sombra-tarjeta);
	border: 2px solid var(--gn-nivel-color, var(--color-primario));
	display: flex;
	flex-direction: column;
}
.gn-nivel-tarjeta__cabeza {
	background: var(--gn-nivel-color, var(--color-primario));
	color: #fff;
	padding: var(--espacio-md);
	text-align: center;
}
.gn-nivel-tarjeta__emoji { font-size: 1.8rem; display: block; margin-bottom: .3rem; }
.gn-nivel-tarjeta__nombre { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; margin: 0 0 .3rem; }
.gn-nivel-tarjeta__descuento { font-size: 2.2rem; font-weight: 900; margin: 0; line-height: 1; }
.gn-nivel-tarjeta__cuerpo { padding: var(--espacio-md); text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--espacio-sm); }
.gn-nivel-tarjeta__requisito { color: var(--color-texto-suave); font-size: .85rem; margin: 0; }
.gn-nivel-tarjeta__cuerpo .boton { width: 100%; }
.gn-mayoristas-niveles__nota { color: var(--color-texto-suave); font-size: .85rem; margin: var(--espacio-lg) 0 0; text-align: center; }

/* ─── Beneficios ─── */
.gn-mayoristas-beneficios { padding-block: var(--espacio-2xl); }
.gn-mayoristas-beneficios__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--espacio-lg);
}
.gn-mayoristas-beneficio { text-align: center; }
.gn-mayoristas-beneficio__icono { font-size: 1.8rem; display: block; margin-bottom: .5rem; }
.gn-mayoristas-beneficio h3 { margin: 0 0 .3rem; font-size: 1rem; }
.gn-mayoristas-beneficio p { color: var(--color-texto-suave); font-size: .85rem; line-height: 1.5; margin: 0; }

/* ─── CTA final ─── */
.gn-mayoristas-cta { background: var(--color-secundario); padding-block: var(--espacio-2xl); text-align: center; }
.gn-mayoristas-cta__inner { max-width: 560px; margin-inline: auto; }
.gn-mayoristas-cta h2 { color: #fff; margin: 0 0 .6rem; }
.gn-mayoristas-cta p { color: rgba(255,255,255,.75); margin: 0 0 var(--espacio-md); }

@media (min-width: 640px) {
	.gn-mayoristas-pasos__grid { grid-template-columns: repeat(3, 1fr); }
	.gn-mayoristas-niveles__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.gn-mayoristas-beneficios__grid { grid-template-columns: repeat(4, 1fr); }
}