/* ==========================================================
   TEAM — Amén McCann
   Retratos en blanco y negro que al pasar el mouse se expanden
   hacia los costados, recuperan el color y revelan el contenido.
   ========================================================== */

.amcn-team {
	--amcn-team-accent: #e8492c;

	/* Alto FIJO de la fila. Es lo que hace que al expandirse solo cambie
	   el ancho y el bloque no empuje nada hacia abajo. Además es la
	   MEDIDA MADRE: el ancho de la tarjeta y el ensanche salen de acá,
	   así la proporción vertical se mantiene sola en cualquier pantalla. */
	--amcn-team-height: clamp(420px, 48vw, 700px);

	/* Proporción ancho/alto de la tarjeta en reposo. 0.48 = las tarjetas
	   verticales del boceto (335 x 702). Bajalo para hacerlas más
	   angostas todavía, subilo para achatarlas. */
	--amcn-team-ratio: .48;

	--amcn-team-gap: clamp(20px, 3.4vw, 50px);

	/* CUÁNTO ENSANCHA la tarjeta activa. Es un ANCHO, no una proporción:
	   se le suma al ancho de la celda. Las hermanas NO se achican — se
	   corren hacia afuera la mitad de este valor cada una.
	   0.21 del alto = los +149 px del boceto sobre tarjetas de 702. */
	--amcn-team-expand: calc(var(--amcn-team-height) * .21);

	--amcn-team-speed: .55s;
	--amcn-team-ease: cubic-bezier(.22, .61, .36, 1);

	width: 100%;
	max-width: var(--amcn-container-width, 1370px);
	margin: 0 auto;
	padding: 0 var(--amcn-container-gutter, 0px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--amcn-team-gap);
	color: #fff;
}

/* CÓMO SE EXPANDE (importa el mecanismo, no solo el resultado)
 *
 * La tarjeta activa crece hacia LOS DOS LADOS desde su propio centro, y
 * las hermanas NO se achican: conservan su ancho y se corren hacia afuera
 * la mitad del ensanche cada una.
 *
 * Eso sale solo con "justify-content: center" y anchos fijos: al crecer
 * una celda, la fila entera se ensancha, y al estar centrada ese
 * excedente se reparte mitad y mitad. La celda activa termina creciendo
 * simétrica y las de la izquierda/derecha se apartan.
 *
 * Consecuencia clave: como la tarjeta crece desde su centro, una foto
 * centrada queda QUIETA en pantalla. Es lo que pide el diseño.
 *
 * Lo que NO hay que hacer (era el error anterior): repartir el ancho con
 * flex-grow entre hermanas. Eso las achica, mueve todos los centros y da
 * una animación completamente distinta.
 *
 * Las tarjetas no llenan el contenedor: miden lo que dicta su proporción
 * (ver --amcn-team-cell) y el sobrante queda repartido a los costados por
 * el centrado. Ese margen es el que absorbe el ensanche.
 */
.amcn-team__row {
	display: flex;
	justify-content: center;
	gap: var(--amcn-team-gap);
	height: var(--amcn-team-height);

	/* El ancho de la celda sale del ALTO por la proporción, no de repartir
	   el ancho del contenedor. Es lo que mantiene las tarjetas verticales
	   como el boceto en vez de estirarse a lo ancho que haya.

	   Las dos son LONGITUDES PURAS, sin porcentajes, y tiene que seguir
	   siendo así: --amcn-team-stage se usa dentro de la tarjeta, y un
	   porcentaje ahí se resolvería contra el ancho de la tarjeta — que es
	   justo lo que está cambiando durante la animación. */
	--amcn-team-cell: calc(var(--amcn-team-height) * var(--amcn-team-ratio));

	/* Ancho de la tarjeta expandida. Es también el ancho del "stage": ver
	   .amcn-team__stage. */
	--amcn-team-stage: calc(var(--amcn-team-cell) + var(--amcn-team-expand));
}

