/* ==========================================================================
   SCA - Íconos de redes sociales del header
   - Relleno circular con el color de cada red al pasar el mouse
   - Onda (pulso) + icono que "salta"
   - Tooltip "Síguenos en ..." para que se entienda a dónde lleva
   - Entrada escalonada al cargar la página
   ========================================================================== */

/* Fuera del header el tooltip queda oculto (pie de página, widgets, etc.) */
.sca-social__tip {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

body .site-header .social-icons-wrap .sca-social {
	display: flex;
	align-items: center;
	gap: 12px;
	--sca-ease: cubic-bezier(.34, 1.56, .64, 1); /* rebote suave */
}

body .site-header .social-icons-wrap .sca-social .sca-social__item {
	--sca-brand: #7cc242;          /* verde SCA por defecto */
	--sca-brand-2: var(--sca-brand);
	--sca-glow: rgba(124, 194, 66, .45);
	position: relative;
	isolation: isolate;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 17px;
	text-decoration: none;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .25);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition:
		transform .45s var(--sca-ease),
		box-shadow .35s ease,
		border-color .35s ease,
		opacity .3s ease;
	animation: sca-social-in .6s var(--sca-ease) backwards;
	animation-delay: calc(var(--sca-i, 0) * 90ms + 150ms);
}

/* Relleno circular con el color de la red */
body .site-header .social-icons-wrap .sca-social .sca-social__item::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--sca-brand), var(--sca-brand-2));
	transform: scale(0);
	transition: transform .4s var(--sca-ease);
	z-index: -1;
}

/* Onda que se expande */
body .site-header .social-icons-wrap .sca-social .sca-social__item::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	border: 2px solid var(--sca-brand);
	opacity: 0;
	pointer-events: none;
}

body .site-header .social-icons-wrap .sca-social .sca-social__item i {
	line-height: 1;
	transition: transform .45s var(--sca-ease), text-shadow .3s ease;
}

/* ---------- Hover / foco con teclado ---------- */
body .site-header .social-icons-wrap .sca-social .sca-social__item:hover,
body .site-header .social-icons-wrap .sca-social .sca-social__item:focus-visible {
	color: #fff;
	background-color: transparent;
	border-color: transparent;
	transform: translate(var(--sca-mx, 0px), calc(var(--sca-my, 0px) - 5px)) scale(1.08);
	box-shadow: 0 10px 22px -6px var(--sca-glow), 0 0 0 4px rgba(255, 255, 255, .04);
	outline: none;
}

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

body .site-header .social-icons-wrap .sca-social .sca-social__item:hover::after,
body .site-header .social-icons-wrap .sca-social .sca-social__item:focus-visible::after {
	animation: sca-social-pulse .9s ease-out;
}

body .site-header .social-icons-wrap .sca-social .sca-social__item:hover i,
body .site-header .social-icons-wrap .sca-social .sca-social__item:focus-visible i {
	animation: sca-social-pop .55s var(--sca-ease);
	transform: scale(1.12);
}

/* Las demás redes se atenúan para destacar la elegida */
body .site-header .social-icons-wrap .sca-social:hover .sca-social__item:not(:hover) {
	opacity: .5;
	transform: scale(.94);
}

/* ---------- Tooltip "Síguenos en ..." ---------- */
body .site-header .social-icons-wrap .sca-social .sca-social__tip {
	clip: auto;
	width: auto;
	height: auto;
	overflow: visible;
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translate(-50%, -6px) scale(.9);
	transform-origin: top center;
	padding: 6px 11px;
	border-radius: 8px;
	background: #fff;
	color: #12261c;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2px;
	line-height: 1.2;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
	border-bottom: 3px solid var(--sca-brand);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 20;
	transition: opacity .25s ease, transform .35s var(--sca-ease), visibility .25s;
}

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

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

