/* ==========================================================================
   Escalautos — capa de marca sobre SaaSKing
   Tipografía: Orbitron (títulos, en mayúsculas) + TT Firs Neue (texto).
   Color principal: #00e688.
   Se carga después de escalautos-colores.css (colores de las demos → morado).
   ========================================================================== */

/* ---------- Fuentes ---------- */
@font-face {
	font-family: "Orbitron";
	src: url("https://escalautos.com/wp-content/themes/saasking-child/assets/css/../fonts/orbitron-var.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TT Firs Neue";
	src: url("https://escalautos.com/wp-content/themes/saasking-child/assets/css/../fonts/tt-firs-neue-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	/* Color de marca */
	--ea-primary: #00e688;
	--ea-primary-600: #0db36e;   /* hover / pulsado */
	--ea-primary-400: #11fa9a;
	--ea-primary-300: #23ffa5;   /* acento claro sobre fondo oscuro */
	--ea-primary-100: #f3fcf8;   /* fondos suaves sobre claro */
	--ea-ink: #1b1b1b;           /* texto del logo */
	--ea-night: #02170e;         /* fondo oscuro de marca */
	--ea-gradient: linear-gradient(92deg, #4bffb3 0%, #11fa9a 50%, #00e688 100%);

	/* Familias */
	--ea-font-display: "Orbitron", "Eurostile", "Arial Black", system-ui, sans-serif;
	--ea-font-text: "TT Firs Neue", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Escala fluida: 360 px → 1320 px de ancho */
	--ea-fs-display: clamp(1.75rem, 1.1rem + 2.9vw, 3.5rem);        /* 28 → 56 px  hero */
	--ea-fs-h1:      clamp(1.625rem, 1.05rem + 2.4vw, 3rem);        /* 26 → 48 px  título de página */
	--ea-fs-h2:      clamp(1.375rem, 0.95rem + 1.9vw, 2.5rem);      /* 22 → 40 px  título de sección */
	--ea-fs-eyebrow: clamp(0.6875rem, 0.64rem + 0.2vw, 0.8125rem);  /* 11 → 13 px  etiqueta */
	--ea-fs-lead:    clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);        /* 16 → 19 px  bajada */
	--ea-fs-body:    clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);      /* 16 → 17 px  texto */

	/* Variables del tema → marca */
	--sk-font-1: var(--ea-font-text);
	--sk-font-2: var(--ea-font-text);
	--sk-clr-pr-1: #00e688;
	--sk-clr-pr-2: #00e688;
	--sk-clr-pr-3: #00e688;
	--sk-clr-pr-4: #00e688;
	--sk-clr-pr-5: #00e688;
	--sk-clr-pr-6: #00e688;
	--sk-clr-pr-7: #3bfbac;
	--sk-clr-sd-1: #23ffa5;
	--sk-clr-sd-4: #0db36e;
	--sk-clr-sd-5: #11fa9a;
	--sk-clr-gd-1: var(--ea-gradient);
	--sk-clr-gd-8: var(--ea-gradient);

	/* Elementor (widgets nativos) */
	--e-global-typography-primary-font-family: "Orbitron";
	--e-global-typography-text-font-family: "TT Firs Neue";
}

/* ---------- Base ---------- */
body {
	font-family: var(--ea-font-text);
	font-size: var(--ea-fs-body);
	line-height: 1.6;
	font-feature-settings: normal;
}
::selection { background-color: var(--ea-primary); color: #fff; }
::-moz-selection { background-color: var(--ea-primary); color: #fff; }

input, textarea, select, button { font-family: var(--ea-font-text); }

/* ---------- Títulos de display: Orbitron en mayúsculas ----------
   Especificidad (0,2,2): gana a las reglas del tema y cede ante lo que se
   ajuste a mano en un widget de Elementor. */
html body :is(.tx-title, [class*="sk-sec-title"], .sk-breadcrumb-title, h1, h2, .elementor-widget-heading h2.elementor-heading-title) {
	font-family: var(--ea-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	line-height: 1.14;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: manual;
}

/* Título de sección (solo contenido de página: headers y footers del tema son
   documentos "wp-post" y conservan sus tamaños, p. ej. la marca de agua del footer) */
html body :is(.tx-title, [class*="sk-sec-title"], h2):not([data-elementor-type="wp-post"] *) {
	font-size: var(--ea-fs-h2);
}

/* Título de página (h1 que no es hero, cabecera de páginas internas) */
html body :is(h1:not(.tx-title), .sk-breadcrumb-title) {
	font-size: var(--ea-fs-h1);
}

/* Hero: el título más grande de la página */
html body .tx-title[class*="hero"],
html body [class*="-hero-"] h1.tx-title {
	font-size: var(--ea-fs-display);
	line-height: 1.1;
	letter-spacing: 0.01em;
}

/* Etiquetas sobre los títulos ("Servicios", "Precios"...) */
html body .tx-sub {
	font-family: var(--ea-font-display);
	font-size: var(--ea-fs-eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* Títulos de tarjeta: TT Firs Neue, legibles en tamaño chico */
html body :is(h3, h4, h5, h6):not(.tx-title, .sk-breadcrumb-title) {
	font-family: var(--ea-font-text);
	font-weight: 600;
	text-transform: none;
	letter-spacing: -0.005em;
}

/* Bajadas y párrafos de sección */
html body .tx-description {
	font-family: var(--ea-font-text);
	line-height: 1.6;
	letter-spacing: 0;
}
html body [class*="hero"] .tx-description,
html body .tx-description[class*="hero"] {
	font-size: var(--ea-fs-lead);
}

/* Botones */
html body :is(.tx-button, [class*="-btn-"], .elementor-button, button, input[type="submit"]) {
	font-family: var(--ea-font-text);
	font-weight: 600;
	letter-spacing: 0;
}

/* Cifras y precios: Orbitron les da el tono de tablero */
html body :is(.odometer, [class*="count-number"], [class*="price-number"], [class*="-price"] .price, .woocommerce-Price-amount) {
	font-family: var(--ea-font-display);
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Marca de agua "Escalautos" en footers 4 y 6: tiene 10 letras contra las 8 de
   "Saasking", así que se reduce para ocupar el mismo ancho. */
html body .sk-footer-4-big-title {
	font-size: min(220px, 15vw);
}
/* La animación de letras (wa_split_2) arranca con "top 80%": el título debe poder
   subir por encima del 80 % de la pantalla aunque esté al final de la página. */
html body .sk-footer-4-big-title-wrap {
	padding-bottom: max(24px, calc(21vh - min(220px, 15vw)));
}
html body .sk-footer-6-big-title-text {
	font-size: clamp(44px, 10vw, 140px);
}
/* Footer 3: en Orbitron "ESCALAUTOS" mide 8,25 veces el tamaño de letra; a 400px se partía en
   dos líneas y el recorte dejaba ver solo "ESCAL". Se ajusta al ancho y en una sola línea. */
html body .sk-footer-3-big-title {
	font-size: 11.4vw;
	white-space: nowrap;
	letter-spacing: 0.01em;
}
html body .sk-footer-3-big-title-overflow {
	height: calc(11.4vw * 0.92);
	margin-top: 0;
	/* Igual que en el footer 4: recorrido para que el título llegue al 80 % de la pantalla. */
	margin-bottom: max(24px, calc(21vh - 11.4vw * 0.92));
}

/* Palabras largas en celular: nunca desbordar el contenedor */
@media (max-width: 767px) {
	html body :is(.tx-title, [class*="sk-sec-title"], h1, h2) {
		letter-spacing: 0;
		text-wrap: pretty;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wa_title_spilt_1 * { transition: none !important; animation: none !important; }
}