/*
 * Plantilla "Página de plataforma" (template-plataforma.php).
 *
 * Se apoya en template-producto.css (secciones, encabezados, FAQ). Aquí solo
 * van los fondos de cada franja y lo que cambia sobre fondo blanco u oscuro.
 */

.runa-plataforma__section--flujos {
	background: #afa9f7;
}

.runa-plataforma__section--modulos,
.runa-plataforma__section--comparativa {
	background: #f7f7f9;
}

.runa-plataforma__section--integraciones {
	background: #fff;
}

/* Botón bajo el encabezado sobre fondo claro: pill con contorno morado (DESIGN.md §8). */
.runa-plataforma a.runa-producto__head-cta {
	border-color: var(--runa-accent-theme, #7a6ff0);
	background: transparent;
	color: var(--runa-accent-theme, #7a6ff0);
}

.runa-plataforma a.runa-producto__head-cta:hover,
.runa-plataforma a.runa-producto__head-cta:focus {
	background: var(--runa-accent-theme, #7a6ff0);
	border-color: var(--runa-accent-theme, #7a6ff0);
	color: #fff;
}

.runa-plataforma__section--plataforma {
	background: var(--runa-surface, #352c60);
}

.runa-plataforma__section--plataforma .runa-producto__title,
.runa-plataforma__section--plataforma .runa-producto__desc {
	color: #fff;
}

/* Sobre el fondo oscuro, el eyebrow va como pastilla blanca. */
.runa-plataforma__section--plataforma .runa-producto__eyebrow {
	margin-bottom: 12px;
	padding: 6px 12px;
	border-radius: 4px;
	background: #fff;
	color: var(--runa-ink);
}

/* Nota con escudo bajo los flujos: centrada y más grande que el default del shortcode. */
.runa-plataforma__section--flujos .runa-garantia-confianza {
	justify-content: center;
}

.runa-plataforma__section--flujos .runa-garantia-confianza__texto p {
	font-size: 24px;
}