/* [rcb_diagonal] — bisagra diagonal entre dos secciones.
   El bloque tiene el color de la sección ANTERIOR y, encima, una capa con el
   color de la SIGUIENTE recortada en diagonal con clip-path. */

.rcb-diagonal {
	position: relative;
	width: 100%;
	height: var(--rcb-d-alto, 160px);
	background: var(--rcb-d-fondo, var(--rcb-blanco));
	overflow: hidden;
	line-height: 0;
}

.rcb-diagonal::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--rcb-d-color, var(--rcb-gris-fondo));
	/* Sube hacia la derecha: el corte va de abajo-izquierda a arriba-derecha. */
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Invertida: el corte va de arriba-izquierda a abajo-derecha. */
.rcb-diagonal--invertida::before {
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* En móvil una diagonal de 160px se come media pantalla sin aportar nada. */
@media (max-width: 767px) {
	.rcb-diagonal {
		height: clamp(48px, 12vw, 80px);
	}
}