/* Bootstrap 3 (incluido por ListingPro) define html { font-size: 10px }, lo que
   deja todos los valores rem de este diseno al 62.5% de su tamano real.
   El tema no usa rem de forma nativa, asi que restablecemos la raiz a 16px. */
html {
  font-size: 16px;
}

/* Etiqueta sr-only de AddToAny: mal posicionada, desborda el viewport en móvil */
.a2a_label {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  overflow: hidden;
  height: 1px !important;
  width: 1px !important;
}

.ub-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 1.75rem);
  width: 100%;
}

.header-without-topbar .lp-header-overlay {
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.55) 0%, rgba(2, 6, 23, 0.85) 100%);
}

.header-without-topbar {
  z-index: 50;
}

.lp-menu-bar.header-bg-color-class {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  position: relative;
  z-index: 60;
  transition: background var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease), padding var(--ub-dur) var(--ub-ease);
  height: auto;
  min-height: 80px;
  /* 79px + 1px de border-bottom = 80px exactos de barra (antes el border-box
     de 80px metia el border dentro; el contenido solo crece si hay wrap). */
  line-height: 79px;
  /* El tema mete padding 10px vertical (main.css .lp-menu-bar { padding: 10px 0 });
     con height fijo eso desbordaba 20px. Con height auto y sin padding la barra
     queda exacta en 80px y solo crece si el menu llega a wrappear. */
  padding-top: 0;
  padding-bottom: 0;
}

.lp-menu-bar.header-bg-color-class.lp-menu-bar-sticky {
  box-shadow: var(--ub-shadow-sm);
  height: auto;
  min-height: 68px;
  line-height: 67px;
  padding-top: 0;
  padding-bottom: 0;
  background: rgba(255, 255, 255, 0.97);
}

.lp-logo a img,
.lp-logo img,
.lp-menu-bar .logo img,
.lp-menu-bar .lp-logo img,
.header-container .logo img {
  max-height: 62px !important;
  height: auto !important;
  width: auto !important;
  vertical-align: middle;
  filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.16));
  transition: max-height var(--ub-dur) var(--ub-ease), filter var(--ub-dur) var(--ub-ease);
}

.lp-logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.lp-menu-bar-sticky .lp-logo a img,
.lp-menu-bar-sticky .lp-logo img {
  max-height: 54px !important;
}

.lp-menu a {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ub-ink-soft) !important;
  text-transform: none;
  padding: 0 14px;
}

.lp-menu a:hover {
  color: var(--ub-primary) !important;
}

.lp-menu a::after,
.lp-menu li a::after {
  display: none;
}

/* Flecha indicadora en ítems con submenú (ej. Categorías) */
.lp-menu .menu-item-has-children > a::after {
  content: "\f107";
  display: inline-block;
  font-family: FontAwesome;
  font-size: 0.75em;
  margin-left: 6px;
  color: var(--ub-faint);
  transition: transform var(--ub-dur) var(--ub-ease), color var(--ub-dur) var(--ub-ease);
}

.lp-menu .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
  color: var(--ub-primary);
}

.lp-joinus-icon .lp-join-now {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lp-joinus-icon .lp-join-now > span {
  margin-right: 5px;
}

.lp-joinus-icon .lp-join-now a {
  font-family: var(--ub-font-body);
  font-size: 0.9063rem;
  font-weight: 600;
  color: var(--ub-ink-soft);
}

.lp-joinus-icon .lp-join-now a:hover {
  color: var(--ub-primary);
}

.lp-add-listing-btn ul li a {
  background: var(--ub-accent);
  background-image: linear-gradient(135deg, var(--ub-accent) 0%, var(--ub-accent-strong) 100%);
  color: #ffffff !important;
  font-family: var(--ub-font-body);
  font-size: 0.9063rem;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: var(--ub-radius-pill);
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35);
  border: 0;
  line-height: 1.2;
  transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease), background var(--ub-dur) var(--ub-ease);
}

.lp-add-listing-btn ul li a:hover {
  background-image: linear-gradient(135deg, var(--ub-accent-strong) 0%, var(--ub-accent-strong) 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(249, 115, 22, 0.42);
  color: #ffffff !important;
}

.lp-add-listing-btn ul li a i {
  margin-right: 7px;
  font-size: 0.8125rem;
}

.mobile-nav-icon .nav-icon {
  border: 1.5px solid var(--ub-line);
  border-radius: var(--ub-radius-sm);
  padding: 8px 10px;
}

.mobile-nav-icon .nav-icon .icon-bar {
  background: var(--ub-ink);
}

.home-categories-area {
  position: relative;
  z-index: 5;
}

.home-categories-area .lp-home-categoires,
.lp-home-categoires {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: -34px;
  padding: 0;
  list-style: none;
}

.home-categories-area .lp-home-categoires li,
.lp-home-categoires li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
}

.home-categories-area .lp-home-categoires li a,
.lp-home-categoires li a {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--ub-radius-pill);
  padding: 10px 18px;
  box-shadow: var(--ub-shadow-xs);
  font-family: var(--ub-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ub-ink-soft);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease), border-color var(--ub-dur) var(--ub-ease), color var(--ub-dur) var(--ub-ease);
}

.home-categories-area .lp-home-categoires li a:hover,
.lp-home-categoires li a:hover {
  transform: translateY(-3px);
  box-shadow: var(--ub-shadow-md);
  border-color: var(--ub-primary);
  color: var(--ub-primary);
}

.home-categories-area .lp-home-categoires img,
.lp-home-categoires img,
.home-categories-area .lp-home-categoires i,
.lp-home-categoires i {
width: 18px;
  height: 18px;
  font-size: 16px;
  line-height: 1;
}

.lp-home-banner-contianer .page-header-overlay {
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.18) 0%, rgba(2, 6, 23, 0.55) 100%);
}

.lp-home-banner-contianer-inner h1,
.header-front-page-wrap .lp-home-banner-contianer-inner h1 {
  font-family: var(--ub-font-display);
  font-size: var(--ub-text-hero);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(2, 6, 23, 0.35);
}

.lp-home-banner-contianer .lp-banner-browse-txt,
.lp-home-banner-contianer-inner p {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--ub-font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(2, 6, 23, 0.4);
}

.lp-home-banner-contianer .lp-search-bar,
.lp-shortcode-search .lp-search-bar {
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--ub-radius-xl);
  box-shadow: var(--ub-shadow-lg);
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 16px;
  margin-top: 34px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
}

.lp-shortcode-search .lp-search-bar .form-group.lp-suggested-search {
  width: 42%;
}

.lp-shortcode-search .lp-search-bar .form-group.lp-location-search {
  width: 33%;
}

.lp-shortcode-search .lp-search-bar .form-group.pull-right {
  width: 22%;
}

.lp-search-bar .form-group.lp-suggested-search,
.lp-search-bar .form-group.lp-location-search {
  display: flex;
  align-items: center;
  margin: 0;
  position: relative;
}

.lp-search-bar .input-group-addon.lp-border {
  background: transparent;
  border: 0;
  font-family: var(--ub-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ub-muted);
  padding: 0 14px 0 10px;
  border-right: 1px solid var(--ub-line);
}

.lp-search-bar .what-placeholder input.lp-search-input,
.lp-search-bar .pos-relative input.lp-search-input,
.lp-search-bar .ui-widget input.form-control,
.lp-search-bar .ui-widget.border-dropdown input#cities,
.lp-search-bar select#searchlocation {
  border: 0;
  box-shadow: none;
  background: transparent;
  height: 48px;
  font-family: var(--ub-font-body);
  font-size: 0.9375rem;
  color: var(--ub-ink);
  padding: 0 42px 0 0;
  width: 100%;
}

.lp-search-bar .ui-widget.border-dropdown {
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  width: 100%;
}

.lp-search-bar .ui-widget.border-dropdown .chosen-container-single .chosen-single,
.lp-search-bar select#searchlocation {
  border: 0;
  background: transparent;
  height: 48px;
  line-height: 48px;
  box-shadow: none;
  font-family: var(--ub-font-body);
  font-size: 0.9375rem;
  color: var(--ub-ink);
}

.lp-search-bar i.fa-crosshairs {
  color: var(--ub-primary);
  font-size: 1rem;
  margin-right: 8px;
}

.lp-search-bar .lp-search-bar-right {
  margin: 0;
  text-align: right;
}

.lp-search-bar .lp-search-btn {
  background: var(--ub-primary);
  background-image: linear-gradient(135deg, var(--ub-primary) 0%, var(--ub-primary-strong) 100%);
  color: #ffffff;
  border: 0;
  border-radius: var(--ub-radius-md);
  font-family: var(--ub-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 14px 26px;
  width: 100%;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease), background var(--ub-dur) var(--ub-ease);
}

.lp-search-bar .lp-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.45);
  background-image: linear-gradient(135deg, var(--ub-primary-strong) 0%, var(--ub-primary-strong) 100%);
}

.lp-shortcode-search .lp-search-icon {
  display: none;
}

.classic-view-grid-container {
  background: var(--ub-surface);
  border: 1px solid var(--ub-line-soft);
  border-radius: var(--ub-radius-lg);
  box-shadow: var(--ub-shadow-sm) !important;
  overflow: hidden;
  transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease), border-color var(--ub-dur) var(--ub-ease);
  height: 100%;
}

.lp-grid-box-contianer:hover .classic-view-grid-container,
.classic-view-grid-container:hover {
  transform: translateY(-6px);
  box-shadow: var(--ub-shadow-md) !important;
  border-color: rgba(37, 99, 235, 0.35);
}

.classic-view-grid-thumbnail {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.classic-view-grid-thumbnail img {
  width: 100%;
  height: 218px;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ub-ease), filter 600ms var(--ub-ease);
}

.classic-view-grid-container:hover .classic-view-grid-thumbnail img {
  transform: scale(1.06);
}

.classic-view-grid-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0) 55%, rgba(2, 6, 23, 0.35) 100%);
  pointer-events: none;
}

.classic-view-grid-saved-options {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

.classic-view-grid-saved-options .lp-post-quick-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.classic-view-grid-saved-options .lp-post-quick-links li {
  margin: 0;
  padding: 0;
}

.classic-view-grid-saved-options .lp-post-quick-links li a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ub-ink-soft);
  border-radius: 50%;
  box-shadow: var(--ub-shadow-sm);
  font-size: 0.9375rem;
  line-height: 1;
  transition: transform var(--ub-dur) var(--ub-ease), background var(--ub-dur) var(--ub-ease), color var(--ub-dur) var(--ub-ease);
}

.classic-view-grid-saved-options .lp-post-quick-links li a:hover {
  transform: translateY(-2px) scale(1.06);
  color: var(--ub-primary);
  background: var(--ub-surface);
}

.classic-view-grid-saved-options .lp-post-quick-links li a.lp-listing-favrt.lp-favrt-active {
  background: var(--ub-accent-soft);
  color: var(--ub-accent-strong);
}

.classic-view-grids-content-area {
  padding: 16px 16px 0;
}

.classic-view-grid-container .lp-h4,
.classic-view-grid-container .classic-view-grid-content-area .lp-h4 {
  font-size: var(--ub-text-card-title);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 0 0 10px;
}

.classic-view-grid-container .lp-h4 a {
  color: var(--ub-ink);
}

.classic-view-grid-container .lp-h4 a:hover {
  color: var(--ub-primary);
}

.lp-grid-box-contianer .classic-category-loop-main,
.classic-view-grid-container .classic-category-loop-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.classic-view-grid-container .classic-category-loop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ub-primary-ghost);
  border-radius: var(--ub-radius-pill);
  padding: 6px 12px;
  font-family: var(--ub-font-body);
  font-size: var(--ub-text-xs);
  font-weight: 600;
  color: var(--ub-primary-strong);
}

.classic-view-grid-container .classic-category-loop img {
  width: 14px;
  height: 14px;
}

