/* Banner Responsive para Elementor v1.1
   Todos los estilos de botones están "blindados" (!important + variables)
   para que el tema de WordPress no los deforme. Los colores se cambian
   desde Elementor > pestaña Estilo, que solo modifica las variables. */

.rbe-banner {
	position: relative;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	isolation: isolate;
}

.rbe-track {
	position: relative;
	display: grid;
	width: 100%;
}

/* Todas las diapositivas ocupan la misma celda: el alto lo da la imagen */
.rbe-slide {
	grid-area: 1 / 1;
	position: relative;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--rbe-t, 700ms) ease, transform var(--rbe-t, 700ms) ease, visibility 0s linear var(--rbe-t, 700ms);
}

.rbe-slide.is-active {
	visibility: visible;
	opacity: 1;
	z-index: 1;
	transition: opacity var(--rbe-t, 700ms) ease, transform var(--rbe-t, 700ms) ease, visibility 0s;
}

.rbe-effect-slide .rbe-slide { opacity: 1; transform: translateX(100%); }
.rbe-effect-slide .rbe-slide.is-prev { transform: translateX(-100%); }
.rbe-effect-slide .rbe-slide.is-active { transform: translateX(0); }
.rbe-effect-slide.rbe-back .rbe-slide:not(.is-active):not(.is-prev) { transform: translateX(-100%); }
.rbe-effect-slide.rbe-back .rbe-slide.is-prev { transform: translateX(100%); }

.rbe-slide picture { display: block; width: 100%; }

.rbe-banner .rbe-slide img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rbe-banner.rbe-fixed .rbe-slide img {
	height: 520px !important;
	object-fit: cover;
}

/* ---------- Toda la imagen clicable ---------- */
.rbe-banner .rbe-slide-link {
	position: absolute !important;
	inset: 0;
	z-index: 2;
	background: transparent !important;
}

/* ---------- Zona clic sobre el botón dibujado ---------- */
.rbe-banner a.rbe-hotspot {
	position: absolute !important;
	z-index: 3;
	transform: translate(-50%, -50%);
	border-radius: var(--rbe-zone-r, 100px) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	cursor: pointer;
	text-decoration: none !important;
	transition: box-shadow .25s ease, background-color .25s ease, filter .25s ease;
}

