.invitados {
	background-color: var(--color-negro);
	padding: 48px var(--container-padding) 96px;
}

.invitados-editor-preview {
	background-color: var(--color-negro);
	border: 3px solid var(--color-amarillo);
	color: var(--color-amarillo);
	padding: 24px;
	font-family: var(--font-body);
}

.invitados-editor-preview strong {
	display: block;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.invitados-editor-preview p {
	margin: 0;
	color: var(--color-blanco);
}

.invitados__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.invitados__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
}

.invitados__title {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--color-amarillo);
	font-size: clamp(48px, 9vw, 160px);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0;
}

.invitados__nav {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

/*
 * Misma regla de hover que los botones primarios del resto del
 * sitio (relleno deslizante + borde interior para no perderse contra
 * el fondo), pero INVERTIDA: acá el reposo ya es amarillo (la propia
 * forma venía como un cuadrado amarillo con la flecha negra adentro,
 * dibujado dentro del SVG), así que el relleno de hover entra en
 * negro — negro que, al vivir esta sección sobre fondo negro
 * (`.invitados` es `background-color: var(--color-negro)`), necesita
 * el mismo truco de "borde interior" que los primarios usan con
 * amarillo, pero acá en amarillo (`outline` con offset negativo, no
 * cambia el tamaño del botón).
 */
.invitados__arrow {
	all: unset;
	cursor: pointer;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-amarillo);
	color: var(--color-negro);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 2px;
	outline: 2px solid var(--color-amarillo);
	outline-offset: -2px;
	transition: color 0.35s ease;
}

/* Mismo radio de 30px que traía el SVG original — prev redondea
   arriba-izquierda, next redondea abajo-derecha (un solo radio por
   botón, como el resto de las cards/botones del sitio). */
.invitados__arrow--prev {
	border-top-left-radius: 30px;
}

.invitados__arrow--next {
	border-bottom-right-radius: 30px;
}

.invitados__arrow::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--color-negro);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
	z-index: -1;
}

@media (hover: hover) {
	.invitados__arrow:not(:disabled):hover {
		color: var(--color-amarillo);
	}

	.invitados__arrow:not(:disabled):hover::before {
		transform: scaleX(1);
		transform-origin: left;
	}
}

.invitados__arrow:focus-visible {
	color: var(--color-amarillo);
	outline: 3px solid var(--color-amarillo);
	outline-offset: 3px;
}

.invitados__arrow:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
	.invitados__arrow,
	.invitados__arrow::before {
		transition: none;
	}
}

.invitados__arrow-icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: currentColor;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}

.invitados__arrow-icon--prev {
	-webkit-mask-image: url('assets/icon-arrow-prev.svg');
	mask-image: url('assets/icon-arrow-prev.svg');
}

.invitados__arrow-icon--next {
	-webkit-mask-image: url('assets/icon-arrow-next.svg');
	mask-image: url('assets/icon-arrow-next.svg');
}

.invitados__arrow.is-disabled {
	opacity: 0.4;
	cursor: default;
}

.invitados__viewport {
	overflow: hidden;
	cursor: grab;
}

.invitados__viewport:active {
	cursor: grabbing;
}

.invitados__track {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	-webkit-user-select: none;
	user-select: none;
}

.invitados__slide {
	flex: 0 0 min(382px, 80vw);
	min-width: 0;
}

.invitados__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

/*
 * Tarjeta fija al final del carrusel (pedido explícito) — no es un
 * invitade, es un cartel estático que avisa que falta gente por
 * confirmar. Mismo tamaño/radio que el resto de las tarjetas
 * (border-bottom-right-radius:30px, la esquina que usa
 * .invitados__plate), pero sin foto: un solo bloque con borde en vez
 * de fondo sólido, texto centrado. Se agrega siempre después del
 * `foreach` en render.php, así queda al final de lo que se cargue.
 */
.invitados__mas {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: 24px;
	border: 2px solid var(--color-amarillo);
	border-radius: 2px;
	border-bottom-right-radius: 30px;
	background-color: var(--color-negro);
	color: var(--color-amarillo);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
}

