/* ==========================================================================
   Grupo Jilong · tema «atardecer» para jilong.es  (PREVIEW 2026-10-26)
   Mismos tokens que jimi.uno (PR #14 feat/jimiuno-site-redesign-1026):
   ciruela #1d1621 → ámbar, texto crema, oro #f5c76a, titulares con serifa + cuerpo sans,
   tarjetas de vidrio, líneas doradas que se desvanecen, polvo de estrellas, aparición al hacer scroll.
   SOLO estilo: no cambia textos, URLs, formularios, scripts ni metadatos SEO.
   Se carga la última en <head>; js/group-sunset.js completa lo que el CSS no alcanza
   (estilos en línea con !important de las páginas generadas por InmoPc).
   ========================================================================== */
:root {
  --gx-bg: #1d1621;
  --gx-bg2: #2a1c24;
  --gx-bg3: #3a2230;
  --gx-fg: #fbf3e6;
  --gx-mut: #c9b6a6;
  --gx-line: rgba(245, 199, 106, 0.16);
  --gx-line2: rgba(245, 199, 106, 0.34);
  --gx-card: rgba(255, 236, 210, 0.045);
  --gx-card2: rgba(255, 236, 210, 0.08);
  --gx-acc: #f5c76a;
  --gx-acc2: #e08a3c;
  --gx-rose: #f2a7a0;
  --gx-ink: #16161a;
  --gx-max: 1160px;
  --gx-serif: Georgia, 'Songti SC', 'Noto Serif SC', 'Times New Roman', serif;
  --gx-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
  --gx-glow: 0 0 0 1px var(--gx-line), 0 18px 50px rgba(0, 0, 0, 0.28);
  --gx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gx-dust:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(245, 199, 106, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 72%, rgba(251, 243, 230, 0.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 28%, rgba(245, 199, 106, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 64%, rgba(251, 243, 230, 0.4) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 90% 12%, rgba(242, 167, 160, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 90%, rgba(245, 199, 106, 0.45) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 22% 46%, rgba(251, 243, 230, 0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 8%, rgba(245, 199, 106, 0.4) 50%, transparent 51%);
  color-scheme: dark;
}

/* Variables del tema anterior (cielo azul marino) reasignadas a la paleta atardecer:
   así todas las reglas antiguas que las usan heredan el nuevo tono sin tocar sus hojas. */
html:root {
  --bg-deep-space: #1a1320; --bg-space: #1d1621; --bg-space-2: #2a1c24; --bg-space-3: #3a2230; --bg-space-light: #2a1c24;
  --text-primary: #fbf3e6; --text-secondary: #e9dccb; --text-muted: #c9b6a6; --text-accent: #f5c76a;
  --accent-gold: #f5c76a; --accent-gold-light: #f8d68a; --accent-gold-dark: #e9a94a; --accent-cyan: #f5c76a; --accent-purple: #c98fb0; --accent-pink: #f2a7a0;
  --glass-bg: rgba(255, 236, 210, 0.05); --glass-bg-light: rgba(255, 236, 210, 0.05); --glass-border: rgba(245, 199, 106, 0.16);
  --border-glow: rgba(245, 199, 106, 0.3);
  --content-bg: transparent; --content-text: #fbf3e6; --content-text-secondary: #e9dccb; --content-text-muted: #c9b6a6; --content-border: rgba(245, 199, 106, 0.16);
  --galaxy-gradient: linear-gradient(135deg, #f8d68a 0%, #f5c76a 50%, #e9a94a 100%);
  --nebula-blue: linear-gradient(135deg, #2a1c24 0%, #3a2230 50%, #1d1621 100%);
  --nebula-cyan: linear-gradient(135deg, #2a1c24 0%, #4a2a2a 50%, #1d1621 100%);
  --nebula-pink: linear-gradient(135deg, #2d1a26 0%, #5a2a3a 40%, #1d1621 100%);
  --nebula-purple: linear-gradient(135deg, #2a1c2e 0%, #3a2238 50%, #1d1621 100%);
  --shadow-glow: 0 0 20px rgba(245, 199, 106, 0.22); --shadow-glow-cyan: 0 0 30px rgba(245, 199, 106, 0.12); --shadow-glow-purple: 0 0 30px rgba(201, 143, 176, 0.12);
  --jl-link: #f5c76a; --jl-link-hover: #ffe1a1;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', Arial, sans-serif;
  --font-serif: Georgia, 'Songti SC', 'Noto Serif SC', serif;
}
html:root { background: var(--gx-bg) !important; }
/* ---------- Fondo y tipografía base ---------- */
html { background: var(--gx-bg) !important; }
/* La plantilla mete <html class="lt-ie9"> (comentario condicional IE roto) y style.css fija .lt-ie9 .page{min-width:1200px}:
   en móvil la web real se ve a 1200px reducida. Se anula aquí (solo estilo). */
html:root.lt-ie9 .page, html:root .page { min-width: 0 !important; }
html:root body,
html:root body.starry-bg {
  background:
    radial-gradient(120% 60% at 80% -10%, rgba(214, 122, 58, 0.22), transparent 60%),
    radial-gradient(90% 60% at 0% 110%, rgba(120, 70, 150, 0.18), transparent 60%),
    linear-gradient(180deg, var(--gx-bg3) 0, var(--gx-bg2) 520px, var(--gx-bg) 1100px) !important;
  background-color: var(--gx-bg) !important;
  color: var(--gx-fg) !important;
  font-family: var(--gx-sans) !important;
  -webkit-font-smoothing: antialiased;
}
/* estrellas CSS del tema anterior (cielo azul marino) y su lienzo 3D a pantalla completa: fuera */
html:root body.starry-bg::before,
html:root body.starry-bg::after { display: none !important; }
#three-starry-bg, #three-starry-canvas, #jl-starfield-bg, #jl-starfield-canvas, .jl-group-bar { display: none !important; }
/* barra «outdated browser» (comentario condicional IE roto en la plantilla; también sale en producción) */
img[src*="ie8-panel"] { display: none !important; }
div:has(> a > img[src*="ie8-panel"]) { display: none !important; }

html:root body,
html:root body p, html:root body li, html:root body td, html:root body th, html:root body dd, html:root body dt,
html:root body label, html:root body span, html:root body small, html:root body div { font-family: var(--gx-sans); }
html:root body .fa, html:root body [class^="fa-"], html:root body [class*=" fa-"] { font-family: FontAwesome !important; }
html:root body p, html:root body li, html:root body td, html:root body dd { color: inherit; }

html:root body h1, html:root body h2,
html:root body .hero-title, html:root body .jl-section-header h2, html:root body .jl-dark-section h2,
html:root body .agile_inner_banner_info h2, html:root body .agile_inner_banner_info h3,
html:root body .TitInmuListado, html:root body .single-property h1, html:root body .titling h1 {
  font-family: var(--gx-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em;
  color: var(--gx-fg) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
html:root body h3, html:root body h4, html:root body h5, html:root body h6 { color: var(--gx-fg); font-family: var(--gx-sans) !important; }
html:root body h1 .gold, html:root body h2 .gold, html:root:root body.starry-bg main .jl-page-hero h1 span { color: var(--gx-acc) !important; -webkit-text-fill-color: var(--gx-acc) !important; background: none !important; }
html:root body a { color: var(--gx-acc); transition: color .25s; }
html:root body a:hover { color: #ffe1a1; }
html:root body hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gx-line2), transparent); }
html:root body ::selection { background: rgba(245, 199, 106, .35); color: var(--gx-fg); }
.seo-page-title { color: var(--gx-fg) !important; }

/* ---------- Cabecera (plantilla principal) ---------- */
html:root body .page > header,
html:root body header:has(.brand) {
  position: relative;
  z-index: 40;
  background: color-mix(in srgb, var(--gx-bg) 92%, transparent) !important;
  /* sin backdrop-filter: crearía bloque contenedor para el selector de idioma (position:fixed) y saltaría al moverlo a <body> */
  border-bottom: 1px solid var(--gx-line) !important;
  box-shadow: none !important;
}
html:root body header .brand img,
html:root body .brand img {
  content: url(/images/brand/jilong-logo-cream-h120.webp);
  height: 34px !important; width: auto !important; max-width: 70vw; object-fit: contain;
}
html:root body .stuck_container,
html:root body #stuck_container,
html:root body .stuck_container.isStuck {
  background: color-mix(in srgb, var(--gx-bg) 82%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--gx-line) !important;
  border-bottom: 1px solid var(--gx-line) !important;
  box-shadow: none !important;
}
html:root body .sf-menu > li > a,
html:root body .nav .sf-menu a {
  color: var(--gx-mut) !important;
  font-family: var(--gx-sans) !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
  background: transparent !important;
  border-color: transparent !important;
}
html:root body .sf-menu > li > a:hover,
html:root body .sf-menu > li.active > a,
html:root body .sf-menu > li.sfHover > a { color: var(--gx-fg) !important; box-shadow: inset 0 -2px 0 var(--gx-acc) !important; }
html:root body .sf-menu > li + li::before, html:root body .sf-menu > li::before, html:root body .sf-menu > li::after { background: var(--gx-line) !important; }
html:root body .sf-menu ul, html:root body .sf-menu ul li a { background: var(--gx-bg2) !important; color: var(--gx-fg) !important; }
html:root body .jl-hamburger .jl-ham-line { background: var(--gx-fg) !important; }

/* selector de idioma */
html:root body .jl-lang-switcher .jl-lang-btn {
  background: rgba(255, 236, 210, .04) !important;
  border: 1px solid var(--gx-line2) !important;
  color: var(--gx-fg) !important;
  box-shadow: none !important;
}
html:root body .jl-lang-switcher .jl-lang-btn.active {
  background: var(--gx-acc) !important;
  color: var(--gx-ink) !important;
  border-color: transparent !important;
}

/* ---------- Portada: héroe con cielo ---------- */
html:root body .camera_container {
  position: relative;
  min-height: min(78vh, 760px);
  padding: 260px 20px 96px !important; /* franja superior reservada para la palabra de partículas: fija desde el primer pintado (CLS 0) */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 72% 12%, rgba(214, 122, 58, 0.55), transparent 60%),
    radial-gradient(70% 70% at 18% 90%, rgba(120, 70, 150, 0.35), transparent 65%),
    linear-gradient(180deg, #3a2230 0%, #2a1c24 55%, var(--gx-bg) 100%) !important;
}
html:root body .camera_container::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--gx-dust); background-size: 900px 700px; opacity: .8;
}
html:root body .camera_container > .gx-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html:root body .camera_container > .gx-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html:root body .camera_container > *:not(.gx-sky) { position: relative; z-index: 1; }
html:root body .camera_container .hero-content { max-width: 880px; margin: 0 auto; text-align: center; }
html:root body .camera_container .hero-title {
  font-size: clamp(40px, 6.4vw, 76px) !important;
  line-height: 1.05 !important;
  margin: 0 auto 22px !important;
}
html:root body .camera_container .hero-subtitle { color: #e9dccb !important; font-size: clamp(18px, 2vw, 21px) !important; font-weight: 400 !important; }


/* Botones (todas las plantillas) */
html:root body .hero-btn, html:root body .jl-btn-gold, html:root body .jl-cta-btn, html:root body .jl-dark-section .jl-cta-btn,
html:root body input[type="submit"], html:root body button[type="submit"], html:root body .btn-primary,
html:root body .mailform button, html:root body .jl-form-card button, html:root body a.btn, html:root body .btn-default {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, #f8d68a, var(--gx-acc) 55%, #e9a94a) !important;
  color: var(--gx-ink) !important;
  -webkit-text-fill-color: var(--gx-ink) !important;
  border: 1px solid transparent !important;
  font-family: var(--gx-sans) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 24px rgba(245, 199, 106, 0.22) !important;
  transition: transform .35s var(--gx-ease), box-shadow .35s var(--gx-ease);
}
html:root body .hero-btn.hero-btn-outline {
  background: rgba(255, 236, 210, .04) !important;
  color: var(--gx-fg) !important; -webkit-text-fill-color: var(--gx-fg) !important;
  border-color: rgba(251, 243, 230, .5) !important;
  box-shadow: none !important;
}
html:root body .hero-btn:hover, html:root body .jl-btn-gold:hover, html:root body .jl-cta-btn:hover,
html:root body input[type="submit"]:hover, html:root body button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(245, 199, 106, .28) !important; }

/* ---------- Héroes de página interior ---------- */
html:root:root body.starry-bg main section.jl-page-hero,
html:root body .jl-page-hero,
html:root body .agile_inner_banner_info,
html:root body .banner1, html:root body .w3layouts_banner_info {
  position: relative;
  background:
    radial-gradient(90% 80% at 78% 0%, rgba(214, 122, 58, 0.42), transparent 60%),
    radial-gradient(60% 70% at 10% 100%, rgba(120, 70, 150, 0.30), transparent 65%),
    linear-gradient(180deg, #3a2230 0%, #2a1c24 70%, var(--gx-bg) 100%) !important;
  border: 0 !important;
}
html:root body .jl-page-hero::before { background-image: var(--gx-dust) !important; background-size: 900px 700px !important; opacity: .8 !important; }
html:root body .jl-page-hero h1 { font-size: clamp(34px, 5vw, 60px) !important; line-height: 1.08 !important; }
html:root body .jl-page-hero .jl-hero-subtitle { color: #e9dccb !important; }
html:root body .jl-hero-breadcrumb, html:root body .jl-hero-breadcrumb a { color: var(--gx-acc) !important; letter-spacing: .06em; }
html:root body .jl-hero-divider, html:root body .jl-section-header h2::after, html:root body .jl-section-label + h2::after {
  background: linear-gradient(90deg, transparent, var(--gx-acc), transparent) !important;
  border: 0 !important; height: 1px !important; width: 160px !important;
}
html:root body .jl-section-header h2 { border-bottom: 0 !important; padding-bottom: 14px; background-image: linear-gradient(90deg, transparent, var(--gx-line2), transparent) !important; background-size: 100% 1px !important; background-position: bottom !important; background-repeat: no-repeat !important; }
html:root body .jl-section-label, html:root body .jl-section-label span { color: var(--gx-acc) !important; background: transparent !important; border-color: var(--gx-line2) !important; letter-spacing: .1em; }

/* ---------- Secciones: separador dorado + polvo ---------- */
html:root body main > section:not(.camera_container):not(.jl-page-hero),
html:root body .jl-section { position: relative; background-color: transparent !important; }
html:root body main > section:not(.camera_container):not(.jl-page-hero) + section::before {
  content: ''; position: absolute; top: 0; left: 50%; width: min(1160px, 100% - 40px); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gx-line2), transparent); pointer-events: none;
}
html:root body main > section:nth-of-type(3n):not(.camera_container):not(.jl-page-hero) { background-image: var(--gx-dust) !important; background-size: 900px 700px !important; }
html:root body .jl-dark-section {
  background:
    radial-gradient(70% 55% at 85% 0%, rgba(224, 138, 60, 0.18), transparent 60%),
    radial-gradient(50% 45% at 10% 100%, rgba(120, 70, 150, 0.2), transparent 60%),
    var(--gx-bg2) !important;
  border-color: var(--gx-line) !important;
  border-radius: 0 !important;
}

/* ---------- Tarjetas de vidrio ---------- */
html:root body .jl-feature-card, html:root body .jl-contact-card, html:root body .jl-form-card, html:root body .jl-glass-card,
html:root body .jl-counter-item, html:root body .banner_wr .banner > li > a, html:root body .jl-highlight-box,
html:root body .jl-faq-item, html:root body .jl-pricing-grid > *, html:root body .category-card, html:root body .box,
html:root body .gx-surf {
  background: linear-gradient(160deg, var(--gx-card2), var(--gx-card)) !important;
  border: 1px solid var(--gx-line) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  color: var(--gx-fg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html:root body .gx-surf { border-radius: 14px !important; }
html:root body .gx-surf-flat { background: transparent !important; box-shadow: none !important; border-color: var(--gx-line) !important; }
html:root body .jl-feature-card, html:root body .jl-contact-card, html:root body .jl-glass-card, html:root body .jl-counter-item,
html:root body .banner_wr .banner > li > a, html:root body .category-card {
  transition: transform .45s var(--gx-ease), border-color .3s, box-shadow .45s var(--gx-ease);
}
html:root body .jl-feature-card:hover, html:root body .jl-contact-card:hover, html:root body .jl-glass-card:hover, html:root body .jl-counter-item:hover,
html:root body .banner_wr .banner > li > a:hover, html:root body .category-card:hover {
  transform: translateY(-4px);
  border-color: var(--gx-line2) !important;
  box-shadow: var(--gx-glow), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
html:root body .jl-counter-number, html:root body .jl-step-number, html:root body .price, html:root body .price_wrap, html:root body .icona_precio {
  font-family: var(--gx-serif) !important;
  color: var(--gx-acc) !important; -webkit-text-fill-color: var(--gx-acc) !important; background: none !important;
}
html:root body .jl-counter-label { color: var(--gx-mut) !important; }
/* iconos de línea en pastilla dorada (como .sp-ico) */
html:root body .jl-feature-icon, html:root body .jl-contact-icon, html:root body .box .icon {
  background: rgba(245, 199, 106, .1) !important;
  border: 1px solid rgba(245, 199, 106, .22) !important;
  color: var(--gx-acc) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html:root body .jl-feature-icon i, html:root body .jl-contact-icon i { color: var(--gx-acc) !important; }
html:root body .banner_wr .banner > li h3, html:root body .jl-feature-card h3 { color: var(--gx-fg) !important; }
html:root body .banner_wr .banner > li img { filter: sepia(.35) saturate(1.3) hue-rotate(-8deg); }

/* ---------- Formularios ---------- */
html:root body input[type="text"], html:root body input[type="email"], html:root body input[type="tel"], html:root body input[type="number"],
html:root body input[type="search"], html:root body input[type="password"], html:root body input[type="date"], html:root body input:not([type]),
html:root body textarea, html:root body select {
  background: rgba(255, 236, 210, .05) !important;
  color: var(--gx-fg) !important;
  -webkit-text-fill-color: var(--gx-fg) !important;
  border: 1px solid var(--gx-line2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: var(--gx-sans) !important;
}
html:root body select option { background: var(--gx-bg2); color: var(--gx-fg); }
html:root body input::placeholder, html:root body textarea::placeholder { color: rgba(201, 182, 166, .75) !important; -webkit-text-fill-color: rgba(201, 182, 166, .75) !important; }
html:root body input:focus, html:root body textarea:focus, html:root body select:focus { outline: none !important; border-color: var(--gx-acc) !important; box-shadow: 0 0 0 3px rgba(245, 199, 106, .18) !important; }
html:root body input[type="checkbox"], html:root body input[type="radio"] { accent-color: var(--gx-acc); }
html:root body label { color: var(--gx-mut) !important; }

/* ---------- Iframes del buscador InmoPc (contenido de terceros, se queda en «papel») ---------- */
html:root body .jl-iframe-wrap iframe, html:root body iframe[src*="recursos/"] {
  border-radius: 16px !important;
  border: 1px solid var(--gx-line2) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .35) !important;
  background: #f6f4ef !important;
  max-width: 100%;
}

/* ---------- Plantillas InmoPc (fichas, listados, buscador) ---------- */
html:root body .containerO, html:root body .container, html:root body .row, html:root body .single-property, html:root body .main,
html:root body .listado, html:root body .house-list, html:root body .list_house, html:root body .gallery { background-color: transparent !important; }
html:root body .containerO .four.columns { background: linear-gradient(160deg, var(--gx-card2), var(--gx-card)) !important; border: 1px solid var(--gx-line) !important; color: var(--gx-fg) !important; }
html:root body .containerO > .row:first-child { background: color-mix(in srgb, var(--gx-bg) 80%, transparent) !important; border-bottom: 1px solid var(--gx-line) !important; }
html:root body img.logoSup, html:root body #divlogo img, html:root body img[alt="logo"][src*="logo.jpg"] {
  content: url(/images/brand/jilong-logo-cream-h120.webp);
  height: 40px !important; width: auto !important; max-width: 60vw;
}
html:root body .caract, html:root body .caract_wrap > div, html:root body .checks li, html:root body .ribbon-banner {
  background: var(--gx-card) !important; border-color: var(--gx-line) !important; color: var(--gx-fg) !important; border-radius: 10px;
}
html:root body .ico_caract img, html:root body img[class*="icona_"] { filter: invert(.88) sepia(.4) saturate(2) hue-rotate(-12deg) brightness(1.05); }
html:root body #volver { background: var(--gx-card2) !important; color: var(--gx-fg) !important; border: 1px solid var(--gx-line2) !important; border-radius: 99px !important; }
html:root body .sp-thumbnail-container, html:root body .sp-thumbnails-container { background: transparent !important; }
html:root body .pagination > li > a, html:root body .pagination > li > span, html:root body .w3-agileits-paging a {
  background: var(--gx-card) !important; color: var(--gx-fg) !important; border-color: var(--gx-line2) !important;
}
html:root body .pagination > .active > a, html:root body .pagination > .active > span { background: var(--gx-acc) !important; color: var(--gx-ink) !important; }

/* ---------- Blog (plantilla w3layouts) ---------- */
html:root body .navbar-default, html:root body .agileits_w3layouts_banner_nav, html:root body .header, html:root body .banner_top {
  background: color-mix(in srgb, var(--gx-bg) 82%, transparent) !important;
  border-color: var(--gx-line) !important;
}
html:root body .navbar-default .navbar-nav > li > a { color: var(--gx-mut) !important; }
html:root body .navbar-default .navbar-nav > li > a:hover, html:root body .navbar-default .navbar-nav > .active > a { color: var(--gx-fg) !important; background: transparent !important; }
html:root body .navbar-toggle .icon-bar { background: var(--gx-fg) !important; }
html:root body .w3-posts-grid-right h4 a, html:root body .posts-grid-right h4 a, html:root body .event-left1-right h4 a,
html:root body .w3l-posts h4 a, html:root body .wthree_blog_events_list a { color: var(--gx-fg) !important; font-family: var(--gx-serif) !important; }
html:root body .tags1 a, html:root body .w3layouts-tags a, html:root body .tags a {
  background: transparent !important; color: var(--gx-acc) !important; border: 1px solid var(--gx-line2) !important; border-radius: 99px !important;
}
html:root body .w3ls-categories a, html:root body .categories a { color: var(--gx-mut) !important; }
html:root body .w3ls-categories a:hover, html:root body .categories a:hover { color: var(--gx-acc) !important; }
html:root body img.img-responsive { border-radius: 14px; }

/* ---------- Pie ---------- */
html:root body footer {
  position: relative;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(224, 138, 60, .10), transparent 60%),
    var(--gx-bg) !important;
  border-top: 1px solid var(--gx-line2) !important;
  color: var(--gx-mut) !important;
}
html:root body footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--gx-dust); background-size: 900px 700px; opacity: .55;
}
html:root body footer > * { position: relative; }
html:root body footer h3, html:root body .footer-brand h3 { font-family: var(--gx-serif) !important; color: var(--gx-fg) !important; letter-spacing: .12em; font-weight: 400 !important; }
html:root body footer .footer-contact-item i { color: var(--gx-acc) !important; }
html:root body footer a, html:root body footer a.inf { color: var(--gx-mut) !important; }
html:root body footer a:hover { color: var(--gx-acc) !important; }
html:root body footer .well1, html:root body .well1 { background: transparent !important; }

/* ---------- Banner de cookies y CTA móvil ---------- */
html:root body #infobox3 { background: color-mix(in srgb, var(--gx-bg2) 92%, transparent) !important; border-top: 1px solid var(--gx-line2); backdrop-filter: blur(12px); }
html:root body #infobox3 a { border-color: var(--gx-line2) !important; border-radius: 99px; padding: 4px 12px !important; color: var(--gx-fg) !important; }
html:root body .jl-mobile-cta { background: linear-gradient(135deg, #f8d68a, var(--gx-acc) 55%, #e9a94a) !important; color: var(--gx-ink) !important; }

/* ---------- Chat (solo color del botón; el widget conserva su lógica) ---------- */
html:root body #jilong-chat-toggle { background: linear-gradient(135deg, #f8d68a, var(--gx-acc) 55%, #e9a94a) !important; color: var(--gx-ink) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .35) !important; }
html:root body #jilong-chat-header { background: linear-gradient(135deg, #3a2230, #2a1c24) !important; color: var(--gx-fg) !important; border-bottom: 1px solid var(--gx-line2) !important; }

/* ---------- Aparición al hacer scroll ---------- */
.gx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--gx-ease), transform .8s var(--gx-ease); }
.gx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gx-reveal, .jl-reveal, .jl-reveal-left, .jl-reveal-right, .jl-reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  html:root body .jl-feature-card:hover, html:root body .jl-contact-card:hover, html:root body .jl-glass-card:hover, html:root body .jl-counter-item:hover,
  html:root body .banner_wr .banner > li > a:hover, html:root body .hero-btn:hover { transform: none !important; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
  html:root body .camera_container { min-height: 0; padding: 110px 16px 64px !important; }
  html:root body .jl-page-hero { padding-left: 16px !important; padding-right: 16px !important; }
  html:root body header .brand img, html:root body .brand img { height: 28px !important; }
  html:root body img, html:root body iframe, html:root body table, html:root body video { max-width: 100% !important; }
  html:root body .containerO, html:root body .container { max-width: 100% !important; }
}

/* imágenes rotas (iconos de InmoPc que ya faltan en producción): se ocultan en vez de mostrar el texto alternativo */
img.gx-broken { display: none !important; }

/* ---------- Menú móvil ---------- */
/* starry-interactions.js crea un 2.º botón (.jl-mobile-menu-toggle) aunque la página ya trae .jl-hamburger: se muestra uno solo */
html:root body:has(.jl-hamburger) .jl-mobile-menu-toggle { display: none !important; }
html:root body .jl-hamburger, html:root body .jl-mobile-menu-toggle {
  background: rgba(255, 236, 210, .05) !important;
  border: 1px solid var(--gx-line2) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html:root body .jl-mobile-menu-toggle span { background: var(--gx-fg) !important; }
html:root body .sf-menu.jl-nav-open, html:root body .sf-menu.jl-menu-open, html:root body nav.jl-menu-open {
  background: color-mix(in srgb, var(--gx-bg2) 96%, transparent) !important;
  border: 1px solid var(--gx-line) !important;
  border-radius: 16px !important;
}
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
}
html:root body input[type="checkbox"], html:root body input[type="radio"] {
  width: 18px !important; height: 18px !important; min-width: 0 !important; padding: 0 !important;
  background: transparent !important; border-radius: 4px !important; vertical-align: middle;
}

/* ---------- Capas 3D (js/group-3d.js): el contenido siempre por encima ---------- */
html:root body .gx3d-layer ~ * { position: relative; z-index: 1; }
html:root body .jl-dark-section, html:root body .jl-page-hero { position: relative; overflow: hidden; }
html:root body .jl-dark-section { min-height: 300px; }

/* Blog / plantillas InmoPc: el logo antiguo llevaba mix-blend-mode:multiply (para fundir el JPG blanco); con el logo crema lo apaga */
html:root body img[src*="jilong-logo-cream"] { mix-blend-mode: normal !important; filter: none !important; opacity: 1 !important; }
html:root body .navbar-toggle { background: rgba(255, 236, 210, .05) !important; border: 1px solid var(--gx-line2) !important; border-radius: 12px !important; }

/* LCP: el titular del héroe es ahora el elemento más grande → visible desde el primer pintado (sin aparición diferida) */
html:root body .camera_container .jl-reveal, html:root body .camera_container .hero-content,
html:root body .jl-page-hero.animate-on-scroll, html:root body .jl-page-hero .jl-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Tipografía única del sistema en todo el texto (evita el «swap» tardío de Poppins/Roboto/Open Sans que cargan las hojas
   antiguas: cambiaba el alto del banner de cookies y desplazaba la página → CLS). Especificidad baja (:where) para que
   los titulares con serifa sigan ganando; iconos (FontAwesome/ionicons/entypo) excluidos. */
html:root body :where(p, li, td, th, label, small, dd, dt, a, span, div, h3, h4, h5, h6, input, textarea, select, button, strong, em, b):where(:not(.fa, [class*="fa-"], [class*="icon"], [class*="ion-"], [class*="entypo"], [class*="websymbol"])) {
  font-family: var(--gx-sans) !important;
}

/* selector de idioma: fijo y fuera del flujo desde el primer pintado (lang-switcher.js lo mueve a <body> después) */
html:root body .jl-lang-switcher { position: fixed !important; top: 12px !important; right: 16px !important; z-index: 999999 !important; margin: 0 !important; }