/* REDYTEC - estilos globales del sitio (portados 1:1 desde el diseño original) */

html {
	scroll-behavior: smooth;
}

body.redytec-body {
	font-family: 'Plus Jakarta Sans', sans-serif;
}

::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: #030811;
}
::-webkit-scrollbar-thumb {
	background: #1B355A;
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #E51F1F;
}

/* Líneas conectoras del diagrama de nodos del hero */
.connector-line {
	stroke-dasharray: 8;
	animation: dash 30s linear infinite;
}
@keyframes dash {
	to { stroke-dashoffset: -1000; }
}

/* Marquee continuo (logos de clientes / certificaciones) */
@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.animate-marquee {
	display: flex;
	width: max-content;
	animation: marquee 25s linear infinite;
}
.animate-marquee:hover {
	animation-play-state: paused;
}

/* Scroll-spy del menú principal */
.nav-link-item {
	position: relative;
	transition: color 0.3s ease;
}
.nav-link-item::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: #00E5FF;
	box-shadow: 0 0 8px #00E5FF, 0 0 15px #00E5FF;
	transition: width 0.3s ease;
}
.nav-link-item.active-spy {
	color: #E51F1F !important;
}
.nav-link-item.active-spy::after {
	width: 100%;
}

/* Subrayados de color por unidad de negocio en el super-menu */
.super-menu-link {
	position: relative;
}
.super-menu-link::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 0%;
	height: 2px;
	transition: width 0.3s ease;
	border-radius: 2px;
}
.super-menu-link:hover::after,
.super-menu-link.active-unit::after {
	width: 100%;
}

.super-menu-wire::after { background-color: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.super-menu-secure::after { background-color: #059669; box-shadow: 0 0 8px #059669; }
.super-menu-cloud::after { background-color: #2563eb; box-shadow: 0 0 8px #2563eb; }
.super-menu-soft::after { background-color: #9333ea; box-shadow: 0 0 8px #9333ea; }
.super-menu-team::after { background-color: #f97316; box-shadow: 0 0 8px #f97316; }

/* Scroll reveal escalonado */
.reveal-item {
	opacity: 0;
	transform: translateY(30px) translateZ(0);
	filter: blur(4px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity, filter;
}
.reveal-item.revealed {
	opacity: 1;
	transform: translateY(0) translateZ(0);
	filter: blur(0);
}

/* Tarjetas de widgets del footer (sucursales) */
.redytec-footer-card {
	height: 100%;
}
.redytec-footer-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Elementor: evitar que el ancho "boxed" del editor rompa las secciones full-width del diseño */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1280px;
}

/*
 * Cabecera fija compartida: el super-menú (siempre igual, viene del tema) y la barra
 * de navegación propia de cada página (home o cualquier solución del ecosistema) se
 * posicionan con "fixed" en vez de "sticky", porque "sticky" deja de funcionar cuando
 * el contenido de la página está dividido en varias secciones de Elementor (cada
 * sección corta el rango en el que el elemento puede quedarse pegado). El offset
 * vertical de la barra de navegación y la altura del espaciador se recalculan en JS
 * (ver redytec-interactions.js) según la altura real del super-menú en cada momento.
 */
/*
 * "!important" en "position" a propósito: si a alguna página del ecosistema se le
 * agrega por accidente una clase de Tailwind como "relative" o "static" en el mismo
 * elemento, esa clase NO debe poder desactivar el posicionamiento fijo compartido
 * (ya nos pasó una vez: Tailwind se inyecta después y le ganaba a esta regla).
 */
.redytec-super-menu-fixed {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
}

.redytec-page-navbar {
	position: fixed !important;
	left: 0;
	right: 0;
	z-index: 40;
	top: 0;
}
@media (min-width: 768px) {
	.redytec-page-navbar {
		top: 80px;
	}
}

/*
 * Tamaño del logo de WordPress (the_custom_logo()) con CSS normal en vez de una
 * variante arbitraria de Tailwind ("[&_img]:h-7"): esa técnica dejaba de aplicarse
 * de forma confiable y el logo se veía a tamaño completo (a veces enorme, según la
 * imagen que se haya subido en Apariencia > Personalizar > Identidad del sitio).
 * Esta regla siempre gana porque es CSS real del tema, no depende del JIT de Tailwind.
 */
.redytec-logo-h7 img {
	height: 28px !important;
	width: auto !important;
	object-fit: contain !important;
}
.redytec-logo-h8 img {
	height: 32px !important;
	width: auto !important;
	object-fit: contain !important;
}
.redytec-logo-h12 img {
	height: 48px !important;
	width: auto !important;
	object-fit: contain !important;
}