/**
 * Zenth Toolkit — zenth-area-carousel: mecánica del carrusel de áreas.
 *
 * Solo layout/estructura (fila flex, desplazamiento por transform, estados
 * de flechas, reset de botones). Sin colores de marca ni tipografías ni
 * medidas de página (paddings/gaps/radios del mockup): esos viven en el
 * bloque gestionado del tema (seeds/style-header.css, "SE PARTE
 * VOLUNTARIADO" / "INICIO"), anidados bajo la clase de la sección.
 *
 * Geometría del desplazamiento: la variable --zenth-acar-n (total de
 * slides, impresa inline por PHP en .zenth-acar__track) fija el ancho del
 * track en N × 100% de la caja .zenth-acar y el de cada slide en 1/N de
 * ese track — es decir, cada slide vuelve a medir el 100% de .zenth-acar.
 * Con eso, un transform: translateX(-(100/N)·index %) sobre el track
 * (porcentaje relativo al ANCHO PROPIO del track, que es N veces el de la
 * caja) desplaza exactamente "index" cajas completas, sin necesitar recalcular
 * nada en JS al redimensionar la ventana.
 *
 * Modo con pestañas (specs/inicio/SPEC.md §3): --zenth-acar-n sigue siendo
 * el total GLOBAL de slides (todas las pestañas juntas), no el tamaño del
 * grupo activo. Cuando un slide de una pestaña no activa recibe el atributo
 * real "hidden", sale por completo del flujo flex (regla [hidden] de más
 * abajo); los que quedan visibles (los del grupo activo) se recolocan solos
 * al inicio del track, así que la MISMA fórmula de translateX() de siempre
 * sigue funcionando sin que zenth-acarousel.js tenga que tocar
 * --zenth-acar-n al cambiar de pestaña — solo tiene que usar el índice del
 * slide DENTRO del grupo visible, no su índice global en el repeater.
 */

.zenth-acar {
	position: relative;
	overflow: hidden;
	/* Colchón vertical para que el anillo de foco de las pestañas (primer
	   hijo) y de las flechas prev/next (último hijo) no se recorte contra
	   este overflow:hidden (les faltaban 4px arriba y 5px abajo). padding
	   compensado por margin negativo igual: los hijos NO se mueven (el
	   padding los empuja hacia dentro exactamente lo que el margin negativo
	   los sube/baja), así que ni el tablist ni la tarjeta ni el nav ni el
	   elemento siguiente del flujo cambian de posición; solo crece 6px por
	   lado el área de recorte (y el fondo/radio de .zenth-acar, invisible
	   aquí porque es un color sólido uniforme, ver piel). */
	padding: 6px 0;
	margin: -6px 0;
}

.zenth-acar__track {
	display: flex;
	align-items: stretch;
	width: calc( 100% * var( --zenth-acar-n, 1 ) );
	transform: translateX( 0% );
	transition: transform 0.4s ease;
	will-change: transform;
}

.zenth-acar__slide {
	display: flex;
	flex: 0 0 calc( 100% / var( --zenth-acar-n, 1 ) );
	width: calc( 100% / var( --zenth-acar-n, 1 ) );
	min-width: 0;
}

/* Solo el slide activo es interactivo/legible; el resto queda fuera del
   flujo de lectura mientras dura la transición (zenth-acarousel.js además
   pone tabindex="-1" en los controles de los slides ocultos: un elemento
   aria-hidden no debe contener foco). */
.zenth-acar__slide[aria-hidden='true'] {
	pointer-events: none;
}

.zenth-acar__media {
	flex: 0 0 auto;
	min-width: 0;
	overflow: hidden;
}

.zenth-acar__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zenth-acar__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.zenth-acar__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.zenth-acar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.zenth-acar__btn svg {
	flex: 0 0 auto;
}

.zenth-acar__nav {
	display: flex;
	align-items: center;
	justify-content: center;
}

.zenth-acar__prev,
.zenth-acar__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

/* ---- Modo con pestañas (tablist, specs/inicio/SPEC.md §3) ---- */

.zenth-acar__tabs {
	display: flex;
}

/* Selector de dos clases (0,2,0): le gana por especificidad al reset de
   Hello Elementor sobre "button" (0,1,1), sin necesitar "!important" (regla
   de oro del proyecto). */
.zenth-acar .zenth-acar__tab {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	flex: 1 1 0;
	border: 0;
	background: transparent;
	margin: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: center;
}

.zenth-acar .zenth-acar__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Un slide o el bloque de flechas con "hidden" real (no aria-hidden) debe
   salir del flujo flex por completo: lo reafirma con selectores propios del
   widget, sin depender de que nada más en la cascada del tema reponga el
   comportamiento nativo de "[hidden]". */
.zenth-acar__slide[hidden],
.zenth-acar__nav[hidden] {
	display: none;
}

/* Salto directo, sin animación, para quien pide menos movimiento (spec §4/§5). */
@media ( prefers-reduced-motion: reduce ) {
	.zenth-acar__track {
		transition: none;
	}
}