/* ==========================================================================
   SCA - Redes sociales: color de redes nuevas en el header y
   bloque "Síguenos en nuestras redes" del pie (botones con nombre).
   Usa las animaciones sca-social-in definidas en sca-social-icons.css
   ========================================================================== */

/* Header: Messenger (Canal de Facebook) */
body .site-header .social-icons-wrap .sca-social .sca-social__item.sca-net--messenger {
	--sca-brand: #00b2ff;
	--sca-brand-2: #a033ff;
	--sca-glow: rgba(160, 51, 255, .5);
}

/* Header: con 6 redes, círculos un poco más compactos */
body .site-header .social-icons-wrap .sca-social {
	flex-wrap: wrap;
	gap: 10px;
}

body .site-header .social-icons-wrap .sca-social .sca-social__ico {
	display: contents;
}

/* ---------- Pie ---------- */
.sca-redes-pie {
	width: 100%;
	padding: 6px 0 4px;
}

.sca-redes-pie__titulo {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 auto 22px;
	max-width: 760px;
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-align: center;
}

.sca-redes-pie__titulo::before,
.sca-redes-pie__titulo::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(124, 194, 66, .7));
}

.sca-redes-pie__titulo::after {
	background: linear-gradient(90deg, rgba(124, 194, 66, .7), transparent);
}

body .site-footer .bottom-footer .social-icons-wrap {
	width: 100%;
	flex: 1 1 100%;
}

body .site-footer .social-icons-wrap .sca-social--pie {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 1000px;
	margin: 0 auto;
}

body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item {
	--sca-brand: #7cc242;
	--sca-brand-2: var(--sca-brand);
	--sca-glow: rgba(124, 194, 66, .45);
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 6px 18px 6px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, border-color .35s ease;
	animation: sca-social-in .6s cubic-bezier(.34, 1.56, .64, 1) backwards;
	animation-delay: calc(var(--sca-i, 0) * 70ms);
}

/* Relleno que avanza de izquierda a derecha */
body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(110deg, var(--sca-brand), var(--sca-brand-2));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	z-index: -1;
}

body .site-footer .social-icons-wrap .sca-social--pie .sca-social__ico {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 16px;
	color: #fff;
	background: linear-gradient(135deg, var(--sca-brand), var(--sca-brand-2));
	box-shadow: 0 4px 10px -2px var(--sca-glow);
	transition: background .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

/* El tema dibuja un círculo oscuro de 42px en el <i>: se neutraliza */
body .site-footer .social-icons-wrap .sca-social--pie .sca-social__ico i,
body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item:hover .sca-social__ico i {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-size: 16px;
	color: #fff;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: block;
}

body .site-footer .social-icons-wrap .sca-social--pie .sca-net--instagram .sca-social__ico,
body .site-footer .social-icons-wrap .sca-social--pie .sca-net--instagram::before {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item:hover,
body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item:focus-visible {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 12px 24px -8px var(--sca-glow);
	color: #fff;
	outline: none;
}

body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item:hover::before,
body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item:focus-visible::before {
	transform: scaleX(1);
}

body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item:hover .sca-social__ico,
body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item:focus-visible .sca-social__ico {
	background: rgba(255, 255, 255, .22);
	transform: rotate(-12deg) scale(1.1);
}

body .site-footer .social-icons-wrap .sca-social--pie .sca-net--tiktok:hover i {
	text-shadow: -2px -1px 0 #25f4ee, 2px 1px 0 #fe2c55;
}

/* Tooltip encima del botón */
body .site-footer .social-icons-wrap .sca-social--pie .sca-social__tip {
	clip: auto;
	width: auto;
	height: auto;
	overflow: visible;
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translate(-50%, 6px) scale(.9);
	padding: 6px 11px;
	border-radius: 8px;
	background: #fff;
	color: #12261c;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
	border-top: 3px solid var(--sca-brand);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 20;
	transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), visibility .25s;
}

body .site-footer .social-icons-wrap .sca-social--pie .sca-social__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: #fff;
}

body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item:hover .sca-social__tip,
body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item:focus-visible .sca-social__tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
}

/* Colores por red */
body .site-footer .sca-social--pie .sca-social__item.sca-net--facebook  { --sca-brand: #1877f2; --sca-brand-2: #0a5bd8; --sca-glow: rgba(24, 119, 242, .55); }
body .site-footer .sca-social--pie .sca-social__item.sca-net--youtube   { --sca-brand: #ff0000; --sca-brand-2: #c4000c; --sca-glow: rgba(255, 0, 0, .5); }
body .site-footer .sca-social--pie .sca-social__item.sca-net--instagram { --sca-brand: #f58529; --sca-brand-2: #c13584; --sca-glow: rgba(221, 42, 123, .55); }
body .site-footer .sca-social--pie .sca-social__item.sca-net--tiktok    { --sca-brand: #2b2b2b; --sca-brand-2: #000;    --sca-glow: rgba(254, 44, 85, .45); }
body .site-footer .sca-social--pie .sca-social__item.sca-net--x-twitter { --sca-brand: #333;    --sca-brand-2: #000;    --sca-glow: rgba(255, 255, 255, .22); }
body .site-footer .sca-social--pie .sca-social__item.sca-net--whatsapp  { --sca-brand: #25d366; --sca-brand-2: #128c7e; --sca-glow: rgba(37, 211, 102, .5); }
body .site-footer .sca-social--pie .sca-social__item.sca-net--messenger { --sca-brand: #00b2ff; --sca-brand-2: #a033ff; --sca-glow: rgba(160, 51, 255, .5); }

body .site-footer .sca-social--pie .sca-net--tiktok .sca-social__ico,
body .site-footer .sca-social--pie .sca-net--x-twitter .sca-social__ico {
	border: 1px solid rgba(255, 255, 255, .25);
}

@media (max-width: 560px) {
	body .site-footer .social-icons-wrap .sca-social--pie {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		padding: 0 4px;
	}

	body .site-footer .social-icons-wrap .sca-social--pie .sca-social__item {
		font-size: 13px;
		padding-right: 10px;
	}
}

@media (hover: none), (max-width: 560px) {
	body .site-footer .social-icons-wrap .sca-social--pie .sca-social__tip {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .site-footer .sca-social--pie .sca-social__item,
	body .site-footer .sca-social--pie .sca-social__item::before,
	body .site-footer .sca-social--pie .sca-social__ico {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}
