/* Origen Banner Responsive 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. */

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

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

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

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

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

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

.obr-banner .obr-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;
}

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

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

/* ---------- Zona clic sobre el botón dibujado ---------- */
.obr-banner a.obr-hotspot {
	position: absolute !important;
	z-index: 3;
	transform: translate(-50%, -50%);
	border-radius: var(--obr-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;
}

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

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

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

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

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

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

.obr-banner.obr-edit a.obr-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 ---------- */
.obr-banner a.obr-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(--obr-btn-c, #fff) !important;
	background: var(--obr-btn-bg, #0f5132) !important;
	border: var(--obr-btn-bw, 0px) solid var(--obr-btn-bc, transparent) !important;
	padding: var(--obr-btn-p, .9em 2em) !important;
	border-radius: var(--obr-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;
}

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

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

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

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

/* ---------- Flechas ---------- */
.obr-banner button.obr-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(--obr-ar-s, 46px) !important;
	height: var(--obr-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(--obr-ar-c, #0f5132) !important;
	background: var(--obr-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;
}

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

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

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

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

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

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

.obr-arrows-plain .obr-banner button.obr-arrow,
.obr-arrows-plain .obr-banner button.obr-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));
}

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

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

.obr-banner button.obr-dot {
	all: unset;
	box-sizing: border-box !important;
	display: block !important;
	flex: none !important;
	width: var(--obr-dot-s, 10px) !important;
	height: var(--obr-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(--obr-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;
}

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

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

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

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

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

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

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

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

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

/* Aviso solo visible en el editor cuando falta el enlace */
.obr-banner .obr-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 */
.obr-banner.obr-single button.obr-arrow,
.obr-banner.obr-single .obr-dots,
.obr-banner button.obr-dot.obr-dot-off { display: none !important; }