/* =================================================================
   ServidoresCR — Capa de estilo profesional
   Enfoque: innovación + confianza. Sólo mejora (enhancement-only):
   no altera la maquetación de Elementor, sólo pule componentes.
   Paleta tomada de la marca:
     navy #050324 · azul #028FCF · celeste #37B2F7 · morado #6C42FF · teal #014C68
   ================================================================= */

:root {
	--scr-navy:    #050324;
	--scr-blue:    #028FCF;
	--scr-sky:     #37B2F7;
	--scr-purple:  #6C42FF;
	--scr-teal:    #014C68;
	--scr-ink:     #1a1f36;
	--scr-muted:   #5b6378;

	/* Gradiente "innovación" reutilizable */
	--scr-grad:        linear-gradient(135deg, #028FCF 0%, #37B2F7 45%, #6C42FF 100%);
	--scr-grad-hover:  linear-gradient(135deg, #0a7fbb 0%, #2aa0e8 45%, #5b34ef 100%);

	/* Sombras suaves y modernas (confianza, profundidad sutil) */
	--scr-shadow-sm: 0 2px 8px rgba(5, 3, 36, .06);
	--scr-shadow-md: 0 10px 30px rgba(5, 3, 36, .08);
	--scr-shadow-lg: 0 20px 50px rgba(5, 3, 36, .14);
	--scr-glow:      0 12px 28px rgba(2, 143, 207, .28);

	--scr-radius:    14px;
	--scr-ease:      cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Tipografía: jerarquía más nítida y profesional ---------- */
.elementor-widget-heading .elementor-heading-title {
	letter-spacing: -.01em;
	font-weight: 700;
}
h1, h2, .elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title {
	letter-spacing: -.02em;
	font-weight: 800;
}
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
	line-height: 1.7;
}
::selection { background: rgba(108, 66, 255, .18); }

/* ---------- Transiciones globales suaves ---------- */
a, .elementor-button, .elementor-widget-button a,
.eael-creative-button, .eael-info-box, .eael-team-member,
.eael-pricing-table, .elementor-image-box-wrapper,
.elementor-widget-image img, button {
	transition: transform .35s var(--scr-ease),
	            box-shadow .35s var(--scr-ease),
	            background .35s var(--scr-ease),
	            border-color .35s var(--scr-ease),
	            color .25s ease;
}
html { scroll-behavior: smooth; }

/* ---------- Botones: gradiente, elevación y micro-interacción ---------- */
.elementor-button,
.elementor-widget-button .elementor-button,
.eael-creative-button {
	border-radius: 10px !important;
	font-weight: 600 !important;
	letter-spacing: .01em;
	box-shadow: var(--scr-shadow-sm);
	border: none;
}
.elementor-button:hover,
.elementor-widget-button .elementor-button:hover,
.eael-creative-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--scr-glow);
}
.elementor-button:active { transform: translateY(0); }

/* Botones primarios (azul/navy de marca) → gradiente innovación */
.elementor-button[style*="028FCF"],
.elementor-button[style*="050324"],
.elementor-button[style*="37B2F7"],
.elementor-button[style*="6C42FF"] {
	background-image: var(--scr-grad) !important;
	color: #fff !important;
}
.elementor-button[style*="028FCF"]:hover,
.elementor-button[style*="050324"]:hover,
.elementor-button[style*="37B2F7"]:hover,
.elementor-button[style*="6C42FF"]:hover {
	background-image: var(--scr-grad-hover) !important;
}

/* ---------- Tarjetas (info-box / image-box): elevación y confianza ---------- */
.eael-info-box-wrapper .eael-infobox,
.elementor-widget-image-box .elementor-image-box-wrapper,
.eael-team-member .eael-team-item,
.eael-pricing-table .eael-pricing {
	border-radius: var(--scr-radius);
	background: #fff;
	box-shadow: var(--scr-shadow-md);
	border: 1px solid rgba(5, 3, 36, .05);
	overflow: hidden;
	will-change: transform;
}
.eael-info-box-wrapper .eael-infobox:hover,
.elementor-widget-image-box .elementor-image-box-wrapper:hover,
.eael-team-member .eael-team-item:hover {
	transform: translateY(-6px);
	box-shadow: var(--scr-shadow-lg);
	border-color: rgba(2, 143, 207, .25);
}

/* Iconos de las tarjetas: acento sutil de marca */
.eael-info-box-wrapper .infobox-icon-wrap,
.elementor-image-box-wrapper .elementor-image-box-img {
	transition: transform .35s var(--scr-ease);
}
.eael-info-box-wrapper .eael-infobox:hover .infobox-icon-wrap,
.elementor-image-box-wrapper:hover .elementor-image-box-img {
	transform: scale(1.08);
}

