/**
 * Reseñas Nous.
 *
 * Los colores se toman del kit de Elementor si existe, con valor de reserva
 * para que el plugin funcione en cualquier sitio.
 */

.nr-resenas {
	--nr-fondo: var( --e-global-color-6bc7e01, #1D2448 );
	--nr-acento: var( --e-global-color-9411226, #FE8A5C );
	--nr-texto: #fff;
	--nr-suave: rgba( 255, 255, 255, .72 );

	margin: 0 0 2rem;
	width: 100%;
}

/* Las filas ---------------------------------------------------------------- */

.nr-pista {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.nr-fila {
	align-items: stretch;
	background: var( --nr-fondo );
	color: var( --nr-texto );
	display: grid;
	gap: 0;
	grid-template-columns: minmax( 230px, 300px ) 1fr minmax( 150px, 200px );
	min-height: 118px;
	overflow: hidden;
}

/* Por si alguien vuelve a ocultar una fila con el atributo `hidden`: en un
   elemento con `display` explícito —y `.nr-fila` usa grid— el atributo solo no
   basta. El slider ya no lo usa, pero la regla no estorba. */
.nr-fila[hidden] {
	display: none !important;
}

.nr-fila.nr-sin-nota {
	grid-template-columns: minmax( 230px, 300px ) 1fr;
}

/* Persona ----------------------------------------------------------------- */

.nr-persona {
	align-items: center;
	display: flex;
	gap: 1rem;
	padding: 1.25rem 1.4rem;
}

/* El tema puede imponer su propio border-radius a las <img>, así que la
   regla se refuerza con selectores más específicos. `aspect-ratio` asegura que
   el recorte sea cuadrado antes de redondearlo: si no, una foto apaisada sale
   como un óvalo. */
.nr-resenas .nr-foto,
.nr-resenas .nr-persona img,
.nr-fila img.nr-foto {
	aspect-ratio: 1 / 1;
	border-radius: 50% !important;
	display: block;
	flex: 0 0 auto;
	height: 68px;
	max-width: none;
	object-fit: cover;
	object-position: center top;
	overflow: hidden;
	width: 68px;
}

.nr-iniciales {
	align-items: center;
	background: rgba( 255, 255, 255, .12 );
	color: var( --nr-texto );
	display: flex;
	font-size: 1.35rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: .02em;
}

.nr-identidad {
	min-width: 0;
}

.nr-nombre {
	color: var( --nr-texto );
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.25;
	margin: 0 0 .3rem;
	text-transform: uppercase;
}

.nr-convocatoria {
	color: var( --nr-suave );
	font-size: .92rem;
	line-height: 1.3;
	margin: 0;
}

/* Cita -------------------------------------------------------------------- */

.nr-cita {
	align-self: center;
	border: 0;
	color: var( --nr-texto );
	font-size: .95rem;
	line-height: 1.5;
	margin: 0;
	padding: 1.25rem 1.6rem 1.25rem 0;
	quotes: none;
}

.nr-cita p {
	margin: 0;
}

.nr-cita::before,
.nr-cita::after {
	content: none;
}

/* Nota -------------------------------------------------------------------- */

/* Va en su propio bloque, separado por una línea fina, como en el diseño. */
.nr-nota {
	align-items: center;
	border-left: 4px solid #fff;
	display: flex;
	justify-content: center;
	padding: 1rem;
}

.nr-nota span {
	color: var( --nr-texto );
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* Controles del slider ----------------------------------------------------- */

.nr-controles {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-top: 1.1rem;
}

.nr-resenas .nr-flecha {
	background: transparent;
	border: 1px solid var( --nr-fondo );
	border-radius: 50%;
	color: var( --nr-fondo );
	cursor: pointer;
	font-size: 1.3rem;
	height: 2.35rem;
	line-height: 1;
	padding: 0;
	transition: background-color .15s ease, color .15s ease;
	width: 2.35rem;
}

.nr-resenas .nr-flecha:hover {
	background: var( --nr-fondo );
	color: #fff;
}

/* Con una reseña por vista salen decenas de puntos. Envolviéndolos se formaba
   un tapiz que ocupaba más que el propio carrusel, así que van en una sola
   tira que se desplaza: el guion mantiene a la vista el que toca. */
.nr-resenas .nr-puntos {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: .4rem;
	justify-content: flex-start;
	margin: 0 auto;
	max-width: min( 100%, 16rem );
	overflow-x: auto;
	padding: .15rem 0;
	/* Para que el `offsetLeft` de cada punto se mida contra esta tira y no
	   contra un contenedor de Elementor: si no, el guion calcula mal cuánto
	   tiene que desplazarse. */
	position: relative;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Sin barra de desplazamiento: se navega con las flechas, no arrastrando. */
.nr-resenas .nr-puntos::-webkit-scrollbar {
	display: none;
}

/* Que ninguno se aplaste cuando no caben. */
.nr-resenas .nr-puntos > * {
	flex: 0 0 auto;
}

.nr-resenas .nr-punto {
	background: #cfd4de;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: .55rem;
	padding: 0;
	transition: background-color .15s ease, width .15s ease;
	width: .55rem;
}

.nr-resenas .nr-punto.nr-activo {
	background: var( --nr-acento );
	border-radius: 999px;
	width: 1.5rem;
}

/* Cambio de página: desplazamiento, no parpadeo --------------------------- */

/* La tira se mueve de lado dentro de una ventana que la recorta. Antes se
   hacía un fundido a cero y vuelta, y ese apagón era lo que se veía como un
   parpadeo cada vez que cambiaba la página. */

.nr-ventana {
	overflow: hidden;
}

.nr-es-slider.nr-listo .nr-pista {
	/* `flex-start` y no el estiramiento de serie: si las páginas se estiran,
	   todas miden lo que la más alta y la ventana ya no puede encogerse para la
	   que toca, que es justo lo que evita el corte. */
	align-items: flex-start;
	flex-direction: row;
	gap: 0;
	will-change: transform;
}

/* Cada página ocupa exactamente el ancho de la ventana y, dentro, las reseñas
   se apilan igual que antes. */
.nr-pagina {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	gap: .55rem;
	min-width: 0;
}

/* La altura la fija el guion, porque cada página tiene la suya: sin esto, o se
   corta la más alta o sobra hueco debajo de la más baja. Se anima a la vez que
   el desplazamiento para que el movimiento sea uno solo. */
.nr-listo.nr-con-transicion .nr-pista,
.nr-listo.nr-con-transicion .nr-ventana {
	transition: transform .5s cubic-bezier( .22, .61, .36, 1 ), height .5s cubic-bezier( .22, .61, .36, 1 );
}

.nr-sin-animacion .nr-pista,
.nr-sin-animacion .nr-ventana {
	transition: none !important;
}

@media ( prefers-reduced-motion: reduce ) {

	.nr-listo.nr-con-transicion .nr-pista,
	.nr-listo.nr-con-transicion .nr-ventana {
		transition: none;
	}
}

.nr-aviso {
	color: #6b7280;
	font-size: .9rem;
}

/* Móvil -------------------------------------------------------------------- */

@media ( max-width: 782px ) {
	.nr-fila,
	.nr-fila.nr-sin-nota {
		grid-template-columns: 1fr;
	}

	.nr-persona {
		padding-bottom: .5rem;
	}

	.nr-cita {
		padding: 0 1.4rem 1rem;
	}

	.nr-nota {
		border-left: 0;
		border-top: 2px solid rgba( 255, 255, 255, .35 );
		justify-content: flex-start;
		padding: .85rem 1.4rem;
	}

	.nr-nota span {
		font-size: 2rem;
	}
}