/* Reseñas de la home — ver inc/resenas.php.
   La sección solo existe cuando hay reseñas reales aprobadas; mientras no las
   haya, el shortcode no devuelve nada y esta fila se pliega sin dejar hueco. */

/*
 * El relevo. Mientras no haya reseñas reales, la portada sigue enseñando los tres
 * testimonios de plantilla —así se acordó: sustituirlos, no dejar el hueco— y esta
 * fila no pinta nada ni ocupa sitio. En cuanto exista la primera reseña de verdad,
 * el body se marca, las de plantilla se retiran y aparecen las reales en su lugar.
 */
.kubari-resenas-row:not(:has(.kubari-resenas)) {
	display: none;
}

/* La fila del titulo que hay encima («Lo que dicen» + entradilla) lleva 100 px
   de padding-bottom propios de WPBakery, que dejaban las resenas descolgadas del
   titulo al que pertenecen. Se recorta desde aqui para no tocar el contenido de
   la pagina.

   Solo en pantallas anchas: en movil ese padding ya baja a unos 34 px, que es la
   separacion que toca, y restarle de forma fluida dejaba el titulo pegado a la
   primera resena (10 px medidos). */
@media (min-width: 1000px) {
	.kubari-resenas-row:has(.kubari-resenas) {
		margin-top: -3.5rem;
	}
}

.kub-con-resenas #reviews + .kubari-reviews-row,
.kub-con-resenas .kubari-reviews-row {
	display: none;
}

/*
 * ⚠️ Las clases de aquí son propias (kubari-resenas__*). Las kubari-review-* del
 * diseño anterior las estiliza el CSS del Personalizador y siguen sirviendo a los
 * testimonios de plantilla, que continúan en la portada aunque ocultos. No se
 * comparten clases con ellos: hacerlo traía height:100%, texto centrado, borde de
 * 3px con radio de 40px y una comilla rosa de 90px en Georgia.
 *
 * Lo único que sí hay que neutralizar es lo que Salient inyecta en <style> inline
 * y no se puede desencolar: blockquote en serif con franja lateral y comillas
 * decorativas. Mismo problema que ya se resolvió en landing.css.
 */
.kubari-resenas :where(blockquote) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-style: normal;
	quotes: none;
}

.kubari-resenas :where(blockquote)::before,
.kubari-resenas :where(blockquote)::after {
	content: none;
}

.kubari-resenas :where(em) {
	font-family: inherit;
	font-style: normal;
}

/* -------------------------------------------------------------------------
 * La sección
 * ------------------------------------------------------------------------- */
.kubari-resenas {
	--kub-teal: #00828e;
	--kub-tinta: #123c42;
	--kub-suave: #5b7a7f;
	/* Las estrellas van en el teal de la marca. El amarillo de marca (#ece15b)
	   sobre blanco no llega a 1,6:1 y las estrellas SON el dato, no un adorno;
	   y el dorado de convencion queda de otra paleta al lado del teal. */
	--kub-estrella: #00828e;

	margin: 0;
}

/* El título vive en la fila de WPBakery que hay encima. Este se mantiene para
   los lectores de pantalla, que necesitan una cabecera que nombre la región,
   pero no se pinta: se leía «Lo que dicen» dos veces seguidas. */
.kubari-resenas__titulo {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kubari-resenas__titulo.is-visible {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
	clip-path: none;
	color: var(--kub-teal);
	text-align: center;
}

.kubari-resenas__lista {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
	align-items: start;
}

/* Sin caja: tres columnas de texto separadas por aire, con una regla fina
   arriba que es lo que las alinea como fila. La cita es el contenido; el marco
   de 40 px de radio competía con ella y obligaba a estirar las tres a la altura
   de la más larga. */
.kubari-resenas__item {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 0 0;
	border-top: 2px solid var(--kub-teal);
}

.kubari-resenas__estrellas {
	display: flex;
	align-items: center;
	gap: 0.1875rem;
	margin: 0 0 0.875rem;
	line-height: 1;
}

.kubari-resenas__estrella {
	display: block;
	flex: none;
	fill: var(--kub-estrella);
	stroke: var(--kub-estrella);
}

.kubari-resenas__estrella.is-vacia {
	fill: none;
	stroke: color-mix(in oklch, var(--kub-estrella) 35%, transparent);
}

.kubari-resenas__cita {
	/* La firma necesita separarse de la ultima linea de la cita mas de lo que
	   separan entre si dos lineas de texto, o se lee como una linea mas. */
	margin: 0 0 1.75rem;
	color: var(--kub-tinta);
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
	line-height: 1.6;
	text-align: left;
	text-wrap: pretty;
}

.kubari-resenas__firma {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	text-align: left;
}

.kubari-resenas__nombre {
	color: var(--kub-tinta);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.kubari-resenas__producto {
	align-self: flex-start;
	color: var(--kub-suave);
	font-size: 0.875rem;
	line-height: 1.4;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.kubari-resenas__producto:hover,
.kubari-resenas__producto:focus-visible {
	color: var(--kub-teal);
	border-bottom-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.kubari-resenas__producto {
		transition: none;
	}
}