/*
 * instaladores.css
 * Página pública /instaladores/ — misma línea visual del home (franjas de
 * color alternadas, tarjetas redondeadas, kicker+título). A diferencia de
 * mayoristas.css de Global Nails (que pintaba 3 tarjetas de nivel con %
 * generado por PHP desde saes_tier_config()), aquí solo hay un beneficio
 * ("Precio Instalador"), así que no hay grid de niveles ni color dinámico
 * por tier — ver page-instaladores.php.
 */

.saes-instaladores { overflow-x: hidden; }

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

/* ─── Cómo funciona ─── */
.saes-instaladores-pasos { padding-block: var(--espacio-2xl); }
.saes-instaladores-pasos__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-lg);
	margin-top: var(--espacio-lg);
}
.saes-instaladores-paso { text-align: center; }
.saes-instaladores-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);
}
.saes-instaladores-paso h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.saes-instaladores-paso p { color: var(--color-texto-suave); font-size: .9rem; line-height: 1.6; margin: 0; }

/* ─── El beneficio (Precio Instalador) ─── */
.saes-instaladores-beneficio-principal { padding-block: var(--espacio-2xl); background: var(--color-fondo-alterno); text-align: center; }
.saes-instaladores-beneficio-principal__intro { color: var(--color-texto-suave); max-width: 680px; margin: 0 auto var(--espacio-lg); }

.saes-instaladores-comparacion {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-md);
	max-width: 640px;
	margin: 0 auto var(--espacio-lg);
	text-align: left;
}
.saes-instaladores-comparacion__col {
	background: #fff;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-lg);
	padding: var(--espacio-lg);
	box-shadow: var(--sombra-tarjeta);
}
.saes-instaladores-comparacion__col h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.saes-instaladores-comparacion__col p { color: var(--color-texto-suave); font-size: .9rem; margin: 0; }
.saes-instaladores-comparacion__col--destacada {
	background: var(--color-primario);
	border-color: var(--color-primario);
}
.saes-instaladores-comparacion__col--destacada h3,
.saes-instaladores-comparacion__col--destacada p { color: #fff; }

.saes-instaladores-beneficio-principal__cta { display: inline-flex; }

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

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

@media (min-width: 640px) {
	.saes-instaladores-pasos__grid { grid-template-columns: repeat(3, 1fr); }
	.saes-instaladores-comparacion { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.saes-instaladores-beneficios__grid { grid-template-columns: repeat(4, 1fr); }
}