.classic-view-grid-container .classic-category-loop-price {
  font-family: var(--ub-font-display);
  font-size: var(--ub-text-sm);
  font-weight: 700;
  color: var(--ub-ink);
}

.classic-view-grid-container .lp-listing-content-grid {
  margin-top: 6px;
}

.classic-view-grid-container .lp-classic-reviews ul.lp-listing-stars li i,
.lp-classic-reviews i {
  font-size: 0.8125rem;
}

.classic-view-grid-container .lp-classic-reviews {
  margin: 0 0 10px;
}

.lp-grid-box-bottom, .classic-view-grid-container .lp-grid-box-bottom {
  border-top: 1px solid var(--ub-line-soft);
  margin-top: 14px;
  padding: 12px 16px;
}

.lp-grid-box-bottom .show,
.lp-grid-box-bottom .content,
.classic-view-grid-container .lp-grid-box-bottom .show,
.classic-view-grid-container .lp-grid-box-bottom .content {
  font-family: var(--ub-font-body);
  font-size: var(--ub-text-sm);
  font-weight: 500;
  color: var(--ub-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
}

.lp-grid-box-bottom .show i,
.classic-view-grid-container .lp-grid-box-bottom .show i {
  color: var(--ub-primary);
  font-size: 0.9375rem;
}

.lp-grid-box-bottom .show a,
.classic-view-grid-container .lp-grid-box-bottom .show a {
  color: var(--ub-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-new-grid-bottom-button {
  padding: 8px 16px 16px;
}

.lp-new-grid-bottom-button ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.lp-new-grid-bottom-button ul li {
  flex: 1;
  margin: 0;
  padding: 0;
}

.lp-new-grid-bottom-button ul li a,
.lp-new-grid-bottom-button .show-number-wrap p,
.lp-new-grid-bottom-button .show-number-wrap a,
.lp-new-grid-bottom-button .show-number-wrap span {
  font-family: var(--ub-font-body);
  font-size: var(--ub-text-xs);
  font-weight: 600;
  color: var(--ub-ink-soft);
}

.lp-new-grid-bottom-button ul li a,
.lp-new-grid-bottom-button .show-number-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--ub-primary-ghost);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: var(--ub-radius-md);
  padding: 10px 8px;
  transition: background var(--ub-dur) var(--ub-ease), color var(--ub-dur) var(--ub-ease), border-color var(--ub-dur) var(--ub-ease), transform var(--ub-dur) var(--ub-ease);
}

.lp-new-grid-bottom-button ul li a:hover,
.lp-new-grid-bottom-button .show-number-wrap:hover {
  background: var(--ub-primary);
  border-color: var(--ub-primary);
  color: #ffffff;
  transform: translateY(-1px);
}

.lp-new-grid-bottom-button .show-number-wrap p i,
.lp-new-grid-bottom-button ul li a i {
  font-size: 0.8125rem;
  margin: 0;
  color: inherit;
}

.lp-new-grid-bottom-button ul li a:hover i,
.lp-new-grid-bottom-button ul li a:hover {
  color: #ffffff;
}

.lp-grid-box-contianer .status-btn,
.classic-view-grid-container .status-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--ub-radius-pill);
  padding: 6px 14px;
  font-family: var(--ub-font-display);
  font-size: var(--ub-text-xs);
  font-weight: 700;
  border: 0;
  line-height: 1.3;
}

.lp-grid-box-contianer .status-btn.status-open,
.classic-view-grid-container .status-btn.status-open {
  background: var(--ub-success-soft);
  color: var(--ub-success);
}

.lp-grid-box-contianer .status-btn.status-closed,
.classic-view-grid-container .status-btn.status-closed {
  background: var(--ub-accent-soft);
  color: var(--ub-accent-strong);
}

.lp-grid-box-contianer .lp-listing-favrt,
.classic-view-grid-container .lp-listing-favrt {
  display: inline-flex;
}

.ub-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 520ms var(--ub-ease), transform 520ms var(--ub-ease);
}

.ub-reveal.ub-revealed {
  opacity: 1;
  transform: none;
}

/* --- Scroll reveal ---------------------------------------------------------
   .ub-reveal / .ub-fade-up empiezan ocultos y el observer de
   assets/js/ub-reveal.js les añade .is-visible al entrar en pantalla.

   El estado inicial se aplica solo cuando el documento lleva la clase
   ub-reveal-js, que añade un script inline en el <head>. Si el JS no carga,
   queda sin esa clase y el contenido se ve normal, en vez de invisible. */
html.ub-reveal-js .ub-reveal,
html.ub-reveal-js .ub-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.ub-reveal-js .ub-reveal.is-visible,
html.ub-reveal-js .ub-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Escalonado dentro de un grid o un carrusel: el primer hijo entra antes que
   el siguiente, para que la fila se lea de izquierda a derecha. */
html.ub-reveal-js .ub-stagger > *:nth-child(1) { transition-delay: 0.05s; }
html.ub-reveal-js .ub-stagger > *:nth-child(2) { transition-delay: 0.12s; }
html.ub-reveal-js .ub-stagger > *:nth-child(3) { transition-delay: 0.19s; }
html.ub-reveal-js .ub-stagger > *:nth-child(4) { transition-delay: 0.26s; }
html.ub-reveal-js .ub-stagger > *:nth-child(5) { transition-delay: 0.33s; }
html.ub-reveal-js .ub-stagger > *:nth-child(6) { transition-delay: 0.40s; }
html.ub-reveal-js .ub-stagger > *:nth-child(7) { transition-delay: 0.47s; }
html.ub-reveal-js .ub-stagger > *:nth-child(8) { transition-delay: 0.54s; }

.elementor-widget-n-carousel .swiper-slide > .e-con .e-con-full[data-element_type="container"] {
  position: relative;
  overflow: hidden;
  border-radius: var(--ub-radius-lg);
  border: 1px solid var(--ub-line-soft);
  box-shadow: var(--ub-shadow-sm);
  transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease), border-color var(--ub-dur) var(--ub-ease);
}

.elementor-widget-n-carousel .swiper-slide > .e-con .e-con-full[data-element_type="container"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.5) 100%);
  pointer-events: none;
}

.elementor-widget-n-carousel .swiper-slide > .e-con .e-con-full[data-element_type="container"]:hover {
  transform: translateY(-6px);
  box-shadow: var(--ub-shadow-md);
  border-color: rgba(37, 99, 235, 0.35);
}

.elementor-widget-n-carousel .swiper-slide .elementor-widget-heading.elementor-absolute {
  background: transparent !important;
  bottom: 16px !important;
  left: 16px !important;
  right: auto !important;
  top: auto !important;
  padding: 0 !important;
  text-align: start;
  z-index: 2;
}

.elementor-widget-n-carousel .swiper-slide .elementor-widget-heading.elementor-absolute .elementor-heading-title {
  font-family: var(--ub-font-display) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: clamp(0.75rem, 1vw, 1rem) !important;
  letter-spacing: -0.01em;
  color: #ffffff !important;
  text-shadow: none !important;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 14px;
  border-radius: var(--ub-radius-pill);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .ub-reveal,
  .ub-fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.ub-reveal-js .ub-stagger > * {
    transition-delay: 0s !important;
  }
}

.footer-style1.classic-styles {
  background: #ffffff;
  color: var(--ub-muted);
  padding-top: 30px;
  margin-top: 60px;
  border-top: 1px solid var(--ub-line-soft);
}

.footer-style1.classic-styles .footer-upper-bar {
  background: #ffffff;
  padding: 18px 0;
}

.footer-style1.classic-styles .footer-upper-bar .footer-menu li a,
.footer-style1.classic-styles .footer-menu li a {
  color: var(--ub-ink-soft);
  font-family: var(--ub-font-body);
  font-size: 0.875rem;
  font-weight: 600;
}

.footer-style1.classic-styles .footer-menu li a:hover {
  color: var(--ub-primary);
}

.footer-style1.classic-styles .footer-upper-bar .footer-menu li:after {
  right: -2px;
  color: var(--ub-line);
}

.footer-style1.classic-styles .footer-bottom-bar {
  background: var(--ub-bg);
  padding: 22px 0;
}

.footer-style1.classic-styles .footer-about-company li {
  color: var(--ub-muted);
  font-family: var(--ub-font-body);
  font-size: 0.8125rem;
}

.footer-style1.classic-styles .footer-about-company a,
.footer-style1.classic-styles .credit-links a {
  color: var(--ub-primary-strong);
}

.footer-style1.classic-styles .footer-social-icons a {
  color: var(--ub-muted);
  border: 1px solid var(--ub-line);
  border-radius: 50%;
  transition: color var(--ub-dur) var(--ub-ease), background var(--ub-dur) var(--ub-ease), border-color var(--ub-dur) var(--ub-ease), transform var(--ub-dur) var(--ub-ease);
}

.footer-style1.classic-styles .footer-social-icons a:hover {
  color: #ffffff;
  background: var(--ub-primary);
  border-color: var(--ub-primary);
  transform: translateY(-2px);
}

.lp-btn,
a.lp-btn,
input[type="submit"].lp-btn,
.lp-mobapp-backlisting .lp-btn {
  background: var(--ub-primary);
  border-radius: var(--ub-radius-md);
  font-family: var(--ub-font-display);
  font-weight: 700;
  padding: 13px 28px;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
  border: 0;
  color: #ffffff;
  transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease), background var(--ub-dur) var(--ub-ease);
}

.lp-btn:hover,
a.lp-btn:hover {
  background: var(--ub-primary-strong);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.35);
}

.lp-grid-box-contianer .lp-grid-box-thumb,
.lp-grid-box-contianer .listing-loop-form {
  display: none;
}

@media (min-width: 992px) {
  .lp-menu-bar.header-bg-color-class .container > .row {
    display: flex;
    align-items: center;
  }
}

/* ====== Header de páginas internas: misma fila que el home ======
   Fila 1: logo + menú + acciones (idéntica a la portada).
   Fila 2: banda de búsqueda con el lenguaje del sistema de diseño. */
@media (min-width: 768px) {
  body:not(.home) .lp-menu-bar.header-bg-color-class {
    height: auto;
    line-height: 1.4;
    padding: 12px 0 16px;
  }

  body:not(.home) .lp-menu-bar .header-right-panel {
    display: contents;
  }

  body:not(.home) .lp-menu-bar .header-filter {
    order: 3;
    flex: 0 0 100%;
    width: 100% !important;
    margin: 10px 0 0;
  }
}

