/* ==========================================================================
   REINPE MARCAS RELACIONADAS - WIDGET STYLES
   ========================================================================== */

.reinpe-marcas-bar-section {
	width: 100%;
	padding: 30px 0;
	box-sizing: border-box;
}

.reinpe-marcas-bar-wrapper {
	display: flex;
	align-items: center;
	gap: 40px;

	background-color: #0C1830;
	background-image:
		radial-gradient(circle at 15% 20%, rgba(50,186,190,0.16) 0%, transparent 45%),
		radial-gradient(circle at 85% 15%, rgba(0,101,254,0.14) 0%, transparent 50%),
		radial-gradient(circle at 50% 100%, rgba(120,80,255,0.10) 0%, transparent 55%),
		radial-gradient(circle at 90% 85%, rgba(50,186,190,0.08) 0%, transparent 40%),
		linear-gradient(135deg, #0C1830 0%, #101d3d 45%, #0C1830 100%);
	background-size: 140% 140%, 140% 140%, 140% 140%, 140% 140%, 100% 100%;
	background-position: 0% 0%, 100% 0%, 50% 100%, 90% 90%, 0% 0%;
	animation: reinpeGlowDrift 12s ease-in-out infinite;

	border: 1px solid rgba(228,233,242,0.15);
	border-radius: 24px;
	padding: 2em 2.5em;
	position: relative;
	justify-content: center;
	overflow: hidden;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.04),
		0 8px 30px rgba(0,0,0,0.25);
	box-sizing: border-box;
}

/* Glows extra: blobs difuminados independientes */
.reinpe-marcas-bar-glow-1,
.reinpe-marcas-bar-glow-2,
.reinpe-marcas-bar-glow-3 {
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	pointer-events: none;
	z-index: 0;
}

.reinpe-marcas-bar-glow-1 {
	width: 220px;
	height: 220px;
	top: -80px;
	left: -60px;
	background: radial-gradient(circle, rgba(50,186,190,0.35) 0%, transparent 70%);
	animation: reinpeFloatGlow1 8s ease-in-out infinite;
}

.reinpe-marcas-bar-glow-2 {
	width: 260px;
	height: 260px;
	bottom: -100px;
	right: -70px;
	background: radial-gradient(circle, rgba(0,101,254,0.30) 0%, transparent 70%);
	animation: reinpeFloatGlow2 10s ease-in-out infinite;
}

.reinpe-marcas-bar-glow-3 {
	width: 180px;
	height: 180px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(120,80,255,0.18) 0%, transparent 70%);
	animation: reinpePulseGlow3 6s ease-in-out infinite;
}

@keyframes reinpeGlowDrift {
	0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 90% 90%, 0% 0%; }
	50% { background-position: 10% 10%, 90% 10%, 45% 95%, 80% 80%, 0% 0%; }
}

@keyframes reinpeFloatGlow1 {
	0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
	50% { transform: translate(20px, 15px) scale(1.15); opacity: 1; }
}

@keyframes reinpeFloatGlow2 {
	0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
	50% { transform: translate(-15px, -20px) scale(1.1); opacity: 1; }
}

@keyframes reinpePulseGlow3 {
	0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
	50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}

/* Línea decorativa sutil */
.reinpe-marcas-bar-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
	border-radius: 24px 24px 0 0;
	z-index: 1;
}

.reinpe-marcas-bar-texto {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: relative;
	z-index: 2;
}

.reinpe-marcas-bar-titulo {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	white-space: nowrap;
	letter-spacing: -0.2px;
	margin: 0;
}

.reinpe-marcas-bar-subtitulo {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: rgba(255,255,255,0.5);
	white-space: nowrap;
	margin: 0;
}

.reinpe-marcas-bar-logos {
	display: flex;
	align-items: center;
	gap: 36px;
	overflow-x: auto;
	overflow-y: visible;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 1;
	justify-content: center;
	padding: 8px 0;
	position: relative;
	z-index: 2;
}

.reinpe-marcas-bar-logos::-webkit-scrollbar {
	display: none;
}