.rbe-zone-glow .rbe-banner a.rbe-hotspot:hover,
.rbe-banner a.rbe-hotspot:hover {
	background: rgba(255, 255, 255, .12) !important;
	box-shadow: 0 0 22px 2px color-mix(in srgb, var(--rbe-zone, #ffffff) 70%, transparent);
}

.rbe-zone-ring .rbe-banner a.rbe-hotspot:hover {
	background: transparent !important;
	box-shadow: 0 0 0 3px var(--rbe-zone, #ffffff);
}

.rbe-zone-lift .rbe-banner a.rbe-hotspot:hover {
	background: rgba(255, 255, 255, .14) !important;
	box-shadow: 0 0 22px 2px color-mix(in srgb, var(--rbe-zone, #ffffff) 70%, transparent), 0 12px 24px rgba(0, 0, 0, .3);
}

.rbe-zone-none .rbe-banner a.rbe-hotspot:hover {
	background: transparent !important;
	box-shadow: none;
}

.rbe-banner a.rbe-hotspot:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px;
}

/* Solo en el editor de Elementor: muestra dónde está la zona clic */
.rbe-banner.rbe-edit a.rbe-hotspot {
	background: rgba(236, 72, 153, .28) !important;
	outline: 2px dashed #ec4899 !important;
}

.rbe-banner.rbe-edit a.rbe-hotspot::after {
	content: "ZONA CLIC";
	position: absolute;
	left: 50%;
	top: -4px;
	transform: translate(-50%, -100%);
	padding: 3px 8px;
	font: 700 11px/1 system-ui, sans-serif;
	letter-spacing: .05em;
	color: #fff;
	background: #ec4899;
	border-radius: 4px;
	white-space: nowrap;
}

/* ---------- Botón real ---------- */
.rbe-banner a.rbe-btn {
	position: absolute !important;
	z-index: 3;
	transform: translate(-50%, -50%);
	align-items: center;
	justify-content: center;
	gap: .6em;
	white-space: nowrap;
	line-height: 1.2;
	font-weight: 700;
	font-size: clamp(13px, 1.4vw, 20px);
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none !important;
	color: var(--rbe-btn-c, #fff) !important;
	background: var(--rbe-btn-bg, #111827) !important;
	border: var(--rbe-btn-bw, 0px) solid var(--rbe-btn-bc, transparent) !important;
	padding: var(--rbe-btn-p, .9em 2em) !important;
	border-radius: var(--rbe-btn-r, 999px) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.rbe-banner a.rbe-btn:hover,
.rbe-banner a.rbe-btn:focus-visible {
	color: var(--rbe-btn-ch, #fff) !important;
	background: var(--rbe-btn-bgh, #374151) !important;
	border-color: var(--rbe-btn-bch, var(--rbe-btn-bc, transparent)) !important;
}

.rbe-banner a.rbe-btn:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px; }

.rbe-banner .rbe-btn-ico {
	display: var(--rbe-btn-ico, none);
	width: 1.2em;
	height: 1.2em;
	flex: none;
	transition: transform .2s ease;
}

.rbe-banner a.rbe-btn:hover .rbe-btn-ico { transform: translateX(4px); }

/* ---------- Flechas ---------- */
.rbe-banner button.rbe-arrow {
	all: unset;
	position: absolute !important;
	top: 50% !important;
	z-index: 4 !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--rbe-ar-s, 46px) !important;
	height: var(--rbe-ar-s, 46px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: translateY(-50%) !important;
	border: 0 !important;
	border-radius: 50% !important;
	color: var(--rbe-ar-c, #111827) !important;
	background: var(--rbe-ar-bg, rgba(255, 255, 255, .85)) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
	cursor: pointer !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background-color .2s ease, color .2s ease !important;
}

.rbe-banner button.rbe-arrow:hover,
.rbe-banner button.rbe-arrow:focus-visible {
	color: var(--rbe-ar-ch, #fff) !important;
	background: var(--rbe-ar-bgh, #111827) !important;
}

.rbe-banner button.rbe-arrow:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; }

.rbe-banner button.rbe-arrow svg {
	display: block !important;
	width: 50% !important;
	height: 50% !important;
	fill: none !important;
	stroke: currentColor !important;
	pointer-events: none;
}

.rbe-banner button.rbe-arrow svg path { fill: none !important; stroke: currentColor !important; }

.rbe-banner button.rbe-prev { left: var(--rbe-ar-o, 16px) !important; right: auto !important; }
.rbe-banner button.rbe-next { right: var(--rbe-ar-o, 16px) !important; left: auto !important; }

.rbe-arrows-square .rbe-banner button.rbe-arrow { border-radius: 10px !important; }

.rbe-arrows-plain .rbe-banner button.rbe-arrow,
.rbe-arrows-plain .rbe-banner button.rbe-arrow:hover {
	background: transparent !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}

.rbe-arrows-plain .rbe-banner button.rbe-arrow:hover { color: var(--rbe-ar-ch, #fff) !important; }

/* ---------- Puntos ---------- */
.rbe-banner .rbe-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--rbe-dot-b, 14px);
	z-index: 4;
	display: flex;
	justify-content: var(--rbe-dot-al, center);
	align-items: center;
	gap: var(--rbe-dot-g, 8px);
	padding: 0 20px;
	line-height: 0;
	pointer-events: none;
}

.rbe-banner button.rbe-dot {
	all: unset;
	box-sizing: border-box !important;
	display: block !important;
	flex: none !important;
	width: var(--rbe-dot-s, 10px) !important;
	height: var(--rbe-dot-s, 10px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--rbe-dot-c, rgba(255, 255, 255, .7)) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important;
	cursor: pointer !important;
	pointer-events: auto;
	transition: width .3s ease, background-color .3s ease !important;
}

.rbe-banner button.rbe-dot[aria-current="true"] { background: var(--rbe-dot-a, #ffffff) !important; }

/* Activo alargado (por defecto) */
.rbe-banner button.rbe-dot[aria-current="true"],
.rbe-dots-pill .rbe-banner button.rbe-dot[aria-current="true"] {
	width: calc(var(--rbe-dot-s, 10px) * 2.8) !important;
}

.rbe-dots-circle .rbe-banner button.rbe-dot[aria-current="true"] {
	width: var(--rbe-dot-s, 10px) !important;
}

.rbe-dots-line .rbe-banner button.rbe-dot {
	width: calc(var(--rbe-dot-s, 10px) * 3) !important;
	height: max(3px, calc(var(--rbe-dot-s, 10px) * .35)) !important;
	border-radius: 2px !important;
}

.rbe-dots-line .rbe-banner button.rbe-dot[aria-current="true"] {
	width: calc(var(--rbe-dot-s, 10px) * 3) !important;
}

.rbe-banner button.rbe-dot:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }

/* Área táctil más grande sin agrandar el punto */
.rbe-banner button.rbe-dot { position: relative !important; }
.rbe-banner button.rbe-dot::before {
	content: "";
	position: absolute;
	inset: -8px -4px;
}

@media (max-width: 767px) {
	.rbe-banner button.rbe-arrow {
		display: var(--rbe-ar-hm, flex) !important;
		width: calc(var(--rbe-ar-s, 46px) * .75) !important;
		height: calc(var(--rbe-ar-s, 46px) * .75) !important;
	}
	.rbe-banner button.rbe-prev { left: var(--rbe-ar-o, 8px) !important; }
	.rbe-banner button.rbe-next { right: var(--rbe-ar-o, 8px) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.rbe-slide,
	.rbe-slide.is-active { transition: none; }
}

/* Aviso solo visible en el editor cuando falta el enlace */
.rbe-banner .rbe-warn {
	position: absolute;
	top: 10px;
	left: 50%;
	z-index: 6;
	transform: translateX(-50%);
	padding: 8px 14px;
	font: 600 13px/1.3 system-ui, sans-serif;
	color: #fff;
	background: #d97706;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
	white-space: nowrap;
}

/* Solo una diapositiva visible en esta pantalla: sin flechas ni puntos */
.rbe-banner.rbe-single button.rbe-arrow,
.rbe-banner.rbe-single .rbe-dots,
.rbe-banner button.rbe-dot.rbe-dot-off { display: none !important; }