@media (min-width: 992px) {
  body:not(.home) .lp-menu-bar .lp-menu-container {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    width: auto !important;
    float: none !important;
  }

  body:not(.home) .lp-menu-bar .lp-menu-container > .pull-right {
    float: none !important;
  }

  body:not(.home) .lp-menu-bar .lp-menu-container > .pull-right.padding-right-10 {
    order: 1;
    padding-right: 0 !important;
  }

  body:not(.home) .lp-menu-bar .lp-menu-container > .pull-right:first-child {
    order: 2;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
  }

  body:not(.home) .lp-menu-bar .lp-menu.menu {
    float: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  body:not(.home) .lp-menu-bar .lp-menu.menu {
    display: none;
  }
}

/* Banda de búsqueda (Qué / Dónde) como tarjeta del sistema */
body:not(.home) .lp-menu-bar .header-filter {
  margin: 10px 0 0;
  background: var(--ub-surface);
  border: 1px solid var(--ub-line-soft);
  border-radius: var(--ub-radius-lg);
  box-shadow: var(--ub-shadow-sm);
  padding: 10px;
}

body:not(.home) .lp-menu-bar .header-filter form.top-search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

body:not(.home) .lp-menu-bar .header-filter form > .input-group {
  display: flex;
  align-items: center;
  height: 46px;
  margin: 0;
  padding: 0 6px 0 14px;
  background: var(--ub-bg);
  border: 1px solid var(--ub-line);
  border-radius: var(--ub-radius-pill);
}

body:not(.home) .lp-menu-bar .header-filter form > .search-form-field.input-group {
  flex: 1 1 260px;
}

body:not(.home) .lp-menu-bar .header-filter form > .input-group.width-49-percent:not(.search-form-field) {
  flex: 0 1 240px;
}

body:not(.home) .lp-menu-bar .header-filter .input-group-addon {
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  background: none;
  border: 0;
  color: var(--ub-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

body:not(.home) .lp-menu-bar .header-filter .form-control,
body:not(.home) .lp-menu-bar .header-filter input.lp-search-input {
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 0.875rem;
  color: var(--ub-ink);
}

body:not(.home) .lp-menu-bar .header-filter .pos-relative,
body:not(.home) .lp-menu-bar .header-filter .ui-widget {
  flex: 1 1 auto;
  width: auto;
}

body:not(.home) .lp-menu-bar .header-filter .select2-container {
  width: 100% !important;
}

body:not(.home) .lp-menu-bar .header-filter .select2-container--default .select2-selection--single {
  height: 44px;
  border: 0;
  background: none;
}

body:not(.home) .lp-menu-bar .header-filter .select2-selection__rendered {
  line-height: 44px;
  font-size: 0.875rem;
  color: var(--ub-ink-soft);
}

body:not(.home) .lp-menu-bar .header-filter .select2-selection__arrow {
  height: 44px;
}


@media (max-width: 575px) {
  body:not(.home) .lp-menu-bar .header-filter form > .input-group {
    flex: 1 1 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .lp-shortcode-search .lp-search-bar .form-group.lp-suggested-search,
  .lp-shortcode-search .lp-search-bar .form-group.lp-location-search {
    width: 100%;
    margin-bottom: 0;
  }

  .lp-shortcode-search .lp-search-bar .form-group.pull-right {
    width: 100%;
    margin-top: 10px;
  }
}

@media (max-width: 767px) {
  .lp-menu-bar.header-bg-color-class {
    height: auto;
    line-height: 1.4;
    padding: 12px 0;
  }

  .lp-logo a img,
  .lp-logo img {
    height: 44px;
  }

  .lp-home-banner-contianer-inner h1,
  .header-front-page-wrap .lp-home-banner-contianer-inner h1 {
    font-size: var(--ub-text-hero);
  }

  .lp-home-banner-contianer .lp-search-bar,
  .lp-shortcode-search .lp-search-bar {
    flex-wrap: wrap;
    padding: 14px;
    border-radius: var(--ub-radius-lg);
  }

  .lp-search-bar .form-group.lp-suggested-search,
  .lp-search-bar .form-group.lp-location-search,
  .lp-search-bar .form-group.pull-right {
    width: 100%;
    margin-bottom: 0;
  }

  .lp-search-bar .fd-checkbox,
  .lp-search-bar .lp-search-bar-right {
    width: 100%;
  }

  .lp-search-bar .lp-search-btn {
    margin-top: 12px;
    padding: 15px 26px;
  }

  .classic-view-grid-thumbnail img {
    height: 200px;
  }

  .footer-style1.classic-styles {
    margin-top: 40px;
  }
}

/* Header sin menú desktop: logo a la izquierda y hamburguesa llamativa a la
   derecha. Vale desde 1260px hacia abajo (el tema mostraba el menú desktop
   desde 981px y ahi el grid aun estaba apilado y con 4 items wrappeaba a 2
   filas). En páginas internas el buscador baja a una segunda fila. */
@media (max-width: 1259.98px) {
  .lp-menu-bar.header-bg-color-class .fullwidth-header > .row,
  .lp-menu-bar.header-bg-color-class .container > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 16px;
  }

  .lp-menu-bar .col-md-2.col-xs-6.lp-logo-container {
    width: auto !important;
    flex: 0 0 auto;
    float: none !important;
    padding: 0;
  }

  .lp-menu-bar .lp-logo {
    text-align: left;
  }

  .lp-menu-bar .header-right-panel {
    width: auto !important;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    float: none !important;
    padding: 0 !important;
  }

  .lp-menu-bar .mobile-nav-icon {
    order: 1;
    width: auto !important;
    float: none !important;
    padding: 0;
    display: flex;
    align-items: center;
    position: static !important;
    top: auto !important;
    left: auto !important;
  }

  /* Hamburguesa circular con degradado de marca */
  .lp-menu-bar .mobile-nav-icon .nav-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ub-primary) 0%, var(--ub-primary-strong) 100%);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
    float: none;
    transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease);
  }

  .lp-menu-bar .mobile-nav-icon .nav-icon:hover,
  .lp-menu-bar .mobile-nav-icon .nav-icon[aria-expanded="true"] {
    transform: scale(1.06);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.45);
  }

  .lp-menu-bar .mobile-nav-icon .nav-icon .icon-bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
  }

  .lp-menu-bar .mobile-nav-icon {
    margin-left: auto;
  }
}

/* El menú desktop solo se muestra desde 1260px. Por debajo manda la
   hamburguesa: ocultamos el contenedor completo (menú, login y botón de
   anuncio, que ya viven en el offcanvas) y forzamos visible el icono,
   que el tema deja de pintar a partir de 992px. */
@media (max-width: 1259.98px) {
  .lp-menu-bar .lp-menu-container {
    display: none !important;
  }

  .lp-menu-bar .mobile-nav-icon {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  /* El panel se disuelve para que logo y hamburguesa queden en la fila 1
     y el buscador (páginas internas) ocupe completo la fila 2. */
  .lp-menu-bar .header-right-panel {
    display: contents;
  }

  .lp-menu-bar .mobile-nav-icon {
    margin-left: auto;
  }

  .lp-menu-bar .header-filter {
    order: 2;
    flex: 0 0 100%;
    width: 100% !important;
  }

  /* Las rows de Bootstrap dentro de contenedores Elementor con padding
     desbordan 4px el viewport en móvil (visto en /categorias/). */
  .elementor-widget-container > .lp-section-content-container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 360px) {
  .lp-menu-bar.header-bg-color-class .lp-logo a img,
  .lp-menu-bar.header-bg-color-class .lp-logo img {
    height: 40px;
  }
}

@media (max-width: 320px) {
  .lp-menu-bar.header-bg-color-class .lp-logo a img,
  .lp-menu-bar.header-bg-color-class .lp-logo img {
    height: 34px;
  }
}

/* Panel móvil (mmenu) adaptado al sistema de diseño */
#menu.mm-menu {
  --mm-color-background: var(--ub-surface);
  --mm-color-text: var(--ub-ink-soft);
  --mm-color-border: var(--ub-line-soft);
  --mm-color-button: var(--ub-primary);
  border-radius: 0 var(--ub-radius-xl) var(--ub-radius-xl) 0;
  box-shadow: var(--ub-shadow-lg);
}

#menu .mm-navbar {
  background: var(--ub-primary-ghost);
  border-bottom: 1px solid var(--ub-line-soft);
}

#menu .mm-navbar .userimage img {
  height: 40px;
  width: auto;
}

#menu .mm-listview .mm-listitem__text {
  font-family: var(--ub-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ub-ink-soft);
}

#menu .mm-listview .mm-listitem__text:hover {
  color: var(--ub-primary);
  background: var(--ub-primary-ghost);
}

#menu .mm-listview li.current-menu-item > .mm-listitem__text,
#menu .mm-listview li.current-menu-parent > .mm-listitem__text {
  color: var(--ub-primary);
  background: var(--ub-primary-soft);
  font-weight: 700;
}

#menu .mm-listview li.menu-item-has-children > .mm-listitem__text::after {
  content: "\f107";
  display: inline-block;
  font-family: FontAwesome;
  font-size: 0.8em;
  margin-left: 8px;
  color: var(--ub-faint);
}

#menu .lpl-button {
  display: block;
  margin: 8px 20px;
  padding: 11px 18px;
  border-radius: var(--ub-radius-pill);
  font-family: var(--ub-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

#menu .lpl-button.lpl-add-listing-loggedout,
#menu .lpl-button.lpl-add-listing-logedin {
  background-image: linear-gradient(135deg, var(--ub-accent) 0%, var(--ub-accent-strong) 100%);
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35);
}

#menu .lpl-button.md-trigger,
#menu .lpl-button.app-view-popup-style {
  background: var(--ub-primary-soft);
  color: var(--ub-primary) !important;
}

.mm-pagedim,
.mm-pagedim-black {
  background: rgba(15, 23, 42, 0.5) !important;
}
.elementor-102 .elementor-heading-title {
  font-family: var(--ub-font-display) !important;
  letter-spacing: -0.02em;
}

.elementor-102 h1.elementor-heading-title,
.elementor-102 h2.elementor-heading-title,
.elementor-102 h3.elementor-heading-title,
.elementor-102 h4.elementor-heading-title,
.elementor-102 h5.elementor-heading-title,
.elementor-102 h6.elementor-heading-title {
  line-height: 1.15;
  text-wrap: balance;
}

.ubicame-state-card {
  background-color: var(--ub-primary-ghost);
}

.ubicame-state-card.lazyload,
.ubicame-state-card.lazyloading {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  opacity: 1 !important;
  --smush-placeholder-width: auto;
  background-size: cover;
  background-position: center center;
}

.ubicame-states-carousel .swiper-slide {
  height: auto;
}

.lp-listings.grid-style .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}

.lp-listings.grid-style .row > [class*="col-"] {
  display: flex;
  padding: 0 12px;
}

.lp-listings.grid-style .row > [class*="col-"] > .lp-listing {
  height: 100%;
}

.lp-listings.grid-style .lp-listing {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--ub-surface);
  border: 1px solid var(--ub-line-soft);
  border-radius: var(--ub-radius-lg);
  box-shadow: var(--ub-shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
  transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease), border-color var(--ub-dur) var(--ub-ease);
}

.lp-listings.grid-style .lp-listing:hover {
  transform: translateY(-6px);
  box-shadow: var(--ub-shadow-md);
  border-color: rgba(37, 99, 235, 0.35);
}

.lp-listings.grid-style .lp-listing-top {
  position: relative;
  overflow: hidden;
  background: var(--ub-primary-ghost);
}

.lp-listings.grid-style .lp-listing-top-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ub-ease), filter 600ms var(--ub-ease);
}

.lp-listings.grid-style .lp-listing:hover .lp-listing-top-thumb img {
  transform: scale(1.06);
}

.lp-listings.grid-style .lp-listing-favrt {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ub-ink-soft);
  border-radius: 50%;
  box-shadow: var(--ub-shadow-sm);
  font-size: 15px;
  line-height: 1;
  transition: transform var(--ub-dur) var(--ub-ease), background var(--ub-dur) var(--ub-ease), color var(--ub-dur) var(--ub-ease);
}

.lp-listings.grid-style .lp-listing-favrt:hover,
.lp-listings.grid-style .lp-listing-favrt.lp-favrt-active {
  background: var(--ub-accent-soft);
  color: var(--ub-accent-strong);
  transform: translateY(-2px) scale(1.05);
}

.lp-listings.grid-style .lp-listing-bottom {
  padding: 16px 18px 0;
  flex: 1 0 auto;
}

.lp-listings.grid-style .lp-listing-bottom h4 {
  margin: 0 0 8px;
  font-family: var(--ub-font-display);
  font-size: var(--ub-text-card-title);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.lp-listings.grid-style .lp-listing-bottom h4 a {
  font-family: var(--ub-font-display);
  font-size: var(--ub-text-card-title);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ub-ink);
  transition: color var(--ub-dur) var(--ub-ease);
}

.lp-listings.grid-style .lp-listing-bottom h4 a:hover {
  color: var(--ub-primary);
}

