@charset "UTF-8";
/* CSS Document */
/* ==== BI Reseñas Qualtrics — Widgets (Resumen + Lista/Carrusel) ==== */

.bi-rv-summary-wrap,
.bi-rv-list {
	font-family: 'Poppins', sans-serif;
}

.bi-rv-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	vertical-align: middle;
}

/* Cada estrella es un "wrap" con la version vacia de fondo y la llena
   superpuesta, recortada al % exacto del rating (permite decimales como
   4.8 en vez de redondear siempre a estrellas completas). El tamaño se fija
   con una variable CSS (--bi-rv-star-size) para que el icono "lleno", que
   vive DENTRO del contenedor recortado (.bi-rv-star-fill, con su propio
   ancho en %), no se achique junto con el recorte: mantiene su tamaño real
   y solo se ve la porcion que el overflow:hidden del padre deja pasar. */
.bi-rv-star-wrap {
	--bi-rv-star-size: 20px;
	position: relative;
	display: inline-block;
	width: var(--bi-rv-star-size);
	height: var(--bi-rv-star-size);
	flex: none;
}

.bi-rv-star-wrap > .bi-rv-star,
.bi-rv-star-fill .bi-rv-star {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--bi-rv-star-size);
	height: var(--bi-rv-star-size);
}

.bi-rv-star-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	display: block;
}

/* ---- Widget 1: Reseñas Resumen ---- */

.bi-rv-summary {
	border-radius: 20px;
	padding: 14px;
}

/* Base / Claro: fondo F7F4F4 al 90% (rgba) + borde solido CFD6E2 + blur de fondo.
   El color SIEMPRE va en rgba al 90%, en los 3 casos (Claro/Naranja/Oscuro),
   con el mismo background blur -- asi se ve el efecto "glass" del Figma. */
.bi-rv-summary-card {
	background: rgba(247, 244, 244, 0.9);
	border: 1px solid #cfd6e2;
	border-radius: 24px;
	padding: 18px 20px;
	text-align: left;
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
}

/* El contenedor exterior (.bi-rv-summary) nunca pinta fondo propio en ninguna
   variante: el color lo lleva unicamente la tarjeta (.bi-rv-summary-card). */
.bi-rv-color-orange,
.bi-rv-color-white,
.bi-rv-color-black {
	background: transparent;
}

.bi-rv-color-white .bi-rv-summary-card {
	background: rgba(247, 244, 244, 0.9);
	border-color: #cfd6e2;
}

