/*
 * Modo claro · ajustes a mano (2026-10-05). Se carga después de escalautos-claro.css (la hoja GENERADA por
 * tools/generar-claro.py). Aquí va lo que el generador no puede deducir: el interruptor, el logo, las texturas
 * oscuras que la plantilla pega como imagen de fondo, y los blancos que son «texto sobre morado» y no «texto sobre
 * noche». Todo bajo html[data-theme="light"] salvo el interruptor, que vive en los dos modos y usa tokens.
 */

/* ---------- El interruptor sol / luna (como el del CRM) ---------- */
.ea-tema {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 2px;
	height: 36px;
	padding: 3px;
	border: 1px solid var(--ea-linea-2);
	border-radius: 999px;
	background: var(--ea-vidrio);
	color: var(--ea-texto-2);
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}
.ea-tema:hover,
.ea-tema:focus-visible {
	border-color: var(--ea-acento-borde);
	outline: none;
}
.ea-tema:focus-visible {
	box-shadow: 0 0 0 3px var(--ea-acento-suave);
}
.ea-tema > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--ea-texto-3);
	transition: background-color 0.2s, color 0.2s;
}
.ea-tema svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* El modo ACTIVO lleva el círculo lleno: en oscuro la luna, en claro el sol. */
.ea-tema > .ea-tema__luna { /* «.ea-tema > span» pesa más que «.ea-tema__luna» sola: la luna salía blanca sobre blanco */
	background: var(--ea-texto);
	color: var(--ea-texto-inverso);
}
html[data-theme="light"] .ea-tema__luna {
	background: none;
	color: var(--ea-texto-2);
}
html[data-theme="light"] .ea-tema__sol {
	background: var(--ea-acento);
	color: var(--ea-sobre-acento);
}
.ea-tema--grande {
	height: 44px;
}
.ea-tema--grande > span {
	width: 36px;
	height: 36px;
}
.ea-tema--grande svg {
	width: 19px;
	height: 19px;
}
.ea-tema-lateral {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0 8px;
	color: var(--ea-texto-2);
	font-size: 15px;
}
@media (max-width: 1199px) {
	.ea-tema {
		height: 34px;
	}
	.ea-tema > span {
		width: 26px;
		height: 26px;
	}
}
/* Fijo a la izquierda, vertical, a media pantalla (Estiven, 2026-10-06; v2 más grande, con nombres y globo). Por
   encima del contenido y por debajo del mega menú, del menú lateral y del chat. */
.ea-tema-fijo {
	position: fixed;
	left: 18px;
	top: 50%;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transform: translateY(-50%);
	transition: opacity 0.2s;
}
.ea-tema.ea-tema--vertical {
	position: relative;
	flex-direction: column;
	width: 64px;
	height: auto;
	padding: 5px;
	gap: 4px;
	border: 1px solid var(--ea-acento-borde);
	border-radius: 20px;
	background: var(--ea-superficie-2);
	box-shadow: var(--ea-sombra), 0 0 0 4px var(--ea-vidrio);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.ea-tema--vertical > span {
	flex-direction: column;
	gap: 3px;
	width: 52px;
	height: 56px;
	border-radius: 15px;
}
.ea-tema--vertical svg {
	width: 22px;
	height: 22px;
}
/* El modo inactivo, con el texto secundario (el terciario daba 4,4:1 en las páginas de servicio). */
.ea-tema--vertical > span {
	color: var(--ea-texto-2);
}
.ea-tema--vertical small {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	color: inherit;
}
/* Sólo el modo que NO está activo se ilumina al pasar el mouse (invita a probarlo); el activo no cambia. */
html:not([data-theme="light"]) .ea-tema.ea-tema--vertical > .ea-tema__sol:hover,
html[data-theme="light"] .ea-tema.ea-tema--vertical > .ea-tema__luna:hover,
.ea-tema.ea-rec-lanzar:hover > span {
	background: var(--ea-acento-suave);
	color: var(--ea-acento-texto);
}
/* Debajo, el botón del recorrido de lanzamiento (inc/recorrido.php): la misma pastilla con un solo ícono y su globo
   «Ver el recorrido». Mientras el recorrido está en curso no se ve (el interruptor sí: es el primer paso). */
.ea-rec-lanzar small {
	letter-spacing: -0.02em; /* «Recorrido» cabe justo en los 52 px */
}
html.ea-recorriendo .ea-rec-lanzar {
	visibility: hidden;
	opacity: 0;
}
/* El globo: dice qué hace el clic («Cambiar a modo claro»). El texto sale del aria-label que tema.js mantiene al día. */
.ea-tema--vertical::after,
.ea-tema--vertical::before {
	position: absolute;
	left: calc(100% + 12px);
	top: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s, transform 0.15s;
}
.ea-tema--vertical::after {
	content: attr(aria-label);
	transform: translate(-4px, -50%);
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--ea-acento);
	color: var(--ea-sobre-acento);
	font: 600 13px/1.2 var(--ea-font-text, inherit);
	white-space: nowrap;
	box-shadow: 0 10px 24px rgba(0, 230, 136, 0.3);
}
.ea-tema--vertical::before {
	content: "";
	left: calc(100% + 7px);
	width: 10px;
	height: 10px;
	background: var(--ea-acento);
	transform: translate(-4px, -50%) rotate(45deg);
}
.ea-tema--vertical:hover::after,
.ea-tema--vertical:focus-visible::after,
.ea-tema-fijo.is-presentando [data-ea-tema]::after {
	opacity: 1;
	transform: translate(0, -50%);
}
.ea-tema--vertical:hover::before,
.ea-tema--vertical:focus-visible::before,
.ea-tema-fijo.is-presentando [data-ea-tema]::before {
	opacity: 1;
	transform: translate(0, -50%) rotate(45deg);
}
/* Primera visita: un latido suave del borde mientras se muestra el globo (sólo el interruptor). */
.ea-tema-fijo.is-presentando [data-ea-tema] {
	animation: ea-tema-latido 1.6s ease-in-out 3;
}
@keyframes ea-tema-latido {
	0%, 100% { box-shadow: var(--ea-sombra), 0 0 0 4px var(--ea-vidrio); }
	50% { box-shadow: var(--ea-sombra), 0 0 0 8px var(--ea-acento-suave); }
}
@media (prefers-reduced-motion: reduce) {
	.ea-tema-fijo.is-presentando [data-ea-tema] { animation: none; }
}
/* Con el menú lateral o el mega menú abiertos no estorba. */
body:has(.wa-offcanvas-area.active) .ea-tema-fijo,
html.ea-mm-abierto .ea-tema-fijo {
	opacity: 0;
	pointer-events: none;
}
@media (max-width: 767px) {
	/* En celular, un botón redondo chico abajo a la izquierda, encima de la barra de acciones (Estiven, 2026-10-30):
	   la pestaña a media pantalla tapaba el borde de títulos y textos. Muestra sólo el modo al que cambia (el sol en
	   oscuro, la luna en claro) y nunca el globo «Cambiar a modo…». */
	.ea-tema-fijo {
		left: 12px;
		top: auto;
		bottom: calc(86px + env(safe-area-inset-bottom, 0px));
		flex-direction: column-reverse; /* el del recorrido, encima: el del modo no se mueve */
		transform: none;
	}
	.ea-tema.ea-tema--vertical {
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		box-shadow: var(--ea-sombra-2);
	}
	.ea-tema--vertical > span {
		width: 42px;
		height: 42px;
		border-radius: 50%;
		color: var(--ea-acento-texto);
	}
	html:not([data-theme="light"]) .ea-tema.ea-tema--vertical > .ea-tema__luna,
	html[data-theme="light"] .ea-tema.ea-tema--vertical > .ea-tema__sol {
		display: none;
	}
	.ea-tema--vertical svg {
		width: 20px;
		height: 20px;
	}
	.ea-tema--vertical small {
		display: none;
	}
	.ea-tema--vertical:hover::after,
	.ea-tema--vertical:hover::before,
	.ea-tema-fijo.is-presentando [data-ea-tema]::after,
	.ea-tema-fijo.is-presentando [data-ea-tema]::before {
		opacity: 0;
	}
}
@media print {
	.ea-tema-fijo {
		display: none;
	}
}