.lp-listings.grid-style .lp-listing-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.lp-listings.grid-style .lp-listing-cats a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ub-primary-ghost);
  border-radius: var(--ub-radius-pill);
  padding: 5px 12px;
  font-family: var(--ub-font-body);
  font-size: var(--ub-text-xs);
  font-weight: 600;
  color: var(--ub-primary-strong);
  transition: background var(--ub-dur) var(--ub-ease), color var(--ub-dur) var(--ub-ease);
}

.lp-listings.grid-style .lp-listing-cats a:hover {
  background: var(--ub-primary);
  color: #ffffff;
}

.lp-listings.grid-style .lp-listing-bottom .grid-open,
.lp-listings.grid-style .lp-listing-bottom .grid-closed,
.lp-listings.grid-style .li-listing-clock-outer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--ub-radius-pill);
  padding: 6px 14px;
  font-family: var(--ub-font-display);
  font-size: var(--ub-text-xs);
  font-weight: 700;
  line-height: 1.3;
}

.lp-listings.grid-style .grid-open,
.lp-listings.grid-style .status-open {
  background: var(--ub-success-soft);
  color: var(--ub-success);
}

.lp-listings.grid-style .grid-closed,
.lp-listings.grid-style .status-closed,
.lp-listings.grid-style .status-red {
  background: var(--ub-accent-soft);
  color: var(--ub-accent-strong);
}

.lp-listings.grid-style .lp-listing-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.lp-listings.grid-style .lp-listing-stars i,
.lp-listings.grid-style .lp-rating-stars-outer i,
.lp-listings.grid-style .lp-rating-stars-inner i {
  font-size: 13px;
  color: var(--ub-star);
}

.lp-listings.grid-style .lp-listing-stars .lp-rating-num {
  font-family: var(--ub-font-body);
  font-size: var(--ub-text-xs);
  font-weight: 600;
  color: var(--ub-muted);
}

.lp-listings.grid-style .lp-listing-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-family: var(--ub-font-body);
  font-size: var(--ub-text-sm);
  font-weight: 500;
  color: var(--ub-muted);
}

.lp-listings.grid-style .lp-listing-location i {
  color: var(--ub-primary);
  font-size: 15px;
}

.elementor-element-4dd3e3d a[href*="selecciona-tu-plan"],
.elementor-element-4dd3e3d a[href*="wa.me"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 30px;
  border-radius: var(--ub-radius-pill);
  font-family: var(--ub-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease), background var(--ub-dur) var(--ub-ease), color var(--ub-dur) var(--ub-ease), border-color var(--ub-dur) var(--ub-ease);
}

.elementor-element-4dd3e3d a[href*="selecciona-tu-plan"] {
  background-color: var(--ub-accent) !important;
  background-image: linear-gradient(135deg, var(--ub-accent) 0%, var(--ub-accent-strong) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.35);
}

.elementor-element-4dd3e3d a[href*="selecciona-tu-plan"]:hover {
  background-image: linear-gradient(135deg, var(--ub-accent-strong) 0%, var(--ub-accent-strong) 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(249, 115, 22, 0.45);
}

.elementor-element-4dd3e3d a[href*="wa.me"] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.elementor-element-4dd3e3d a[href*="wa.me"]:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ub-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.3);
}

.ekit-template-content-footer {
  border-top: 1px solid var(--ub-line-soft);
}

.ekit-template-content-footer a {
  font-family: var(--ub-font-body);
  color: var(--ub-muted);
  transition: color var(--ub-dur) var(--ub-ease);
}

.ekit-template-content-footer a:hover {
  color: var(--ub-primary);
}

/* Cada red conserva siempre su color de marca; el neon solo entra al pasar
   el cursor. Asi el glifo gana la identidad de la red y, de paso, el circulo
   deja de fundirse con el gris del footer (#f6f8fb sobre #f0f0f0). */
.ekit-template-content-footer .elementor-social-icon {
  background: var(--ub-social, var(--ub-primary));
  color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 12px -4px var(--ub-social-halo, rgba(0, 40, 142, 0.3));
  transition: transform var(--ub-dur) var(--ub-ease),
    background var(--ub-dur) var(--ub-ease),
    color var(--ub-dur) var(--ub-ease),
    box-shadow var(--ub-dur) var(--ub-ease);
}

/* Cada red conserva su color de marca y se enciende con una luz neón de ese
   mismo color al pasar el cursor, en vez de repetirse el azul de UbiCame. */
.ekit-template-content-footer .elementor-social-icon-facebook {
  --ub-social: #1877f2;
  --ub-social-glow: rgba(24, 119, 242, 0.55);
  --ub-social-halo: rgba(24, 119, 242, 0.28);
}
.ekit-template-content-footer .elementor-social-icon-instagram {
  --ub-social: #d62976;
  --ub-social-glow: rgba(214, 41, 118, 0.55);
  --ub-social-halo: rgba(214, 41, 118, 0.28);
}
.ekit-template-content-footer .elementor-social-icon-youtube {
  --ub-social: #e02b20;
  --ub-social-glow: rgba(224, 43, 32, 0.55);
  --ub-social-halo: rgba(224, 43, 32, 0.28);
}
/* El verde de WhatsApp se oscurece un punto: con el verde oficial el glifo
   blanco se quedaba en 3.1:1, justo en el limite. */
.ekit-template-content-footer .elementor-social-icon-whatsapp {
  --ub-social: #128c3e;
  --ub-social-glow: rgba(18, 140, 62, 0.55);
  --ub-social-halo: rgba(18, 140, 62, 0.28);
}
.ekit-template-content-footer .elementor-social-icon-twitter,
.ekit-template-content-footer .elementor-social-icon-x-twitter {
  --ub-social: #0f1419;
  --ub-social-glow: rgba(15, 20, 25, 0.5);
  --ub-social-halo: rgba(15, 20, 25, 0.24);
}
.ekit-template-content-footer .elementor-social-icon-linkedin {
  --ub-social: #0a66c2;
  --ub-social-glow: rgba(10, 102, 194, 0.55);
  --ub-social-halo: rgba(10, 102, 194, 0.28);
}
.ekit-template-content-footer .elementor-social-icon-pinterest {
  --ub-social: #bd081c;
  --ub-social-glow: rgba(189, 8, 28, 0.55);
  --ub-social-halo: rgba(189, 8, 28, 0.28);
}
/* TikTok mantiene su negro y usa el destello cian/rojo de su marca. */
.ekit-template-content-footer .elementor-social-icon-tiktok {
  --ub-social: #111111;
  --ub-social-glow: rgba(37, 244, 238, 0.5);
  --ub-social-halo: rgba(254, 44, 85, 0.3);
}

.ekit-template-content-footer .elementor-social-icon:hover,
.ekit-template-content-footer .elementor-social-icon:focus-visible {
  background: var(--ub-social, var(--ub-primary));
  color: #ffffff;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 0 1px var(--ub-social-glow, rgba(0, 40, 142, 0.5)),
    0 0 14px 3px var(--ub-social-glow, rgba(0, 40, 142, 0.5)),
    0 0 34px 9px var(--ub-social-halo, rgba(0, 40, 142, 0.26));
  outline: none;
}

/* Va despues de la regla general para ganarle por orden: misma especificidad. */
.ekit-template-content-footer .elementor-social-icon-tiktok:hover,
.ekit-template-content-footer .elementor-social-icon-tiktok:focus-visible {
  box-shadow: 0 0 0 1px rgba(37, 244, 238, 0.6),
    0 0 14px 3px rgba(254, 44, 85, 0.45),
    0 0 34px 9px rgba(37, 244, 238, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .ekit-template-content-footer .elementor-social-icon:hover,
  .ekit-template-content-footer .elementor-social-icon:focus-visible {
    transform: none;
  }
}

::selection {
  background: rgba(37, 99, 235, 0.18);
  color: var(--ub-ink);
}

/* ==========================================================================
   UBICAME PREMIUM ELEMENTOR OVERRIDES
   ========================================================================== */

/* 1. Unificar Tipografías y Colores de Títulos Elementor */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--ub-font-display) !important;
  color: var(--ub-ink) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* Si hay algún subtítulo que usa naranja, lo pasamos a un tono más corporativo (Muted o Primary) */
.elementor-widget-heading .elementor-heading-title.elementor-size-default {
  color: var(--ub-ink-soft) !important;
}

/* 2. Modernizar Cajas de Beneficios (Icon Boxes) que tenían bordes rígidos naranjas */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  background: var(--ub-surface) !important;
  border: 1px solid rgba(37, 99, 235, 0.1) !important; /* Borde muy suave azul claro, cero naranja */
  border-radius: var(--ub-radius-lg) !important;
  box-shadow: var(--ub-shadow-md) !important;
  padding: 24px !important;
  transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease) !important;
}

.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--ub-shadow-lg) !important;
}

/* Fondo suave para los íconos de las cajas de beneficios */
.elementor-widget-icon-box .elementor-icon-box-icon {
  background: var(--ub-primary-ghost) !important;
  border-radius: var(--ub-radius-md) !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

/* 3. Botones y Llamados a la Acción (CTA) */
/* Asegurar que los botones sí puedan usar acentos naranjas o azules pero con el estilo premium del tema */
.elementor-button {
  border-radius: var(--ub-radius-pill) !important;
  font-family: var(--ub-font-display) !important;
  font-weight: 700 !important;
  box-shadow: var(--ub-shadow-md) !important;
  transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease) !important;
}
.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--ub-shadow-lg) !important;
}

/* 4. Banners de Imágenes Redondeados */
.elementor-widget-image .elementor-image img {
  border-radius: var(--ub-radius-lg);
  box-shadow: var(--ub-shadow-sm);
}

/* 5. Utilidad para ocultar elementos redundantes en móvil (ej. logo gigante) */
.ub-hide-mobile {
  display: block;
}

/* 6. Optimizaciones Móviles (Buscador, Sliders, Espaciados) */
@media (max-width: 767px) {
  .ub-hide-mobile {
    display: none !important;
  }
  
  /* Ocultar flechas del slider en móviles para no manchar las fotos */
  .swiper-button-next, .swiper-button-prev,
  .elementor-swiper-button {
    display: none !important;
  }
  
  /* Cajas de Categorías en el banner (Higiene, Belleza) */
  .home-categories-area .lp-home-categoires {
    gap: 12px;
  }
  
  .home-categories-area .lp-home-categoires li a {
    box-shadow: var(--ub-shadow-md) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    padding: 12px 18px !important;
    justify-content: center;
  }
}
/* ==========================================================================
   UBICAME NEW MOCKUP FRONT PAGE STYLES
   ========================================================================== */

/* General Front Page Layout */
.ub-frontpage {
  font-family: var(--ub-font-body);
  color: var(--ub-ink);
  background: #ffffff;
  overflow-x: hidden;
}