.reinpe-marca-bar-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 12px;
	background: rgba(255,255,255,0.06);
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.08);
	opacity: 0.75;
	transition: all 0.3s ease;
	filter: brightness(0) invert(1);
	position: relative;
	z-index: 2;
	box-sizing: border-box;
}

.reinpe-marca-bar-item:hover {
	opacity: 1;
	filter: brightness(0) invert(1);
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.15);
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	z-index: 10;
}

.reinpe-marca-bar-item img {
	max-height: 30px;
	max-width: 90px;
	object-fit: contain;
	display: block;
}

.reinpe-marca-bar-item .reinpe-marca-nombre {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Adaptación a pantallas pequeñas.

   Los logotipos tienen anchos muy distintos —unos son imagen, otros el nombre
   de la marca en texto—, así que dejarlos fluir produce filas descuadradas. En
   móvil se reparten en una rejilla de columnas iguales, que se lee mucho mejor
   y no depende del ancho de cada logo.
   --------------------------------------------------------------------------- */

/* El texto puede partirse en cuanto el espacio aprieta, en cualquier tamaño. */
@media (max-width: 1024px) {
	.reinpe-marcas-bar-titulo,
	.reinpe-marcas-bar-subtitulo {
		white-space: normal;
	}
}

/* Tablet: el rótulo arriba y los logos debajo, en una fila desplazable. */
@media (max-width: 1024px) and (min-width: 768px) {
	.reinpe-marcas-bar-wrapper {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}

	.reinpe-marcas-bar-texto {
		align-items: center;
		text-align: center;
	}

	.reinpe-marcas-bar-logos {
		width: 100%;
		gap: 24px;
		justify-content: flex-start;
		scroll-snap-type: x proximity;
		padding-bottom: 4px;
	}

	.reinpe-marca-bar-item {
		scroll-snap-align: center;
	}
}

@media (max-width: 767px) {
	.reinpe-marcas-bar-section {
		padding: 24px 0;
	}

	.reinpe-marcas-bar-wrapper {
		flex-direction: column;
		align-items: center;
		gap: 18px;
		/* El relleno entra dentro del ancho: si no, desborda la pantalla. */
		padding: 20px 16px;
		box-sizing: border-box;
		max-width: 100%;
	}

	.reinpe-marcas-bar-texto {
		align-items: center;
		text-align: center;
		max-width: 100%;
	}

	.reinpe-marcas-bar-titulo {
		font-size: 15px;
	}

	.reinpe-marcas-bar-subtitulo {
		font-size: 11px;
	}

	/* Rejilla de columnas iguales: todas las cajas miden lo mismo aunque sus
	   logos no, y la última fila no queda descolgada a la izquierda. */
	.reinpe-marcas-bar-logos {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		width: 100%;
		max-width: 100%;
		overflow: visible;
		box-sizing: border-box;
		justify-content: stretch;
		align-items: stretch;
	}

	.reinpe-marca-bar-item {
		height: 44px;
		width: auto;
		max-width: none;
		padding: 0 8px;
		box-sizing: border-box;
	}

	.reinpe-marca-bar-item img {
		max-height: 24px;
		max-width: 100%;
	}

	.reinpe-marca-bar-item .reinpe-marca-nombre {
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}

	/* El realce al pasar por encima no aporta en táctil y provoca saltos. */
	.reinpe-marca-bar-item:hover {
		transform: none;
		box-shadow: none;
	}
}

/* Móviles estrechos: dos columnas, que tres se quedan angostas. */
@media (max-width: 480px) {
	.reinpe-marcas-bar-logos {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.reinpe-marca-bar-item {
		height: 42px;
	}
}

/* Cuando solo hay una o dos marcas no tiene sentido forzar tres columnas:
   se centran ocupando lo que necesiten. */
@media (max-width: 767px) {
	.reinpe-marcas-bar-logos:has(.reinpe-marca-bar-item:only-child) {
		grid-template-columns: minmax(120px, 60%);
		justify-content: center;
	}

	.reinpe-marcas-bar-logos:has(.reinpe-marca-bar-item:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}