/* ---------- El logo: oscuro sobre claro ---------- */
html[data-theme="light"] img[src*="escalautos-logo-blanco"] {
	content: url("https://escalautos.com/wp-content/uploads/ea-tono/svg/escalautos-logo-oscuro-288d420cf28b.svg");
}
html[data-theme="light"] .ea-ft-logo-xl {
	opacity: 0.35;
}

/* ---------- Texturas oscuras que la plantilla pega como imagen de fondo (data-background) ---------- */
html[data-theme="light"] [data-background*="p7-card-bg"],
html[data-theme="light"] [data-background*="ea-resenas-fondo"],
html[data-theme="light"] [data-background*="f4-bg-img"],
html[data-theme="light"] [data-background*="h3-bg-shape"],
html[data-theme="light"] [data-background*="cta2-bg-line"],
html[data-theme="light"] [data-background*="c6-form-bg"],
html[data-theme="light"] [data-background*="p5-card-bg"],
html[data-theme="light"] [data-background*="c5-card-bg"],
html[data-theme="light"] [data-background*="c6-card-bg"] {
	background-image: none !important;
}

/* ---------- Blancos que son «texto sobre morado» (el generador los pasó a tinta) ---------- */
html[data-theme="light"] .sk-pr-btn-1 .text,
html[data-theme="light"] .sk-pr-btn-2 .text,
html[data-theme="light"] .sk-pr-btn-4 .text,
html[data-theme="light"] .sk-pr-btn-5 .text,
html[data-theme="light"] .sk-pr-btn-7 .text,
html[data-theme="light"] .sk-pr-btn-8 .text,
html[data-theme="light"] .sk-pr-btn-12 .text,
html[data-theme="light"] .sk-pr-btn-13.tx-button .text,
html[data-theme="light"] .sk-pr-btn-14 .text,
html[data-theme="light"] .tx-button_2 .text,
html[data-theme="light"] .ea-btn--primario,
html[data-theme="light"] .ea-tarjeta-btn span,
html[data-theme="light"] .ea-vcard-360,
html[data-theme="light"] .sk-hero-5-rating .icon-elm,
html[data-theme="light"] .ea-wa-float,
html[data-theme="light"] .ea-wa-float span,
html[data-theme="light"] .ea-cookies__btn--si,
html[data-theme="light"] .ea-mobile-bar a.is-wa,
html[data-theme="light"] .ea-club-btn:hover,
html[data-theme="light"] .ea-club-lateral__i,
html[data-theme="light"] .ea-ft-canal-ico {
	color: #ffffff;
}
/* Botones de contorno (sin relleno): en claro el borde y el texto son tinta, y el círculo de la flecha, morado. */
html[data-theme="light"] .sk-pr-btn-13.has-border {
	color: var(--ea-texto);
	border-color: var(--ea-linea-2);
}
html[data-theme="light"] .sk-pr-btn-13.has-border .text,
html[data-theme="light"] .sk-pr-btn-13.has-border .text::before,
html[data-theme="light"] .sk-pr-btn-13.has-border .text::after {
	color: var(--ea-texto);
}
/* Los botones con degradé oscuro de la plantilla (formularios, reseñas): en claro, morado de marca. */
html[data-theme="light"] .sk-pr-btn-6,
html[data-theme="light"] .sk-pr-btn-9,
html[data-theme="light"] .sk-pr-btn-11::after,
html[data-theme="light"] .sk-testimonial-btn::after {
	background: var(--ea-acento) !important;
}
html[data-theme="light"] .sk-pr-btn-11,
html[data-theme="light"] .sk-pr-btn-11 .text,
html[data-theme="light"] .sk-testimonial-btn,
html[data-theme="light"] .sk-testimonial-btn .text,
html[data-theme="light"] .sk-testimonial-btn .text::before,
html[data-theme="light"] .sk-testimonial-btn .text::after {
	color: #ffffff;
}
html[data-theme="light"] .sk-pr-btn-6 .text,
html[data-theme="light"] .sk-pr-btn-9 .text,
html[data-theme="light"] .sk-pr-btn-6 .text::before,
html[data-theme="light"] .sk-pr-btn-6 .text::after,
html[data-theme="light"] .sk-hero-5-area .icon-elm {
	color: #ffffff;
}
/* Formularios: etiquetas, consentimientos y enlaces */
html[data-theme="light"] .wpcf7 label,
html[data-theme="light"] .wpcf7-list-item-label,
html[data-theme="light"] .ea-form .ea-consent {
	color: var(--ea-texto-2);
}
html[data-theme="light"] .wpcf7 a,
html[data-theme="light"] .ea-form .ea-consent a {
	color: var(--ea-acento-texto);
}
html[data-theme="light"] .sk-pr-btn-13 .icon {
	background: var(--ea-acento);
	color: #ffffff;
}
html[data-theme="light"] .sk-pr-btn-13.tx-button .icon {
	background: #ffffff;
	color: var(--ea-acento);
}
html[data-theme="light"] .ea-mm-cta--linea,
html[data-theme="light"] .ea-vcard-btn--ver,
html[data-theme="light"] .ea-cookies__btn:not(.ea-cookies__btn--si) {
	color: var(--ea-texto) !important;
	border-color: var(--ea-linea-2);
}
/* Verde de WhatsApp como texto: el verde neón no se lee sobre blanco. */
html[data-theme="light"] .ea-vcard-btn--wa,
html[data-theme="light"] .ea-ft-canal.is-wa .ea-ft-canal-cta,
html[data-theme="light"] .ea-chat-extra__wa {
	color: #0b7a52 !important;
}