.ub-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Typography & Badges */
.ub-frontpage h1, .ub-frontpage h2, .ub-frontpage h3, .ub-frontpage h4 {
  font-family: var(--ub-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ub-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: var(--ub-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.ub-subtitle {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ub-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.ub-subtitle-accent {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ub-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

/* Links & Buttons */
.ub-link-all {
  color: var(--ub-primary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.3s ease;
}

.ub-link-all:hover {
  opacity: 0.8;
  color: var(--ub-primary-strong);
}

.ub-link-accent {
  color: var(--ub-accent);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.ub-btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ub-accent);
  color: #ffffff;
  padding: 14px 28px;
  border-radius: var(--ub-radius-pill);
  font-weight: 600;
  text-decoration: none;
  margin-top: 24px;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ub-btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
  color: #ffffff;
}

/* Grids */
.ub-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ub-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .ub-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .ub-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .ub-grid-3 { grid-template-columns: 1fr; }
  .ub-grid-4 { grid-template-columns: 1fr; }
}

/* Section Headings */
.ub-section-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}

.ub-section-head h2 {
  font-size: 32px;
  margin: 0;
}

.ub-section-head .ub-link-all {
  margin-top: 16px;
}

@media (min-width: 768px) {
  .ub-section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .ub-section-head .ub-link-all {
    margin-top: 0;
  }
}

/* ================== HERO SECTION ================== */
.ub-hero {
  position: relative;
  padding: 100px 0 160px;
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

.ub-hero-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(30,58,138,0.85) 0%, rgba(30,58,138,0.4) 100%);
  z-index: 1;
}

.ub-hero-content {
  position: relative;
  z-index: 2;
}

.ub-hero-text h1 {
  font-size: 48px;
  color: #ffffff;
  margin-bottom: 16px;
}

.ub-hero-text p {
  font-size: 18px;
  max-width: 600px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.9);
}

.ub-hero-trust {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ub-hero-trust i {
  color: var(--ub-accent);
}

.ub-search-box {
  background: #ffffff;
  border-radius: var(--ub-radius-lg);
  padding: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  max-width: 900px;
}

/* Asegurar que el buscador de ListingPro herede limpieza */
.ub-search-box .lp-search-bar-all {
  margin: 0 !important;
}

/* ================== CATEGORIES ================== */
.ub-categories {
  padding: 80px 0;
  background: #f8fafc;
}

.ub-cat-card {
  position: relative;
  border-radius: var(--ub-radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  box-shadow: var(--ub-shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ub-cat-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--ub-shadow-lg);
}

.ub-cat-overlay {
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 60%;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, transparent 100%);
  z-index: 1;
}

.ub-cat-content {
  position: relative;
  z-index: 2;
  padding: 24px;
  width: 100%;
}

.ub-cat-content h3 {
  color: #ffffff;
  font-size: 24px;
  margin: 0 0 4px;
}

.ub-cat-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin: 0;
}

.ub-cat-arrow {
  position: absolute;
  bottom: 24px; right: 24px;
  width: 32px; height: 32px;
  background: #ffffff;
  color: var(--ub-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ub-cat-card:hover .ub-cat-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ================== HOW IT WORKS ================== */
.ub-how-it-works {
  padding: 100px 0;
}

.ub-steps {
  position: relative;
}

.ub-step {
  padding: 0 16px;
  position: relative;
}

.ub-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 24px;
  right: -12px;
  width: 1px;
  height: 80%;
  background: var(--ub-line-soft);
}

.ub-step-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ub-primary-ghost);
  color: var(--ub-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 20px;
}

.ub-step-text h4 {
  font-size: 20px;
  margin: 0 0 12px;
}

.ub-step-text p {
  color: var(--ub-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 991px) {
  .ub-step:not(:last-child)::after { display: none; }
  .ub-step { padding: 0; margin-bottom: 32px; }
}

/* ================== LOCATIONS ================== */
.ub-locations {
  background: #334155;
  color: #ffffff;
  padding: 80px 0;
}

.ub-locations-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 40px;
}

.ub-locations-head h2 {
  color: #ffffff;
  font-size: 32px;
  margin: 0;
}

.ub-locations-head p {
  color: rgba(255, 255, 255, 0.7);
  margin: 16px 0 0;
}

@media (min-width: 768px) {
  .ub-locations-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .ub-locations-head p {
    text-align: right;
    margin: 0;
  }
}

.ub-cities a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.3s ease;
}

.ub-cities a:hover {
  color: var(--ub-accent);
}

.ub-cities a i {
  color: var(--ub-accent);
  font-size: 12px;
}

.ub-locations-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 40px;
  gap: 16px;
}

.ub-locations-footer p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin: 0;
}

.ub-locations-footer .ub-link-all {
  color: #ffffff;
}

@media (min-width: 768px) {
  .ub-locations-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ================== CTA ================== */
.ub-cta {
  padding: 100px 0;
  background: #f8fafc;
}

.ub-cta-box {
  background: #ffffff;
  border-radius: var(--ub-radius-lg);
  overflow: hidden;
  box-shadow: var(--ub-shadow-md);
  display: flex;
  flex-direction: column;
}

.ub-cta-image {
  height: 300px;
  background-size: cover;
  background-position: center;
}

.ub-cta-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.ub-cta-content h2 {
  font-size: 32px;
  margin: 0 0 16px;
}

.ub-cta-content p {
  color: var(--ub-muted);
  font-size: 16px;
  margin: 0;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .ub-cta-box {
    flex-direction: row;
  }
  .ub-cta-image {
    width: 50%;
    height: auto;
  }
  .ub-cta-content {
    width: 50%;
    padding: 60px;
  }
}

/* ================= PÁGINA DE CATEGORÍAS (widget listing-categories) ================= */

.ub-page-head {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 32px) 4px;
}

.ub-page-head .ub-page-title {
  font-family: var(--ub-font-display);
  font-size: var(--ub-text-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ub-ink);
  margin: 0 0 8px;
}

.ub-page-head .ub-page-subtitle {
  font-size: 0.9375rem;
  color: var(--ub-muted);
  margin: 0;
}

body.page-id-27625 .elementor-27625 > .elementor-element {
  padding: 0 !important;
}

/* El contenedor Elementor es flex: sin esto el widget encoge a su contenido */
.elementor-widget-listing-categories {
  width: 100%;
  max-width: 100%;
}

/* Padding asimétrico (114px izq.) definido en el editor de Elementor */
.elementor-widget-listing-categories > .elementor-widget-container {
  padding: 0 !important;
}

.elementor-widget-listing-categories .lp-section-content-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 32px) 56px;
}

/* El clearfix de Bootstrap mete ::before/::after como celdas del grid */
.elementor-widget-listing-categories .lp-section-content-container::before,
.elementor-widget-listing-categories .lp-section-content-container::after {
  display: none;
}

/* Las columnas de Bootstrap traen col-xs-12 (width:100%), incompatible con un
   grid de varias columnas: hay que soltar el ancho para que fluya en la celda. */
.elementor-widget-listing-categories .lp-section-content-container > [class*="col-"] {
  width: auto !important;
  max-width: 100%;
  margin: 0;
  padding: 0;
  float: none;
}

.elementor-widget-listing-categories .margin-bottom-30 {
  margin-bottom: 0;
}

.elementor-widget-listing-categories .city-girds2 {
  position: relative;
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ub-ink, #0f172a);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.elementor-widget-listing-categories .city-girds2:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
}

.elementor-widget-listing-categories .city-thumb2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.elementor-widget-listing-categories .city-thumb2 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s var(--ub-ease);
}

.elementor-widget-listing-categories .city-girds2:hover .city-thumb2 > img {
  transform: scale(1.06);
}

/* Degradado sobre la base de la tarjeta: el <img> va al fondo y el gradiente
   se pinta encima, de transparente a pizarra casi opaca. Va en la tarjeta (y no
   en .city-thumb2) para que siga siendo valido aunque slick envuelva el markup. */
.elementor-widget-listing-categories .city-girds2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(15, 23, 42, 0.95) 100%
  );
  pointer-events: none;
}

/* El tema inyecta aqui un fondo azul solido (dynamic-css.css:
   .city-girds2 .city-thumb2 .category-style3-title-outer) con 3 clases de
   especificidad, mas left/bottom y un padding en el <a>. Sin !important el
   bloque gana y aparece el rectángulo azul tapando la foto. */
.elementor-widget-listing-categories .category-style3-title-outer {
  position: absolute;
  left: 0 !important;
  right: 0;
  top: auto !important;
  bottom: 0 !important;
  z-index: 2;
  margin: 0;
  padding: 18px 18px 20px;
  background: none !important;
  border-radius: 0;
}

.elementor-widget-listing-categories .category-style3-title-outer h3 {
  margin: 0;
}

.elementor-widget-listing-categories .category-style3-title-outer h3 a {
  display: inline-block;
  padding: 0 !important;
  font-family: var(--ub-font-display);
  font-weight: 700;
  font-size: 1.0625rem !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.elementor-widget-listing-categories .overlay-link {
  z-index: 3;
}

/* El widget listing-categories cambia de markup en tactiles: si la opcion
   single_listing_mobile_view del tema es app_view, listing-categories.php:236
   emite la rama slider-for-category-container. main.css:24636 pone entonces el
   titulo con top/left en 10px y !important (4 clases, gana a las 2 de la regla
   de arriba) y ademas deja el bloque estirado de top a bottom, por eso el
   nombre caia en la esquina superior izquierda. Se repite la regla con una
   clase mas de especificidad para ganar a esa. */
.elementor-widget-listing-categories .slider-for-category-container .city-girds2 .city-thumb2 .category-style3-title-outer {
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: none !important;
  border-radius: 0;
}

.elementor-widget-listing-categories .slider-for-category-container .city-girds2 .city-thumb2 .category-style3-title-outer a {
  padding: 0 !important;
  font-size: 1.0625rem !important;
  line-height: 1.3 !important;
}

/* Esa rama anade un .location-overlay con rgba(0,0,0,.4) plano sobre toda la
   foto (main.css:24642), que se suma al degradado y deja la imagen apagada. */
.elementor-widget-listing-categories .slider-for-category-container .location-overlay {
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none;
}

.elementor-widget-listing-categories .location-overlay {
  background: rgba(15, 23, 42, 0) !important;
}

.elementor-widget-listing-categories .city-girds2:hover .location-overlay {
  background: rgba(15, 23, 42, 0.18) !important;
}

/* 1. QR card unificada */
body.single-listing .lp-listing-qr,
body.single-listing .widget-qr,
body.single-listing #listing-qr,
body.single-listing .listing-qr-wrap,
body.single-listing .lp-qr-wrapper,
body.single-listing .widget_listingpro-qr-code,
body.single-listing .listingpro-qr-code-widget,
body.single-listing .sidebar .lp-listing-qr,
body.single-listing .sidebar .widget-qr {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #f1f5f9 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

body.single-listing .lp-listing-qr canvas,
body.single-listing .lp-listing-qr img,
body.single-listing .widget-qr canvas,
body.single-listing .widget-qr img,
body.single-listing #listing-qr canvas,
body.single-listing #listing-qr img,
body.single-listing .listing-qr-wrap canvas,
body.single-listing .listing-qr-wrap img,
body.single-listing .lp-qr-wrapper canvas,
body.single-listing .lp-qr-wrapper img {
  background: #ffffff !important;
  margin: 0 auto !important;
  display: block !important;
}

body.single-listing .lp-listing-qr a,
body.single-listing .lp-listing-qr button,
body.single-listing .widget-qr a,
body.single-listing .widget-qr button,
body.single-listing .listing-qr-wrap a,
body.single-listing .listing-qr-wrap button,
body.single-listing .lp-qr-wrapper a,
body.single-listing .lp-qr-wrapper button,
body.single-listing #listing-qr .btn,
body.single-listing .lp-listing-qr .btn,
body.single-listing .widget-qr .btn {
  border-radius: 8px !important;
  padding: 8px 14px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  transition: all 0.2s ease-in-out !important;
  border: none !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

body.single-listing .masteqr-postwarpper,
body.single-listing .widget-box.viewed-listing,
body.single-listing #masteqr-wrap6ac2c462b7353 {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #f1f5f9 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

body.single-listing .masteqr-postwarpper canvas,
body.single-listing .masteqr-postwarpper img,
body.single-listing #masteqr-post6ac2c462b7353 canvas,
body.single-listing #masteqr-post6ac2c462b7353 img {
  background: #ffffff !important;
  margin: 0 auto 16px auto !important;
  display: block !important;
}

body.single-listing .masteqr-postwarpper .mqrbtnalign,
body.single-listing .masteqr-postwarpper > div[style*="display: flex"],
body.single-listing #masteqr-wrap6ac2c462b7353 .mqrbtnalign {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 12px !important;
}

body.single-listing .mqrdownload,
body.single-listing .mqrprints,
body.single-listing .masteqr-postwarpper .mqrdownload span,
body.single-listing .masteqr-postwarpper .mqrprints,
body.single-listing #masteqr-wrap6ac2c462b7353 .mqrdownload span,
body.single-listing #masteqr-wrap6ac2c462b7353 .mqrprints {
  flex: 1 1 0 !important;
  height: 38px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

body.single-listing .mqrdownload span:hover,
body.single-listing .mqrprints:hover,
body.single-listing .masteqr-postwarpper a:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}

