/* ==========================================================================
   P10 Redes Sociales — tres tarjetas (Instagram, Facebook, TikTok)
   Colores de Página 10: #FFF1E5 (crema), #FFFFFF (blanco), #F70D28 (rojo)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Corrección para contenedores de Elementor:
   En móvil, Elementor pone "flex-wrap: wrap" en sus contenedores y un contenedor
   en columna con "wrap" NO crece con su contenido (la sección se montaría sobre
   la siguiente). Estas reglas hacen que el contenedor inmediato de las tarjetas
   crezca con ellas.
   -------------------------------------------------------------------------- */
.e-con:has(> .elementor-widget .p10rs-grid),
.e-con:has(> .e-con-inner > .elementor-widget .p10rs-grid) {
	flex-wrap: nowrap !important;
	min-height: auto !important;
	height: auto !important;
}
.elementor-widget:has(.p10rs-grid),
.elementor-widget-container:has(.p10rs-grid),
.elementor-shortcode:has(.p10rs-grid) {
	height: auto !important;
}

.p10rs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 20px 0;
}

/* Tablet: 2 columnas (TikTok pasa abajo) */
@media (max-width: 1024px) {
	.p10rs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Móvil: 1 columna */
@media (max-width: 700px) {
	.p10rs-grid {
		grid-template-columns: 1fr;
	}
}

.p10rs-card {
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	padding: 16px;
	display: flex;
	flex-direction: column;
	min-width: 0; /* evita que los iframes desborden la rejilla */
}

/* --- Cabecera: icono + nombre de la red --- */
.p10rs-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f0e4d8;
	margin-bottom: 12px;
}

.p10rs-icono {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
}
.p10rs-icono-ig {
	background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.p10rs-icono-fb {
	background: #1877f2;
}
.p10rs-icono-tt {
	background: #000000;
}

.p10rs-titulo {
	font-weight: 700;
	font-size: 18px;
	color: #1a1a1a;
}

/* --- Cuerpo: área del widget, con su propio scroll --- */
.p10rs-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: 8px;
	scrollbar-width: thin;
}

.p10rs-body-centrado {
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.p10rs-fb {
	max-width: 100%;
}

/* --- Mini-carrusel de Instagram: una publicación a la vez, navegación horizontal --- */
.p10rs-body-ig {
	overflow: hidden; /* nada se apila ni estira la tarjeta */
	position: relative;
}

.p10rs-ig-slider {
	position: relative;
	height: 100%;
}

.p10rs-ig-viewport {
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.p10rs-ig-viewport::-webkit-scrollbar {
	display: none;
}

.p10rs-ig-pista {
	display: flex;
	height: 100%;
}

.p10rs-ig-slide {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: start;
}

.p10rs-ig-slide iframe {
	width: 100%;
	height: 100%;
	border: 1px solid #efefef;
	border-radius: 8px;
	display: block;
	background: #ffffff;
}

/* Flechas del mini-carrusel de Instagram */
.p10rs-ig-flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(247, 13, 40, 0.9);
	color: #ffffff;
	border: none;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	transition: opacity 0.2s ease, background 0.2s ease;
	padding: 0;
}
.p10rs-ig-flecha:hover:not(:disabled) {
	background: #c90a20;
}
.p10rs-ig-prev { left: 6px; }
.p10rs-ig-next { right: 6px; }
.p10rs-ig-flecha:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Contador "2 / 5" */
.p10rs-ig-contador {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	z-index: 2;
	pointer-events: none;
}

/* --- Tarjeta sin contenido configurado --- */
.p10rs-vacio {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #fff1e5;
	border-radius: 8px;
	padding: 20px;
	color: #444;
}

/* --- Botón "Ver en ..." --- */
.p10rs-btn {
	display: block;
	text-align: center;
	border: 2px solid #f70d28;
	color: #f70d28 !important;
	background: #ffffff;
	border-radius: 10px;
	padding: 10px 14px;
	margin-top: 14px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease;
}
.p10rs-btn:hover {
	background: #f70d28;
	color: #ffffff !important;
}