/*
 * "Entérate de las novedades" (Inicio). Las tarjetas están en social-card.css.
 *
 *   Contenedor               → home-social
 *     Contenedor de cabecera → home-social__head
 *       Editor de texto      → home-social__eyebrow eyebrow
 *       Título               → home-social__title
 *       Editor de texto      → home-social__lead
 *     Contenedor (grid)      → home-social__grid   (3 tarjetas social-card)
 *
 * En móvil el grid se vuelve un carrusel horizontal con snap.
 */

.home-social {
	gap: 0;
	padding: 0 var(--wrap-gutter) clamp(56px, 6.5vw, 96px);
}

.home-social__head { gap: 0; margin-bottom: clamp(22px, 2.8vw, 36px); }
/* Espacio con padding: Elementor anula el margin de los widgets. */
.home-social__title { padding: 14px 0 10px; }
.home-social__title .elementor-heading-title {
	margin: 0;
	font-size: clamp(30px, 3.8vw, 54px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.04em;
}
.home-social__lead p {
	max-width: 34em;
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--color-muted);
}

/* Móvil: tarjetas en fila con scroll horizontal. El margen negativo las deja llegar al borde de la pantalla. */
.home-social__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 84%;
	gap: 12px;
	margin-inline: calc(-1 * var(--wrap-pad));
	padding: 4px var(--wrap-pad) 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.home-social__grid::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
	.home-social__grid {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(14px, 1.8vw, 24px);
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}
}

@media (min-width: 1025px) {
	.home-social__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}