/* 2. Detalles adicionales */
body.single-listing .post-meta-info,
body.single-listing .lp-listing-additional-details,
body.single-listing .listing-additional-details,
body.single-listing .additional-details,
body.single-listing .lp-additional-details,
body.single-listing .post-detail-content .post-meta-info,
body.single-listing .post-detail-content .additional-details,
body.single-listing .content-area .post-meta-info,
body.single-listing .lp-detail-box-5,
body.single-listing .lp-detail-box,
body.single-listing .lp-listing-details,
body.single-listing .listing-detail-wrap .additional-info,
body.single-listing .lp-listing-features-wrap,
body.single-listing .listing-additional-wrapper {
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 14px !important;
  padding: 20px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  margin: 24px 0 !important;
}

body.single-listing .post-meta-info .meta-value,
body.single-listing .lp-listing-additional-details .value,
body.single-listing .listing-additional-details .value,
body.single-listing .additional-details .value,
body.single-listing .lp-additional-details .value,
body.single-listing .post-meta-info span:not(.meta-label),
body.single-listing .post-meta-info strong + span,
body.single-listing .post-meta-info .lp-field-value,
body.single-listing .lp-listing-details .value,
body.single-listing .listing-detail-wrap .additional-info span:last-child,
body.single-listing .lp-listing-features-wrap .feature-value,
body.single-listing .post-meta-info .meta-item-value,
body.single-listing .post-meta-info .meta-answer {
  background: #ecfdf5 !important;
  color: #059669 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  margin-left: 4px !important;
}

/* 3. Limpiar A2A en reseñas individuales */
body.single-listing .reviews-section .a2a_kit,
body.single-listing .single-review .addtoany_share_save_container,
body.single-listing .review-box .addtoany_share_save_container,
body.single-listing .lp-review .addtoany_share_save_container,
body.single-listing .comment .addtoany_share_save_container,
body.single-listing .reviews-area .a2a_kit,
body.single-listing .lp-comments-area .addtoany_share_save_container {
  display: none !important;
}

/* 5. Cabecera de la ficha: foto del propio negocio en lugar del collage de stock */
body.single-listing .lp-listing-top-title-header {
  position: relative;
  overflow: hidden;
  background-image: none !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

body.single-listing .lp-listing-top-title-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-image: var(--ub-hero-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(12px) brightness(0.35);
  transform: scale(1.1);
  overflow: hidden;
  pointer-events: none;
}

body.single-listing .lp-listing-top-title-header > * {
  position: relative;
  z-index: 1;
}

/* 4. Imágenes en descripción */
body.single-listing .post-content img,
body.single-listing .post-detail-content img,
body.single-listing .post-detail-content figure img,
body.single-listing .listing-detail-content img,
body.single-listing .lp-detail-content img,
body.single-listing .description-content img,
body.single-listing .post-description img,
body.single-listing .entry-content img,
body.single-listing .lp-listing-content img,
body.single-listing .lp-detail-box img,
body.single-listing .listing-description img,
body.single-listing article img,
body.single-listing .content-area img {
  border-radius: 12px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07) !important;
  margin-bottom: 16px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Si el app view llegara a activarse, .app-view-header .lp-menu-bar pinta la
   banda del logo con el color del tema (dynamic-css.css:489). */
.app-view-header .lp-menu-bar {
  background: rgba(255, 255, 255, 0.92) !important;
}

/* El widget listing-categories trae un <script> inline que corre slick sobre
   .listing-category-slider4 (rama cat_slider_style del plugin). En esta pagina
   queremos siempre grid, asi que se ocultan los dots y las flechas. No se oculta
   .slick-track ni .slick-list: si llegara a inicializarse, las tarjetas viven
   ahi dentro y esconderlas dejaria la pagina en blanco. design-system.js
   deshace el slick con unslick() y quita la clase que lo dispara. */
.elementor-widget-listing-categories .slick-dots,
.elementor-widget-listing-categories .slick-arrow,
.elementor-widget-listing-categories .slick-arrow *,
.elementor-widget-listing-categories .slick-dots li button {
  display: none !important;
}

@media (max-width: 991px) {
  .elementor-widget-listing-categories .lp-section-content-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .elementor-widget-listing-categories .city-girds2 {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 575px) {
  .elementor-widget-listing-categories .lp-section-content-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .elementor-widget-listing-categories .city-girds2 {
    aspect-ratio: 4 / 5;
  }

  .elementor-widget-listing-categories .category-style3-title-outer {
    padding: 14px 14px 16px;
  }

  .elementor-widget-listing-categories .category-style3-title-outer h3 a {
    font-size: 0.9375rem !important;
  }
}

/* ---------------------------------------------------------------------------
   Buscador del header interno: boton circular naranja al extremo derecho.
   El tema posiciona .lp-search-btn en absolute sobre el input "Que:"; aqui se
   neutraliza para que el boton sea un circulo real, alineado a la derecha y
   sin solaparse con el texto. El <img> del loader se oculta (era el circulo
   huerfano que aparecia debajo de la barra).
   --------------------------------------------------------------------------- */
body:not(.home) .lp-menu-bar .header-filter .lp-search-btn-header.pos-relative,
body:not(.home) .lp-menu-bar .header-filter .lp-search-btn-header {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  margin: 0 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  align-self: center !important;
  z-index: 1 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body:not(.home) .lp-menu-bar .header-filter .lp-search-btn-header .lp-search-btn {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  background-image: linear-gradient(135deg, var(--ub-accent) 0%, var(--ub-accent-strong) 100%) !important;
  box-shadow: 0 3px 8px rgba(249, 115, 22, 0.32) !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  cursor: pointer !important;
}

body:not(.home) .lp-menu-bar .header-filter .lp-search-btn-header .lp-search-btn:hover {
  filter: brightness(1.06);
}

body:not(.home) .lp-menu-bar .header-filter .lp-search-btn-header i {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  pointer-events: none !important;
}

body:not(.home) .lp-menu-bar .header-filter .lp-search-btn-header img {
  display: none !important;
  position: static !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}


/* Movil: el circulo de 40px se convierte en barra naranja de ancho completo,
   centrada debajo de los campos, con la lupa blanca en el medio. */
@media (max-width: 767px) {
  body:not(.home) .lp-menu-bar .header-filter .lp-search-btn-header,
  body:not(.home) .lp-menu-bar .header-filter .lp-search-btn-header.pos-relative {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    flex: 1 1 100% !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    margin: 15px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body:not(.home) .lp-menu-bar .header-filter .lp-search-btn-header .lp-search-btn {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }

  body:not(.home) .lp-menu-bar .header-filter .lp-search-btn-header i {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   Campos del buscador interno: sin recuadros grises, labels en flowed flow.

   1) El tema pone .input-group-addon.lp-border en position:absolute sobre el
      input, por eso "QUE:" se solapaba con el placeholder (el input arrancaba
      en el mismo pixel). Aqui los labels pasan a ser items flex reales
      (position:static) con ancho fijo + margin-right, asi el texto del input
      nunca puede pisarlos.
   2) Los wrappers .input-group quedan transparentes y sin borde para que se
      adopten el fondo blanco de la barra (nada de cajas grises pegadas).
   3) En movil los campos ocupan el 100% con esquinas limpias.
   --------------------------------------------------------------------------- */

/* Wrappers de los campos: transparentes, sin borde ni radio */
body:not(.home) .lp-menu-bar .header-filter form > .input-group,
body:not(.home) .lp-menu-bar .header-filter form > .search-form-field.input-group {
  height: 46px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Labels "QUE:" / "DONDE:" como flex item, no absolute */
body:not(.home) .lp-menu-bar .header-filter form .input-group-addon.lp-border {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 3 !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ub-ink-soft) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* Input de texto: ocupa el resto, sin padding-left (ya no hay label encima) */
body:not(.home) .lp-menu-bar .header-filter form input.lp-suggested-search,
body:not(.home) .lp-menu-bar .header-filter form input.lp-search-input {
  position: relative !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ub-ink) !important;
  font-size: 0.875rem !important;
}

body:not(.home) .lp-menu-bar .header-filter form input.lp-suggested-search::placeholder,
body:not(.home) .lp-menu-bar .header-filter form input.lp-search-input::placeholder {
  color: #94a3b8 !important;
}

/* Wrapper de select2 y su contenido: transparente, sin borde, sin sombra */
body:not(.home) .lp-menu-bar .header-filter form .ui-widget,
body:not(.home) .lp-menu-bar .header-filter form .select2-container {
  position: relative !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.home) .lp-menu-bar .header-filter form .select2-selection,
body:not(.home) .lp-menu-bar .header-filter form .select2-selection--single,
body:not(.home) .lp-menu-bar .header-filter form .select2-container--default .select2-selection--single {
  display: block !important;
  height: 44px !important;
  padding: 0 24px 0 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.home) .lp-menu-bar .header-filter form .select2-selection__rendered {
  padding: 0 !important;
  color: var(--ub-ink) !important;
  font-size: 0.875rem !important;
  line-height: 44px !important;
}

body:not(.home) .lp-menu-bar .header-filter form .select2-selection__arrow {
  top: 0 !important;
  height: 44px !important;
}

body:not(.home) .lp-menu-bar .header-filter form .select2-selection__arrow b {
  border-color: var(--ub-ink-soft) transparent transparent transparent !important;
}

/* Foco: solo un anillo suave, sin recuadro gris */
body:not(.home) .lp-menu-bar .header-filter form input.lp-suggested-search:focus,
body:not(.home) .lp-menu-bar .header-filter form input.lp-search-input:focus,
body:not(.home) .lp-menu-bar .header-filter form .select2-container--default.select2-container--focus .select2-selection--single {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Movil: campos al 100% del ancho, sin cajas grises, esquinas limpias */
@media (max-width: 767px) {
  body:not(.home) .lp-menu-bar .header-filter form > .input-group,
  body:not(.home) .lp-menu-bar .header-filter form > .search-form-field.input-group {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body:not(.home) .lp-menu-bar .header-filter form .input-group-addon.lp-border {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    margin-right: 6px !important;
    font-size: 10px !important;
  }

  body:not(.home) .lp-menu-bar .header-filter form input.lp-suggested-search,
  body:not(.home) .lp-menu-bar .header-filter form input.lp-search-input,
  body:not(.home) .lp-menu-bar .header-filter form .select2-selection--single {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* -------------------------------------------------------------------------
   Boton Enviar de los formularios Elementor (pagina de contacto).
   El <button> es blanco, pero los spans internos .elementor-button-text y
   .elementor-button-content-wrapper traen color gris del tema y, al heredarlo,
   el texto Enviar se ve gris sobre el fondo del boton.
   ------------------------------------------------------------------------- */
.elementor-form .elementor-field-type-submit .elementor-button,
.elementor-form .elementor-field-type-submit button[type=submit],
.elementor-form button[type=submit],
.elementor-form .elementor-button-content-wrapper,
.elementor-form .elementor-button-text {
  color: #ffffff !important;
}

/* 7. Botones inferiores de las tarjetas de listado: WhatsApp + direccion
      Sobrescriben el bloque generico de las lineas 556-616, por eso los
      selectores se prefijan con .lp-new-grid-bottom-button para ganar en
      especificidad y no dependen del orden de carga. */

.lp-new-grid-bottom-button ul.clearfix {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.lp-new-grid-bottom-button > ul.clearfix > li {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  float: none;
  margin: 0;
  padding: 0;
}

/* el li ya no es el boton: solo envuelve al enlace de WhatsApp */
.lp-new-grid-bottom-button ul.clearfix > li.show-number-wrap {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.lp-new-grid-bottom-button ul.clearfix > li.show-number-wrap:hover {
  background: none;
  border-color: transparent;
  transform: none;
}

.lp-new-grid-bottom-button ul li a.ub-grid-btn {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  font-family: var(--ub-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

/* El tema declara .classic-view-grid-container .lp-new-grid-bottom-button ul
   li:not(.show-number-wrap) a, que empata en especificidad con el bloque de
   arriba; al estar antes en la carga hay que subir un nivel más con dos
   clases para que el color del texto siga siendo el esperado. */
.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-maps,
.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-whatsapp {
  font-size: 13px;
  font-weight: 600;
}

.lp-new-grid-bottom-button ul li a.ub-grid-btn:hover,
.lp-new-grid-bottom-button ul li a.ub-grid-btn:focus {
  opacity: 0.88;
  color: inherit;
  text-decoration: none;
  transform: none;
}

.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-whatsapp,
.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-whatsapp:hover,
.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-whatsapp:focus {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
}

.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-whatsapp i {
  color: #059669;
  font-size: 15px;
}

.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-maps,
.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-maps:hover,
.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-maps:focus {
  background: #1d4ed8;
  border: none;
  color: #ffffff !important;
}

.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-maps i,
.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-maps span,
.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-maps:hover,
.lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-maps:focus {
  color: #ffffff !important;
}

@media (max-width: 480px) {
  .lp-new-grid-bottom-button ul.clearfix {
    gap: 6px;
  }

  .lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-maps,
  .lp-new-grid-bottom-button ul li a.ub-grid-btn.ub-grid-btn-whatsapp {
    gap: 5px;
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
  }
}

/* 8. Glifo de WhatsApp
      El tema carga Font Awesome 4 (font-awesome.min.css) y Font Awesome 6
      (all.css) a la vez, y el FA6 redefine .fa a la familia "Free", que no
      tiene el glifo \f232: por eso "fa fa-whatsapp" pintaba un cuadro vacio.
      v4-shims.css, que remapea .fa.fa-whatsapp a Brands, no esta en cola.
      front-page.php ya usa "fab fa-whatsapp"; estas reglas cubren cualquier
      icono de WhatsApp que llegue con la clase solida o inyectado por CSS. */

i.fa-whatsapp,
.ub-btn-card .fa-whatsapp,
.ub-grid-btn .fa-whatsapp,
.lp-card-whatsapp-btn .fa-whatsapp,
.btn-whatsapp .fa-whatsapp {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
  font-weight: 400 !important;
  font-style: normal;
  line-height: 1;
}

/* el codigo va solo en ::before: ponerlo tambien en el elemento duplicaria el
   icono, porque el <i> se pinta ademas con su propio contenido generado */
i.fa-whatsapp::before,
.ub-btn-card .fa-whatsapp::before,
.ub-grid-btn .fa-whatsapp::before,
.lp-card-whatsapp-btn .fa-whatsapp::before,
.btn-whatsapp .fa-whatsapp::before {
  content: "\f232" !important;
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
  font-weight: 400 !important;
  font-style: normal;
  display: inline-block;
}

/* 9. Compartir: sin barras sueltas de AddToAny y la etiqueta en el footer
      El renderizado automatico ya se anula en functions.php con el filtro
      addtoany_sharing_disabled; esto cubre los kits que lleguen por shortcode
      o por el widget. La excepcion .footer-socials mantiene viva cualquier
      kit anclado al footer. */

.addtoany_share_save_container,
.a2a_kit_size_32:not(.footer-socials .a2a_kit) {
  display: none !important;
}

.ekit-template-content-footer .elementor-social-icons-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ekit-template-content-footer .elementor-social-icons-wrapper .elementor-grid-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ekit-template-content-footer .ub-footer-share-label {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #64748b;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ekit-template-content-footer .elementor-social-icons-wrapper {
    justify-content: center;
  }

  .ekit-template-content-footer .ub-footer-share-label {
    margin-right: 8px;
  }
}

/* 10. CTA de /selecciona-tu-plan/ (page-id-98)
      Elementor pinta el boton en el color de enlace del kit (#217fc7) sobre
      el fondo naranja del plan: texto oscuro sobre naranja, ilegible. Solo hay
      un .elementor-button en esa pagina, asi que el alcance por page-id no
      afecta a ningun otro boton del sitio. */

body.page-id-98 a.elementor-button,
body.page-id-98 button.elementor-button {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border: 0;
  border-radius: 9999px;
background: var(--ub-accent, #f97316) !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35) !important;
  transition: all 0.2s ease;
}

body.page-id-98 a.elementor-button:hover,
body.page-id-98 a.elementor-button:focus,
body.page-id-98 button.elementor-button:hover,
body.page-id-98 button.elementor-button:focus {
  color: #ffffff !important;
  background: var(--ub-accent, #f97316) !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45) !important;
}

/* el texto puede venir en un span interno de Elementor */
body.page-id-98 a.elementor-button span,
body.page-id-98 button.elementor-button span {
  color: #ffffff !important;
}

/* 11. Detalle de evento (/eventos/<slug>/)
       El CPT events lo dibuja single-events.php del tema hijo: el del padre
       hacia un return temprano con el evento vencido y dejaba la pagina vacia. */

body.single-events {
  background: var(--ub-bg);
}

.ub-event {
  padding: clamp(1rem, 2.4vw, 2rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.ub-event-shell {
  background: var(--ub-surface);
  border: 1px solid var(--ub-line);
  border-radius: var(--ub-radius-xl);
  box-shadow: var(--ub-shadow-md);
  overflow: hidden;
}

/* --- Cabecera con el cartel/flyer desenfocado de fondo --- */
.ub-event-hero {
  position: relative;
  min-height: clamp(240px, 34vw, 380px);
  display: flex;
  align-items: flex-end;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  isolation: isolate;
}

.ub-event-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--ub-event-flyer);
  background-size: cover;
  background-position: center;
  filter: blur(12px) brightness(0.4);
  transform: scale(1.1);
}

.ub-event-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.45) 0%, rgba(2, 6, 23, 0.86) 100%);
}

.ub-event-hero-inner {
  max-width: 720px;
  color: #ffffff;
}

.ub-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--ub-radius-pill);
  font-size: var(--ub-text-xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: var(--ub-shadow-xs);
}

.ub-event-badge--live {
  background: var(--ub-success-soft);
  color: var(--ub-success);
}

.ub-event-badge--past {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ub-ink-soft);
}

.ub-event-title {
  margin: 0.9rem 0 0;
  font-size: var(--ub-text-hero);
  line-height: 1.08;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(2, 6, 23, 0.55);
}

.ub-event-hosted {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.86);
}

.ub-event-hosted a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Cuerpo: contenido a la izquierda, datos y contacto a la derecha --- */
.ub-event-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.ub-event-main {
  min-width: 0;
}

/* El frame se ajusta al cartel: los flyers suelen ser de 369x508 y escalarlos
   al ancho de la columna (713px) los deja borrosos. */
.ub-event-flyer {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  border-radius: var(--ub-radius-lg);
  overflow: hidden;
  background: var(--ub-line-soft);
  box-shadow: var(--ub-shadow-sm);
}

.ub-event-flyer img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 620px;
}

.ub-event-content {
  color: var(--ub-ink-soft);
  font-size: 1rem;
  line-height: 1.75;
}

.ub-event-content > *:first-child {
  margin-top: 0;
}

.ub-event-content p:last-child {
  margin-bottom: 0;
}

.ub-event-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--ub-radius-md);
  margin: 1.1rem 0;
  box-shadow: var(--ub-shadow-sm);
}

.ub-event-content a {
  color: var(--ub-primary);
  font-weight: 600;
}

.ub-event-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ub-event-card {
  border: 1px solid var(--ub-line);
  border-radius: var(--ub-radius-lg);
  background: var(--ub-surface);
  padding: 1.25rem;
  box-shadow: var(--ub-shadow-xs);
}

.ub-event-card--cta {
  background: var(--ub-primary-ghost);
  border-color: rgba(37, 99, 235, 0.22);
}

.ub-event-card-title {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ub-ink);
}

.ub-event-meta {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ub-event-meta li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 0 0.65rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--ub-line-soft);
}

.ub-event-meta li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ub-event-meta li > i {
  grid-row: span 2;
  margin-top: 0.28rem;
  color: var(--ub-primary);
}

.ub-event-meta-label {
  font-size: var(--ub-text-xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ub-faint);
}

.ub-event-meta-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ub-ink);
  overflow-wrap: anywhere;
}