/* El ancho de la celda NO CAMBIA NUNCA — ni siquiera en el hover. Lo que
   se mueve son las hermanas, y con transform, que no toca el layout.
   Ver el bloque de hover para el porqué.

   LAS DOS TRANSICIONES VAN JUNTAS ACÁ, en una sola declaración. Si se
   parten en dos reglas del mismo peso (una acá y otra en
   .amcn-team__card), la segunda PISA a la primera —"transition" es una
   sola propiedad, no se acumula— y una de las dos se pierde: las
   hermanas saltan de golpe mientras la activa se abre suave, y se ve
   como un corte. */
.amcn-team__row > * {
	flex: 0 0 auto;
	width: var(--amcn-team-cell);
	transition:
		transform var(--amcn-team-speed) var(--amcn-team-ease),
		clip-path var(--amcn-team-speed) var(--amcn-team-ease);
}

/* Celda vacía de la última fila incompleta. No se ve: existe solo para
   ocupar su columna. Como la fila está centrada, sin los rellenos una
   sola tarjeta quedaría en el medio en vez de en su columna. */
.amcn-team__filler {
	pointer-events: none;
}

/* ---------- Tarjeta ---------- */
/* El recorte se hace con clip-path, NO con overflow: hidden, porque
   clip-path admite valores negativos y puede abrirse MÁS ALLÁ de la caja
   para descubrir el stage que asoma a los costados. Con overflow no se
   podría revelar nada sin agrandar la caja (= layout = temblor). */
.amcn-team__card {
	position: relative;
	overflow: visible;
	background: #000;
	outline: none;

	/* Cuánto asoma el stage a cada lado de la celda */
	--amcn-team-reveal: calc((var(--amcn-team-stage) - var(--amcn-team-cell)) / 2);

	/* En reposo, el recorte es exactamente la caja de la celda.
	   La transición NO va acá: está en .amcn-team__row > * junto con la
	   del transform, porque si se declara en los dos lados una pisa a la
	   otra (ver el comentario de esa regla). */
	clip-path: inset(0 0 0 0);
}

/* ---------- Stage: EL TRUCO CENTRAL ----------
 *
 * Foto, velo y texto NO cuelgan de la tarjeta: cuelgan de este stage, que
 * tiene el ancho FIJO de la tarjeta expandida y asoma a los costados de la
 * celda. La tarjeta solo lo recorta, con clip-path.
 *
 * Por qué importa: durante la animación lo único que cambia es cuánto
 * stage se ve. Nada adentro se re-maqueta. Si el texto colgara de la
 * tarjeta, en cada frame el navegador tendría que recalcular dónde cortar
 * las líneas de la bio, y el bloque además se correría junto con el borde
 * izquierdo — que es exactamente la "vibración" y el texto que entraba a
 * los tirones.
 *
 * Como la tarjeta crece desde su centro y el stage está centrado en ella,
 * el borde izquierdo del stage queda QUIETO en pantalla: el texto aparece
 * ya en su posición final y solo se funde.
 *
 * Por eso --amcn-team-stage tiene que ser una longitud pura: un
 * porcentaje acá se resolvería contra el ancho de la tarjeta, que es el
 * que está cambiando.
 */
.amcn-team__stage {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: var(--amcn-team-stage);
	height: 100%;
	overflow: hidden;
}

.amcn-team__photo {
	display: block;
	filter: grayscale(1) contrast(1.05);
	transition: filter var(--amcn-team-speed) var(--amcn-team-ease);
}

/* EL TAMAÑO DE LA FOTO VA EN UNA REGLA APARTE, Y CON ESTA ESPECIFICIDAD
 * A PROPÓSITO. NO SIMPLIFICAR EL SELECTOR.
 *
 * El tema (outgrid/UiCore) dimensiona las <img> con una regla más
 * específica que ".amcn-team__photo", así que le ganaba: la foto quedaba
 * en width:100% + height:auto sobre la TARJETA y escalaba con ella — el
 * "zoom" que no tiene que haber al expandir.
 *
 * Acá el cover es seguro justamente porque el stage no cambia de tamaño:
 * el recorte se calcula una sola vez.
 *
 * Va sin !important porque alcanza con la especificidad. Si algún día el
 * tema sube la suya y esto se rompe, se nota enseguida: la persona se
 * agranda al pasar el mouse. */
.amcn-team .amcn-team__stage > .amcn-team__photo {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top; /* los retratos tienen la cara arriba */
}

