/**
 * Zenth Antes y Después — Widget Elementor (comparador before/after).
 *
 * Comparador de dos imágenes (antes/después) con un divisor arrastrable,
 * más tabs para alternar entre proyectos. El header de la sección (eyebrow
 * + título + subtítulo) NO es parte del widget: se arma aparte en Elementor
 * con los patrones del theme (sections.css). Este CSS controla solo los
 * tabs + el comparador.
 *
 * Usa tokens --cr-* del child theme con fallbacks para que el widget
 * funcione standalone si se instala el plugin sin el child theme.
 *
 * El efecto antes/después se logra con clip-path sobre la capa BEFORE:
 * ambas imágenes ocupan el 100% del stage (nunca se reescalan) y solo se
 * recorta la de "antes" según --ba-pos (0–100%), que el JS actualiza al
 * arrastrar / hacer click / usar el teclado.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Wrapper + vars     → .zenth-before-after (vars locales --ba-*)
 *   §2  Tabs (pills)       → .zenth-before-after__tab
 *   §3  Panels             → .zenth-before-after__panel(s)
 *   §4  Comparador         → __compare + __img + __clip + fundido inferior a negro
 *   §5  Divisor + handle   → __divider + __handle
 *   §6  Badges             → __badge (--before / --after)
 *   §7  Watermark          → __watermark (logo CR)
 *   §8  Línea de cliente   → __client
 *   §9  Snap animado       → .is-animating (transición click/teclado)
 *   §10 Responsive         → @media de tamaño + reduced-motion
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS (desktop es la base, sin media query)
 *   Tablet        → max-width: 768px    (ratio mobile del stage)
 *   Mobile-small  → max-width: 600px    (handle/tabs/badges/watermark)
 *
 *   + 1 media de accesibilidad (prefers-reduced-motion) en subsección propia
 *   al final de §10. Los @media de tamaño van de más ancho a más angosto
 *   (768 → 600).
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · WRAPPER + VARIABLES LOCALES
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-before-after {
	--ba-ratio-m: 4 / 3;
	--ba-divider-w: 2px;
	--ba-handle: 46px;
	--ba-radius: 10px;

	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 40px);
	width: 100%;
	color: var(--cr-color-white, #fff);
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif);
}

/* Evitar que el flex de Elementor colapse el ancho del widget. */
.elementor-widget-zenth_before_after { 
    width: 100% !important; 
    margin-top: 3rem;
}
.elementor-widget-zenth_before_after .elementor-widget-container { width: 100%; }


/* ═══════════════════════════════════════════════════════════════════════
   §2 · TABS (pills)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-before-after__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(8px, 1vw, 14px);
	width: 100%;
}

.zenth-before-after__tab {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px 26px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 100px;
	background: transparent;
	color: var(--cr-color-white, #fff);
	font-family: inherit;
	font-size: clamp(12px, 0.95vw, 14px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background var(--cr-transition-base, 250ms ease),
				border-color var(--cr-transition-base, 250ms ease),
				color var(--cr-transition-base, 250ms ease);
}

.zenth-before-after__tab:focus, .zenth-before-after__tab:hover {
    border-color: var(--cr-color-primary, #c00000);
    background-color: #000000;
}


.zenth-before-after__tab:hover {
	
}

.zenth-before-after__tab.is-active {
	background: var(--cr-color-primary, #c00000);
	border-color: var(--cr-color-primary, #c00000);
	color: var(--cr-color-white, #fff);
}

.zenth-before-after__tab:focus { outline: none; }
/* :focus re-asserta el fondo (prefijo `button` → 0,2,1) para tapar el "rosado"
   que el tema padre mete en [type=button]:focus (0,2,0). El tab activo mantiene
   el rojo; el inactivo, transparente. */
