/* Mega menú (inc/mega-menu.php + assets/js/mega-menu.js). Cada submenú tiene SU color, igual en todas las páginas
   (decisión del usuario, 2026-09-15): Comprar morado, Vender azul, Financiar verde, Servicios el de cada servicio.
   Por eso esta hoja NO pasa por tono.php y el HTML del menú va marcado <!--ea-sin-tono-->.
   Lenguaje de la web (aprobado 2026-09-14, «que no se vea de IA»): TT Firs en títulos y textos, sin mayúsculas
   sostenidas; píldora de subtítulo del tema; listas SIN cajas, separadas por líneas que se desvanecen; íconos
   UIcons del sitio; pasos 1·2·3 en círculos unidos por línea; precio en verde como la tarjeta del inventario;
   servicios con su ícono en un círculo de color suave. */

.screen-reader-text:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ea-mm-i { width: 18px; height: 18px; flex: none; fill: currentColor; stroke: none; }

/* Color de cada submenú (--c) y del texto sobre ese color (--t). */
#main-nav > li[data-mm="comprar"], .ea-mm--comprar, .ea-mmm-item[data-mmm="comprar"] { --c: #701bfa; --t: #fff; }
#main-nav > li[data-mm="vender"], .ea-mm--vender, .ea-mmm-item[data-mmm="vender"] { --c: #0099f6; --t: #fff; --c-boton: #0077c2; } /* el botón lleno, en un azul más oscuro: blanco sobre #0099f6 da 3:1, sobre #0077c2 4,8:1 */
#main-nav > li[data-mm="financiar"], .ea-mm--financiar, .ea-mmm-item[data-mmm="financiar"] { --c: #00e688; --t: #02170e; }
#main-nav > li[data-mm="servicios"], .ea-mm--servicios, .ea-mmm-item[data-mmm="servicios"] { --c: #8b84a3; --t: #fff; }
/* Títulos en semibold (550) con un poco más de aire entre letras (pedido del usuario: «no bold, semibold»). */
.ea-mm-titulo, .ea-mm-col-t, .ea-mm-form-t, .ea-mm-carro b, .ea-mm-serv b, .ea-mm-pasos b, .ea-mmm-serv b { font-weight: 550 !important; letter-spacing: .015em !important; }

/* El resplandor morado del centro del encabezado (header::after, z-index 1, blur 91px) quedaba ENCIMA del menú y
   apagaba «Financiar» y «Servicios» (se veían lila). El menú va por encima; el resplandor sigue detrás del vidrio. */
.sk-header-1-menu { z-index: 2; }

