/* ==========================================================================
   Escalautos — dark mode en todo el sitio
   Fondo oscuro global y adaptación de las secciones que vienen de demos claras.
   ========================================================================== */

/*
 * Fondo del sitio (decisiones del 2026-09-13: opción B «luces + rejilla» y luego «más rejilla y degradé»):
 *  - <html> (el lienzo): color de noche, la rejilla del tema en los primeros ~1000 px con un velo que
 *    la desvanece, y resplandores morado, magenta y azul violeta que se repiten cada 1600 px.
 *  - body::before: la misma rejilla por toda la página, visible solo en «pozos» alrededor de los
 *    resplandores (máscara radial), así no compite con las fotos.
 *  - Las secciones planas de la plantilla (sk-features-4/5) llevan la textura dentro de su propio fondo.
 * Todo es CSS + una imagen de 514 px (assets/img/fondos/rejilla.webp).
 * Cada resplandor tiene que desvanecerse DENTRO de su tramo de 1600 px (centro ± 70 % del radio): si no, el
 * borde del tramo lo corta con una línea recta que se repite por toda la página (pasaba con el azul al 86 %,
 * que llegaba hasta 1768 px; se subió al 74 % → 1576 px).
 */
html {
	background-color: var(--ea-fondo); /* tokens: en claro el lienzo es blanco y los resplandores casi no se ven */
	background-image:
		radial-gradient(700px 540px at 6% 28%, var(--ea-brillo), transparent 70%),
		radial-gradient(640px 500px at 94% 52%, var(--ea-brillo-2), transparent 70%),
		radial-gradient(760px 560px at 28% 74%, var(--ea-brillo-3), transparent 70%),
		linear-gradient(180deg, transparent 0, var(--ea-fondo) 1028px),
		url("https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/fondos/rejilla.webp"),
		url("https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/fondos/rejilla.webp");
	background-size: 100% 1600px, 100% 1600px, 100% 1600px, 100% 1028px, 514px 514px, 514px 514px;
	background-position: 0 0, 0 0, 0 0, 0 0, center 0, center 514px;
	background-repeat: repeat-y, repeat-y, repeat-y, no-repeat, repeat-x, repeat-x;
}
body { position: relative; background-color: transparent; }
body::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/fondos/rejilla.webp") center 0 / 514px repeat;
	-webkit-mask-image: radial-gradient(620px 520px at 10% 30%, #000 0%, transparent 70%), radial-gradient(680px 560px at 90% 74%, #000 0%, transparent 70%);
	mask-image: radial-gradient(620px 520px at 10% 30%, #000 0%, transparent 70%), radial-gradient(680px 560px at 90% 74%, #000 0%, transparent 70%);
	-webkit-mask-size: 100% 1600px;
	mask-size: 100% 1600px;
	-webkit-mask-repeat: repeat-y;
	mask-repeat: repeat-y;
	pointer-events: none;
}
/* Secciones planas de la plantilla: la textura va dentro de su fondo (conservan color y bordes). */
.sk-features-5-area,
.sk-features-4-area {
	background-image:
		radial-gradient(640px 520px at 8% 18%, rgba(0, 230, 136, 0.2), rgba(0, 230, 136, 0) 70%),
		radial-gradient(700px 560px at 94% 55%, rgba(24, 226, 121, 0.14), rgba(24, 226, 121, 0) 70%),
		radial-gradient(640px 500px at 20% 92%, rgba(33, 175, 140, 0.1), rgba(33, 175, 140, 0) 70%),
		linear-gradient(180deg, rgba(3, 33, 20, 0.55), rgba(3, 33, 20, 0.8)),
		url("https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/fondos/rejilla.webp");
	background-size: 100% 1400px, 100% 1400px, 100% 1400px, 100% 100%, 514px 514px;
	background-position: 0 0, 0 0, 0 0, 0 0, center 0;
	background-repeat: repeat-y, repeat-y, repeat-y, no-repeat, repeat;
}
body { color: var(--ea-texto-2); }

/* Logos de marcas y aliados: blanco uniforme sobre fondo oscuro */
.ea-logos-blancos img { filter: brightness(0) invert(var(--ea-logo-invertir)); opacity: .82; transition: opacity .2s; }
.ea-logos-blancos img:hover { opacity: 1; }

/* Los contenedores de íconos del tema esperaban SVG pequeños; los logos (PNG) se ajustan sin deformarse */
html body .sk-benefits-6-right-shape-icon .shape-icon img { width: 46px; height: 46px; object-fit: contain; }
html body .sk-apps-6-logo-1 .single-logo img,
html body .sk-apps-6-logo-2 .single-logo img { object-fit: contain; padding: 16px; }
html body .sk-hero-3-apps img { object-fit: contain; }

/* Tokens de texto para las secciones adaptadas */
:root {
	--ea-txt: #ffffff;
	--ea-txt-2: rgba(255, 255, 255, .72);
	--ea-card: rgba(255, 255, 255, .04);
	--ea-line: rgba(255, 255, 255, .1);
}

/* ---------- Encabezado de sección (tx_heading style_8, viene de demo clara) ---------- */
html body .tx-heading-section .sk-breadcrumb-title { color: var(--ea-txt); }
html body .tx-heading-section .sk-breadcrumb-disc { color: var(--ea-txt-2); }
html body .elementor-widget-tx_heading .tx-heading-section { text-align: center; }

/* ---------- Galería de instalaciones (tx_gallery) ---------- */
/* Avatares de quienes dejaron reseña (los mismos del hero de Nosotros), en oscuro. Antes se ocultaban (eran los de la
   demo) y quedaba una cápsula vacía de 4 px que se veía como un punto suelto junto a «+711 reseñas». */
html body .sk-gallery-1-author .sk-hero-6-author { padding: 3px; background: var(--ea-card); border: 1px solid var(--ea-line); border-radius: 999px; -webkit-mask: none; mask: none; }
html body .sk-gallery-1-author .sk-hero-6-author::after { display: none; }
html body .sk-gallery-1-author .sk-hero-6-author-bg { display: inline-flex; padding: 0; background: none !important; }
html body .sk-gallery-1-author .sk-hero-6-author-bg .single-img { width: 40px; height: 40px; border: 2px solid #032417; }
html body .sk-gallery-1-author-content,
html body .sk-gallery-1-author-content * { color: var(--ea-txt); }
html body .sk-gallery-1-author-content .disc { color: var(--ea-txt-2); }

/* ---------- Tarjetas de prensa / blog (tx_post_grid style_1) ---------- */
html body .sk-blog-5-area { background: transparent !important; }
html body .sk-blog-5-area :is(.tx-title, h3, h4, h5, .title, .title a) { color: var(--ea-txt); }
html body .sk-blog-5-area :is(p, .disc, .sk-p-5) { color: var(--ea-txt-2); }
html body .sk-blog-5-area [class*="-meta"] :is(a, span, li) { color: var(--ea-txt-2); border-color: var(--ea-line); background-color: var(--ea-card); }
html body .sk-blog-5-area [class*="-item"],
html body .sk-blog-5-area [class*="-card"] { background-color: transparent; }
html body .sk-blog-5-area img { border-radius: 16px; }

/* ---------- Tabla comparativa (tx_pricing_section style_6) ---------- */
html body .sk-price-compare-area .tx-title,
html body .sk-price-compare-title .tx-title { color: var(--ea-txt); }
html body .sk-price-compare-area .sk-p-7 { color: var(--ea-txt-2); }
html body .sk-price-compare-table .pricing-table__table { background: var(--ea-card); border: 1px solid var(--ea-line); border-collapse: separate; border-spacing: 0; overflow: hidden; }
html body .sk-price-compare-table .pricing-table__table thead { background: rgba(0, 230, 136, .18); }
html body .sk-price-compare-table .pricing-table__table thead th { color: var(--ea-txt); border-right-color: var(--ea-line) !important; font-family: var(--ea-font-text); font-weight: 600; }
html body .sk-price-compare-table .pricing-table__table thead th:nth-child(2) { color: var(--ea-primary-300); }
html body .sk-price-compare-table .pricing-table__table tbody tr,
html body .sk-price-compare-table .pricing-table__table tbody tr:nth-child(even) { background-color: transparent; }
html body .sk-price-compare-table .pricing-table__table tbody tr:nth-child(odd) { background-color: rgba(255, 255, 255, .025); }
html body .sk-price-compare-table .pricing-table__table td { color: var(--ea-txt-2); border-color: var(--ea-line) !important; }
html body .sk-price-compare-table .pricing-table__table td:first-child { color: var(--ea-txt); font-weight: 500; }
html body .sk-price-compare-table .pricing-table__table td:nth-child(2) { background: rgba(0, 230, 136, .08); }

/* ---------- Preguntas con lateral (tx_faq style_4) ---------- */
html body .sk-faqs-4-area :is(.tx-title, .sk-sec-title-4) { color: var(--ea-txt); }
html body .sk-faqs-4-area .sk-p-4,
html body .sk-faqs-4-content .disc { color: var(--ea-txt-2); }
html body .sk-faqs-4-content .subtitle { color: var(--ea-txt); }
html body .sk-faqs-4-content { background: var(--ea-card); border: 1px solid var(--ea-line); }
html body .sk-faqs-4-content .bg-icon { color: rgba(255, 255, 255, .05); }
html body .sk-faqs-4-accordion .sk-accordion-1-item,
html body .sk-faqs-4-accordion .sk-accordion-1-item:is(.active) { background: var(--ea-card); border: 1px solid var(--ea-line); }
html body .sk-faqs-4-accordion .sk-accordion-1-item .item-title,
html body .sk-faqs-4-accordion .sk-accordion-1-item:is(.active) .item-title,
html body .sk-faqs-4-accordion .sk-accordion-1-item .item-title:is(:not(.collapsed)) { color: var(--ea-txt); }
html body .sk-faqs-4-accordion .sk-accordion-1-item .item-title .icon { background: rgba(255, 255, 255, .08); color: var(--ea-txt-2); }
html body .sk-faqs-4-accordion .sk-accordion-1-item .item-disc { color: var(--ea-txt-2); }

/* ---------- Beneficios: 8 tarjetas en 4 × 2 en escritorio ---------- */
@media (min-width: 1200px) {
	html body .ea-beneficios .sk-benefits-1-wrap { grid-template-columns: repeat(4, 1fr); }
}
html body .sk-price-compare-table .pricing-table__table tbody :is(th, .features, .features *) { color: var(--ea-txt) !important; font-weight: 500; }
html body .sk-price-compare-area [class*="sk-subtitle"],
html body .sk-price-compare-area [class*="sk-subtitle"] * { color: var(--ea-txt); }