/* ---------- Contadores (prueba social → confianza) ---------- */
.eael-counter .eael-counter-number-prefix,
.eael-counter .eael-counter-number,
.eael-counter .eael-counter-number-postfix {
	font-weight: 800;
	letter-spacing: -.02em;
	background: var(--scr-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.eael-counter .eael-counter-title {
	font-weight: 600;
	color: var(--scr-muted);
}

/* ---------- Tabla de precios: destacar el plan y dar profundidad ---------- */
.eael-pricing-table .eael-pricing:hover {
	transform: translateY(-6px);
	box-shadow: var(--scr-shadow-lg);
}
.eael-pricing-table .eael-pricing-tag .price-tag {
	font-weight: 800;
	letter-spacing: -.02em;
}

/* ---------- Testimonios: tarjeta limpia y legible ---------- */
.eael-testimonial-slider .eael-testimonial-item,
.eael-testimonial-content {
	border-radius: var(--scr-radius);
}

/* ---------- Imágenes: bordes suaves y profundidad discreta ---------- */
.elementor-widget-image img {
	border-radius: 10px;
}
.elementor-widget-image:hover img {
	box-shadow: var(--scr-shadow-md);
}

/* ---------- Enlaces de texto: subrayado animado ---------- */
.elementor-widget-text-editor a:not(.elementor-button) {
	background-image: linear-gradient(var(--scr-blue), var(--scr-blue));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	text-decoration: none;
	transition: background-size .3s var(--scr-ease), color .2s ease;
}
.elementor-widget-text-editor a:not(.elementor-button):hover {
	background-size: 100% 2px;
	color: var(--scr-blue);
}

/* ---------- Accesibilidad: foco visible y consistente ---------- */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid rgba(2, 143, 207, .55);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------- Formularios (Fluent Forms): inputs más pulidos ---------- */
.fluentform input:not([type=submit]),
.fluentform textarea,
.fluentform select {
	border-radius: 10px !important;
	border: 1px solid rgba(5, 3, 36, .14) !important;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.fluentform input:not([type=submit]):focus,
.fluentform textarea:focus,
.fluentform select:focus {
	border-color: var(--scr-blue) !important;
	box-shadow: 0 0 0 4px rgba(2, 143, 207, .12) !important;
}

/* ---------- Barra de desplazamiento con color de marca ---------- */
@media (min-width: 1025px) {
	* { scrollbar-width: thin; scrollbar-color: var(--scr-blue) transparent; }
	*::-webkit-scrollbar { width: 10px; height: 10px; }
	*::-webkit-scrollbar-thumb {
		background: var(--scr-grad);
		border-radius: 10px;
		border: 2px solid #fff;
	}
}

/* ---------- Revelado sutil al entrar en viewport (sólo si el usuario no pidió menos movimiento) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.eael-info-box-wrapper,
	.elementor-widget-image-box,
	.eael-team-member,
	.eael-pricing-table {
		animation: scr-rise .7s var(--scr-ease) both;
	}
	@keyframes scr-rise {
		from { opacity: 0; transform: translateY(18px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =================================================================
   MENÚ PRINCIPAL (Astra HFB) — Inicio · Nosotros · Servicios · Contacto
   Más legible, con indicador animado y submenú pulido.
   ================================================================= */

/* Espaciado y peso más claros */
.main-header-menu > .menu-item > .menu-link {
	font-weight: 500;
	letter-spacing: .01em;
	position: relative;
	transition: color .25s ease;
}

/* Indicador subrayado animado (gradiente de marca) en hover y página actual.
   Aditivo: no depende del fondo, funciona sobre header transparente o sólido. */
.main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 2px;
	border-radius: 2px;
	background: var(--scr-grad);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s var(--scr-ease);
}
.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .menu-item.current-menu-item > .menu-link::after,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link::after {
	transform: scaleX(1);
}

/* Quita el recuadro de fondo del hover (look más limpio y moderno) */
.main-header-menu .menu-item > .menu-link:hover,
.main-header-menu .menu-item.current-menu-item > .menu-link {
	background: transparent !important;
}

/* Flechita del submenú con micro-rotación al abrir */
.main-header-menu .menu-item-has-children > .menu-link .ast-header-navigation-arrow,
.main-header-menu .ast-menu-toggle {
	transition: transform .3s var(--scr-ease);
}
.main-header-menu .menu-item-has-children:hover > .menu-link .ast-header-navigation-arrow {
	transform: rotate(180deg);
}

/* ---------- Submenú "Servicios": tarjeta flotante pulida ---------- */
.main-header-menu .sub-menu {
	border-radius: 12px !important;
	box-shadow: var(--scr-shadow-lg) !important;
	border: 1px solid rgba(5, 3, 36, .06) !important;
	padding: 8px !important;
	overflow: hidden;
	background: #fff !important;
}
.main-header-menu .sub-menu .menu-link {
	border-radius: 8px;
	margin: 2px 0;
	transition: background .2s ease, color .2s ease, padding-left .2s var(--scr-ease);
}
.main-header-menu .sub-menu .menu-item > .menu-link:hover,
.main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link {
	background: rgba(2, 143, 207, .08) !important;
	color: var(--scr-blue) !important;
	padding-left: 22px !important;
}

/* Aparición suave del submenú */
@media (min-width: 922px) {
	.main-header-menu .sub-menu {
		transform: translateY(8px);
		transition: opacity .25s ease, transform .25s var(--scr-ease), visibility .25s;
	}
	.main-header-menu .menu-item-has-children:hover > .sub-menu {
		transform: translateY(0);
	}
}