/* ---------- Ítems del menú de computador ---------- */
#main-nav > li.ea-mm-li { display: inline-flex; align-items: center; position: relative; }
#main-nav > li.ea-mm-li > .dropdown-menu { display: none !important; } /* el panel reemplaza al desplegable del tema */
#main-nav > li.ea-mm-li.dropdown > a::after, #main-nav > li.ea-mm-li.dropdown > a::before { display: none !important; }
#main-nav > li.ea-mm-li > a { padding-right: 2px !important; }
.ea-mm-abrir { display: inline-grid; place-items: center; width: 22px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; opacity: .6; cursor: pointer; }
.ea-mm-abrir .ea-mm-i { width: 12px; height: 12px; transition: transform .2s ease; }
.ea-mm-abrir--texto { display: inline-flex; align-items: center; gap: 7px; width: auto; height: auto; margin: 0; padding: 12px 0; font: inherit; font-weight: 400; color: #fff; opacity: 1; line-height: inherit; }
#main-nav .ea-mm-abrir--texto { font-size: 16px; font-weight: 400; letter-spacing: normal; } /* los botones del tema traen 17px/600 */
.ea-mm-abrir--texto .ea-mm-i { opacity: .6; }
/* Con un panel abierto el encabezado pasa por encima de todo (en la ficha, la galería tiene capas más altas). */
html.ea-mm-abierto .tx-header, html.ea-mm-abierto .sk-header-1-area { z-index: 990 !important; }
.ea-mm-abrir:hover, .ea-mm-abrir:focus-visible { opacity: 1; }
.ea-mm-abrir:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.ea-mm-li.is-abierto .ea-mm-abrir .ea-mm-i { transform: rotate(180deg); }
/* Rayita del color del ítem abierto (Servicios: los colores de sus servicios). */
.ea-mm-li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: var(--c); opacity: 0; transform: scaleX(.4); transition: opacity .2s, transform .2s; pointer-events: none; }
.ea-mm-li[data-mm="servicios"]::after { background: linear-gradient(90deg, #f19238, #00e688, #0099f6); }
.ea-mm-li.is-abierto::after { opacity: 1; transform: none; }
.ea-mm-li.is-abierto > a, .ea-mm-li.is-abierto > .ea-mm-abrir--texto { color: #fff !important; }
/* Con las flechas el menú crece: en pantallas de 1200–1399 px se juntan un poco los ítems para no tocar el logo. */
@media (max-width: 1399px) { #main-nav { gap: 28px !important; } }

/* ---------- Panel ---------- */
.ea-mm-capa { position: absolute; left: 0; right: 0; top: 100%; height: 0; z-index: 60; }
.ea-mm {
	position: absolute; left: 50%; top: 12px; width: min(1240px, calc(100vw - 48px)); transform: translateX(-50%);
	padding: 28px 30px 30px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .09); color: #fff; text-align: left;
	background: radial-gradient(700px 240px at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%), #0d0a14;
	box-shadow: 0 40px 90px rgba(0, 0, 0, .6); font-family: var(--ea-font-text, inherit); line-height: 1.45;
	animation: ea-mm-entra .08s linear;
}
.ea-mm::before { content: ""; position: absolute; left: 40px; right: 40px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--c), transparent); }
.ea-mm--servicios::before { background: linear-gradient(90deg, transparent, #f19238, #00e688, #0099f6, transparent); }
/* Puente invisible entre el ítem y el panel: al bajar el mouse no se cierra. */
.ea-mm::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
@keyframes ea-mm-entra { from { opacity: 0; } to { opacity: 1; } } /* solo opacidad: aparece ya, sin deslizarse */
@media (prefers-reduced-motion: reduce) { .ea-mm { animation: none; } }
.ea-mm a { color: inherit; text-decoration: none; }
.ea-mm p { margin: 0; }
.ea-mm a:focus-visible, .ea-mm button:focus-visible, .ea-mm input:focus-visible, .ea-mm select:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* Títulos de columna (como los títulos de grupo del sitio) y píldora de subtítulo del tema (sk-subtitle-4) */
.ea-mm-col-t { margin: 0 0 8px !important; font-size: 15px; font-weight: 600; color: #fff; }
.ea-mm-col-t em { margin-left: 6px; font-style: normal; font-weight: 400; color: rgba(255, 255, 255, .45); }
.ea-mm-pildora { display: inline-flex; align-items: center; padding: 6px 15px; border-radius: 100px; background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); font-size: 14px; font-weight: 550; letter-spacing: .015em; color: rgba(255, 255, 255, .85); }
.ea-mm-titulo { margin: 16px 0 10px !important; font-size: 26px; line-height: 1.22; color: #fff; }
.ea-mm-intro > p:not(.ea-mm-pildora):not(.ea-mm-titulo) { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .66); }

.ea-mm-grid { display: grid; gap: 34px; }
.ea-mm-grid--comprar { grid-template-columns: 1.05fr 1.1fr 1.1fr .95fr; }
.ea-mm-grid--vender { grid-template-columns: 1.15fr 1.05fr 1fr; align-items: start; }
.ea-mm-grid--financiar { grid-template-columns: 1.1fr 1fr 1fr; align-items: start; }

/* Línea que se desvanece (las divisiones del sitio) */
.ea-mm-fila, .ea-mm-marcas a { background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)) bottom / 100% 1px no-repeat; }

/* Buscador + botón (como el botón del encabezado) */
.ea-mm-top { display: flex; gap: 14px; margin: 0 0 26px; }
.ea-mm-busca { flex: 1; display: flex; align-items: center; gap: 10px; height: 48px; margin: 0; padding: 0 16px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); cursor: text; }
.ea-mm-busca:focus-within { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.ea-mm-busca input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; outline: none; box-shadow: none; }
.ea-mm-busca input::placeholder { color: rgba(255, 255, 255, .45); }
.ea-mm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 23px; border: 0; border-radius: 10px; background: var(--c-boton, var(--c)); color: var(--t) !important; font: inherit; font-weight: 600; font-size: 16px; white-space: nowrap; cursor: pointer; transition: filter .15s; }
.ea-mm-cta:hover { filter: brightness(1.1); }
.ea-mm-cta .ea-mm-i { width: 16px; height: 16px; }
.ea-mm-cta--linea { background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: #fff !important; }
.ea-mm-cta--full { width: 100%; margin-top: 16px; }

/* Comprar: tipos (siluetas sueltas), presupuestos y marcas en listas */
.ea-mm-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -8px; }
.ea-mm-tipo { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 8px; border-radius: 12px; transition: background-color .15s; }
.ea-mm-tipo:hover { background: rgba(255, 255, 255, .04); }
.ea-mm-tipo .ea-silueta { width: 60px; height: 24px; margin-bottom: 6px; color: color-mix(in srgb, var(--c) 45%, #fff); }
.ea-mm-tipo span { font-size: 15px; font-weight: 500; }
.ea-mm-tipo small { font-size: 13px; color: rgba(255, 255, 255, .45); }
.ea-mm .ea-mm-tipo--todos { flex-direction: row; align-items: flex-end; gap: 6px; color: color-mix(in srgb, var(--c) 40%, #fff); }
.ea-mm-tipo--todos span { font-weight: 600; white-space: nowrap; }
.ea-mm-tipo--todos .ea-mm-i { width: 14px; height: 14px; margin-bottom: 3px; }
.ea-mm-lista { display: flex; flex-direction: column; }
.ea-mm-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; }
.ea-mm-fila b { display: block; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .9); }
.ea-mm-fila small { display: block; margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.ea-mm-fila i { flex: none; font-style: normal; font-size: 13px; color: rgba(255, 255, 255, .45); }
.ea-mm-fila > .ea-mm-i { width: 14px; height: 14px; color: rgba(255, 255, 255, .35); transition: transform .15s, color .15s; }
.ea-mm a.ea-mm-fila:hover, .ea-mm-marcas a:hover { background-image: linear-gradient(90deg, color-mix(in srgb, var(--c) 75%, transparent), transparent); }
.ea-mm a.ea-mm-fila:hover b { color: #fff; }
.ea-mm a.ea-mm-fila:hover > .ea-mm-i { color: #fff; transform: translateX(3px); }
.ea-mm-fila.is-vacio { opacity: .45; }
.ea-mm-marcas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ea-mm-marcas a { display: flex; align-items: center; gap: 10px; min-width: 0; height: 42px; padding: 0 2px; font-size: 15px; font-weight: 500; }
.ea-mm-marcas img, .ea-mm-logo-vacio { width: 22px; height: 22px; flex: none; border-radius: 50%; }
.ea-mm-logo-vacio { display: grid; place-items: center; background: color-mix(in srgb, var(--c) 30%, transparent); font-size: 11px; }
.ea-mm-marcas span:not(.ea-mm-logo-vacio) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-mm-marcas small { margin-left: auto; font-size: 13px; color: rgba(255, 255, 255, .45); }
.ea-mm-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 550; letter-spacing: .01em; color: color-mix(in srgb, var(--c) 40%, #fff) !important; }
.ea-mm-link .ea-mm-i { width: 14px; height: 14px; transition: transform .15s; }
.ea-mm-link:hover .ea-mm-i, .ea-mm-carro:hover .ea-mm-link .ea-mm-i { transform: translateX(3px); }

/* Carro del panel: como la tarjeta del inventario */
.ea-mm-carro { display: flex; flex-direction: column; min-height: 100%; }
.ea-mm-carro-foto { display: block; aspect-ratio: 4 / 3; max-height: 160px; margin-bottom: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05) center / cover; }
.ea-mm-carro b { font-size: 17px; font-weight: 600; line-height: 1.3; }
.ea-mm-carro .ea-mm-carro-datos { margin-top: 3px; font-size: 13.5px; color: rgba(255, 255, 255, .5); }
.ea-mm-carro small { margin-top: 8px; font-size: 17px; font-weight: 600; color: #34d399; }
.ea-mm-carro .ea-mm-carro-cuota { margin-top: 1px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.ea-mm-carro .ea-mm-link { margin-top: auto; padding-top: 10px; }
.ea-mm-carro:not(.is-listo) .ea-mm-carro-foto { animation: ea-mm-pulso 1.2s ease-in-out infinite alternate; }
@keyframes ea-mm-pulso { to { opacity: .5; } }

/* Vender: enlace de parte de pago bajo los botones */
.ea-mm .ea-mm-cambio { margin-top: 20px; font-weight: 500; color: rgba(255, 255, 255, .78) !important; }
.ea-mm .ea-mm-cambio:hover { color: #fff !important; }
.ea-mm-cambio .ea-mm-i { width: 16px; height: 16px; color: color-mix(in srgb, var(--c) 50%, #fff); }

/* Vender: pasos 1·2·3 en círculos unidos por línea + formulario corto */
.ea-mm-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ea-mm-pasos { list-style: none; margin: 4px 0 0; padding: 0; }
.ea-mm-pasos li { position: relative; display: flex; gap: 14px; margin: 0; padding: 0 0 20px; }
.ea-mm-pasos li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 1px; background: linear-gradient(color-mix(in srgb, var(--c) 60%, transparent), rgba(255, 255, 255, .08)); }
.ea-mm-pasos i { flex: none; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); font-style: normal; font-size: 13px; font-weight: 600; color: #fff; }
.ea-mm-pasos b { display: block; margin-top: 5px; font-size: 15px; font-weight: 600; }
.ea-mm-pasos small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .55); }
.ea-mm-form, .ea-mm-sim { margin: 0; padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .09); }
.ea-mm-form-t { margin: 0 0 4px !important; font-size: 17px; font-weight: 600; }
.ea-mm-form-t small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; color: rgba(255, 255, 255, .5); }
.ea-mm-form label { display: block; margin: 12px 0 0; font-size: 13px; color: rgba(255, 255, 255, .55); }
.ea-mm-form input, .ea-mm-form select {
	display: block; width: 100%; height: 44px; margin-top: 6px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .05); color: #fff; font: inherit; font-size: 15px; color-scheme: dark; box-shadow: none;
}
.ea-mm-form select option { background: #15121d; color: #fff; }
.ea-mm-form input:focus, .ea-mm-form select:focus { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.ea-mm-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Financiar: datos separados por líneas + simulador */
.ea-mm-datos { display: flex; margin-top: 22px; }
.ea-mm-datos span { padding: 2px 20px 2px 0; margin-right: 20px; border-right: 1px solid rgba(255, 255, 255, .1); }
.ea-mm-datos span:last-child { margin-right: 0; padding-right: 0; border: 0; }
.ea-mm-datos b { display: block; font-size: 20px; font-weight: 600; white-space: nowrap; color: color-mix(in srgb, var(--c) 35%, #fff); }
.ea-mm-datos small { font-size: 13px; white-space: nowrap; color: rgba(255, 255, 255, .55); }
.ea-mm-sim .ea-mm-col-t { margin-bottom: 14px !important; }
.ea-mm-rango { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0 0 14px; font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.ea-mm-rango output { color: #fff; font-weight: 600; }
.ea-mm-rango input { grid-column: 1 / -1; width: 100%; height: 18px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ea-mm-rango input::-webkit-slider-runnable-track { height: 4px; border-radius: 9px; background: linear-gradient(90deg, var(--c) var(--v, 50%), rgba(255, 255, 255, .12) var(--v, 50%)); }
.ea-mm-rango input::-moz-range-track { height: 4px; border-radius: 9px; background: linear-gradient(90deg, var(--c) var(--v, 50%), rgba(255, 255, 255, .12) var(--v, 50%)); }
.ea-mm-rango input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; border: 3px solid var(--c); }
.ea-mm-rango input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--c); }
.ea-mm-cuota { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, transparent); }
.ea-mm-cuota small { display: block; font-size: 13px; color: rgba(255, 255, 255, .6); }
.ea-mm-cuota b { font-family: Orbitron, var(--ea-font-text, sans-serif); font-size: 24px; } /* como el simulador de la página */

/* Servicios: ícono en círculo de color suave, columnas separadas por líneas, sin tarjetas */
.ea-mm-servicios { display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px 0 0; }
.ea-mm-serv { display: flex; flex-direction: column; padding: 4px 26px; border-left: 1px solid rgba(255, 255, 255, .08); }
.ea-mm-serv:first-child { padding-left: 0; border-left: 0; }
.ea-mm-serv-ico { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); transition: background-color .15s; }
.ea-mm-serv-ico .ea-mm-i { width: 22px; height: 22px; }
.ea-mm-serv:hover .ea-mm-serv-ico { background: color-mix(in srgb, var(--c) 26%, transparent); }
.ea-mm-serv b { font-size: 17px; font-weight: 600; }
.ea-mm-serv small { margin-top: 6px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.ea-mm-serv em { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-style: normal; font-size: 15px; font-weight: 600; color: var(--c); }
.ea-mm-serv em .ea-mm-i { width: 14px; height: 14px; transition: transform .15s; }
.ea-mm-serv:hover em .ea-mm-i { transform: translateX(3px); }

@media (max-width: 1320px) {
	.ea-mm { padding: 24px 24px 26px; }
	.ea-mm-grid { gap: 24px; }
	.ea-mm-titulo { font-size: 23px; }
	.ea-mm-serv { padding: 4px 18px; }
	.ea-mm-datos span { padding-right: 14px; margin-right: 14px; }
}

/* ---------- Celular: menú lateral oscuro (el del tema venía blanco con letras blancas) ---------- */
.wa-offcanvas-area { background: #0b0911 !important; color: rgba(255, 255, 255, .8); }
.wa-offcanvas-area .wa-offcanvas-close { background: rgba(255, 255, 255, .06); border-radius: 12px; }
.wa-offcanvas-area .wa-offcanvas-close span { background: #fff !important; }
.wa-offcanvas-area h1, .wa-offcanvas-area h2, .wa-offcanvas-area h3, .wa-offcanvas-area h4, .wa-offcanvas-area h5, .wa-offcanvas-area h6 { color: #fff !important; }
.mobile-main-navigation li { border-color: rgba(255, 255, 255, .08) !important; }
.mobile-main-navigation li > a { color: #fff !important; }
.mobile-main-navigation .dropdown-btn { color: rgba(255, 255, 255, .7) !important; }
.mobile-main-navigation .dropdown-btn i { color: inherit !important; }

/* ---------- Celular: acordeones del menú lateral ---------- */
.mobile-main-navigation .ea-mmm-item > a { display: flex !important; align-items: center; gap: 10px; }
.mobile-main-navigation #m-main-nav > li:not(.ea-mmm-item) > a { padding-left: 19px; }
.ea-mmm-punto { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.ea-mmm-item[data-mmm="servicios"] .ea-mmm-punto { background: conic-gradient(#f19238 0 25%, #00e688 0 50%, #f19238 0 75%, #0099f6 0); box-shadow: none; }
.mobile-main-navigation .ea-mmm { margin: 0 !important; padding: 4px 0 14px !important; min-width: 0; max-width: 100%; }
.mobile-main-navigation .ea-mmm-item, .mobile-main-navigation .ea-mmm .ea-mmm-li { min-width: 0; max-width: 100%; }
.mobile-main-navigation .ea-mmm .ea-mmm-li { padding: 0 !important; border: 0 !important; }
.mobile-main-navigation .ea-mmm .ea-mmm-li::before, .mobile-main-navigation .ea-mmm .ea-mmm-li::after { display: none !important; }
.mobile-main-navigation .ea-mmm a { text-transform: none !important; display: flex !important; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 2px !important; color: rgba(255, 255, 255, .85) !important; font-size: 15px !important; font-weight: 500 !important; text-decoration: none; background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01)) bottom / 100% 1px no-repeat; }
.mobile-main-navigation .ea-mmm a small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .45); }
.mobile-main-navigation .ea-mmm a > i { flex: none; font-style: normal; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .45); }
.mobile-main-navigation .ea-mmm a > .ea-mm-i { width: 14px; height: 14px; color: rgba(255, 255, 255, .35); }
.mobile-main-navigation .ea-mmm .ea-mmm-todo { justify-content: center; gap: 8px; height: 48px; margin: 4px 0 8px; padding: 0 !important; border-radius: 10px; background: var(--c-boton, var(--c)); color: var(--t) !important; font-size: 16px !important; font-weight: 600 !important; }
.mobile-main-navigation .ea-mmm .ea-mmm-todo .ea-mm-i { width: 16px; height: 16px; color: inherit; }
/* Carrocerías en una grilla de 2: en una fila que se deslizaba, la cuarta salía cortada («Camior», 2026-10-30). */
.ea-mmm-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; max-width: 100%; margin: 2px 0 8px; }
.mobile-main-navigation .ea-mmm .ea-mmm-chip { width: auto !important; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; padding: 10px 12px !important; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: none; font-size: 15px !important; }
.ea-mmm-chip .ea-silueta { width: 52px; height: 21px; margin-bottom: 4px; color: color-mix(in srgb, var(--c) 45%, #fff); }
.ea-mmm-chip small { margin: 0 !important; }
.ea-mmm-paso { display: flex; align-items: center; gap: 12px; padding: 8px 2px; font-size: 15px; color: rgba(255, 255, 255, .8); }
.ea-mmm-paso i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); font-style: normal; font-size: 12px; font-weight: 600; color: #fff; }
.mobile-main-navigation .ea-mmm .ea-mmm-serv { justify-content: flex-start; gap: 12px; }
.ea-mmm-serv-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); }
.ea-mmm-serv-ico .ea-mm-i { width: 20px; height: 20px; }
.ea-mmm-serv b { display: block; font-size: 15px; font-weight: 600; color: #fff; }

/* ---------- Celular: cada submenú en su propia pantalla, que entra de lado (mega-menu.js › enlazarCelular) ----------
   Ocupa todo el menú lateral, con «‹ Volver» y el nombre arriba (fijos al bajar). Colores con tokens: sirve en los dos
   modos sin pasar por el generador del claro. Fuera de la pantalla, la cabecera no se ve. */
.mobile-main-navigation .ea-mmm-cab {
	display: none !important;
}
.mobile-main-navigation .ea-mmm-item.is-pantalla > .ea-mmm {
	position: fixed;
	inset: 0;
	z-index: 5;
	display: block !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 24px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--ea-fondo);
	animation: ea-mmm-entra 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-main-navigation .ea-mmm-item.is-saliendo > .ea-mmm {
	animation: ea-mmm-sale 0.2s ease-in forwards;
}
@keyframes ea-mmm-entra {
	from { transform: translateX(100%); }
}
@keyframes ea-mmm-sale {
	to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
	.mobile-main-navigation .ea-mmm-item.is-pantalla > .ea-mmm,
	.mobile-main-navigation .ea-mmm-item.is-saliendo > .ea-mmm {
		animation: none;
	}
}
.mobile-main-navigation .ea-mmm-item.is-pantalla .ea-mmm-cab {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex !important;
	align-items: center;
	gap: 14px;
	margin: 0 -24px 16px;
	padding: calc(14px + env(safe-area-inset-top, 0px)) 24px 14px;
	border-bottom: 1px solid var(--ea-linea);
	background: var(--ea-fondo);
}
.ea-mmm-volver {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 4px;
	height: 40px;
	padding: 0 14px 0 8px;
	border: 1px solid var(--ea-linea-2);
	border-radius: 12px;
	background: var(--ea-vidrio);
	color: var(--ea-texto);
	font: 600 15px/1 var(--ea-font-text);
	cursor: pointer;
}
.ea-mmm-volver svg {
	width: 20px;
	height: 20px;
}
.ea-mmm-cab-t {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--ea-texto);
	font: 600 20px/1.2 var(--ea-font-text);
}

/* Sedes en el menú lateral (inc/mega-menu.php › escalautos_sedes_menu), en vez de la galería de fotos: tarjetas con
   el pin, el nombre, la dirección y «Cómo llegar» (como las del pie). Con tokens: sirven en los dos modos. */
.ea-sedes-menu {
	display: grid;
	gap: 10px;
	margin: 8px 0 36px;
}
html body .ea-sedes-menu .ea-sedes-menu-t {
	margin: 0 0 4px;
	color: var(--ea-texto) !important;
	font: 600 20px/1.2 var(--ea-font-text);
}
.ea-sede-tarjeta {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--ea-linea);
	border-radius: 14px;
	background: var(--ea-vidrio);
	color: var(--ea-texto);
	text-decoration: none;
}
.ea-sede-ico {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ea-acento-suave);
	color: var(--ea-acento-texto);
}
.ea-sede-ico svg {
	width: 20px;
	height: 20px;
}
.ea-sede-txt {
	display: grid;
	gap: 2px;
	min-width: 0;
}
.ea-sede-txt b {
	color: var(--ea-texto);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
}
.ea-sede-txt small {
	color: var(--ea-texto-2);
	font-size: 13px;
	line-height: 1.35;
}
.ea-sede-ir {
	margin-top: 2px;
	color: var(--ea-acento-texto);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

/* Redes al final del menú lateral (saasking-core › tx-headers/parts/side-info.php): una fila centrada de cuadros
   iguales, visibles en los dos modos (tokens). En oscuro el ícono casi no se veía y en claro perdía la caja. */
html body .wa-offcanvas-social { text-align: center; }
html body .wa-offcanvas-social .wa-offcanvas-social-title { text-align: center; }
html body .wa-offcanvas-social .wa-offcanvas-social-flex { flex-wrap: nowrap !important; justify-content: center; gap: 12px; }
html body .wa-offcanvas-social .wa-offcanvas-social-link { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 !important; border: 1px solid var(--ea-linea-2); border-radius: 12px; background: var(--ea-vidrio); color: var(--ea-texto) !important; font-size: 18px; }
html body .wa-offcanvas-social .wa-offcanvas-social-link i { color: inherit !important; }

/* ---------- Escalamigos en la cabecera y en el menú lateral (inc/escalamigos.php, 2026-09-29) ----------
 * Aquí y no en escalautos-secciones.css: esta hoja no la gira tono.php, y el club es morado en todas las
 * páginas, como el mega menú. */
.sk-header-1-action-link {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ea-club-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(201, 179, 255, 0.35);
	background: rgba(112, 27, 250, 0.18);
	color: #c9b3ff;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.ea-club-btn:hover,
.ea-club-btn:focus-visible {
	background: #701bfa;
	border-color: #701bfa;
	color: #fff;
}
.ea-club-btn .ea-club-i {
	width: 22px;
	height: 22px;
}
/*
 * El anillo del Autoverso (2026-09-29, pedido de Estiven): un degradado cónico con los cuatro colores del kit que
 * gira en círculo. Gira el ANILLO (un pseudo-elemento), no el botón: el ícono queda quieto. Sólo `transform`, que
 * el navegador anima sin repintar. La máscara deja ver 2 px del borde y nada del centro.
 */
.ea-club-btn {
	position: relative;
	border-color: transparent;
}
.ea-club-btn::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	background: conic-gradient(#701bfa, #0099f6, #00e688, #f19238, #701bfa);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
	animation: ea-club-giro 4s linear infinite;
	pointer-events: none;
}
.ea-club-btn:hover::before,
.ea-club-btn:focus-visible::before {
	animation-duration: 1.6s;
}
@keyframes ea-club-giro {
	to {
		transform: rotate(1turn);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ea-club-btn::before {
		animation: none;
	}
}
.ea-club-btn__txt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/*
 * Entre 1200 y 1399 el recuadro del menú (centrado con posición absoluta) llegaba hasta el ícono del club: se le
 * quita aire entre ítems y a los lados. Medido: a 1200 el recuadro terminaba en 945 y el ícono empieza en 928.
 */
@media (min-width: 1200px) and (max-width: 1399px) {
	.sk-header-1-menu {
		padding-left: 16px;
		padding-right: 16px;
	}
	/* `!important` porque el mega menú ya fija `#main-nav { gap: 28px !important }` hasta 1399. 2026-10-06: con el
	   interruptor de modo al lado del botón «Vender mi auto», 16 px dejaba sólo 7 px hasta el interruptor; con 10 px
	   quedan ~25 px a cada lado del recuadro. */
	.sk-header-1-menu #main-nav {
		gap: 10px !important;
	}
}
@media (max-width: 575px) {
	.ea-club-btn {
		width: 42px;
		height: 42px;
	}
	.sk-header-1-action-link {
		gap: 8px;
	}
}

.ea-club-lateral {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 22px 0 30px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba(201, 179, 255, 0.3);
	background: linear-gradient(135deg, rgba(112, 27, 250, 0.28), rgba(112, 27, 250, 0.08));
	color: #fff;
}
.ea-club-lateral:hover,
.ea-club-lateral:focus-visible {
	color: #fff;
	border-color: #701bfa;
}
.ea-club-lateral__i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #701bfa;
	color: #fff;
}
.ea-club-lateral__i .ea-club-i {
	width: 20px;
	height: 20px;
}
.ea-club-lateral__txt b {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
}
.ea-club-lateral__txt small {
	display: block;
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
}

/* Logo + botón de Escalamigos juntos a la izquierda (2026-10-05) */
.ea-marca-club {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}
.ea-marca-club .sk-header-1-logo {
	flex: 0 0 auto;
}

/* ---------- Cabecera en tres columnas (2026-10-06) ----------
 * Logo | menú | Escalamigos + «Vender mi auto». Las dos columnas de los lados miden lo mismo (flex 1 1 0), así el
 * menú queda en el centro exacto de la página y nada se le puede montar encima. El círculo de Escalamigos se centra
 * en el espacio libre entre la barra del menú y el botón (márgenes automáticos), y el botón va al borde derecho,
 * centrado en alto con la barra. */
@media (min-width: 1200px) {
	.sk-header-1-wrap > .ea-marca-club,
	.sk-header-1-wrap > .sk-header-1-action-link {
		flex: 1 1 0;
		min-width: max-content;
	}
	/* La plantilla centra la barra con position: absolute + translate; aquí entra al reparto (sigue en el centro
	   exacto porque los lados miden igual) y así el círculo de Escalamigos ve dónde termina. */
	.sk-header-1-wrap > .sk-header-1-menu {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		flex: 0 0 auto;
	}
	.sk-header-1-action-link {
		justify-content: flex-end;
		align-self: center;
		gap: 0; /* el aire lo reparten los márgenes automáticos del círculo: mitad y mitad */
	}
	/* Desde el 2026-10-09 el círculo va en un grupo con el corazón de «Mis autos» (escalautos-mis-autos.css): se
	   centra el grupo. */
	.sk-header-1-action-link > .ea-club-btn,
	.sk-header-1-action-link > .ea-hdr-iconos {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Ítems sin submenú (Nosotros, Contacto) al pasar el mouse: la plantilla los pinta #701bfa, que sobre la barra
   oscura da 2,5:1. Lila claro (en el modo claro, generar-claro.py lo pasa al morado de texto). */
.sk-main-navigation .navbar-nav li:hover > a {
	color: #c9b3ff;
}

/* ==========================================================================
   «Mis autos» (inc/mis-autos.php + assets/js/mis-autos.js), 2026-10-09.
   Corazón de la cabecera con su número, panel con favoritos y comparador, bloque del menú lateral, barra del
   comparador con fotos y el botón de alerta ya pedida. Solo tokens: sirve igual en claro y oscuro.
   Vive aquí (y no en su propia hoja) para no sumar una descarga que frena la página; va al final para
   conservar el orden de la cascada. Esta sección: SOLO tokens, nada de colores fijos.
   ========================================================================== */

/* ── 1 · Cabecera: el grupo corazón + Escalamigos ─────────────────────────── */
.ea-hdr-iconos {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}
.ea-mis-n[hidden] {
	display: none;
}
.ea-mis-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--ea-acento-borde);
	border-radius: 50%;
	background: var(--ea-acento-suave);
	color: var(--ea-acento-texto);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.ea-mis-btn:hover,
.ea-mis-btn:focus-visible,
.ea-mis-btn[aria-expanded="true"] {
	background: var(--ea-acento);
	border-color: var(--ea-acento);
	color: var(--ea-sobre-acento);
}
.ea-mis-btn:focus-visible {
	outline: 2px solid var(--ea-acento-texto);
	outline-offset: 3px;
}
.ea-mis-i {
	width: 20px;
	height: 20px;
}
/* El número: pastilla en la esquina, como el carrito de una tienda. */
.ea-mis-n {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border: 2px solid var(--ea-fondo);
	border-radius: 999px;
	background: var(--ea-acento);
	color: var(--ea-sobre-acento);
	font: 700 11px/16px var(--ea-font-text, inherit);
	text-align: center;
}
/* Al guardar o comparar: un latido corto (solo transform). */
.ea-mis-btn.is-late {
	animation: ea-mis-late 0.6s ease-out;
}
.ea-mis-btn.is-late .ea-mis-n {
	animation: ea-mis-pop 0.6s ease-out;
}
@keyframes ea-mis-late {
	0%, 100% { transform: scale(1); }
	30% { transform: scale(1.18); }
	55% { transform: scale(0.94); }
}
@keyframes ea-mis-pop {
	0%, 100% { transform: scale(1); }
	40% { transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
	.ea-mis-btn.is-late,
	.ea-mis-btn.is-late .ea-mis-n {
		animation: none;
	}
}
/* Cabecera de computador de 1.200 a 1.399: entre el menú y «Vender mi auto» quedan ~104 px para el grupo. */
@media (min-width: 1200px) and (max-width: 1399px) {
	.ea-hdr-iconos {
		gap: 6px;
	}
	.ea-hdr-iconos .ea-mis-btn,
	.ea-hdr-iconos .ea-club-btn {
		width: 42px;
		height: 42px;
	}
}
@media (max-width: 575px) {
	.ea-hdr-iconos {
		gap: 8px;
	}
	.ea-mis-btn {
		width: 42px;
		height: 42px;
	}
}
/* Pantallas de 359 px o menos: no cabe junto al logo; queda en el menú lateral. */
@media (max-width: 359px) {
	.ea-hdr-iconos .ea-mis {
		display: none;
	}
}

/* ── 2 · El panel ─────────────────────────────────────────────────────────── */
.ea-mis-velo {
	position: fixed;
	inset: 0;
	z-index: 9990;
	background: transparent;
	transition: background-color 0.2s;
}
.ea-mis-panel {
	position: fixed;
	z-index: 9991;
	width: 340px;
	max-height: calc(100vh - 120px);
	overflow: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--ea-linea-2);
	border-radius: 18px;
	background: var(--ea-superficie-2);
	color: var(--ea-texto);
	box-shadow: var(--ea-sombra);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s, transform 0.18s;
}
.ea-mis-panel.is-abierto {
	opacity: 1;
	transform: none;
}
.ea-mis-panel[hidden],
.ea-mis-velo[hidden] {
	display: none;
}
.ea-mis-cab {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px 12px;
	background: var(--ea-superficie-2);
}
.ea-mis-titulo {
	margin: 0;
	font: 700 17px/1.2 var(--ea-font-text, inherit);
	color: var(--ea-texto);
}
.ea-mis-cerrar {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ea-vidrio-2);
	color: var(--ea-texto);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.ea-mis-cerrar:hover,
.ea-mis-cerrar:focus-visible {
	background: var(--ea-acento-suave);
	color: var(--ea-acento-texto);
}
.ea-mis-cuerpo {
	padding: 0 18px 18px;
}
.ea-mis-sec + .ea-mis-sec {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--ea-linea);
}
.ea-mis-sec__tit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 10px;
	font: 600 13px/1.2 var(--ea-font-text, inherit);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ea-texto-3);
}
.ea-mis-sec__tit span {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ea-vidrio-2);
	color: var(--ea-texto-2);
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}
.ea-mis-lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* sin esto la columna crece con el nombre más largo */
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ea-mis-auto {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px;
	border-radius: 12px;
	color: var(--ea-texto);
	text-decoration: none;
	transition: background-color 0.15s;
}
.ea-mis-auto:hover,
.ea-mis-auto:focus-visible {
	background: var(--ea-vidrio-2);
	color: var(--ea-texto);
}
/* La X para quitar un auto de la lista (2026-10-10). */
.ea-mis-lista li {
	position: relative;
}
.ea-mis-lista .ea-mis-auto {
	padding-right: 44px;
}
.ea-mis-quitar {
	position: absolute;
	top: 50%;
	right: 6px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ea-texto-3);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.15s, color 0.15s;
}
.ea-mis-quitar:hover,
.ea-mis-quitar:focus-visible {
	background: var(--ea-vidrio-2);
	color: var(--ea-texto);
}
.ea-mis-comp__celda {
	position: relative;
}
.ea-mis-quitar.is-chica {
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	background: var(--ea-superficie);
	box-shadow: 0 0 0 1px var(--ea-linea);
	color: var(--ea-texto);
	font-size: 16px;
	transform: none;
}
.ea-mis-quitar.is-chica:hover,
.ea-mis-quitar.is-chica:focus-visible {
	background: var(--ea-superficie-2);
}
.ea-mis-auto__foto {
	flex: 0 0 auto;
	width: 64px;
	height: 48px;
	border-radius: 9px;
	object-fit: cover;
	background: var(--ea-vidrio-2);
}
.ea-mis-auto__txt {
	min-width: 0;
}
.ea-mis-auto__txt b {
	display: -webkit-box;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* la versión suele estar al final del nombre: dos líneas antes de cortar */
}
.ea-mis-auto__txt small {
	display: block;
	margin-top: 2px;
	color: var(--ea-exito);
	font-size: 13px;
	font-weight: 600;
}
.ea-mis-vacio {
	margin: 0;
	color: var(--ea-texto-2);
	font-size: 13.5px;
	line-height: 1.45;
}
.ea-mis-accion {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin-top: 12px;
	padding: 0 16px;
	border: 1px solid var(--ea-acento-borde);
	border-radius: 12px;
	color: var(--ea-acento-texto);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}
.ea-mis-accion:hover,
.ea-mis-accion:focus-visible {
	background: var(--ea-acento-suave);
	color: var(--ea-acento-texto);
}
.ea-mis-accion.is-primaria {
	border-color: var(--ea-acento);
	background: var(--ea-acento);
	color: var(--ea-sobre-acento);
}
.ea-mis-accion.is-primaria:hover,
.ea-mis-accion.is-primaria:focus-visible {
	background: var(--ea-acento-fuerte);
	color: var(--ea-sobre-acento);
}
/* Los tres lugares del comparador. */
.ea-mis-comp {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 10px;
}
.ea-mis-comp__lugar {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
	background: var(--ea-vidrio-2);
	color: var(--ea-texto-3);
	font-size: 22px;
	text-decoration: none;
}
.ea-mis-comp__lugar.is-vacio {
	border: 1px dashed var(--ea-linea-2);
	background: transparent;
}
.ea-mis-comp__lugar.is-vacio:hover,
.ea-mis-comp__lugar.is-vacio:focus-visible {
	border-color: var(--ea-acento-borde);
	color: var(--ea-acento-texto);
}
.ea-mis-comp__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.is-sin-foto {
	display: block;
	background: var(--ea-vidrio-2);
}
/* Celular: desde abajo, a todo el ancho, con velo. */
@media (max-width: 767px) {
	.ea-mis-velo.is-abierto {
		background: var(--ea-velo);
	}
	.ea-mis-panel {
		top: auto !important;
		right: 0 !important;
		bottom: 0;
		left: 0;
		width: auto;
		max-height: 82vh;
		border-radius: 22px 22px 0 0;
		padding-bottom: env(safe-area-inset-bottom);
		transform: translateY(24px);
	}
	.ea-mis-cab::before {
		content: "";
		position: absolute;
		top: 7px;
		left: 50%;
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: var(--ea-linea-2);
		transform: translateX(-50%);
	}
	.ea-mis-cab {
		padding-top: 22px;
	}
	.ea-mis-auto__foto {
		width: 72px;
		height: 54px;
	}
}

/* ── 3 · Menú lateral (celular y tableta) ─────────────────────────────────── */
/* Servicios posventa: las monedas del Autoverso en fila, arriba de «Mis autos» (inc/mega-menu.php). */
.ea-posventa-menu {
	margin: 22px 0 0;
}
.ea-posventa-tit {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 12px;
	color: var(--ea-texto);
	font: 600 15px/1.2 var(--ea-font-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ea-posventa-tit small {
	color: var(--ea-acento-texto);
	font: 600 11.5px/1.2 var(--ea-font-text);
	letter-spacing: 0.08em;
}
.ea-posventa-fila {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
.ea-posventa-moneda {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 2px 8px;
	border: 1px solid var(--ea-linea);
	border-radius: 14px;
	background: var(--ea-vidrio);
	color: var(--ea-texto-2);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}
.ea-posventa-moneda img {
	width: 46px;
	height: 46px;
	transition: transform 0.2s;
}
.ea-posventa-moneda:hover,
.ea-posventa-moneda:focus-visible {
	border-color: var(--ea-acento-borde);
	color: var(--ea-texto);
}
.ea-posventa-moneda:active img {
	transform: scale(0.94);
}
.ea-mis-lateral {
	margin: 22px 0 0;
	padding: 14px 16px 8px;
	border: 1px solid var(--ea-linea-2);
	border-radius: 14px;
	background: var(--ea-vidrio);
}
.ea-mis-lateral__tit {
	margin: 0 0 6px;
	color: var(--ea-texto-3);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.ea-mis-lateral__fila {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	color: var(--ea-texto);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}
.ea-mis-lateral__fila + .ea-mis-lateral__fila {
	border-top: 1px solid var(--ea-linea);
}
.ea-mis-lateral__fila span {
	flex: 1 1 auto;
}
.ea-mis-lateral__fila b {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ea-acento-suave);
	color: var(--ea-acento-texto);
	font-size: 13px;
	font-weight: 700;
}
.ea-mis-lateral__fila:hover,
.ea-mis-lateral__fila:focus-visible {
	color: var(--ea-acento-texto);
}
.ea-mis-lateral__i {
	width: 20px;
	height: 20px;
	color: var(--ea-acento-texto);
}
.ea-mis-lateral + .ea-club-lateral {
	margin-top: 12px;
}

/* ── 4 · Barra del comparador con fotos (ea-coleccion.js) ─────────────────── */
.ea-comp-barra-autos {
	display: flex;
	gap: 6px;
}
.ea-comp-barra-lugar {
	position: relative;
	display: block;
	width: 52px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 8px;
	background: var(--ea-vidrio-2);
}
.ea-comp-barra-lugar img {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	object-fit: cover;
}
.ea-comp-barra-lugar.is-vacio {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--ea-linea-2);
	background: transparent;
	color: var(--ea-texto-3);
	font-size: 18px;
	text-decoration: none;
}
.ea-comp-barra-quitar {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 2px solid var(--ea-superficie-2);
	border-radius: 50%;
	background: var(--ea-texto);
	color: var(--ea-fondo);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
/* La barra ya trae las fotos a la izquierda: menos aire de ese lado, y nunca más ancha que la pantalla. */
.ea-comp-barra {
	max-width: calc(100vw - 24px);
	padding-left: 10px;
}
@media (max-width: 575px) {
	.ea-comp-barra {
		gap: 10px;
	}
	/* En celular las fotos ya dicen cuántos van: el texto sobra. */
	.ea-comp-barra-txt {
		display: none;
	}
	.ea-comp-barra-lugar {
		width: 44px;
		height: 34px;
	}
	.ea-comp-barra-lugar img {
		border-radius: 7px;
	}
}

/* ── 5 · Alerta de precio ya pedida (ea-alertas.js) ───────────────────────── */
/* `html` delante: gana también al :hover de la hoja clara, que pinta el fondo claro y deja la campana blanca. */
html .ea-icono-btn[data-ea-alerta][aria-pressed="true"],
html .ea-icono-btn[data-ea-alerta][aria-pressed="true"]:hover {
	border-color: var(--ea-acento);
	background: var(--ea-acento);
	color: var(--ea-sobre-acento);
}

/* Con el menú lateral abierto, los flotantes de abajo (Filtros, barra del comparador) no tapan «Mis autos». */
body:has(.wa-offcanvas-area.active) .ea-inv-abrir,
body:has(.wa-offcanvas-area.active) .ea-comp-barra {
	opacity: 0;
	pointer-events: none;
}

/* Hero de la portada (2026-10-10): la palabra del inicio rota por servicio, en el color de su moneda
   (assets/js/hero-rota.js). El ancho se anima para que el resto del título no salte. */
.ea-rota {
	display: inline-block;
	color: var(--ea-srv-morado);
	white-space: nowrap;
	vertical-align: bottom;
	transition: transform 0.26s ease, opacity 0.26s ease, width 0.3s ease, color 0.3s ease;
}
.ea-rota[data-tono="verde"] {
	color: var(--ea-srv-verde);
}
.ea-rota[data-tono="azul"] {
	color: var(--ea-srv-azul);
}
.ea-rota[data-tono="naranja"] {
	color: var(--ea-srv-naranja);
}
.ea-rota.is-sale {
	opacity: 0;
	transform: translateY(-0.3em);
}
.ea-rota.is-entra {
	opacity: 0;
	transform: translateY(0.3em);
	transition: none;
}
.ea-rota-medida {
	position: absolute;
	visibility: hidden;
	white-space: nowrap;
}

/* Firma del pie (2026-11-02): «Diseñado y desarrollado por Estiven Rivera · SDG», igual que en el CRM y los correos.
   «SDG» y, al pasar el mouse, tocarla o enfocarla, su tooltip «Soli Deo Gloria · «Solo a Dios la gloria»». Oscuro en los
   dos modos, como todo globo; sale hacia arriba y pegado al borde derecho. */
.ea-ft-autor {
	color: rgba(255, 255, 255, 0.82);
	font-weight: 600;
}
.ea-sdg {
	position: relative;
	font-weight: 600;
	letter-spacing: 0.08em;
	cursor: help;
	outline: none;
}
.ea-sdg:focus-visible {
	border-radius: 4px;
	box-shadow: 0 0 0 2px var(--ea-acento);
}
.ea-sdg-tip {
	position: absolute;
	right: -10px;
	bottom: calc(100% + 12px);
	z-index: 5;
	display: grid;
	gap: 2px;
	width: max-content;
	max-width: 240px;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--ea-night);
	box-shadow: var(--ea-sombra);
	color: var(--ea-sobre-acento);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.35;
	text-align: left;
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.ea-sdg-tip b {
	font-style: italic;
	font-weight: 600;
}
.ea-sdg-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 18px;
	border: 6px solid transparent;
	border-top-color: var(--ea-night);
}
.ea-sdg:hover .ea-sdg-tip,
.ea-sdg:focus .ea-sdg-tip {
	opacity: 1;
	transform: none;
}