.invitados__photo {
	/*
	 * ⚠️ Rediseño (node-id=334-96, versión con nombre a 2 líneas): la
	 * foto ya no tiene una altura rígida — es un ítem flex (flex:1 1
	 * auto) que crece o se achica para compensar el alto real de
	 * `.invitados__plate` (ver abajo, ahora de altura automática según
	 * contenido). `.invitados__slide` (el <li>, flex item de la fila)
	 * se estira por default (align-items:stretch, el comportamiento
	 * normal de un flex-row sin wrap) a la altura de la tarjeta más
	 * alta de TODO el carrusel — no solo las visibles, porque Embla no
	 * saca del flujo a los slides fuera de pantalla, solo los
	 * desplaza. Entonces: si un nombre en cualquier parte del line-up
	 * ocupa 2 líneas, su placa crece, eso sube la altura de toda la
	 * fila, y el resto de las fotos se achican un poco para igualar —
	 * exactamente el comportamiento que muestra el frame de Figma
	 * (Litto/Miguel/Lucas/Lucas con fotos de distinta altura pero la
	 * misma altura total de tarjeta).
	 * El `aspect-ratio` queda como la proporción "de base" — se usa
	 * para calcular el alto preferido cuando no hay nada forzando a
	 * crecer o achicarse (todas las placas del carrusel de 1 línea),
	 * que es el caso normal/mayoritario.
	 */
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	aspect-ratio: 382 / 383;
	overflow: hidden;
}

.invitados__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * ⚠️ Rediseño (node-id=334-96): el país dejó de ser una línea fija en
 * la placa amarilla — ahora es una etiqueta opcional superpuesta
 * sobre la foto, esquina inferior izquierda (se muestra solo si está
 * cargado, igual que el rol — ver render.php). Posición en % (no px)
 * relativa a .invitados__photo para que seskale junto con la foto en
 * cualquier ancho, no solo a los 382px de referencia del frame:
 * left 14.5/382≈3.8%, distancia al borde inferior (383-341-23)/383≈5%.
 */
.invitados__badge {
	position: absolute;
	left: 3.8%;
	bottom: 5%;
	padding: 2px 12px;
	background-color: var(--color-negro);
	color: var(--color-amarillo);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 1px;
	white-space: nowrap;
}

/*
 * ⚠️ Rediseño (node-id=334-96): la placa es de altura AUTOMÁTICA
 * según contenido (no fija) — un nombre de una línea da una placa más
 * baja, un nombre de dos líneas (ej. "Miguel Ángel Severino") la hace
 * crecer, sin recortar texto. `flex: 0 0 auto` (nunca se achica, a
 * diferencia de la foto de arriba que sí). El país ya no vive acá
 * (ver .invitados__badge arriba); gap:2px separa nombre y rol cuando
 * los dos están, en vez de margin en cada uno.
 *
 * ⚠️ `min-height` agregado a pedido: sin esto, una tarjeta sin rol
 * quedaba más baja que una con rol (la placa se achica al tamaño justo
 * del contenido que tenga) — se ve inconsistente en el carrusel. El
 * mínimo reserva el espacio de 1 línea de nombre + 1 línea de rol
 * SIEMPRE, tenga o no tenga rol cargado esa fila en particular; sigue
 * creciendo más allá de este mínimo si el nombre ocupa 2 líneas.
 * Cuenta (con el nombre ya en 36px, ver .invitados__name):
 *   nombre 36px × line-height 1.1  = 39.6px
 *   + gap                          =  2px
 *   + rol 15px × line-height 1.2   = 18px
 *   + padding 12px arriba y abajo  = 24px
 *   total ≈ 84px
 */
.invitados__plate {
	background-color: var(--color-amarillo);
	color: var(--color-negro);
	border-radius: 2px;
	border-bottom-right-radius: 30px;
	flex: 0 0 auto;
	min-height: 84px;
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
}

