/* ==========================================================================
   Rayo Web · Kickers globales (base: desarrollo-web)
   ========================================================================== */

/* Sección — label naranja uppercase */
.rw-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rw-kicker, #ff7a1a);
	margin: 0 0 18px;
}

.rw-kicker--light {
	color: var(--rw-kicker-light, #ffb400);
}

.rw-head--center .rw-kicker,
[class*="head--center"] .rw-kicker {
	justify-content: center;
}

/* Hero H1 — pill (fondos oscuros) */
h1.rw-kicker--pill,
.rw-kicker--pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	margin: 0 0 26px;
}

h1.rw-kicker--pill {
	margin-bottom: 40px;
}

/* Gana a reglas de h1 oscuro en landings (.wp-landing h1, etc.) */
.wpl-hero h1.rw-kicker--pill,
.ai-hero h1.rw-kicker--pill,
.ux-hero h1.rw-kicker--pill,
.rw-dw-hero h1.rw-kicker--pill,
.rw-ia-hero h1.rw-kicker--pill,
.rw-ct-hero h1.rw-kicker--pill,
.rw-sr-hero h1.rw-kicker--pill {
	color: rgba(255, 255, 255, 0.82);
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
}

.rw-kicker--pill > i {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff7a1a;
	box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.25);
	flex-shrink: 0;
}

/* Hero H1 — pill en fondos claros (home, legales) */
.rw-kicker--pill.rw-kicker--on-light,
h1.rw-kicker--pill.rw-kicker--on-light {
	color: rgba(7, 23, 47, 0.78);
	border-color: rgba(7, 23, 47, 0.12);
	background: rgba(255, 255, 255, 0.72);
}