/**
 * Zenth Team — Widget Elementor.
 *
 * Slider/carousel de integrantes del equipo con navegación circular. El
 * widget genera el markup; este CSS controla solo lo visual. Usa tokens
 * --cr-* del child theme con fallbacks para funcionar standalone.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Wrapper          → .zenth-team (+ focus) + __inner
 *   §2  Nav arrows       → __nav / __nav-prev (rojo) / __nav-next (outline)
 *   §3  Stage + slides   → __stage / __slide (cross-fade, apilado absolute)
 *   §4  Columna izq      → __left (glow) + __media (+ scrim) + __badge
 *   §5  Columna der      → __eyebrow / __name / __role / __quote / __attribution
 *   §6  Divisor          → __divider (solo mobile; en desktop es el border-left)
 *   §7  Responsive       → TODOS los @media de tamaño consolidados acá
 *   §8  Accesibilidad    → prefers-reduced-motion
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS (desktop es la base, sin media query)
 *   Tablet        → max-width: 1024px   (layout pasa a columna; reordena items)
 *   Mobile-small  → max-width: 600px     (solo achica el nombre display)
 *
 *   Los @media de tamaño viven en §7, de más ancho a más angosto. La media
 *   de accesibilidad (prefers-reduced-motion) va aparte en §8 y NO se
 *   consolida con las de tamaño.
 * ─────────────────────────────────────────────────────────────────────────
 * Layout (desktop):
 *   ┌──────────────────────────────────────────────────────────────┐
 *   │                                            [⮘ rojo] [⮚ out]  │ ← nav
 *   │  ┌─────────────────┐    EYEBROW ROJO                          │
 *   │  │                 │    NOMBRE (display italic)               │
 *   │  │   RETRATO 3:4   │    roles · roles · roles                 │
 *   │  │                 │    ▏ cita destacada con *highlight*      │
 *   │  │  [badge pill]   │    ATRIBUCIÓN                            │
 *   │  └─────────────────┘                                          │
 *   └──────────────────────────────────────────────────────────────┘
 *
 * Las slides se apilan en el stage (absolute) y hacen cross-fade; solo
 * el .is-active es visible y determina la altura. Navegación circular
 * controlada por assets/js/team.js (sin topes: del último vuelve al
 * primero).
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · WRAPPER
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-team {
	/* Padding interno derecho de la columna de texto. Se reutiliza para
	   alinear las flechas de nav con el borde derecho del texto (no con el
	   borde del contenedor). Single source of truth: cambiar acá ajusta
	   ambos. */
	--zt-text-pad-right: clamp(60px, 6vw, 130px);
	width: 100%;
	padding: clamp(64px, 8vw, 120px) 0;
	background: var(--cr-color-black, #000);
	color: var(--cr-color-white, #fff);
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif);
}

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