/*
 * ⚠️ Cambio de tipografía (node-id=143-2 actualizado en Figma): el
 * nombre pasó de Fit (condensada, uppercase) a Inter Black, tamaño
 * fijo (no clamp — la tarjeta ya es de ancho fijo, `flex: 0 0
 * min(382px, 80vw)` en .invitados__slide, así que no hace falta que
 * el texto escale con el viewport salvo el override mobile de abajo)
 * y sin mayúsculas forzadas (el nombre se ve tal cual se escribe,
 * "Litto Nebbia", no "LITTO NEBBIA"). ⚠️ Bajó de 40px a 36px en
 * desktop (pedido explícito) — el breakpoint mobile sigue en 32px,
 * sin cambios.
 */
.invitados__name {
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 36px;
	line-height: 1.1;
	margin: 0;
	overflow-wrap: break-word;
}

/*
 * Agregado a pedido: muchos invitades no son tan conocides y
 * necesitan un "ancla" — a qué se dedican o con qué proyecto vienen
 * (ej. "Músico", "Sonido Konex - Festival Mutante"). Puede ser más
 * largo que una palabra, por eso overflow-wrap (en vez de nowrap) —
 * se espera que rompa a 2 líneas en los casos largos. Mayúsculas
 * vía CSS (no escritas en caps en el contenido, mismo criterio que el
 * resto del sitio) — hereda el estilo que antes tenía el país
 * (15px/600/uppercase/tracking), ahora que el país se mudó a la
 * etiqueta sobre la foto. Opcional: si la fila no carga este campo,
 * `render.php` no imprime el `<p>`, así que no hace falta pensar en
 * un estado "vacío" acá — el `gap` de `.invitados__plate` no deja un
 * hueco de más cuando falta.
 */
.invitados__rol {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
	overflow-wrap: break-word;
}

.invitados__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.invitados__dot {
	all: unset;
	cursor: pointer;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 2px solid var(--color-amarillo);
	box-sizing: border-box;
}

.invitados__dot.is-active {
	background-color: var(--color-amarillo);
}

@media (max-width: 768px) {
	/*
	 * Pedido explícito: en mobile estos dos títulos van a tamaño fijo
	 * (no siguen el clamp() fluido de desktop) — 96px el título de
	 * sección, siempre. El nombre bajó de 64px a 32px (ajuste posterior
	 * al cambio de tipografía a Inter Black — a ese peso/tamaño 64px
	 * quedaba desproporcionado en mobile).
	 */
	.invitados__title {
		font-size: 96px;
	}

	.invitados__name {
		font-size: 32px;
	}

	/* En mobile el carrusel se navega con drag/swipe, no con flechas. */
	.invitados__nav {
		display: none;
	}

	/*
	 * ⚠️ Corregido: el primer intento (margin en la primera/última
	 * tarjeta nada más, ver historial debajo si hace falta) dejaba
	 * bien posicionada la tarjeta inicial, pero al deslizar el
	 * carrusel cualquier otra tarjeta "aterrizaba" pegada al borde
	 * real de la pantalla — el margen solo vivía en esos dos slides
	 * puntuales, no en el punto de anclaje que usa Embla para alinear
	 * CADA slide al frenar. La solución correcta (recomendada por
	 * Embla para este caso exacto) es mover el espacio al propio
	 * viewport como `padding` — no al track ni a slides puntuales.
	 * Con `align:'start'` (view.js), Embla calcula el punto de
	 * aterrizaje de cualquier slide respecto del borde *interno* del
	 * viewport (después del padding), así que todas las tarjetas
	 * terminan alineadas con ese mismo margen al frenar — no solo la
	 * primera. El `margin` negativo sigue haciendo que el viewport
	 * recorte (`overflow:hidden`) hasta el borde real de la pantalla,
	 * así que durante el arrastre el contenido todavía puede verse
	 * pegado al borde (la "sensación de continuidad" que se pidió
	 * antes) — el `padding` solo cambia dónde ancla Embla al soltar,
	 * no dónde recorta.
	 */
	.invitados__viewport {
		margin-left: calc(-1 * var(--container-padding));
		margin-right: calc(-1 * var(--container-padding));
		padding-left: var(--container-padding);
		padding-right: var(--container-padding);
	}
}