button.zenth-before-after__tab:focus { background: transparent; }
button.zenth-before-after__tab.is-active:focus { background: var(--cr-color-primary, #c00000); }
.zenth-before-after__tab:focus-visible {
	outline: 2px solid var(--cr-color-primary, #c00000);
	outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · PANELS
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-before-after__panels {
    position: relative;
    width: 80%;
    max-width: 70rem;
    margin: auto;
}

/* Degradado radial rojo por detrás de los paneles (glow de marca). Va detrás
   del contenido (z-index 0) y se extiende más allá de la caja para que el
   resplandor "sangre" alrededor del comparador. Ajustá opacidad/tamaño acá. */
.zenth-before-after__panels::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 132%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(192, 0, 0, 0.28) 0%, rgba(192, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.zenth-before-after__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.6vw, 22px);
	width: 100%;
}
.zenth-before-after__panel[hidden] { display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   §4 · COMPARADOR — stage + imágenes + clip
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-before-after__compare {
	position: relative;
	isolation: isolate;
	width: 100%;
	aspect-ratio: var(--ba-ratio, 16 / 10);
	overflow: hidden;
	border-radius: var(--ba-radius, 10px);
	background: var(--cr-color-darker, #0f0f0f);
	cursor: ew-resize;
	-webkit-user-select: none;
	user-select: none;
	touch-action: pan-y;
}

.zenth-before-after__compare:focus { outline: none; }
.zenth-before-after__compare:focus-visible {
	outline: 2px solid var(--cr-color-primary, #c00000);
	outline-offset: 3px;
}

.zenth-before-after__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* Capa BEFORE: visible de 0 a --ba-pos, recortada por la derecha. */
.zenth-before-after__clip {
	position: absolute;
	inset: 0;
	z-index: 2;
	clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}

/* Fundido inferior: la base de la imagen se desvanece a negro (--cr-color-black,
   igual que el fondo de la sección) para integrarse sin borde duro — mismo patrón
   que el preview del configurador. Como es el ::after del __compare, se pinta tras
   las imágenes (queda sobre la base y la capa BEFORE z-2) pero DEBAJO del divisor/
   handle (z-3) y de los badges/watermark (z-4), que siguen visibles. El
   overflow:hidden + border-radius del __compare lo recortan. Subí/bajá el 45% para
   cambiar cuánto trepa el fundido. */
.zenth-before-after__compare::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to top, var(--cr-color-black, #000) 0%, transparent 45%);
	pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · DIVISOR + HANDLE
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-before-after__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ba-pos, 50%);
	width: var(--ba-divider-w, 2px);
	transform: translateX(-50%);
	background: var(--cr-color-white, #fff);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
	pointer-events: none;
	z-index: 3;
}

.zenth-before-after__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: var(--ba-handle, 46px);
	height: var(--ba-handle, 46px);
	border-radius: 50%;
	background: var(--cr-color-primary, #c00000);
	color: var(--cr-color-white, #fff);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

.zenth-before-after__handle svg { display: block; }


/* ═══════════════════════════════════════════════════════════════════════
   §6 · BADGES ANTES / DESPUÉS
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-before-after__badge {
	position: absolute;
	top: 16px;
	z-index: 4;
	padding: 5px 12px;
	border-radius: 100px;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--cr-color-white, #fff);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	pointer-events: none;
}
.zenth-before-after__badge--before { left: 16px; }
.zenth-before-after__badge--after  { right: 16px; }


/* ═══════════════════════════════════════════════════════════════════════
   §7 · WATERMARK (logo CR)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-before-after__watermark {
	position: absolute;
	left: 23px;
	bottom: 29px;
	z-index: 4;
	display: block;
	width: clamp(56px, 12vw, 12rem);
	pointer-events: none;
	opacity: 0.92;
}
.zenth-before-after__watermark img {
	display: block;
	width: 100%;
	height: auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · LÍNEA DE CLIENTE
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-before-after__client {
	margin: 0;
	text-align: center;
	color: var(--cr-color-text-muted, #81817f);
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · SNAP ANIMADO (solo en click / teclado, no en drag)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-before-after__compare.is-animating .zenth-before-after__clip,
.zenth-before-after__compare.is-animating .zenth-before-after__divider {
	transition: clip-path 220ms cubic-bezier(0.4, 0, 0.2, 1),
				left 220ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ═══════════════════════════════════════════════════════════════════════
   §10 · RESPONSIVE — todos los @media, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  Tablet (≤768) → Mobile-small (≤600). Al final, accesibilidad
   (prefers-reduced-motion), que NO es un breakpoint de tamaño y no se
   consolida con los de arriba.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET · max-width: 768px ──────────────────── */
@media (max-width: 768px) {
	/* §4 · Comparador: ratio mobile del stage */
	.zenth-before-after__compare { aspect-ratio: var(--ba-ratio-m, 4 / 3); }
	
	.zenth-before-after__panels {
	    width: 92%;
	}
}

/* ─────────────────────── MOBILE-SMALL · max-width: 600px ──────────────── */
@media (max-width: 600px) {
	/* §1 · Handle más chico */
	.zenth-before-after { --ba-handle: 40px; }
	/* §2 · Tabs con padding reducido */
	.zenth-before-after__tab { padding: 9px 18px; }
	/* §6 · Badges más compactos y pegados a la esquina */
	.zenth-before-after__badge {
		top: 12px;
		padding: 4px 10px;
		font-size: 10px;
	}
	.zenth-before-after__badge--before { left: 12px; }
	.zenth-before-after__badge--after  { right: 12px; }
	/* §7 · Watermark acercado a la esquina */
	.zenth-before-after__watermark {
		left: 12px;
		bottom: 12px;
	}
}


/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
	.zenth-before-after__tab,
	.zenth-before-after__compare.is-animating .zenth-before-after__clip,
	.zenth-before-after__compare.is-animating .zenth-before-after__divider {
		transition: none;
	}
}