/* Naranja: tarjeta naranja al 90% (rgba) + borde degradado naranja + texto blanco */
.bi-rv-color-orange .bi-rv-summary-card {
	background:
		linear-gradient(rgba(246, 97, 0, 0.9), rgba(246, 97, 0, 0.9)) padding-box,
		linear-gradient(135deg, #f66100 0%, #ffb5b6 100%) border-box;
	border-color: transparent;
}

.bi-rv-color-orange .bi-rv-summary-name,
.bi-rv-color-orange .bi-rv-avg {
	color: #ffffff;
}

.bi-rv-color-orange .bi-rv-summary-comment,
.bi-rv-color-orange .bi-rv-count {
	color: rgba(255, 255, 255, 0.8);
}

/* En la version Naranja las estrellas naranjas casi no se ven sobre el fondo
   naranja: se pasan a negro (el relleno y el contorno de la llena, y el
   contorno de la vacia -- el interior de la vacia se queda blanco para que
   se siga notando el relleno parcial). El avatar tambien pasa a negro, con
   la inicial en naranja. */
.bi-rv-color-orange .bi-rv-star--full path {
	fill: #000000;
	stroke: #000000;
}

.bi-rv-color-orange .bi-rv-star--empty path {
	stroke: #000000;
}

.bi-rv-color-orange .bi-rv-avatar {
	background: #ffffff;
	color: #f66100;
}

/* Oscuro: tarjeta oscura al 90% (rgba) + texto blanco */
.bi-rv-color-black .bi-rv-summary-card {
	background: rgba(36, 38, 44, 0.9);
	border-color: transparent;
}

.bi-rv-color-black .bi-rv-summary-name,
.bi-rv-color-black .bi-rv-avg {
	color: #ffffff;
}

.bi-rv-color-black .bi-rv-summary-comment,
.bi-rv-color-black .bi-rv-count {
	color: #b7bcc7;
}

.bi-rv-summary-header {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Segun Figma: "4.0" -> Poppins Medium 16px, color 515C71 */
.bi-rv-avg {
	font-size: 16px;
	font-weight: 500;
	color: #515c71;
}

/* Segun Figma: "(1,234)" -> Poppins Regular 14px, color 515C71 */
.bi-rv-count {
	font-size: 14px;
	font-weight: 400;
	color: #515c71;
}

/* Segun Figma: boton "+" -> 32x32, radius 14, fill F66100, stroke inside 1.5px FF802E,
   drop shadow X0 Y6 blur10 spread0 color 14171A al 27% */
.bi-rv-anchor-btn {
	margin-left: auto;
	width: 32px;
	height: 32px;
	flex: none;
	box-sizing: border-box;
	border-radius: 14px;
	background: #f66100;
	border: 1.5px solid #ff802e;
	color: #ffffff !important;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	box-shadow: 0 6px 10px 0 rgba(20, 23, 26, 0.27);
}

.bi-rv-summary-review {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 16px;
}

/* Spinner de carga mientras llega la reseña al azar por AJAX: centrado,
   con espacio arriba y abajo para que no se sienta pegado al header. */
.bi-rv-spinner {
	display: block;
	width: 36px;
	height: 36px;
	margin: 16px auto;
}

.bi-rv-avatar {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: #f66100;
	color: #ffffff;
	font-weight: 600;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Circulo del hero con la calificacion de la persona: estrella ARRIBA y
   "5,0" ABAJO, ambos centrados. Hereda colores de .bi-rv-avatar (incluida
   la variante naranja). Selectores con mas especificidad + !important en el
   layout para que ningun estilo del tema/optimizador lo deje en una fila. */
.bi-rv-summary-review .bi-rv-avatar.bi-rv-rating-badge {
	width: 64px !important;
	height: 64px !important;
	min-width: 64px;
	padding: 0 !important;
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px;
	line-height: 1 !important;
	text-align: center;
}

.bi-rv-summary-review .bi-rv-rating-badge .bi-rv-rating-badge-star {
	display: block !important;
	width: 22px !important;
	height: 22px !important;
	margin: 0 auto !important;
	flex: none;
}

.bi-rv-summary-review .bi-rv-rating-badge .bi-rv-rating-badge-value {
	display: block !important;
	font-size: 16px !important;
	font-weight: 600;
	line-height: 1 !important;
	margin: 0 !important;
	letter-spacing: 0;
}

.bi-rv-summary-review-body {
	min-width: 0;
	text-align: left;
}

.bi-rv-summary-name {
	display: block;
	font-size: 16px;
	color: #1a1c22;
	margin-bottom: 0;
}

.bi-rv-summary-comment {
	margin: -2px 0 0;
	font-size: 14px;
	color: #4c525e;
	line-height: 1.35;
	text-align: left !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Widget 2: Reseñas (título + desglose + carrusel) ---- */

.bi-rv-list {
	padding: 40px 0;
}

.bi-rv-title {
	font-size: 26px;
	font-weight: 700;
	color: #1a1c22;
	margin: 0 0 16px;
}

.bi-rv-avgrow {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bi-rv-avgrow .bi-rv-star-wrap {
	--bi-rv-star-size: 26px;
}

.bi-rv-avgrow-value {
	font-size: 22px;
	font-weight: 600;
	color: #1a1c22;
}

.bi-rv-total {
	font-size: 15px;
	color: #7a7f8a;
	margin: 4px 0 24px;
}

.bi-rv-breakdown {
	max-width: 480px;
	margin-bottom: 32px;
}

.bi-rv-breakdown-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}

.bi-rv-breakdown-label {
	width: 78px;
	flex: none;
	font-size: 14px;
	color: #1a1c22;
}

.bi-rv-breakdown-bar {
	flex: 1 1 auto;
	height: 14px;
	background: #ffffff;
	border: solid 1px #e6e6e6;
	border-radius: 8px;
	overflow: hidden;
	box-sizing: border-box;
}

.bi-rv-breakdown-fill {
	display: block;
	height: 100%;
	background: #ff802e;
	border-radius: 8px;
}

.bi-rv-breakdown-percent {
	width: 36px;
	flex: none;
	font-size: 14px;
	color: #1a1c22;
	text-align: right;
}

.bi-rv-carousel-spinner {
	display: flex;
	justify-content: center;
	padding: 24px 0;
}

.bi-rv-track.slick-initialized {
	opacity: 1;
}

.bi-rv-track:not(.slick-initialized) {
	display: flex;
	overflow: hidden;
	opacity: 0;
}

.bi-rv-track .slick-list {
	height: 200px;
}

.bi-rv-track .slick-track {
	display: flex !important;
}

.bi-rv-track .slick-slide {
	height: auto;
	display: flex !important;
}

/* El "slot" es lo que Slick mide para el ancho de cada slide: la separacion
   entre cards va aqui como padding-right (Slick SI cuenta el padding al medir
   el ancho, a diferencia del margin), asi las cards no quedan pegadas. */
.bi-rv-card-slot {
	box-sizing: border-box;
	padding-right: 16px;
	flex: none;
}

/* Segun Figma: ancho fijo 340px (no fluido) para que todas las cards midan
   exactamente lo mismo y guarden separacion pareja (16px) en el carrusel. */
.bi-rv-card {
	background: #ffffff;
	border: solid 1px #e6e6e6;
	border-radius: 8px;
	box-shadow: 0 8px 12px -6px rgba(0, 0, 0, 0.15);
	padding: 24px 20px;
	box-sizing: border-box;
	display: flex !important;
	flex-direction: row !important;
	gap: 14px;
	align-items: flex-start;
	width: 340px;
	height: 190px;
	flex: none;
}

.bi-rv-card-avatar {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: #f66100;
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bi-rv-card-body {
	min-width: 0;
	text-align: left;
}

.bi-rv-card-name {
	display: block;
	font-size: 18px;
	color: #1a1c22;
	margin-bottom: 4px;
}

.bi-rv-card-body .bi-rv-star-wrap {
	--bi-rv-star-size: 18px;
}

.bi-rv-card-date {
	display: block;
	font-size: 13px;
	color: #8a8f99;
	margin: 4px 0 8px;
}

.bi-rv-card-comment {
	margin: 0;
	font-size: 14px;
	color: #33363d;
	line-height: 1.4;
	text-align: left !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bi-rv-carousel-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

/* Spinner discreto junto a las flechas: se muestra mientras el "Ver más"
   trae el siguiente bloque de reseñas por AJAX, para que no parezca que la
   pagina se quedo sin hacer nada mientras carga. */
.bi-rv-loadmore-spinner {
	display: none;
	width: 20px;
	height: 20px;
	flex: none;
}

.bi-rv-loadmore-spinner.is-loading {
	display: block;
}

.bi-rv-carousel-nav button {
	width: 56px;
	height: 48px;
	box-sizing: border-box;
	border-radius: 28px;
	border: 1.5px solid #d1cfca;
	background: #f7f4f4;
	color: #913200;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bi-rv-carousel-nav button:hover {
	background: #efe9e9;
}

.bi-rv-carousel-nav button.slick-disabled {
	opacity: 0.4;
	cursor: default;
}

.bi-rv-admin-notice {
	padding: 14px 18px;
	background: #fff3cd;
	border: solid 1px #ffe69c;
	border-radius: 8px;
	color: #664d03;
	font-size: 14px;
}

/* Desplazamiento configurable del widget Resumen (Escritorio / Movil) */
/* Se usa position:relative + top (no margin-top) para que el desplazamiento sea solo visual
   y no reduzca el alto que el widget ocupa en el flujo del documento: asi la fila del
   composer que viene despues del Resumen no se ve arrastrada hacia arriba ni tapada. */
.bi-rv-summary {
	position: relative;
	z-index: 999;
	top: calc(var(--bi-rv-offset-desktop, 0px) * -1);
}

@media screen and (max-width: 782px) {
	.bi-rv-summary {
		top: calc(var(--bi-rv-offset-mobile, 0px) * -1);
	}
}

/* Ancho y alineacion configurable del widget Resumen (Escritorio / Movil) */
.bi-rv-summary {
	width: var(--bi-rv-width-desktop, 100%);
	max-width: 100%;
}

.bi-rv-align-center {
	margin-left: auto;
	margin-right: auto;
}

.bi-rv-align-right {
	margin-left: auto;
	margin-right: 0;
}

.bi-rv-align-left {
	margin-left: 0;
	margin-right: auto;
}

@media screen and (max-width: 782px) {
	.bi-rv-summary {
		width: var(--bi-rv-width-mobile, var(--bi-rv-width-desktop, 100%));
	}
}

/* Desplazamiento horizontal (X) configurable del widget Resumen (Escritorio / Movil) */
.bi-rv-summary {
	transform: translateX(var(--bi-rv-x-desktop, 0px));
}

@media screen and (max-width: 782px) {
	.bi-rv-summary {
		transform: translateX(var(--bi-rv-x-mobile, var(--bi-rv-x-desktop, 0px)));
	}
}

/* Contenedor que limita el widget Resumen a 1200px, centrado, sin importar la fila de WPBakery */
.bi-rv-summary-wrap {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	position: relative;
	z-index: 999;
}

/* Cuando el offset vertical esta activo (la card se monta sobre el slider de
   arriba), el wrap no reserva su alto natural -- si no, queda un espacio en
   blanco donde "estaria" la caja aunque su contenido se vea desplazado hacia
   arriba. La card (.bi-rv-summary) sigue con position:relative + top negativo,
   asi que igual se pinta completa por fuera de este wrap de alto 0. */
.bi-rv-summary-wrap.bi-rv-offset-desktop {
	height: 0;
	overflow: visible;
}

@media screen and (max-width: 782px) {
	.bi-rv-summary-wrap.bi-rv-offset-desktop {
		height: auto;
		overflow: visible;
	}

	.bi-rv-summary-wrap.bi-rv-offset-mobile {
		height: 0;
		overflow: visible;
	}
}

/* ==========================================================================
   Blindaje contra HTML roto de otros componentes de la página.
   Si algo antes del widget deja un <strong>/<b>/<em>/<i> sin cerrar (p. ej. el
   shortcode BreadcrumbPaginas), el navegador lo vuelve a abrir dentro de cada
   bloque del widget, rompiendo el flex de las barras y poniendo todo en negrita.
   Las etiquetas propias del plugin siempre llevan clase; las inyectadas no.
   ========================================================================== */
[class*="bi-rv"] strong:not([class]),
[class*="bi-rv"] b:not([class]),
[class*="bi-rv"] em:not([class]),
[class*="bi-rv"] i:not([class]) {
	display: contents;
	font-weight: inherit;
	font-style: inherit;
}