/* ---------- Secciones que la plantilla trae con fondo propio ---------- */
html[data-theme="light"] .sk-testimonial-6-area,
html[data-theme="light"] .sk-testimonial-6-wrap {
	background-color: transparent !important;
}
html[data-theme="light"] .sk-testimonial-6-area .sk-sec-title-6,
html[data-theme="light"] .sk-testimonial-6-area .sk-h-6 {
	color: var(--ea-texto);
}
/* El héroe con video: su fondo morado oscuro era «decisión del usuario»; en claro va lila suave. */
html[data-theme="light"] .sk-hero-5-area {
	background-color: var(--ea-superficie) !important;
}
/* El menú desplegable y el lateral del celular: superficie elevada con sombra suave. */
html[data-theme="light"] .ea-mm {
	background: var(--ea-superficie-2);
	box-shadow: 0 34px 80px rgba(13, 84, 54, 0.16), 0 6px 18px rgba(13, 84, 54, 0.07);
	border-color: var(--ea-linea-acento);
}
/* Filas y marcas al pasar el mouse: un velo del color del submenú (en oscuro es un 75 % que en claro tapaba el texto). */
html[data-theme="light"] .ea-mm a.ea-mm-fila:hover,
html[data-theme="light"] .ea-mm-marcas a:hover {
	background-image: linear-gradient(90deg, color-mix(in srgb, var(--c) 12%, transparent), transparent);
}
html[data-theme="light"] .ea-mm a.ea-mm-fila:hover b,
html[data-theme="light"] .ea-mm a.ea-mm-fila:hover > .ea-mm-i {
	color: var(--ea-texto);
}
/* Pastilla y círculos de pasos: el número y el rótulo en el color del submenú, oscurecido para que lea sobre blanco. */
html[data-theme="light"] :is(.ea-mm-pildora, .ea-mm-pasos i, .ea-mmm-paso i) {
	color: color-mix(in srgb, var(--c) 70%, #1b1b1b);
}
html[data-theme="light"] .wa-offcanvas-area {
	background: var(--ea-superficie-2) !important;
}
/* La barra del menú: vidrio sobre blanco */
html[data-theme="light"] .sk-header-1-menu {
	background: rgba(255, 255, 255, 0.72);
	border-color: var(--ea-linea);
}
html[data-theme="light"] .sk-main-navigation .navbar-nav li > a {
	color: var(--ea-texto);
}
/* La pantalla de carga en claro es clara (con la esfera morada). Antes este fondo era de noche y la capa clara de
   encima entraba con un fundido: en claro se veía un destello oscuro al empezar (2026-10-14). */
html[data-theme="light"] .ea-carga {
	background: var(--ea-fondo, #ffffff);
	color: var(--ea-texto, #1b1b1b);
}

/* ---------- Portada ---------- */
/* La franja de arriba del héroe (venía del negro de la plantilla): del color del héroe, que no se note. */
html[data-theme="light"] .sk-hero-5-top {
	background: transparent;
}
/* La celda del centro (la pastilla «+711») tapaba las líneas con un rectángulo del color de la noche; en claro ese
   rectángulo se veía blanco sobre el resplandor. Sin fondo: las líneas se cortan con los degradés de abajo. */
html[data-theme="light"] .sk-hero-5-top .col-elm:is(.has-center) {
	background-color: transparent;
}
html[data-theme="light"] .sk-hero-5-top-line-1::after,
html[data-theme="light"] .sk-hero-5-top-line-2::after {
	background: linear-gradient(to right, rgba(0, 230, 136, 0) 0%, rgba(0, 230, 136, 0.35) 50%, rgba(0, 230, 136, 0) 100%);
}
/* El botón de contorno del héroe (sk-pr-btn-8): tinta, no blanco. */
html[data-theme="light"] .sk-pr-btn-8.has-border,
html[data-theme="light"] .sk-pr-btn-8.has-border .text,
html[data-theme="light"] .sk-pr-btn-8.has-border .text::before,
html[data-theme="light"] .sk-pr-btn-8.has-border .text::after {
	color: var(--ea-texto);
}
/* Reseñas: el «brillo» morado detrás de la tarjeta tapaba el texto; en claro la tarjeta es blanca con borde. */
html[data-theme="light"] .sk-testimonial-6-card::after,
html[data-theme="light"] .sk-testimonial-6-card-border::before {
	display: none;
}
html[data-theme="light"] .sk-testimonial-6-card-border {
	border-color: var(--ea-linea);
}
html[data-theme="light"] .sk-testimonial-6-card {
	background: var(--ea-superficie-2);
	box-shadow: var(--ea-sombra-2);
}
html[data-theme="light"] .sk-hero-5-rating .icon-elm,
html[data-theme="light"] .sk-hero-5-area .icon-elm {
	color: #ffffff;
}

/* ---------- Ficha del vehículo ---------- */
/* Las pastillas que van SOBRE la foto (contador, selector Fotos/360°/Interior) se quedan oscuras en los dos modos. */
html[data-theme="light"] .ea-medios-cuenta,
html[data-theme="light"] .ea-medios-sel,
html[data-theme="light"] .ea-medios-sel *,
html[data-theme="light"] .ea-giro-pista {
	color: #ffffff;
}
html[data-theme="light"] .ea-medios-cuenta,
html[data-theme="light"] .ea-medios-sel {
	background: rgba(2, 23, 14, 0.72);
}

/* ---------- Contacto: el formulario viene en una caja con color fijo en Elementor ---------- */
html[data-theme="light"] .elementor-element-b12d927 {
	background-color: var(--ea-superficie) !important;
}

/* ---------- Legales: el texto apagado del cierre ---------- */
html[data-theme="light"] .ea-cierre-legal .elementor-heading-title {
	color: var(--ea-texto-2);
}
html[data-theme="light"] .ea-legal-texto mark.ea-pc {
	background: #fff3c4;
	color: #6b4700;
}

/* ---------- Sobrantes de contraste (auditoría modo-claro.mjs, 2026-10-05) ---------- */
/* Pastillas de etiqueta con fondo morado (hero de servicios, legales): su texto va en blanco. */
html[data-theme="light"] .sk-subtitle-1-text .has-clr,
html[data-theme="light"] .sk-subtitle-5 .has-clr,
html[data-theme="light"] .ea-legal-nav-sec a.is-activa,
html[data-theme="light"] .ea-legal-nav-sec a[aria-current] {
	color: #ffffff;
}
/* Textos heredados del tema que quedaban en gris lila claro. */
html[data-theme="light"] .elementor-heading-title,
html[data-theme="light"] .elementor-widget-text-editor {
	color: var(--ea-texto-2);
}
/* Verde «WhatsApp / Cómo llegar» como enlace: más oscuro para que lea sobre claro. */
html[data-theme="light"] .ea-wa-link,
html[data-theme="light"] .ea-fsec a[href*="maps"],
html[data-theme="light"] .ea-ficha a[href*="maps"] {
	color: #0b7a52;
}

/* ---------- Reseñas: el fondo oscuro de la sección es una <img> (ea-resenas-fondo); en claro, fuera ---------- */
html[data-theme="light"] .sk-testimonial-6-bg-clr,
html[data-theme="light"] .ea-resenas .sk-testimonial-6-wrap::before,
html[data-theme="light"] .ea-resenas .sk-testimonial-6-wrap::after {
	display: none;
}
html[data-theme="light"] .ea-resenas .sk-testimonial-6-area {
	background-color: transparent !important;
}
/* Botones de contorno de la plantilla (sk-pr-btn-11, sk-testimonial-btn): el relleno (::after) se sale del botón y
   queda sólo el borde; en claro se rellenan con el acento y el texto va en blanco. */
html[data-theme="light"] .sk-pr-btn-11,
html[data-theme="light"] .sk-testimonial-btn {
	background: var(--ea-acento);
	color: #ffffff;
	overflow: hidden;
}
html[data-theme="light"] .sk-testimonial-btn {
	border-radius: 100px;
}
html[data-theme="light"] .sk-pr-btn-11::before,
html[data-theme="light"] .sk-testimonial-btn::before {
	display: none;
}
html[data-theme="light"] .sk-testimonial-btn .icon {
	background: #ffffff;
	color: var(--ea-acento);
}

/* ---------- Botones de contorno (texto en tinta) ---------- */
html[data-theme="light"] .ea-btn--secundario,
html[data-theme="light"] .sk-pr-btn-10,
html[data-theme="light"] .sk-pr-btn-10 .text,
html[data-theme="light"] .sk-pr-btn-10 .text::before,
html[data-theme="light"] .sk-pr-btn-10 .text::after {
	color: var(--ea-texto) !important;
}
html[data-theme="light"] .ea-resumen-acciones:not(:has(.ea-btn--primario)) .ea-resumen-par .ea-btn--secundario {
	color: #ffffff !important;
}
/* Su ícono también: el generador lo pasó a tinta (#1b1b1b) y quedaba negro sobre el morado. */
html[data-theme="light"] .ea-resumen-acciones:not(:has(.ea-btn--primario)) .ea-resumen-par .ea-btn--secundario .ea-i {
	color: #ffffff;
}

/* ---------- Menú del celular: los submenús (Comprar, Vender…) ----------
   El generador tomó la línea de 1 px de abajo de cada enlace por un relleno y les dejó el texto blanco: en claro no
   se veían «Ver los 105 autos», las carrocerías ni los rangos de precio. Y su fondo (más específico) le quitaba el
   color al botón principal de cada submenú. */
html[data-theme="light"] .mobile-main-navigation .ea-mmm a {
	color: var(--ea-texto) !important;
}
html[data-theme="light"] .mobile-main-navigation .ea-mmm .ea-mmm-todo {
	background: var(--c-boton, var(--c));
	color: var(--t) !important;
}
html[data-theme="light"] .mobile-main-navigation .ea-mmm .ea-mmm-todo .ea-mm-i {
	color: inherit; /* la flecha, del color del texto del botón (salía gris) */
}

/* ---------- Pestañas de Preguntas (sk-faqs-9): venían blancas sobre blanco ---------- */
html[data-theme="light"] .sk-faqs-9-wrap .sk-portfolio-5-tabs-btn .nav-link {
	background: var(--ea-superficie-2);
	color: var(--ea-texto);
	border: 1px solid var(--ea-linea);
}
html[data-theme="light"] .sk-faqs-9-wrap .sk-portfolio-5-tabs-btn .nav-link.active,
html[data-theme="light"] .sk-faqs-9-wrap .sk-portfolio-5-tabs-btn .nav-link:hover {
	background: var(--ea-acento);
	color: #ffffff;
	border-color: var(--ea-acento);
}
/* Sellos verdes de la ficha (Peritaje, Papeles al día): verde legible sobre su fondo suave */
html[data-theme="light"] .ea-resumen-sellos a,
html[data-theme="light"] .ea-vcard-btn--wa {
	color: #0b7a52 !important;
}
/* «Ver reseñas en Google» en las páginas de servicio (el tono tiñe el relleno de verde o naranja): texto en tinta */
html[data-theme="light"] .sk-testimonial-btn,
html[data-theme="light"] .sk-testimonial-btn .text,
html[data-theme="light"] .sk-testimonial-btn .text::before,
html[data-theme="light"] .sk-testimonial-btn .text::after {
	color: #ffffff;
}
/* y el relleno teñido del servicio se cambia por el acento (morado) para que el blanco lea en todos los tonos */
html[data-theme="light"] .sk-testimonial-btn,
html[data-theme="light"] .sk-testimonial-btn::after {
	background: var(--ea-acento) !important;
}

/* ---------- Lo que va SOBRE LA FOTO del auto se queda oscuro en los dos modos ---------- */
html[data-theme="light"] .ea-vcard-estado,
html[data-theme="light"] .ea-vcard-destacado,
html[data-theme="light"] .ea-vcard-nfotos,
html[data-theme="light"] .ea-vcard-360,
html[data-theme="light"] .ea-vcard-fav,
html[data-theme="light"] .ea-ficha-estado,
html[data-theme="light"] .ea-medios-cuenta,
html[data-theme="light"] .ea-medios-ampliar,
html[data-theme="light"] .ea-fotos-flecha,
html[data-theme="light"] .ea-giro-pista,
html[data-theme="light"] .ea-pano-pista,
html[data-theme="light"] .ea-mini-especial span {
	background: rgba(2, 23, 14, 0.72);
	color: #ffffff;
}
html[data-theme="light"] .ea-cierre-legal p.elementor-heading-title {
	color: var(--ea-texto-2);
}

/* ---------- Portada: franja de aliados y arco de marcas ---------- */
/* Franja de aliados: en claro, lila suave; los logos vuelven a su color (sin invertir). */
html[data-theme="light"] .sk-partner-3-left,
html[data-theme="light"] .sk-partner-3-right {
	background: linear-gradient(90deg, rgba(249, 254, 252, 0) 0%, var(--ea-superficie) 55%);
}
html[data-theme="light"] .sk-partner-3-right {
	background: linear-gradient(-90deg, rgba(249, 254, 252, 0) 0%, var(--ea-superficie) 55%);
}
/* Los logos de aliados son PNG blancos: en claro se vuelven tinta (brightness 0) en vez de invertirse. */
html[data-theme="light"] .ea-aliados img,
html[data-theme="light"] .sk-partner-3-logo img {
	filter: brightness(0);
	opacity: 0.72;
}
html[data-theme="light"] .sk-partner-3-area .sk-h-3,
html[data-theme="light"] .sk-partner-3-area .counter {
	color: var(--ea-texto);
}
/* El arco: imagen clara (lila con halo morado) en vez de la pintada de noche. */
html[data-theme="light"] .ea-arco .sk-apps-4-shape-2 img {
	content: url("https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/arco/ea-arco-claro.webp");
	width: 1248px; /* la imagen clara viene al doble para pantallas retina; se muestra al tamaño de la oscura */
	max-width: 100%;
	height: auto;
}
html[data-theme="light"] .ea-arco .sk-apps-4-content::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 53%, var(--ea-fondo) 100%);
}
html[data-theme="light"] .ea-arco .sk-apps-4-content::after {
	opacity: 0.18;
}
html[data-theme="light"] .ea-arco .sk-apps-4-logo .single-logo {
	background: none;
}

/* Pastilla «+711» del héroe (sk-subtitle-5 .icon-elm): relleno del acento, texto blanco. Va en :where() para que
   pese menos que el <style id="ea-tono-tinta"> de inc/tono.php, que la pone en tinta cuando el color del servicio es
   claro (naranja, verde, azul). */
html[data-theme="light"] :where(.sk-subtitle-5 .icon-elm, .sk-subtitle-5 .icon-elm *) {
	color: #ffffff !important;
}

/* ---------- Páginas de servicio: íconos blancos (SVG de uploads/2026/09/ea-paso-*, ea-contacto-*) ---------- */
/* Su cajita era morada oscura y en claro pasa a lila: el ícono se vuelve tinta para que no desaparezca. */
html[data-theme="light"] .sk-process-5-card .icon-elm img,
html[data-theme="light"] .sk-contact-6-info-single .icon img,
html[data-theme="light"] .ea-sede-icono img {
	filter: brightness(0) opacity(0.85);
}

/* ---------- Nosotros: la figura negra del héroe de la demo (h3-bg-shape) no va en claro ---------- */
html[data-theme="light"] .sk-hero-3-bg-shape {
	display: none;
}
/* La reseña destacada (morada) se queda morada en claro; su texto, blanco. */
html[data-theme="light"] .ea-resenas-7 .sk-testimonial-7-card:is(.has-bg-dark),
html[data-theme="light"] .ea-resenas-7 .sk-testimonial-7-card:is(.has-bg-dark) :is(.comment, .author-bio, .author-title, .quote-icon) {
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}
html[data-theme="light"] .ea-resenas-7 .sk-testimonial-7-card:is(.has-bg-dark) {
	background: linear-gradient(160deg, #0db36e 0%, #0a7d4c 100%);
}

/* ---------- Blog: las portadas se pintan de noche (tools/portadas-blog.py) ---------- */
/* En claro se cambian por su gemela sobre lila (ea-blog-<moneda>-claro.webp): mismo tamaño, misma moneda. */
/* WordPress sirve los tamaños intermedios (ea-blog-comprar-1024x683.webp), por eso el selector no exige el punto. */
html[data-theme="light"] img[src*="/ea-blog-comprar"] { content: url(https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/blog/ea-blog-comprar-claro.webp); }
html[data-theme="light"] img[src*="/ea-blog-vender"] { content: url(https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/blog/ea-blog-vender-claro.webp); }
html[data-theme="light"] img[src*="/ea-blog-financiar"] { content: url(https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/blog/ea-blog-financiar-claro.webp); }
html[data-theme="light"] img[src*="/ea-blog-tramites"] { content: url(https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/blog/ea-blog-tramites-claro.webp); }
html[data-theme="light"] img[src*="/ea-blog-seguros"] { content: url(https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/blog/ea-blog-seguros-claro.webp); }
html[data-theme="light"] img[src*="/ea-blog-spa"] { content: url(https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/blog/ea-blog-spa-claro.webp); }

/* El cierre del blog («¿Buscas auto? Te asesoramos») es una tarjeta morada en los dos modos: el texto va en blanco
   y el botón blanco con texto morado (el generador los pasó a tinta porque el fondo vive en otra regla). */
html[data-theme="light"] body .ea-cierre-blog .tx-title,
html[data-theme="light"] body .ea-cierre-blog .tx-title .has-opacity { color: var(--ea-sobre-acento); }
html[data-theme="light"] body .ea-cierre-blog .tx-description,
html[data-theme="light"] body .ea-cierre-blog .sec-disc { color: rgba(255, 255, 255, 0.85); }
html[data-theme="light"] body .ea-cierre-blog .cta-btn { background: var(--ea-sobre-acento); border-color: var(--ea-sobre-acento); color: var(--ea-acento-fuerte); }
html[data-theme="light"] body .ea-cierre-blog .cta-btn .text { color: var(--ea-acento-fuerte); }

/* ---------- Resplandor del CTA (.ea-glow, inc/secciones.php): en claro, pasteles del lila en vez de morados de noche ---------- */
/* El generador dejó los morados oscuros sobre blanco y, girados al tono del servicio, se veían café. Con los
   pasteles, el tono (inc/tono.php, regla de pasteles) los lleva al color de cada servicio sin ensuciarlos. */
html[data-theme="light"] .ea-glow::before,
html[data-theme="light"] .ea-glow--marca::before {
	background: linear-gradient(115deg, #ffffff 0%, #f3fcf8 10%, #e4f8f0 19%, #ffffff 29%, #effbf6 40%, #6bffbd 48%, #ffffff 58%, #f3fcf8 68%, #e4f8f0 78%, #5bfcba 84%, #ffffff 93%, #f3fcf8 100%);
	opacity: 1;
}

/* ---------- El isotipo va SIEMPRE blanco sobre morado, en los dos modos (Estiven, 2026-10-06) ---------- */
/* En claro se había pasado a morado sobre lila (precarga, centro del Autoverso, ficha de Escalamigos) y se perdía la
   marca. Ahora el disco o la placa del isotipo es el morado de marca y el isotipo, blanco. */
html[data-theme="light"] :is(.ea-carga__esfera, .ea-autoverso .sk-apps-3-video-elm, .sk-process-1-favicon .favicon-icon) {
	background: radial-gradient(circle at 35% 30%, #23ffa5 0%, #00e688 45%, #0a7d4c 100%);
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.45), 0 0 60px rgba(0, 230, 136, 0.4);
}
html[data-theme="light"] .ea-carga__iso {
	filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.45));
}
html[data-theme="light"] .sk-process-1-favicon .favicon-icon img {
	filter: brightness(0) invert(1);
}
/* El héroe con video antes de que cargue: morado con el isotipo blanco al centro (no blanco sobre blanco). */
html[data-theme="light"] .ea-hero-video {
	background: radial-gradient(60% 60% at 50% 45%, #16ff9c 0%, #00e688 45%, #0a7d4c 100%),
		#00e688 url(https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/escalautos-isotipo-blanco.svg) center / 110px auto no-repeat;
	background-blend-mode: normal;
}

/* ---------- Botones: morados en claro ---------- */
/* «Hablar con un asesor» (sk-pr-btn-4): el relleno de la plantilla es un degradé de noche; en claro, el morado. */
html[data-theme="light"] .sk-pr-btn-4 .btn-border-2 {
	background: var(--ea-acento);
	border-color: var(--ea-superficie-2);
}
html[data-theme="light"] .sk-pr-btn-4,
html[data-theme="light"] .sk-pr-btn-4:hover {
	color: var(--ea-sobre-acento);
}
/* «Ver auto» de las tarjetas del inventario: en oscuro es vidrio; en claro, el botón principal morado. */
html[data-theme="light"] .ea-vcard-btn--ver {
	background: var(--ea-acento);
	border-color: var(--ea-acento);
	color: var(--ea-sobre-acento) !important;
}
html[data-theme="light"] .ea-vcard-btn--ver:hover {
	background: var(--ea-acento-fuerte);
	border-color: var(--ea-acento-fuerte);
}
/* El botón de contorno del héroe: borde y texto morados (no gris). */
html[data-theme="light"] .sk-pr-btn-8.has-border {
	border-color: var(--ea-acento-borde);
}
html[data-theme="light"] .sk-pr-btn-8.has-border,
html[data-theme="light"] .sk-pr-btn-8.has-border .text,
html[data-theme="light"] .sk-pr-btn-8.has-border .text::before,
html[data-theme="light"] .sk-pr-btn-8.has-border .text::after {
	color: var(--ea-acento-fuerte);
}
/* ---------- Preguntas: el «×» de la pregunta abierta va blanco sobre su círculo morado ---------- */
html[data-theme="light"] .sk-accordion-1-item .item-title:not(.collapsed) .icon,
html[data-theme="light"] .sk-accordion-1-item .item-title:not(.collapsed) .icon i {
	color: var(--ea-sobre-acento);
}

/* ---------- «Por qué comprar con Escalautos»: el hexágono gris de la plantilla, en lila suave ---------- */
html[data-theme="light"] .sk-sec-ani-1-logo img {
	filter: sepia(1) hue-rotate(215deg) saturate(2.4) brightness(1.25);
	opacity: 0.45;
}
/* Textos pintados con el color del submenú (enlaces «Ver el auto», «Autos con cuota…», «Cotizar mi seguro», cifras):
   el verde, el naranja y el azul de los servicios no llegan a 4,5:1 sobre blanco; se oscurecen con la tinta. */
html[data-theme="light"] :is(.ea-mm-link, .ea-mm-cambio, .ea-mm-datos b, .ea-mm-serv em, .ea-mm .ea-mm-tipo--todos) {
	color: color-mix(in srgb, var(--c) 62%, #1b1b1b) !important;
}

/* Legales: el cierre (dato de contacto) traía un gris lila fijo desde Elementor. */
html[data-theme="light"] body .ea-cierre-legal p.elementor-heading-title {
	color: var(--ea-texto-2) !important;
}
/* Ficha: el «WhatsApp» verde sobre su fondo verde suave (3,2:1) → verde más oscuro. */
html[data-theme="light"] .ea-btn--wa:not(.ea-btn--wa-lleno),
html[data-theme="light"] .ea-btn--wa:not(.ea-btn--wa-lleno) span {
	color: #0b7a52 !important;
}

/* ---------- Escalamigos: las placas de íconos, moradas con el ícono blanco ---------- */
/* «Lo que tienes como Escalamigo» (sk-choose-5): en oscuro la placa es blanca; el generador la volvió casi negra. */
html[data-theme="light"] .ea-club-beneficios .sk-choose-5-card .icon-wrap {
	background-color: var(--ea-acento-suave);
}
html[data-theme="light"] .ea-club-beneficios .sk-choose-5-card .icon-elm {
	background: radial-gradient(circle at 35% 30%, #23ffa5 0%, #00e688 55%, #0f9a5e 100%);
}
html[data-theme="light"] .ea-club-beneficios .sk-choose-5-card .icon-elm img {
	filter: brightness(0) invert(1);
}
html[data-theme="light"] .ea-club-beneficios .sk-choose-5-card .icon-svg path {
	fill: rgba(0, 230, 136, 0.25);
}
/* «Así te vuelves Escalamigo» (sk-services-3): placa lila apagada con ícono blanco → placa morada. */
html[data-theme="light"] .sk-services-3-card .item-icon-elm {
	background: radial-gradient(circle at 35% 30%, #23ffa5 0%, #00e688 55%, #0f9a5e 100%);
}
html[data-theme="light"] .sk-services-3-card .item-icon-elm .bg-shape {
	display: none;
}
html[data-theme="light"] .sk-services-3-card .item-icon-elm svg path {
	fill: #ffffff;
}

/* ---------- Preguntas frecuentes ---------- */
/* Botón de contorno del héroe (sk-pr-btn-3 has-border): el texto quedaba blanco sobre blanco. */
html[data-theme="light"] .sk-pr-btn-3.has-border {
	border-color: var(--ea-acento-borde);
	background: transparent;
}
html[data-theme="light"] .sk-pr-btn-3.has-border,
html[data-theme="light"] .sk-pr-btn-3.has-border .text,
html[data-theme="light"] .sk-pr-btn-3.has-border .text::before,
html[data-theme="light"] .sk-pr-btn-3.has-border .text::after,
html[data-theme="light"] .sk-pr-btn-3.has-border .icon {
	color: var(--ea-acento-fuerte) !important;
}
/* Cierre «¿No encontraste tu respuesta?» (sk-cta-3): la tarjeta es una imagen morada de noche en los dos modos;
   el título va en blanco. */
html[data-theme="light"] .sk-cta-3-wrap .title,
html[data-theme="light"] .sk-cta-3-wrap .title * {
	color: var(--ea-sobre-acento);
}

/* ---------- Nosotros: el video del héroe (alas de luz sobre negro) ---------- */
/* Sobre blanco el negro del video se veía como dos manchas. Invertido y vuelto a su tono, el negro pasa a blanco y
   las luces quedan moradas; «multiply» funde los bordes con el fondo claro. */
html[data-theme="light"] .ea-hero-nosotros .sk-hero-3-video video {
	/* Gris invertido: el fondo negro del video pasa a blanco y las luces a trazos oscuros, sin los rojos, cafés y
	   azules que dejaba invertir los colores (Estiven: «muy feo»). */
	filter: grayscale(1) invert(1) contrast(1.25) brightness(1.04);
}
/* Encima, el morado de marca en «screen»: sobre el blanco no cambia nada y sobre los trazos oscuros pinta morado.
   Resultado: trazos morados limpios sobre blanco. El borde se funde con el fondo de la página. */
html[data-theme="light"] .sk-hero-3-video .video-elm::after {
	background: linear-gradient(110.52deg, #16ff9c 12.07%, #00e688 86.13%);
	mix-blend-mode: screen;
	box-shadow: inset 0 -30px 40px #ffffff, inset 0 30px 40px #ffffff;
}
/* El centro: aro lila (en oscuro va del morado noche a transparente y en claro se veía gris) y la placa del isotipo
   en el morado de marca. */
html[data-theme="light"] .sk-hero-3-favicon .favicon-border {
	background: linear-gradient(180deg, #e4f8f0 0%, rgba(228, 248, 240, 0) 90%);
}
html[data-theme="light"] .sk-hero-3-favicon::before {
	background: linear-gradient(0deg, #ffffff 0%, rgba(35, 255, 165, 0.35) 100%);
}
html[data-theme="light"] .sk-hero-3-favicon .logo-elm {
	background: radial-gradient(circle at 35% 30%, #23ffa5 0%, #00e688 55%, #0f9a5e 100%);
	box-shadow: 0 12px 30px rgba(0, 230, 136, 0.3);
}
/* Las dos medialunas de arriba del héroe (sk-hero-3-area ::before/::after): en oscuro van del morado a la noche; en
   claro quedaban morados oscuros fundidos a blanco (se veían grises). Lila de marca a blanco. */
html[data-theme="light"] .sk-hero-3-area::before,
html[data-theme="light"] .sk-hero-3-area::after {
	background: radial-gradient(93.6% 93.37% at 99.47% 101.33%, #5bfcba 24.36%, #e4f8f0 30.71%, #f0fbf6 48.2%, #f8fdfb 64.48%, #ffffff 79.05%, #ffffff 100%);
}

/* ---------- Celular ---------- */
/* Escalamigos en el menú lateral: tarjeta morada de marca con el texto blanco (el lila suave no daba contraste). */
html[data-theme="light"] .ea-club-lateral,
html[data-theme="light"] .ea-club-lateral:hover,
html[data-theme="light"] .ea-club-lateral:focus-visible {
	background: radial-gradient(circle at 15% 20%, #23ffa5 0%, #00e688 50%, #0f9a5e 100%);
	border-color: transparent;
	color: var(--ea-sobre-acento);
}
html[data-theme="light"] .ea-club-lateral__txt small {
	color: rgba(255, 255, 255, 0.82);
}
html[data-theme="light"] .ea-club-lateral__i {
	background: rgba(255, 255, 255, 0.18);
}
/* La × del menú lateral: las rayas eran blancas (no se veían sobre blanco). */
html[data-theme="light"] .wa-offcanvas-area .wa-offcanvas-close span {
	background: var(--ea-texto) !important;
}
/* Barra inferior (Comprar · Vender · Chat): botones lila con el texto morado; el Chat, lleno. */
@media (max-width: 767px) {
	html[data-theme="light"] .ea-mobile-bar a {
		background: var(--ea-acento-suave);
		color: var(--ea-acento-fuerte) !important;
	}
	html[data-theme="light"] .ea-mobile-bar a.is-chat {
		background: var(--ea-acento);
		color: var(--ea-sobre-acento) !important;
	}
}

/* ---------- Arco de marcas: anillo al pasar el mouse y globo con el nombre ---------- */
/* El generador volvió tinta el anillo blanco (se veía un aro negro). En claro: aro blanco + contorno morado. */
html[data-theme="light"] .ea-logo-enlace:hover,
html[data-theme="light"] .ea-logo-enlace:focus-visible {
	box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(0, 230, 136, 0.55), 0 0 28px rgba(0, 230, 136, 0.55);
}
/* El globo con el nombre de la marca: morado con letra blanca (en blanco sobre el lila del arco se perdía). */
html[data-theme="light"] .ea-arco-tip,
html[data-theme="light"] .ea-arco-tip::after {
	background: var(--ea-acento);
	border-color: var(--ea-acento);
}
html[data-theme="light"] .ea-arco-tip {
	color: var(--ea-sobre-acento);
	font-weight: 600;
	box-shadow: 0 10px 24px rgba(0, 230, 136, 0.3);
}

/* ---------- Cada servicio con SU color, también en claro (Estiven, 2026-10-06) ---------- */
/* --s-tinta (y --t del mega menú) es el texto SOBRE el color del servicio: no cambia con el modo (generar-claro.py ya
   no lo traduce). Los botones de las tarjetas de servicios conservan su color y su texto. */
html[data-theme="light"] .ea-serv .ea-tarjeta-btn,
html[data-theme="light"] .ea-serv .ea-tarjeta-btn span,
html[data-theme="light"] .ea-serv .ea-tarjeta-btn i {
	color: var(--s-tinta) !important;
}

/* ---------- Héroe con video (portada y servicios): el «piso» negro bajo el video ---------- */
/* La plantilla dibuja bajo el video una mancha desenfocada con fill="#010c06" en el SVG (.sk-hero-5-bg-glow, segundo
   grupo). Es un atributo del HTML, la hoja generada no lo ve: en claro se veía como sombra negra alrededor del video.
   En claro va del color de la página. El primer grupo (el brillo morado o del servicio) se queda. */
html[data-theme="light"] .sk-hero-5-bg-glow svg > g:nth-of-type(2) path {
	fill: var(--ea-fondo);
}
/* Emblemas del arco: su aro exterior es blanco translúcido (en oscuro se lee); sobre el lila quedaba como un halo
   borroso. En claro, el aro lleva un filo morado nítido y una sombra corta. */
html[data-theme="light"] .ea-arco .ea-logo-enlace {
	box-shadow: 0 0 0 1.5px rgba(0, 230, 136, 0.35), 0 6px 16px rgba(13, 84, 54, 0.18);
	background: rgba(255, 255, 255, 0.55);
}

/* ---------- Legales: el botón secundario del héroe (sk-pr-btn-1, «Escribir a PQRSF») ---------- */
/* Es un vidrio de noche (degradé casi negro en ::after); en claro, vidrio lila con filo morado y texto morado. */
html[data-theme="light"] .sk-pr-btn-1::after {
	background: linear-gradient(to right, #f0fbf6 0%, rgba(255, 255, 255, 0.6) 54%, #f0fbf6 100%);
}
html[data-theme="light"] .sk-pr-btn-1::before {
	background: linear-gradient(104deg, #00e688 0%, rgba(0, 230, 136, 0) 46%, rgba(0, 230, 136, 0) 89%, #00e688 100%);
	opacity: 0.55;
}
html[data-theme="light"] .sk-pr-btn-1,
html[data-theme="light"] .sk-pr-btn-1 .text,
html[data-theme="light"] .sk-pr-btn-1 .text::before,
html[data-theme="light"] .sk-pr-btn-1 .text::after,
html[data-theme="light"] .sk-pr-btn-1 .icon {
	color: var(--ea-acento-fuerte) !important;
}

/* ---------- Contacto: el mapa ---------- */
/* En oscuro el mapa de Google se invierte para que sea de noche; en claro va con sus colores, apenas apagado. */
html[data-theme="light"] .ea-mapa iframe {
	filter: saturate(0.8) contrast(0.97);
}

/* Escalamigos, «Tu portal» (Citas · Proceso · Puntos): la placa del ícono era un velo blanco que en claro no se ve. */
html[data-theme="light"] .ea-club-mini {
	background: radial-gradient(circle at 35% 30%, #23ffa5 0%, #00e688 55%, #0f9a5e 100%);
	border-color: transparent;
}

/* ---------- Contacto ---------- */
/* Héroe: «Escribir por WhatsApp» (sk-pr-btn-5) es un degradé semitransparente que sobre blanco se veía lavado; «Ver
   sedes» (sk-pr-btn-6) llevaba brillos blancos encima. En claro, los dos en morado sólido. */
html[data-theme="light"] .sk-pr-btn-5,
html[data-theme="light"] .sk-pr-btn-5::before,
html[data-theme="light"] .sk-pr-btn-5:hover,
html[data-theme="light"] .sk-pr-btn-5:hover::before {
	background: linear-gradient(90deg, #00e688 0%, #0db36e 100%); /* el 84 % de opacidad del medio dejaba ver el lila */
}
html[data-theme="light"] .sk-pr-btn-5 {
	box-shadow: 0 14px 34px rgba(0, 230, 136, 0.28);
}
html[data-theme="light"] .sk-pr-btn-6::before,
html[data-theme="light"] .sk-pr-btn-6::after {
	background: linear-gradient(153deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 62%, rgba(13, 179, 110, 0.9) 100%);
}
/* Tarjetas WhatsApp · Correos · Horario: el círculo del ícono, morado con el ícono blanco (antes lila con ícono negro,
   y al pasar el mouse morado con ícono negro). */
html[data-theme="light"] body .ea-canales .sk-contact-9-card .icon,
html[data-theme="light"] .sk-contact-9-card .icon {
	background: radial-gradient(circle at 35% 30%, #23ffa5 0%, #00e688 55%, #0f9a5e 100%);
}
html[data-theme="light"] body .ea-canales .sk-contact-9-card .icon svg *,
html[data-theme="light"] .sk-contact-9-card .icon svg path,
html[data-theme="light"] .sk-contact-9-card:hover .icon svg path {
	fill: #ffffff;
}

/* ---------- Chat (Edibot) en claro ---------- */
/* Lo que escribe el cliente va en un globo morado: su texto es blanco (el generador lo volvió tinta). */
html[data-theme="light"] body .ea-chat.sb-chat .sb-list > div.sb-right .sb-message,
html[data-theme="light"] body .ea-chat.sb-chat .sb-list > div.sb-right .sb-message a {
	color: #ffffff;
}
html[data-theme="light"] body .ea-chat.sb-chat .sb-list > div.sb-right .sb-time {
	color: var(--ea-texto-3);
}
/* Opciones de Edibot: lila con texto morado; al pasar el mouse, morado lleno con texto blanco. */
html[data-theme="light"] body .ea-chat.sb-chat .sb-rich-chips .sb-btn {
	background: var(--ea-acento-suave);
	border-color: var(--ea-acento-borde);
	color: var(--ea-acento-fuerte);
}
html[data-theme="light"] body .ea-chat.sb-chat .sb-rich-chips .sb-btn:hover,
html[data-theme="light"] body .ea-chat.sb-chat .sb-rich-chips .sb-btn:focus-visible {
	background: var(--ea-acento);
	border-color: var(--ea-acento);
	color: #ffffff;
}
/* «En línea» bajo el nombre: venía en blanco translúcido sobre el encabezado lila. */
html[data-theme="light"] body .ea-chat.sb-chat .sb-status,
html[data-theme="light"] body .ea-chat.sb-chat .sb-status-online {
	color: var(--ea-exito) !important;
}
/* El botón «¿Hablamos?» con el chat abierto: en oscuro pasa a la noche; en claro sigue morado con el borde lila. */
html[data-theme="light"].ea-chat-abierto .ea-wa-float.ea-chat-lanzador,
html[data-theme="light"] .ea-chat-abierto .ea-wa-float.ea-chat-lanzador {
	background: var(--ea-acento-fuerte);
	box-shadow: 0 0 0 3px var(--ea-acento-suave);
}
/* Cookies: «Aceptar» es morado lleno; su texto en blanco. */
html[data-theme="light"] body .ea-cookies .ea-cookies__btn--si,
html[data-theme="light"] body .ea-cookies .ea-cookies__btn--si:hover {
	color: #ffffff !important;
}
/* El globo de Edibot: escalautos-chat.css define sus propios --ea-chat-* en el panel; en claro la capa sale blanca
   (globo invisible sobre el panel blanco). Lila 50, como las tarjetas. */
html[data-theme="light"] body .ea-chat.sb-chat {
	--ea-chat-capa: var(--ea-superficie);
}

/* ---------- Auditoría de botones (2026-10-06, .herramientas/botones.mjs): estados al pasar el mouse ---------- */
/* Redes del pie: al pasar el mouse el círculo se llena de morado; el ícono, blanco. */
html[data-theme="light"] .ea-ft .ea-ft-redes a:hover,
html[data-theme="light"] body .ea-lateral-redes a:hover {
	color: #ffffff;
}
/* WhatsApp de la ficha: al pasar el mouse se llena de verde; el texto, blanco sobre un verde más oscuro. */
html[data-theme="light"] .ea-btn--wa:not(.ea-btn--wa-lleno):hover,
html[data-theme="light"] .ea-btn--wa:not(.ea-btn--wa-lleno):hover span {
	background: #0b7a52;
	border-color: #0b7a52;
	color: #ffffff !important;
}
/* Legales: la pestaña del documento abierto se queda morada al pasar el mouse. */
html[data-theme="light"] .ea-legal-nav a.is-actual:hover {
	background: var(--ea-acento);
	color: var(--ea-sobre-acento);
}
/* Ficha: la barra «Exterior 360° · Interior y detalles» va SOBRE la foto: oscura en los dos modos, texto blanco. */
html[data-theme="light"] .ea-medios-espacios {
	background: rgba(2, 23, 14, 0.78);
	border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="light"] .ea-medios-espacios button:not([aria-selected="true"]),
html[data-theme="light"] .ea-medios-espacios button:not([aria-selected="true"]) * {
	color: #ffffff;
}
/* El espacio elegido: pastilla blanca con texto de noche, igual que en oscuro. */
html[data-theme="light"] .ea-medios-espacios button[aria-selected="true"],
html[data-theme="light"] .ea-medios-espacios button[aria-selected="true"] * {
	background: #ffffff;
	color: #02170e;
}

/* Estados de los documentos de la ficha (Vigente · Por vencer · Vencido): la hoja generada les dejaba a todos el
   mismo gris (su regla de base pesa más que .is-ok). En claro, cada uno con su color legible sobre blanco. */
html[data-theme="light"] .ea-doc-estado.is-ok { --nivel: var(--ea-exito); }
html[data-theme="light"] .ea-doc-estado.is-aviso { --nivel: var(--ea-alerta); }
html[data-theme="light"] .ea-doc-estado.is-alerta { --nivel: var(--ea-error); }

/* Favorito y comparador marcados (2026-10-10): en la tarjeta del precio el fondo claro de .ea-resumen-iconos pesaba
   más que el estado marcado y dejaba el corazón blanco sobre gris con borde rojo. Marcado = lleno, como en oscuro. */
html[data-theme="light"] .ea-icono-btn[data-ea-fav][aria-pressed="true"] { border-color: #f43f5e; background: #f43f5e; color: #fff; }
html[data-theme="light"] .ea-icono-btn[data-ea-comp][aria-pressed="true"] { border-color: var(--ea-acento); background: var(--ea-acento); color: var(--ea-sobre-acento); }

/* «Cómo funciona» (3 pasos) en claro (2026-10-14, Estiven: «más sutil»): el anillo gris de la imagen y la cuña de
   color que gira pesaban demasiado sobre blanco. Quedan como un halo suave del color del servicio. */
html[data-theme="light"] body .ea-pasos .sk-process-5-bg-circle-1 img { opacity: 0.3; }
html[data-theme="light"] body .ea-pasos .sk-process-5-bg-circle-2 .main-circle { opacity: 0; } /* su borde recto se veía como un corte */
html[data-theme="light"] body .ea-pasos .sk-process-5-bg-circle-1::before {
	content: ""; position: absolute; top: 4%; left: 50%; width: min(820px, 70%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, rgba(0, 230, 136, 0.16), rgba(0, 230, 136, 0.06) 60%, transparent); /* tono.php lo gira al color del servicio */
	transform: translateX(-50%);
}

/* Barra inferior de la ficha en celular: precio y cuota con el verde de texto del modo claro (quedaban en 3,5–4,4:1). */
@media (max-width: 991px) {
	html[data-theme="light"] .ea-ficha-barra-precio strong,
	html[data-theme="light"] .ea-ficha-barra-precio span { color: var(--ea-exito); }
}

/* Logos de prensa de las reseñas: vienen en blanco; sobre la tarjeta clara, en negro. */
html[data-theme="light"] .ea-resenas .ea-prensa-logo img { filter: brightness(0); opacity: 0.8; }