/* ---------- Colores de cada red ---------- */
body .site-header .social-icons-wrap .sca-social .sca-social__item.sca-net--facebook  { --sca-brand: #1877f2; --sca-brand-2: #0a5bd8; --sca-glow: rgba(24, 119, 242, .6); }
body .site-header .social-icons-wrap .sca-social .sca-social__item.sca-net--instagram { --sca-brand: #f58529; --sca-brand-2: #c13584; --sca-glow: rgba(221, 42, 123, .6); }
body .site-header .social-icons-wrap .sca-social .sca-social__item.sca-net--x-twitter { --sca-brand: #2a2a2a; --sca-brand-2: #000;    --sca-glow: rgba(255, 255, 255, .25); }
body .site-header .social-icons-wrap .sca-social .sca-social__item.sca-net--tiktok    { --sca-brand: #111;    --sca-brand-2: #000;    --sca-glow: rgba(254, 44, 85, .5); }
body .site-header .social-icons-wrap .sca-social .sca-social__item.sca-net--youtube   { --sca-brand: #ff0000; --sca-brand-2: #c4000c; --sca-glow: rgba(255, 0, 0, .55); }
body .site-header .social-icons-wrap .sca-social .sca-social__item.sca-net--whatsapp  { --sca-brand: #25d366; --sca-brand-2: #128c7e; --sca-glow: rgba(37, 211, 102, .55); }
body .site-header .social-icons-wrap .sca-social .sca-social__item.sca-net--linkedin  { --sca-brand: #0a66c2; --sca-brand-2: #004182; --sca-glow: rgba(10, 102, 194, .55); }
body .site-header .social-icons-wrap .sca-social .sca-social__item.sca-net--telegram  { --sca-brand: #2aabee; --sca-brand-2: #229ed9; --sca-glow: rgba(42, 171, 238, .55); }

/* Instagram: degradado oficial completo */
body .site-header .social-icons-wrap .sca-social .sca-net--instagram::before {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* X: borde claro para que se note sobre el fondo oscuro */
body .site-header .social-icons-wrap .sca-social .sca-net--x-twitter:hover {
	border-color: rgba(255, 255, 255, .35);
}

/* TikTok: efecto "glitch" con sus colores cian y rosa */
body .site-header .social-icons-wrap .sca-social .sca-net--tiktok:hover i,
body .site-header .social-icons-wrap .sca-social .sca-net--tiktok:focus-visible i {
	text-shadow: -2px -1px 0 #25f4ee, 2px 1px 0 #fe2c55;
}

body .site-header .social-icons-wrap .sca-social .sca-net--tiktok .sca-social__tip,
body .site-header .social-icons-wrap .sca-social .sca-net--x-twitter .sca-social__tip {
	border-bottom-color: #7cc242;
}

/* Clic: pequeño "hundimiento" */
body .site-header .social-icons-wrap .sca-social .sca-social__item:active {
	transform: translateY(-2px) scale(.96);
	transition-duration: .1s;
}

/* ---------- Animaciones ---------- */
@keyframes sca-social-in {
	from { opacity: 0; transform: translateY(14px) scale(.6); }
	to   { opacity: 1; transform: none; }
}

@keyframes sca-social-pulse {
	0%   { opacity: .9; transform: scale(1); }
	100% { opacity: 0;  transform: scale(1.6); }
}

@keyframes sca-social-pop {
	0%   { transform: scale(1) rotate(0); }
	35%  { transform: scale(.75) rotate(-12deg); }
	70%  { transform: scale(1.25) rotate(8deg); }
	100% { transform: scale(1.12) rotate(0); }
}

/* Pantallas táctiles: sin tooltip ni atenuado (no hay "hover" real) */
@media (hover: none) {
	body .site-header .social-icons-wrap .sca-social .sca-social__tip { display: none; }
	body .site-header .social-icons-wrap .sca-social:hover .sca-social__item:not(:hover) { opacity: 1; transform: none; }
}

/* Accesibilidad: usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
	body .site-header .social-icons-wrap .sca-social .sca-social__item,
	body .site-header .social-icons-wrap .sca-social .sca-social__item i,
	body .site-header .social-icons-wrap .sca-social .sca-social__item::before,
	body .site-header .social-icons-wrap .sca-social .sca-social__item::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}