.ub-event-ticket {
  display: inline-block;
  margin: 0 0.4rem 0.35rem 0;
  padding: 0.3rem 0.75rem;
  border-radius: var(--ub-radius-pill);
  background: var(--ub-accent-soft);
  color: var(--ub-accent-strong);
  font-weight: 700;
  font-size: var(--ub-text-sm);
  text-decoration: none;
  border: 1px solid rgba(249, 115, 22, 0.35);
  transition: background var(--ub-dur) var(--ub-ease), color var(--ub-dur) var(--ub-ease);
}

.ub-event-ticket:hover {
  background: var(--ub-accent);
  color: #ffffff;
}

.ub-event-cta-name {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 700;
}

.ub-event-cta-name a {
  color: var(--ub-ink);
  text-decoration: none;
}

.ub-event-cta-name a:hover {
  color: var(--ub-primary);
}

.ub-event-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ub-event-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.1rem;
  border-radius: var(--ub-radius-pill);
  font-size: var(--ub-text-sm);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--ub-dur) var(--ub-ease), box-shadow var(--ub-dur) var(--ub-ease), background var(--ub-dur) var(--ub-ease);
}

.ub-event-btn:hover {
  transform: translateY(-1px);
  color: #ffffff;
}

.ub-event-btn--primary {
  background: var(--ub-primary);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}

.ub-event-btn--primary:hover {
  background: var(--ub-primary-strong);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.34);
}

.ub-event-btn--whatsapp {
  background: var(--ub-success);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.28);
}

.ub-event-btn--whatsapp:hover {
  background: #15803d;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.34);
}

.ub-event-btn--maps {
  margin-top: 1rem;
  width: 100%;
  background: var(--ub-surface);
  border-color: var(--ub-line);
  color: var(--ub-ink);
}

.ub-event-btn--maps:hover {
  background: var(--ub-ink);
  color: #ffffff;
}

.ub-event-btn i {
  font-size: 0.95rem;
}

/* Movil: una sola columna y el bloque de datos antes del contenido largo */
@media (max-width: 900px) {
  .ub-event-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .ub-event {
    padding: 0 0 2.5rem;
  }

  .ub-event .ub-container {
    padding: 0;
  }

  .ub-event-shell {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .ub-event-hero {
    min-height: 220px;
  }

  .ub-event-flyer {
    width: 100%;
    border-radius: var(--ub-radius-md);
  }
}

/* 12. Pagina legal (/contrato-terminos-y-politicas/, page-id-3)
       Es un widget de Tabs de Elementor: .e-n-tabs-heading con tres
       <button class="e-n-tab-title"> y .e-n-tabs-content con un contenedor por
       panel. Venia con los tabs rectangulares (activo naranja, inactivos
       azul #217fc7, sin radio) y el texto legal a 14px en el gris por defecto
       del tema (#7a7a7a). Todo el alcance va por page-id-3 para no tocar otros
       Tabs de Elementor del sitio. La cabecera ya usa header-without-topbar
       igual que /contacto/, asi que no se modifica aqui. */

/* --- Barra de pestañas --- */
body.page-id-3 .e-n-tabs-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 30px 0;
}

/* La especificidad tiene que ganarle al CSS generado por Elementor
   (.elementor-3 .elementor-element.elementor-element-e3cbbab > .e-n-tabs >
   .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:not(:hover) = 0,8,0
   pinta el fondo de los tabs inactivos con el color primario del kit), por eso
   el fondo necesita !important y no basta con selectores mas especificos. */