.zenth-team__inner {
	position: relative;
	max-width: var(--cr-container-max, 1440px);
	margin: 0 auto;
	padding: 0 var(--cr-container-pad, 32px);
	width: 100%;
	box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · NAV ARROWS (top-right, sobre la columna de texto)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-team__nav {
	position: absolute;
	top: clamp(16px, 2vw, 28px);
	/* Alineado con el borde derecho del TEXTO: padding del contenedor +
	   padding interno de la columna de texto (no solo el del contenedor). */
	right: calc(var(--cr-container-pad, 32px) + var(--zt-text-pad-right, 130px));
	z-index: 3;
	display: flex;
	flex-direction: row;
	gap: clamp(10px, 1.2vw, 14px);
	margin: 0;
	padding: 0;
}

.zenth-team__nav-prev,
.zenth-team__nav-next {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: clamp(40px, 3.5vw, 50px) !important;
	height: clamp(40px, 3.5vw, 50px) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50% !important;
	margin: 0;
	padding: 0 !important;
	cursor: pointer;
	transition: all var(--cr-transition-base, 250ms ease);
	color: var(--cr-color-white, #fff);
}

/* PREV (rojo filled) */
.zenth-team__nav-prev {
	background: var(--cr-color-primary, #c00000) !important;
	border: 1px solid var(--cr-color-primary, #c00000) !important;
}

.zenth-team__nav-prev:hover,
button.zenth-team__nav-prev:focus {
	background: var(--cr-color-primary-hover, #e60000) !important;
	transform: translateX(-2px);
}

/* NEXT (outline) */
.zenth-team__nav-next {
	background: transparent !important;
	border: 2px solid rgba(255, 255, 255, 0.6) !important;
}

.zenth-team__nav-next:hover,
button.zenth-team__nav-next:focus {
	border-color: var(--cr-color-white, #fff) !important;
	background: rgba(255, 255, 255, 0.06) !important;
	transform: translateX(2px);
}

.zenth-team__nav-prev svg,
.zenth-team__nav-next svg {
	display: block;
	width: clamp(14px, 1.1vw, 18px);
	height: clamp(14px, 1.1vw, 18px);
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · STAGE + SLIDES
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-team__stage {
	position: relative;
	width: 100%;
}

.zenth-team__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(40px, 2vw, 96px);
	align-items: stretch;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
	pointer-events: none;
}

.zenth-team__slide.is-active {
	position: relative; /* el activo determina la altura del stage */
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s ease;
	pointer-events: auto;
}

/* Cuando hay un solo integrante no hay carrusel: el slide se muestra
   estático sin apilamiento. */
.zenth-team--single .zenth-team__slide {
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · COLUMNA IZQUIERDA — retrato + badge
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-team__left {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	min-width: 0;
}

/* Glow radial rojo: capa de fondo de la tarjeta, DETRÁS del retrato.
   Se extiende más allá de la columna (inset negativo) para que el
   resplandor rodee la imagen. Orden de capas resultante:
     __left::before (glow, z-index 0)
       → __media / img (z-index 1)
         → __media::after (scrim lineal)
           → __badge (z-index 2)
   El __media NO recorta el glow porque el glow vive en __left (sin
   overflow), no dentro del media. */
.zenth-team__left::before {
	content: '';
	position: absolute;
	inset: -30% -36%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse 56% 52% at 50% 46%,
		rgba(205, 14, 14, 0.55) 0%,
		rgba(155, 0, 0, 0.32) 38%,
		rgba(100, 0, 0, 0.15) 58%,
		transparent 78%
	);
}

.zenth-team__media {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 28rem;
	aspect-ratio: 3 / 4;
	max-height: clamp(480px, 70vh, 720px);
	overflow: hidden;
	margin: 0 auto;
	background: var(--cr-color-darker, #0f0f0f);
}

.zenth-team__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	max-width: none;
	display: block;
}

/* Scrim: degradado transparente (arriba) → negro (abajo) sobre la foto.
   Oscurece la base para legibilidad del badge y da el look "card" de la
   referencia. Varios stops para una transición natural, sin corte abrupto.
   z-index 1: queda encima del <img> pero debajo del badge (z-index 2). */
.zenth-team__media::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.95) 0%,
		rgba(0, 0, 0, 0.86) 9%,
		rgba(0, 0, 0, 0.68) 19%,
		rgba(0, 0, 0, 0.45) 31%,
		rgba(0, 0, 0, 0.22) 44%,
		rgba(0, 0, 0, 0.07) 57%,
		transparent 70%
	);
}

/* Badge pill (CAPITÁN TEAM C) — overlay sobre el bottom de la foto */
.zenth-team__badge {
	position: absolute;
	bottom: clamp(20px, 3vw, 40px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding: clamp(10px, 1.2vw, 14px) clamp(24px, 3vw, 40px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: rgba(15, 15, 15, 0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--cr-color-white, #fff);
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif);
	font-size: clamp(11px, 0.85vw, 13px);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · COLUMNA DERECHA — eyebrow + nombre + roles + cita + atribución
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-team__right {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(12px, 1.5vw, 20px);
	min-width: 0;
	padding: clamp(20px, 2vw, 32px) var(--zt-text-pad-right, 130px) 0 0;
}

.zenth-team__eyebrow {
	color: var(--cr-color-primary, #c00000);
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}

.zenth-team__name {
	color: var(--cr-color-white, #fff);
	font-family: var(--cr-font-display, 'Super Brigade', Impact, sans-serif);
	font-style: italic;
	font-size: clamp(56px, 6vw, 96px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0;
}

.zenth-team__role {
	color: var(--cr-color-text-muted, #81817f);
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif);
	font-size: clamp(13px, 1vw, 16px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0;
}

.zenth-team__quote {
	margin: clamp(28px, 3.5vw, 56px) 0 0;
	padding-left: clamp(20px, 2.2vw, 32px);
	border-left: 3px solid var(--cr-color-primary, #c00000);
	color: var(--cr-color-white, #fff);
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif);
	font-size: clamp(15px, 1.3vw, 20px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.005em;
}

.zenth-team__quote-highlight {
	color: var(--cr-color-primary, #c00000);
	font-weight: inherit;
}

.zenth-team__attribution {
	color: var(--cr-color-text-muted, #81817f);
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif);
	font-size: clamp(10px, 0.78vw, 12px);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.3;
	margin: clamp(12px, 1.5vw, 20px) 0 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · DIVISOR rojo (solo mobile)
   ───────────────────────────────────────────────────────────────────────
   En desktop el acento rojo lo aporta el border-left de la cita; el divisor
   queda oculto. Se muestra/centra en el layout mobile (ver §7).
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-team__divider {
	display: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · RESPONSIVE — todos los @media de tamaño, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  Tablet (≤1024) → Mobile-small (≤600)
   El cascade max-width va de mayor a menor.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET · max-width: 1024px ─────────────────── */
@media (max-width: 1024px) {
	/* Disolvemos SOLO la columna de texto (display:contents) para intercalar
	   el retrato ENTRE los bloques de texto y reordenar según el mockup:
	   eyebrow → nombre → roles → retrato → divisor → cita → atribución.
	   __left se mantiene como caja (NO contents) para conservar su glow
	   radial (::before); entra como un item más con order 4. */
	.zenth-team__right {
		display: contents;
	}

	.zenth-team__slide {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: clamp(12px, 2vw, 18px);
	}

	.zenth-team__eyebrow     { order: 1; }
	.zenth-team__name        { order: 2; }
	.zenth-team__role        { order: 3; }
	.zenth-team__left        { order: 4; width: 100%; max-width: 480px; margin: clamp(20px, 5vw, 32px) auto 0; }
	.zenth-team__divider     { order: 5; }
	.zenth-team__quote       { order: 6; }
	.zenth-team__attribution { order: 7; }

	/* La cita y la atribución se centran; el acento rojo pasa a ser el
	   divisor (no el border-left, que se quita en este layout). */
	.zenth-team__quote {
		text-align: center;
		border-left: 0;
		padding-left: 0;
		margin: clamp(6px, 2vw, 12px) 0 0;
	}

	.zenth-team__attribution {
		text-align: center;
	}

	/* Divisor rojo centrado entre el retrato y la cita. */
	.zenth-team__divider {
		display: block;
		width: clamp(64px, 18vw, 96px);
		height: 3px;
		margin: clamp(14px, 4vw, 22px) auto 0;
		background: var(--cr-color-primary, #c00000);
		border-radius: 999px;
	}

	/* Arrows arriba a la derecha, a la altura del nombre. En mobile la
	   columna de texto pierde su padding-right (display:contents), así que
	   reseteamos el right del nav al padding del contenedor. */
	.zenth-team__nav {
		top: clamp(6px, 2vw, 18px);
		right: var(--cr-container-pad, 32px);
	}
}

/* ─────────────────────── MOBILE-SMALL · max-width: 600px ──────────────── */
@media (max-width: 600px) {
	.zenth-team__name {
		font-size: clamp(48px, 14vw, 72px);
	}
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · ACCESIBILIDAD — prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.zenth-team__slide,
	.zenth-team__nav-prev,
	.zenth-team__nav-next {
		transition: none !important;
	}
}