/* Respaldo cuando el integrante no tiene imagen destacada */
.amcn-team__photo--empty {
	background: #141414;
}

/* Oscurecido de abajo para que el texto se lea. Aparece con el hover:
   en reposo la foto va limpia, sin velo. */
.amcn-team__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .92) 0%,
		rgba(0, 0, 0, .75) 28%,
		rgba(0, 0, 0, .25) 58%,
		rgba(0, 0, 0, 0) 82%
	);
	transition: opacity var(--amcn-team-speed) var(--amcn-team-ease);
}

/* ---------- Contenido ---------- */
/* Cuelga del stage, no de la tarjeta: su ancho es fijo, así que el texto
   se maqueta UNA sola vez y entra entero, sin re-partir líneas ni correrse
   mientras la tarjeta se ensancha.
   La transición dura lo mismo que el ancho para que se lea como un solo
   movimiento y no como dos cosas desfasadas. */
.amcn-team__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 0 clamp(24px, 3.4vw, 50px) clamp(26px, 3.4vw, 50px);
	box-sizing: border-box;

	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity var(--amcn-team-speed) var(--amcn-team-ease),
		transform var(--amcn-team-speed) var(--amcn-team-ease);
}

/* El color va explícito y no heredado: los temas (UiCore incluido) le
   ponen un color propio a los h1-h6, y esa regla le gana a la herencia
   del contenedor — el nombre quedaba casi negro sobre la foto. */
.amcn-team__nombre {
	margin: 0 0 6px;
	color: #fff;
	font-size: clamp(22px, 2.1vw, 34px);
	line-height: 1.02;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
}

/* La barra la pone el CSS: en ACF se carga "Socio fundador y CEO" y acá
   se muestra "/SOCIO FUNDADOR Y CEO". */
.amcn-team__cargo {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .92;
}

.amcn-team__cargo::before {
	content: "/";
	margin-right: 2px;
}

.amcn-team__bio {
	font-size: clamp(13px, .95vw, 15px);
	line-height: 1.55;
	opacity: .88;

	/* Sin max-width a propósito: el ancho lo gobierna el stage, que es
	   fijo. Un tope acá no aportaría nada y podría pelearse con él. */
}

.amcn-team__bio p {
	margin: 0 0 .7em;
}

.amcn-team__bio p:last-child {
	margin-bottom: 0;
}