body.page-id-3 .e-n-tabs-heading .e-n-tab-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  background: #ffffff !important;
  color: #475569;
  box-shadow: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Elementor pinta el texto del tab en un span propio con su propio color y
   tamano, hay que heredarlos o el tab activo se leeria gris sobre naranja. */
body.page-id-3 .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.4;
}

body.page-id-3 .e-n-tabs-heading .e-n-tab-title:hover,
body.page-id-3 .e-n-tabs-heading .e-n-tab-title:focus-visible {
  background: #ffffff !important;
  color: var(--ub-accent-strong, #ea580c) !important;
  border-color: var(--ub-accent, #f97316);
}

/* Elementor marca el tab activo con aria-selected en esta version */
body.page-id-3 .e-n-tabs-heading .e-n-tab-title[aria-selected='true'],
body.page-id-3 .e-n-tabs-heading .e-n-tab-title.e-n-tabs-title-active,
body.page-id-3 .e-n-tabs-heading .e-n-tab-title.active {
  background: var(--ub-accent, #f97316) !important;
  color: #ffffff !important;
  border-color: var(--ub-accent, #f97316);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
  font-weight: 600;
}

body.page-id-3 .e-n-tabs-heading .e-n-tab-title[aria-selected='true'] .e-n-tab-title-text,
body.page-id-3 .e-n-tabs-heading .e-n-tab-title.e-n-tabs-title-active .e-n-tab-title-text,
body.page-id-3 .e-n-tabs-heading .e-n-tab-title.active .e-n-tab-title-text {
  color: #ffffff;
}

/* --- Tarjeta de lectura ---
   En escritorio la tarjeta es el propio .e-n-tabs-content. En movil Elementor
   convierte el widget en acordeon y pone .e-n-tabs-content en display:contents
   (no genera caja), asi que ahi la tarjeta se aplica a cada panel visible. */
body.page-id-3 .e-n-tabs-content {
  max-width: 900px;
  margin: 0 auto 50px;
  background: #ffffff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  color: #334155;
  font-size: 15px;
  line-height: 1.7;
}

/* los contenedores anidados de Elementor traen su propio ancho y padding */
body.page-id-3 .e-n-tabs-content > .elementor-element,
body.page-id-3 .e-n-tabs-content .e-con-inner {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

body.page-id-3 .e-n-tabs-content p {
  color: #334155;
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 18px;
}

body.page-id-3 .e-n-tabs-content p:last-child {
  margin-bottom: 0;
}

body.page-id-3 .e-n-tabs-content h2,
body.page-id-3 .e-n-tabs-content h3,
body.page-id-3 .e-n-tabs-content h4 {
  color: #0f172a;
  font-weight: 700;
  margin: 28px 0 12px;
}

/* Los titulos de seccion estan como <p><strong>1. TITULO</strong></p>, sin
   h2/h3 reales, asi que seDetectan por :has(). Los nodos de texto no cuentan
   para :only-child, por eso tambien entra el parrafo "15." + texto corrido:
   solo cambia su margen, el strong sigue en linea. */
body.page-id-3 .e-n-tabs-content p:has(> strong:only-child) {
  margin: 28px 0 12px;
}

body.page-id-3 .e-n-tabs-content p:has(> strong:only-child) strong {
  color: #0f172a;
  font-weight: 700;
  font-size: 15px;
}

body.page-id-3 .e-n-tabs-content a {
  color: var(--ub-primary, #2563eb);
  font-weight: 600;
}

/* AddToAny ya esta deshabilitado por filtro en functions.php; esta regla
   cubre el contenedor flotante por si el plugin se vuelve a activar aqui. */
body.page-id-3 .addtoany_share_save_container {
  display: none !important;
}

@media (max-width: 1024px) {
  body.page-id-3 .e-n-tabs-content {
    padding: 28px;
  }
}

/* Movil: acordeon de Elementor, la tarjeta pasa a cada panel */
@media (max-width: 767px) {
  body.page-id-3 .e-n-tabs-content {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  body.page-id-3 .e-n-tabs-content > .elementor-element {
    display: block;
    max-width: 900px;
    margin: 0 auto 32px;
    padding: 22px 18px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  }
}

@media (max-width: 600px) {
  body.page-id-3 .e-n-tabs-heading {
    gap: 10px;
    margin: 20px 0;
  }

  body.page-id-3 .e-n-tabs-heading .e-n-tab-title {
    padding: 9px 16px;
    font-size: 13px;
  }
}

/* ================================================================
   Pines del mapa: isotipo UbiCame con glow neon y cross-hover
   ================================================================ */

/* El tema dibuja el pin como un cuadrado girado 45deg (.pin) con un circulo
   interior (.lpmap-icon-contianer). Con el isotipo se neutraliza toda esa
   geometria y se deja solo la imagen, anclada por su base sobre la coordenada
   (38x46, como pide la marca). */
.lpmap-icon-shape.ub-isotipo-pin {
  width: 38px !important;
  height: 46px !important;
  margin: -46px 0 0 -19px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  z-index: auto !important;
}

.lpmap-icon-shape.ub-isotipo-pin .lpmap-icon-contianer {
  width: 38px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  left: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  line-height: normal !important;
}

.lpmap-icon-shape.ub-isotipo-pin .lpmap-icon-contianer img {
  width: 38px;
  height: 46px;
  object-fit: contain;
  display: block;
  position: relative;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
  will-change: transform, filter;
}

/* Pines que el tema dibuja como <img> suelto (mapa de /contacto/): la opcion
   lp_map_pin apunta al isotipo original (1850px), asi que se limita aqui. */
.leaflet-marker-icon img {
  max-width: 38px;
  height: auto;
}

.leaflet-marker-icon:hover {
  z-index: 1000 !important;
}

/* Glow neon naranja al pasar sobre el marcador o al resaltarlo desde la
   tarjeta (clase ub-neon que pone ub-map-pins.js). */
.leaflet-marker-icon:hover img,
.lpmap-icon-shape.ub-isotipo-pin:hover img,
.lpmap-icon-shape.ub-isotipo-pin.ub-neon img {
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.9)) drop-shadow(0 0 16px rgba(249, 115, 22, 0.5));
  transform: scale(1.18) translateY(-4px);
  z-index: 1000 !important;
}

/* ================================================================
   Anular el rojo de ListingPro en el pin activo (hover de tarjeta)
   ================================================================

   Al pasar el cursor sobre una tarjeta, main.js anade .cardHighlight al
   .lpmap-icon-shape correspondiente y el CSS del tema lo pinta de rojo:
   - main-new.css: .lpmap-icon-shape.cardHighlight { background-color:#ff0000 !important }
   - classic-archive.css: .pin.cardHighlight { background:#FF4A68 !important }
   - classic-archive.css: .pin.cardHighlight .lpmap-icon-contianer { border:1px solid #FF4A68 }
   - dynamic-css: .lpmap-icon-shape.cardHighlight::after { border-top-color:<tema> !important }
   Ademas .pin:hover se pinta de azul (#688bf7) en main-new.css. Aqui todo
   eso se neutraliza y se sustituye por el resplandor neon naranja. */
.lpmap-icon-shape.pin.cardHighlight,
.lpmap-icon-shape.cardHighlight.ub-isotipo-pin,
.lpmap-icon-shape.pin:hover,
.pin:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pin.cardHighlight .lpmap-icon-contianer,
.lpmap-icon-shape.cardHighlight .lpmap-icon-contianer {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
}

.lpmap-icon-shape.cardHighlight::after,
.lpmap-icon-shape.pin.cardHighlight::after,
.pin.cardHighlight::after {
  background: none !important;
  border-top-color: transparent !important;
}

/* Selectores genericos de marcador activo/resaltado.
   El transform y el filtro van sobre la imagen interna: el wrapper
   .leaflet-marker-icon lleva el translate3d de posicion inline de Leaflet y
   no debe pisarse con un transform. */
.leaflet-marker-icon.active,
.leaflet-marker-icon.highlighted,
.leaflet-marker-icon.lp-active-marker,
.lp-active-marker,
.mapboxgl-marker.active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  z-index: 99999 !important;
}

.leaflet-marker-icon.active img,
.leaflet-marker-icon.highlighted img,
.leaflet-marker-icon.lp-active-marker img,
.lp-active-marker img,
.mapboxgl-marker.active img,
.lpmap-icon-shape.cardHighlight img {
  filter: drop-shadow(0 0 10px rgba(249, 115, 22, 1)) drop-shadow(0 0 20px rgba(249, 115, 22, 0.6)) !important;
  transform: scale(1.22) translateY(-6px) !important;
  z-index: 99999 !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease !important;
}

/* Tarjetas del listado: mismo resplandor al pasar el cursor, o al pasar sobre
   su pin en el mapa (clase ub-neon-card). */
.lp-grid-box-contianer {
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}

.lp-grid-box-contianer:hover,
.lp-grid-box-contianer.ub-neon-card {
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.9)) drop-shadow(0 0 16px rgba(249, 115, 22, 0.5));
  transform: scale(1.18) translateY(-4px);
  z-index: 1000 !important;
}

@media (prefers-reduced-motion: reduce) {
  .lpmap-icon-shape.ub-isotipo-pin .lpmap-icon-contianer img,
  .lpmap-icon-shape.cardHighlight img,
  .lp-grid-box-contianer {
    transition: none;
  }

  .leaflet-marker-icon:hover img,
  .lpmap-icon-shape.ub-isotipo-pin:hover img,
  .lpmap-icon-shape.ub-isotipo-pin.ub-neon img,
  .lpmap-icon-shape.cardHighlight img,
  .lp-grid-box-contianer:hover,
  .lp-grid-box-contianer.ub-neon-card {
    transform: none;
  }
}

/* ================================================================
   Hero del Home: dos columnas (logotipo a la izquierda, titular y
   buscador a la derecha) y logo del header mas protagonista.
   ================================================================ */

/* Fondo panoramico (paisaje de ciudad y montanas) con degradado de
   lectura para que el logo y el buscador resalten. Fallback azul de
   marca mientras la imagen carga. */
.ub-hero {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%),
    url("../images/hero_banner_paisaje_ubicame.png") center/cover no-repeat !important;
  background-color: #00288e;
  position: relative;
}

.ub-hero-inner {
  display: flex !important;
  flex-direction: row;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 40px;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 60px 40px 40px 40px !important;
}

.ub-hero-logo {
  flex: 0 0 420px !important;
  max-width: 420px !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
  /* -70px en pantallas anchas; en viewports mas estrechos se recorta el
     desplazamiento para que el logo nunca se salga del borde izquierdo. */
  transform: translate(
    calc(-1 * min(70px, max(0px, (100vw - 1400px) / 2) + 20px)),
    90px
  ) !important;
  position: relative !important;
  transition: transform 0.2s ease !important;
  margin-left: 0 !important;
  text-align: left !important;
}

.ub-hero-logo img {
  width: 100% !important;
  max-width: 400px !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45)) !important;
}

.ub-hero-content {
  flex: 1 !important;
  max-width: 800px !important;
  margin-top: 20px !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* Titular y subtitulo en blanco puro con sombra para la maxima
   nitidez sobre el paisaje. */
.ub-hero-title {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.ub-hero-title .ub-hero-accent {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.ub-hero-sub {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Tablets y moviles: el logo se apila centrado arriba y el buscador
   conserva todo el ancho disponible sin empujarse fuera de la pantalla. */
@media (max-width: 991.98px) {
  .ub-hero-inner {
    flex-direction: column !important;
    gap: 24px;
    padding: 36px 20px !important;
    text-align: center;
  }

  .ub-hero-logo {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    text-align: center !important;
    transform: translate(0, 0) !important;
  }

  .ub-hero-logo img {
    max-width: 190px !important;
    margin: 0 auto 20px auto !important;
  }

  .ub-hero-content {
    max-width: 100% !important;
    margin-top: 0 !important;
  }
}