/* CSS Document — iCERT Footer Carousel
   Alineado visualmente con la versión Shopify del mismo módulo. */

/* display:block y width:100% explícitos: el módulo se reubica por JS justo
   antes del <footer> del tema, y si ese punto del DOM es un item de un
   flex/grid del tema (que por defecto podría no estirarlo), sin esto se
   queda encogido al ancho de su contenido en vez de ocupar todo el ancho,
   dejando huecos entre las flechas y las tarjetas. */
.icert-footerc-outer {
	display: block;
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	position: relative;
	line-height: 1.45;
	background-color: #f8f9fa;
	box-sizing: border-box;
	overflow: hidden;
}

/* El módulo se reubica por JS fuera del contenedor de ancho del tema (justo
   antes del <footer>), así que sin un límite propio se estira a todo el
   ancho del navegador en pantallas grandes mientras el resto del sitio va
   centrado con un ancho máximo. Se le pone el mismo tipo de límite aquí. */
.icert-footerc-wrap {
	width: 100%;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

#icert-reviews-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}

/* --- Columna izquierda: información general --- */
.icert-footerc-info-col {
	flex: 0 0 20%;
	max-width: 20%;
	min-width: 0;
	padding: 15px 15px 20px 15px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.icert-footerc-logo {
	display: block;
	margin: 0 0 5px 0;
	max-width: 100px;
	height: auto;
}

.icert-footerc-store-name {
	font-size: 18px;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 1px;
	color: #212529;
}

.icert-footerc-subtitle {
	font-size: 12px;
	color: #495057;
	margin: 0 0 4px 0;
}

.icert-footerc-stars-header {
	margin-bottom: 4px;
	line-height: 1;
}

.icert-footerc-star-big {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 1px;
	vertical-align: middle;
}

.icert-footerc-score-wrap {
	padding-top: 0;
	margin-bottom: 2px;
}

.icert-footerc-score {
	font-size: 26px;
	font-weight: 600;
	margin: 0;
	color: #212529;
}

.icert-footerc-count {
	line-height: 1.2;
	color: #495057;
	margin-top: 0;
	margin-bottom: 12px;
}

.icert-footerc-count p {
	margin: 0;
	padding: 0;
	font-size: 11px;
}

.icert-footerc-count strong {
	color: #212529;
	font-weight: 600;
}

.icert-footerc-link {
	font-size: 16px;
	color: #007bff;
	text-decoration: none;
	font-weight: 500;
	margin-top: 0;
	display: inline-block;
}

.icert-footerc-link:hover {
	text-decoration: underline;
	color: #0056b3;
}

/* --- Columna derecha: carrusel ---
   El recorte va solo en #icert-cr (la ventana del carrusel); si también se
   recorta aquí, las flechas (posicionadas fuera de esta caja) desaparecen.
   display:flex (con align-items:center) aquí es necesario para que #icert-cr
   herede la altura real de la fila en vez de dimensionarse solo por su
   propio contenido: sin esto no queda hueco sobrante para centrar el texto
   de las reseñas dentro de las tarjetas. */
.icert-footerc-slider-col {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
}

#icert-cr {
	overflow: hidden;
	position: relative;
	width: 100%;
	flex: 1 1 auto;
}

.icert-cr {
	display: flex;
	position: relative;
	left: 0;
	width: 100%;
	align-items: stretch;
}

.icert-p {
	flex: 0 0 25%;
	max-width: 25%;
	padding: 10px 8px;
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
}

/* --- Tarjeta individual --- */
.icert-footerc-card {
	background-color: #ffffff;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 16px 18px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	min-height: 210px;
}

/* --- Cabecera tarjeta: avatar+nombre+badge izq / estrellas+fecha der --- */
.icert-footerc-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 0 5px;
	margin-bottom: 12px;
	flex-shrink: 0;
}

.icert-footerc-avatar-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	min-width: 0;
}

.icert-footerc-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	margin-right: 10px;
	flex-shrink: 0;
	background-color: #4281FF;
}

.icert-footerc-client-text {
	font-size: 12px;
	line-height: 1.3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 3px;
	min-width: 0;
}

.icert-footerc-name {
	display: block;
	font-weight: 600;
	color: #343a40;
	font-size: 12px;
	line-height: 1;
	text-align: left;
}

.icert-footerc-name strong {
	font-weight: 600;
}

.icert-footerc-verified {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	color: #089b97;
	white-space: nowrap;
}

.icert-footerc-verified svg {
	flex-shrink: 0;
}

.icert-footerc-card-right {
	text-align: right;
	flex-shrink: 0;
	margin-left: auto;
}

.icert-footerc-card-stars {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 4px;
	line-height: 1;
}

.icert-footerc-star-small {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0;
	vertical-align: middle;
}

.icert-footerc-date {
	display: block;
	color: #6c757d;
	font-size: 11px;
}

.icert-footerc-comment {
	font-size: 13px;
	line-height: 1.45;
	color: #495057;
	margin-top: 12px;
	margin-bottom: 0;
	font-style: italic;
	width: 100%;
	text-align: center;
	padding: 0 5px;
	box-sizing: border-box;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 170px;
	overflow: hidden;
}

/* --- Flechas de navegación --- */
.icert-footerc-slider-col .icert-l,
.icert-footerc-slider-col .icert-r {
	position: absolute;
	top: 50%;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #343a40;
	opacity: 0.6;
	transition: opacity 0.2s;
	cursor: pointer;
}

.icert-footerc-slider-col .icert-l:hover,
.icert-footerc-slider-col .icert-r:hover {
	opacity: 0.9;
	color: #000;
}

.icert-footerc-slider-col .icert-l {
	left: -20px;
}

.icert-footerc-slider-col .icert-r {
	right: -20px;
}

/* --- Responsive: 4 tarjetas de ancho a ancho, bajando a 3 / 2 / 1 --- */
@media (max-width: 1488px) {
	.icert-p { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

@media (max-width: 1160px) {
	#icert-reviews-container { flex-direction: column; }

	.icert-footerc-info-col {
		flex: 0 0 auto;
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 25px;
	}

	.icert-footerc-slider-col {
		flex: 1 1 auto;
		max-width: 100%;
		padding-left: 26px;
		padding-right: 26px;
	}

	.icert-p { flex: 0 0 50%; max-width: 50%; padding: 10px; }
	.icert-footerc-slider-col .icert-l { left: -16px; }
	.icert-footerc-slider-col .icert-r { right: -16px; }
}

@media (max-width: 767.98px) {
	.icert-footerc-outer { padding: 15px 0; }

	.icert-footerc-slider-col {
		padding-left: 25px;
		padding-right: 25px;
	}

	.icert-footerc-card {
		padding: 15px 12px;
	}

	.icert-p { flex: 0 0 100%; max-width: 100%; padding: 0 5px; }
	.icert-footerc-slider-col .icert-l { left: -15px; }
	.icert-footerc-slider-col .icert-r { right: -15px; }
}