/**
 * Revby Bloques — base común.
 * Solo afecta a .rvb-main (la plantilla del plugin); el header y el footer de
 * Elementor quedan como están.
 */

.rvb-main {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	/* clip (y no hidden) para no romper position: sticky */
	overflow-x: clip;
}

/* Hello Elementor da a .alignfull width: 100vw y overflow-x: hidden; lo segundo
   rompe position: sticky. Aquí no hace falta: .rvb-main ya recorta lo que sobra. */
.rvb-main > .alignfull {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	overflow: visible;
}

/* Bloques normales de WordPress (títulos, párrafos…) entre secciones: ancho legible. */
.rvb-main > :where(:not(.alignfull):not(.alignwide)) {
	box-sizing: border-box;
	max-width: 1140px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 20px;
	padding-left: 20px;
}

.rvb-main > .alignwide {
	max-width: 1400px;
	margin-right: auto;
	margin-left: auto;
}

/* ---------- Botón Revby (píldora + círculo con flecha) ----------
   Al pasar el ratón: el texto gira en 3D y la flecha rota −45° (efecto de Viva). */

.rvb-btn.rvb-btn {
	--rvb-btn-bg: #e3fcef;
	--rvb-btn-fg: #183132;
	--rvb-btn-circulo: #183132;
	--rvb-btn-flecha: #e3fcef;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	height: 48px;
	padding: 0 8px 0 22px;
	border-radius: 999px;
	background: var(--rvb-btn-bg);
	color: var(--rvb-btn-fg);
	font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: box-shadow 0.35s ease;
}

.rvb-btn .rvb-btn__texto {
	display: block;
	overflow: hidden;
	perspective: 400px;
}

.rvb-btn .rvb-btn__3d {
	position: relative;
	display: block;
	line-height: 1.25;
}

.rvb-btn .rvb-btn__3d > span {
	display: block;
	backface-visibility: hidden;
	transition: transform 0.35s cubic-bezier(0.45, 0, 0.55, 1);
}

.rvb-btn .rvb-btn__atras {
	position: absolute;
	inset: 0;
	transform: translateY(100%) rotateX(-90deg);
}

.rvb-btn .rvb-btn__icono {
	display: block;
	flex: none;
	width: 32px;
	height: 32px;
	color: var(--rvb-btn-circulo);
	transition: transform 0.35s cubic-bezier(0.45, 0, 0.55, 1);
}

.rvb-btn .rvb-btn__icono svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (hover: hover) {
	.rvb-btn.rvb-btn:hover {
		color: var(--rvb-btn-fg);
		box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.45);
	}

	.rvb-btn:hover .rvb-btn__frente {
		transform: translateY(-100%) rotateX(90deg);
	}

	.rvb-btn:hover .rvb-btn__atras {
		transform: none;
	}

	.rvb-btn:hover .rvb-btn__icono {
		transform: rotate(-45deg);
	}
}

.rvb-btn.rvb-btn:focus-visible {
	outline: 2px solid #6ee7b1;
	outline-offset: 3px;
}

.rvb-btn:focus-visible .rvb-btn__frente {
	transform: translateY(-100%) rotateX(90deg);
}

.rvb-btn:focus-visible .rvb-btn__atras {
	transform: none;
}

.rvb-btn.rvb-btn--chico {
	height: 42px;
	padding-left: 18px;
	font-size: 14px;
}

.rvb-btn--chico .rvb-btn__icono {
	width: 28px;
	height: 28px;
}

/* Grande (captura del cierre): 56 px de alto, Raleway 500 de 18 px */
.rvb-btn.rvb-btn--grande {
	height: 56px;
	padding: 0 12px 0 25px;
	font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
	.rvb-btn .rvb-btn__3d > span,
	.rvb-btn .rvb-btn__icono {
		transition: none;
	}
}