/* ---------- Redes ---------- */
.amcn-team__redes {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.amcn-team__red {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: #fff;
	opacity: .75;
	text-decoration: none;
	transition: opacity .25s ease, color .25s ease, transform .25s ease;
}

.amcn-team__red:hover,
.amcn-team__red:focus-visible {
	opacity: 1;
	color: var(--amcn-team-accent);
	transform: translateY(-2px);
}

/* ==========================================================
   Estado expandido
   ==========================================================
   Solo en dispositivos con hover real y pantalla grande. En touch no
   existe el "pasar por encima": ahí la tarjeta se muestra siempre
   abierta (ver el bloque responsive más abajo), así no queda contenido
   inaccesible detrás de una interacción que no se puede hacer.

   Se usa :focus-within además de :hover para que quien navegue con
   teclado (la tarjeta es focusable) vea exactamente lo mismo.
   ========================================================== */
@media (hover: hover) and (min-width: 1025px) {

	/* LA ANIMACIÓN NO TOCA EL LAYOUT. NO VOLVER A ANIMAR "width".
	 *
	 * Animar el ancho obligaba al navegador a re-calcular la posición de
	 * todo en cada frame. La foto quedaba oscilando ±0.016px (1/64, la
	 * unidad de layout) y las hermanas se desplazaban por layout, así que
	 * los retratos se re-rasterizaban frame a frame: en el pelo, la barba
	 * y los anteojos eso se ve como una vibración molesta.
	 *
	 * Ahora las cajas no se mueven nunca:
	 *   · la tarjeta activa se ABRE con clip-path (valores negativos, que
	 *     descubren el stage que ya asomaba a los costados);
	 *   · las hermanas se corren con transform.
	 * Las dos son propiedades de composición, no de layout.
	 *
	 * Medido en el sitio: 143 frames de transición con la foto y el texto
	 * en la MISMA posición exacta (rango 0). Antes oscilaban.
	 */
	.amcn-team__card:hover,
	.amcn-team__card:focus-within {
		clip-path: inset(
			0 calc(-1 * var(--amcn-team-reveal))
			0 calc(-1 * var(--amcn-team-reveal))
		);
		z-index: 3;   /* lo que asoma tiene que quedar por encima de las hermanas */
	}

	/* Hermanas POSTERIORES: se corren a la derecha */
	.amcn-team__card:hover ~ *,
	.amcn-team__card:focus-within ~ * {
		transform: translateX(var(--amcn-team-reveal));
	}

	/* Hermanas ANTERIORES: se corren a la izquierda. CSS no tiene un
	   combinador "hermano anterior", de ahí el :has(). Si algún navegador
	   viejo no lo soporta, no se rompe nada: esas tarjetas no se apartan y
	   la activa les pasa por encima (de ahí el z-index de arriba). */
	.amcn-team__row > *:has(~ .amcn-team__card:hover),
	.amcn-team__row > *:has(~ .amcn-team__card:focus-within) {
		transform: translateX(calc(-1 * var(--amcn-team-reveal)));
	}

	/* Solo cambia el filtro: nada de transform acá, que es el que mantiene
	   centrada la foto. Tocarlo la haría saltar. */
	.amcn-team__card:hover .amcn-team__photo,
	.amcn-team__card:focus-within .amcn-team__photo {
		filter: grayscale(0) contrast(1);
	}

	.amcn-team__card:hover .amcn-team__overlay,
	.amcn-team__card:focus-within .amcn-team__overlay {
		opacity: 1;
	}

	.amcn-team__card:hover .amcn-team__content,
	.amcn-team__card:focus-within .amcn-team__content {
		opacity: 1;
		transform: translateY(0);
	}

	/* Las hermanas NO se atenúan: en el boceto quedan exactamente igual
	   que en reposo, solo corridas. */

	/* Marco visible al llegar con el teclado (el hover no lo necesita) */
	.amcn-team__card:focus-visible {
		outline: 2px solid var(--amcn-team-accent);
		outline-offset: -2px;
	}
}

/* ==========================================================
   Responsive
   ==========================================================
   Las filas se arman en PHP (array_chunk) porque la expansión reparte
   ancho entre hermanos y necesita un contenedor flex por fila. Acá esas
   filas se disuelven con display:contents y las tarjetas pasan a ser
   hijas directas de la grilla: el agrupado del PHP deja de condicionar
   cuántas entran por fila.
   ========================================================== */
@media (max-width: 1024px), (hover: none) {

	.amcn-team {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--amcn-team-gap);
	}

	.amcn-team__row {
		display: contents;
	}

	/* Acá la grilla decide cuántas entran por fila, así que los rellenos
	   no solo sobran: dejarían huecos vacíos en el medio. */
	.amcn-team__filler {
		display: none;
	}

	/* Acá el ancho lo pone la grilla, no la celda calculada de la fila */
	.amcn-team__card {
		width: auto;
		height: var(--amcn-team-height);
	}

	/* Sin animación de por medio, el stage no tiene por qué tener ancho
	   fijo: que llene la tarjeta y listo (si no, quedarían franjas negras
	   a los costados cuando la grilla la hace más ancha que el stage). */
	.amcn-team__stage {
		width: 100%;
	}

	/* Sin hover posible: la tarjeta va siempre abierta */
	.amcn-team__photo {
		filter: grayscale(0);
	}

	.amcn-team__overlay,
	.amcn-team__content {
		opacity: 1;
	}

	.amcn-team__content {
		transform: none;
	}

	.amcn-team__bio {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.amcn-team {
		grid-template-columns: 1fr;
	}

	.amcn-team__card {
		height: clamp(420px, 115vw, 620px);
	}
}

/* ==========================================================
   Accesibilidad: quien pidió menos movimiento ve los mismos
   estados, pero sin la animación de ancho ni el desplazamiento.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
	.amcn-team__row > *,
	.amcn-team__card,
	.amcn-team__photo,
	.amcn-team__overlay,
	.amcn-team__content,
	.amcn-team__red {
		transition: none;
	}

	.amcn-team__content {
		transform: none;
	}
}