/* Opción Eco — home banners (tsk-056). Same full-width layout as the old HTML widget ea5751e. */
.oe-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.oe-viewport { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; }
.oe-ratio-legacy .oe-viewport { aspect-ratio: 3 / 1; }
@media (max-width: 768px) { .oe-ratio-legacy .oe-viewport { aspect-ratio: 4 / 3; } }
.oe-ratio-2x1 .oe-viewport { aspect-ratio: 2 / 1; }

.oe-track { display: flex; width: 100%; height: 100%; will-change: transform; transition: transform 600ms ease; }
.oe-slide { flex: 0 0 100%; height: 100%; position: relative; display: block; color: inherit; text-decoration: none; }
.oe-slide picture, .oe-slide img { display: block; width: 100%; height: 100%; }
.oe-slide img { object-fit: cover; }
.oe-slide:focus-visible { outline: 3px solid #2f6b55; outline-offset: -3px; }

/* "Ver productos": a visual cue; the whole banner is the link. Same spot on desktop and phone. */
.oe-btn {
	position: absolute; display: inline-block; white-space: nowrap; pointer-events: none;
	padding: .55em 1.2em; border-radius: 999px; background: #2f6b55; color: #fff;
	font: 600 clamp(11px, 1.25vw, 17px)/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: background .2s;
}
.oe-slide:hover .oe-btn, .oe-slide:focus-visible .oe-btn { background: #24543f; }
.oe-btn--tl, .oe-btn--tc, .oe-btn--tr { top: 8%; }
.oe-btn--ml, .oe-btn--mc, .oe-btn--mr { top: 50%; }
.oe-btn--bl, .oe-btn--bc, .oe-btn--br { bottom: 8%; }
.oe-btn--tl, .oe-btn--ml, .oe-btn--bl { left: 5%; }
.oe-btn--tr, .oe-btn--mr, .oe-btn--br { right: 5%; }
.oe-btn--tc, .oe-btn--bc { left: 50%; transform: translateX(-50%); }
.oe-btn--ml, .oe-btn--mr { transform: translateY(-50%); }
.oe-btn--mc { left: 50%; transform: translate(-50%, -50%); }

@media (prefers-reduced-motion: reduce) { .oe-track { transition: none; } }